Skip to content

Concept render — composed live from this prompt's palette & layout. Reproducible with the library, not a stock screenshot.

Concept scene: Grid Drift — open in library →
MotionSpecBetaby Motif Studiopublished 2026-09-10

Motion-spec page — the animation before the layout

vibe: spec-first, timing-exact, curve-drawn

starter4 blocks, 1 stack700 tokens to run (estimate)
prompt.txt — copy-paste ready
A prompt-form experiment that ships only the motion spec — no layout, no copy, just the animation system a developer can build from.
• Spec sheet: the page opens as a spec document — the four moments it specifies (hero entrance, card stagger, state change, page transition) with their purpose stated before their parameters.
• Timing table: every moment in a table — duration in ms, delay, trigger, and the responsive rule ('under 640px, the stagger halves because the cards stack'); numbers a developer can copy.
• Easing curves: each curve drawn as a real graph beside its cubic-bezier value with a one-line 'why' ('ease-out-quart: heavy object settling; never use it for exits').
• Reduced-motion: the spec's reduced-motion branch specified in full — what plays (nothing that moves layout), what fades (opacity only, ≤ 300 ms), and the media-query hook.
• Palette: graph paper, ink, one curve-colour per moment; the page is a blueprint and proud of it.
Stacks shipped:HTMLBlocks:Spec sheetTiming tableEasing curvesReduced-motion
Community:▶ Re-run this prompt⤴ Submit a remix of it★ Your saved listRe-runs are a labelled simulation; the run log on this page is the real record.
Before you run it, know this
  • Lowest score was GLM-4.6 (CN) at 87/100 — Reduced-motion spec thoughtful; playback loop smooth.
  • All models built cleanly on the first pass.