Motion Prompt Lab. Duration — 1080×1920 · 9:16 vertical HyperFrames HyperFrames + GSAP
Run log
ModelClaude (agent build)
Renderer / stackHyperFrames + GSAP
Iterations to final1
Render time26s (final render)
Format1080×1920 · 9:16 vertical
Published2026-10-30
What broke (and the fix)
- Pre-render geometry catch: the circle's drop was 8px short — a 200px piece in a 208px slot sat visibly high of centre, and 'almost flush' is the one thing this format cannot ship. The drop distance grew by exactly the missing 8px.
- 'EXACTLY 100%' first flashed for 0.30s, under the checker's read floor — a caption nobody can read is a claim nobody verified. Its entrance moved earlier and the reset later to give it a real hold.
- The triangle enters from outside its SVG's viewBox; the checker flags the overflow every run and it is intentional — the piece has to start off-frame for the slide-in to read. Recorded here so nobody 'fixes' it later.
Original prompt Tested
Oddly satisfying loop
by MotionPrompts (own run)
Prompt
Banned list ✓Beat grid ✓Build method ✓Self-review ✓
<direction>
An 8-second oddly satisfying loop, 1080x1920 vertical, on near-black. Kicker at the top: PERFECT FIT, EVERY TIME. Three dashed outline slots wait centre-frame — circle, square, triangle. The accent is orange #ff5c1a; pieces alternate accent and white. Caption at the bottom: NO GAPS. NO ALMOST.. Everything moves on a strict 2-second beat grid; nothing drifts, nothing overshoots and wobbles — the pleasure is precision.
Banned: bounce easing, rotation on the pieces, sound-wave graphics, any piece arriving early or late off the grid.
</direction>
<structure>
Beat 1: the circle drops from above into its slot, lands flush, one ring pulse. Beat 2: the square slides in from the left, stops dead. Beat 3: the triangle slides in from the right. Beat 4: a fill bar grows and stops at exactly 100% — the label confirms it. Reset (last half-second): every piece leaves the way it came and the bar empties, so the final frame equals the first.
</structure>
<build>
One HyperFrames composition; pieces and slots are top-level clips (the triangle and its slot share one SVG). A piece is always 8px smaller than its slot on each axis — 4px of air on every side is what 'flush' looks like. GSAP timeline, paused, seek-driven. Render at 30fps.
</build>
<gotchas>
Do the slot arithmetic before animating: a 200px piece in a 208px slot needs its full travel or it lands visibly off-centre — our first layout had the circle 8px high. And a loop's last beat still has to be readable: the 100% label needs its read time before the reset starts, so the reset is timed after it, not over it.
</gotchas>
Use this prompt
Three shapes, three slots, one bar filled to exactly 100%. Four beats on a two-second grid — a circle drops into its outline, a square slides home, a triangle follows, and a fill bar stops dead on full — then everything leaves the way it came, so the loop has no visible join. No joke in this one; the satisfaction is the whole product.
