Skip to content

Commit a7eeb57

Browse files
pranavms13claude
pranavms13
and
claude
committed
Add cinematic landing site + GitHub Pages deploy workflow
Standalone static site under site/ (relative paths, works at the project-page subpath). GitHub Actions deploys it to Pages on push to the website branch. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
1 parent 91f5f2e commit a7eeb57

8 files changed

Lines changed: 462 additions & 0 deletions

File tree

‎.github/workflows/deploy-site.yml‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
name: Deploy site to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [website]
6+
paths: ["site/**", ".github/workflows/deploy-site.yml"]
7+
workflow_dispatch:
8+
9+
permissions:
10+
contents: read
11+
pages: write
12+
id-token: write
13+
14+
concurrency:
15+
group: pages
16+
cancel-in-progress: true
17+
18+
jobs:
19+
deploy:
20+
environment:
21+
name: github-pages
22+
url: ${{ steps.deployment.outputs.page_url }}
23+
runs-on: ubuntu-latest
24+
steps:
25+
- uses: actions/checkout@v4
26+
- uses: actions/configure-pages@v5
27+
- uses: actions/upload-pages-artifact@v3
28+
with:
29+
path: site
30+
- id: deployment
31+
uses: actions/deploy-pages@v4

‎site/.nojekyll‎

Whitespace-only changes.

‎site/assets/editor.png‎

74.8 KB
Loading

‎site/assets/logo.png‎

258 KB
Loading

‎site/assets/sample.mp4‎

267 KB
Binary file not shown.

