The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Y2K Chrome Fashion Drop Page

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
A one-page limited drop site for [BRAND], which makes [PRODUCT_LINE] in [HOME_BASE]. The page announces [DROP_NAME]: four pieces, [EDITION_SIZE] of each, no restock. The first screen is one huge liquid-metal 3D wordmark on near-black with cyan, lilac and pink light, and a live countdown to the drop. Below it: marquee, draggable product carousel with die-cut stickers, product detail with size picker, lookbook strip, front-end-only waitlist that ends in a queue ticket, drop rules and footer.

- Audience: People who follow small labels and creator capsules, shop on their phones, know what a drop is and will set an alarm for one. On the template side: indie fashion labels, merch runs and creators selling a small batch on a set day.
- Goal: Get the visitor to pick a piece and a size, then join the waitlist before the countdown ends. Every section feeds the same selection, and the page ends in a ticket the visitor would want to screenshot.
- Tone: Loud, glossy and a little cocky, with short sentences and specific numbers. It sounds like a small crew that knows its run sizes, not a retailer. No exclamation marks, no 'elevate', no 'curated'.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react@18 and react-dom@18 (MIT), [email protected] (MIT), @react-three/[email protected] (MIT), @react-three/[email protected] (MIT), [email protected] (import from motion/react) (MIT), [email protected] (ISC), @fontsource/unbounded@5 (OFL-1.1), @fontsource/hanken-grotesk@5 (OFL-1.1), @fontsource/martian-mono@5 (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - The stack above is fixed. Pin three, @react-three/fiber and @react-three/drei to exactly these versions, because the shader patch and loaders below depend on them. Add @types/[email protected], typescript, autoprefixer and postcss as dev dependencies.
  - vite.config.ts: base './', build.outDir 'dist', build.sourcemap false, build.chunkSizeWarningLimit 1600. package.json script build = 'tsc --noEmit && vite build'.
  - Tailwind theme.extend.colors: void #07060D, ultra #160B36, cyan #27F2FF, pink #FF2FB3, lilac #B79CFF, acid #E8FF3A, chrome #F2F5FC, steel #A9B0C6. fontFamily: display 'Unbounded', sans 'Hanken Grotesk', mono 'Martian Mono'. All keyframes (marquee, drift, twinkle, globe) live in src/index.css.
  - In src/index.css define these tokens and use them everywhere: --holo: linear-gradient(115deg,#27F2FF 0%,#B79CFF 38%,#FF2FB3 70%,#E8FF3A 100%); --chrome-ring: linear-gradient(180deg,#FFFFFF 0%,#9AA3B8 18%,#2A2C3A 47%,#0D0D16 53%,#6E7488 82%,#F2F5FC 100%); --chrome-text: linear-gradient(180deg,#FFFFFF 0%,#C7CFDF 44%,#6F7689 50%,#E9EEF7 100%). A holographic border is padding-box #0B0A14 over border-box var(--holo) with a transparent 1.5px border.
  - Keep every visible string, product, size table, FAQ answer and drop setting in src/content.ts. When the variable values differ from the defaults, rewrite all copy there to fit the new brand and product line, keep the same section structure, sentence length and number of items, and keep the same garment types so the photos still match unless the user swaps them.
  - Files: src/content.ts, src/App.tsx (holds activeProductId and selectedSize state and passes them to every section), src/lib/countdown.ts, src/three/ChromeWordmark.tsx (loaded with React.lazy so three.js lands in its own chunk), src/components for Header, Hero, Marquee, PieceCarousel, PieceDetail, Lookbook, Waitlist, Rules, Footer, Sticker, PixelStar, WireGlobe, PillWindow.
  - Reference files in public/ with import.meta.env.BASE_URL + 'images/piece-shell.webp' so the relative base keeps working. Import fonts with @fontsource/unbounded/700.css, /900.css, @fontsource/hanken-grotesk/400.css, /500.css, /600.css, @fontsource/martian-mono/500.css, /700.css. Add an inline-SVG favicon at public/favicon.svg showing the pixel star in cyan on near-black. The HTML title is '[BRAND] / [DROP_NAME]'.
  - Wordmark font loading in ChromeWordmark.tsx, in this exact way: import fontUrl from '@fontsource/unbounded/files/unbounded-latin-900-normal.woff?url'; fetch it to an ArrayBuffer; const font = new Font(new TTFLoader().parse(buffer)), with TTFLoader from three/examples/jsm/loaders/TTFLoader.js and Font from three/examples/jsm/loaders/FontLoader.js. This turns the OFL font's outlines into geometry at runtime, so changing [BRAND] needs no extra font file. Use the .woff file, because this loader cannot read .woff2.

## Variables
- [BRAND] — Brand name (default: "Moonfoil"). Becomes the 3D wordmark in capitals. Latin letters, one word of up to 9 letters looks best; two words break at the space on phones.
- [DROP_NAME] — Name of this drop (default: "Afterglow Capsule")
- [PRODUCT_LINE] — What the brand makes (default: "small-run heavyweight streetwear")
- [HOME_BASE] — City and region (default: "Portland, Oregon")
- [EDITION_SIZE] — Pieces per style (default: "200"). A number. Feeds the '1 OF ...' stickers and the scarcity copy.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/y2k-chrome-fashion-drop-page in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Void `#07060D` — Page ground, hero, carousel, lookbook, footer; text on holographic surfaces
- Ultraviolet `#160B36` — Ground for the piece detail and rules sections, so the page shifts color as it scrolls
- Electric Cyan `#27F2FF` — Hero light sweep, wireframe globe, focus rings, in-stock dots, cyan stickers
- Hot Pink `#FF2FB3` — Hero light sweep, low-stock states, pink stickers, lookbook color tile
- Lilac `#B79CFF` — Middle of the holographic gradient, floor grid, secondary borders
- Acid Yellow `#E8FF3A` — Tail of the holographic gradient and the loudest stickers. Small doses only
- Chrome Light `#F2F5FC` — Primary text on dark grounds, sticker outlines
- Steel `#A9B0C6` — Secondary text and labels on dark grounds

### Typography
- Display: section headlines, product names, marquee, and the outlines of the 3D wordmark. Uppercase with -0.02em tracking. H2 is clamp(34px, 5vw, 72px) at 1.02 line height: Unbounded (OFL), weights 700/900
- Text: body at 17px/1.55, buttons at 15px weight 600, form inputs: Hanken Grotesk (OFL), weights 400/500/600
- Mono: countdown digits, stickers, prices, size chips, spec labels, ticket. Labels are uppercase at 12px with 0.08em tracking: Martian Mono (OFL), weights 500/700

### Layout & motion
- Spacing: 8px base. Sections use 120px vertical padding on desktop and 72px on mobile. Content max-width is 1320px with 40px gutters on desktop and 16px on mobile. Card gap is 24px.
- Radius: Everything is a capsule or a soft window: 999px on buttons, chips and countdown panels, 28px on product cards, 20px on pill windows, 16px on inputs. Stickers keep their die-cut shapes.
- Motion: Wordmark: continuous ripple through the shader, plus damped tilt toward the cursor (rotation y up to 0.22 rad, x up to 0.14 rad, THREE.MathUtils.damp with lambda 4). On touch devices it sways slowly on sin(t*0.4) instead.
- Motion: Hero light: the three radial gradients drift by up to 6% over 18s, alternating, in CSS.
- Motion: Countdown digits: each changed digit slides in from y -12px over 200ms with Motion AnimatePresence.
- Motion: Marquee: CSS translateX(0 to -50%) over 28s linear, paused on hover.
- Motion: Product cards: perspective tilt up to 6deg and a holographic sheen following the pointer, 120ms transition.
- Motion: Stickers: spring pop on hover (scale 1.14, stiffness 520, damping 14) with a small corner fold appearing.
- Motion: Sections: content fades up 24px over 500ms with Motion whileInView, once, staggered by 60ms.
- Motion: Pixel stars twinkle with steps(3) over 2.4s. Globe meridians animate scaleX 1 to -1 over 14s with stagger, which reads as a spin.
- Motion: prefers-reduced-motion: wordmark renders once with frameloop 'demand' and no ripple or tilt, marquee is static, drift, twinkle, globe, confetti and fade-ups are off, digits swap instantly and sheen sits still at 25% opacity.
- Imagery: One shoot throughout: garments and models under cyan and magenta rim light on a near-black seamless backdrop, glossy and high contrast, so photos melt into the page ground. Six generated photos: four products and two lookbook frames. Everything else is drawn in code: the 3D wordmark, gradients, stickers, globes, pixel stars, floor grid, the locked fifth card.

## Pages & Sections
### [BRAND] / [DROP_NAME] (`index.html`)
1. **Shared content and state** — src/content.ts holds drop = { weekdayUtc: 5, hourUtc: 17, label: 'Friday 17:00 UTC', number: 'Drop 07' }. Pieces, in order, each with name, slug, price, sticker, description, spec rows and size table. 1) Afterglow Shell, $248, sticker '1 OF [EDITION_SIZE]' (burst, acid): 'A cropped puffer in crinkled mirror foil. It catches every streetlight on your walk home.' Fabric: Recycled foil nylon, 120 gsm fill. Fit: Boxy, cropped at the waist. Sizes XS low (3 left), S in, M in, L low (5 left), XL sold, XXL sold. 2) Static Hoodie, $148, sticker 'LOW STOCK' (pill, pink): 'Heavy enough to stand up by itself, with one holographic foil panel down the left side.' Fabric: 480 gsm loopback cotton. Fit: Oversized, dropped shoulder. Sizes XS sold, S low (2 left), M in, L in, XL in, XXL low (4 left). 3) Orbit Cargo, $178, sticker 'FINAL RUN' (ticket, cyan): 'Wide-leg ripstop that shifts from lilac to silver as you move. Six pockets, no flaps.' Fabric: Iridescent nylon ripstop. Fit: Wide leg, adjustable hem. Sizes XS in, S in, M low (6 left), L sold, XL in, XXL sold. 4) Signal Mesh Top, $84, sticker 'LAST 30' (burst, cyan): 'Double-layer hot-pink mesh, long sleeves, thumbholes. Wear it over anything.' Fabric: Double power mesh. Fit: Slim, long body. Sizes XS in, S in, M in, L low (4 left), XL sold, XXL sold. Every piece also has spec row Made: '[HOME_BASE], Studio 3F' and Run: '[EDITION_SIZE] numbered, no restock'. Waitlist count is 3,482. Initial state: activeProductId = Afterglow Shell, selectedSize = M. On changing piece keep the size if it is not sold out there, otherwise set it to null.
   Layout: A single src/content.ts export drives all sections. App.tsx owns activeProductId and selectedSize. The page ground is void #07060D with overflow-x hidden, and links scroll to section ids with scroll-behavior smooth (auto under reduced motion).
