Infinite Marquee Bands

About this style

Scrolling text has a long public life, from the electric news ticker that began circling the Times Tower in New York in 1928 to the HTML marquee tag of the early web. Fashion and culture brands revived it as infinite marquee bands: strips of bold condensed type looping endlessly, often crossing at angles like barrier tape. The style trades on repetition, scale and the feeling of a live broadcast. It runs through campaign films, online stores and event identities.

Make a 10-second fashion-campaign title built from crossing marquee bands of type.

<inputs>
Brand: VESSANT. Campaign: Autumn/Winter 2026. Key word: UNFINISHED. Band words: TAILORED, UNDONE, NEW SEASON, OUT NOW. Release line: "In stores 3 November". Duration: 10s. If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Palette: ground signal red #E3261C; bands in ink #111111 with bone type, bone #F1ECE2 with ink type, and blush #F4C6CC with red type. Nothing else.
Type: Sofia Sans Extra Condensed 900, uppercase, cap height 74% of the band's height, tracking 0, for the words; between them, Bodoni Moda 500 italic lowercase connectives ("the", "and", "new") at the same cap height, and a six-point asterisk drawn in inline SVG at half cap height. The condensed caps carry the weight; the Didone italic carries the fashion.
Bands: five straight strips running past both stage edges, no borders or shadows. From back to front: B1 ink, 190px tall, +14°, through (520, 300); B2 blush, 140px, −11°, through (1300, 260); B3 ink, 160px, −6°, through (700, 820); B4 blush, 150px, +8°, through (1500, 840); B5, the hero, bone, 210px, −9°, through the stage center, its text built around the key word. Each band's text repeats seamlessly: offset = (speed × t) mod tile width.
Speeds are constant and linear, alternating direction, 140–260px/s, faster for thinner bands; never above 300px/s, so letters stay sharp in a 30fps render.
Entrances: each strip opens from its centerline, height 0 → full over 0.35s on cubic-bezier(0.7, 0, 0.2, 1), 0.18s apart, its text already moving.
The stop: B5 runs at constant speed until 6.2s, then follows a cubic Hermite curve from that speed to zero at 8.2s, ending with the center of UNFINISHED exactly on (960, 540). Pick the occurrence whose travel is closest to half of speed × 2.0s, so it decelerates naturally and never reverses. Over the same span B5 rotates from −9° to 0° about the stage center. From 7.4s, B1–B4 slide off along their own perpendiculars in 0.5s (ease-in cubic), 0.1s apart. When B5 stops, UNFINISHED switches to red type: the only color change in the piece.
Camera: the whole stage scales from 1.10 to 1.00 about its center over 0–8.2s on easeInOutSine.
End frame: red ground, B5 level and still across the center with its repeats cropped by both edges; VESSANT top-left at x 96, y 96 in Sofia Sans Extra Condensed 900, 72px, bone; "Autumn/Winter 2026 · In stores 3 November" bottom-right in Bodoni Moda italic, 30px, bone.
Premium is big caps cropped by tight bands, an exact repeating rhythm, two typefaces in contrast and one decisive stop. Cheap is a single horizontal ticker over a stock gradient.
Banned: gradients, shadows, blur, motion blur, outlined text, rounded corners, band angles beyond ±16°, eased or wobbling speeds apart from the hero stop, a fifth color, flashing more than 3 times per second.
</direction>

<structure>
0.0–1.1s: red ground; the bands open B1 to B5, 0.18s apart, text already running.
1.1–6.2s: all five bands run, type sliding past type at the crossings, as the slow pull-back continues.
6.2–8.2s: the hero stop: B5 slows, levels and lands UNFINISHED dead center; B1–B4 leave from 7.4s.
8.2–8.8s: VESSANT and the release line rise 12px out of masks over 0.35s.
8.8–10.0s: hold, completely still.
For other durations, stretch the running time between 1.1s and 6.2s, keep the 2s stop and at least 1.2s of hold.
</structure>

<build>
One self-contained index.html, CSS and JS inline. The stage is 1920×1080 (16:9), scaled to fit the window. Design for 60fps. window.seek(t), t in seconds, must compute every visual from t alone, clamping past the end to the last frame: no CSS transitions or animations, no setTimeout or setInterval, no state carried between frames, and randomness only from a seeded PRNG. Anything cumulative is precomputed once at load at a fixed step or solved analytically, so seek can jump to any time. Load Google Fonts via <link> and await document.fonts.load() for each face before defining window.seek. 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.
Engine: HTML/CSS. Each band is a rotated div with overflow hidden holding a repeated text row whose translateX is set from t; the stop curve and its end offset are computed in JS. No canvas or three.js.
</build>

<check>
Before showing me, step through one frame per second (0–10s): screenshot each and look at it. Fix overlaps, clipped or cramped text, accidental edge collisions, and anything off-style or Banned. Check that no band shows a seam or gap in its repeats, letters stay sharp at every speed, UNFINISHED is centered within 2px in the final frame, and the small text clears the hero band. 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

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Cut-Paper Title Sequence

Made by us

A jazz-tempo film title sequence in flat vermilion, mustard, bone and black: hand-cut paper shards jab in on the beat,…

Split-Flap Departure Board

Made by us

A mechanical station departure board where every flap steps through its drum to land on times, destinations and statuse…

Swiss Grid Typography

Made by us

A Swiss-style event poster that builds itself on a visible 12-column grid: grotesque type rises out of baseline masks,…