Transitions Showreel

About this style

Film editors have joined shots with cuts, wipes and irises since the silent era, and motion designers have turned the transition itself into a showpiece. The strongest transitions are motivated: a shape, a color or a movement in the outgoing shot carries the eye into the next one, as in the classic match cut. Transition packs and beat-synced reels are now a staple of social video, promos and editors' showreels.

Make a 10-second transitions showreel: nine bold color cards joined by eight different transitions, each card naming the move about to happen to it, all cut to a 120 BPM beat.

<inputs>
- Pack name: "SWAPFRAME", with "VOL. 2" (a fictional transitions pack).
- Card words, in order: CUT, WIPE, IRIS, PUSH, SPLIT, ZOOM, MATCH, FLIP.
- End line: "Eight transitions. One beat."
- Tempo: 120 BPM.
- Length: 10 seconds.
If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Palette, one flat field per card with its word color: CUT ink #121212 with cream #F3EEE4; WIPE tomato #FF4A2E with ink; IRIS cobalt #2B45E0 with cream; PUSH lime #C8F03C with ink; SPLIT pink #FF8AD0 with ink; ZOOM violet #6A3BFF with cream; MATCH sun #FFC21A with ink and an ink disc; FLIP teal #009C86 with cream and a sun disc; the end card cream #F3EEE4 with ink and a tomato pill.
Type: Anybody (load the wdth and wght axes) at weight 900, width 130, uppercase, tracking −0.01em, as large as fits in 1680px of width with the cap height at most 360px, vertically centered, left edge at x 120. Labels in Azeret Mono 500, 22px, uppercase, tracking 0.08em: an index such as "01 / 08" at the top left (96, 96) and "120 BPM" right-aligned at the top right (1824, 96). A beat bar along y 1000 from x 96 to 1824: 20 ticks, 2px wide, the current beat's tick in the card's word color, the rest at 30%.
Beat grid: beat n at n × 0.5s. Transition k (k = 1…8) is centered on t = k seconds exactly: it starts 0.2s before and lands by 0.15s after. Each word arrives on a downbeat and gets one small accent on the off-beat (a 10px nudge or an underline drawing on).
The eight transitions, each motivated by something already on the outgoing card:
1. CUT (1.0s): a hard cut on the beat; the next word punches in from 112% to 100% over 0.18s.
2. WIPE (2.0s): a hard-edged diagonal wipe at 20°, left to right in 0.3s, led by a 28px stripe in the next card's word color.
3. IRIS (3.0s): the IRIS card ends its word with a big square period; a circle grows from that period's center until it covers the frame (0.35s), carrying the next card inside it.
4. PUSH (4.0s): a whip pan: the PUSH card slides off to the left as the next one pushes in from the right in 0.3s, with a 6-copy directional ghost trail at falling opacity during the fastest frames and a 24px overshoot that settles.
5. SPLIT (5.0s): the SPLIT card cuts into six horizontal slats that slide alternately left and right, 30ms apart, revealing the next card behind.
6. ZOOM (6.0s): a dive into the counter of ZOOM's second O: a next-card-colored shape fills that counter at 5.8s, then the card scales around it from 1× to 40× (0.4s, cubic-bezier(0.7, 0, 0.9, 0.4)) until the next card fills the frame.
7. MATCH (7.0s): the MATCH card carries a 300px ink disc at its right; on the beat everything cuts except the disc, which stays exactly in place and becomes the next card's sun disc: a match cut.
8. FLIP (8.0s): at 7.5s the sun disc flips like a coin; on the beat the whole card breaks into an 8×4 grid of tiles that turn 180° on Y in a diagonal wave (40ms stagger, perspective 1200px), showing the end card on their backs.
End card: "SWAPFRAME" at width 120; a tomato pill reading "VOL. 2" springs in at 8.5s; the end line in Azeret Mono 500, 28px, follows at 8.7s. The index label hides here.
Momentum carries across each cut: an incoming element continues the direction and speed of the outgoing move. Two easing families only: cubic-bezier(0.7, 0, 0.2, 1) for transitions and cubic-bezier(0.2, 0.9, 0.3, 1) for punches.
Premium: every transition motivated by something already in the frame (the period, the O, the disc), every hit on the beat, momentum kept across the cut. Cheap: random preset transitions, default ease-in-out, cuts drifting off the beat, crossfades.
Banned: crossfades and dissolves, glitch or RGB-split effects, white flashes, whole-card 3D spins, drop shadows, gradients, emoji, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.0s: the CUT card (ink): the word slams in on beat 0 (112% → 100%), index "01 / 08", an underline accent at 0.5s.
- 1.0s: CUT into the WIPE card (tomato).
- 2.0s: WIPE into the IRIS card (cobalt).
- 3.0s: IRIS into the PUSH card (lime).
- 4.0s: PUSH into the SPLIT card (pink).
- 5.0s: SPLIT into the ZOOM card (violet).
- 6.0s: ZOOM into the MATCH card (sun).
- 7.0s: MATCH into the FLIP card (teal); its disc flips at 7.5s.
- 8.0s: FLIP into the end card (cream).
- 8.5–8.8s: the "VOL. 2" pill and the end line arrive.
- 8.8–10.0s: hold; the beat bar stops on its last tick.
Other lengths: keep 120 BPM and two beats per card; add cards with new transitions or extend the end hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative (growth, simulation, particles) is precomputed once at load at a fixed step or solved analytically, so seek can jump to any time. Past the end, hold the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link>; await document.fonts.load() for each face before assigning window.seek.
- Engine: HTML/CSS. Cards are absolutely positioned divs; clip-path drives the wipe, iris and slats, transforms drive the push and zoom, and CSS 3D transforms drive the tile flip (each tile holds the matching slice of the FLIP card on its front and of the end card on its back), all set from seek.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check that every transition lands exactly on its beat (look at t = 1.0 through 8.0 as well), no frame shows a blank or half-built card, words never clip at a frame edge outside the zoom, the ghost trail reads as motion rather than a glitch, and no full-frame color change happens more than twice in any second. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Motion Designer Showreel

by @shneural

make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are, like it's your sh…

Product Intro Showreel

by @tdinh_me

Make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are, like it's your sh…

Robot Through Twelve Worlds

by @pradeepXkapoor

A robot realises he is stuck in an AI-generated world and tumbles through 12 art styles, from 8-bit to claymation to pe…

Structured Résumé Reel

by @darel023

You're a world-class motion designer, and this is your 15-second résumé reel. Make it dynamic and confident: open with…