2. **Header** — Left: cyan pixel star and '[BRAND]' in Unbounded 700. Center links: 'Pieces', 'Size', 'Lookbook', 'Rules'. Right: compact mono countdown in the form 03:14:22:09 and a holographic button 'Join'.
   Layout: Fixed floating capsule, 16px from the top, centered, max-width 1120px, height 56px, background rgba(14,12,26,0.72) with 16px backdrop blur and a holographic border. Below 768px: star and brand on the left, Join on the right; links and the compact countdown are hidden.
   Motion: After 80px of scroll the capsule shrinks to 48px height over 200ms.
3. **Hero** — Eyebrow capsule: 'Drop 07 / [DROP_NAME]'. Visually hidden h1: '[BRAND] [DROP_NAME]'. The 3D wordmark shows [BRAND] in capitals. Subline in 20px Hanken Grotesk: 'Four pieces. [EDITION_SIZE] of each. Cut in [HOME_BASE], gone by Saturday.' Countdown capsules labeled DAYS, HOURS, MINUTES, SECONDS, with a small mono caption beneath: 'Drops Friday 17:00 UTC'. Primary button 'Join the waitlist' scrolls to #waitlist; secondary outline button 'See the pieces' scrolls to #pieces. Two stickers on the wordmark: '1 OF [EDITION_SIZE]' (acid burst, rotate -9deg, upper left of the canvas) and 'FINAL RUN' (cyan ticket, rotate 7deg, lower right of the canvas). Left pill window, title bar 'next_up': 64px thumbnail of the Afterglow Shell, name and $248. Right pill window, title bar 'the_line': '3,482 in line' with mono digits and the caption 'Drop 06 sold out in 4:12'.

