← All videos

1080×1080 · 1:1 square HyperFrames HyperFrames + GSAP

Run log

ModelClaude (agent build)
Renderer / stackHyperFrames + GSAP
Iterations to final2
Render time23s (final render)
Format1080×1080 · 1:1 square
Published2026-10-25

What broke (and the fix)

  • Iteration 1: the linter rejected the wipe (animating `left`/`width` snaps under seek capture) — rebuilt on transforms + clip-path inset; iteration 2 passed and shipped.
  • The checker's text_occluded warnings during the wipe are the reveal design itself (after-scene waits under the before-scene) — verified on the contact sheet, not a defect.
Original prompt Tested

Before/after transformation film — HyperFrames prompt (divider wipe, square)

by MotionPrompts (own run)
Product UIShapes

Prompt

Banned list —Beat grid —Build method —Self-review —
<direction> A 9-second before/after transformation film, HyperFrames 1080x1080 square at 30fps. House style: near-black #0a0a0a background, panels #141414, borders #2a2a2a, text #ffffff/#c9c9c9, ONE accent #ff5c1a, Arial/Helvetica bold, no webfonts. This run's accent: #ff5c1a. An abstract messy dashboard is wiped away by a draggable-style divider to reveal the same app, calm. No photos, no real product. No gradients, no stock photos, no real brand logos, no lorem ipsum, no purple/blue tech gradient. </direction> <structure> 0.0-1.5s — Kicker "BEFORE / AFTER FILM — DeskFlow". A window holds the BEFORE scene: a dozen grey blocks scattered at random sizes, captioned with a grey "BEFORE" chip. 1.5-4.9s — An accent divider with a round handle sweeps left to right over 3.4s (power2.inOut). Behind it, the AFTER scene is revealed by clip-path: tidy title, three KPI cells, three clean bars, one honest caption ("the mess was the setting, not the data"). 4.9-9.0s — Divider fades out; below the window the payoff lands: "SAME APP. HALF THE NOISE." + fictional fine print. </structure> <build> One paused GSAP timeline. The AFTER scene sits in a wrapper clipped with clip-path: inset(0 900px 0 0) → inset(0 0 0 0); the divider is a transform-driven div (x), never a layout property — animate transforms only. The BEFORE blocks are absolutely positioned divs; the AFTER scene is a simple flex layout. </build> <gotchas> - Animating `left` or `width` for the wipe triggers the linter's gsap_non_transform_motion error and stutters under seek capture — transforms + clip-path are the fix (iteration 1 → 2). - The inspector flags the caption as "occluded" mid-wipe; verify on the contact sheet that it is the reveal design, then ship — the flag is structural here. - The handle must be a child of the divider so it rides the same transform. </gotchas> Before you finish: step through the timeline at five points and fix anything that overlaps, clips the frame, or drifts off the beat grid.

Use this prompt

Tested after the transform/clip-path fix (iteration 2). Works for any 'messy → clean' story: dashboards, inboxes, desks — keep both scenes the same size so the wipe reads as transformation, not replacement.

Related videos

Product UI morph — one shape, many states
Product UI morph — one shape, many states
HyperFrames·Square Tested
HyperFrames lower third prompt — talking-head overlay
HyperFrames lower third prompt — talking-head overlay
HyperFrames·Landscape Tested
HyperFrames 3D card scene prompt — CSS 3D cards
HyperFrames 3D card scene prompt — CSS 3D cards
HyperFrames·Landscape Tested
Kinetic type showreel
Kinetic type showreel
HyperFrames·Landscape Tested

Submit a video

Know a motion video made with an AI coding model? Send the post. Rules: