Y2K Chrome Type

About this style

Around the turn of the millennium, affordable 3D software and the early web made chrome lettering, bubble shapes, iridescent plastics and four-point sparkles a shorthand for the future. The look ran through pop music videos, album covers, consumer electronics, video game menus and personal websites. Now known simply as Y2K, it was revived in the 2020s by fashion and music brands and by designers sharing it on social media.

Make a 10-second turn-of-the-millennium chrome bubble-type title on a pale lilac field.

<inputs>
Word: glimmer. Line: The Millennium Mix · Vol. 2. Tags: NEW, 12 TRACKS, CD + TAPE. Duration: 10s. If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Palette: lilac field #E7DEF5, lifting to #F6F1FD behind the word; baby blue #9FD3FF, bubblegum #FF92D0, mint #A6EFD6; small type #4E3F7E.
Type: "Modak" 400 for the chrome word, lowercase, fitted to about 1300px wide, tracked tight so letters touch like fused balloons; "Michroma" 400 for the line, 30px, uppercase, tracked 0.2em; "Silkscreen" 400, 22px, for the tags, in white pills with a 3px baby-blue edge.
Chrome: at load, draw each letter and blob as a white mask and make it a height sprite: blur twice (about 22px and 7px), mix, and shape with smoothstep into a soft inflated dome. Each frame, draw the sprites with their transforms onto one height canvas using the 'lighten' composite (a max, so touching letters fuse), upload it, and shade in a WebGL fragment shader: normals from the height field, the view vector reflected into a procedural environment of white-lilac sky (#FBF8FF → #CFC2F0), a crisp dark horizon band (#2F2558 → #6E5CB0) just below the middle, and a pastel ground (#F6C2E4 → #BFE4FF). Add thin-film iridescence by facing ratio (a cosine palette through pink, blue and mint, 35% at grazing angles), two tight specular highlights (power 140) and a 2px darker rim where each dome meets the field. Turning the environment with t slides reflections across the letters. 8-bit heights band, so take normals over a 3–4px offset or keep the field in a float texture.
Blobs: four chrome blobs (rounded metaball shapes, 110–220px) orbit the word in the same height field; a large flat bubblegum blob at 35% sits behind it. A soft lilac contact shadow (the blurred mask, 26px lower, 16%) grounds the word.
Sparkles: four-point stars with concave curved spikes, 24–90px, white with a pastel halo; each twinkles once (scale 0 → 1 → 0 with a 45° turn over 0.7s), and no more than two start in any second.
Layout: the word centered at y 470; the line centered at y 770 over a mint underline; NEW top-left (x 200, y 160); 12 TRACKS and CD + TAPE stacked bottom-right; everything at least 100px from the edges.
Motion is bubbly and plastic: letters inflate from scale 0.3 and height 0 on a spring, 1 − e^(−7s)·cos(13s) with s the seconds since that letter started, 90ms apart, left to right; blobs bob on slow sines (±12px, 2.6–3.4s periods). The real thing is wet-looking chrome with a dark horizon line and iridescent rims; the cheap version is a grey gradient fill with bevel-and-emboss and a lens flare.
Banned: flat grey metal gradients, bevel-and-emboss filters, lens flares, rainbow fills, neon glow, dark backgrounds, hard drop shadows, anything flashing more than 3 times per second.
</direction>

<structure>
0.0–0.8s: lilac field; the bubblegum blob swells behind center; two sparkles twinkle far apart.
0.8–2.4s: the letters inflate in, left to right, each overshooting and settling, shadows growing with them.
2.4–3.6s: four chrome blobs bud out from behind the word and drift into orbit.
3.6–5.0s: the environment turns so a bright band slides across the word left to right; the iridescence drifts from pink toward blue.
5.0–6.0s: the line types on, 30ms per letter, as its mint underline grows from the center.
6.0–7.2s: the three tag pills pop on, 0.2s apart; sparkles twinkle on the first and last letters.
7.2–8.6s: blobs and environment ease to rest, one highlight sitting on the first letter.
8.6–10.0s: hold, still.
For other durations, scale every timestamp proportionally.
</structure>

<build>
One self-contained index.html, CSS and JS inline. Google Fonts via <link> are fine; no other libraries (no three.js: the depth comes from the height field). Draw in Canvas: masks and height sprites on offscreen 2D canvases built once at load, one WebGL canvas (preserveDrawingBuffer: true, drawn once per seek) for the chrome, and a 2D canvas above it for sparkles, line and tags. Canvas won't fetch fonts itself: await document.fonts.load() for each face, then build the sprites and define window.seek. 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: no CSS transitions or animations, no setTimeout or setInterval, no state carried between frames, and randomness only from a seeded PRNG. 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.
</build>

<check>
Before showing me, step through one frame per second: screenshot each and look at it. Fix overlaps, clipped or cramped text, accidental edge collisions, and anything off-style or Banned. Check every letter shows the dark horizon line and a highlight, the word reads as one word from 2.4s on, fused letters show no seams or banding, and sparkles never cluster. Confirm seek(duration) and seek(duration + 1) 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,…