Wordmark build, in ChromeWordmark.tsx. Canvas: camera fov 30 at z 12, dpr [1, 1.75], gl alpha true, antialias true, pointer-events none. TextGeometry from the loaded font with size 1, depth 0.28, curveSegments 14, bevelEnabled true, bevelThickness 0.05, bevelSize 0.028, bevelSegments 8, each line centered with geometry.center(). Scale the group to Math.min(viewport.width*0.9/width, viewport.height*0.84/height), and refit on resize. If the canvas is narrower than 700px, render two lines 1.12 units apart, breaking at the space or, with no space, at the middle of the string (MOON / FOIL). Material: meshPhysicalMaterial with color #DFE6F2, metalness 1, roughness 0.12, envMapIntensity 1.5, iridescence 1, iridescenceIOR 1.7, iridescenceThicknessRange [120, 520], clearcoat 1, clearcoatRoughness 0.05. Lighting comes only from drei Environment with files = BASE_URL + 'hdri/studio_small_09_1k.hdr', resolution 256, frames 1, containing three Lightformers: form rect, intensity 6, cyan #27F2FF at [-6, 1, 3] scale [4, 8, 1]; pink #FF2FB3 at [6, -1, 3] scale [4, 8, 1]; lilac #B79CFF at [0, 6, 2] scale [10, 2, 1].

