BUILD
- Build a complete Y2K marketing homepage. Not a card, not an isolated navbar, not a dashboard, not tabs.
- Domain from Use on: music and media brands, playful consumer apps, retro UI drops first; enterprise reuses only the chrome, not the sparkle.
STYLE
- Y2K: chrome gradients, glossy pills, pixel sparkle, one candy or holo accent over a bright surface
- Background a soft holographic gradient (linear, #E9ECF1 to #FFD9F4 to #CFF7FF); panels are chrome cards with a top gloss streak
- Accent bubblegum #FF5FD2, holo cyan #00E5FF; ink #1C1C1E; chrome #C9CDD4 to #FFFFFF
- Radius 16px on cards, 999px on pills. Every glossy surface keeps a 2px top highlight rgba(255, 255, 255, 0.9); shadow 0 6px 16px rgba(0, 0, 0, 0.18)
- Type: a rounded sans (Inter / SF) for UI, a chunky display for headlines. No grunge, no neon scanlines
LAYOUT
- Container max-width 1120px. Bright holographic wallpaper; every block is a chrome card, never a flat slab
- Top bar is a chrome title bar: wordmark left, two links, Play CTA + min/max/close squares right
- Generous radius everywhere; corners are soft, not sharp
SECTIONS
1. Hero: a big chrome card, headline "Shiny again.", kicker NEW DROP, one dek line, Play CTA plus ghost Listen
2. Three chrome value cards: Glow, Gloss, Pop — kicker, one line, a tiny pixel star each
3. Feature band: two columns, left a chrome cover block with a holo sheen, right a short list of four claims
4. Pricing strip: three chrome columns, the middle one bubblegum-tinted with a brighter gloss
5. Closing CTA band: a wide chrome panel with one bubblegum CTA
6. Three-column chrome footer: Product / Company / Colophon
INTERACTION
- Hover lifts each card 3px and brightens its gloss; accents shift toward holo. Pills press on :active
- Focus is a 2px solid #FF5FD2 outline, never a glow ring
- Pixel stars twinkle subtly on hover only — never a constant disco
MOTION
- Motion is bouncy but short: 160ms ease-out with a 4px overshoot on presses, a slow holo sheen drift
- Use ease-out with a small bounce; keep it playful, not jittery
- Entrance is a 10px rise with gloss fading in, staggered 50ms per card
- prefers-reduced-motion: no bounce, no twinkle, panels appear instantly
TECHNICAL
- React, Tailwind CSS, a .chrome surface utility (vertical gradient + gloss). One homepage route.
DON'Ts
- Do not call this cyberpunk: Y2K is bright silver and candy, cyberpunk is black and neon
- No matte flat fills, no scanlines, no grunge textures, no serif
- No dark title bars, no hard black borders, no monotone gray
- Do not output only a headline plus two empty cells. Do not make every surface fully matte