Gemini Spec Brand Film — source

A ~39-second, music-driven motion-graphics brand film — a spec concept posted with the caption "If Google hired me." It's built entirely from code (HTML + CSS + GSAP), rendered to video by HyperFrames (HeyGen's HTML-to-video engine), and directed with Claude Code (Anthropic's agentic CLI). No AI-generated video, no template — every frame is hand-authored and deterministic.

If you came here from X asking for "the prompt and source code" — this is it. Start with PROMPT.md (what actually kicked it off) and STORYBOARD.md (the shot-by-shot brief the build followed).

What's in here

File / folder	What it is
PROMPT.md	The verbatim opening prompt + how it was really directed
STORYBOARD.md	The shot-by-shot creative brief (the closest thing to a "detailed prompt")
CONTINUITY.md	The match-cut / boundary rules that make the four acts flow as one continuous shot
frame.md	Creative direction — palette, type, motion craft spec
index.html	Root composition: mounts the 4 acts + the full audio layout (BGM + 41 SFX cues)
compositions/frames/act1–4.html	The four acts: ignite → ask → answers → lockup (~2,500 lines of GSAP)
audio_meta.json	Every audio cue with timing + volume
assets/fonts/	Roboto, Roboto Mono, Figtree (open-source)
package.json, hyperframes.json	Project + build config
ASSETS.md	What you need to supply (music, SFX, one photo) and where to get it
AGENTS.md	The HyperFrames project conventions the agent followed

How it works (the short version)

A HyperFrames composition is an HTML file whose DOM declares timing with data-* attributes (data-start, data-duration, data-track-index) and whose animation is a paused GSAP timeline registered on window.__timelines. The renderer seeks that timeline frame-by-frame and captures each frame — so everything must be deterministic (no Math.random, no Date.now, no network). The film is one root comp mounting four act sub-comps, stitched with "match-cut boundaries": each act opens on a frame pixel- identical to the previous act's closing frame, so four scenes read as one unbroken camera move. See CONTINUITY.md for how that's enforced.

Run it yourself

Requires Node.js. From this folder:

npm run dev      # preview server (opens the HyperFrames studio in your browser)
npm run check    # lint + validate + inspect
npm run render   # render to MP4

First, read ASSETS.md and drop in your own music / SFX / photo — the code references them by path, so it won't fully preview or render until those exist. All the technique is in the source and docs regardless.

The commands run npx hyperframes under the hood (see package.json); npx fetches the pinned CLI version automatically. HyperFrames docs: https://hyperframes.heygen.com.

License / usage

The code and docs in this package are shared freely — learn from them, adapt them, build your own films. This is spec work, a fan concept, not affiliated with or endorsed by Google; treat the Gemini concept accordingly (see ASSETS.md). The fonts keep their own open-source licenses (Apache 2.0 / OFL). Music, SFX, and the photo are not included — supply your own royalty-free equivalents.