Liquid ripple through material.onBeforeCompile with a shared uTime uniform advanced in useFrame. Vertex: declare 'uniform float uTime; varying vec3 vRipple;', and after '#include <begin_vertex>' add 'vRipple = position; transformed.y += sin(position.x*1.3 + uTime*0.7)*0.035; transformed.z += sin(position.x*0.9 + position.y*1.6 + uTime*0.5)*0.05;'. Fragment: declare the same two, and after '#include <normal_fragment_maps>' add 'vec3 rp = vRipple*2.2; normal = normalize(normal + 0.16*vec3(sin(rp.x*1.7 + rp.y + uTime*0.9) + 0.5*sin(rp.x*4.1 - uTime*0.6), sin(rp.y*2.3 - rp.x*0.8 - uTime*0.7) + 0.5*sin(rp.y*5.3 + uTime*0.5), 0.0));'.

Until the first 3D frame, and whenever WebGL is unavailable (test with a try/catch on getContext('webgl2')), show the wordmark as aria-hidden DOM text in Unbounded 900 filled with --chrome-text through background-clip, in the same box. Crossfade to the canvas over 400ms. Set frameloop to 'never' when the hero is off-screen, using an IntersectionObserver. Catch fetch failures and stay on the DOM fallback, with no console errors.

Countdown logic in src/lib/countdown.ts: the target is the next Friday 17:00:00 UTC after now, computed from drop.weekdayUtc and drop.hourUtc, and it rolls forward 7 days if that moment has passed, so the demo never reaches zero. Update every second and pad to two digits. The header uses the same source.
   Layout: min-height max(100svh, 780px), centered flex column, padding-top 96px. Background layers, back to front: void; three radial gradients (rgba(39,242,255,0.34) at 18% 28%, rgba(255,47,179,0.38) at 84% 66%, rgba(183,156,255,0.30) at 56% 12%, each fading to transparent at about 70%); a lilac floor grid in the lower third (64px cells, 1px lines at rgba(183,156,255,0.16), rotateX(68deg), fading out with a mask); a 220px cyan WireGlobe at top right, 1px strokes, 5 meridians and 5 parallels; eight PixelStars scattered around the edges. Order in flow: eyebrow, canvas block at 100% width and height clamp(240px, 46svh, 440px), subline, countdown row, buttons. Countdown row: four capsule panels 170px wide on desktop with a 2px --chrome-ring bevel around an inner #0B0A14, inset top highlight, digits in Martian Mono 700 at clamp(30px, 5.4vw, 78px) filled with --chrome-text, 11px labels under the digits inside the panel. Buttons side by side, height 56px; the primary is filled with --holo with void text. Pill windows are absolute at bottom 32px, left 40px and right 40px, width 250px, each with a capsule title bar holding a small star on the left and a small x on the right, and appear only from 1180px wide. Mobile 390px: canvas height 58vw with the two-line wordmark, stickers shrink to 80%, countdown panels in one row of four with 8px gaps and digits at 28px, buttons stacked full width, globe at 110px. Everything fits within 844px of height.
   Motion: On load the eyebrow, subline, countdown and buttons fade up with a 60ms stagger. Stickers land from scale 1.6 with a spring 500ms after load. Pill windows float 6px up and down over 5s, opposite in phase. See the motion list for wordmark, drift and digits.
