← All videos

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

Run log

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

What broke (and the fix)

  • First snapshot pass: with the case closed, the orange deck and the bud heads still showed below the lid — the lid was too short to cover the deck it was supposed to hide. The lid was extended to cover the full deck zone and the chrome seam moved to the true lid/body junction; the closed frames at 0.3s and 5.2s then read as one clean case.
  • The CSS-3D hinged lid (rotateX to −100°) rendered as a flat tray jutting toward the camera instead of a lid swung back. Rebuilt with the fallback the production notes allow: the closed slab flips to its hinge edge while a drawn inner-lid panel swings up behind the deck with the spring overshoot, settled by ~1.4s; the close at 4.75–5.0s runs the same move in reverse.
  • Loop verified by direct comparison: stills at 0s and 5.99s are visually identical (closed case, same off-axis camera, seam and shadow), so the 6.0s loop point is invisible. No text appears anywhere in the film, per the spec.
Original prompt (shared by creator) Tested Community

XiaoHu's earbuds studio film — community prompt (tested)

Shared by XiaoHu · Original post
Shared prompt: published in full by XiaoHu on best.xiaohu.ai as a copy-and-run production spec given away with the article. No licence is stated; we reproduce it with full credit and link, and our video is an independent test run — the creator does not endorse MotionPrompts.
Product UIShapes

Prompt

Banned list —Beat grid —Build method —Self-review —
GOAL A studio product film for a pair of wireless earbuds. The case opens, the buds rise and present themselves, the case clicks shut. Nothing else happens. OUTPUT One self-contained HTML file. three.js 0.160.0. Canvas 960 x 1080. No other libraries, no build step, no external assets, everything procedural. Fonts: none, there is no text. TIME 6 seconds, seamless loop, 60fps. The music grid is 120 BPM, so one beat is 0.5s and every event time below is on the grid. MODEL Build from measurements, not eyeballing. Case overall 6.0 wide, 4.6 tall, 2.2 deep (cm). Lid hinged at the back, seam a thin torus of polished chrome where lid meets body. Inside deck in matte #D97757, two dark wells. Two buds: head an ellipsoid about 1.4cm, scaled sphere; tip a lathe, soft silicone; stem an oval cylinder about 2.4cm long, polished chrome end cap. LOOK Materials: case in satin ceramic #F4F1EC, roughness 0.38, clearcoat 0.35. Chrome: metalness 1, roughness 0.05. Backdrop a vertical gradient #F0EDE8 to #DEDAD3, seamless studio sweep. Lights, three-point: key #FFF4E8 intensity 3.0 from upper left, fill #E8EEF5 0.6 from the right, rim #FFFFFF 4.0 from behind. Contact shadow under the case. Tone mapping ACES, exposure 1.05. SHOTS 0 to 0.5s: a glint sweeps once across the seam. 0.72 to 0.95s: anticipation. The lid presses 1.5 degrees further shut, the case squashes 2 percent, hold 3 frames. 1.0s: the lid springs open to 100 degrees, spring damping 0.6, overshoot about 10 percent, settled by 1.4s. 1.5s: the buds rise. Right bud first, left bud 4 frames later. As each clears its well it tilts outward 14 degrees and turns 35 degrees toward camera. 2.0s: camera push-in finishes. 2.4 to 4.0s: hold. The buds float, a degree or two of drift. Second glint at 3.0s, along the deck this time. 4.0s: the buds straighten, descend. The dip at the end is magnetic. 4.75s: the lid falls. It shuts at exactly 5.0s, bounces 3 degrees, settled by 5.3s. 5.5s: a glint sweeps again, ready for the next loop. CAMERA fov 30 portrait, starts off-axis, azimuth 34 degrees down to 10, drifting in the whole time. Front three-quarter, never straight on, never top down. BANNED Purple or blue gradients, glow orbs, bloom, neon, lens flares, particles, generic spinning turntables, dark backgrounds, text. If it looks like a crypto landing page, start over. QA Open the file. Let it loop three times. Write down one flaw and fix it. Loop point invisible.

Use this prompt

The spec asks for three.js WebGL; our gallery pipeline renders a code-drawn 2.5D rendition of the same shot list instead — model proportions, the materials palette, the three-point lighting scheme (interpreted as flat studio shading), every shot timing, the anticipation squash, the spring overshoots and the 6-second seamless loop are followed as written. Rendered at 1080×1080 instead of 960×1080. The product is fictional and unbranded — the spec names no brand.

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
Before/after transformation film — HyperFrames prompt (divider wipe, square)
Before/after transformation film — HyperFrames prompt (divider wipe, square)
HyperFrames·1:1 square Tested