The user wants a fully animated 3D website for a clothing brand. I need to create a complete HTML file with Three.js 0.160.0 using import maps and ES modules. Let me design something impressive: **Concept:** A premium streetwear/fashion brand website with: 1. **Hero section** - 3D animated clothing item (maybe a rotating t-shirt or hoodie made from geometry, or a cloth-like plane with vertex displacement) 2. **Product showcase** - 3D models that respond to scroll/mouse 3. **Smooth animations** - GSAP-style animations, scroll triggers 4. **Modern UI** - Glassmorphism, bold typography, gradient overlays Let me plan the 3D elements: - A procedurally created t-shirt/hoodie using Three.js geometry (could use a custom shape or lathe geometry, or build from primitives) - Fabric-like waving plane with shader material - Floating particles - Mouse parallax - Scroll-based camera movement For the clothing item, I could: 1. Create a t-shirt shape using extruded geometry or custom BufferGeometry 2. Use a torus knot or abstract shapes with fabric-like materials 3. Create a cloth simulation effect with a plane geometry with wave animation A good approach: Build a stylized t-shirt from a 2D shape extruded, or use a combination of box/cylinder geometries. Actually, a nice approach is to create a t-shirt using `THREE.Shape` with the t-shirt outline and extrude it, then animate it with rotation and slight vertex waving. Alternatively, I can make a "fabric wave" hero with a large plane with shader-based waves, plus floating 3D text or logo. Let me design the site structure: **Sections:** 1. **Preloader** - animated counter/brand name 2. **Hero** - Full-screen 3D canvas with rotating t-shirt, big typography overlay, mouse parallax 3. **Marquee strip** - scrolling text 4. **About/Manifesto** - scroll-triggered text reveals 5. **Collection** - product cards with hover effects, maybe a 3D color changer 6. **Lookbook section** - another 3D element (maybe particles forming shapes) 7. **Footer** **3D Elements:** - Main hero: 3D t-shirt (extruded shape) with custom shader or MeshPhysicalMaterial, rotating, floating - Fabric wave plane in background or separate section - Particle field - Maybe a 3D "sphere" of fabric for another section Let me write the t-shirt shape. A t-shirt outline in 2D: - Start at left shoulder, go to neck, curve to right shoulder, down the sleeve, back in to body, down to hem, etc. I'll define points for a t-shirt silhouette: ``` const shape = new THREE.Shape(); // coordinates roughly ``` A simpler approach: use a parametric t-shirt. Let me define the outline carefully: T-shirt outline (front view), centered at origin, width ~2, height ~2.6: - Left collar start: (-0.35, 1.2) - Collar curve to (0.35, 1.2) with dip down to (0, 0.95) - Right shoulder to (0.75, 1.05) - Right sleeve out to (1.35, 0.55) - Right sleeve underarm to (0.95, 0.15)... Hmm, let me think in a cleaner way. I'll draw a t-shirt path: Points (x, y), y up: - Neck left: (-0.3, 1.25) - Neck curve dips to (0, 1.05), up to (0.3, 1.25) - Shoulder right: (0.7, 1.15) - Sleeve top right: (1.3, 0.75) - Sleeve bottom right: (1.05, 0.35) — outer sleeve edge - Armpit: (0.65, 0.6) - Body right side down: (0.65, -1.3) - Hem bottom right: (-0.65, -1.3) - Body left side up: (-0.65, 0.6) - Armpit left: (-0.65, 0.6) - Sleeve bottom left: (-1.05, 0.35) - Sleeve top left: (-1.3, 0.75) - Shoulder left: (-0.7, 1.15) - Back to neck left Using bezier curves for smoothness. Then ExtrudeGeometry with depth 0.3, bevel enabled for soft edges. Then apply a MeshPhysicalMaterial with sheen (fabric look!) — MeshPhysicalMaterial supports sheen which is great for fabric. Color like off-white/black with sheen. Add vertex displacement animation for a "waving cloth" feel — store original positions, apply sine wave based on position and time in the animation loop. Also add a logo text on the shirt? Could add a small extruded text or a decal plane. Maybe skip text font loading (needs external font JSON). I could use a canvas texture with the brand name drawn on it, applied to a plane slightly in front of the shirt chest. That's a nice touch — canvas texture with brand name "ATELIER" or "NOIR" or "VANTA". Let me pick a brand name: "VANTA" (black/black clothing) or "ÆTHER" or "MONO". Let's go with "VANTA STUDIO" or just "VANTA". Actually "NOIR" is classic. Let me use "VANTA" — means vantablack, very black clothing brand vibe. Tagline: "WORN IN THE DARK" or "BEYOND BLACK". Hmm, or a streetwear brand "KINETIC" — fits animation theme. Let me go with "KINETIC" — tagline "Clothing in Motion". That fits the animated site theme nicely. **Color palette:** Dark background (#0a0a0f), accent electric lime (#ccff00) or vivid orange/red. Streetwear brands often use bold accent. Let me use a lime/chartreuse accent (#d4ff3f) with off-white text on near-black. Very "A-COLD-WALL*" / Rick Owens vibe. Or use hot coral. Lime feels modern. **Tech:** - Three.js 0.160.0 via importmap (unpkg or jsdelivr) - GSAP + ScrollTrigger via CDN for scroll animations (allowed — it's not three.js; the rule is only about three.js version consistency). I'll use GSAP 3.12.x from cdnjs. - Custom cursor maybe - Lenis smooth scroll? Could add via CDN (studio-freight lenis). That adds buttery scroll. Let me include Lenis from unpkg: https://unpkg.com/lenis@1.1.14/dist/lenis.min.js — it exposes `Lenis` globally. Actually with newer versions it's `@studio-freight/lenis`. The unpkg lenis package... Let me use `https://unpkg.com/@studio-freight/lenis@1.0.42/dist/lenis.min.js` which exposes window.Lenis. That's a known working CDN. Or I can implement simple smooth scroll myself. To reduce risk, maybe implement my own lightweight smooth scroll? Lenis is pretty reliable. I'll include it but wrap in try/catch fallback to native scroll. Actually, to be safe, I'll integrate Lenis but guard: `if (window.Lenis) {...}`. **Fonts:** Use Google Fonts — something bold like "Archivo" / "Space Grotesk" / "Syne" / "Unbounded". For streetwear: "Archivo Black" or "Syne" (very fashion-y) or "Anton". Let me use "Syne" for headings (very avant-garde fashion) and "Space Grotesk" or "Inter" for body. Syne + Space Grotesk is a nice combo. Or "Unbounded". I'll go Syne (800) for display, Space Grotesk for body, maybe monospace accents with "Space Mono" or just use Space Grotesk. **Layout plan:** 1. **Preloader**: black screen, brand name letters animate, percentage counter, then curtain lift reveal. 2. **Fixed canvas** behind everything (z-index 0), content scrolls above. The 3D scene reacts to scroll (camera moves through different "scenes"): - Section 1 (Hero): t-shirt rotating center - Section 2 (Manifesto): camera pulls back / shirt moves aside, fabric wave plane appears - Section 3 (Collection): shirt changes colors per product? Or floating shapes - Section 4 (Lookbook): particle sphere / torus Simpler robust approach: One fullscreen canvas fixed; scroll progress drives camera and object states via ScrollTrigger or manual scroll handler. Plus per-section 3D toggles. Alternative: multiple canvases. But one fixed canvas with scroll-driven camera is slicker and more performant. Let me design scroll-driven 3D timeline: - Progress 0–0.25 (hero): t-shirt at center, slowly rotating, floating. Camera z=6. - Progress 0.25–0.5 (manifesto): t-shirt slides left/up and shrinks, a large waving fabric plane (shader) fills view. Camera moves. - Progress 0.5–0.75 (collection): shirt returns, and clicking color swatches changes shirt color live! That's a nice interactive tie-in: "Pick a color" updates the 3D shirt material color. - Progress 0.75–1 (lookbook/footer): shirt dissolves into particles or camera flies into a particle field / torus knot. Managing this with GSAP timeline scrubbed to scroll is elegant: create gsap timeline with ScrollTrigger scrub across the whole page, animating camera positions, object positions/rotations, material uniforms. But scrubbed timeline across full page with fixed canvas — yes, classic pattern. 3. **Hero content**: giant "KINETIC" text, maybe split into lines with reveal animation, "SS25 — MOTION COLLECTION", scroll indicator, CTA button. 4. **Marquee**: infinite scrolling text strip "WEAR THE MOTION —" repeated. 5. **Manifesto section**: big text lines that reveal word-by-word on scroll (GSAP), with a 3D fabric wave behind (the wave plane from timeline). 6. **Collection section**: 3-4 product cards (grid), each with gradient placeholder "image" (CSS-generated, since no external images — I can generate product visuals with CSS gradients + shapes, or use canvas-drawn textures). Hover: card lifts, image scales. Include a color picker that changes the 3D shirt color — interactive tie-in. Also price, "Add" button with micro-animation. For product images without external assets: I can render mini 3D? Too heavy. Use CSS gradient art with abstract shapes, or generate images via canvas at runtime and set as background. Simpler: stylish gradient cards with big typography and SVG garment silhouettes. I'll draw simple SVG t-shirt/hoodie/pants/cap silhouettes with gradient fills. That looks intentional and artsy. 7. **Lookbook section**: horizontal-ish or big typography, maybe stats counters animated (e.g., "100% organic cotton", "0 plastic"). 8. **Newsletter/CTA**: input with animated underline, button. 9. **Footer**: big brand text, links, socials. **Extra juice:** - Custom cursor (dot + trailing ring) that scales on hoverable elements. - Magnetic buttons. - Text reveal animations (split lines). - Noise/grain overlay for texture. - Scroll progress bar. - Time-based shader on fabric plane (vertex waves). - Particles floating in hero. - Mouse parallax on 3D scene (camera offset lerp). - Shirt color changes when hovering product cards! Each card has data-color; hovering the card lerps the 3D shirt material color. That's a wow interaction. And clicking "Add to cart" shows a toast + cart counter bump animation. **Shirt geometry details:** Build with THREE.Shape + ExtrudeGeometry, bevel. Then to make it look more fabric-like, I can add slight vertex noise displacement animated. Extrude geometry has many segments? ExtrudeGeometry segments parameter controls curve segments; depth segments not subdivided — vertex waving would be limited. Alternative: use a high-segment plane bent into shirt shape? Complex. Better: Keep extruded shirt but animate gentle rotation/float only, and separately have a cloth-wave plane for the "fabric" wow. Or displace the shirt vertices — extrude geometry front/back faces have limited vertices (triangulated). Displacement would look chunky. Option: increase curveSegments for smoother outline; triangulation of the shape faces will have vertices only at outline points, so waving would look like a low-poly ripple — could actually look stylized-cool, but risky. Alternative approach for hero garment: build a "hoodie" from primitives? Meh. Another idea: use a parametric "fabric drape" — a plane with sine waves as the hero (like a flag), with the brand text on it via canvas texture. A waving flag/pennant with the brand name printed looks genuinely like a clothing brand moment (fabric is the product!). Plus a rotating t-shirt for the collection section. Plan: - Hero 3D: large waving fabric plane (custom ShaderMaterial with vertex displacement + lighting-ish shading + brand text texture drawn on canvas) floating/rotating slightly, with mouse parallax. Plus floating particles. - Actually combining: hero shows the t-shirt extrude rotating — more instantly "clothing brand". Then manifesto section transitions to fabric wave. Let me do both in one scene with scroll timeline: - Phase A (hero): shirt visible center, fabric plane hidden (or behind, subtle). - Phase B (manifesto): shirt moves off to left and scales down; fabric plane (big, wavy, with brand pattern texture) comes forward. - Phase C (collection): shirt returns center-ish, fabric recedes; shirt color = currently hovered product color. - Phase D (lookbook/footer): shirt explodes into particles (morph positions to random / scale down with particle burst), camera pulls up; particle field rises. Explosion: animate shirt scale to 0 while a Points cloud (pre-generated from shirt surface sampling? simpler: separate Points geometry) scales up and fades. Good enough. **Fabric wave shader:** Plane 20x12, 120x72 segments. Vertex shader: z = sin(pos.x*f + t) * amp * (edge falloff). Fragment: base color dark, compute fake normal lighting via derivative of wave, add subtle stripe texture (canvas texture with brand name repeated) multiplied. Use MeshStandardMaterial with onBeforeCompile to inject vertex displacement? Simpler: ShaderMaterial with custom lighting approximation. I'll write a ShaderMaterial: color mix between two brand colors based on wave height, plus a moving sheen band, plus fog. Keep it elegant. Actually, to keep material consistency with lights, I could use MeshStandardMaterial + onBeforeCompile vertex displacement, so it receives scene lights and shadows. That's more code but robust lighting. Hmm, ShaderMaterial with hand-rolled diffuse is fine and predictable. I'll do ShaderMaterial with simple lambert-ish shading computed analytically from the wave derivative. And apply a canvas texture (brand text pattern) via UV. **Particles:** BufferGeometry with random points in a box/sphere, PointsMaterial with additive blending, small size, slow drift + rotation. Also used for the "explosion" burst — separate Points object. **Environment/lighting:** - Scene background: null (transparent canvas over CSS gradient background) — set renderer alpha true. Nice: CSS radial gradients behind canvas. - Lights: ambient/hemisphere + key directional + rim point light with accent color. - Maybe an environment map for the physical material sheen — without HDR, use RoomEnvironment from three/addons! `import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js'` with PMREMGenerator. That gives nice PBR reflections for the shirt. Yes, use that — no external HDR needed. **Post-processing:** Could add UnrealBloomPass via addons. Adds wow but also complexity/perf risk. Maybe subtle bloom... With dark bg and lime accents, bloom would be gorgeous. But bloom on full page with overlaying HTML is fine (canvas only). Risk: perf on weak machines. I'll skip EffectComposer to keep it robust, and instead fake glow with emissive + CSS. Actually a slight bloom makes 3D sites look 10x better... but selective bloom is complex; full-scene bloom with dark scene is okay. Hmm. Decision: skip postprocessing for reliability; rely on materials, fog, gradients. Keep 60fps. **Performance:** pixelRatio clamp to 1.75, resize handler, pause rendering when tab hidden (rAF handles), reduce particle count on mobile. **Scroll integration:** Use Lenis for smooth scroll + GSAP ScrollTrigger. Sync: lenis.on('scroll', ScrollTrigger.update); gsap ticker with lenis.raf. Standard pattern. Global scroll timeline (scrubbed) for 3D: ```js const tl = gsap.timeline({ scrollTrigger: { trigger: document.body, start: 'top top', end: 'bottom bottom', scrub: 1 }}); ``` Then add phases with labels. Animate camera position/lookAt via object positions (use a camera rig group or lerp vectors with onUpdate). With scrub, gsap can tween camera.position z etc. But mouse parallax also moves camera — combine: keep base camera pos from timeline on a "rig" object, plus mouse offset added each frame. I'll store `camBase = new THREE.Vector3()` updated by timeline tweening an object's props, then in render loop: camera.position = camBase + mouseOffset. Simplify: create `state = { camZ: 7, camY: 0, shirtX: 0, ... }` and tween state props in the timeline; in animate loop, apply state to objects. This decouples nicely. Timeline phases (page height ~ 5 sections, each ~100vh): Let me define sections with ids and pin nothing; canvas is fixed full-screen behind everything (position: fixed, inset 0, z-index 0). Content z-index above with mix of backgrounds: hero transparent, manifesto transparent (shows fabric plane), collection has a solid-ish panel? If collection section has opaque background, 3D hidden behind — but I want shirt visible during collection for color tie-in. So collection section background should be transparent or semi with the cards having their own glass backgrounds. Design: dark overall; cards are glassmorphism (rgba white 0.04, blur) so 3D subtly visible around them. Actually a cleaner pattern: canvas fixed; sections have transparent backgrounds; use big typography over the 3D. Cards float with backdrop blur. Scroll timeline mapping (using body scrub): - 0.00–0.20: Hero — shirt center, scale 1, rotY slow auto; camZ 6.5. - 0.20–0.40: Manifesto — shirt moves x:-4.5, scale .55, opacity?; fabric plane slides in from bottom / scales up, uniform time runs; camZ 7.5, camY 0.5. - 0.40–0.62: Collection — fabric plane moves down/back, shirt returns x:0 scale 0.9, camZ 6. - 0.62–0.85: Lookbook — shirt explodes (scale 0, particles burst scale 1 opacity 1 then fade), particle sphere rises, camZ 8, camY 2. - 0.85–1.00: Footer — calm, particles drift, camZ 9. Fabric plane visibility: toggle uniform-driven opacity or just position it far when idle. Use gsap to tween its position z and material uniform uOpacity. Shirt explosion: tween shirt.scale to 0 with back.in ease, and burst particles (Points with positions = random directions * radius animated via shader? simpler: tween a `burst` object's scale 0→3 and opacity 1→0). Pre-generate burst points on a sphere shell. Fine. **Shirt color interaction:** product cards have data-color (hex). On mouseenter, gsap.to(shirtMat.color, { ... }) lerp to target; also accent UI variable? Keep UI accent constant lime; shirt color changes per product: e.g., products: "Void Tee — #111111", "Acid Hoodie — #c8ff00", "Static Cargo — #e8e4da", "Nova Jacket — #ff3d00"? Shirt is a tee; changing its color demonstrates dye options. Also a row of color swatch buttons under "Fabricator" label: clicking sets shirt color with a little bounce. Both hover cards and swatches. Wait — shirt is extruded with bevel; MeshPhysicalMaterial with sheen, roughness ~0.8, sheenColor accent-ish. Color change via gsap to color object works. **Canvas texture for shirt print:** draw brand logo on shirt chest: create canvas 512x512, draw text "KINETIC" + small symbol, use as map on a plane positioned slightly in front of shirt chest (z = depth/2 + 0.01), parented to shirt group so it moves along. The shirt front face is at z = extrude depth (with bevel). Position plane at z = depth + bevel + 0.01, rotated? Shirt front faces +z. Plane default faces +z. Good. Make print color contrast: lime on dark shirt; if shirt color changes to lime, print should be black — compute luminance and set print material color accordingly. Nice detail: on color change, set print color to black or white based on brightness. I'll implement `getContrastColor(hex)`. Also the fabric wave texture: canvas with repeated "KINETIC — MOTION" text diagonal, subtle. **Custom cursor:** dot + ring, lerp follow, grow on [data-hover] elements, hide on touch devices (media hover:none). Keep default cursor visible too? Fashion sites often hide cursor; but usability... I'll hide default cursor only on fine pointers via media query, and provide cursor. Add `mix-blend-mode: difference` for ring. **Text reveals:** Split headings into spans per line/word with overflow hidden wrappers, GSAP ScrollTrigger batch. I'll write a small `splitLines`? True line splitting needs measurement; simpler: wrap each line manually in HTML with `.line > .line-inner` and animate yPercent 110 → 0. I'll hardcode line spans in markup — deterministic and reliable. **Marquee:** CSS keyframes translating a duplicated strip. **Preloader:** counter 0→100 with gsap, brand letters stagger, then y-translate preloader up, then hero intro timeline (title lines up, shirt scales in from 0 with elastic, particles fade in). **Nav:** fixed top, logo left, links center/right, cart button with count. Mobile: hide links, show burger → fullscreen overlay menu with big links animated. Implement simply. **Cart micro-interaction:** "Add" buttons increment cart count with a bump animation and show toast "Added to bag". **Footer:** giant "KINETIC" outline text, links, "© 2025". **Reduced motion:** respect prefers-reduced-motion — skip heavy animations? At least guard cursor. I'll add a basic check to reduce shader wave amplitude? Keep simple: if reduced motion, set scrub timeline still fine... I'll just note it. Maybe skip. **Mobile:** canvas works; reduce pixelRatio; hide cursor; ensure touch scroll with Lenis (works with touch). Layout responsive via clamp() font sizes and grid → single column. Now, code structure (single HTML): ```html meta, title "KINETIC — Clothing in Motion" Google fonts: Syne 700/800, Space Grotesk 400/500/600 (preconnect) importmap

...

(fixed)

...big title, sub, cta, scroll hint...

...

...lines...

...heading + swatches + product cards...

...big numbers/stats + horizontal cards?...

``` Wait — module script and classic scripts: module executes after parsing; GSAP loaded via classic script in head or before module — fine since modules are deferred by default. CDN choices: - Three: use jsdelivr: `https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js` and addons path `https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/`. Importmap: ```json { "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js", "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/" } } ``` - GSAP: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js and ScrollTrigger.min.js - Lenis: https://unpkg.com/@studio-freight/lenis@1.0.42/dist/lenis.min.js (global Lenis). I recall this file exists. Alternatively `https://cdn.jsdelivr.net/npm/@studio-freight/lenis@1.0.42/dist/lenis.min.js`. I'll use jsdelivr for consistency. Guard with try/catch and fallback. RoomEnvironment import from 'three/addons/environments/RoomEnvironment.js'. Now the shirt shape. Let me carefully define a nice tee silhouette with bezier curves. Canvas coords: x right, y up (Three Shape uses x right, y up). I'll define half and mirror mentally. Key measurements (units): total width ~2.6 (sleeve tip to tip), body width 1.3, height 2.7, neck width 0.6. Path (clockwise starting at left neck): 1. moveTo(-0.30, 1.30) — left neck point 2. Collar curve: quadraticCurveTo(0, 1.02, 0.30, 1.30) — dips to y=1.02 at center... quadratic control at (0,1.02) gives curve passing midpoint at ((x1+2cx+x2)/4...) — approximate dip fine. 3. Right shoulder: lineTo(0.72, 1.18) — slight slope down from neck to shoulder. Maybe quadraticCurveTo(0.5,1.28, 0.72,1.16) for smooth shoulder. Keep simple lines with slight curves. 4. Right sleeve outer top: lineTo(1.30, 0.72) — sleeve angle. 5. Right sleeve outer bottom (cuff): lineTo(1.02, 0.30) — sleeve bottom edge. Actually sleeve: from shoulder tip (1.30, 0.72) down to cuff outer (1.06, 0.28)? The sleeve is a tube: top edge from shoulder to cuff-top, then cuff edge, then underarm back to body. Let me define: - shoulder tip (0.72, 1.16) - sleeve top edge to cuff top outer (1.34, 0.62) - cuff edge to cuff bottom outer (1.10, 0.22) - sleeve underarm edge back to armpit (0.66, 0.55) - body side down to hem (0.66, -1.35) - hem bottom across to (-0.66, -1.35) — slight curve: quadraticCurveTo(0, -1.28, -0.66, -1.35) for subtle sag - left body side up to armpit (-0.66, 0.55) - left sleeve underarm to cuff bottom outer (-1.10, 0.22) - cuff edge to cuff top outer (-1.34, 0.62) - sleeve top edge to shoulder tip (-0.72, 1.16) - shoulder to neck left: quadraticCurveTo(-0.5, 1.28, -0.30, 1.30) close. Use quadraticCurveTo for cuff/hem for softness. Extrude depth 0.28, bevelThickness 0.06, bevelSize 0.06, bevelSegments 3, curveSegments 24. Center geometry: translate z by -(depth/2 + bevel?) Actually extrude goes 0..depth in +z; translate by -depth/2 to center. With bevel, z extends -bevelThickness..depth+bevelThickness; after translate, roughly centered. UVs on extrude are in shape coords — for the print plane I use separate plane anyway. The shirt material color is uniform; maybe add subtle fabric normal via bump? Could generate a noise canvas texture as bumpMap with repeat — nice fabric feel! Create 256x256 canvas with random gray noise, use as bumpMap with bumpScale 0.02, wrap repeat. Cheap and effective with MeshPhysicalMaterial. Also slight roughness variation. I'll add it. Also add stitching detail? Skip — keep clean. Sleeves as part of extrude are flat-ish (same depth) — acceptable stylization, like a paper-cut tee. With bevel it reads as a soft object. Add slight vertex "cloth ripple" animation to the whole shirt: gentle rotation/scale breathing + a subtle wave via morphing? I'll add gentle rotation wobble and float y sine. Also slow auto-rotate group; plus mouse parallax tilts. Additionally, a wireframe-ish "tech" accent: add an edges outline? Could add THREE.EdgesGeometry lines in accent color slightly scaled — looks techy. Maybe too busy; skip or subtle. I'll add a thin accent ring (torus) orbiting the shirt in hero — a nice 3D accent. Orbit ring tilted, rotating slowly, lime color, thin tube (TorusGeometry radius 1.9, tube 0.008). Plus small sphere satellites. Adds depth. And in hero phase visible; timeline moves it away later or keep always — keep orbiting, it's pretty. **Fabric plane shader:** ```glsl // vertex uniform float uTime; uniform float uAmp; varying vec2 vUv; varying float vElev; void main(){ vUv = uv; vec3 p = position; float w1 = sin(p.x*0.9 + uTime*1.2); float w2 = sin(p.y*1.4 + uTime*0.8 + p.x*0.4); float elev = (w1*0.6 + w2*0.4) * uAmp; p.z += elev; vElev = elev; gl_Position = projectionMatrix * modelViewMatrix * vec4(p,1.0); } // fragment uniform vec3 uColA; uniform vec3 uColB; uniform sampler2D uMap; uniform float uOpacity; uniform float uTime; varying vec2 vUv; varying float vElev; void main(){ vec3 base = mix(uColA, uColB, smoothstep(-0.6, 0.6, vElev)); // fake lighting: brighten crests float light = smoothstep(-0.8, 1.0, vElev); base += light * 0.15; vec4 tex = texture2D(uMap, vUv * vec2(3.0, 2.0)); vec3 col = base * (0.55 + 0.45*tex.rgb) + tex.rgb*0.25; // moving sheen band float sheen = smoothstep(0.02,0.0,abs(fract(vUv.x*1.5 - uTime*0.05)-0.5)-0.48); col += sheen*0.08; gl_FragColor = vec4(col, uOpacity); } ``` Transparent: true, side: DoubleSide, depthWrite false maybe. Additive? No, normal blending with opacity control. Texture canvas: draw diagonal repeating text "KINETIC ✦ MOTION ✦ " in low-contrast white on transparent; multiply-ish usage as above. Simplify: use tex.rgb as pattern overlay. **Particles (ambient):** 400 points in sphere radius 8, PointsMaterial size 0.03, color lime-ish white, transparent opacity .5, additive. Slow rotation + per-frame y drift via time in shader? Just rotate group and bob. **Burst particles:** 300 points on sphere shell radius ~1.2 around shirt; material opacity 0; timeline: at explosion, opacity .9, scale 0.2→2.2, then fade. Points colored accent/white mix via vertex colors. **Camera & rig:** PerspectiveCamera fov 42, position z base 7. Rig approach: `camState = {x:0,y:0,z:7}` tweened; actual camera.position.set(camState.x + mouse.x*0.6, camState.y + mouse.y*0.4, camState.z); camera.lookAt(lookState) similarly with mouse influence. Shirt group rotation: base auto-rotate + mouse tilt (rotateX/rotateY small lerp). **Scroll timeline (scrub):** Use gsap.timeline with ScrollTrigger scrub on body. But careful: ScrollTrigger with trigger: document.body start 'top top' end 'bottom bottom'. Tween state object props: ```js const S = { camZ: 7.2, camY: 0, camX: 0, shirtX: 0, shirtY: 0, shirtS: 1, shirtRot: 0, shirtOpacity: 1, fabricY: -14, fabricS: 1, fabricOp: 0, ringOp: 1, burstS: 0.2, burstOp: 0, particlesY: 0, }; ``` Timeline: - to S at hero (initial set) - label manifesto: shirtX -5.2, shirtS .5, shirtRot .6? ; fabricY 0, fabricOp 1, camZ 8.2, camY .4 - collection: shirtX 0, shirtS .85, fabricY 14 (down out), fabricOp 0, camZ 6.2, camY 0 - lookbook: shirtS 0.001 (expo.in), burstOp .9 & burstS 2.4 then burstOp 0, particlesY +3, camZ 8.5, camY 2.2, ringOp 0 - footer: camZ 9.5, camY 0, particlesY 0 (drift) Also shirt opacity fade before scale-to-0 to avoid pop: use material transparent true; tween shirtMat.opacity 1→0 at explosion then back to 1 when returning? At collection shirt returns — order: explosion happens at lookbook start; shirt already gone; at footer maybe shirt reassembles? Nice touch: at footer, shirt reforms (scale back with elastic) as a "closing" moment behind the giant footer text. Timeline: footer: shirtS 1 with elastic, shirtMat.opacity 1. But position x 0 y -0.5 scale .8. Cute. Let me include: lookbook end → shirt hidden; footer: shirtS .8, opacity 1, shirtY -0.6, elastic.out. Burst already faded. Careful: material opacity with extrude + bevel fine. Set transparent true always; minor sorting issues acceptable (single object + print plane child... print plane as child with its own opacity; make print material transparent too, depthWrite false, polygonOffset to avoid z-fight). **Applying state each frame:** ```js shirtGroup.position.set(S.shirtX, S.shirtY + Math.sin(t)*0.08, 0); shirtGroup.scale.setScalar(S.shirtS); shirtGroup.rotation.y = S.shirtRot + t*0.25 + mouse.x*0.3; // auto rotate shirtGroup.rotation.x = mouse.y*0.15; ``` Auto-rotate continuous plus scrub-rot base. Fabric: mesh.position.y = S.fabricY; scale S.fabricS; material.uniforms.uOpacity = S.fabricOp; uTime += dt. Ring opacity via material opacity (transparent). Burst: scale S.burstS, opacity S.burstOp, rotation slow. Camera: pos lerp toward (S.camX + mouseX*0.5, S.camY + mouseY*0.35, S.camZ); lookAt(S.camX*0.5, S.camY*0.5, 0). Since S is tweened by scrub with scrub smoothing (scrub:1 gives smoothing), plus our own lerp for mouse — good. **ScrollTrigger for DOM:** - Preloader hides then intro tl. - `.reveal-line` inner spans: yPercent 120 → 0 stagger, trigger each section heading. - Stats counters: innerText tween with snap. - Product cards: y+opacity stagger in. - Marquee is CSS. - Section headings parallax slight yPercent. - Lookbook big images? Use CSS gradient cards with SVG silhouettes + numbers. **Products data:** 1. "AERO TEE 001" — $48 — color #e8e4da (bone) — swatch 2. "STATIC HOODIE" — $120 — #c8ff00 (acid) 3. "NIGHT CARGO" — $140 — #1c1c22 (void) — card bg adjust 4. "ORBIT JACKET" — $260 — #ff4d00 (blaze) Hover card → shirt color lerp to that color + print contrast updates + maybe accent glow ring color? Keep ring lime. Swatch buttons row: "DYE LAB" — click swatch sets shirt color with elastic scale pulse on shirt. Add-to-bag: toast "AERO TEE 001 added to bag", cart count++, button brief "Added ✓" state. **Newsletter:** fake submit → success message animation. **Footer giant text:** "KINETIC®" huge outline, maybe marquee vertical? Keep huge static with hover fill? Use text stroke. **Nav links** smooth-scroll to sections via lenis.scrollTo. **Accessibility:** aria labels on buttons, alt-ish (SVGs aria-hidden), focus styles. Now sizes: This will be a large file (~1200+ lines). That's fine. Let me also handle WebGL fail gracefully: try/catch around renderer creation; if fail, hide canvas, site still readable (content has its own bg? Content sits over canvas; if canvas missing, body bg gradient still fine). **Background CSS:** body bg: radial gradients very dark (#07070b base, subtle lime glow top, blue-ish bottom). Grain overlay via SVG feTurbulence data-URI, opacity .06, pointer-events none, position fixed, z-index high (above canvas below UI? above content for film grain — put z-index 9998 with pointer-events none; typical). Let me now write the actual shirt path more concretely and test mentally. Shape (y up), I'll use curves: ```js const s = new THREE.Shape(); s.moveTo(-0.32, 1.32); // left neck s.quadraticCurveTo(0, 1.00, 0.32, 1.32); // collar dip s.quadraticCurveTo(0.52, 1.30, 0.74, 1.16); // to right shoulder tip s.lineTo(1.36, 0.60); // sleeve top edge to cuff top s.quadraticCurveTo(1.42, 0.50, 1.34, 0.40); // cuff round s.lineTo(1.06, 0.16); // cuff bottom outer... ``` Hmm wait, sleeve: shoulder tip (0.74,1.16) → cuff top outer should be down-right: (1.36, 0.60). Cuff edge from (1.36,0.60) to (1.12, 0.20) (down-left slightly). Then underarm edge from (1.12,0.20) back to armpit (0.68, 0.52). Then body side (0.68,0.52) → (0.68,-1.30). Hem curve to (-0.68,-1.30) with control (0,-1.22). Left side up to (-0.68,0.52). Left underarm to (-1.12,0.20). Cuff edge to (-1.36,0.60). Sleeve top edge to shoulder (-0.74,1.16). Shoulder curve to neck (-0.32,1.32) control (-0.52,1.30). Close. That yields a tee with short sleeves angled ~40°. Width total 2.72, height 2.64 (1.32 to -1.30). Reasonable proportions. Extrude settings: depth 0.30, bevelThickness 0.05, bevelSize 0.05, bevelSegments 4, curveSegments 16. Then geometry.center()? center() would also center x/y (already roughly centered: x symmetric, y from -1.30 to 1.32 → center y ≈ 0.01 fine). I'll translate z by -(0.30/2) = -0.15 manually (bevel adds ±0.05, approx centered enough; use geometry.center() for simplicity — it centers bounding box including bevel: z from -0.05 to 0.35 → center z 0.15 → translate -0.15. Good, use center()). Compute vertex normals after? ExtrudeGeometry computes normals; with bevel they're smooth-ish on bevel, flat on faces — fine. Cloth ripple on shirt: skip vertex displacement (chunky triangulation). Instead rely on rotation/float + print. OK. **Print plane:** size ~1.0 x 0.55 at chest y≈0.35, z = 0.21 (front face at 0.15+bevel 0.05=0.20). Slight curve? Flat plane fine. Canvas texture 1024x512 transparent bg, draw "KINETIC" big in Archivo/Syne (canvas font may not have webfont loaded at draw time — use document.fonts.ready then redraw, or use generic bold sans; better: draw with font '800 120px Syne' after document.fonts.load. I'll create texture after fonts.ready, or draw initially with fallback and redraw on fonts.ready then needsUpdate. Implement: function drawPrint(ctx) uses fonts; call once, and document.fonts.ready.then(redraw). Texture needsUpdate = true after redraw. Print design: big "KINETIC" arced? Keep straight bold, plus small "MOTION SS25" under, plus a small asterisk/star glyph. Color set dynamically: printMat.color = contrast color. Also back print? skip. **Ring/orbit:** TorusGeometry(2.0, 0.006, 8, 128) lime emissive material (MeshBasicMaterial color lime, transparent opacity .8). Tilt x 1.2, rotate slowly. Add 2 small spheres (r .03) on ring as satellites — parent to ring group, they orbit with it. Ring group added to scene at shirt position-ish; timeline could scale it with shirt? Simpler: ring is separate, positioned at shirt's x via state too — I'll parent ring to a "heroGroup" containing shirt? But shirt scale changes affect ring if parented... Actually parenting ring to shirtGroup with ring scaled inversely is messy. Alternative: ring follows shirtX via state in frame loop: ringGroup.position.x = S.shirtX*0.6 (lag). Fine — set ring position each frame from S.shirtX and shirtY. Ring opacity S.ringOp. Hmm, but during collection shirt at x0 scale .85 — ring radius 2.0 might collide with UI cards; opacity lower then. It's background art; fine. **Fog:** scene.fog = new THREE.Fog(bg, 8, 16)? Canvas transparent with fog needs fog color matching CSS bg (#07070b) — fog affects standard materials only (shirt), not ShaderMaterial (unless implemented). Subtle depth cue. Include mild fog; but with alpha renderer, fog blends to color not alpha — shirt edges fade to fog color which matches bg — okay since bg CSS similar color. Risky mismatch with CSS gradient; use very subtle fog or none. Skip fog; use vignette via CSS overlay instead. Yes — CSS radial vignette. **Tone mapping:** ACESFilmic, exposure 1.1. Output color space default SRGB in 160 (r152+ default). Set renderer.outputColorSpace = THREE.SRGBColorSpace explicitly. **Lights:** hemi (0xffffff, 0x0a0a0f, 0.5), dir key (2.0) pos (3,4,5), rim point lime (-4,2,-3) intensity 8 (r160 uses physical units? In r155+, useLegacyLights default false → intensities in candela-ish; point light intensity needs to be high like 20-60 for small scene... With distance ~5, intensity 30 gives decent. I'll use DirectionalLights mostly (intensity ~1-3 fine) plus a PointLight accent intensity 30 distance 20 decay 2.) Let me use: hemi 0.6, key dir 1.6 from top-right, fill dir 0.5 from left cool color, rim dir 1.2 from behind lime-tinted. Directional avoids unit pitfalls. RoomEnvironment via PMREM for reflections: scene.environment = pmrem.fromScene(new RoomEnvironment(renderer? no—RoomEnvironment()), 0.04).texture. In r160 RoomEnvironment constructor takes no renderer arg (older took renderer). `new RoomEnvironment()` correct for r160? Checking memory: RoomEnvironment class extends Scene, constructor() — yes in r160 it's `new RoomEnvironment()` (renderer param removed in r157? Actually earlier versions: `new RoomEnvironment()` always; pmremGenerator.fromScene(env).texture). Yes fine. environment intensity: for MeshPhysicalMaterial use envMapIntensity 0.6 to keep dark mood. **Shirt material:** MeshPhysicalMaterial({ color, roughness: 0.85, metalness: 0, sheen: 1, sheenRoughness: 0.6, sheenColor: 0x9fb4ff? or accent, clearcoat 0, bumpMap noise, bumpScale 0.015, envMapIntensity 0.5 }). transparent: true (for opacity fades). **Resize:** update camera aspect, renderer size, and fabric plane scale maybe. **Mouse:** track normalized (-1..1), lerp in loop. Also parallax on some DOM (hero title translate slight via gsap quickTo). Nice: hero content moves slightly opposite mouse. **Scroll progress bar:** fixed top 2px lime bar scaleX = scroll progress (ScrollTrigger onUpdate or lenis scroll event). **Nav hide on scroll down / show on up:** optional; keep simple: nav always, bg blur after scrollY>40 (add class). **Menu overlay (mobile):** full-screen dark, big links stagger, close button. Implement with class toggle + GSAP. **Toast:** bottom center pill, gsap fromTo. **Cart count bump:** scale keyframe. Now, DOM content details: Nav: left logo "KINETIC®", center links (Collection, Manifesto, Lookbook, Contact), right: search icon? skip; "Bag (0)" button + burger (mobile). Hero: - top-left small: "EST. 2025 — ANTWERP" - Massive title: "KINE" / "TIC" two lines? Or "MOTION / IS / WEAR"? Brand name KINETIC; hero headline could be "WEAR THE MOTION" with KINETIC as logo. Big display: "CLOTHING IN MOTION" lines: "CLOTHING" "IN MOTION" with outline word style for one. Let me do: line1 "CLOTHING", line2 "IN MOTION" (second line outlined stroke style). Sub: "SS25 — The Kinetic Collection. Cut for movement, dyed for light." CTA buttons: "Explore the drop" (scroll to collection), "Our manifesto". - Right bottom: coordinates / "Scroll" indicator animated line. - Also floating spec text near 3D: "360° — drag?" We won't implement drag on shirt (canvas fixed behind content; pointer events none). Could enable drag rotate on hero via pointer events on canvas... canvas is behind content; pointer events on sections would block. Make canvas pointer-events none; use window pointermove for parallax only. Drag rotate: add on hero section pointerdown drag → rotate shirt extra. Nice interactivity! Implement: on hero pointerdown, track drag dx → targetRotY offset, decays. Add hint "drag to spin". Since canvas is pointer-events:none but hero section receives events — yes hero is above canvas. Implement drag on hero only. Also this conflicts with text selection — fine. Marquee: "KINETIC — MOTION COLLECTION — SS25 — 100% ORGANIC COTTON —" repeating, CSS animation, border top/bottom, slight rotate(-2deg) for style, lime bg black text? A lime strip is bold. Yes: lime background, black Syne text, rotated -1.5deg, overlapping sections. Manifesto: label "01 — MANIFESTO", big lines: "We don't make clothes." / "We make motion you can wear." with word-by-word reveal (I'll wrap words in spans via JS for reveal: split by words, stagger with scrub). Implement generic: elements with [data-word-reveal] get words wrapped; ScrollTrigger scrub yPercent from 100→0 stagger. Also side paragraph small. Collection: label "02 — THE DROP", heading "FOUR PIECES. ZERO STANDING STILL." Swatch row "DYE LAB — recolor the 3D tee": 4 swatches. Cards grid 4 (2x2 tablet, 1 col mobile, 4 across desktop? 4 cols tight; use 2x2 on desktop with big cards? Fashion grid: 2 cols large cards with hover image zoom. I'll do 2 cols on desktop, cards tall (aspect 3/4) with SVG garment illustration + gradient bg per product + name/price + add button. Hover: image scale, arrow slide. SVG garment silhouettes: tee, hoodie, cargo pants, jacket — simple path shapes filled with product color gradient. I'll write simple path data. Keep abstract-cool. Lookbook: label "03 — LOOKBOOK", heading "SHOT AT 1/1000s." Stats row: counters: "04 pieces", "27 motions captured", "100% organic", "00 plastic". Plus maybe 3 horizontal image-strip cards with gradient + big index numbers. Keep stats + big typographic moment since 3D explosion happening here. Add horizontal scrolling strip? With Lenis, horizontal scroll via GSAP pin is complex; skip pinning (pinning + fixed canvas conflicts). Instead: marquee of big words "MOTION — WORN — LIVED —" second marquee reversed direction. Newsletter/Contact: "JOIN THE MOTION" heading, email input, button; on submit success swap text. Also address/socials row. Footer: giant outlined "KINETIC®" (stroke text via -webkit-text-stroke), links columns, bottom bar "© 2025 KINETIC STUDIO — Antwerp / Tokyo / NYC", "Made in motion". Also a "back to top" button. **Grain overlay:** SVG turbulence data URI, animation? static fine, plus mix-blend overlay. **Selection color:** lime bg black text. **Scrollbar styling:** thin, dark with lime thumb. Now write JS carefully. Order: module script imports three; classic scripts for gsap/lenis loaded before module (module deferred anyway). GSAP global `gsap` accessible inside module. Register ScrollTrigger. Potential pitfalls: - Importmap must appear before module script. Yes. - Lenis + ScrollTrigger: standard integration: ```js const lenis = new Lenis({ duration: 1.15, smoothWheel: true }); lenis.on('scroll', ScrollTrigger.update); gsap.ticker.add((t)=> lenis.raf(t*1000)); gsap.ticker.lagSmoothing(0); ``` - Anchor links: use lenis.scrollTo(target, {offset:-80}). - Preloader must allow scroll after; lock scroll during preloader: lenis.stop() then start. Also body overflow hidden during preloader? With Lenis, use lenis.stop()/start(). - ScrollTrigger scrub timeline on body with fixed canvas: works. - Ensure ScrollTrigger.refresh() after fonts load / images (no images). Call refresh after preloader done. - The scrubbed global timeline: create after scene setup. Use `defaults: { ease: 'none' }`. Phase boundaries by progress fractions of whole page: total scroll = body height - vh. Sections roughly: hero 100vh, marquee ~15vh, manifesto ~120vh, collection ~140vh, lookbook ~110vh, newsletter ~90vh, footer ~70vh → total ≈ 645vh → progress fractions: hero end ≈ 100/645 ≈ 0.155. Manifesto 0.155–0.34. Collection 0.34–0.56. Lookbook 0.56–0.73. Newsletter/footer 0.73–1. I'll set keyframes: ``` tl.set(S, {shirtX:0,...}, 0) tl.to(S, {shirtX:-5.4, shirtS:0.55, camZ:8.4, camY:0.5, fabricY:0, fabricOp:1, ringOp:0}, 0.16) .to(S, {shirtX:0, shirtS:0.85, camZ:6.4, camY:0, fabricY:16, fabricOp:0, ringOp:0.9}, 0.36) .to(S, {shirtS:0.001, shirtMatOpacity:0, burstOp:0.85, burstS:2.6, camZ:8.6, camY:2.4, ringOp:0}, 0.58) .to(S, {burstOp:0}, 0.66) .to(S, {shirtS:0.8, shirtMatOpacity:1, shirtY:-0.9, camZ:9.6, camY:0.6, particlesY:4, ringOp:0.6}, 0.80) ``` scrub: 1 (smoothed). Also default ease none; add ease 'power2.inOut' per tween ok. shirtMatOpacity: tween a state var and apply to both shirtMat.opacity and printMat.opacity. Note: shirt rotation auto continues always. - During manifesto, shirt at x -5.4 might exit frame (fov 42 at z 8.4: half-width at z=0 ≈ tan(21°)*8.4*aspect... horizontal half-FOV larger; at aspect 16:9 hfov ~ 66° half 33°, tan33≈0.65*8.4≈5.4 — shirt at -5.4 edge-ish, scale .55 → mostly off-frame left; that's ok "slides away". Maybe -4.6 to keep partially visible. I'll use -4.8 and scale .5. - Fabric plane size 26x14 at z -2? Position z: -1.5 behind shirt? When active it should dominate: scale 1.6, z 0.5 in front? If in front of shirt it covers it (shirt moved left anyway). Plane at z=0.8, y=0 when active; idle y=-16 hidden below. Rotate slight x for perspective. uAmp 0.55. Also plane segments 160x90 for smooth waves (~14k verts fine). - Burst particles: generate 260 points: random unit sphere * (0.6..1.1). PointsMaterial size .05 vertexColors with lime/white/orange mix, additive, depthWrite false. Position at shirt center (0, shirtY, 0) — but shirtY changes per phase; burst should appear where shirt was: at explosion shirt at x0 y0. Parent burst to scene at (0,0,0). Fine. - Ambient particles: 350 in box 24x14x10, additive, opacity .35, size .035, slow rotation y and x drift via time in loop (rotate group). **Frame loop:** clock delta; uTime += delta; lerp mouse; apply states; shirt wobble: shirtGroup.rotation.z = sin(t*0.5)*0.03; ring rotate; satellites; renderer.render. Also update print? no. **Color lerp:** gsap.to(shirtMat.color, {r,g,b?}) — gsap can tween Color object props r,g,b via gsap.to(color, {r:..,g:..,b:..})? Color has r,g,b props — yes gsap tweens them. Or use gsap.to(mat.color, {css?}) simpler: use Color.lerpColors in onUpdate with a temp. I'll do: gsap.to(colorObj, {r,c,b?}) Actually gsap can tween any numeric props: gsap.to(shirtMat.color, {r: target.r, g: target.g, b: target.b, duration:.6}). Works. Print contrast: compute relative luminance of target; set printMat.color to black or white (tween too). Also maybe print texture itself is white shape with alpha — using material color tint: texture drawn white, material color multiplies. Draw print canvas in white; set material color. Also update swatch active state and a small "current dye" label. **Card hover → shirt color:** mouseenter card → setShirtColor(product.color); mouseleave → revert to default bone? Or keep last selected (dye lab persists). I'll have `currentColor` state; card hover previews (tween to preview), mouseleave tweens back to currentColor (from swatch selection). Swatch click sets currentColor permanently + pulse shirt scale. **Buttons magnetic:** on mousemove translate toward cursor within bounds, reset on leave. Apply to .btn-magnetic. **Custom cursor:** dot follows instantly, ring lerps; data-cursor="view" elements enlarge ring with label? Keep: ring scales 1.6 on hoverables (a, button, .card). Hide on touch. **Counters:** data-count attr; ScrollTrigger once → gsap to innerText with snap. **Word reveal:** wrap words: for [data-words] elements: split text into spans.word > span.word-inner? For scrub stagger: structure `.w-line` per line? Simpler: each target element's words wrapped in `.w` spans (inline-block, overflow hidden parent `.w`? need inner). Standard: `word` animate .wi yPercent 110→0, rotate slight, stagger 0.02, scrub or toggle once. I'll do once-toggle with toggleActions play none none reverse? Use scrub false, start 'top 85%', once true for perf. For manifesto big lines use scrub for luxurious scroll-linked reveal: scrub: true across its own trigger (start 'top 80%', end 'top 30%'). I'll implement data-reveal="scrub" vs "once". Line masks for headings: `.mask { overflow:hidden } .mask > .mi { display:block; transform: translateY(120%) }` gsap to y 0. **Hero intro timeline** (after preloader): - preloader: counter 0→100 (1.2s), brand letters up, then panel slides up (clip), then hero: title lines .mi y 120%→0 stagger .08, sub fade, ctas fade, shirt scale 0→1 elastic (state shirtS via gsap on S? S is scrubbed timeline-controlled — conflict! Scrub timeline sets shirtS each scroll update; intro tween on S.shirtS would be overwritten by scrub updates? Scrub timeline only writes when scrolled... Actually scrubbed timeline applies its values on refresh and on scroll; intro tween competing could conflict. Solution: separate intro multiplier: S.introS (1 after intro) multiplied in frame loop: shirtScale = S.shirtS * S.introS. Intro tween animates introS 0→1 elastic. Also introRot offset similar. And shirtMat opacity multiplied by introOp. Clean.) Also preloader percentage ties to a fake asset progress — just timed. **Preloader design:** black full, center: "KINETIC®" letters spaced, below counter big number + "%", bottom thin progress bar. Letters stagger up on load start. Then wipe up with curved edge (border-radius bottom 100%?) — gsap yPercent -100 with ease power4.inOut, and clip via overflow hidden on a wrapper. Add slight content blur? keep simple. **Ensure fonts for canvas print:** draw after document.fonts.ready.then(initPrintTexture) — but texture needed at scene build; build with fallback font then redraw on fonts.ready (texture.needsUpdate). Fine. **Edge case:** WebGL context creation fail → wrap in try, show message? Just console warn; site still works (DOM content has bg color sections? Sections transparent over body gradient — fine). Body background: base #08080c with subtle radial lime glow at 70% 20% and blue at bottom, plus vignette. Sections transparent. Cards glass. Text #f2f0ea. Nav style: fixed, padding, mix-blend-difference? With lime accents... use blend difference for nav text to stay visible over anything — trendy. I'll use mix-blend-mode: difference on nav container (color white → inverts over lime marquee etc.). Careful with logo color. Keep difference; looks filmic. But difference over dark bg = white-ish fine. Menu overlay above all. Z-index order: canvas 0 (fixed), content 1, marquee within content, nav 50, cursor 100, grain 90 (pointer-events none, above content below cursor? grain above everything incl nav looks filmic: z 200, opacity .05, pointer-events none, but above preloader? preloader z 300). Toast 150. Preloader 400. Cursor 500. Canvas fixed z 0; sections position relative z 1. Some sections may want solid bg to hide 3D? All transparent — 3D always subtly present; ensure text readability with text-shadow/backdrop. Collection cards glass blur — good. Manifesto big text over fabric wave — add slight text bg? Big text with mix-blend? Keep strong weight, dark text-shadow. Fine. Scroll progress bar top: lime, z 60. **Let me also add a "section indicator"** fixed right side dots? Skip — enough features. Now, write the code. I'll be careful with: - importmap exactly as required. - No three.min.js. - GSAP cdnjs 3.12.5. - Lenis jsdelivr @studio-freight/lenis@1.0.42. Let me draft the full HTML now, mentally checking syntax. Key sizes: hero title clamp(3.5rem, 12vw, 11rem). Use Syne 800. Outline text: -webkit-text-stroke: 2px var(--ink); color: transparent. Let me write CSS variables: --bg:#07070b; --ink:#f2f0e9; --lime:#d7ff3e; --muted: rgba(242,240,233,.55); --line: rgba(242,240,233,.14); --card: rgba(255,255,255,.04); Noise SVG data URI in CSS: url("data:image/svg+xml,...feTurbulence...") — must escape quotes properly. Marquee CSS: .marquee-inner { display:flex; animation: marq 22s linear infinite; } duplicate content twice, translateX(-50%). Product card SVG silhouettes: I'll craft simple paths: - Tee: use similar path as 3D but 2D filled: viewBox 0 0 200 240. Path: M70,20 Q100,38 130,20 L150,30 L185,75 L168,105 L150,92 L150,225 L50,225 L50,92 L32,105 L15,75 L50,30 Z — rough tee. Let me refine: collar from (70,20) quad to (130,20) dipping (100,40). Shoulders: (70,20)->(50,30)? Hmm orientation: y down in SVG. Collar at top. Left neck (78,22), curve dip to (100,44) to (122,22) — that's the neck hole (we fill body; neck hole should be cut — use fill-rule or draw body path including concave neck curve: path goes along neckline inward. Body outline: start left neck (78,22) → quad (100,46) (122,22) → right shoulder (146,30) → sleeve top right (182,80) → cuff right (166,112) → armpit (138,96) → right side down (138,222) → hem to (62,222) → left side up (62,96) → armpit left (34,112)? wait underarm: from hem left up to (62,96) then sleeve underarm edge to cuff left (34? ...). Let me write: M78,22 Q100,46 122,22 L146,32 L184,82 L166,114 L138,98 L138,222 L62,222 L62,98 L34,114 L16,82 L54,32 Z. Check: from (122,22) line to shoulder (146,32), to sleeve top outer (184,82), cuff edge to (166,114), underarm edge to armpit (138,98), body right down (138,222), hem (62,222), up (62,98), underarm to cuff (34,114)? direction: from (62,98) to cuff bottom outer left (34,114), cuff edge to (16,82), sleeve top to shoulder (54,32), close to (78,22). Yes that's a tee. - Hoodie: similar with hood bump: add hood arc at top: M78,26 hood curve... simplify: draw hoodie as tee + hood semicircle behind: path with hood: start at left neck side with arc over top: M70,30 Q100,-6 130,30 (hood outer) then Q100,44 inner? Complex; approximate: hoodie = tee path + circle hood behind (draw ellipse first). I'll compose: ellipse hood (cx100 cy30 rx34 ry22) + body tee-ish with higher neck. Good enough stylized. - Cargo pants: two legs: path: M60,10 L140,10 L146,222 L104,222 L100,120 L96,222 L54,222 Z with pockets rects. - Jacket: tee-like longer with zipper line: body to 222, center line, collar high: draw path with collar: M74,14 Q100,30 126,14 L126,26? ... I'll do simplified blouson: M72,20 Q100,40 128,20 L150,30 L186,80 L168,112 L140,96 L142,222 L58,222 L60,96 L32,112 L14,80 L50,30 Z + zipper line M100,44 L100,222 stroke + collar rect. Fine — stylized line-art style with stroke instead of fill might look more "fashion sketch". Decision: garments drawn as stroke-only (stroke ink, stroke-width 2, fill none) on gradient card with big index number — sketch aesthetic. Strokes cleaner to write. Add dashed stitch lines for detail. Card bg: per-product gradient (dark with product color glow radial). Big word behind (product name outlined). Hover: svg translate/rotate slight, card bg glow intensifies. Add button: pill outline → fills lime on hover; click → toast + cart++. **Stats counters:** values: 27 (motions), 100 (% organic), 04 (pieces), 00 (plastic grams). Animate. **Lookbook strip:** maybe 3 "film" cards with gradient + frame lines + caption "LOOK 01 — WALK". They sit over explosion moment. Cards with aspect 4/5, CSS gradients different hues, subtle animated sheen on hover. **Newsletter:** input + button; JS fake submit: on submit preventDefault, validate email regex, show success text swap with gsap. **Footer:** giant "KINETIC®" stroke text full width (font-size ~18vw), marquee-ish? Static with slight parallax y on scroll (gsap). Links: Instagram, TikTok, X (dummy #). Bottom row: copyright, "Designed in motion", back-to-top button. **Now the module script structure:** ```js import * as THREE from 'three'; import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js'; // ---------- helpers const $ = (s, c=document)=>c.querySelector(s); const $$ = (s, c=document)=>[...c.querySelectorAll(s)]; // ---------- renderer/scene let renderer; try { renderer = new THREE.WebGLRenderer({canvas, antialias:true, alpha:true}); } catch(e){...} renderer.setPixelRatio(Math.min(devicePixelRatio, 1.8)); renderer.setSize(innerWidth, innerHeight); renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.15; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(42, innerWidth/innerHeight, .1, 100); pmrem env. lights... // noise texture for bump function makeNoiseTexture(){canvas 256, random gray, THREE.CanvasTexture, wrap Repeat} // print texture function makePrintTexture(){...} // redraw fn // shirt shape + extrude // shirtGroup: mesh + print plane // ring group // fabric plane + shader // particles ambient + burst // state S + intro multipliers // scroll timeline (gsap) — after DOM ready (module deferred so DOM ready) // interactions: pointermove, drag spin on hero, swatches, cards, add-to-bag, magnetic, cursor, nav, menu, preloader, reveals, counters, marquee is css, newsletter, toast. // resize // animate loop ``` Careful: GSAP loaded as classic script before module → available as window.gsap. In module, reference `gsap` global (allowed). ScrollTrigger too. Lenis global `Lenis`. **Drag spin:** hero section pointerdown → dragging=true, lastX; pointermove → deltaX → spinVel; on up → decay. Apply extra rotation offset `S.spin` (not scrubbed; own var) decaying: spin += vel; vel *= .95. shirtGroup.rotation.y = baseAuto + S.shirtRot + S.spin + mouse. During manifesto shirt off-screen — drag only bound on hero element, fine. **Auto rotate:** baseAuto += delta*0.35 (pause when tab hidden automatic via rAF). Also gentle bob: shirtGroup.position.y = S.shirtY + sin(t*1.1)*0.07. **Print plane parenting:** add to shirtGroup at z 0.205, y 0.32. Size 1.05 x 0.6. RenderOrder 2, depthWrite false? It sits in front of front face; with depthTest true fine (it's in front). Slight offset 0.005 avoids z-fight. Also add second print on back? skip. Also collar tag: tiny plane at neck? skip. **Fabric texture canvas:** 1024x512, transparent, draw repeated diagonal text "KINETIC® MOTION SYSTEM —" in rgba(255,255,255,.9) bold 64px rotated -20°, tile. In shader multiply. Shader uniforms: uTime, uAmp, uOp, uColA (deep #0e0e13?), uColB (lime dark #9dbf2f?), uMap. Colors: base dark graphite #101016 to #1a1a22 with lime tint crests? Let's do colA #0c0c12, colB #2a2a10? Hmm lime-tinted crests: colB #3a3f16 with sheen. Plus text pattern white overlay *0.12. And a lime rim band: add fresnel-ish via view angle? Keep simple: crest light + text + subtle horizontal scanlines? fine. Also fragment: alpha = uOp * (edge fade?) keep full. Set material transparent, depthWrite false, side DoubleSide. Plane renderOrder behind shirt? During manifesto shirt is left small; plane z 0.8 front of shirt (shirt z 0). Plane transparent so shirt visible through slightly — ok since shirt small at left edge mostly out of frame. Hmm — plane covering whole screen at manifesto with opacity 1 would hide shirt fully (fine, shirt slid out). But also hide ambient particles (behind plane, depthWrite false on plane means particles drawn before/after?). Particles additive depthWrite false; render order: set fabric renderOrder 1, particles renderOrder 2 so particles draw over fabric — nice depth. Shirt renderOrder default 0 with opaque-ish material (transparent true though...). Shirt transparent true for opacity fades → it goes to transparent pass sorted by distance; fabric also transparent. Sorting by z: camera z 7+; shirt z0 closer than fabric z0.8? shirt at z0, fabric at z0.8 → shirt closer → drawn after (transparent sorted back-to-front: fabric first, then shirt) → shirt over fabric correct. Print plane child of shirt — separate transparent object closer still. OK. Burst particles additive renderOrder 3. Ring: MeshBasicMaterial transparent opacity state — fine in transparent pass. **Ambient particles material:** PointsMaterial size 0.045, color 0xd7ff3e? Mixed: use vertex colors (white/lime/orange sparse). Additive, opacity .5, depthWrite false. **Burst:** similar bigger size .07. **Shirt initial:** S.shirtS starts 0 (intro tween to 1). Set introS 0. Also initial camera intro: camZ from 9→7.2 during preloader? Add to intro tl: S.camZ 9.2→7.2? S is scrubbed by scroll tl which sets camZ keys at scroll progress 0 = 7.2 (initial value). Scroll scrub timeline at progress 0 applies its starting values on refresh? Scrub timeline renders according to scroll; at scroll 0 it applies state at time 0 = initial values defined by first keyframe or the set values. If I tween camZ in intro (non-scrubbed) simultaneously with scrub tl also controlling camZ → conflict: scrub tl only writes when its progress changes... Actually a scrubbed ScrollTrigger timeline renders on refresh too (it sets to progress 0 on creation). Subsequent intro tween changes camZ but any scroll trigger update (ScrollTrigger.update on scroll or refresh) would re-apply. During preloader no scroll happens, so intro tween ok; but on first scroll event it snaps back — acceptable since by then intro done. Safer: intro tween a separate multiplier like introZ added to camZ: camZfinal = S.camZ + S.introZ; introZ 2.2→0. Clean, no conflict. Similarly introS multiplier for scale, introOp multiplier for shirt opacity, introRot extra rotation. **Preloader sequence:** 1. window load → start counter gsap obj {v:0}→100 onUpdate set text, duration 1.4 ease power2.inOut. Simultaneously brand letters stagger. 2. counter complete → preloader panel yPercent -100 (1s expo.inOut), onComplete: lenis.start(), intro tl play (title masks up, ctas, shirt introS elastic, introZ, ring scale in, particles opacity). 3. ScrollTrigger.refresh() after intro. Also kill preloader display after (visibility hidden). **Nav menu overlay links** close overlay + scrollTo. **Now sizes for responsiveness:** fabric plane 26x14 fine all; on portrait maybe increase plane scale via state? Set plane scale 1.4 on small aspect in resize. I'll adjust: if aspect < 1, plane.scale.set(1.6,1.6,1) else 1. Do in resize. Shirt scale base maybe 1.15 on mobile (less width). Add state? Just set shirtGroup base scale multiplier var baseShirtScale = aspect<0.8?1.25:1; applied in loop: scale = S.shirtS * S.introS * baseShirtScale. Camera z on mobile farther: base camZ values fine since fov vertical; portrait shows less width — shirt scale bump helps. Also camZ +1 on small screens: add state offset? Apply in loop: camera.position.z = S.camZ + S.introZ + (aspect<0.8?1.2:0). OK. **Write the word-reveal util:** ```js $$('[data-words]').forEach(el=>{ const words = el.textContent.trim().split(/\s+/); el.innerHTML = words.map(w=>`${w}`).join(' '); }); ``` Then gsap.fromTo('.wi', {yPercent:110, rotate:6}, {yPercent:0, rotate:0, stagger:0.03, ease:'power3.out', scrollTrigger:{trigger: el, start:'top 85%', once:true}}) — but scrub version for manifesto: data-words="scrub" → scrollTrigger scrub .6 start 'top 80%' end 'top 35%'. Careful: elements with innerHTML replaced lose nested spans — only apply to plain-text elements. I'll apply to specific manifesto lines and section descriptions marked data-words. **Line masks for big headings:** markup: ```html