4. **Marquee band** — Repeating text, with a void pixel star between items: 'DROP 07', '[DROP_NAME]', '1 OF [EDITION_SIZE]', 'NO RESTOCK', 'FRIDAY 17:00 UTC', 'DROP 06 SOLD OUT IN 4:12', '[HOME_BASE]'. Uppercase all of it.
   Layout: Full-bleed band, 72px tall (56px on mobile), filled with --holo, rotated -1.5deg and overlapping the bottom of the hero by 24px, width 104vw. Unbounded 700 at 26px (18px on mobile) in void. Two copies of the list side by side so the loop is seamless.
   Motion: translateX(0 to -50%) over 28s linear, infinite, paused on hover. Static under reduced motion.
5. **The pieces carousel** — id pieces. H2: 'Four pieces. One run. No restock.' Intro: 'Each style is numbered by hand and retired when the run is gone. Drag to look, tap to pick.' Each card: 3:4 image, sticker, name in Unbounded 700 at 20px, mono price, one-line fabric from the spec rows, and a stock line in mono with a dot (pink 'Going fast' when two or fewer sizes are fully in stock, otherwise cyan 'N sizes open', where N counts the sizes that are not sold out). Selected card has a small 'PICKED' mono label and a holographic border. Fifth card is locked: mono label 'ITEM 05', a giant '?' in Unbounded 900 filled with --chrome-text over a code-drawn pattern of diagonal cyan, lilac and pink stripes at 18% opacity, the caption 'Unlocks when the timer hits zero.' and the sticker 'CLASSIFIED' (ticket, pink). Below the row: mono counter '01 / 05' and a 2px progress bar filled with --holo. Arrow buttons use Lucide ArrowLeft and ArrowRight.
   Layout: Heading on the left, arrow buttons on the right, within max-width. The card row is full-bleed: a horizontal scroller with hidden scrollbar, scroll-snap-type x mandatory, 40px side padding (16px on mobile), 24px gap. Card width 340px on desktop and 78vw on mobile, radius 28px, 1.5px steel border at 30% opacity, background #0F0D1C, image with object-fit cover. Stickers overhang the top-right corner by 14px and rotate between -8deg and 11deg (the row must not clip them: 32px top padding). Clicking a product card sets activeProductId and smooth-scrolls to #size. The locked card shakes 4px for 300ms when clicked and changes nothing.
   Motion: Mouse drag to scroll: on pointerdown with a mouse set snap to none, move scrollLeft with the pointer, restore snap on release, and ignore the click if the pointer moved more than 6px. Arrows scrollBy one card plus gap. Tilt, written from scratch: on pointermove set --rx = (0.5 - y)*10deg, --ry = (x - 0.5)*12deg, --mx, --my on the card, with transform perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)). Sheen is an absolutely positioned layer over the image with background linear-gradient(115deg, transparent 30%, rgba(39,242,255,0.45) 42%, rgba(183,156,255,0.5) 50%, rgba(255,47,179,0.45) 58%, transparent 70%), background-size 220% 220%, background-position var(--mx) var(--my), mix-blend-mode color-dodge, opacity 0 going to 0.85 on hover. On touch the sheen stays at 0.5 and its position follows the card's offset in the scroller.
