# Browser motion technique prompt library

This is a prompt-writing companion to the original reference-video analysis. Treat it as a menu. Choose the techniques that serve the story rather than asking for all of them at once.

## Kinetic typography

Prompt language:

> Keep one sentence stem stable while a key word changes. Animate type with scale, blur, weight, width, cropping and colour rather than relying on opacity. Leave faint previous or next states visible briefly as temporal echoes.

Useful for:

- Openings.
- Feature or role selectors.
- Claims and payoffs.
- Fast process montages.

## Geometry-preserving transitions

Prompt language:

> Make the outgoing scene's main shape become a meaningful object in the next scene. A card can become a phone, a shift can become a clock-in control, a counter can become a circle, and a circle can become a portal.

Useful for:

- Keeping a multi-scene film feeling like one journey.
- Moving between product modules.
- Creating impact without hard cuts.

## Product UI theatre

Prompt language:

> Treat the cursor as a character. Use typing, travel, hover, click, active tabs, progressive messages, changing statuses and nested outputs to make cause and effect legible without narration.

Useful for:

- Product demonstrations.
- AI or workflow stories.
- Showing an employee action becoming manager work.

## Generative systems

Prompt language:

> Generate repeated DOM elements from data arrays rather than authoring them individually. Use seeded variation in position, delay, scale and blur so the field feels organic while every exact timestamp reproduces the same pixels.

Useful for:

- People, shifts, cards, particles, messages and counters.
- Creating visual complexity from simple HTML.
- Circular or radial arrangements.

## Depth and spatial composition

Prompt language:

> Build three recurring depth planes: a soft atmospheric background, a clear primary object and an occasional oversized foreground object or cursor. Use perspective, partial cropping, scale, blur, translucency and shadow to create depth.

Useful for:

- Making simple interface fragments feel cinematic.
- Foreground cards, coins or devices.
- Camera pushes into large product surfaces.

## Typographic masks and process montage

Prompt language:

> Change visual grammar every 0.5–0.8 seconds for a short process burst: terminal status, moving copy inside large letter masks, oversized code braces, and a faux design-tool transform box. Keep one palette so the montage still feels connected.

Useful for:

- Invisible work.
- Research, analysis, code and design sequences.
- High-energy bridges.

## Layered status cards

Prompt language:

> Build a vertical field of operational cards. Move a focus state through the list, expand selected rows into richer messages, and stagger status changes, presence dots, timestamps and completion states across several depth planes.

Useful for:

- Onboarding tasks.
- Agent work.
- Timesheet exceptions.
- Payroll progress.

## Counters and radial systems

Prompt language:

> Place generated items around a circle with small differences in scale and depth. Animate a live value or progress state in the centre, then collapse the completed ring into concentric circles that become the next scene.

Useful for:

- Team or employee systems.
- Progress, cost or scale.
- Portal transitions.

## Lightweight CSS 3D

Prompt language:

> Use CSS perspective, Y-axis rotation, foreground scale differences, controlled blur, glow and shadow to create a convincing lightweight 3D field. Keep the hero objects simple and readable.

Useful for:

- Cards, coins, phones and product objects.
- Climaxes.
- Foreground/background contrast.

## Music-led timing

Prompt language:

> Build an explicit beat and phrase cue sheet before final animation. Put smaller events on selected beats and reserve palette changes, portal moves, oversized words and major transformations for four- or eight-bar phrase boundaries. Wave the intensity instead of animating everything continuously.

Practical target:

- Meaningful events every 0.4–0.8 seconds during dense passages.
- Longer holds after important claims or state changes.
- A clear visual deceleration into the final card.

## Deterministic rendering contract

Prompt language:

> Put playback, scrubbing and frame export on the same exact-time renderer. Expose `window.render_at_time(seconds)`, `window.motion_duration` and `window.motion_ready`. Use seeded variation, wait for fonts and images before capture, and verify that the same timestamp produces the same frame.

This is the foundation that makes the interactive HTML page and optional MP4 export use the same source.