‎site/index.html‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>OpenScreen Studio — cinematic screen recordings, open source</title>
7+
<meta name="description" content="An open-source macOS screen recorder with a polished editor: auto-zoom-on-click, cursor overlay, and wallpaper backgrounds. In-process ScreenCaptureKit. A free Screen Studio alternative." />
8+
<meta name="theme-color" content="#08070a" />
9+
<meta property="og:title" content="OpenScreen Studio" />
10+
<meta property="og:description" content="Cinematic screen recordings on macOS. Open source. Auto-zoom, cursor overlay, wallpaper backgrounds." />
11+
<meta property="og:type" content="website" />
12+
<link rel="icon" href="assets/logo.png" />
13+
<link rel="preconnect" href="https://fonts.googleapis.com" />
14+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
15+
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=Hanken+Grotesk:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet" />
16+
<link rel="stylesheet" href="styles.css" />
17+
</head>
18+
<body>
19+
<div class="grain" aria-hidden="true"></div>
20+
<div class="spotlight" aria-hidden="true"></div>
21+
22+
<header class="nav" id="nav">
23+
<a class="brand" href="#top">
24+
<img src="assets/logo.png" alt="" width="30" height="30" />
25+
<span>OpenScreen&nbsp;Studio</span>
26+
</a>
27+
<nav class="nav-links">
28+
<a href="#features">Features</a>
29+
<a href="#capture">How it works</a>
30+
<a href="#open">Open source</a>
31+
<a class="ghost-btn" href="https://github.com/Glyph-Software/OpenScreenStudio" target="_blank" rel="noopener">GitHub ↗</a>
32+
</nav>
33+
</header>
34+
35+
<main id="top">
36+
37+
<section class="hero">
38+
<div class="hero-copy reveal">
39+
<span class="eyebrow">Open-source · macOS · ScreenCaptureKit</span>
40+
<h1>
41+
Screen recordings,<br />
42+
<span class="serif">made&nbsp;cinematic.</span>
43+
</h1>
44+
<p class="lede">
45+
A free, open-source <a href="https://screen.studio" target="_blank" rel="noopener">Screen&nbsp;Studio</a>
46+
alternative for macOS. Record in-process with ScreenCaptureKit, then let the editor
47+
auto-zoom on every click, smooth the cursor, and drop your capture onto a gorgeous wallpaper.
48+
</p>
49+
<div class="cta-row">
50+
<a class="solid-btn" href="https://github.com/Glyph-Software/OpenScreenStudio" target="_blank" rel="noopener">
51+
Get it on GitHub
52+
</a>
53+
<a class="text-btn" href="#capture">See how capture works →</a>
54+
</div>
55+
<div class="stat-strip">
56+
<div><b>0</b><span>ffmpeg in the record path</span></div>
57+
<div><b>30fps</b><span>in-process SCK capture</span></div>
58+
<div><b>1-click</b><span>auto-zoom from cursor track</span></div>
59+
</div>
60+
</div>
61+
62+
<figure class="hero-stage reveal" style="--d:.15s">
63+
<div class="screen-frame">
64+
<video src="assets/sample.mp4" autoplay muted loop playsinline poster="assets/editor.png"></video>
65+
<div class="zoom-tag">● AUTO-ZOOM ON CLICK</div>
66+
</div>
67+
<div class="frame-glow" aria-hidden="true"></div>
68+
</figure>
69+
</section>
70+
71+
<section class="marquee" aria-hidden="true">
72+
<div class="marquee-track">
73+
<span>Auto-zoom</span><i>✦</i><span>Cursor overlay</span><i>✦</i><span>Wallpaper backgrounds</span><i>✦</i><span>Pause / resume / restart</span><i>✦</i><span>Project save &amp; open</span><i>✦</i><span>Display · window · area</span><i>✦</i>
74+
<span>Auto-zoom</span><i>✦</i><span>Cursor overlay</span><i>✦</i><span>Wallpaper backgrounds</span><i>✦</i><span>Pause / resume / restart</span><i>✦</i><span>Project save &amp; open</span><i>✦</i><span>Display · window · area</span><i>✦</i>
75+
</div>
76+
</section>
77+
78+
<section class="features" id="features">
79+
<header class="sec-head reveal">
80+
<span class="eyebrow">What's inside</span>
81+
<h2>Every detail tuned for <span class="serif">beautiful</span> demos.</h2>
82+
</header>
83+
<div class="grid">
84+
<article class="card big reveal">
85+
<div class="card-art editor-shot">
86+
<img src="assets/editor.png" alt="The OpenScreen Studio editor: viewport, inspector, timeline with zoom blocks" />
87+
</div>
88+
<div class="card-body">
89+
<h3>A real editor, not a trimmer</h3>
90+
<p>Viewport, inspector, and a timeline with draggable zoom blocks. Swap the background to a macOS wallpaper, a gradient, or a solid — tune padding and shape live.</p>
91+
</div>
92+
</article>
93+
94+
<article class="card reveal" style="--d:.05s">
95+
<div class="card-icon">⌖</div>
96+
<h3>Auto-zoom on click</h3>
97+
<p>A cursor sidecar records every click while you record. The editor derives smooth zoom segments from it — punch-in where it matters, automatically.</p>
98+
</article>
99+
100+
<article class="card reveal" style="--d:.1s">
101+
<div class="card-icon">⇲</div>
102+
<h3>Cursor overlay</h3>
103+
<p>Cursor position, clicks, and shape transitions are tracked at ~poll rate and replayed as a clean, oversized overlay on top of your footage.</p>
104+
</article>
105+
106+
<article class="card reveal" style="--d:.15s">
107+
<div class="card-icon">◳</div>
108+
<h3>Display, window, or area</h3>
109+
<p>Per-display transparent picker overlays let you grab a whole screen, a single window, or drag out an exact region before the 3-2-1 countdown.</p>
110+
</article>
111+
112+
<article class="card reveal" style="--d:.2s">
113+
<div class="card-icon">◆</div>
114+
<h3>In-process, no sidecar</h3>
115+
<p>Recording is a native <code>SCStream</code> writing mp4 directly via ScreenCaptureKit. No ffmpeg in the capture path, no AVFoundation device juggling.</p>
116+
</article>
117+
118+
<article class="card reveal" style="--d:.25s">
119+
<div class="card-icon">⌘</div>
120+
<h3>Pause, resume, restart</h3>
121+
<p>Full transport control from a frameless always-on-top pill — or stop from the macOS menu bar and the app finalizes the same artifact.</p>
122+
</article>
123+
</div>
124+
</section>
125+
126+
<section class="capture" id="capture">
127+
<header class="sec-head reveal">
128+
<span class="eyebrow">Under the hood</span>
129+
<h2>From key-press to <span class="serif">graded</span> clip.</h2>
130+
</header>
131+
<ol class="steps">
132+
<li class="reveal"><b>01</b><h4>Pick a source</h4><p>Transparent overlays span every display. Choose a screen, window, or dragged area.</p></li>
133+
<li class="reveal" style="--d:.08s"><b>02</b><h4>Record in-process</h4><p>ScreenCaptureKit streams straight to mp4 at 30fps while a cursor track polls clicks and shapes.</p></li>
134+
<li class="reveal" style="--d:.16s"><b>03</b><h4>Hand off the artifact</h4><p>On stop, an mp4 plus a <code>.cursor.json</code> sidecar land in <code>~/Movies/OpenScreen&nbsp;Studio</code>.</p></li>
135+
<li class="reveal" style="--d:.24s"><b>04</b><h4>Edit &amp; beautify</h4><p>The editor reads the sidecar, derives auto-zoom, paints the cursor overlay, and frames it on a wallpaper.</p></li>
136+
</ol>
137+
</section>
138+
139+
<section class="open" id="open">
140+
<div class="open-inner reveal">
141+
<span class="eyebrow">Free &amp; open</span>
142+
<h2>Built with Tauri&nbsp;2, React&nbsp;19 &amp; Rust.</h2>
143+
<p>No telemetry, no account, no paywall. Clone it, build it with Bun, ship your own. macOS&nbsp;13+ (recording path needs macOS&nbsp;15+).</p>
144+
<div class="code-card">
145+
<div class="code-dots"><i></i><i></i><i></i></div>
146+
<pre><code><span class="c">// install deps + fetch bundled ffmpeg</span>
147+
bun install
148+
<span class="c">// run the desktop app (frontend + Rust)</span>
149+
bun run tauri dev</code></pre>
150+
</div>
151+
<div class="cta-row">
152+
<a class="solid-btn" href="https://github.com/Glyph-Software/OpenScreenStudio" target="_blank" rel="noopener">Star on GitHub</a>
153+
<a class="text-btn" href="https://github.com/Glyph-Software/OpenScreenStudio/blob/main/README.md" target="_blank" rel="noopener">Read the docs →</a>
154+
</div>
155+
</div>
156+
</section>
157+
158+
</main>
159+
160+
<footer class="footer">
161+
<div class="foot-brand">
162+
<img src="assets/logo.png" alt="" width="26" height="26" />
163+
<span>OpenScreen Studio</span>
164+
</div>
165+
<p>
166+
Built &amp; maintained by
167+
<a href="https://glyphsoftware.org" target="_blank" rel="noopener">Glyph Software LLP</a>
168+
— crafting scalable solutions for modern needs. Bengaluru, India.
169+
</p>
170+
<p class="legal">© <span id="year">2026</span> · Open source · A Screen Studio clone, with love.</p>
171+
</footer>
172+
173+
<script src="main.js"></script>
174+
</body>
175+
</html>

‎site/main.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// Scroll reveals, sticky-nav state, footer year.
2+
const nav = document.getElementById('nav');
3+
const onScroll = () => nav.classList.toggle('scrolled', window.scrollY > 24);
4+
onScroll();
5+
addEventListener('scroll', onScroll, { passive: true });
6+
7+
const io = new IntersectionObserver(
8+
(entries) => {
9+
for (const e of entries) {
10+
if (e.isIntersecting) {
11+
e.target.classList.add('in');
12+
io.unobserve(e.target);
13+
}
14+
}
15+
},
16+
{ threshold: 0.12, rootMargin: '0px 0px -8% 0px' }
17+
);
18+
document.querySelectorAll('.reveal').forEach((el) => io.observe(el));
19+
20+
document.getElementById('year').textContent = new Date().getFullYear();

0 commit comments

Comments
 (0)