6. **Piece detail and size picker** — id size. Left: large image of the active piece in a PillWindow whose title bar shows the piece slug plus '.view', with the piece sticker on the corner, and four 64px thumbnails beneath that switch the piece. Right: mono label 'PIECE 0X OF 04'; H2 with the piece name; mono price; the description; size label 'PICK YOUR SIZE' with chips XS, S, M, L, XL, XXL; spec rows Fabric, Fit, Made, Run. Live summary bar in a --chrome-ring capsule: '[piece name] / [size] / [price] / Numbered 1 of [EDITION_SIZE]', or 'Pick a size to continue' when none is selected. Button 'Reserve this size' scrolls to #waitlist and is disabled with no selection. Under it the note: 'Flat $9 shipping in the US, $24 worldwide. Ships within 5 business days of the drop.'
   Layout: Full-bleed ultraviolet #160B36 ground with one pink radial glow behind the image. Two columns 7/5 on desktop with a 56px gap, stacked on mobile with image first. Chips are 56px wide by 44px tall capsules in Martian Mono 500. Available: 1px steel border, chrome text. Selected: filled with --holo, void text. Low stock: 1px pink border with a small pink dot and a '3 left' mono micro-label under the chip. Sold out: steel text at 45% opacity, a diagonal line drawn across the chip, aria-disabled, not clickable, 'Sold out' as tooltip and aria-label. Chips are real buttons with cyan focus rings. On mobile they wrap into two rows of three.
   Motion: Changing the piece crossfades the image and slides the text 12px over 240ms with AnimatePresence. Selecting a chip pops it with scale 1.08 then back. The summary text swaps with a quick 160ms vertical slide.
