freudianflips/breakout-launch-videos

Launch motion

Tool manual under launch-film. Start at skills/launch-film/SKILL.md: it holds the core, the hook-plus-body template and the lessons. Where this page differs, launch-film wins.

The bar: supreme motion, room to breathe, clean type, fast, on brand, and not what everyone on X ships. HyperFrames supplies excellent craft rules, but its example files ship a stock look (near-black void, violet and neon, glow halos, back.out pops, confetti, flash and zoom-through cuts). The library's own rules forbid most of that. Follow the rules, drop the example styling, and speak in your brand's world. The contract for writing compositions: skills/launch-film/references/hyperframes-notes.md.

The counter-look

Stock (avoid)	Yours (from brand/brand.json)
Near-black void grounds	The brand ground for statement scenes; dark as the dark ground, tinted, with a soft glow
Violet ramps, neon pills, glow halos	surface cards, ink type, accent on exactly 1 element per shot: the done state, the travelling signal, the booked result
Generic sans slams at weight 900	fonts.display at its own weight; weight as emphasis
Glass over random colour blobs	Glass over something moving that belongs to the brand (the bloom, a plate, the product)
back.out, elastic, bounce, confetti	Arrival verbs: settle, land, grow, lock
Flash-white, zoom-through, whip, glitch	Your world pass, a match cut, a rise
Orbiting tech-logo tiles, dashed connectors	Your logo as the hub; connectors as drawn lines with a travelling pulse

Ease tokens

Token	GSAP	Use
settle	power3.out (or a baked spring, damping 1.0, response 0.45)	entrances, cards, windows, type
alive	baked spring, damping 0.85, response 0.3	chips and badges only; about 1 % overshoot, felt not seen
draw	power2.out	strokes, lines, rings
land	power4.out	camera landings, dives
reposition	power2.inOut	camera moves between framings
reveal	expo.out	the 1 big pull-back
drift	sine.inOut	idle breath on plates only
travel	none	the pulse dot, playheads, light sweeps

Banned everywhere: back.out, elastic, bounce, springs on a camera, overshoot on data, shapes or strokes. Use at least 3 tokens per film; 1 ease everywhere reads flat.

Continuity (the rule that separates modern from basic)

• No scene settles before its cut and none starts from rest after one. The outgoing element is still travelling when the frame changes; the incoming one enters already in flight. Velocity-match: exit on an .in curve, entry on the mirror .out, fastest points meet at the cut.
• No exit animations except on the final scene. The transition is the exit.
• 1 primary transition for 60 to 70 % of changes (your world pass), 1 or 2 accents (a match cut, a rise). Never a different transition per scene. Max 2 s each.
• Preserve object identity: when a thing continues (a card becomes a message becomes a result), morph it; crossfade only for true replacement.
• Settle sharp before a hand-off; never hand off mid-defocus.

Camera

• 1 wrapper, 1 state object, 1 writer. 2 writers is the classic broken camera.
• Durations: zoom 1.0 to 2.0 s, dive or landing 0.6 to 1.0 s, pan 0.8 to 1.5 s. Under 0.5 s reads as a cut.
• Scale: 1.05 to 1.15x over 2 to 3 s for emphasis; above 1.3x only for the 1 dramatic moment. For extreme 4 to 12x reveals, build at 1x and open scaled in.
• Every move is motivated (it follows the voice or the action). Vary the verbs: push, track, rise, pull back. 4 identical pushes read as a slideshow.
• Holds breathe through the background (2 to 3 px drift, 2.5 to 4 s periods), never through the window or the type.
• Depth of field: 3 to 6 px per depth step, max 16 px on a plate behind glass; the focal layer genuinely sharp.

Scale range, the modern signature

Every film has at least 1 macro moment (typed text or a single UI element filling the frame, the camera tracking the caret) and 1 wide system moment (the whole workspace or world). Readable reads happen at landings; angled, flying or blurred text is texture.

Type

• Final sizes are static CSS; animate scale, masks and per-word transforms, never font-size or letter-spacing.
• Hero cards: the first word snaps from 2.4x with a blur, the rest step in from 1.3x, each on its spoken word.
• Word entrances elsewhere: per-word blur-resolve or mask rise, decaying offsets (80, 60, 50, 25, 12 px). Headlines 88 to 150 px, 1 idea per frame, title-safe padding 120 px by 160 px.
• tabular-nums and a fixed min-width on every changing number. Labels beside hero numbers are big (56 to 72 px).

Cursor

Move before the click; click 0 to 0.3 s after arrival; human legs 0.6 to 1.2 s with a decelerating arrival; land a few px off centre; the cursor compresses more than the target (0.85 against 0.95). 1 verb per beat.

Motion blur

1 to 3 moments per film (a slam, a whip, a scale punch), via the HyperFrames motion-blur component (data-hf-motion-blur='{"shutterAngle": 360}', samples 8 to 16). Never on text meant to be read, fades, drift or whole scenes.

Signature moves

Specs, timings and code patterns: references/signatures.md. Pick 2 or 3 per film and make them yours.

1. Logo build: the logo sting and lockup.
2. World pass: the primary transition, made from your brand's material.
3. Branch and pulse: connectors, workflow edges, sequence steps.
4. Waterfall fill: tables, lists and enrichment.
5. Identity morph: 1 object through the funnel (a request becomes a task becomes a shipped result).
6. Macro pull-back: the 1 big reveal, macro to system.
7. Rise: a vertical push upward, for topic changes.

HyperFrames building blocks

• Structure worth absorbing (restyle to your brand): agent-progress-theater (a workflow run), panel-edit-live-sync, transcript-scroll-artifact-reveal, prompt-type-submit-generate, titlecard-reveal, fixed-anchor-cycle, zoom-out-workspace-reveal (becomes the macro pull-back), camera-journey, card-morph-anchor and the waterfall-entry rules.
• Registry items worth reading before hand-building: locked-nucleus-orbit, tracing-beam, offset-path-traveler, state-chip-rail, streaming-text, typed-prompt, light-sweep-pass, match-cut, cut-the-curve, motion-blur.
• Avoid as shipped: logo-outro, flash-through-white, cinematic-zoom, zoom-through, whip-pan (except 1 strip), glitch, chromatic split, blinds and blocks, page burn, confetti, 3d-text-depth-layers, ticker-takeover, parallax-zoom.
• Install the official skills for the full catalog: npx skills add heygen-com/hyperframes.

Tools beyond HyperFrames

• Hand tweaks: HyperFrames Studio (npx hyperframes preview) has the timeline and keyframe editor.
• 3D and glass: Blender (launch-world).
• Visual curve editing, if ever needed: Theatre.js (core Apache, studio AGPL).

Seek-safety (non-negotiable)

1 paused timeline per composition, registered at window.__timelines["<composition-id>"]; fromTo with explicit from-states; no Math.random, clocks, timers, requestAnimationFrame, CSS transitions or repeat: -1; transform-only motion; npx hyperframes lint clean before any render.