Beat Direction

Per-Beat Direction

Each beat is a WORLD, not a layout. Before writing CSS specs and GSAP instructions, describe what the viewer EXPERIENCES. The difference between a great storyboard and a mediocre one:

Mediocre: “Dark navy background. ‘$1.9T’ in white, 280px. Logo top-left. Wave image bottom-right.” Great: “Camera is already mid-flight over a vast dark canvas. The gradient wave sweeps across the frame like aurora borealis — alive, shifting. ‘$1.9T’ SLAMS into existence with such force the wave ripples in response. This isn’t a slide — it’s a moment.”

The first describes pixels. The second describes an experience. Write the second, then figure out the pixels.

Each beat should have:

Concept

The big idea for this beat in 2-3 sentences. What visual WORLD are we in? What metaphor drives it? What should the viewer FEEL? This is the most important part — everything else flows from it.

Mood direction

Cultural and design references, not hex codes:

• “Geometric, rhythmic, precise. Think Josef Albers or Bauhaus color studies.”
• “Warm workspace. Nice notebook energy, not technical blueprint.”
• “Cinematic title sequence. The kind of opening where you lean forward.”

Animation choreography

Specific motion verbs per element — not “it animates in” but HOW. Verbs come from the beat’s concept and content, not from an energy bucket. A wellness brand’s “slow” beat might still have something that DROPS if the content is about letting go. A stats beat might FLOAT if the brand’s identity is weightless.

The vocabulary of motion verbs (organized by physical character, not by energy level):

Impact / weight: SLAMS, CRASHES, PUNCHES, STAMPS, SHATTERS, DROPS (with force) Directional / deliberate: SLIDES, PUSHES, PULLS, WIPES, CUTS Reveals / builds: DRAWS, FILLS, GROWS, EXPANDS, ASSEMBLES, COUNTS UP Organic / ambient: FLOATS, DRIFTS, BREATHES, PULSES, ORBITS, MORPHS Mechanical / precise: TYPES ON, CLICKS, LOCKS IN, SNAPS, STEPS

Every element gets a verb. If you can’t name the verb, the element is not yet designed. The verb should follow from the beat’s concept — not from a lookup of what “high energy” or “low energy” beats use.

For text elements specifically, you can name a deterministic, named effect by ID (e.g. typewriter, kinetic-center-build, soft-blur-in) instead of inventing timing from scratch — the 24-effect vocabulary and how to load it live in skills/hyperframes-animation/adapters/animate-text.md.

Transition

How this beat hands off to the next. Specify the type and parameters.

When to pick which:

Rule of thumb: if the beat is the centerpiece of the video, shader-transition into it. If the beat is connective tissue, a CSS crossfade is fine. A brand reel of 5-7 beats usually wants 1-2 shader transitions (the hero reveal + the CTA) — too many flatten their impact.

Mixing shader and CSS crossfade transitions in one composition is supported. Omit shader on any transition entry to get a smooth opacity crossfade — HyperShader manages all scene visibility regardless. Let HyperShader create the timeline (don’t pass a pre-built timeline: option) and add all composition tweens to the returned tl after init(). Config snippet in skills/hyperframes-animation/transitions/overview.md → “CSS vs Shader”.

CSS transitions — 30+ patterns across 13 categories. Full code in skills/hyperframes-animation/transitions/ (route via catalog.md). Pick based on the energy and feel:

Common quick-picks:

• Velocity-matched upward: exit y:-150, blur:30px, 0.33s power2.in → entry y:150→0, blur:30px→0, 1.0s power2.out
• Whip pan: exit x:-400, blur:24px, 0.3s power3.in → entry x:400→0, blur:24px→0, 0.3s power3.out
• Blur through: exit blur:20px, 0.3s → entry blur:20px→0, 0.25s power3.out
• Zoom through: exit scale:1→1.2, blur:20px, 0.2s power3.in → entry scale:0.75→1, blur:20px→0, 0.5s expo.out
• Hard cut / smash cut: instant, for rapid-fire sequences

Timing presets: snappy (0.2s), smooth (0.4s), gentle (0.6s), dramatic (0.5s), instant (0.15s), luxe (0.7s).

Shader transitions — 14 built-in WebGL GPU effects. Install with npx hyperframes add <name> (block name ≠ shader name — see skills/hyperframes-registry/references/discovery.md); full API in packages/shader-transitions/README.md.

You are not limited to what’s listed here. These are the built-in options, but you can and should:

• Write custom GLSL shaders from scratch for unique transition effects
• Search online for shader code (ShaderToy, GLSL Sandbox, GitHub) and adapt it
• Build custom CSS transitions that aren’t in any category — combine clip-path, transforms, filters in new ways
• Ask the user to provide or find specific effects if you need something specialized

If the storyboard calls for an effect that doesn’t exist yet — build it. The framework renders anything a browser can run.

Depth layers

What’s in foreground, midground, and background. Every beat should have at least 2 layers:

• “BG: dark navy fill + subtle radial glow. MG: stat cards with drop shadow. FG: brand logo bottom-right.”

SFX cues

What sounds at what moment:

• “On the capture pulse — a soft, warm analog shutter click.”
• “Left side carries a faint low drone. On fold: drone cuts. Silence. Then a single clean chime.”

Rhythm Planning

Before writing HTML, declare your scene rhythm: which scenes are quick hits, which are holds, where do shaders land, where does energy peak. Name the pattern — fast-fast-SLOW-fast-SHADER-hold — before implementing.

Derive the rhythm from the storyboard and the brand, not from a lookup. A 15-second social ad for an architectural firm and a 15-second social ad for a gaming brand have different rhythms — both are 15 seconds, but one is slow-reveal-hold-CTA and the other is rapid-fire-SLAM-hook. Video type sets constraints (duration, approximate beat count); the brand and content determine whether those beats are slow or fast, sparse or dense, dramatic or controlled.

Questions that drive rhythm decisions:

• What emotional journey should the viewer take? Where is the peak moment?
• Where does the narration land its heaviest emphasis? That’s usually where energy should peak.
• What does the brand’s own visual pacing suggest — unhurried or urgent?
• How many beats can the duration actually support without feeling rushed or padded?

A social ad that tries to hook in 2s, showcase 3 features, and end with a CTA in 15s will feel like noise. Sometimes “hook-hold-CTA” with one strong feature is the right rhythm for 15 seconds. Name the rhythm you’ve planned before implementing.

Velocity-Matched Transitions

Exit the outgoing beat with an accelerating ease (power2.in or power3.in) plus a blur ramp. Enter the incoming beat with a decelerating ease (power2.out or power3.out) plus blur clear. The fastest point of both easing curves meets at the cut — the viewer perceives continuous camera motion, not two discrete animations. Match exit velocity to entry velocity within ~5% tolerance.