7. **Lookbook strip** — id lookbook. H2: 'Shot after hours.' Tiles in order: 1) lookbook-solo photo; 2) cyan color tile (#27F2FF) with a void WireGlobe and the mono text 'FIELD NOTE 07 / NO FLASH, TWO GELS, ONE NIGHT.'; 3) lookbook-duo wide photo; 4) hot pink color tile (#FF2FB3) with a --chrome-text pixel star and void credits in mono: 'Photography Dara Voss. Styling Mika Oyelaran. Pattern Ines Okafor. Print Theo Marchetti.' Caption under the row: 'Worn on set by the crew at Studio 3F.'
   Layout: Full-bleed flex row, height 560px on desktop, gap 16px, tiles with radius 28px: portrait photo 420px wide, cyan tile 300px, wide photo 900px, pink tile 300px. The row scrolls horizontally when it overflows. On mobile: height 420px, snap scroll, 78vw per tile, wide photo keeps object-fit cover.
   Motion: Desktop only: as the section passes through the viewport, Motion useScroll offsets tiles on y by -24px, 24px, -12px and 18px, in that order.
8. **Waitlist** — id waitlist. Big headline in void Unbounded 900: 'Get in line before the timer hits zero.' Body in void: '3,482 people are ahead of you. Waitlist gets a 15-minute head start at 16:45 UTC.' Form window, title bar 'join_the_line': read-only selection row showing piece thumbnail, piece name, size and price with a 'Change' link to #size; email input labeled 'Email', placeholder '[email protected]'; button 'Join the line'. States: 1) Idle. 2) Error on submit, inline with a pink border: 'That email is missing something. Try [email protected].' and, with no size selected, 'Pick a size first. Sold-out sizes can't be reserved.' with a link to #size. 3) Submitting: button shows 'Saving your spot' with a small chrome spinner for 900ms via setTimeout; no network request. 4) Success: the form is replaced by a ticket with 'YOU'RE IN LINE', queue number '#' + (3483 + hash of the email modulo 40) in Martian Mono 700 at 64px filled with --chrome-text, then piece, size, price, masked email (first letter, dots, domain), 'Head start Friday 16:45 UTC', and the button 'Edit my entry', which returns to idle with the values kept. Never claim that an email was sent.
   Layout: Full-bleed section with background linear-gradient(120deg,#27F2FF 0%,#B79CFF 42%,#FF2FB3 100%) and a scatter of void pixel stars. Two columns on desktop: headline at clamp(40px, 6vw, 84px) on the left, 480px form window on the right in #0B0A14 with chrome text, radius 20px and a capsule title bar. Stacked on mobile. Ticket: same width, a --chrome-ring frame around a dark inner panel, with a dashed perforation line and two round notches cut at both edges by a radial-gradient mask, stub at the bottom. Form uses onSubmit preventDefault; email check is /^[^@\s]+@[^@\s]+\.[^@\s]+$/. Errors use role='alert'.
   Motion: Ticket drops in from y -24px with a slight rotate of -2deg settling to 0 on a spring, and 12 pixel stars burst outward from its center and fade over 700ms. No burst under reduced motion.
9. **Drop rules** — id rules. H2: 'The rules.' Accordion, first item open. 'When does it drop?': 'Friday 17:00 UTC. The waitlist gets in at 16:45. The page goes live for everyone else when the timer hits zero.' 'Can I reserve more than one piece?': 'One size per style, per email. Up to four styles in total, so nobody clears a whole run.' 'Will you restock?': 'No. Each pattern is retired once its [EDITION_SIZE] numbered pieces are gone. Drop 06 went in 4 minutes 12 seconds.' 'How does shipping work?': 'Flat $9 in the US, $24 worldwide, out within 5 business days. Or pick up at Studio 3F on Saturdays, 11:00 to 16:00.' 'What about returns?': 'Size exchanges within 14 days while stock lasts. Otherwise numbered pieces are final sale.'
   Layout: Ultraviolet #160B36 ground. Two columns on desktop: heading and a 180px lilac WireGlobe on the left, accordion on the right at 760px wide. Each row is a capsule-ended bar with a 1px lilac border at 40% opacity, question in Hanken Grotesk 600 at 20px, Lucide Plus icon turning into an X. Real buttons with aria-expanded. Stacked on mobile.
   Motion: Rows open with a Motion height animation over 220ms, and the icon rotates 45deg.
10. **Footer** — Giant '[BRAND]' in Unbounded 900 uppercase as outline text (1.5px chrome text-stroke, transparent fill) spanning the width. Below, three columns. Studio: 'Studio 3F, 412 Tinsel Alley, [HOME_BASE]' and 'Pickups Saturday 11:00 to 16:00'. Contact: 'hello@' + lowercase [BRAND] + '.example' as plain text, not a mailto link. Jump links: Pieces, Size, Lookbook, Rules. Bottom line: '[BRAND] makes [PRODUCT_LINE]. Drop 08 is already on the cutting table.' Leave room for the optional credit link described in the Credit section.
   Layout: Void ground with a 1px --holo line on top, 80px top padding and 40px bottom padding. Fit the giant wordmark with font-size in vw so that it spans the content width without overflowing (about 11.5vw for eight letters; compute from the character count). Columns stack on mobile.

## Assets
- image: Download https://media.vibefather.ai/assets/b125a5e3-9f07-4a2d-a2b8-0362cb096275/piece-shell.webp to public/images/piece-shell.webp. Alt: 'Cropped puffer jacket in crinkled mirror-silver foil, lit with cyan and magenta rim light on black'. Used in the Afterglow Shell card, detail view and hero pill window. Credit: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/b125a5e3-9f07-4a2d-a2b8-0362cb096275/piece-hoodie.webp to public/images/piece-hoodie.webp. Alt: 'Oversized washed-black hoodie with a holographic foil side panel, lit with cyan and magenta rim light on black'. Used in the Static Hoodie card and detail view. Credit: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/b125a5e3-9f07-4a2d-a2b8-0362cb096275/piece-cargo.webp to public/images/piece-cargo.webp. Alt: 'Wide-leg cargo trousers in iridescent lilac ripstop, lit with cyan and magenta rim light on black'. Used in the Orbit Cargo card and detail view. Credit: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/b125a5e3-9f07-4a2d-a2b8-0362cb096275/piece-mesh.webp to public/images/piece-mesh.webp. Alt: 'Long-sleeve top in sheer hot-pink double mesh, lit with cyan and magenta rim light on black'. Used in the Signal Mesh Top card and detail view. Credit: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/b125a5e3-9f07-4a2d-a2b8-0362cb096275/lookbook-solo.webp to public/images/lookbook-solo.webp. Alt: 'Model turned away from the camera in the silver foil jacket and lilac cargo trousers, in a dark studio with colored rim light'. Used as the first lookbook tile. Credit: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download https://media.vibefather.ai/assets/b125a5e3-9f07-4a2d-a2b8-0362cb096275/lookbook-duo.webp to public/images/lookbook-duo.webp. Alt: 'Two models seen from behind walking through low fog in a dark studio, wearing the black hoodie and the pink mesh top'. Used as the wide lookbook tile. Credit: Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template.
- image: Download the environment map https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/studio_small_09_1k.hdr to public/hdri/studio_small_09_1k.hdr. Used only as the reflection source of the 3D wordmark. Source: Poly Haven, author Sergej Majboroda, license CC0.
- image: Drawn in code, with no files: the 3D wordmark geometry, hero gradients and floor grid, WireGlobe (SVG), PixelStar (SVG rects on a 9 by 9 grid, a plus-shaped sparkle), stickers (inline SVG shapes: 12-point burst polygon, pill, notched ticket, all with a 5px Chrome Light stroke, paint-order stroke and a hard drop shadow), locked fifth card, ticket and favicon.
- icon: lucide-react (ISC), bundled: ArrowLeft, ArrowRight, Plus, X, Check. Pixel stars and the title-bar x are drawn by hand.
- font: Self-hosted through Fontsource npm packages: @fontsource/unbounded (700, 900, plus the 900 latin .woff for the 3D outlines), @fontsource/hanken-grotesk (400, 500, 600), @fontsource/martian-mono (500, 700). All OFL-1.1.
- image: Create ASSETS.md at the project root listing every downloaded file: path, source URL, author and license. Use 'Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template' for the six photos and 'Poly Haven / Sergej Majboroda / CC0' for the HDRI. Also list the fonts and Lucide with their licenses.

## Don'ts
- No backend: no server code, API routes, databases, auth, checkout, payments or third-party APIs. The waitlist form never submits anywhere and makes no network request.
- No CDN script or link tags, no fonts.googleapis.com or fonts.gstatic.com, no analytics. Every font, image, HDRI and script ships inside dist/.
- Do not use drei Environment presets or any other helper that fetches files from a remote host at runtime. The HDRI loads only from public/hdri/.
- No hotlinking. Download each listed file into the project. No placeholder-image services and no Unsplash, Pexels or Pixabay.
- No source maps, no src/ in dist/, relative asset paths only. Keep dist/ under 20 MB. Internal links are section anchors on index.html, never bare directories.
- Zero console errors at 1440x900 and 390x844, and no horizontal page scroll at either size (the rotated marquee sits inside an overflow-hidden wrapper). If WebGL or the font fetch fails, fall back quietly to the DOM wordmark.
- Respect prefers-reduced-motion as described in the motion list.
- Do not use logos, box marks, monograms or label designs of real streetwear, luxury or sportswear brands. Garments carry no logos, text or graphics.
- Do not reproduce recognizable garment or sneaker silhouettes or signature prints from real products and collaborations. No sneakers on this page.
- No commercial or custom chrome display fonts. The chrome comes only from the 3D material on the OFL font's outlines, plus the CSS gradient text in the listed fonts.
- No real celebrities, musicians or models, or their likeness, in lookbook shots. No faces in close-up.
- No trademarked drop-platform names, retailer badges, payment badges, or real slogans and campaign lines.
- No icons, mascots, window controls or characters tied to a real Y2K-era operating system, game console, phone maker or media player. Pill windows use only the star and x described here, never a row of three colored dots.
- No code from restricted effect libraries for holographic cards or metallic text. Write the tilt, sheen and chrome effects from scratch as described.
- Do not fall back to a cream or muted palette, and do not swap the near-black ground for a light one. Cyan, pink and lilac must be visible on the first screen.
- No mention of the template source inside the site, apart from the optional credit link. No dates shown other than the weekday and time of the drop.

---
— Prompt by VibeFather · https://vibefather.ai/t/y2k-chrome-fashion-drop-page · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.