Fashion & Textilefashiondenimstreetwearexploded viewshadersingle hero object
RAWCUT
Denim, cut loud — a streetwear drop site with jeans you can tear down, wash and bleach.
One pair of jeans on stage at a time. Scroll flattens the raw pair into a tech-pack flat lay and pulls its parts into a labelled legend, a wash lab grades it raw → stone → acid → black in a shader while your cursor paints bleach onto its UVs, and a fit finder swaps pairs with a hem-up dissolve. Kinetic type, pinned horizontal lookbook, film reveal and a drop countdown.
Next.js 16three.jsGSAP ScrollTriggerLenisTailwind v4gltf-transform
PROMPT.md
Build "RAWCUT", a scroll-driven drop site for a streetwear denim label. Next.js 16 + raw three.js + GSAP ScrollTrigger + Lenis + Tailwind v4. It must feel raw, urban and kinetic — the opposite of a heritage textile site.
Hero object: one pair of jeans at a time (three GLBs from Sketchfab: raw slim, black cargo, baggy custom), optimised with gltf-transform (flatten, centre, 1 unit tall, parts kept as separate meshes, WebP textures, meshopt). Bake the meshopt quantisation into the geometry at load so the shader works in model units and parts can move.
One shader patch on the glTF MeshStandardMaterial:
- height dissolve (uReveal) — pairs build from the hem up with a safety-orange seam; the outgoing pair dissolves first
- wash grade (uWash 0 raw · 1 stone · 2 acid · 3 black), procedural fades and acid marbling from fbm noise on the UVs
- bleach mask: a 1024² canvas in UV space; raycast the cursor onto the jeans and stamp soft strokes; "Rinse" fades it out
Scroll model is "state targets": each section sets {x, y, size, turn, spin, explode, wash, model, bleach}; the scene damps toward them. Section triggers use the pin-spacer, not the pinned element.
1. Hero: giant condensed wordmark behind the spinning baggy pair, "Denim, cut loud.", orange ticker.
2. Teardown (pinned, blueprint grid): the raw pair flattens into a front-only tech-pack flat lay and its button, rivets, belt loops and back pockets slide out into a legend column (back parts flip to face front, so the seat is never shown); HTML callouts follow the projected 3D parts. Body-form pairs only sway elsewhere, never spin to the back.
3. Wash lab (pinned, indigo theme): odometer of wash names, scrub grades the denim, cursor bleaches it.
4. Up close (paper theme): three macro photos opening from a slit, spec lists.
5. Fit finder (pinned): Slim / Cargo / Baggy tabs swap pairs with the dissolve; measurements per fit.
6. Lookbook: pinned horizontal track, grayscale-to-colour hover, velocity skew.
7. Film: street video opens from a small frame to full bleed while the manifesto words light up; stats count up.
8. Drop 08 (orange theme): stencil headline, live countdown, notify form; black pair spins beside it.
9. Footer: giant wordmark, credits.
Palette: ink #0b0e14, indigo #14223f, raw #23365f, paper #ecebe6, safety orange #ff5a1f. Type: Big Shoulders (display), Big Shoulders Stencil (drop), Inter Tight, Geist Mono. Film grain, difference-blend cursor that reads "BLEACH" in the wash lab, reduced-motion support.