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 promptTested
Before/after transformation film — HyperFrames prompt (divider wipe, square)
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.
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.