anymotion-agent/anymotion/saas-explainer-motion

SaaS Explainer Motion (PRIMARY CORE SKILL)

Build product explainer films in the browser. HTML/CSS/JS in, one self-contained file out that plays anywhere a browser does. The engine is deterministic: every visual is a pure function of time t. That single property is what separates this from a pile of CSS keyframes: you get a scrub bar, frame-accurate arrow-key stepping, and timing you can assert on in tests. Choreography becomes something you tune, not something you guess at.

THE INPUTS THAT CHANGE THE BUILD

What each input decides, and what it costs to get wrong. Where they come from — the request, a plan, a question — does not matter here. The product's website, when there is one. The highest-value input available: the real product name and tagline, the real feature copy, the accent colour, the typeface, the logo, and the shape of the actual UI. A film built from the real product beats a beautiful film about a generic dashboard. What to take from it, in priority order:

1. Product name and tagline, exactly as written. Do not improve their copy.
2. The top features in the site's own words — these become the scenes that

demonstrate.

1. Accent colour, from their CSS or logo. One hex is enough; set --accent

and let the preset derive the rest.

1. Typeface — check their @font-face and font-family. A Google Fonts

family you can load; a licensed face means picking the closest from the pairings table and saying which you substituted.

1. The shape of the real UI — sidebar or top nav, cards or table, light or

dark, rounded or square.

1. Real labels: their actual nav items, column headers, button text, empty

states. "Invoices / Customers / Settings" is worth ten times "Item One".

1. Numbers, with the attribution the site gives them. Numbers on a marketing

site are claims, not facts. If one goes on screen, attribute it as they do. Then rebuild that UI out of the glass components — .browser-frame, .sidebar, .row-item, .panel, .btn. Never paste a screenshot as a flat image: it cannot zoom, cannot respond to a cursor, cannot animate a row sliding in, and it goes soft the moment the camera pushes in. Rebuilding is more work and it is the entire difference between a demo and a slideshow. Reproduce their layout and labels, simplify their density. A real app has forty rows and nineteen nav items; the rebuild has four rows and five nav items, because the film has to read at a glance. Keep their logo as inline SVG or a text lockup — do not redraw it badly. With no URL, or when fetching returns an empty JS shell, invent a plausible product, state the assumption in one line, and build. Do not stall on it. Aspect ratio — settle this before writing any scenes. 16:9 1920×1080 is the default and covers landing pages, YouTube and decks; 1:1 1080×1080 square feed; 9:16 1080×1920 stories and Shorts; 4:5 1080×1350 portrait feed. Positions inside scenes are hand-placed pixels, so changing aspect afterwards means re-laying out every scene. It is the one decision that is expensive to change late. A 16:9 and a vertical cut are two compositions sharing one timeline, not one file with a CSS switch. Where it will be watched decides length and whether sound can be relied on. A landing-page hero loop is short and always muted. The outer limit anywhere is unearned attention from someone who did not choose to watch — that limit is the real constraint, not any particular number. Sound. assets/sfx.js synthesises everything in the browser: nothing to license, nothing to download, and it renders offline to a reproducible WAV. Either way the film must read correctly with sound off, because most autoplay is muted. Sound is a layer of polish, never a carrier of meaning. Colour. data-preset="apple" is the default: near-black, #0A84FF accent, Liquid Glass panels, SF-stack type. Presets: apple, light, midnight, warm, mono. Brand colours mean a hex accent and a light/dark preference. Typeface. Never ship the default system stack by accident. -apple-system is a deliberate choice for the Apple look, not a fallback to reach for because nobody picked. If a typeface is named or lives in the brand, use it; otherwise choose one that fits the product and say which and why. Pairing beats decorating: one display face for headlines, one quiet face for body, at most. See "Typography" for pairings and the licence trap. The product itself. One sentence on what it does. The single behaviour change you want in the viewer. Any real numbers, with sources — an unattributed stat reads as marketing.

WRITE THE BEAT SHEET BEFORE THE CODE

The beats below are the pattern that works, in the order that works. How many of them a given film uses, and how long each runs, is a composition decision — not something this document should make for you. What matters is the order: problem-first, so the product arrives as relief rather than as a feature list.

Rules that survive contact with real projects:

• Show, do not tell. Six near-identical support tickets stacking up beats

the sentence "support teams answer repetitive questions." The repetition is the argument. The headline only names what the viewer already noticed.

• One idea per scene. If a scene needs two sentences to explain, it is two

scenes.

• Cut, do not dissolve — but a cut is not a stop. Crossfades between scenes

read as slideshow; hard cuts read as film. tl.scene(...) cuts by default. What carries the viewer across the cut is motion that was already running, not a fade. A scene that eases to a dead halt and then a new scene that starts from stillness is the single most common way an explainer feels like a PowerPoint. See "Continuity" below — this is the rule that most affects whether the film feels smooth.

• The first 3 seconds decide everything. Movement must begin before frame

1. A static title card is a scroll-past.

• Real UI beats abstract shapes — but only a crop of it. A full app

screenshot at 1920px wide renders every label at 11px and reads as noise. Sidebar + four rows + one panel is a demonstration; forty rows is a screenshot.

• A cursor turns a mockup into a demo. Move it with an arc, press, release,

then let the UI respond one beat later. See "Cursor choreography" below.

Element-Level Animation Consistency Matrix

In a broadcast-quality SaaS explainer, every visible UI element (badge, title, cards, metrics, buttons, icons, cursor) is animated, but with strict visual consistency:

1. Unified Entrance Curve: Use cubic-bezier(0.16, 1, 0.3, 1) across ALL elements for smooth Apple-style spring entrance.
2. Staggered Delays: Maintain a strict 60ms–80ms delay increment between sibling elements (e.g. t+0.0s headline, t+0.08s subtitle, t+0.16s card 1, t+0.24s card 2).
3. Shared Directional Vectors: Sibling elements in the same container move in cohesive spatial directions (e.g. all slide translateY(24px -> 0px) + opacity: 0 -> 1 or scale 0.95 -> 1.0).
4. Continuous Micro-Idle Motion: Elements during active holds are never 100% frozen: apply subtle 3D tilt, gentle floating (translateY(-4px) over 4s), pulsing metric counters, and shimmer sweeps.

Dynamic Music Selection & Sound Guidelines

Music selection MUST match the vibe and category of the SaaS product:

• AI, Cloud, Developer, Security SaaS: dark_glass_synth / tech_ambient (Futuristic, sleek, dark-mode synth pads & electronic pulses).
• Sales, Marketing, HR, Enterprise SaaS: upbeat_corporate (Rhythmic, energetic, clean bass, driving tempo).
• Creative, Design, Productivity, Lifestyle SaaS: minimal_chill (Lofi, organic, subtle synths, atmospheric).

Video Export Note: Rendered MP4 files provide a clean visual export with background soundtrack backing; raw un-synced scene audio pops are excluded from video render to prevent audio clipping.

Liquid Glassmorphism & Specular Spec

Modern SaaS explainers use Apple Liquid Glass UI cards:

• backdrop-filter: blur(24px) saturate(180%)
• background: rgba(255, 255, 255, 0.04)
• border: 1px solid rgba(255, 255, 255, 0.12)
• box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2)
• 3D Perspective Tilt: transform: perspective(1200px) rotateX(4deg) rotateY(-2deg)

Real Assets Harvest Strategy

The agent prioritizes real artwork and SVG logos even if the user didn't explicitly supply asset links:

• Brand SVG Logos: SimpleIcons CDN https://cdn.simpleicons.org/{brand} via fetch_asset (e.g., spotify, stripe, slack, figma, notion, github, google, discord).
• App Icons & Artwork: iTunes API / Unsplash direct image links.

The one-sentence test

Before writing a beat sheet, finish this sentence:

*After watching, a [role] should believe that [product] makes [specific task]

[specific change], so they will [single action].*

If you cannot fill every blank, the film has no spine and no amount of motion will give it one. Concretely:

After watching, a support lead at a 50-person company should believe that

Relay makes answering repetitive tickets **something they stop doing

by hand, so they will start a trial**.

Notice what is not in that sentence: features, integrations, pricing, the founding story. Every one of those is a thing an explainer wants to include and almost always should not. A short film holds roughly one idea.

Why problem-first

The instinct is to lead with the product. It fails because a viewer who has not yet felt the problem has no slot to put the product into: they hear "AI-powered support automation" and file it next to forty other tools.

Show six identical password-reset tickets stacking up and the viewer thinks "…that's my Tuesday." Now the product is an answer to a question they are already asking. The order is: recognition → tension → relief.

What each beat is actually doing

Hook. The strongest hooks are demonstrations, not statements. A headline reading "Support teams waste hours on repetitive tickets" is weak; six near-identical tickets sliding into a stack, 190ms apart, each saying almost the same thing, is strong — and then the headline names it. The repetition is the argument, and the text confirms what they already spotted, which reads as agreement rather than assertion. Let the visual land ~600ms before the words.

Stakes. One number, going the wrong way. "First response time: 14h." Count it up with tl.count() so the viewer watches it get worse. Two numbers halves the impact of each; three is a dashboard, and nobody feels anything about a dashboard.

Reveal. Hard cut, no dissolve. The cut is the point: the problem stops, and something else is here. A crossfade blurs the boundary the earlier beats spent their whole length building. Product name, one line, and stillness — the hero panel pushing in from scale: 0.94 with a sheen sweep is enough on its own.

How it works. The only beat with real interface, and the one most often ruined by showing too much. Show a crop: sidebar, four rows, one panel. Enough to read as software, few enough that the eye knows where to look. Drive it with a cursor — see "Cursor choreography" for the arrive / settle / press / release sequence and the response delay that makes it read as real software.