← All videos

1280×720 · 16:9 landscape HyperFrames HyperFrames + GSAP

Run log

ModelClaude (agent build)
Renderer / stackHyperFrames + GSAP
Iterations to final1
Render time24.9s (final render)
Format1280×720 · 16:9 landscape
Published2026-10-29

What broke (and the fix)

  • First check round failed on contrast: the white check glyph on the orange dot measured 3.09:1 in all four toasts and the fine print was under AA. Fixed by switching the check glyph to dark #2b2b2b on the accent dot and brightening the fine print to #828282; the re-check passed 80/80.
  • One checker warning kept deliberately: the last toast lands at 9.0s per the beat grid, so it holds 1.9s before the 11s end — 0.1s under the checker's closing-line guideline. The 1.5/4/6.5/9s arrival rhythm mattered more than the warning.
  • The toast card was widened to 444px during the build after measuring the longest action line ("upgraded to Pro — Prompt Deck Pro"); with that, the first render shipped and stills at 3.3s, 7.7s and 10.9s show the stack nudging up 106px per arrival with no text overflow.
Original prompt Tested

Social proof popup — HyperFrames prompt (notification stack)

by MotionPrompts (own run)
socialProduct UI

Prompt

Banned list —Beat grid —Build method —Self-review —
<direction> An 11-second social-proof popup film (1280x720, 30fps) for Prompt Deck Pro. House style: near-black #0a0a0a background, white type, ONE orange accent #ff5c1a, Arial/Helvetica bold, no webfonts. A generic browser-window mock fills the frame (chrome bar, three dots, a "yourstore.com" URL pill, dim skeleton page blocks) while notification toasts for the events in Ayesha | Lahore | booked | 12 min ago; Dan | Austin | started a trial | 26 min ago; Maria | Berlin | upgraded to Pro | 41 min ago; Ken | Nairobi | booked | 1 hr ago slide in at bottom-left and stack upward like a real social-proof widget. Every name and event is fictional, and the film says so in fine print. Banned: real brand logos, real people's names, fake review stars, prices or discount claims, screenshots of a real store. </direction> <structure> 0.0-1.5s: the browser mock fades in — chrome bar, URL pill, page headline and skeleton blocks; fine print "SAMPLE EVENTS — FICTIONAL NAMES" bottom-right. 1.5s: toast 1 slides in at the bottom-left slot (avatar initials, bold "Name — City", action line naming Prompt Deck Pro, grey relative time, small orange check dot on the avatar). 4.0s / 6.5s / 9.0s: toasts 2, 3 and 4 land in the bottom slot while every earlier toast nudges up one slot (106px) at the same moment. 9.5-11.0s: the full stack of four holds. </structure> <build> One HyperFrames composition, 1280x720, seek-driven paused GSAP timeline. Parse Ayesha | Lahore | booked | 12 min ago; Dan | Austin | started a trial | 26 min ago; Maria | Berlin | upgraded to Pro | 41 min ago; Ken | Nairobi | booked | 1 hr ago as "Name | City | action | time" entries separated by semicolons and build one toast per entry (the demo ships four). All toasts share one base position (the bottom slot); arrivals tween x from off-frame with opacity, and stacking is done with cumulative y offsets (-106px per later arrival) so a nudge and a landing can share a timestamp. Keep toast text on one line per row — widen the card before shrinking the type. </build> <gotchas> - If each toast has its own hard-coded top position, the nudge becomes four separate animations to keep in sync — one base slot plus y offsets stays honest. - The action line is the longest string in the card ("upgraded to Pro — Prompt Deck Pro"); size the card for it or it spills past the border. - The check dot must read as a badge on the avatar, not a stray orange pixel — overlap the avatar's corner and give the glyph contrast against the accent. - The fiction disclosure stays visible in the final frame; a social-proof demo without it reads as a claim. </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

Four fictional buyers slide into a browser mock and stack like a real social-proof widget — nudges, check dots and all — with the fiction disclosed in the corner of the final frame.

Related videos

Product UI morph — one shape, many states
Product UI morph — one shape, many states
HyperFrames·Square Tested
Remotion testimonial prompt — reviews carousel
Remotion testimonial prompt — reviews carousel
Remotion·Square Tested
Remotion pricing promo prompt — plan cards
Remotion pricing promo prompt — plan cards
Remotion·Landscape Tested
Remotion app walkthrough prompt — screens + cursor
Remotion app walkthrough prompt — screens + cursor
Remotion·Square Tested