THE DROP

``` gsap fromTo mi yPercent 110→0. Hero title lines same but triggered by intro tl (not scroll). **Counters:** ```js $$('[data-count]').forEach(el=>{ const end = parseFloat(el.dataset.count); ScrollTrigger.create({trigger: el, start:'top 85%', once:true, onEnter:()=>{ gsap.fromTo(el, {innerText:0},{innerText:end, duration:1.6, ease:'power2.out', snap:{innerText:1}, onUpdate... }); }}); }); ``` gsap innerText tween works with snap on object prop? gsap can tween innerText via plugin? Core supports tweening innerText as attr? No — use manual: obj {v:0} onUpdate set textContent = Math.round(v). Fine. **Toast:** function toast(msg). Show 2.2s. **Cart:** count var; update badge; bump anim via gsap fromTo scale. **Swatches:** buttons with bg color; click → currentColor; setShirt(color, true pulse); active class. setShirtColor(hex, pulse): tween shirtMat.color; contrast print color; if pulse: gsap.fromTo(shirtGroup.scale...) — scale controlled each frame from state; pulse via state S.shirtS bump: gsap.fromTo(S,{shirtS: S.shirtS*1.12},{shirtS: base, ...}) — but scrub timeline also owns shirtS keys... conflict again: scrub tl sets shirtS at various scroll positions; a temporary fromTo tween would fight until done (tween wins while active, then scrub re-applies on next scroll update — actually scrub tl writes every update call; gsap overlapping tweens on same property: last-created wins while active; after pulse tween ends, scrub tl resumes control on next tick? Scrub timeline renders every frame regardless (it's always "active" rendering its current time). Overlap conflicts: both write each frame; order of execution determines winner — messy. Solution: separate pulse multiplier like others: shirtScale = S.shirtS * introS * pulseS * base. Pulse tween animates pulseS 1→1.15→1. All multiplicative — no conflicts. Adopt this pattern for ALL animated-by-multiple-systems props. Similarly color: color only tweened by interactions (no scrub keys on color) — safe. Ring rotation: own continuous. **Magnetic buttons:** mousemove within button: translate up to 6px toward cursor; leave elastic back. Apply on .magnetic. **Cursor:** dot instant, ring lerp .12; hover targets: a, button, .card, [data-hover] → ring class 'on' (scale 2.2, lime border). Also cursor label for drag hint? skip. Hide native cursor: @media (hover:hover) and (pointer:fine) { * { cursor: none } }? That kills accessibility slightly but it's an art site; keep cursor:none on body, and interactive elements too. I'll do it but ensure cursor elements always rendered. Also keep `cursor:none` important? Use `html,body{...}` and `a,button{cursor:none}`. **Grain:** fixed inset, background-image data-uri svg fractalNoise, opacity .07, mix-blend overlay? On dark bg overlay does little; use normal with low opacity. pointer-events none. z 200. **Vignette:** fixed radial-gradient transparent→rgba(0,0,0,.55) edges, z 1 above canvas below content? Content text over vignette unaffected if vignette z between canvas and content. Put as body::before fixed z 0? canvas z 0... set canvas z-index 0; vignette div z 1 pointer-events none; content z 2. Sections need position relative z 2. Nav z 50. **Section paddings:** generous: padding: 18vh 6vw. Container max 1400px. **Manifesto layout:** label small mono; huge lines (clamp 2.2–5rem) left-aligned; right column paragraph + small list "01 / Cut — 02 / Dye — 03 / Move". Big line 2 has lime word. **Collection header row:** left heading, right swatch lab block. Cards grid: repeat(auto-fit,minmax(260px,1fr)) gap 2rem; card padding, glass bg, border 1px line, radius 20px? Fashion = sharper: radius 4px. Big index "01" top, svg center area aspect 3/4 with gradient bg per product, name row bottom with price, add button circle "+". Product card gradients: 1. Aero Tee — bone: bg radial #2a2a26→#101012, svg stroke #f2f0e9. 2. Static Hoodie — acid: glow lime. 3. Night Cargo — void: deep blue-black, stroke muted. 4. Orbit Jacket — blaze: orange glow. SVG stroke color uses product color for glow elements. **Lookbook:** heading + stats grid 4 + film strip cards row (3 cards) + reverse marquee "MOTION — WORN — LIVED — SHOT —". **Newsletter:** center big "JOIN THE MOTION", form inline (input underline style + button), note "One email per drop. No noise." success swap. **Footer:** giant stroke text "KINETIC®" (font-size 20vw, line-height .8, stroke 1px rgba ink .35, fill transparent; hover fill lime transition slow), columns: Shop / Studio / Social, bottom bar. **Back-to-top** circular button fixed bottom-right, appears after scroll, lime border, arrow up SVG, lenis.scrollTo(0). Alright — also small "fixed side text" vertical "SCROLL" on hero right? Add rotated label. Time to write final code. I'll be meticulous with the shader strings and JS syntax. Also ensure no `three.min.js`, importmap correct, addons only via three/addons. Length: big but fine. Let me write the fabric shader carefully: ```js const fabricMat = new THREE.ShaderMaterial({ uniforms: { uTime:{value:0}, uAmp:{value:0.55}, uOp:{value:0}, uColA:{value:new THREE.Color(0x0d0d12)}, uColB:{value:new THREE.Color(0x2e3312)}, uMap:{value:fabricTex}, }, vertexShader:` uniform float uTime; uniform float uAmp; varying vec2 vUv; varying float vE; void main(){ vUv = uv; vec3 p = position; float e = 0.0; e += sin(p.x*0.55 + uTime*1.1) * 0.55; e += sin(p.y*0.9 - uTime*0.7 + p.x*0.3) * 0.35; e += sin((p.x+p.y)*0.35 + uTime*0.5) * 0.3; e *= uAmp; // damp at borders float fx = smoothstep(0.0,0.12,uv.x)*smoothstep(1.0,0.88,uv.x); float fy = smoothstep(0.0,0.12,uv.y)*smoothstep(1.0,0.88,uv.y); p.z += e*fx*fy; vE = e; gl_Position = projectionMatrix*modelViewMatrix*vec4(p,1.0); }`, fragmentShader:` uniform vec3 uColA; uniform vec3 uColB; uniform sampler2D uMap; uniform float uOp; uniform float uTime; varying vec2 vUv; varying float vE; void main(){ vec3 base = mix(uColA,uColB, smoothstep(-0.5,0.7,vE)); base += smoothstep(0.2,0.8,vE)*0.12; // crest light vec4 pat = texture2D(uMap, vUv*vec2(2.5,1.6)); vec3 col = base + pat.rgb*0.10 + pat.a*0.0; // sheen band float band = smoothstep(0.06,0.0,abs(fract(vUv.x*0.8 + uTime*0.03)-0.5)-0.44); col += band*0.05; gl_FragColor = vec4(col, uOp); }`, transparent:true, side:THREE.DoubleSide, depthWrite:false }); ``` Texture for fabric: white text on transparent; pat.rgb white where text → adds .10 white. Good subtle. Plane geometry: PlaneGeometry(30, 16, 180, 96). rotateX slight -0.15? Keep facing camera; tilt via mesh.rotation.x = -0.08. Position z: -0.5 (behind shirt default z0)? When active shirt gone-left; plane z 0.6 front is fine. I'll put z 0.4. Ambient particles geometry: positions random in shell box; PointsMaterial({size:.05, vertexColors:true, transparent:true, opacity:.5, blending:Additive, depthWrite:false}). Colors per point: mostly white-dim, 15% lime, 5% orange. Burst: points on sphere radius rand .5–1.0 (shirt-ish volume), colors lime/white; material size .06 additive opacity 0. Shirt extrude: note ExtrudeGeometry UV generator default fine since we don't map texture on shirt (bump map uses uv? bumpMap needs uv — extrude provides uv in shape coords (range ~ -1.3..1.3). Noise texture repeat wrapping: set bumpMap.repeat via texture.repeat 3,3 wrap Repeat. Bump from shape-coord uv will stretch on sides but subtle bump fine. Print plane: PlaneGeometry(1.05,0.62) at (0, 0.34, 0.205+?) front face z max = depth/2 + bevel = .15+.05=.20 → z .207. Material MeshBasicMaterial({map:printTex, transparent:true, toneMapped:false}) color tint via material.color. Basic = unlit crisp print. Print canvas draw (white): - big "KINETIC" Syne 800 ~150px letterspaced center at y 300 (of 1024x512) — plane aspect 1.05x0.62 ≈ 1.69; canvas 1024x512 aspect 2 — slight stretch fine. Or canvas 1024x608. Use 1024x600. - above small "MOTION SYSTEM — SS25" 34px letterspace. - below tiny "CUT FOR MOVEMENT" 28px. - asterisk mark ✳ draw manually: lines. Text align center x 512. Contrast logic: luminance L = 0.2126r+...; if L > 0.6 → print color #0a0a0a else #f2f0e9. For lime shirt (#d7ff3f lum high) → black print. For void black shirt → white print. Ring: TorusGeometry(2.05, .008, 8, 160) MeshBasicMaterial lime transparent op .7. Group tilt rotation.x = 1.1, rotation.z = .2; animate rotation.z += dt*.15? Rotating torus around its own z spins in-plane (invisible since circular) — rotate ring group y for orbital feel + satellites orbit: put satellites as children at angle, rotate ring group around y → satellites orbit around center in tilted plane. Ring group rotation.y += dt*0.4. Satellites: two small spheres MeshBasic lime/white at (±2.05,0,0) as children of ring inner group that rotates. Structure: ringGroup(tilted) > spinner(rotation.y animated) > torus + satellites. Torus symmetric so only satellites show motion. Ring follows shirt: ringGroup.position.x = S.shirtX*0.55, y = S.shirtY. opacity S.ringOp * introOp. Lights final: - HemisphereLight(0xf2f0e9, 0x0a0a10, 0.55) - key DirectionalLight(0xffffff, 1.4) pos (4,6,6) - fill DirectionalLight(0x88a0ff, .5) pos (-6,2,3) - rim DirectionalLight(0xd7ff3e, 1.1) pos (-2,4,-6) Env map RoomEnvironment intensity via material envMapIntensity .55. Shirt material: color 0xe8e4da initial (bone), roughness .82, sheen 1, sheenColor 0xffffff? sheenColor lime-ish 0xdcff70, sheenRoughness .55, bumpMap noise, bumpScale .012, envMapIntensity .5, transparent true. Also slight clearcoat? no (fabric). Camera: fov 40, near .1 far 60. pos (0, 0.2, 7.2) base via state; lookAt (0,0,0) + mouse offset. Renderer clear alpha 0. ScrollTrigger scrub tl on body: ```js gsap.timeline({scrollTrigger:{trigger: document.body, start:'top top', end:'bottom bottom', scrub:1.2}}) ``` Hmm scrub on whole body timeline: with Lenis + ScrollTrigger update works. But note: `end: 'bottom bottom'` of body = full page. Good. Also add ScrollTrigger for nav bg class, progress bar (onUpdate), back-to-top show. Progress bar: use ScrollTrigger.create({start:0,end:'max', onUpdate:self=> bar.scaleX=self.progress}). **DOM reveal defaults:** set initial states via CSS (e.g., .mi {transform:translateY(120%)}) then gsap to 0 — avoids FOUC before JS. But if JS fails, content hidden — acceptable? Better: use gsap.set inside JS only (no CSS hidden defaults) so no-JS still shows content. Preloader though is HTML-visible; if JS fails preloader stuck — add

01TEE — 240GSM

svg + AERO

Aero Tee 001

Bone / reactive dye

$48

DYE LAB — RECOLOR THE 3D TEE

... lime #d7ff3e, void #17171d, blaze #ff4d00

CURRENT: BONE

") with %23 for #. - importmap JSON valid. - All ids referenced exist. Also add small "3D" badge? no. Footer big text hover fill: CSS transition on -webkit-text-stroke? Animate color transparent→lime via class on hover: use CSS :hover{color:var(--lime)} with transition (color animatable; stroke stays). Also add slight letter-spacing shift? keep. Let me also add subtle **hero background CSS glow** behind shirt: radial lime 8% at 70% 40%. Also **selection style**, **scrollbar**. **Write it.** I'll now produce the final answer with the complete file. Given the size, keep comments concise. Double-check three r160 APIs used: - THREE.WebGLRenderer({canvas, antialias, alpha}) ✓ - renderer.outputColorSpace = THREE.SRGBColorSpace ✓ (r152+) - ACESFilmicToneMapping ✓ - PMREMGenerator.fromScene(scene, sigma) ✓ - RoomEnvironment from addons ✓ - ExtrudeGeometry(shape, {depth, bevelEnabled, bevelThickness, bevelSize, bevelSegments, curveSegments, steps:1}) ✓ - geometry.center() ✓ - CanvasTexture ✓, texture.colorSpace = THREE.SRGBColorSpace for color maps (print/fabric) ✓; bump noise texture leave linear (NoColorSpace default). - MeshPhysicalMaterial sheen props ✓ (sheen: float, sheenColor, sheenRoughness) - PointsMaterial vertexColors ✓ - TorusGeometry ✓ - AdditiveBlending ✓ GSAP: gsap.timeline, ScrollTrigger.register, scrub timeline, quickTo? I'll skip quickTo, use manual. Lenis global name: the UMD build exposes `Lenis` (window.Lenis). ✓ (@studio-freight/lenis dist lenis.min.js exposes Lenis). Use jsdelivr: https://cdn.jsdelivr.net/npm/@studio-freight/lenis@1.0.42/dist/lenis.min.js — I believe this path exists (package @studio-freight/lenis has dist/lenis.min.js). Yes. GSAP cdnjs: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js + ScrollTrigger.min.js ✓. Fonts: Syne:wght@700;800 & Space+Grotesk:wght@400;500;600 & maybe Space Mono for labels: use "Space Grotesk" only + letterspacing; labels could be Space Grotesk 500 uppercase ls .35em — fine, drop mono font to reduce load. Actually a mono adds techy charm for labels/numbers: add "Space Mono" 400/700? Use for labels, prices, counters. Include it. Hero big title font: Syne 800 tight tracking -0.02em, uppercase. Now finalize copy details and write. Also add aria labels, roles. Add ${w} {"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"}} KINETIC® — Clothing in Motion { "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js", "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/" } } :root{ --bg:#07070b; --ink:#f2f0e9; --muted:rgba(242,240,233,.55); --line:rgba(242,240,233,.14); --lime:#d7ff3e; --card:rgba(255,255,255,.045); --font-d:'Syne',sans-serif; --font-b:'Space Grotesk',sans-serif; --font-m:'Space Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:auto} html,body{overflow-x:hidden} body{ background: radial-gradient(60% 50% at 78% 16%, rgba(215,255,62,.06), transparent 60%), radial-gradient(50% 42% at 12% 88%, rgba(90,100,255,.07), transparent 60%), var(--bg); color:var(--ink); font-family:var(--font-b); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } body.lock{overflow:hidden} ::selection{background:var(--lime);color:#0a0a0a} ::-webkit-scrollbar{width:10px} ::-webkit-scrollbar-track{background:#0a0a0f} ::-webkit-scrollbar-thumb{background:#2a2a33;border-radius:5px} ::-webkit-scrollbar-thumb:hover{background:var(--lime)} a{color:inherit;text-decoration:none} button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer} img,svg{display:block} :focus-visible{outline:2px solid var(--lime);outline-offset:3px} @media (hover:hover) and (pointer:fine){ body, a, button, .card, .sw, input{cursor:none} } /* ---------- fixed layers ---------- */ #webgl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block} .vignette{position:fixed;inset:0;z-index:1;pointer-events:none; background:radial-gradient(120% 95% at 50% 42%, transparent 52%, rgba(0,0,0,.55) 100%)} .grain{position:fixed;inset:-50%;width:200%;height:200%;z-index:200;pointer-events:none;opacity:.055; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); animation:grain 8s steps(10) infinite} @keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}} #progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:120;transform-origin:left;transform:scaleX(0);background:var(--lime)} /* ---------- cursor ---------- */ .cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:500;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%)} .cursor-dot{width:6px;height:6px;background:var(--lime)} .cursor-ring{width:38px;height:38px;border:1px solid rgba(242,240,233,.5);mix-blend-mode:difference;transition:width .3s,height .3s,border-color .3s,background .3s} .cursor-ring.on{width:64px;height:64px;border-color:var(--lime);background:rgba(215,255,62,.08)} @media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}} /* ---------- preloader ---------- */ #preloader{position:fixed;inset:0;z-index:400;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem} .pl-brand{font-family:var(--font-d);font-weight:800;font-size:clamp(2rem,6vw,4rem);letter-spacing:.06em;overflow:hidden;display:flex} .pl-letter{display:inline-block;transform:translateY(120%)} .pl-count{font-family:var(--font-m);font-size:clamp(2.4rem,7vw,4.4rem);color:var(--lime)} .pl-count sup{font-size:.35em;color:var(--muted)} .pl-bar{width:min(280px,60vw);height:1px;background:var(--line);overflow:hidden} .pl-bar-i{display:block;height:100%;width:100%;background:var(--lime);transform:scaleX(0);transform-origin:left} .pl-tag{font-family:var(--font-m);font-size:11px;letter-spacing:.35em;color:var(--muted);text-transform:uppercase} /* ---------- nav ---------- */ nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between; padding:1.1rem clamp(1.2rem,4vw,3rem);transition:background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent} nav.scrolled{background:rgba(7,7,11,.55);backdrop-filter:blur(14px);border-color:var(--line)} .logo{font-family:var(--font-d);font-weight:800;font-size:1.25rem;letter-spacing:.08em;mix-blend-mode:difference} .nav-links{display:flex;gap:2.2rem} .nav-links a{font-family:var(--font-m);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);position:relative;transition:color .3s} .nav-links a::after{content:'';position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:var(--lime);transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.7,0,.2,1)} .nav-links a:hover{color:var(--ink)} .nav-links a:hover::after{transform:scaleX(1);transform-origin:left} .nav-right{display:flex;align-items:center;gap:1.2rem} .bag-btn{font-family:var(--font-m);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--line);border-radius:99px;padding:.55rem 1.1rem;transition:.3s;position:relative} .bag-btn:hover{border-color:var(--lime);color:var(--lime)} .bag-count{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:50%;background:var(--lime);color:#0a0a0a;font-size:.62rem;margin-left:.4rem;font-weight:700} .burger{display:none;flex-direction:column;gap:6px;padding:8px} .burger span{width:26px;height:2px;background:var(--ink);transition:.35s} body.menu-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)} body.menu-open .burger span:nth-child(2){opacity:0} body.menu-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} #menu{position:fixed;inset:0;z-index:90;background:rgba(7,7,11,.96);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none;transition:opacity .45s} body.menu-open #menu{opacity:1;pointer-events:auto} .menu-inner{text-align:center} .m-link{display:block;font-family:var(--font-d);font-weight:800;font-size:clamp(2.4rem,9vw,5rem);line-height:1.15;text-transform:uppercase;color:var(--ink);opacity:0;transform:translateY(40px);transition:.5s cubic-bezier(.2,.8,.2,1)} .m-link span{font-family:var(--font-m);font-size:.8rem;color:var(--lime);vertical-align:super;margin-right:.8rem} .m-link:hover{color:var(--lime);font-style:italic} body.menu-open .m-link{opacity:1;transform:translateY(0)} body.menu-open .m-link:nth-child(1){transition-delay:.08s}body.menu-open .m-link:nth-child(2){transition-delay:.14s} body.menu-open .m-link:nth-child(3){transition-delay:.2s}body.menu-open .m-link:nth-child(4){transition-delay:.26s} body.menu-open .m-link:nth-child(5){transition-delay:.32s} .menu-foot{margin-top:3rem;font-family:var(--font-m);font-size:.7rem;letter-spacing:.3em;color:var(--muted);text-transform:uppercase} /* ---------- layout ---------- */ main{position:relative;z-index:2} section{position:relative;padding:16vh clamp(1.2rem,5vw,4.5rem)} .container{max-width:1500px;margin:0 auto} .label{font-family:var(--font-m);font-size:.7rem;letter-spacing:.35em;text-transform:uppercase;color:var(--lime);display:flex;align-items:center;gap:.8rem;margin-bottom:1.6rem} .label::before{content:'';width:34px;height:1px;background:var(--lime)} .h2{font-family:var(--font-d);font-weight:800;font-size:clamp(2.2rem,6.5vw,5.2rem);line-height:.98;text-transform:uppercase;letter-spacing:-.01em} .mask{display:block;overflow:hidden;padding-bottom:.06em} .mi{display:inline-block;will-change:transform} .outline{color:transparent;-webkit-text-stroke:1.5px var(--ink)} .lime{color:var(--lime)} /* ---------- hero ---------- */ #hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:14vh;position:relative} .hero-meta{position:absolute;top:6.2rem;left:clamp(1.2rem,5vw,4.5rem);right:clamp(1.2rem,5vw,4.5rem);display:flex;justify-content:space-between;font-family:var(--font-m);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)} .hero-title{font-family:var(--font-d);font-weight:800;font-size:clamp(3.4rem,12.5vw,11.5rem);line-height:.92;text-transform:uppercase;letter-spacing:-.02em;margin:1.2rem 0 1.6rem;max-width:12ch} .hero-title .row2{color:transparent;-webkit-text-stroke:2px var(--ink);transition:color .6s} .hero-title .row2:hover{color:var(--lime);-webkit-text-stroke-color:var(--lime)} .hero-sub{max-width:44ch;color:var(--muted);font-size:clamp(.95rem,1.4vw,1.1rem)} .hero-ctas{display:flex;gap:1rem;margin-top:2.4rem;flex-wrap:wrap} .btn{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--font-m);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;padding:1rem 1.7rem;border-radius:99px;border:1px solid var(--ink);transition:.35s;position:relative;overflow:hidden} .btn.solid{background:var(--lime);border-color:var(--lime);color:#0a0a0a;font-weight:700} .btn.solid:hover{box-shadow:0 0 34px rgba(215,255,62,.45);transform:translateY(-2px)} .btn.ghost:hover{border-color:var(--lime);color:var(--lime)} .hero-bottom{position:absolute;bottom:2rem;left:clamp(1.2rem,5vw,4.5rem);right:clamp(1.2rem,5vw,4.5rem);display:flex;justify-content:space-between;align-items:flex-end;font-family:var(--font-m);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)} .scroll-hint{display:flex;flex-direction:column;align-items:center;gap:.6rem} .scroll-hint .line{width:1px;height:52px;background:var(--line);position:relative;overflow:hidden} .scroll-hint .line::after{content:'';position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--lime);animation:drip 1.8s cubic-bezier(.7,0,.3,1) infinite} @keyframes drip{0%{top:-100%}55%{top:0}100%{top:100%}} .drag-hint{position:absolute;bottom:6.4rem;left:50%;transform:translateX(-50%);font-family:var(--font-m);font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:.55rem 1.2rem;backdrop-filter:blur(6px);background:rgba(7,7,11,.3);display:flex;gap:.6rem;align-items:center} .drag-hint i{width:6px;height:6px;border-radius:50%;background:var(--lime);animation:pulse 1.6s ease-in-out infinite} @keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.8);opacity:.4}} .hero-line{width:min(560px,70vw);height:1px;background:var(--line);margin-top:2rem;position:relative;overflow:hidden} .hero-line::after{content:'';position:absolute;inset:0;background:var(--lime);transform:scaleX(0);transform-origin:left} /* ---------- marquee ---------- */ .marquee{position:relative;z-index:3;background:var(--lime);color:#0a0a0a;transform:rotate(-1.4deg) scale(1.03);overflow:hidden;padding:.9rem 0;border-top:1px solid #0a0a0a;border-bottom:1px solid #0a0a0a;margin:2vh 0} .marquee-inner{display:flex;width:max-content;animation:marq 26s linear infinite} .marquee-inner span{font-family:var(--font-d);font-weight:800;font-size:clamp(1.1rem,2.6vw,1.9rem);text-transform:uppercase;white-space:nowrap;padding-right:2.2rem;letter-spacing:.02em} .marquee.rev{background:transparent;color:transparent;-webkit-text-stroke:1px rgba(242,240,233,.4);border-top:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(1deg) scale(1.03)} .marquee.rev .marquee-inner{animation:marq 34s linear infinite reverse} @keyframes marq{to{transform:translateX(-50%)}} /* ---------- manifesto ---------- */ #manifesto .h2{font-size:clamp(2.4rem,6.8vw,6rem)} .manifesto-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(2rem,6vw,7rem);align-items:start} .manifesto-side p{color:var(--muted);max-width:42ch;margin-bottom:1.4rem} .manifesto-list{list-style:none;margin-top:2rem;border-top:1px solid var(--line)} .manifesto-list li{display:flex;gap:1.4rem;padding:1.1rem 0;border-bottom:1px solid var(--line);font-family:var(--font-m);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:.3s} .manifesto-list li:hover{color:var(--lime);padding-left:.6rem} .manifesto-list b{color:var(--ink)} .w{display:inline-block;overflow:hidden;vertical-align:bottom;margin-right:.28em} .wi{display:inline-block;will-change:transform} /* ---------- collection ---------- */ .col-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:3rem} .lab{border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.4rem;background:var(--card);backdrop-filter:blur(10px)} .lab-label{font-family:var(--font-m);font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--lime);margin-bottom:.9rem} .swatches{display:flex;gap:.7rem} .sw{width:34px;height:34px;border-radius:50%;background:var(--c);border:1px solid rgba(255,255,255,.25);transition:.3s;position:relative} .sw:hover{transform:scale(1.15)} .sw.active{box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--lime)} .lab-current{font-family:var(--font-m);font-size:.66rem;letter-spacing:.2em;color:var(--muted);margin-top:.8rem;text-transform:uppercase} .lab-current span{color:var(--lime)} .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.4rem} .card{border:1px solid var(--line);border-radius:16px;background:var(--card);backdrop-filter:blur(14px);padding:1.3rem;display:flex;flex-direction:column;gap:1rem;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .5s;position:relative;overflow:hidden} .card:hover{transform:translateY(-8px);border-color:rgba(215,255,62,.4);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)} .card-top{display:flex;justify-content:space-between;font-family:var(--font-m);font-size:.66rem;letter-spacing:.24em;color:var(--muted);text-transform:uppercase} .card-media{position:relative;aspect-ratio:3/3.4;border-radius:10px;overflow:hidden;display:grid;place-items:center;border:1px solid var(--line)} .card-media svg{width:62%;height:auto;transition:transform .6s cubic-bezier(.2,.8,.2,1);position:relative;z-index:1} .card:hover .card-media svg{transform:scale(1.07) rotate(-2deg)} .bigword{position:absolute;bottom:-.35em;left:-.05em;font-family:var(--font-d);font-weight:800;font-size:5.2rem;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(242,240,233,.14);text-transform:uppercase;pointer-events:none;transition:.5s} .card:hover .bigword{-webkit-text-stroke-color:rgba(215,255,62,.5)} .c1{background:radial-gradient(120% 90% at 30% 18%,#33332c,#0f0f12 70%);color:#e8e4da} .c2{background:radial-gradient(120% 90% at 30% 18%,rgba(215,255,62,.22),#0e1007 70%);color:var(--lime)} .c3{background:radial-gradient(120% 90% at 30% 18%,#1b1b26,#0a0a10 70%);color:#9a9aa8} .c4{background:radial-gradient(120% 90% at 30% 18%,rgba(255,77,0,.25),#100b08 70%);color:#ff6a2a} .card-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem} .card-bottom h3{font-family:var(--font-d);font-weight:700;font-size:1.15rem;text-transform:uppercase;letter-spacing:.02em} .card-bottom p{font-size:.8rem;color:var(--muted)} .price{font-family:var(--font-m);font-size:.95rem;color:var(--lime)} .add{margin-top:.2rem;width:100%;border:1px solid var(--line);border-radius:99px;padding:.85rem;font-family:var(--font-m);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;transition:.35s;display:flex;justify-content:center;gap:.6rem;align-items:center} .add:hover{background:var(--lime);color:#0a0a0a;border-color:var(--lime)} .add.added{background:var(--lime);color:#0a0a0a;border-color:var(--lime)} /* ---------- lookbook ---------- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:3.5rem 0} .stat{background:rgba(10,10,15,.6);backdrop-filter:blur(8px);padding:1.8rem 1.4rem} .stat b{display:block;font-family:var(--font-d);font-weight:800;font-size:clamp(2rem,4.5vw,3.4rem);line-height:1;color:var(--lime)} .stat span{font-family:var(--font-m);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)} .films{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-bottom:4rem} .film{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end;padding:1.4rem;transition:transform .5s} .film:hover{transform:translateY(-6px)} .film::after{content:'';position:absolute;top:0;bottom:0;width:60%;left:-80%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);transform:skewX(-18deg);transition:left .9s cubic-bezier(.2,.8,.2,1)} .film:hover::after{left:130%} .f1{background:linear-gradient(160deg,#232a10,#0c0e08 65%)} .f2{background:linear-gradient(160deg,#101c26,#080b10 65%)} .f3{background:linear-gradient(160deg,#2a1408,#100a07 65%)} .film .f-idx{font-family:var(--font-d);font-weight:800;font-size:clamp(2.6rem,5vw,4rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(242,240,233,.5)} .film .f-cap{font-family:var(--font-m);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-top:.6rem} .film .f-cap b{color:var(--ink)} /* ---------- newsletter ---------- */ #contact{text-align:center} #contact .h2{font-size:clamp(2.6rem,8vw,7rem)} .news-form{display:flex;max-width:560px;margin:2.6rem auto 0;border-bottom:1px solid var(--line);transition:border-color .3s;position:relative} .news-form:focus-within{border-color:var(--lime)} .news-form input{flex:1;background:none;border:none;color:var(--ink);font-family:var(--font-b);font-size:1.05rem;padding:1rem .2rem;outline:none;min-width:0} .news-form input::placeholder{color:var(--muted)} .news-form button{font-family:var(--font-m);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--lime);padding:0 .4rem;display:flex;align-items:center;gap:.6rem;transition:transform .3s} .news-form button:hover{transform:translateX(4px)} .news-note{font-family:var(--font-m);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:1.2rem} .news-ok{font-family:var(--font-d);font-weight:800;font-size:1.6rem;color:var(--lime);text-transform:uppercase} /* ---------- footer ---------- */ footer{position:relative;z-index:2;padding:10vh clamp(1.2rem,5vw,4.5rem) 2rem;border-top:1px solid var(--line)} .foot-giant{font-family:var(--font-d);font-weight:800;font-size:clamp(4rem,19vw,17rem);line-height:.82;text-transform:uppercase;text-align:center;color:transparent;-webkit-text-stroke:1.5px rgba(242,240,233,.3);transition:color 1.2s,-webkit-text-stroke-color 1.2s;user-select:none;white-space:nowrap} .foot-giant:hover{color:var(--lime);-webkit-text-stroke-color:var(--lime)} .foot-cols{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin:4rem 0 2.5rem} .foot-col h4{font-family:var(--font-m);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--lime);margin-bottom:1rem} .foot-col a{display:block;color:var(--muted);font-size:.9rem;padding:.25rem 0;transition:.3s} .foot-col a:hover{color:var(--ink);padding-left:.5rem} .foot-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:1.6rem;font-family:var(--font-m);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} #toTop{position:fixed;right:1.4rem;bottom:1.4rem;z-index:80;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:rgba(7,7,11,.6);backdrop-filter:blur(10px);display:grid;place-items:center;opacity:0;pointer-events:none;transition:.4s} #toTop.show{opacity:1;pointer-events:auto} #toTop:hover{border-color:var(--lime);background:var(--lime);color:#0a0a0a} /* ---------- toast ---------- */ #toast{position:fixed;bottom:2rem;left:50%;transform:translate(-50%,140%);z-index:150;background:var(--lime);color:#0a0a0a;font-family:var(--font-m);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:.9rem 1.6rem;border-radius:99px;transition:transform .5s cubic-bezier(.2,.9,.2,1);box-shadow:0 10px 40px rgba(215,255,62,.25)} #toast.show{transform:translate(-50%,0)} /* ---------- responsive ---------- */ @media(max-width:900px){ .nav-links{display:none} .burger{display:flex} .manifesto-grid{grid-template-columns:1fr} .films{grid-template-columns:1fr} .stats{grid-template-columns:repeat(2,1fr)} .hero-meta{position:static;display:none} .drag-hint{display:none} } @media (prefers-reduced-motion:reduce){ .marquee-inner,.grain,.scroll-hint .line::after,.drag-hint i{animation:none} } <style>#preloader,.cursor-dot,.cursor-ring{display:none}</style>

0^%

Weaving pixels into thread

SS25 — Motion System Est. 2025 — Antwerp

A garment laboratory

Clothing In motion

Kinetic engineers fabric that behaves like energy — cut, dyed and finished for bodies that never sit still. Every piece in this window is rendered live in 3D. Go ahead, touch it.

Explore the drop ↓ Read manifesto

Drag to spin the tee — 360°

51.2194° N, 4.4025° E

Scroll

WebGL — Live render

01 — Manifesto

We don't make clothes. We make motion you can wear.

Every Kinetic piece is patterned on the move — drafted while walking, stretched over real bodies, dyed in small batches with reactive pigments that shift under light.

We believe a garment should earn its place at 4km/h, not on a hanger.

01 Cut — freedom first
02 Dye — reactive pigments
03 Finish — zero plastic

02 — The drop

Four pieces. Zero stillness.

Dye lab — recolor the 3D tee

Current dye — Bone

01Tee — 240gsm

Aero

Aero Tee 001

Bone — garment dyed

$48

02Hoodie — 380gsm

Static

Static Hoodie

Acid — reactive pigment

$128

03Cargo — ripstop

Night

Night Cargo

Void — PFC-free coat

$142

04Jacket — 3L shell

Orbit

Orbit Jacket

Blaze — bonded shell

$260

03 — Lookbook

Shot at 1/1000th.

0Motions captured

0%Organic cotton

0Pieces in drop

0gVirgin plastic

Walk — 08:12 · Antwerp docks

Run — 11:47 · North station

Spin — 14:03 · Rooftop, 92m

04 — Transmission

Join the Motion

One email per drop. No noise. Unsubscribe anytime.

i want you to amke me a fully animated 3d website for a clot...