# UI Lab

> A reference library of UI patterns for AI coding agents and humans building frontends.
> Every pattern is a single self-contained React + Tailwind file with a live demo.

How to use:
- Pick a pattern below, fetch its /docs/<slug>.md (metadata + full source) or /raw/<file>.
- Copy src/tokens/tokens.css into the target project first; patterns style themselves with its CSS variables
  (raw: https://ui-lab-weld.vercel.app/raw/tokens/tokens.css). Tailwind utilities like bg-surface / text-fg-muted map to those tokens
  via the @theme block in https://ui-lab-weld.vercel.app/raw/index.css.
- Every motion pattern respects prefers-reduced-motion. Keep that when adapting.
- Machine-readable index: https://ui-lab-weld.vercel.app/patterns.json. Everything in one file: https://ui-lab-weld.vercel.app/llms-full.txt
- **Claude: read https://ui-lab-weld.vercel.app/for-claude.md first.** It is the brief-to-build router (worlds, proof sites, techniques, refusals).
- Outside references (galleries, studios, open-source demo repos, libraries, tools): https://ui-lab-weld.vercel.app/resources.md
- 68 reference teardowns (30 world-class, 20 vibe-coded, 12 recent award winners, 6 community picks) with the pattern that rebuilds each: https://ui-lab-weld.vercel.app/references.md (JSON: https://ui-lab-weld.vercel.app/references.json)

## START HERE: the design procedure

Patterns are parts; the playbook is the judgement. Read start-here first, every time you build a UI.

- [Start here: how to design a frontend that doesn't look generic](https://ui-lab-weld.vercel.app/playbook/00-start-here.md)
- [Accessibility: the short version that actually gets applied](https://ui-lab-weld.vercel.app/playbook/accessibility.md)
- [Briefs: how to ask, and how to write the five lines](https://ui-lab-weld.vercel.app/playbook/briefs.md)
- [Glossary: design and web words, in plain language](https://ui-lab-weld.vercel.app/playbook/glossary.md)
- [Inspiration: how to take it without copying it](https://ui-lab-weld.vercel.app/playbook/inspiration.md)
- [Niche worlds: when the product has a physical or editorial home](https://ui-lab-weld.vercel.app/playbook/niche-worlds.md)
- [Prompts: what to say to your AI assistant](https://ui-lab-weld.vercel.app/playbook/prompts.md)
- [Reference sites: what fifty good (and popular) UIs have in common](https://ui-lab-weld.vercel.app/playbook/reference-sites.md)
- [Recipe: scroll-driven 3D product site](https://ui-lab-weld.vercel.app/playbook/scroll-3d-recipe.md)
- [Site types: what goes on the page, in what order](https://ui-lab-weld.vercel.app/playbook/site-types.md)
- [Verify: the loop that stops "mid and buggy"](https://ui-lab-weld.vercel.app/playbook/verify.md)
- [Worlds: design directions to start from](https://ui-lab-weld.vercel.app/playbook/worlds.md)
- [Site stack detector](https://ui-lab-weld.vercel.app/tools/site-stack.mjs): `node site-stack.mjs <url>` lists the libraries a reference site uses
- [Accessibility sweep](https://ui-lab-weld.vercel.app/tools/axe-crawl.js): paste into a browser console to run axe-core over every pattern and site

## Foundations

- [Design tokens](https://ui-lab-weld.vercel.app/docs/tokens.md): Color, type, spacing, radius, elevation and motion tokens. Light/dark aware, no flash. [design tokens, css variables, theme, dark mode, color, typography, spacing]
- [Contrast checker (WCAG)](https://ui-lab-weld.vercel.app/docs/contrast-checker.md): Pick two colours and see the WCAG contrast ratio, with plain pass or fail for normal text, large text and UI parts at AA and AAA, and a live sample. [contrast, wcag, colour, accessibility, tool]
- [Fluid type scale](https://ui-lab-weld.vercel.app/docs/fluid-type.md): A type scale where every size is a clamp() between a narrow-screen and wide-screen size, with a base size and ratio you can change, and the CSS to copy. [typography, fluid, clamp, type scale, css]

## Components

- [Buttons](https://ui-lab-weld.vercel.app/docs/buttons.md): Primary / secondary / ghost / danger, three sizes, loading state and a tactile press. [button, cta, loading, variants]
- [Command palette](https://ui-lab-weld.vercel.app/docs/command-palette.md): Ctrl/⌘K launcher on the native <dialog>: focus trap, Esc and backdrop for free, arrow-key navigation. [cmdk, search, command menu, keyboard, dialog, ctrl k]
- [Toasts](https://ui-lab-weld.vercel.app/docs/toast.md): Provider + useToast() hook. Stacks up to four, auto-dismisses, springs in, announced via aria-live. [notification, snackbar, feedback, alert]
- [Drawer](https://ui-lab-weld.vercel.app/docs/drawer.md): Left or right sheet on the native <dialog>, with animated exit and backdrop fade. [sheet, side panel, dialog, filters, off-canvas]
- [Sound opt-in](https://ui-lab-weld.vercel.app/docs/sound-opt-in.md): Asks before playing sound with two equal choices, remembers the answer and leaves a small equaliser toggle. [audio, consent, sound toggle, immersive]
- [Liquid glass button](https://ui-lab-weld.vercel.app/docs/liquid-glass-button.md): Glass pill: backdrop blur + saturate, bevel shadows, and a pointer-following highlight on registered CSS properties. [glassmorphism, liquid glass, button, backdrop-filter, @property]
- [Expanding cards](https://ui-lab-weld.vercel.app/docs/expanding-cards.md): A rail of tall slivers; the active one widens into a full card. Caption laid out at final width so it never rewraps. [accordion, cards, gallery, hover expand, flex-grow]
- [Morph pill card](https://ui-lab-weld.vercel.app/docs/morph-pill-card.md): An avatar pill that grows into a full profile card: one surface animating between two sizes. [morph, hover card, profile, avatar, expand]
- [Fan deck](https://ui-lab-weld.vercel.app/docs/fan-deck.md): A hand of cards splayed from one pivot below the deck; the focused card lifts out of the spread. [cards, fan, deck, rotate, transform-origin]
- [Form controls](https://ui-lab-weld.vercel.app/docs/form-controls.md): Input with hint/error, switch, checkbox, radio cards, select and range, all native elements restyled. [form, input, switch, checkbox, radio, select, slider, validation]
- [Animated tabs](https://ui-lab-weld.vercel.app/docs/animated-tabs.md): Segmented tabs with a sliding indicator, full WAI-ARIA tabs keyboard pattern. [tabs, segmented control, indicator, aria tabs]
- [Accordion / FAQ](https://ui-lab-weld.vercel.app/docs/accordion.md): Native <details> accordion with smooth height (interpolate-size) and exclusive open via name. [accordion, faq, details, collapsible, disclosure]
- [Tooltip](https://ui-lab-weld.vercel.app/docs/tooltip.md): Shows on hover and focus, hides on Escape, linked with aria-describedby. [tooltip, hint, popover, aria-describedby]
- [Confirm modal](https://ui-lab-weld.vercel.app/docs/confirm-modal.md): Destructive-action dialog: focus starts on Cancel, type-to-confirm guard, native <dialog>. [modal, dialog, confirm, destructive, delete]
- [Magnifying dock](https://ui-lab-weld.vercel.app/docs/dock.md): macOS-style dock: icons grow with a cosine falloff by distance to the pointer. [dock, macos, magnify, navigation, hover]
- [OTP / code input](https://ui-lab-weld.vercel.app/docs/otp-input.md): Six boxes that act as one field: auto-advance, backspace, arrows, paste-to-fill, SMS autofill. [otp, one-time code, pin, verification, 2fa]
- [Stepper](https://ui-lab-weld.vercel.app/docs/stepper.md): Numbered steps with a filling rail and checks for completed steps. [stepper, wizard, progress, steps, onboarding]
- [Loading, empty & error states](https://ui-lab-weld.vercel.app/docs/loading-states.md): Skeleton shimmer, empty state, error with retry and loaded list: the four states of any data view. [skeleton, empty state, error state, loading, placeholder]
- [Input effects](https://ui-lab-weld.vercel.app/docs/floating-inputs.md): Floating label, underline-draw and border-trace inputs using :placeholder-shown, no JS. [input, floating label, form, focus effect, css only]
- [Particle burst button](https://ui-lab-weld.vercel.app/docs/particle-button.md): Click spawns dots that fly out and fade via WAAPI; exported burst() works on any element. [particles, confetti, burst, click, celebrate]
- [SVG distortion button](https://ui-lab-weld.vercel.app/docs/distort-button.md): feTurbulence + feDisplacementMap wobble on hover/focus, animated then removed so text stays crisp. [svg filter, distortion, turbulence, hover, glitch]
- [Progress button](https://ui-lab-weld.vercel.app/docs/progress-button.md): The button fills as its own progress bar, then morphs into a success check. [progress, button, upload, loading, morph]
- [Gooey FAB menu](https://ui-lab-weld.vercel.app/docs/gooey-menu.md): Action bubbles melt out of a floating button via an SVG goo filter; icons stay crisp on a separate layer. [gooey, fab, svg filter, menu, blob]
- [Animated toggle icons](https://ui-lab-weld.vercel.app/docs/animated-icons.md): Hamburger↔close, heart with burst ring, bookmark fill, play↔pause path morph, self-drawing check. [icons, toggle, hamburger, like, svg, morph]
- [Fullscreen overlay menu](https://ui-lab-weld.vercel.app/docs/fullscreen-menu.md): Circle clip-path reveal from the toggle, big links sliding up from masks, hover image previews. [menu, overlay, navigation, clip-path, stagger]
- [Accessible autocomplete (combobox)](https://ui-lab-weld.vercel.app/docs/combobox.md): An autocomplete following the ARIA combobox pattern: focus stays in the input, arrows move through options, Enter picks, Esc closes, and the result count is announced. [combobox, autocomplete, aria-activedescendant, search, form]
- [Keyboard date picker](https://ui-lab-weld.vercel.app/docs/date-picker.md): A calendar grid of buttons with the keyboard model people expect (arrows, Home, End, Page Up and Down), roving tabindex, past dates disabled, and a typed input alongside. [date picker, calendar, grid, roving tabindex, form]
- [Dropdown action menu](https://ui-lab-weld.vercel.app/docs/menu-button.md): The ARIA menu-button pattern: a button opens a menu of actions, arrow keys move, type-ahead jumps, Esc closes and returns focus, Tab and outside clicks close. [menu, dropdown, menuitem, keyboard, roving focus]
- [Pagination and breadcrumbs](https://ui-lab-weld.vercel.app/docs/pagination-breadcrumbs.md): Labelled breadcrumb and pagination navs: the current page is aria-current, ellipses collapse long ranges to seven slots, and a status line says which results are shown. [pagination, breadcrumbs, navigation, aria-current, lists]
- [Carousel that does not trap anyone](https://ui-lab-weld.vercel.app/docs/accessible-carousel.md): A slide carousel with Previous, Next and dot controls, an announced position, auto-play off by default, a visible Pause, and hidden slides made inert. [carousel, slider, aria-roledescription, autoplay, inert]
- [Alerts that say it in words](https://ui-lab-weld.vercel.app/docs/alert-banners.md): Error, warning, success and info messages with an icon shape and a text label so colour is only reinforcement, correct live-region roles, and labelled dismiss buttons. [alert, banner, status, aria-live, feedback]
- [Password field with live rules](https://ui-lab-weld.vercel.app/docs/password-field.md): A password input with a Show and Hide button, rules that tick off in words, and a strength estimate written out, allowing paste and using new-password autocomplete. [password, form, strength, validation, input]
- [Accessible file dropzone](https://ui-lab-weld.vercel.app/docs/file-dropzone.md): A drop area that is really a button that opens the file picker, so keyboard users are never left out, with stated limits, written errors and a labelled Remove for each file. [upload, dropzone, file, form, drag and drop]

## Text

- [Scramble text](https://ui-lab-weld.vercel.app/docs/scramble-text.md): Text decodes into place, characters cycling through glyphs and locking in left to right. [text effect, decode, glitch, typewriter, hacker, intro]
- [Focus reveal](https://ui-lab-weld.vercel.app/docs/focus-reveal.md): Blurred words come sharp one at a time as a camera-style focus frame travels to each measured word box. [text effect, blur, focus, headline, camera]
- [Split text reveal](https://ui-lab-weld.vercel.app/docs/split-text-reveal.md): Headline split into words or letters that slide up from masks with a stagger when scrolled into view. [split text, stagger, reveal, headline, gsap alternative]
- [Typewriter](https://ui-lab-weld.vercel.app/docs/typewriter.md): Types, holds, deletes and cycles phrases with a blinking caret. [typewriter, typing, rotating words, caret]
- [Shimmer text & running border](https://ui-lab-weld.vercel.app/docs/shimmer-text.md): Gradient shine sweeping across text, and a conic-gradient border that runs around a button. @property animations. [shimmer, gradient text, conic gradient, animated border, @property]
- [Glitch text](https://ui-lab-weld.vercel.app/docs/glitch-text.md): RGB-split glitch from two clip-path-banded pseudo-element copies; plays on hover. [glitch, rgb split, clip-path, hover, cyberpunk]
- [Link hover effects (8)](https://ui-lab-weld.vercel.app/docs/link-hover-effects.md): Grow underline, centre-out, strike, highlighter, text roll, arrow nudge, double line, colour sweep: pure CSS classes. [link, underline, hover, css only, navigation]
- [Scroll typography (blur, highlight, fill)](https://ui-lab-weld.vercel.app/docs/scroll-blur-text.md): Words un-blur, markers sweep behind key phrases, and words fill with colour as you read. CSS view timelines only. [scroll, typography, blur, highlight, animation-timeline, css only]

## Motion

- [Scroll reveal (CSS only)](https://ui-lab-weld.vercel.app/docs/scroll-reveal.md): Elements fade and rise as they enter the viewport using animation-timeline: view(). Zero JS. [scroll animation, reveal, fade in, animation-timeline, css only]
- [Shared-element view transition](https://ui-lab-weld.vercel.app/docs/view-transition-grid.md): A card morphs into its detail view with the View Transitions API. Falls back to an instant swap. [view transitions, shared element, page transition, morph, gallery]
- [Count-up stats](https://ui-lab-weld.vercel.app/docs/count-up.md): Numbers animate from 0 when scrolled into view, with tabular figures so width stays stable. [counter, stats, numbers, kpi, intersection observer]
- [Spotlight card](https://ui-lab-weld.vercel.app/docs/spotlight-card.md): Cursor-following glow and slight 3D tilt, driven by CSS variables so React never re-renders. [hover effect, glow, tilt, cursor, card]
- [Blueprint intro](https://ui-lab-weld.vercel.app/docs/blueprint-intro.md): Construction lines draw across the frame, then the logo traces itself, then the tagline fades in. SVG stroke animation. [intro, loader, svg, line drawing, stroke-dashoffset, logo animation]
- [Pinned horizontal scroll](https://ui-lab-weld.vercel.app/docs/pinned-horizontal.md): Vertical scroll drives a horizontal track inside a pinned (sticky) frame. No library. [scroll, sticky, pin, horizontal scroll, scrollytelling, parallax]
- [Magnetic button](https://ui-lab-weld.vercel.app/docs/magnetic-button.md): Button leans toward the pointer inside its hover area, label leans further, springs back on leave. [magnetic, hover, cursor, button, micro-interaction]
- [Custom cursor](https://ui-lab-weld.vercel.app/docs/custom-cursor.md): Dot + eased ring cursor with blend-mode inversion; grows and shows a label over [data-cursor] elements. [cursor, custom cursor, mix-blend-mode, hover label, lerp]
- [Cursor image trail](https://ui-lab-weld.vercel.app/docs/image-trail.md): Images drop along the pointer path and fade/scale out, recycled from a fixed pool. [image trail, cursor, hover, web animations api, playful]
- [Sticky stacking cards](https://ui-lab-weld.vercel.app/docs/stacking-cards.md): Cards pin with increasing offsets and pile up as you scroll; buried cards shrink via a view timeline. No JS. [sticky, stack, scroll, cards, animation-timeline]
- [Zoom-out framed hero](https://ui-lab-weld.vercel.app/docs/zoom-out-hero.md): Full-bleed hero image that shrinks into a rounded window as you scroll (clip-path), headline scaling with it. [hero, scroll, clip-path, zoom, frame, cinematic]
- [Reading progress bar](https://ui-lab-weld.vercel.app/docs/scroll-progress.md): Progress bar driven by a CSS scroll timeline, no JS. [progress, scroll, reading, animation-timeline, indicator]
- [Hover image list](https://ui-lab-weld.vercel.app/docs/hover-image-list.md): Editorial list; hovering a row floats its image near the cursor while other rows dim. [hover, image reveal, list, editorial, portfolio index]
- [Image caption hovers (6)](https://ui-lab-weld.vercel.app/docs/caption-hover.md): Slide-up caption, zoom + dim, split reveal, frame draw, circle clip reveal and greyscale-to-colour. [hover, image, caption, card, portfolio, clip-path]
- [Direction-aware hover](https://ui-lab-weld.vercel.app/docs/direction-aware-hover.md): The overlay slides in from the edge the pointer entered and leaves through the edge it exits. [hover, direction, overlay, grid, pointer]
- [Layered image tilt](https://ui-lab-weld.vercel.app/docs/image-tilt.md): Image plus translucent copies and a title move at different depths with the pointer. [tilt, parallax, layers, hover, depth]
- [Click ripple & shockwave](https://ui-lab-weld.vercel.app/docs/click-ripple.md): Ripple from the exact press point (or centre for keyboard), plus a ring shockwave variant. [ripple, material, click, feedback, waapi]
- [Pixel page transition](https://ui-lab-weld.vercel.app/docs/pixel-transition.md): A grid of squares covers the screen in random order, the page swaps, then it clears. [page transition, pixel, grid, route change]
- [Layered wipe transition](https://ui-lab-weld.vercel.app/docs/layered-wipe.md): Three coloured panels sweep across with a stagger, page swaps under cover, they exit the other side. [page transition, wipe, clip-path, curtain, stagger]
- [Elastic grid scroll](https://ui-lab-weld.vercel.app/docs/elastic-columns.md): Each column follows scroll with its own lag; the middle one counter-moves, so the grid stretches and settles. [scroll, parallax, grid, lerp, elastic]
- [Pixelated image reveal](https://ui-lab-weld.vercel.app/docs/pixel-image-load.md): Images resolve from big crisp blocks to full resolution when scrolled into view (canvas, smoothing off). [pixel, image reveal, canvas, loading, scroll]
- [Flashlight reveal](https://ui-lab-weld.vercel.app/docs/flashlight-reveal.md): A dark, blurred cover with a radial mask hole that follows the pointer, plus a Reveal-all button. [mask, spotlight, cursor, reveal, mask-image]
- [Counter preloader](https://ui-lab-weld.vercel.app/docs/preloader.md): Big 000→100 counter with realistic pauses and a thin bar, then curtains split to reveal the page. [preloader, loader, counter, intro, curtain]

## Backgrounds

- [Animated mesh gradient](https://ui-lab-weld.vercel.app/docs/mesh-gradient.md): Three blurred blobs drifting on offset loops, plus SVG grain. Pure CSS hero background. [gradient, background, blob, hero, grain, css only]
- [Shader backgrounds](https://ui-lab-weld.vercel.app/docs/shader-background.md): One WebGL shader, seven looks (mesh, aurora, swirl, voronoi, flame, halftone, metal) and 16 palette presets with a print-like dither. [shader, webgl, glsl, aurora, flame, voronoi, halftone, metal, gradient, background, hero]
- [Dot grid warp](https://ui-lab-weld.vercel.app/docs/dot-grid-warp.md): A faint dot grid that bends toward the pointer like a rubber sheet under a weight. Canvas 2D, Gaussian falloff. [canvas, interactive background, dots, grid, pointer, gravity]
- [Warp starfield](https://ui-lab-weld.vercel.app/docs/starfield.md): Stars rushing toward the camera as streaks; hover engages warp speed. Canvas 2D. [starfield, space, warp, canvas, particles, background]
- [Synthwave perspective grid](https://ui-lab-weld.vercel.app/docs/perspective-grid.md): Neon grid floor scrolling toward you under a striped sun. Pure CSS. [synthwave, retro, grid, perspective, neon, 80s]
- [Morphing blob](https://ui-lab-weld.vercel.app/docs/morph-blob.md): Organic gradient blob cycling border-radius shapes while rotating. No JS. [blob, organic, gradient, border-radius, background]
- [WebGL liquid slideshow](https://ui-lab-weld.vercel.app/docs/liquid-slideshow.md): Noise-displaced UVs melt one image into the next in a single fragment shader, no library. [webgl, slideshow, distortion, displacement, shader, transition]
- [Scroll morphing shapes](https://ui-lab-weld.vercel.app/docs/morph-shapes.md): One SVG path lerps between blob keyframes while rotating and shifting hue as you scroll. [svg, morph, path, scroll, blob]

## 3D

- [3D ring carousel](https://ui-lab-weld.vercel.app/docs/ring-carousel.md): Cards on a true CSS 3D cylinder; drag to spin with momentum, snaps to the nearest card. [carousel, 3d, css 3d, drag, momentum, cylinder, slider]
- [Depth coverflow](https://ui-lab-weld.vercel.app/docs/coverflow.md): Coverflow where cards turn edge-on, sink and blur with distance from the active one. Plain CSS 3D. [coverflow, carousel, 3d, depth, slider]
- [Particle globe](https://ui-lab-weld.vercel.app/docs/particle-globe.md): A sphere of points on a Fibonacci lattice with a noise land mask; drag to spin with momentum. Canvas 2D. [globe, sphere, particles, canvas, 3d, drag, earth]
- [Helix gallery (spiral of pictures)](https://ui-lab-weld.vercel.app/docs/helix-gallery.md): Images wound onto a helix that turns and climbs; far side dims and blurs. Drag to spin, idle rotation. [spiral, helix, 3d gallery, images, carousel, css 3d, drag]
- [DNA double-helix carousel](https://ui-lab-weld.vercel.app/docs/dna-carousel.md): Two opposing strands of pictures joined by rungs, drifting along the axis; depth from scale, blur and z-sort. [dna, double helix, 3d, carousel, images, drag]
- [Wave gallery](https://ui-lab-weld.vercel.app/docs/wave-gallery.md): An endless ribbon of cards bent into a depth wave; cards crest toward you and sink into fog. Drag or wheel to travel. [wave, 3d, gallery, infinite, fog, ribbon]
- [Sphere gallery](https://ui-lab-weld.vercel.app/docs/sphere-gallery.md): Images spread over a sphere (Fibonacci lattice), billboarded, rotating on both axes with inertia. [sphere, globe, 3d gallery, images, drag, inertia]
- [Scroll tunnel](https://ui-lab-weld.vercel.app/docs/scroll-tunnel.md): Fly forward through a corridor of images as you scroll; cards emerge from the fog and pass the camera. [tunnel, scroll, 3d, fly through, z-axis, immersive]
- [Swipe card stack](https://ui-lab-weld.vercel.app/docs/swipe-stack.md): Tinder-style stack: drag the top card, it tilts and flies off past a threshold; buttons and arrow keys do the same. [swipe, tinder, card stack, drag, gesture, mobile]
- [3D flip card](https://ui-lab-weld.vercel.app/docs/flip-card.md): Two faces back-to-back that flip on Y; hover for pointers, click/Enter for everyone. [flip, card, 3d, backface-visibility, hover]
- [Depth parallax layers](https://ui-lab-weld.vercel.app/docs/depth-parallax.md): Scene layers shift by depth against the pointer plus a slight whole-card tilt; CSS variables, no re-renders. [parallax, layers, depth, hover, tilt, illustration]
- [3D cube slider](https://ui-lab-weld.vercel.app/docs/cube-slider.md): Four slides on the faces of a rotating cube; prev/next turn it 90°. [cube, slider, 3d, carousel, rotate]
- [Arc carousel](https://ui-lab-weld.vercel.app/docs/arc-carousel.md): Cards riding a huge circle; one shared transform-origin means rotate() alone places and tilts them. [arc, carousel, rotate, transform-origin, slider]
- [Extruded 3D text](https://ui-lab-weld.vercel.app/docs/extruded-text.md): Chunky 3D type from a generated stack of text-shadows, tilting toward the pointer. [3d text, text-shadow, extrude, typography, retro]
- [3D grid on scroll](https://ui-lab-weld.vercel.app/docs/scroll-3d-grid.md): Images rotate in from depth as they enter and tilt away as they leave, via CSS view timelines. [3d, scroll, grid, perspective, animation-timeline]

## 3D Motion

- [Cursor-following 3D robot](https://ui-lab-weld.vercel.app/docs/cursor-robot.md): Boxy robot mascot: head turns to the cursor, glowing eyes slide inside the visor, antenna springs with lag, eyes brighten on hover. [three.js, react three fiber, cursor follow, robot, mascot, character, eyes]
- [Floating shapes that dodge the cursor](https://ui-lab-weld.vercel.app/docs/floating-shapes.md): Glossy clearcoat 3D shapes bob in space and get pushed away by the cursor (pointer projected onto the scene), springing back home. [three.js, floating, repel, cursor, physics, shapes, hero]
- [Scroll-driven 3D object](https://ui-lab-weld.vercel.app/docs/scroll-model.md): A 3D planet turns, slides, tilts and recolours through keyframes as text sections scroll past, like an Apple-style product story. [three.js, scroll, scrollytelling, product, keyframes, 3d]
- [Refractive glass torus](https://ui-lab-weld.vercel.app/docs/glass-shape.md): A glass torus (MeshTransmissionMaterial) with chromatic aberration refracts big type behind it and tilts toward the cursor. [three.js, glass, refraction, transmission, chromatic aberration, hero]
- [Liquid 3D blob](https://ui-lab-weld.vercel.app/docs/distort-blob.md): Noise-distorted sphere that leans toward the cursor, wobbles harder and swells on hover, and changes colour on click. [three.js, blob, distort, liquid, orb, hover, ai]
- [Particle morph](https://ui-lab-weld.vercel.app/docs/particle-morph.md): 4,000 particles ripple between a sphere, cube, torus knot and wave plane, rotating toward the cursor. [three.js, particles, morph, points, shape, additive]
- [3D keycap](https://ui-lab-weld.vercel.app/docs/keycap-3d.md): A glossy keycap that tilts toward the cursor and physically presses on click, Space/Enter, or when you type its letter. [three.js, keyboard, keycap, press, button, 3d]
- [360° product viewer](https://ui-lab-weld.vercel.app/docs/product-viewer.md): Drag-to-orbit product with idle auto-rotate, colourway swatches and hotspots pinned to the model. [three.js, product, orbit controls, 360, configurator, ecommerce, hotspots]
- [Animated 3D robot mascot (real rigged model)](https://ui-lab-weld.vercel.app/docs/robot-mascot.md): A rigged, animated GLB character plays its Idle clip while its Head bone and body turn toward the cursor on top of the animation; emote buttons (Wave, Yes, No, Thumbs up, Jump, Dance) crossfade and return to Idle. [three.js, gltf, glb, rigged character, skeletal animation, bone, look at cursor, mascot, emote]
- [Fox that chases the cursor](https://ui-lab-weld.vercel.app/docs/fox-follow.md): A rigged fox runs, walks and idles toward the cursor's point on a floor (raycast to ground plane), turning along the shortest angle and crossfading its baked clips. [three.js, gltf, character, follow cursor, raycast, locomotion, animation blending]
- [Instanced ripple grid](https://ui-lab-weld.vercel.app/docs/ripple-grid.md): 1,600 cubes in one draw call rise and brighten around the cursor; clicking fires a shockwave ring across the field. [three.js, instancedmesh, grid, ripple, shockwave, cursor, wave]
- [Cursor water ripples](https://ui-lab-weld.vercel.app/docs/water-surface.md): A shader-displaced water plane: expanding rings drop along the cursor path (16-drop ring buffer), normals from finite differences catch the light. [three.js, shader, glsl, water, ripple, vertex displacement, cursor]
- [Cursor torchlight on 3D tiles](https://ui-lab-weld.vercel.app/docs/cursor-light-tiles.md): A relief wall of randomly deep tiles lit only by a warm point light that follows the cursor, raking shadows across every edge. [three.js, lighting, point light, relief, tiles, instancedmesh, cursor]
- [Curved WebGL photo gallery](https://ui-lab-weld.vercel.app/docs/curved-gallery.md): Photos wrap around the inside of a cylinder; drag or wheel to spin with inertia; the hovered photo ripples out from the pointer in a vertex shader. [three.js, webgl gallery, cylinder, images, shader, ripple, drag]
- [Cursor square lens](https://ui-lab-weld.vercel.app/docs/square-lens.md): Greyscale photo with a square colour lens following the cursor: magnified, RGB-split at the edges, outlined. One fragment shader. [shader, lens, rgb shift, cursor, image reveal, magnify]
- [Swinging lanyard badge](https://ui-lab-weld.vercel.app/docs/lanyard-badge.md): A conference badge hangs on a Verlet-rope lanyard, swings with inertia, and can be grabbed and flung. No physics library. [verlet, rope, physics, badge, drag, swing]
- [Raymarched metaballs](https://ui-lab-weld.vercel.app/docs/metaballs.md): Iridescent liquid blobs merge and split (smooth-min SDFs); one blob follows the cursor. Single full-screen shader. [raymarching, sdf, metaballs, shader, liquid, iridescent]
- [Magnetic needle field](https://ui-lab-weld.vercel.app/docs/iron-filings.md): 1,200 needles (one InstancedMesh) turn to point at the cursor like iron filings; nearby ones stand up and glow hot. [instancedmesh, magnet, field, needles, cursor, compass]
- [Boid flock chasing the cursor](https://ui-lab-weld.vercel.app/docs/boid-flock.md): 220 birds with separation, alignment and cohesion, steering toward the cursor so the swarm chases and swirls. [boids, flocking, swarm, simulation, instancedmesh, cursor]
- [Spiral galaxy](https://ui-lab-weld.vercel.app/docs/spiral-galaxy.md): 30,000 stars on spiral arms with differential rotation in a vertex shader, tilting toward the cursor. [particles, galaxy, points, shader, space, additive]
- [Particle typography](https://ui-lab-weld.vercel.app/docs/particle-text.md): A word rendered as particles (sampled from a 2D canvas) that springs back into shape while the cursor blasts it apart. [particles, text, typography, cursor, spring, explode]
- [Neon sign with bloom](https://ui-lab-weld.vercel.app/docs/neon-sign.md): Glass tubes bent from CatmullRom paths with emissive material and a Bloom post-process; flickers on and toggles on click. [neon, bloom, postprocessing, tube geometry, glow, flicker]
- [Portal card (window into a world)](https://ui-lab-weld.vercel.app/docs/portal-card.md): A card whose surface is a window into a separate 3D scene (MeshPortalMaterial); tilting it with the cursor reveals parallax inside. [portal, mesh portal material, parallax, card, world, tilt]
- [3D dice roll](https://ui-lab-weld.vercel.app/docs/dice-roll.md): Two dice thrown with bounces and wild spin that settle exactly on pre-chosen faces; total announced. [dice, random, physics feel, quaternion, slerp, game]
- [Self-scrambling puzzle cube](https://ui-lab-weld.vercel.app/docs/twist-cube.md): A 3×3 cube turns random layers by re-parenting cubelets to a pivot, then snapping them back to the grid; orbits with the cursor. [rubik, puzzle, cube, pivot, reparent, layer rotation]
- [Newton's cradle](https://ui-lab-weld.vercel.app/docs/newton-cradle.md): Five chrome balls with energy handing over through the middle; click to release a ball. Chrome reflects a generated gradient environment. [physics, pendulum, chrome, environment map, desk toy]
- [Waving cloth flag](https://ui-lab-weld.vercel.app/docs/cloth-flag.md): A pinned flag rippling on layered sine waves with recomputed normals; the cursor adds a gust and a bulge. [cloth, flag, wind, vertex animation, waves]
- [Cursor snake](https://ui-lab-weld.vercel.app/docs/cursor-snake.md): A glossy segmented snake slithers after the cursor using a follow-the-leader distance constraint. [snake, follow, chain, constraint, cursor, playful]
- [Endless terrain flyover](https://ui-lab-weld.vercel.app/docs/terrain-flyover.md): Low-poly, height-coloured landscape scrolling forever via noise offset, fog at the edge; cursor banks and steers the camera. [terrain, procedural, noise, flyover, low poly, landscape]
- [Exploding crystal](https://ui-lab-weld.vercel.app/docs/explode-shape.md): A faceted crystal bursts into its triangles along face normals on hover/focus and snaps back together. [explode, shards, faces, hover, assemble]
- [Audio-reactive 3D ring](https://ui-lab-weld.vercel.app/docs/audio-bars.md): A ring of 64 bars driven by a real AnalyserNode on music synthesised in the browser; nothing plays until you press Play. [audio, web audio, analyser, visualizer, music, instancedmesh]
- [Interactive solar system](https://ui-lab-weld.vercel.app/docs/solar-system.md): Planets orbit on tilted rings; hover pauses and highlights; click flies the camera to a planet and shows its facts. [solar system, orbit, camera fly-to, click select, education]
- [Cursor comet with light trails](https://ui-lab-weld.vercel.app/docs/comet-trail.md): A glowing comet follows the cursor springily, painting a fading ribbon, with three orbiting sparks leaving their own trails. [trail, cursor, light painting, comet, ribbon]
- [Isometric room diorama](https://ui-lab-weld.vercel.app/docs/iso-room.md): Orthographic iso room built from primitives; hovering furniture lifts and labels it; scene parallax-tilts with the cursor. [isometric, orthographic, diorama, room, hover, portfolio]
- [Poppable soap bubbles](https://ui-lab-weld.vercel.app/docs/soap-bubbles.md): Thin-film iridescent bubbles drift upward; click to pop into a droplet ring; count announced. [bubbles, iridescent, thin film, shader, click, pop]
- [Scroll fly-through on a 3D path](https://ui-lab-weld.vercel.app/docs/spline-flythrough.md): Scroll moves the camera along a CatmullRom spline past image cards, looking ahead so it banks through turns. [scroll, camera path, spline, fly through, gallery, storytelling]
- [Holographic foil card](https://ui-lab-weld.vercel.app/docs/hologram-card.md): A trading card with a foil shader: rainbow sheen, sparkles and glare shift with tilt as it follows the cursor. [holographic, foil, shader, card, tilt, sparkle]
- [Marbles with cursor gravity](https://ui-lab-weld.vercel.app/docs/marble-gravity.md): 60 glossy marbles are pulled to the cursor, collide and cluster; hold the mouse button to repel. [physics, collision, gravity, marbles, instancedmesh, cursor]
- [Kinetic typography ring](https://ui-lab-weld.vercel.app/docs/kinetic-type-ring.md): Bands of looping text wrap around cylinders, spinning in alternate directions around a chrome knot, tilting with the cursor. [kinetic typography, text, cylinder, loop, rotate]
- [Click-to-shatter glass](https://ui-lab-weld.vercel.app/docs/glass-shatter.md): An image pane breaks into radial shards around the click point, which fly, spin and fall, then the pane restores. [shatter, glass, shards, click, physics, image]

## Layouts

- [Bento grid](https://ui-lab-weld.vercel.app/docs/bento-grid.md): Six-column grid with mixed tile spans and dense packing. Collapses to one column on phones. [bento, grid, features, layout, dashboard summary]
- [Article with sticky contents list](https://ui-lab-weld.vercel.app/docs/article-layout.md): A reading layout with a 65-character measure, a sticky table of contents that marks the current section, reading time and generous leading. [article, reading, toc, scrollspy, typography]
- [Layout primitives (stack, cluster, sidebar…)](https://ui-lab-weld.vercel.app/docs/layout-primitives.md): Six tiny CSS layouts (stack, cluster, sidebar, switcher, center, auto grid) that respond to available space with no media queries. [layout, flexbox, grid, css, responsive]
- [Masonry with CSS columns](https://ui-lab-weld.vercel.app/docs/masonry-columns.md): Cards of different heights packed into columns with CSS only. Notes the one catch: order runs down each column, not across. [masonry, columns, gallery, css, layout]

## Sections

- [Pricing tiers](https://ui-lab-weld.vercel.app/docs/pricing-tiers.md): Three plans with a monthly/yearly radiogroup, featured middle card, tick lists and a ghost wordmark. [pricing, plans, section, billing toggle, saas]
- [Wordmark footer](https://ui-lab-weld.vercel.app/docs/wordmark-footer.md): Newsletter, link columns and a giant wordmark bleeding off the bottom edge, sized with container query units. [footer, wordmark, newsletter, container queries, section]
- [Contact section](https://ui-lab-weld.vercel.app/docs/contact-section.md): Promise list, contact rows and a glass form with labelled fields, validation summary and success state. [contact, form, validation, section, enquiry]
- [Testimonial wall](https://ui-lab-weld.vercel.app/docs/testimonial-wall.md): Masonry of quote cards in columns scrolling opposite ways with faded edges. [testimonials, social proof, masonry, marquee, reviews]
- [Split hero](https://ui-lab-weld.vercel.app/docs/split-hero.md): Headline, announcement pill, dual CTA and avatar proof beside a rotated image collage. [hero, landing page, cta, collage, social proof]
- [Logo cloud & stats](https://ui-lab-weld.vercel.app/docs/logo-cloud.md): Greyscale logos that light up on hover plus a stats band as a definition list. [logos, clients, stats, social proof, trust]
- [Site header with skip link and mobile menu](https://ui-lab-weld.vercel.app/docs/site-nav.md): A header with a skip link, a labelled nav landmark, aria-current on the active page, and a menu button on small screens that closes with Esc and returns focus. [header, navigation, mobile menu, skip link, aria-current]
- [FAQ with native details and search](https://ui-lab-weld.vercel.app/docs/faq-section.md): An FAQ on native details elements with a search box that reports how many answers match, and an Open all button. Works without script. [faq, accordion, details, search, content]
- [Fair cookie consent banner](https://ui-lab-weld.vercel.app/docs/cookie-banner.md): A consent banner where Reject and Accept have equal weight, nothing is pre-ticked, optional categories are explained, and the choice can be reopened. [cookies, consent, privacy, banner, gdpr]
- [Sign-up form with real validation](https://ui-lab-weld.vercel.app/docs/newsletter-form.md): An email sign-up with a visible label, the right keyboard, an error tied to the field and announced, a busy state and a clear success message. [form, email, validation, newsletter, aria-invalid]
- [Feature rows (not a card grid)](https://ui-lab-weld.vercel.app/docs/feature-rows.md): Each feature gets its own row with the picture alternating sides, with DOM order that stays heading, text, picture. [features, landing, rows, section, layout]
- [How it works (numbered steps)](https://ui-lab-weld.vercel.app/docs/how-it-works.md): An ordered list of steps with a connecting line, announced as a real list with step numbers, stacking on narrow screens. [steps, process, ordered list, section, onboarding]
- [Plan comparison table](https://ui-lab-weld.vercel.app/docs/comparison-table.md): A comparison where every cell says Included or Not included in words, with proper headers, the recommended plan marked in text, and sideways scrolling in a focusable region. [comparison, pricing, table, plans, accessibility]
- [Closing call to action](https://ui-lab-weld.vercel.app/docs/cta-band.md): One sentence, one button, one line of reassurance, in a high-contrast band with its own heading. [cta, call to action, banner, section, conversion]
- [Team as a list](https://ui-lab-weld.vercel.app/docs/team-list.md): People as rows of name, role and one real sentence, in a description list, instead of a wall of identical cards. [team, about, people, list, section]
- [Single large testimonial](https://ui-lab-weld.vercel.app/docs/pull-quote.md): One testimonial set large in a real figure with blockquote and figcaption, attributed with name, role and tenure. [testimonial, quote, blockquote, social proof, section]

## Screens

- [Analytics dashboard](https://ui-lab-weld.vercel.app/docs/analytics-dashboard.md): Full screen: sidebar, KPI tiles with sparklines, paired bar chart, arc dial, donut and orders table, all hand-drawn SVG. [dashboard, admin, charts, svg charts, kpi, table, donut, sparkline]
- [Auth screen](https://ui-lab-weld.vercel.app/docs/auth-screen.md): Split sign-in/up: brand quote panel, social buttons, email/password with show/hide and correct autocomplete. [login, signup, auth, form, password]
- [Kanban board](https://ui-lab-weld.vercel.app/docs/kanban-board.md): Columns with drag-and-drop cards plus a per-card "Move to" select as the keyboard path. [kanban, drag and drop, board, tasks, trello]
- [AI chat screen](https://ui-lab-weld.vercel.app/docs/chat-ui.md): Message log, bubbles, typing indicator, suggestion chips and an auto-growing composer. [chat, ai assistant, messages, composer, chatbot]
- [Sortable, filterable data table](https://ui-lab-weld.vercel.app/docs/data-table.md): A real table with scoped headers, sort buttons in the header cells with aria-sort, a filter that reports its row count, tabular figures, and a scroll region on phones. [table, sort, filter, aria-sort, data]
- [Shop with basket and live totals](https://ui-lab-weld.vercel.app/docs/shop-cart.md): Product rows, a basket with quantity steppers that stop at one, a separate Remove button, a subtotal and delivery that update in a live region, and a free-delivery nudge. [shop, cart, ecommerce, stepper, totals]
- [Settings with switches and unsaved changes](https://ui-lab-weld.vercel.app/docs/settings-screen.md): Switches with visible On and Off words, fieldsets, an unsaved-changes message with Save and Discard, and a separate confirmed delete action. [settings, switch, form, fieldset, confirm]
- [Helpful 404 page](https://ui-lab-weld.vercel.app/docs/not-found-page.md): A 404 that says what happened and offers search, popular pages and the home page. No joke needed. [404, error page, search, recovery]
- [Search with filters](https://ui-lab-weld.vercel.app/docs/faceted-search.md): A search box and grouped checkbox filters with counts, removable chips for what is applied, a live result count and an honest empty state. [search, filters, facets, checkbox, results]
- [First-run checklist](https://ui-lab-weld.vercel.app/docs/onboarding-checklist.md): A getting-started checklist with real checkboxes, a progress bar and words, a suggested next step, any order, and a way to hide it. [onboarding, checklist, progress, first run, app]

## Sites

- [Site: SOLAR (3D product scroll)](https://ui-lab-weld.vercel.app/docs/site-solar.md): A complete product site. One procedural 3D can spins through three flavors as you scroll; label, palette and copy swap on every turn. [site, full page, product, 3d, scroll, gsap, scrolltrigger, lenis, react three fiber, can, palette, pinned]
- [Site: MARE (editorial luxury)](https://ui-lab-weld.vercel.app/docs/site-mare.md): A slow-travel quarterly. A framed photograph opens to full bleed, a pinned horizontal photo essay slides sideways, and the contents list previews images at the cursor. [site, full page, editorial, serif, luxury, horizontal scroll, pin, clip-path, parallax, gsap, lenis, cursor preview]
- [Site: Lattice (technical dark)](https://ui-lab-weld.vercel.app/docs/site-lattice.md): A developer-database landing page. A scroll-scrubbed terminal drives a live canvas edge network that reacts to the pointer, plus a working Ctrl K palette and a latency race. [site, full page, dark, developer, terminal, canvas, network, command palette, scrolltrigger, gsap, lenis]
- [Site: HOT MESS (neo-brutalist)](https://ui-lab-weld.vercel.app/docs/site-hotmess.md): A coffee roaster with attitude. A pile of stickers you can grab and throw (hand-rolled pointer physics), hard offset shadows, marquees and a live bag configurator. [site, full page, brutalist, zine, stickers, drag, physics, pointer events, configurator, marquee, shop]
- [Site: ABYSS (cinematic descent)](https://ui-lab-weld.vercel.app/docs/site-abyss.md): An ocean descent where scroll is depth. One full-screen fragment shader draws light shafts, marine snow and bioluminescence; a depth gauge and a pointer lantern complete it. [site, full page, cinematic, immersive, webgl, glsl, shader, scroll, depth, three, lenis]
- [Site: MERIDIAN NIGHT RAIL (departures board)](https://ui-lab-weld.vercel.app/docs/site-departures.md): A night-train brand set as a station departure hall. A split-flap board that resolves letter by letter, a route map whose line draws itself with a train riding it, a berth comparison table and a ticket that prints. [site, full page, niche world, departures board, split flap, transit, timetable, svg map, offset-path, ticket, signage]
- [Site: HEDGEROW PRESS (field notebook)](https://ui-lab-weld.vercel.app/docs/site-herbarium.md): A pressed-plant print shop set as an open field notebook: a taped plate with numbered callouts and handwritten notes, a specimen index, and a plant press you turn with a slider to watch a flower dry and flatten over fourteen days. [site, full page, niche world, herbarium, field notebook, botanical, paper, handwriting, procedural svg, slider, craft]
- [Site: KESTREL K-1 (cassette deck)](https://ui-lab-weld.vercel.app/docs/site-tape.md): A product page where the product plays: a cassette deck whose generated drum-and-bass loop runs through a switchable tape stage (saturation, roll-off, wobble), with VU needles that read the real signal, turning reels and a tape counter. Finish chooser re-skins the panel. [site, full page, niche world, hi-fi, tape deck, webaudio, analyser, vu meter, hardware, product, skeuomorphic]
- [Site: THE LEDGER (broadsheet newsletter)](https://ui-lab-weld.vercel.app/docs/site-ledger.md): A finance newsletter set as a broadsheet: masthead, ruled columns, a markets table with sign-and-arrow change, a long essay with justified hyphenated text, marginal sidenotes, a reading progress rule and a text-size control. [site, full page, niche world, broadsheet, editorial, newspaper, reading, sidenotes, table, newsletter, serif]
- [Site: HARROW SOUND (tide and pilotage)](https://ui-lab-weld.vercel.app/docs/site-tidewater.md): A harbour authority page where the chart is the tool: pick a vessel draft, scrub the time of day, and a generated seabed redraws as the tide moves. Land dries, shallows turn hazard-pink, and a plain sentence says whether the channel is safe to enter. [site, full page, niche world, nautical chart, tide, canvas, marching squares, operate, form, data]
- [Site: THE SALT ROAD (museum exhibition)](https://ui-lab-weld.vercel.app/docs/site-salt-road.md): An exhibition site where the object leads: six drawn artefacts, each with a proper wall placard, a Large print switch that scales every label, and an audio-guide keypad that jumps to a stop, shows its transcript and plays a soft tone. [site, full page, niche world, museum, placard, exhibition, audio guide, large print, svg, experience]
- [Site: PEBBLE (terminal portfolio)](https://ui-lab-weld.vercel.app/docs/site-pebble.md): A systems engineer’s portfolio as a terminal that really works: help, ls, cat, projects, open, theme, history, tab completion and arrow-key recall, over real content. One button swaps it for an ordinary page with the same content. [site, full page, niche world, terminal, bbs, portfolio, keyboard, command line, theme, developer]
- [Site: LIGHTHOUSE FORECAST (plain-text weather)](https://ui-lab-weld.vercel.app/docs/site-plain-forecast.md): A weather page set as plain text: one monospace column, no images, charts drawn with characters. Every character chart has a real table beside it, so the density is honest and the page loads instantly. [site, full page, niche world, plain text, ascii, weather, data, monospace, minimal, operate]
- [Site: PIP (tiny-habits app)](https://ui-lab-weld.vercel.app/docs/site-pip.md): A friendly app landing page in the Soft Playful world: a mascot whose eyes follow you and who changes mood as you tick habits in a live demo, pastel fields with two hot pops, big rounded shapes and springy easing. [site, full page, soft playful, mascot, app landing, consumer, rounded, spring, pastel, persuade]
- [Site: THE COMMUTE REPORT (data poster)](https://ui-lab-weld.vercel.app/docs/site-commute-report.md): An annual report set as a Swiss data poster: a toggleable twelve-column grid, one earned giant statistic, charts labelled directly, three type sizes, tabular figures and a single red. A line chart draws on, bars grow, and every chart has its data as a real table. [site, full page, swiss grid, data poster, report, chart, svg, tabular figures, grid overlay, read]
- [Site: CRUMB & CO. (neighbourhood bakery)](https://ui-lab-weld.vercel.app/docs/site-crumb.md): A local bakery in the Warm Organic world: hand-drawn bakes in arch frames on grainy oat paper, a stamp, and a line that draws under the headline. It also works: bakes show ready, sold out or not yet baked at a chosen hour, the order form totals live, and open-now comes from the real hours. [site, full page, warm organic, bakery, local business, grain, arch, hand-drawn, order form, food]
- [Site: FENWICK & ODE (blueprint engineering)](https://ui-lab-weld.vercel.app/docs/site-blueprint.md): A structural engineering practice set as a drawing sheet: title block, grid paper, dimension lines, a truss that draws itself, and a working quick beam check whose diagram bends as you change span, load and material. Sums are the textbook ones, labelled indicative. [site, full page, niche world, blueprint, engineering, drawing, svg, calculator, grid paper, operate]
- [Site: TILL ROLL (receipt-style order page)](https://ui-lab-weld.vercel.app/docs/site-till-roll.md): A coffee roaster whose order page is a till receipt: choose beans and the roll prints a line for each, with dotted leaders, a running total, a tip selector and a barcode generated from the order. Torn edges are a CSS mask. [site, full page, niche world, receipt, thermal, shop, order form, monospace, barcode, persuade]
- [Site: A GENTLE GUIDE TO CURVES (explorable explainer)](https://ui-lab-weld.vercel.app/docs/site-curves.md): An explorable guide that builds a Bezier curve in four steps (line, quadratic, cubic, easing). Each passage sits beside a figure you can drag, nudge with the arrow keys and scrub with a slider, and the formula, SVG path and CSS easing update as you move. [site, full page, niche world, explorable, explainer, bezier, svg, drag, easing, read]
- [Site: SPECIMEN, FRAUNCES (type specimen)](https://ui-lab-weld.vercel.app/docs/site-specimen.md): A type specimen for an open-source variable serif, where you drive the real axes: weight, optical size, softness and wonk reshape the letterforms live. Also a character set to inspect, a size ladder and a text tester for your own words. [site, full page, niche world, type specimen, variable font, typography, font-variation-settings, tool, read]
- [Site: PHOSPHOR ARCADE (CRT cabinet with a playable game)](https://ui-lab-weld.vercel.app/docs/site-arcade.md): A CRT arcade cabinet in the browser with a game you can really play: a canvas Snake on a fixed timestep with arrow keys, WASD and on-screen buttons, under phosphor glow, scanlines and a gentle flicker. The effect is cosmetic; scores and instructions are plain text. [site, full page, niche world, crt, retro, arcade, canvas, game, snake, scanlines, experience]

## Signature moves

- [Drive-the-site world](https://ui-lab-weld.vercel.app/docs/move-drive-world.md): Navigation as play: a top-down car you drive with the keys (or by holding the pointer) around zones that open sections. [signature move, game, canvas, keyboard, physics, portfolio, navigation]
- [Particle field that leans to the cursor](https://ui-lab-weld.vercel.app/docs/move-particle-attractor.md): Hundreds of depth-sorted particles that spring toward the pointer and settle back. [signature move, particles, canvas, cursor, parallax, immersive]
- [Physics balls](https://ui-lab-weld.vercel.app/docs/move-physics-balls.md): Verlet circles that fall, pile up and get shoved by the cursor; click to drop more. [signature move, physics, verlet, canvas, playful, cursor]
- [Scroll tunnel (scroll as camera)](https://ui-lab-weld.vercel.app/docs/move-scroll-tunnel.md): Frames stacked along the Z axis; scrolling flies the camera through them. Pure CSS 3D with one CSS variable per scroll. [signature move, scroll, 3d, css, perspective, camera]
- [Liquid hover (SVG displacement)](https://ui-lab-weld.vercel.app/docs/move-liquid-hover.md): An element that warps under the pointer using an SVG feTurbulence + feDisplacementMap filter. No WebGL. [signature move, svg filter, displacement, hover, distortion, css]
- [Glyph trail](https://ui-lab-weld.vercel.app/docs/move-glyph-trail.md): The cursor drops the letters of a word along its path, each rising and fading. DOM nodes spawned by distance. [signature move, cursor, trail, text, playful, dom]
- [Scroll-scrubbed frame sequence](https://ui-lab-weld.vercel.app/docs/move-frame-scrub.md): A pinned canvas whose frame number is the scroll progress, the technique behind product-page scroll films. Frames are drawn procedurally so the demo needs no assets. [signature move, scroll, canvas, frame sequence, pinned, product, apple]
- [Living mesh-gradient hero](https://ui-lab-weld.vercel.app/docs/move-mesh-gradient.md): Soft colour blobs drifting on sine paths over a base colour, drawn at tiny resolution and scaled up, behind a light large headline. [signature move, gradient, mesh, canvas, hero, fintech]
- [Spotlight grid (shared pointer glow)](https://ui-lab-weld.vercel.app/docs/move-spotlight-grid.md): Card borders glow toward the pointer, and the light travels across the gaps between cards because it is tracked once on the grid. [signature move, spotlight, glow, grid, cards, pointer, dark]
- [Grid with travelling beams](https://ui-lab-weld.vercel.app/docs/move-grid-beams.md): A quiet grid with short gradient beams that travel along random lines and fade out. One canvas. [signature move, grid, beams, canvas, dark, background]
- [Self-typing command launcher](https://ui-lab-weld.vercel.app/docs/move-command-demo.md): A command palette that types a query on its own, then answers to real input: filter, arrow keys, Enter. [signature move, command palette, keyboard, combobox, search, launcher]
- [Tilted marquee rows](https://ui-lab-weld.vercel.app/docs/move-tilt-marquee.md): Rows of cards drifting in opposite directions inside a 3D perspective tilt, pausing on hover or focus. [signature move, marquee, 3d tilt, gallery, css, perspective]
- [Morphing tab pill](https://ui-lab-weld.vercel.app/docs/move-morph-tabs.md): A tab bar whose highlight is one shape that slides and recolours between tabs. Roving tabindex and arrow keys. [signature move, tabs, pill, morph, tablist, color, spring]
- [Rotary knob with detents](https://ui-lab-weld.vercel.app/docs/move-rotary-knob.md): A hardware-style knob turned by dragging, scrolling or arrow keys, with 12 detents and a mono readout. [signature move, knob, slider, hardware, drag, detent, audio]
- [Dot-matrix type](https://ui-lab-weld.vercel.app/docs/move-dot-matrix.md): Text drawn as a grid of dots that swell and light up near the pointer, like an LED matrix. [signature move, dot matrix, canvas, type, led, hover]
- [Odometer numbers](https://ui-lab-weld.vercel.app/docs/move-odometer.md): Digits that roll like a mechanical odometer: each is a 0-9 strip that slides, so only changed digits move. [signature move, number, counter, odometer, tabular, fintech]
- [Code to preview toggle](https://ui-lab-weld.vercel.app/docs/move-code-to-preview.md): A segmented control that cross-fades a code window into the thing the code produces. [signature move, code, preview, tabs, developer, cross-fade]
- [Keyboard-run inbox](https://ui-lab-weld.vercel.app/docs/move-shortcut-inbox.md): A mini inbox operated entirely from the keyboard: j/k move, e archive, s star, u undo, with visible buttons. [signature move, keyboard, inbox, shortcuts, listbox, speed]
- [Desktop-as-homepage](https://ui-lab-weld.vercel.app/docs/move-desktop-home.md): A page built as an OS desktop: icons open draggable windows that come to the front when clicked. [signature move, desktop, windows, drag, metaphor, playful, os]
- [State-machine button](https://ui-lab-weld.vercel.app/docs/move-state-button.md): A button that is always in exactly one of idle, hover, press, loading or success, each with its own pose. [signature move, state machine, button, loading, success, interaction]
- [Monumental type](https://ui-lab-weld.vercel.app/docs/move-monument-type.md): One word set so large (62cqw) that its container clips it, with small calm text for contrast. No JavaScript. [signature move, typography, giant type, container query, portfolio, cqw]
- [Stacking toasts](https://ui-lab-weld.vercel.app/docs/move-toast-stack.md): Toasts that stack like cards and fan out on hover or focus so each can be read and dismissed. [signature move, toast, stack, notification, spring, sonner]
- [Live CSS explainer](https://ui-lab-weld.vercel.app/docs/move-live-css.md): Sliders drive a live element and the CSS that produces it, side by side, from one state. [signature move, explorable, sliders, css, education, docs]
- [Inertial scroll with rail](https://ui-lab-weld.vercel.app/docs/move-scroll-rail.md): Wheel input eased by a lerp (what smooth-scroll libraries do), with a progress rail and live velocity readout. [signature move, smooth scroll, lerp, lenis, velocity, progress]
- [Solid/outline marquee](https://ui-lab-weld.vercel.app/docs/move-outline-marquee.md): Giant words scrolling in opposite rows, alternating filled and stroked, inverting on hover. Pure CSS. [signature move, marquee, outline text, type, css, studio]
- [Labelled cursor](https://ui-lab-weld.vercel.app/docs/move-label-cursor.md): A lagging dot that grows into a labelled pill ('View', 'Play') over elements marked data-cursor. [signature move, cursor, custom cursor, label, portfolio, lerp]
- [Scrollytelling chart](https://ui-lab-weld.vercel.app/docs/move-scrollytelling.md): Text steps scroll past a sticky SVG chart; the step nearest the middle sets the chart's state. [signature move, scrollytelling, chart, svg, intersection observer, editorial]
- [Book stack menu](https://ui-lab-weld.vercel.app/docs/move-book-stack.md): A pile of covers where the one you point at or focus slides out of the stack and the others make room. [signature move, stack, books, hover, catalogue, serif]
- [Draggable block grid](https://ui-lab-weld.vercel.app/docs/move-block-grid.md): A grid of mixed blocks you rearrange by dragging, in one type size; Alt+Arrow keys move a focused block. [signature move, drag, grid, reorder, curation, keyboard]
- [Scrollspy table of contents](https://ui-lab-weld.vercel.app/docs/move-scrollspy.md): A sticky contents list that highlights the section nearest the top of the reading area, via one IntersectionObserver. [signature move, scrollspy, toc, docs, intersection observer, navigation]
- [SVG-mask hero (v0)](https://ui-lab-weld.vercel.app/docs/move-v0-mask-hero.md): Type as a window onto moving colour: an SVG mask shows a gradient only where the letters are. [signature move, svg mask, hero, type, gradient, v0]
- [Globe to map morph (v0)](https://ui-lab-weld.vercel.app/docs/move-v0-globe-to-map.md): Blends orthographic and equirectangular projections so a globe unrolls into a flat map. No D3. [signature move, globe, map, projection, canvas, dataviz, v0]
- [Frame grid that trades space (v0)](https://ui-lab-weld.vercel.app/docs/move-v0-frame-grid.md): Hover or focus a frame and it grows while its row grows in the grid, so layout reflows around attention. [signature move, layout, grid, flex, hover, v0]
- [Email capture with every state (v0)](https://ui-lab-weld.vercel.app/docs/move-v0-email-capture.md): Idle, invalid-after-blur, submitting, success and server-error states for a waitlist or newsletter form. [signature move, form, email, validation, waitlist, states, v0]
- [Progressive blur edge (v0)](https://ui-lab-weld.vercel.app/docs/move-v0-blur-edge.md): Stacked, masked backdrop-filter layers that ramp the blur toward the edge so content dissolves instead of being cut off. [signature move, gradient blur, backdrop-filter, mask, scroll, v0]
- [Isometric room with pathfinding (v0)](https://ui-lab-weld.vercel.app/docs/move-v0-isometric-room.md): Click a tile and an avatar walks there by breadth-first search around furniture; arrow keys step it. [signature move, isometric, pathfinding, bfs, canvas, game, v0]
- [Particle logo (v0)](https://ui-lab-weld.vercel.app/docs/move-v0-particle-logo.md): A logo made of particles that scatter from the pointer and spring back. A 2D canvas replaces GLSL. [signature move, particles, logo, canvas, spring, v0]
- [Sticky footer reveal (v0)](https://ui-lab-weld.vercel.app/docs/move-v0-sticky-footer.md): The page lifts like a curtain to reveal a footer pinned underneath. Pure CSS. [signature move, sticky, footer, reveal, parallax, css, v0]
- [Collapsible dashboard shell (v0)](https://ui-lab-weld.vercel.app/docs/move-v0-dashboard-shell.md): An app shell with a collapsible sidebar, view tabs and a slide-in chat panel. [signature move, dashboard, sidebar, app shell, tabs, chat, v0]
- [Perforated cover tear (Neutomni)](https://ui-lab-weld.vercel.app/docs/move-perforated-reveal.md): A poster-sized wordmark with a dashed cut line. Scrolling slides the top half up and the bottom half down to reveal what was underneath. [signature move, hero, scroll, clip, reveal, wordmark, awwwards]
- [Drafting sheet drawing (Heron AI)](https://ui-lab-weld.vercel.app/docs/move-drafting-rules.md): Fine red rules close in on a pencil elevation that draws itself line by line as you scroll. SVG stroke offsets and transforms only. [signature move, svg, drawing, blueprint, paper, scroll, awwwards]
- [Inverting header (twks)](https://ui-lab-weld.vercel.app/docs/move-difference-nav.md): A sticky header in white with mix-blend-mode difference, so it stays readable over any light or dark band. No JavaScript. [signature move, header, navigation, blend mode, css, awwwards]
- [Word-by-word focus pull (Butter)](https://ui-lab-weld.vercel.app/docs/move-focus-words.md): A statement that sharpens one word at a time as you scroll, while rounded icon chips drift across it. Blur and opacity only. [signature move, text, blur, scroll, saas, awwwards]
- [System status modules (Pensatori Irrazionali)](https://ui-lab-weld.vercel.app/docs/move-status-modules.md): Numbered monospace modules with IDs, a column of status lines and a turning globe. The module in view becomes active and the lights come on in order. [signature move, monospace, status, scroll, documentation, awwwards]
- [Scatter and grid layout toggle (Gil Huybrecht)](https://ui-lab-weld.vercel.app/docs/move-scatter-grid.md): The same tiles in a tidy grid or scattered like prints on a table; a toggle moves them with transforms only. [signature move, portfolio, gallery, grid, layout toggle, awwwards]
- [Counter into wordmark (Edolus)](https://ui-lab-weld.vercel.app/docs/move-counter-wordmark.md): A percentage counts up in the dark, then the wordmark rises into place letter by letter. Replayable. [signature move, preloader, wordmark, counter, text, awwwards]
- [Sentence with inline picture chips (Noho)](https://ui-lab-weld.vercel.app/docs/move-inline-chips.md): A statement where small pictures sit between the words at the size of a letter, each word and chip rising through its own mask as you scroll. [signature move, typography, inline images, reveal, scroll, awwwards]
- [One script word in a bold headline (LxL Creative)](https://ui-lab-weld.vercel.app/docs/move-script-accent.md): A heavy caps headline with a single hand-written word in the brand accent, tilted and overlapping the lines. Type your own word to test it. [signature move, typography, script, headline, accent, awwwards]
- [CSS halftone split screen (Aspen Search)](https://ui-lab-weld.vercel.app/docs/move-halftone-split.md): Flat black and grey panels with halftone dot imagery made in CSS from a tone gradient and a dot grid, and huge type. The dots follow the pointer. [signature move, halftone, css, split screen, poster, awwwards]
- [Scroll-reactive accent band (Boc.Studio)](https://ui-lab-weld.vercel.app/docs/move-band-ticker.md): One flat accent band across a rich image, carrying the logo and a line of facts on repeat. It drifts slowly and speeds up and reverses with your scrolling. [signature move, marquee, ticker, scroll velocity, band, awwwards]
- [A creature that follows the cursor (Leo Parpeix)](https://ui-lab-weld.vercel.app/docs/move-feed-the-bee.md): A small bee eases toward the pointer, tilts as it travels and beats its wings. Click to drop a crumb and it goes for it. [signature move, cursor, playful, creature, svg, awwwards]
- [Outlined name with a script alias (Tim Van Damme)](https://ui-lab-weld.vercel.app/docs/move-outline-lockup.md): A stroke-only display name, a marker-script alias in one warm colour, and hand-drawn doodles over a CSS halftone portrait. Toggle the doodles. [signature move, typography, outline text, script, halftone, doodles, portfolio]
- [Contact-sheet project index (Office Commun)](https://ui-lab-weld.vercel.app/docs/move-contact-sheet.md): Projects as a label line above one horizontal strip of variable-width tiles, with snap scrolling and keyboard and button controls. No cards. [signature move, index, strips, portfolio, scroll snap, minimal]
- [The sky as a gradient (sky.dlazaro.ca)](https://ui-lab-weld.vercel.app/docs/move-sky-gradient.md): The sun's height above the horizon is computed from the time, the date and the latitude, and that one number picks a vertical sky gradient. Scrub the day and change the place. [signature move, gradient, time of day, generative, sun, background]

## Niche worlds

- [Split-flap departures board](https://ui-lab-weld.vercel.app/docs/niche-split-flap.md): A mechanical-style board where each cell cycles forward through the alphabet to its target, with a falling flap per step. A hidden table mirrors the content. [niche world, split flap, departures, board, transit, timetable, niche]
- [Botanical plate with callouts](https://ui-lab-weld.vercel.app/docs/niche-plate-callouts.md): A hand-built SVG botanical plate with numbered callouts; pointing at a number lights the part and shows a handwritten field note. [niche world, botanical, plate, annotation, callout, svg, herbarium, niche]
- [Hi-fi deck with real VU meters](https://ui-lab-weld.vercel.app/docs/niche-vu-deck.md): Analogue-style VU meters whose needles read a WebAudio AnalyserNode while a generated arpeggio plays, plus transport and level controls. [niche world, audio, vu meter, webaudio, hardware, hi-fi, niche]
- [Broadsheet columns and ticker](https://ui-lab-weld.vercel.app/docs/niche-broadsheet.md): Newspaper typography in pure CSS: double-rule masthead, justified hyphenated columns with a drop cap, a spanning pull quote and a market ticker. [niche world, newspaper, columns, drop cap, editorial, ticker, css, niche]
- [CRT scanlines and phosphor](https://ui-lab-weld.vercel.app/docs/niche-crt.md): The phosphor look in CSS only: scanlines, vignette, glow and curvature, with a flicker, and a keyboard-operable menu. [niche world, crt, scanlines, retro, arcade, phosphor, css, niche]
- [Museum wall label with audio guide](https://ui-lab-weld.vercel.app/docs/niche-museum-placard.md): A gallery placard set in proper hierarchy with an audio-guide keypad and a large-print toggle that scales the whole label. [niche world, museum, placard, label, audio guide, accessibility, niche]
- [Seed packet with planting calendar](https://ui-lab-weld.vercel.app/docs/niche-seed-packet.md): An illustrated packet that tilts to the pointer and tears open along a perforation, revealing a planting calendar table. [niche world, seed packet, packaging, calendar, 3d tilt, organic, niche]
- [Text-mode terminal with real prompt](https://ui-lab-weld.vercel.app/docs/niche-terminal-bbs.md): A boot sequence that prints line by line, then a working prompt with help, ls, cat, theme and clear commands. [niche world, terminal, bbs, ansi, command line, text mode, niche]
- [Tarot cards that turn over](https://ui-lab-weld.vercel.app/docs/niche-tarot.md): Three illustrated cards on a velvet table that flip in 3D to reveal a glyph and a reading; reshuffle deals a new draw. [niche world, tarot, cards, flip, 3d, mystic, niche]
- [Clinical medicine label](https://ui-lab-weld.vercel.app/docs/niche-clinical-label.md): A pharmacy label designed for clarity under risk: strict hierarchy, large tabular doses, a boxed warning with icon and word, and a tickable daily schedule. [niche world, clinical, medicine, label, health, clarity, niche]
- [Type specimen with live axes](https://ui-lab-weld.vercel.app/docs/niche-specimen.md): How a type foundry sells a typeface: a giant glyph, a character set, a size ladder and sliders for the variable axes (weight, optical size, softness, wonk). [niche world, type specimen, variable font, axes, typography, fraunces, niche]
- [Nautical chart with tide slider](https://ui-lab-weld.vercel.app/docs/niche-nautical-chart.md): Depth contours generated with marching squares, printed soundings and a tide slider that moves the water line. [niche world, nautical, chart, contours, marching squares, map, svg, niche]

## Modern CSS

- [Scroll-driven reveal, no JavaScript](https://ui-lab-weld.vercel.app/docs/css-scroll-reveal.md): Cards animate as they enter the scroll box using animation-timeline: view(), wrapped in @supports so unsupported browsers just show the cards. [modern css, scroll-driven, view timeline, animation, no javascript]
- [Native popover menu with entry animation](https://ui-lab-weld.vercel.app/docs/css-popover-starting.md): A menu using the Popover API and @starting-style: the browser handles open, close, light dismiss, top layer and focus return; CSS animates it. [modern css, popover, starting-style, menu, top layer]
- [Anchor-positioned tooltip](https://ui-lab-weld.vercel.app/docs/css-anchor-tooltip.md): A tooltip tied to its trigger with anchor positioning; the browser flips it to the other side when there is no room. [modern css, anchor positioning, tooltip, position-area]
- [Balanced text, growing textarea, :has()](https://ui-lab-weld.vercel.app/docs/css-type-niceties.md): text-wrap balance and pretty, a textarea that grows with field-sizing: content, and a field group styled from its input by :has(). [modern css, text-wrap, field-sizing, has selector, typography]
- [Blur-up placeholder from six colours](https://ui-lab-weld.vercel.app/docs/css-blur-up-placeholder.md): A soft placeholder built in CSS from six colours (eighteen bytes) that sits behind a photograph while it loads, then the image fades in. The idea behind blurhash, with no decoder. [modern css, placeholder, lqip, blur, images, performance]
- [Multi-stroke text (concentric outlines)](https://ui-lab-weld.vercel.app/docs/css-multi-stroke-text.md): A headline with two concentric outlines in different colours, made from rings of text-shadow, with sliders and colour pickers. Stays real text. [modern css, text, stroke, outline, text-shadow, typography]

## Data viz

- [Event timeline](https://ui-lab-weld.vercel.app/docs/timeline.md): Vertical rail with aligned mono timestamps and confidence-coloured dots. Rows reveal on scroll. [timeline, activity feed, history, events]
- [SVG charts (line, heatmap, radar)](https://ui-lab-weld.vercel.app/docs/charts.md): Area chart with crosshair + keyboard, contribution heatmap and radar chart, all hand-drawn SVG. [chart, line chart, area chart, heatmap, radar, svg]

## Recipes

- [Infinite marquee](https://ui-lab-weld.vercel.app/docs/marquee.md): Seamless looping strip with faded edges, pause on hover, any speed and direction. [marquee, ticker, logo wall, infinite scroll, loop]
- [Container-query card](https://ui-lab-weld.vercel.app/docs/container-query-card.md): A card that rearranges itself by the width of its container, not the screen: stacked when narrow, picture beside text when wide. [container queries, responsive, card, css]
- [Scroll-snap gallery](https://ui-lab-weld.vercel.app/docs/scroll-snap-gallery.md): A horizontal row that stops neatly on each slide using only scroll-snap, usable with touch, trackpad, scrollbar and arrow keys. [scroll snap, gallery, carousel, css]
- [Sticky table header and first column](https://ui-lab-weld.vercel.app/docs/sticky-table-header.md): A table whose header and first column stay in view while the body scrolls both ways, using position sticky on cells. [table, sticky, scroll, css, data]
- [Truncate without losing text](https://ui-lab-weld.vercel.app/docs/line-clamp.md): Line-clamp a paragraph to three lines with a Read more button, and ellipsis a single line, while keeping the full text in the page. [line clamp, truncate, ellipsis, css, text]
- [Focus rings people can see](https://ui-lab-weld.vercel.app/docs/focus-rings.md): Three focus-visible ring styles (offset outline, two-colour, gap and ring) that survive any background, with a dark-background example. [focus, focus-visible, keyboard, accessibility, css]
- [System, Light, Dark switch](https://ui-lab-weld.vercel.app/docs/color-scheme-toggle.md): A three-way colour-scheme choice where System follows the operating setting live, scoped to its own box so it does not change the page. [dark mode, theme, prefers-color-scheme, switch, settings]




---



# Start here: how to design a frontend that doesn't look generic

This is the operating procedure for any agent (or human) building a website or UI with UI Lab.
The patterns in this library are the *parts*. This document is the *judgement* that decides which parts, why, and how to
know the result is good. Follow it in order. Do not open an editor before step 3.

## Why output usually comes out "mid"

Four causes, in order of impact:

1. **No target.** "Make it premium" has no content. The model falls back to the average of everything it has seen:
   dark gradient, glass cards, Inter, fade-in-up on every section.
2. **No signature moment.** Premium sites are built around one idea (a product that spins, a number that counts the
   page's argument, a cursor that carries the brand). Everything else supports it. Without one, you get a pile of sections.
3. **No assets.** The impressive sites run on a model, a frame sequence, a video, real photography, an illustration
   system. Gradient blobs are what you get instead.
4. **No verification.** Scroll, 3D and motion code breaks in ways reading it never reveals. If the result was never
   rendered, scrolled and screenshotted, it is probably broken.

The procedure below attacks each of these.

## The procedure

### 1. Brief (5 lines, written down)

Write these before anything else. If you can't, ask the user one sharp question; do not guess a whole site.

- **Who** visits, **where** (laptop at a desk, phone on a train), **in what mood**.
- **Mode** (what success looks like for the visitor):
  - *Persuade*: they decide and act (landing, product, campaign). Design is the product.
  - *Operate*: they finish a task (app, dashboard, admin). Scannability and consistency beat expression.
  - *Read*: they understand something (docs, article). Structure for comprehension first.
  - *Experience*: they are inside the work (portfolio, showcase). The artifact leads, the UI recedes.
- **The one memorable moment** (Persuade/Experience). One sentence. "The can spins while features change colour."
- **Real content.** Actual copy, numbers, names. Invent plausible ones if missing and flag them as placeholders.
- **Constraints**: stack, deadline, devices, brand assets, things the user already said they hate.

### 2. Inspiration (real, not remembered)

Before that, skim [`reference-sites.md`](reference-sites.md): sixty-eight teardowns (30 world-class sites, 20 vibe-coded UIs, 12 recent award winners, 6 community picks) with the measured facts and a **Signature moves** pattern for each technique we took; pick 2-3 whose signature moment matches your content.

Then start with UI Lab's own five finished sites (category **Sites**: `site-solar`, `site-mare`, `site-lattice`, `site-hotmess`, `site-abyss`; open each full screen from its pattern page): each is a different world with a different signature moment, so you can see what "committed" looks like before studying outside references.

Never design from memory of what "good" looks like. Go look. See [inspiration.md](inspiration.md) for the method.
Minimum: three references, one teardown each. Output is a short note per reference:

- the single idea that makes it work
- what is technically happening (run `tools/site-stack.mjs <url>`; open DevTools; scroll it slowly)
- type, palette logic, motion pacing
- what you will take, and what you will deliberately not

Then **synthesize**: the move from A, the palette logic from B, the type attitude from C, all rebuilt around *this*
product's content. Never copy code, copy text, brand assets or exact layouts. Re-implement the technique.

### 3. Commit to a world

Pick or invent a direction from [worlds.md](worlds.md) (general) or [niche-worlds.md](niche-worlds.md) (physical and editorial forms; brief help in [briefs.md](briefs.md)) and write a **direction card** (6 lines):

```
Name:        e.g. "Solar" - saturated flat colour that changes per product
Metaphor:    what it feels like, in one image
Palette:     5 tokens max, with roles (bg, fg, accent, support, danger)
Type:        display face + body face, both self-hosted (Fontsource), never a system fallback as the voice
Motion:      one language (e.g. scrubbed, weighty, exponential ease-out) used everywhere
Signature:   the one moment, and what it needs (asset, library)
Refuse:      3 things this world must never contain
```

Rules: the brief wins over taste. When torn between "refined" and "committed", commit. One unexpected tension
(a serif in a tech product, a hard shadow in a soft world) beats five safe choices.

### 4. Assets before code

The signature moment dictates the asset. Decide *now*:

| Moment | Asset | Fallback |
|---|---|---|
| Spinning product | GLB model, or a rendered frame sequence | Build it procedurally in three.js (see `site-solar`) |
| Cinematic hero | Short looped video (< 4 MB, muted, poster frame) | Shader background from the Backgrounds category |
| Character / mascot | Rigged GLB (CC0: Quaternius, Khronos samples) | Pattern from "3D Motion" |
| Editorial feel | Real photography | Ask the user; never grey placeholder boxes in the final |
| Data story | The real numbers | Plausible, labelled as sample |

Do not ship decorative stand-ins (blurred orbs, mesh gradients) *as* the signature. Atmosphere is fine; the hero is not atmosphere.

### 5. Build a vertical slice first

Make the signature moment work end to end (asset, motion, scroll, responsive) **before** building the other sections.
If it doesn't work, the rest doesn't matter. Then build outward. Pull parts from UI Lab: search
[`/patterns.json`](../patterns.json) by `tags` and `category`, fetch `/docs/<slug>.md`, copy `tokens.css` first.

Architecture defaults:

- Vite + React + TypeScript. Tailwind only if the project already has it; plain CSS with custom properties is fine.
- Scroll-driven sites: **GSAP ScrollTrigger + Lenis**, one master timeline. See [scroll-3d-recipe.md](scroll-3d-recipe.md).
- 3D: **React Three Fiber + drei**. Mutable state object read in `useFrame`; never `setState` per scroll tick.
- Fonts: Fontsource packages, self-hosted. Preload nothing exotic. Wait for `document.fonts.load()` before drawing canvas text.

### 6. Verify (bounded, batched, honest)

See [verify.md](verify.md). In short: build once fully, then one batched inspection round (desktop + mobile, scrolled to every
section, console clean, reduced-motion on), fix everything it shows in one batch, one confirming round, stop.
Report what was and was not tested. Never say "works" for something you did not render.

### 7. Handoff

State the URL to open, what is verified, what is untested (mobile? real GPU? Safari?), what is placeholder, and the
two or three things you would do next. Short.

## The craft floor (non-negotiable mechanics)

- Contrast: body >= 4.5:1, large >= 3:1. On coloured surfaces tint secondary text from the hue, not grey.
- Type: body 65-75ch; display sizes clamp(); tight tracking only on display; balanced headings; real copy at every width.
- Spacing: tight inside groups, generous between; more above a heading than below.
- Motion: one authored moment plus consistent small ones. Exponential ease-out from a visible default. Honour `prefers-reduced-motion`.
- States: hover, focus-visible, disabled, loading, empty, error. Keyboard reaches everything.
- Touch targets >= 44px. `100svh` not `100vh`. No horizontal scroll at 375px.
- Browser surfaces are part of the design: `::selection`, scrollbar, caret, focus ring, `tabular-nums` on data.
- Copy: product's own voice. Buttons name their action. Errors name problem and fix.

## Reflexes to refuse (unless the brief earns them)

- Grids of identical icon + heading + text cards as the page structure. Nested cards, always.
- The hero-metric block (big number, small label, three of them in a row) as filler.
- Eyebrow/kicker labels above headings. Numbered sections (01/02/03) that carry no information.
- Gradient text. Glass/blur as decoration. Coloured `border-left` accents. Hard offset shadows outside a neo-brutalist world.
- Emoji or unicode glyphs as icons. Draw SVG or use one real icon set at one stroke weight.
- A system font as the display voice. `Inter` everywhere by default.
- Fade-up-on-scroll applied identically to every block.
- Light vs dark chosen by category ("tech = dark"). Choose from the use scene.

## How to think when the brief is thin

Ask, in this order, and write one line for each:

1. What is this page's *argument*? (What should the visitor believe after 20 seconds?)
2. What is the most *specific* thing about this product that no competitor could claim? Build the page around it.
3. What would this look like if it could **only** exist for this product? Delete anything that fits any product.
4. Where does the visitor's attention need to go first, second, third? Make size, contrast and motion agree with that order.
5. What is the one thing I'd be embarrassed to ship? Fix that before polishing anything else.


# Accessibility: the short version that actually gets applied

Accessible design is not a separate phase. It is a handful of habits that, applied while building, cost almost nothing and
are expensive to retrofit. This page is the checklist UI Lab itself is audited against (axe-core run over every pattern page,
plus keyboard and reduced-motion checks).

## The ten habits

1. **Use the real element.** A `<button>` for actions, `<a href>` for navigation, `<label for>` for fields, `<table>` with `<th scope>` for data. Native elements bring keyboard, focus and screen-reader behaviour for free. A `div` with `role="button"` needs all of it rebuilt by hand.
2. **Everything reachable by keyboard.** Tab through the page. Every control must be reachable, in a sensible order, with a **visible** focus style (never `outline: none` without a replacement).
3. **Contrast.** Body text 4.5:1 against its background; large text and UI borders 3:1. Check on the real colours, including text on images and on hover states.
4. **Touch targets 44px.** Small icons get padding, not just size.
5. **Do not rely on colour alone.** Up/down, error/ok and selected states also use a sign, an icon, a word or a shape.
6. **Respect reduced motion.** Under `prefers-reduced-motion: reduce`, remove travelling motion and parallax; keep state changes instant. Never put essential content only inside an animation.
7. **Name everything.** Icon-only buttons need `aria-label`. Landmarks (`nav`, `main`) get labels when there is more than one of a kind.
8. **Headings in order.** One `h1`, then `h2`, `h3` without skipping levels. Headings describe the structure; do not choose them for their size.
9. **Say what changed.** Dynamic updates (form errors, "3 results", a toast) go in an `aria-live` region, or move focus to the new content.
10. **Zoom and reflow.** The page works at 200% zoom and at 375px wide with no horizontal scrolling.

## For motion-heavy pages

- The content should be readable with the animation switched off, in the DOM, in order.
- Scroll-jacking (taking over the wheel) must leave keyboard, touch and scrollbar scrolling intact.
- Autoplaying sound is never acceptable; start audio only on a user gesture, at a low level.
- Flashing: nothing flashes more than three times a second.

## Testing in five minutes

1. Put the mouse away and tab through the whole page.
2. Turn on reduced motion in the operating system and reload.
3. Zoom to 200%, then resize to 375px.
4. Run axe-core (the browser extension, or `axe.run()` in the console) and fix everything marked serious or critical.
5. Turn on a screen reader (VoiceOver, NVDA) and listen to the first screen and one form.

## Where this shows up in UI Lab

- Every pattern has an **Accessibility** note saying how it handles keyboard, screen readers and reduced motion.
- The home page has a skip link, labelled landmarks, a search field with a visible label for assistive tech, and a plain-language explanation of each category.
- `playbook/verify.md` lists the bugs we have already hit and fixed.

## Motion, in more detail (WCAG 2.2)

- **Pause, Stop, Hide (2.2.2, level A).** Anything that moves, blinks or scrolls on its own for more than five seconds needs a way to pause or stop it: carousels, tickers, background video.
- **Three flashes (2.3.1, level A).** Nothing flashes more than three times in one second.
- **Animation from interactions (2.3.3, level AAA).** Motion that your own scrolling or clicking triggers (parallax, big slide-ins) must be switchable off unless it is essential. The standard way: wrap travelling motion in `@media (prefers-reduced-motion: no-preference)`, or check `matchMedia('(prefers-reduced-motion: reduce)')` in script and replace the motion with an instant change.
- **What to keep.** Reduced motion does not mean no feedback. A spinner or a focus ring can stay, at lower amplitude. What goes: parallax, large translations, auto-playing video, scroll-triggered effects that fire all the way down the page.
- **A blanket "set every duration to zero" rule is blunt.** It can break animations that carry meaning (a progress bar). Prefer turning off the decorative ones by name.
- **Test it.** Switch on Reduce Motion in the operating system, reload, and confirm nothing travels. UI Lab's own patterns are written to that standard, and each pattern's accessibility note says how.


# Briefs: how to ask, and how to write the five lines

A brief is five lines. Writing it is most of the work, because every later decision needs something to be measured against.

## The five lines

1. **Who, where, mood.** "Commuters on a phone, mid-journey, impatient." Not "users".
2. **Mode.** Persuade, Operate, Read or Experience. Pick one; it decides how much expression the surface can afford.
3. **The one memorable moment.** One sentence. "A board that changes while you watch."
4. **Real content.** The words, numbers and images that will be there. If they do not exist yet, say so and write honest placeholders.
5. **Constraints.** Stack, devices, languages, deadline, things already decided, things forbidden.

## One sharp question

If a line cannot be written, ask exactly one question that unblocks it. Good: "Is this for people deciding whether to buy, or people already using it?" Bad: "What do you want?"

## Examples

**Night-train company.** Travellers on a laptop planning a trip, calm but excited. Persuade. A departures board that updates as you hover routes. Eleven real routes and prices. Next.js, no CMS. Route: world 9, proof `site-departures`.

**Finance newsletter.** Subscribers reading on the morning commute. Read. Reading is the interface. One essay, six market lines, three letters. Static and fast. Route: world 12, proof `site-ledger`.

**Hi-fi maker.** Enthusiasts at a desk with good headphones. Persuade. The deck plays, and you can switch its tape stage in and out. Specs, three finishes, a price. Route: world 11, proof `site-tape`.

## Smells that mean the brief is not ready

- "Make it premium" with no content. Ask for the words.
- Two worlds named at once. Choose one.
- A hero that needs an asset nobody has. Name the cheapest honest substitute and ask.


# Glossary: design and web words, in plain language

UI Lab uses a few terms that are common among designers and developers but unfamiliar elsewhere. Here they are, with no jargon.

**Pattern.** One reusable piece of interface: a button, a menu, a scroll effect, a whole page section. Every pattern in UI Lab runs live and shows its code.

**World.** A complete, consistent style for a site: its colours, typefaces, movement and what it refuses to do. "Editorial quiet luxury" and "departures board" are worlds. Choosing one is the single most important design decision.

**Signature move.** One striking technique that makes a site memorable, taken from a site we studied and rebuilt in our own code.

**Mode.** What a visitor is trying to do: *Persuade* (decide and act), *Operate* (finish a task), *Read* (understand something), *Experience* (be inside the work).

**Hero.** The first big section of a page, what you see before scrolling.

**Scroll-driven.** Something that changes as you scroll: a picture that turns, a line that draws, a heading that comes into focus.

**Parallax.** Layers that move at different speeds as you scroll, giving a sense of depth.

**Reduced motion.** A setting in your device that asks websites to tone down movement. Good sites honour it.

**Accessible.** Usable by everyone: people who use only a keyboard, a screen reader, a magnifier, or who have low vision, colour blindness or motion sensitivity.

**Screen reader.** Software that reads a page aloud and lets a person navigate it without seeing it.

**Focus (keyboard focus).** Which control is currently selected when you press Tab. It must always be visible.

**Contrast.** The difference in brightness between text and its background. Too little makes text hard to read.

**Token (design token).** A named design value such as a colour or a spacing step, defined once and reused everywhere, so a change in one place changes the whole site.

**WebGL / 3D.** The browser's way of drawing three-dimensional scenes on the graphics chip. Impressive, but heavy and harder to make accessible.

**Fontsource.** A way to include fonts in a project so they load from your own server rather than a third party.

**Teardown.** Taking a finished site apart to understand how it was built: its fonts, colours, libraries and the one idea it hangs on. UI Lab keeps fifty-plus of them.

**Vibe-coded.** A site or app generated mainly by prompting an AI tool. UI Lab studies the popular ones to see what works.

**Playbook.** The written procedure for designing well: the brief, inspiration, direction, build, and verification.

**Verify.** Actually running the thing and checking it: loading it fresh, scrolling every section, trying a phone width, using the keyboard, reading the console. Reading code is not verification.


# Inspiration: how to take it without copying it

Good designers don't "have taste" in the abstract. They look at a lot of real work, name *why* it works, and recombine.
This is that process, written so an agent can run it.

## Where to look

Start with the curated list: [`/resources.md`](../resources.md) (galleries, award-level studios, Codrops demo repos, libraries).
Pick by the brief's **mode**, not by what is fashionable:

- Persuade / product: Awwwards, Godly, Lapa, Land-book, brand microsites for physical products (drinks, shoes, audio, cars).
- Operate / app: Linear, Vercel, Stripe, Raycast, Mercury, Arc. Study density, states and empty screens.
- Read: Stripe docs, Tailwind docs, Are.na, long-form editorial (The Pudding, NYT interactive).
- Experience: Active Theory, Locomotive, Resn, Bruno Simon-style portfolios, Codrops tutorials.

Search with the **content**, not "cool website": "beverage product scroll 3D", "architecture studio portfolio", "fintech dashboard dark".

## The teardown (one per reference, 10 minutes)

Open it in the browser and do all of these, in this order:

1. **First viewport, no scroll.** What is the largest thing? What is the second? What is the one verb the page wants?
2. **Scroll slowly through the whole page.** Note every moment where something *changes*: what triggers it, how long it lasts, what it replaces.
3. **Identify the signature moment.** One sentence. If you can't, it has none (not a good reference).
4. **Find the stack.** Run `node tools/site-stack.mjs <url>` (detects GSAP, ScrollTrigger, Lenis, three.js, Framer Motion, Locomotive,
   Rive, Lottie, Spline, WebGL canvas). In DevTools: Network (is the hero a video, a GLB, an image sequence?), Elements
   (is the sticky section `position: sticky` or a pin spacer?), Performance (is it scroll-linked or time-based?).
5. **Type and colour.** Read computed font families and sizes of the display and body. Sample 4-5 colours and decide the *role* of each.
6. **Pacing.** Time the entrances. Is easing exponential-out? Are durations ~0.6-1.2 s? Is there a stagger? Is there *stillness* between moments?
7. **What it does not do.** Often the lesson. (No nav clutter, no cards, no stock photos.)

Write the result as five lines:

```
Reference: <url>
Idea:      one sentence
Technique: stack + how the signature moment is built
Palette/Type: roles and faces
Take / Leave: what I will adapt, what I will not
```

## Synthesis (this is the creative step)

Do not average the references. **Cross them:**

- *Structure from one* (e.g. pinned scroll stages), *palette logic from another* (one flat colour per variant),
  *type attitude from a third* (condensed display in huge scale behind the object).
- Ask: what does the brief have that none of the references have? Make **that** the centre.
- Apply the **tension test**: name one deliberate unexpected pairing. If there is none, the result will be forgettable.
- Apply the **swap test**: replace the brand name with a competitor's. If nothing needs to change, the design is generic. Redo it.

## What is allowed and what is not

Allowed: re-implementing a *technique* (pinned scroll, magnetic cursor, text mask reveals, palette tween) in your own code, with your own
content, assets, layout and palette.

Not allowed: copying source, copy text, brand assets, images, 3D models without a licence, or reproducing a site's distinctive layout 1:1.
Teardowns in `RESOURCES.md` describe techniques only. Licences for models: prefer CC0 (Quaternius, Khronos samples, Poly Pizza).

## Using UI Lab as the parts bin

After the direction card exists, look things up instead of improvising:

1. `GET /patterns.json`, filter by `category` and `tags` that match the moment you need (`scroll`, `3d`, `text`, `cursor`, `shader`, `marquee`...).
2. `GET /docs/<slug>.md`: metadata, "when to use", accessibility notes and the full source.
3. Adapt to the world's tokens. Keep the pattern's `prefers-reduced-motion` handling.
4. Whole-site starting points are the **Sites** category (`site-solar`, `site-mare`, `site-lattice`, `site-hotmess`, `site-abyss`); `/docs/site-<name>.md` has every file.

## Building your own taste log

When you finish a project, add what you learned to this playbook (a new world, a bug in the catalogue, a technique
in a recipe). The library only gets better if each project leaves it a little smarter than it found it.

## Teardown field notes (from the fifty-site study, 2026-10-14)

Things that cost time and how to avoid them:

- **Measure, don't squint.** A 30-line probe run in the page (computed `font-family` and size of the visible text, the most common background colours, counts of `canvas`, `video`, `position: sticky`, `backdrop-filter`, `mask-image`, `clip-path`, `mix-blend-mode`, running `animation-name`) gave better facts in seconds than screenshots did. Keep the probe; paste it into each page.
- **The stack scan can lie.** `tools/site-stack.mjs` matches words, so a site that merely contains the string "rapier" or "barba" gets flagged. Treat its output as a lead and confirm in DevTools (for Lenis: look for the `lenis` class on `<html>`).
- **Canvas-only and WebGL2-only sites hide from the DOM.** Bruno Simon and Resn have almost no DOM text at load; Igloo shows its own "WebGL2 is not supported" notice in the built-in browser pane. Record those as *partial* instead of guessing what the scene looks like.
- **Heavy WebGL pages time out screenshots in a software-rendered pane.** Use the computed-style probe instead, and take a screenshot only for light pages.
- **Bot walls.** Some sites (Locomotive, Aesop) answer with a Cloudflare security check. Do not try to bypass it; swap in another reference and note why.
- **Template galleries show their popularity.** v0's template pages list two counts per template; sorting by them gives an objective "most used" list for vibe-coded UIs. Previews often need a sign-in, so describe from the listing and mark it *listing*.
- **Don't let the tool think for you.** The most useful lines were the plain ones: "one font size on the whole site" (Are.na, Emil Kowalski), "720px headings" (Rauno), "the hero is the class list" (Tailwind).


# Niche worlds: when the product has a physical or editorial home

`worlds.md` holds the eight general directions. These sixteen are narrower. Each one borrows the look and the logic of a
real object or printed form, and it only works when the brief genuinely lives there: a departures board for a rail
company, a clinical label for a medicine. Use one when the content already belongs to it. A skin applied to unrelated
content is a gimmick, and the swap test will catch it.

Every card has the same shape as `worlds.md`. **Proof** names the pattern (and, where one exists, the whole site) that
shows the world working. Open it at `#/<slug>` or `#/live/<slug>` before you commit.

**A niche world is a vocabulary, not a template.** Take the logic (what the object does, how it is set, how it
communicates), then rebuild it for the content in front of you.

---

## 9. Departures Board
**Proof:** site `site-departures`, pattern `niche-split-flap`.
**Use for:** rail, ferry, airline, event schedules, anything with times, places and states.
**Metaphor:** a station hall at dusk; the board is the voice of the building.
**Palette:** night blue-black `#080b14`, board brown-black `#16130e`, flap cream `#f1e8c9`, one signal yellow `#ffd23f`.
**Type:** a condensed sign face for headings (Barlow Condensed, Oswald), a monospace for the board (JetBrains Mono, IBM Plex Mono).
**Motion:** cells cycle forward through the alphabet to a target, 60 ms per step; nothing else on the page moves like that.
**Signature:** a board whose rows change status while you watch, with a real table behind it for assistive tech.
**Needs:** real route/timetable data; the board's credibility is in the data.
**Refuse:** a board used as a decoration, fake urgency colours, auto-playing sound, flap animation under reduced motion.

## 10. Botanical Plate
**Proof:** site `site-herbarium`, pattern `niche-plate-callouts`.
**Use for:** nature, craft, archive, museum shop, slow commerce, field guides.
**Metaphor:** a pressed specimen mounted on cotton paper with a numbered key.
**Palette:** paper `#efe4cc`, ink `#2a2418`, leaf green `#4f7a38`, one printer's red `#a8402a`; the specimen is the only saturated thing.
**Type:** a soft old-style serif (Fraunces), small caps mono for labels (JetBrains Mono), a handwriting face (Caveat) for annotation only.
**Motion:** slow reveals; the drawing responds to input (pointer, slider), nothing loops.
**Signature:** an illustration driven by one number: press the plant and it dries, folds and changes colour.
**Needs:** hand-built SVG or real scans. Stock vectors read as clip art.
**Refuse:** emoji flowers, handwriting for body text, grunge overlays, green-on-green.

## 11. Hi-Fi Deck
**Proof:** site `site-tape`, pattern `niche-vu-deck`.
**Use for:** audio and instrument brands, hardware, anything whose pitch is how it sounds or feels.
**Metaphor:** the front panel of a well-made machine: knurled, labelled, slightly warm.
**Palette:** panel charcoal `#2a2822`, cream legends `#e8d9a6`, one amber `#ffb23f`, a red only for record and the hot end of meters.
**Type:** a stencil-feel condensed face for legends (Oswald), a monospace for readouts (IBM Plex Mono).
**Motion:** needles ease, keys travel 4px, reels turn; every motion is mechanical and linked to state.
**Signature:** the product is the page: a working control (play, tone, tape stage) that you can hear or see change.
**Needs:** the sound or behaviour itself. Generate it in WebAudio rather than shipping files.
**Refuse:** autoplay, loud defaults, glossy chrome, decorative knobs that do nothing.

## 12. Broadsheet
**Proof:** site `site-ledger`, pattern `niche-broadsheet`.
**Use for:** newsletters, journals, finance and policy writing, long-form, reference products. This is a Read world.
**Metaphor:** a newspaper that respects your attention: rules, columns, a clear order of importance.
**Palette:** newsprint `#f3eee0`, ink `#1a1712`, one red `#b3261e` for kickers and signals; no grey UI chrome.
**Type:** a text serif with an optical-size axis (Newsreader), a neutral grotesk for data and labels (Libre Franklin).
**Motion:** almost none. A reading-progress rule is the one moving part.
**Signature:** reading is the interface: justified hyphenated columns, marginal sidenotes, text-size control, sign-and-arrow market table.
**Needs:** real copy; a broadsheet with lorem ipsum is just a grid.
**Refuse:** card grids for articles, colour-only up/down, centred body text, a hero image above the headline.

## 13. CRT Terminal
**Proof:** site `site-arcade`, pattern `niche-crt`.
**Use for:** developer tools with character, retro games, security and hacking themes, fiction.
**Metaphor:** a phosphor monitor in a dark room.
**Palette:** near-black `#050805`, phosphor green `#3dff7a` or amber `#ffb000`, one dim shade of the same hue for secondary text.
**Type:** a pixel or bitmap-style mono (VT323, IBM Plex Mono at small size); one family only.
**Motion:** a faint flicker and scan drift, disabled for reduced motion; typing is instant under reduced motion.
**Signature:** the effect is cosmetic but the content stays readable and operable by keyboard.
**Needs:** nothing, it is CSS. Do not use it for content people must read at length.
**Refuse:** barrel distortion on text, rainbow glitch, flicker above three flashes a second.

## 14. Museum Placard
**Proof:** site `site-salt-road`, pattern `niche-museum-placard`.
**Use for:** galleries, exhibitions, heritage sites, cultural institutions, anywhere a thing needs a caption.
**Metaphor:** the label beside the object. The object is the page; the label is quiet.
**Palette:** gallery white `#f6f4ee`, charcoal text `#1f1d1a`, one muted institutional colour for rules.
**Type:** a restrained serif or humanist sans; strict hierarchy: title, maker and dates, medium, description, credit line.
**Motion:** none beyond the large-print toggle and audio-guide keypad.
**Signature:** the hierarchy itself, set exactly as a curator would, with a large-print option that scales the whole label.
**Needs:** real accession data. Invented dates and artists undermine the form.
**Refuse:** card shadows, icons, bright colour, small grey text.

## 15. Seed Packet
**Proof:** pattern `niche-seed-packet`.
**Use for:** gardening, grocery, food, seasonal and planting products, anything with a calendar of when.
**Metaphor:** a printed packet with a window, a hand-lettered name and instructions on the back.
**Palette:** kraft `#c9a66b`, packet cream, one saturated illustration colour per variety.
**Type:** a friendly slab or script for the name, a plain serif for instructions.
**Motion:** tilt to the pointer, one tear along the perforation.
**Signature:** the packet opens to a planting-calendar table.
**Needs:** an illustration per variety.
**Refuse:** cartoon vegetables, gradient backgrounds, a table without headers.

## 16. Terminal BBS
**Proof:** site `site-pebble`, pattern `niche-terminal-bbs`.
**Use for:** portfolios and developer sites that want a conversational, text-first interface.
**Metaphor:** a bulletin-board system: you log in, you type, it answers.
**Palette:** one dark background, one light foreground, one highlight; no gradients.
**Type:** a monospace only.
**Motion:** a boot sequence that can be skipped with any key; typing speed capped.
**Signature:** a working prompt (help, ls, cat, theme, clear) backed by real content, with a plain-link fallback.
**Needs:** the content must also exist as normal links for people who do not type.
**Refuse:** a fake terminal that cannot be used, a mandatory boot sequence, no visible focus.

## 17. Tarot
**Proof:** pattern `niche-tarot`.
**Use for:** divination, games, wellbeing, storytelling products, anything that deals out a small set of outcomes.
**Metaphor:** a velvet table and a deck: shuffle, deal, turn.
**Palette:** deep velvet, gold line `#c9a24a`, parchment faces; one card back design.
**Type:** a display serif for names, a small caps sans for labels.
**Motion:** a 3D card flip, one at a time, with reduced-motion fallback to an instant reveal.
**Signature:** every card has meaning and a reading; reshuffle deals a different set.
**Needs:** illustrated cards and real copy for each.
**Refuse:** mysticism clichés layered on a SaaS page, random text, flips that cannot be reached by keyboard.

## 18. Clinical Label
**Proof:** pattern `niche-clinical-label`.
**Use for:** medicine, health, safety, compliance: any place a misread costs something.
**Metaphor:** the label on a pharmacy bottle, optimised for clarity under risk.
**Palette:** white, black, one warning colour with an icon and a word, never colour alone.
**Type:** a highly legible sans (Libre Franklin, Atkinson Hyperlegible) with tabular numbers for doses.
**Motion:** none.
**Signature:** a strict hierarchy: drug, strength, dose, warning, schedule, with a tickable daily schedule.
**Needs:** reviewed content. Never invent doses or warnings.
**Refuse:** decoration, brand colour on warnings, small print, light grey text.

## 19. Type Specimen
**Proof:** site `site-specimen`, pattern `niche-specimen`.
**Use for:** type foundries, design tools, anything that sells a typeface or a system.
**Metaphor:** a foundry's own showing: giant glyph, character set, size ladder, axes.
**Palette:** white or black, one colour for emphasis; the typeface is the colour.
**Type:** the typeface being shown, and nothing else beyond a neutral label face.
**Motion:** live sliders for the variable axes; nothing decorative.
**Signature:** you can drag the axes and see the real letterforms change.
**Needs:** a variable font with real axes.
**Refuse:** lorem ipsum, centred layouts, a specimen with one weight.

## 20. Nautical Chart
**Proof:** site `site-tidewater`, pattern `niche-nautical-chart`.
**Use for:** maps, data with depth or elevation, travel, science, anything with a continuous surface.
**Metaphor:** an Admiralty chart: contours, soundings, a compass rose.
**Palette:** chart paper `#efe9d6`, sea blues in steps, one magenta for hazards and labels.
**Type:** a small serif italic for soundings and place names, a plain sans for the legend.
**Motion:** the water line moves with a tide slider; contours are redrawn, not faded.
**Signature:** a generated contour field (marching squares) that responds to a control.
**Needs:** real or generated elevation data.
**Refuse:** a stock map tile with a coloured filter, rainbow gradients for depth.

## 21. Plain Text Sheet
**Proof:** site `site-plain-forecast`.
**Use for:** forecasts, status pages, schedules, scores, prices, logs: anything dense that people check quickly and often. An Operate world.
**Metaphor:** a well-kept text file with a few real controls.
**Palette:** paper and ink, one link colour, one highlight for "now"; light and dark from the system setting.
**Type:** one monospace family at one or two sizes (IBM Plex Mono, JetBrains Mono).
**Motion:** none. State changes are instant and announced as text.
**Signature:** charts drawn with characters (shading blocks, asterisks, a "now" marker) with a real table next to each one.
**Needs:** real, current data, and the discipline to leave things out.
**Refuse:** a text chart without a table, colour as the only signal, images "for warmth", decorative boxes around data.

## 22. Blueprint
**Proof:** site `site-blueprint`, move `move-drafting-rules`.
**Use for:** engineering, architecture, construction, surveying, workshops, anything whose product is a drawing or a calculation.
**Metaphor:** a drawing sheet pinned to the wall: title block, grid, dimension lines.
**Palette:** blueprint blue `#0d2b52`, drafting white `#e9f4ff`, cyan for dimensions `#7fd4ff`, one amber `#ffd37a` for the thing to act on.
**Type:** a condensed drafting face for titles (Barlow Condensed), a monospace for notes and numbers (IBM Plex Mono).
**Motion:** lines draw themselves once on arrival; diagrams respond to input; nothing loops.
**Signature:** a working diagram: change the span and the beam bends, with the sums written beside it.
**Needs:** a real formula or process behind the picture, and a label saying how far to trust it.
**Refuse:** blue as decoration without a grid, fake dimensions, a calculator that does not state its limits, thin light-blue text on dark blue below 4.5:1.

## 23. Thermal Receipt
**Proof:** site `site-till-roll`.
**Use for:** order, checkout, ticket, booking and confirmation pages; shops and services that want their pricing to feel honest; anything with line items and a total.
**Metaphor:** a till receipt still warm from the printer.
**Palette:** thermal paper `#f7f4ea` on a near-black counter `#1c1b19`, one red stamp `#c4311d`, one warm yellow `#ffd166` for the action.
**Type:** a single monospace (Space Mono) at two sizes; right-aligned figures in tabular columns.
**Motion:** a new line steps in as if fed from the printer, once, and not at all under reduced motion.
**Signature:** the receipt is the form: change the order and the printed lines, the total and the barcode change with it.
**Needs:** real prices and rules (what is included, what is not), written down plainly.
**Refuse:** a receipt that hides a fee, a fake barcode implied to be scannable, text that wraps out of its column, a skeuomorphic crinkle texture.

## 24. Explorable Explainer
**Proof:** site `site-curves`.
**Use for:** teaching, documentation, onboarding, science and data communication, any page whose job is to make someone understand how something works. A Read world.
**Metaphor:** a good textbook whose figures you can pick up.
**Palette:** warm paper `#fbf8f1`, ink, one working blue for what you control and one amber for what the system computes.
**Type:** a readable serif for explanation (Newsreader), a bold sans for headings and controls (Hanken Grotesk), a monospace for live numbers and code.
**Motion:** only what you cause. Figures respond to dragging and sliders instantly; nothing plays on its own.
**Signature:** the figure is the argument: each passage sits beside something you can move, and the formula or code beneath it updates as you do.
**Needs:** a real model behind the figure (the same maths the thing uses), and a keyboard path to every draggable part.
**Refuse:** a figure you can only watch, drag handles without arrow-key support, decorative animation, jargon introduced before the picture that needs it.

---

## Choosing between a niche world and a general one

| Brief smells like... | Start with |
|---|---|
| timetable, schedule, status, "live" | 9 Departures Board |
| specimens, plants, archive, field notes | 10 Botanical Plate |
| sound, instruments, hardware | 11 Hi-Fi Deck |
| newsletter, journal, essay, finance | 12 Broadsheet |
| retro, hacker, fiction | 13 CRT Terminal or 16 Terminal BBS |
| exhibition, collection, heritage | 14 Museum Placard |
| seasonal, grow, cook, calendar | 15 Seed Packet |
| draw, reading, game of chance | 17 Tarot |
| health, dose, safety | 18 Clinical Label |
| type, design system | 19 Type Specimen |
| depth, terrain, travel | 20 Nautical Chart |
| status, forecast, scores, prices | 21 Plain Text Sheet |
| engineering, drawings, calculations | 22 Blueprint |
| order, checkout, booking, line items | 23 Thermal Receipt |
| explain, teach, document, "how does it work" | 24 Explorable Explainer |

If nothing here fits, do not force it: go back to `worlds.md` or invent a world. Add a niche world by copying the card
shape, building something that proves it, and registering the proof under category `Niche worlds` or `Sites`.


# Prompts: what to say to your AI assistant

You do not need to know design vocabulary to get a good result. You need to say who the site is for, what it is about and what it should make people do, and then point the assistant at UI Lab so it follows the procedure instead of improvising. Copy a prompt, replace the brackets, and send it.

## The short version

> Use UI Lab (https://ui-lab-weld.vercel.app/for-claude.md). Build [what] for [who]. The one thing it must do well is [moment]. Here is the real content: [paste or attach]. Check it at desktop and phone size before you tell me it is done.

## Common requests

**A site for a business or person**
> Use UI Lab. Build a one-page site for [business] in [place]. Visitors are [who] on [phone or laptop] and I want them to [call, book, buy, read]. Pick the design world that fits the brief from the router, tell me which one and why, then build it with my real text and photos: [paste]. No stock photos, no placeholder text.

**A portfolio**
> Use UI Lab. I am a [role]. Build my portfolio. The most important thing is that people can see [three projects] quickly. Use the portfolio-style worlds from the router, make it keyboard-friendly, and include a plain version of the content for anyone who does not want the effects.

**A product page**
> Use UI Lab. We sell [product]. Build a page where the product is the hero and one interaction explains why it is good: [interaction]. Use a Persuade-mode world, then check that it works with the keyboard and with reduced motion switched on.

**A tool or dashboard**
> Use UI Lab. Build a screen where [who] can [task]. This is an Operate-mode page: scanability and clear states matter more than decoration. Show empty, loading and error states, and say in a sentence whether each result is good or bad (do not rely on colour alone).

**Fix what I have**
> Use UI Lab. Here is my site: [URL or folder]. Do a critique first (what is generic, what is inaccessible, what breaks at 375px), show me the list, then fix the top five. Do not change my text. Verify by rendering, not by reading the code.

## Ask for these, always

- "Tell me which world you chose and why, and what you refused to do."
- "Verify it: fresh load, console clean, desktop and 375px, keyboard, reduced motion. Tell me what you could not test."
- "Do not copy anything from the reference sites; rebuild techniques in your own code."
- "Plain commit messages, and do not push until I say so."

## If the result feels generic

Say so plainly and add one fact: "It looks like every other landing page. The one thing that is different about us is [x]. Make the page about that." Specific facts beat adjectives.


# Reference sites: what fifty good (and popular) UIs have in common

Fifty teardowns live at [`/references.md`](../references.md) (also `/references.json` and the **References** page of the app):
30 world-class websites and 20 vibe-coded UIs, each with its signature moment, how it is built, what we measured, what we take and what we leave.
Every technique we took is rebuilt in our own code as a pattern in the **Signature moves** category (39 of them), so you can open the
teardown, then the working demo, then the source.

This page is the synthesis: what the fifty teach, and how to use them without copying.
Measured 2026-10-14 at 1440x900 with computed styles and the library scan in `tools/site-stack.mjs`. Where we could not see
a site properly (WebGL2-only, canvas-only, bot-challenged) the entry says so.

## Part 1: the thirty

### Craft is not stack
Technique count tells you almost nothing. Emil Kowalski's site has zero animations and a 2,480px page; Linear ships zero canvases and zero videos;
Igloo and Bruno Simon are a single WebGL canvas each; Immersive Garden runs twelve canvases. All are "premium". What they share is one decision
carried through everything, not a heavier toolchain. Pick the cheapest technique that delivers the moment.

### Type is the loudest decision
Measured display sizes: 16px (Emil, one size only), 19.2px (Are.na, one size only), 48px at weight 300 (Stripe), 54-64px at weights 400-600
(Framer, Vercel, Raycast, Apple, Superhuman), 80-96px (Cuberto, Tailwind, Resend), **720px** (Rauno). Two extremes work: monumental, or one calm size.
The muddy middle (three similar sizes, four weights) is what "mid" looks like.

- At least 14 of the 30 set their headline in a custom or licensed family (Stripe sohne, Superhuman Super Sans, Mercury arcadia, Nothing Ndot, teenage engineering te-20, PostHog RoundHog, Arc Marlin Soft, Resend domaine, Pudding Atlas + Gooper, Rive Orbitron). We cannot ship those; the lesson is that *the family carries the brand*. Choose one distinctive open face (see `worlds.md`) and commit to it.
- Light and medium weights dominate large type: 300 at Stripe, 480 at Mercury, 540 at Superhuman, 500 at Cuberto and Framer. Heavy weights are rare at display size (Orbitron 900 at Rive is the sci-fi exception).

### One accent, used once
Measured accents: Stripe violet `rgb(83,58,253)`, basement orange `rgb(255,77,0)`, Mercury periwinkle `rgb(82,102,235)`, Arc blue `rgb(49,57,251)`, Lusion blue `rgb(0,22,236)`.
Grounds are either near-black (Linear `8,9,10`, Vercel `10,10,10`, Raycast `7,8,10`, Resend black) or a *warm* neutral (Arc cream, PostHog green-cream, Emil paper `253,253,252`, Rauno grey). Stripe is the exception with a white ground, and it spends its one accent and its gradient carefully.

### The page proves the product by being it
- Raycast types a query into a launcher and answers to the arrow keys. (`move-command-demo`)
- Superhuman is built around keystrokes. (`move-shortcut-inbox`)
- Resend's code turns into the email it sends. (`move-code-to-preview`)
- Rive shows interaction as states. (`move-state-button`)
- Tailwind's hero is the class list that styles it.

If your product is an interface, the hero should be a live piece of it, not a screenshot.

### Commit to one metaphor
PostHog is a desktop (`move-desktop-home`). Stripe Press is a stack of books (`move-book-stack`). Bruno Simon is a drivable world (`move-drive-world`).
Nothing is dot-matrix (`move-dot-matrix`). teenage engineering is a spec sheet (`move-rotary-knob`). The metaphor decides layout, type, motion and copy at once, which is why these sites feel finished.

### Scroll is used for exactly one thing
- Apple pins scenes and scrubs media (measured: 11 sticky regions, 6 scroll-snap points, 16 videos; `move-frame-scrub`).
- Igloo makes scroll the camera (`move-scroll-tunnel`).
- The Pudding makes scroll advance a story under a sticky chart (`move-scrollytelling`).
- Lenis, Cuberto and Immersive Garden use eased scrolling (Lenis confirmed on all three; `move-scroll-rail`).

Nobody does all four on one page.

### What breaks (observed, so avoid)
- **WebGL2 as a hard requirement.** Igloo shows an apology in a browser without it. Canvas-only sites (Bruno Simon, Resn) have no DOM text at load, so crawlers and screen readers get nothing. Offer a fallback or keep real text in the DOM.
- **A blank first frame.** Linear's hero text arrived several seconds after load in our browser. Entrances should start from visible content.
- **Bot walls.** Locomotive and Aesop sit behind a Cloudflare challenge; we do not bypass those, so they are not in the thirty.

## Part 2: the twenty vibe-coded

**How they were chosen.** There is no neutral ranking of "best vibe-coded sites". We took v0's own featured templates and ranked them by the larger of the two counts each card shows (most likely forks; likes second). That gives certain provenance (all made in v0) and an honest popularity signal, not a design award. For other galleries, browse Lovable Launched, madewithlovable.com and vibecodingshowcase.com.

**What the popularity shows.** The most-forked are the safe defaults: Pointer AI landing page (20.7K), Brillance SaaS landing page (14.7K), Marketing Website (11.2K), Dashboard M.O.N.K.Y (11.1K). Of the twenty, twelve are SaaS, marketing, portfolio, waitlist or storefront templates in the same section order (hero, features, pricing, testimonials, call to action, footer). People fork the thing they already expect.

**The look it converges on** (measured on the Pointer template): the system sans stack (`ui-sans-serif`) at 60px/600, a rounded hero panel filled with a pale mint gradient, floating pixel squares, a code-editor mock below, and **23 backdrop-filters** on one page. That is "decorative glass", one of the refusals in `00-start-here.md`. It is a competent default, and exactly what the swap test catches.

**Where vibe coding is genuinely strong** (the entries worth studying):
- Complete states for small interactive things: the Waitlist and Newsletter forms (`move-v0-email-capture`), the Image Generation Playground's history and shortcuts.
- App shells with clear structure: the M.O.N.K.Y dashboard (`move-v0-dashboard-shell`).
- Self-contained visual toys with a definite algorithm: isometric room with pathfinding (`move-v0-isometric-room`), globe-to-map projection blend (`move-v0-globe-to-map`), particle logo (`move-v0-particle-logo`), SVG-mask hero (`move-v0-mask-hero`).
- Clean seams to services: BaseHub as a CMS, Upstash Redis for signups, AI Gateway for generation.

**The caution.** Speed hides risk. Wikipedia's "Vibe coding" article reports that 170 of 1,645 Lovable-created web applications had a flaw that let anyone read personal information. When a generated app stores user data, review auth and row-level access before shipping, however good the UI looks.

## How to use this when building

1. Pick references by the brief's **mode** (Persuade, Operate, Read, Experience), then open 2-3 teardowns whose *signature moment* matches your content, not your industry.
2. Open the matching **Signature move** pattern. Read its source; keep its reduced-motion and keyboard handling.
3. **Cross, don't copy:** structure from one, type attitude from another, a metaphor from a third. Run the swap test.
4. Prefer the cheapest technique that delivers the moment (CSS or SVG before canvas, canvas before WebGL).
5. If you are tempted by the vibe-coded default, treat it as the baseline to beat. Replace the type, the order of sections and one thing the template never does.

## What we deliberately did not do

- Copy code, text, brand assets or distinctive layouts. Each move re-implements a *technique* with our own content.
- Claim more than we saw. Entries marked *partial* or *listing* say how little we could verify.
- Rank sites. The fifty are a study set, not a leaderboard.


# Recipe: scroll-driven 3D product site

The architecture behind the `site-solar` pattern (a spinning soda can that changes label, colour and copy as you scroll).
Reuse it for any "object + stages" page. Full working code: `src/patterns/sites/solar/` (or `/docs/site-solar.md`).

## The idea in one paragraph

A fixed, transparent WebGL canvas sits above a coloured background layer and below the page text. The page is ordinary
HTML sections. **One GSAP timeline, scrubbed by the whole page's scroll, writes into a plain mutable object** (`rig`:
position, scale, rotation, flavor index). The R3F `useFrame` loop reads that object and damps toward it. CSS variables on `<html>`
carry the palette; one `data-flavor` attribute drives all text swaps in CSS. React never re-renders while scrolling.

```
scroll ──▶ GSAP timeline (1 time unit = 1 px) ──▶ rig {x,y,s,rx,ry,rz,flavor} ──▶ useFrame (damp) ──▶ mesh
                         └──▶ --bg / --fg on <html> ──▶ background layer + text colour
rig.flavor ──▶ ticker callback ──▶ <html data-flavor="n"> ──▶ CSS swaps giant word, copy, dots
```

## Files (in `src/patterns/sites/solar/`)

| File | Job |
|---|---|
| `src/rig.ts` | The mutable state objects (`rig`, `intro`, `pointer`). No React. |
| `src/flavors.ts` | Content + palette per stage. The only file you edit to rebrand. |
| `src/label.ts` | Paints a texture to a `<canvas>` (sunburst, waves, brand, citrus), returns a `CanvasTexture`. |
| `src/Scene.tsx` | R3F canvas, procedural can (cylinder + lathe caps + pull tab), env lighting, sparkles, frame loop. |
| `src/App.tsx` | Lenis + master timeline + reveal/count-up triggers + page markup. |
| `src/styles.css` | Layout, giant words, sticky stage, data-attribute swaps, marquee, responsive, reduced motion. |

## Steps to adapt

1. **Content:** edit `flavors.ts` (stage names, copy, `bg`, `fg`, label colours). Rename the brand in `label.ts` and `App.tsx`.
2. **Object:** replace the can in `Scene.tsx` with a `useGLTF` model (keep the group + `rig` mapping), or keep it procedural.
   If you load a GLB: `useGLTF.preload`, wrap in `<Suspense>`, call `onReady` after first render so the loader clears.
3. **Stages:** the pinned `.flavors` section is `height: (N+2) * 100svh`; inside is a `position: sticky; height: 100svh` stage.
   The tween over it has duration `section.offsetHeight - innerHeight`. Stage `i` starts at `seg * i` where `seg = duration / N`.
4. **Choreography:** each section gets its own `tl.to(rig, {...}, startPx)`. Express X in *fractions of half the viewport width*
   (so it works at any width); scale in units relative to `min(viewport.height/5, viewport.width/2.3)`.
5. **Responsive:** below aspect 0.9 the can centres (`x = 0`) and the layout stacks; text sits bottom. Test at 375px.

## Rules that make it feel premium

- The object is the only thing allowed to be 3D-fancy. Text is flat, huge and confident.
- Background word sits *behind* the canvas at ~16% opacity; foreground copy sits *above* it. That layering is most of the look.
- Colour changes happen over ~24% of a stage and are centred on the stage boundary. Label swaps at the same moment.
- Idle life: tiny sine bob, pointer tilt (damped), a few sparkles. Never more.
- Intro plays only after the first frame renders (loader clears on `onReady`), so the entrance is seen, not missed.
- Environment lighting uses `<Lightformer>`s inside `<Environment>` (no network HDR): big top softbox, two side strips, rim ring, low fill.
  Metal reads as metal because of those strips. Don't remove them.

## Performance

- `React.lazy(() => import('./Scene'))` keeps three.js out of the first bundle (~1 MB). Show a splash until `onReady`.
- `dpr={[1, 2]}`, `powerPreference: 'high-performance'`, one physical material, 96-128 radial segments is plenty.
- Only one tweened CSS variable pair on `<html>`; if style recalc gets heavy, move the colour to a single fixed background element.
- Honour `prefers-reduced-motion`: no Lenis, no sparkles, zero-duration intro. Scroll-linked movement is user-driven and may stay.

## Gotchas (see also verify.md)

`immediateRender: false` on the timeline; pad the timeline to the scroll length; use bounding rects not `offsetTop`; `floor` not `round`
for stage index; don't render the mesh until textures exist; guard `useFrame` against null refs; `await document.fonts.load()`
before painting canvas text; `new Lenis({ anchors: true })` so nav links work.


# Site types: what goes on the page, in what order

Most requests are one of a dozen kinds of site. Each has a sensible order of sections, a world that fits, and parts in UI Lab that already do the hard bits. Treat this as a starting skeleton, then make it yours with real content.

## A business with a physical place (bakery, cafe, studio, clinic)

**Order:** what we are in one sentence, today's offer or menu, how to order or book, where and when (with open-now), one line about the people. **World:** 8 Warm Organic. **Proof:** `site-crumb`. **Parts:** `site-nav`, `newsletter-form`, `not-found-page`. **Do not:** bury the opening hours three clicks deep, or make people phone to ask a price.

## A consumer app or product landing page

**Order:** the promise, a live taste of the product, why it works, one plan with a clear price, a sign-up. **World:** 6 Soft Playful for friendly apps, 3 Technical Dark for developer tools, 1 Product Hero Scroll for a physical product. **Proof:** `site-pip`, `site-lattice`, `site-solar`. **Parts:** `pricing-tiers`, `faq-section`, `cookie-banner`, `newsletter-form`. **Do not:** open with a row of logos before saying what it is.

## A portfolio

**Order:** the three best pieces first, a sentence about you, how to get in touch. **World:** 5 Cinematic Immersive, 2 Editorial Quiet Luxury or 16 Terminal BBS. **Proof:** `site-abyss`, `site-mare`, `site-pebble`. **Parts:** `move-scatter-grid`, `move-feed-the-bee`. **Do not:** hide the work behind an intro animation, or make the plain version impossible to reach.

## A publication, blog or documentation

**Order:** the article itself, a contents list, related reading, a way to subscribe. **World:** 12 Broadsheet. **Proof:** `site-ledger`. **Parts:** `article-layout`, `pagination-breadcrumbs`, `faq-section`. **Do not:** set body text wider than about 65 characters, or put a hero image above the headline.

## A report or data story

**Order:** the one finding that matters, the evidence in order, what to do, the method. **World:** 7 Swiss Grid. **Proof:** `site-commute-report`. **Parts:** `data-table`, `charts`. **Do not:** show a chart without its numbers available as a table.

## A shop

**Order:** products, a basket that always shows its total, delivery cost early, checkout. **World:** 2 Editorial Quiet Luxury or 8 Warm Organic, depending on the goods. **Parts:** `shop-cart`, `pagination-breadcrumbs`, `alert-banners`, `combobox` for search. **Do not:** reveal delivery costs only at the last step.

## An event, exhibition or venue

**Order:** what, when, where, how to get a ticket, then the programme. **World:** 14 Museum Placard for culture, 9 Departures Board for anything time-driven. **Proof:** `site-salt-road`, `site-departures`. **Parts:** `date-picker`, `site-nav`. **Do not:** put the date and place only in an image.

## A service that people check often (status, forecast, schedule, prices)

**Order:** the current answer, the next few hours or days, a way to change place or filter. **World:** 21 Plain Text Sheet or 20 Nautical Chart. **Proof:** `site-plain-forecast`, `site-tidewater`. **Parts:** `data-table`, `alert-banners`. **Do not:** make people wait for an animation to read a number.

## An admin screen or dashboard

**Order:** what needs attention, the list, the detail, the actions. **World:** none needed; follow the accessibility baseline and keep it plain. **Parts:** `data-table`, `settings-screen`, `menu-button`, `alert-banners`, `analytics-dashboard`. **Do not:** use colour as the only signal for a status.

## Whatever you build

1. Say what it is in the first screen, in plain words.
2. Put the one action you want in reach, and make it obvious.
3. Include the unhappy states: empty, error, loading, offline, sold out.
4. Keep a plain, fast version of the content reachable.
5. Check it with a keyboard and at phone width before calling it done.


# Verify: the loop that stops "mid and buggy"

Code that was never rendered is a guess. Motion, scroll and WebGL code is wrong in ways only a browser reveals.
The loop is **bounded**: it is not an invitation to polish forever.

## The loop

1. **Build fully** (vertical slice first, then the rest). Typecheck and build must pass.
2. **Start the dev server** and open it in a real browser (Claude: the Browser pane, `preview_start` with a URL).
3. **One batched inspection round.** In a single pass, do all of:
   - Load fresh. Wait for the splash/loader to clear. Console: zero errors, read warnings.
   - Scroll to *every section* by position (`window.scrollTo`) and screenshot each. Include both ends of every pinned/scrubbed zone.
   - Desktop (1440x900) **and** phone (375x812, `resize_window` mobile preset; reload after switching).
   - `prefers-reduced-motion` on: page still readable and operable.
   - Keyboard: Tab through; focus ring visible everywhere; nothing trapped.
   - Resize narrow/wide once; look for overflow and overlap.
4. **Fix everything it showed in one batch.** Don't fix-and-reshoot one thing at a time.
5. **One confirming round.** Then stop.
6. **Report honestly**: what you rendered, at what sizes, what you could not test (real GPU, Safari, touch hardware).

## Automated accessibility sweep

`tools/axe-crawl.js` (also served at `/tools/axe-crawl.js`) is a console script that runs axe-core over every pattern and site and prints the violations by rule. Paste it into the console of a visible tab. Fix anything serious or critical; contrast hits on elements that are mid-animation are false positives (check the settled state). This is how UI Lab itself is kept at zero known violations.

## Environment caveats

- The built-in browser pane renders WebGL in software. First load of a 3D scene can take 10+ seconds and frame rate is low.
  Smoothed values (damping, scrub) will look mid-transition in a screenshot taken too soon. Wait, then screenshot.
  Don't "fix" slowness that is the test environment; do keep first-paint cheap (code-split three.js, show a loader).
- A jump-scroll (`scrollTo`) is not the same as a wheel scroll with smooth-scroll libraries. Both should land correctly.

## Bug catalogue (all found and fixed while building the `site-*` patterns)

Check for these first; they cost hours when found late.

| Symptom | Cause | Fix |
|---|---|---|
| Page loads already showing the *last* section's colours/state | `gsap.fromTo` in a timeline renders its start values immediately, in creation order, so the last tween wins | `timeline({ defaults: { immediateRender: false } })` and make defaults match the hero state |
| Palette/state drifts out of sync with the scroll position | Timeline total length is shorter than the scrollable distance, so progress is scaled | Pad the timeline to exactly the scroll length (`tl.set({}, {}, scrollHeight - innerHeight)`) and use 1 time-unit = 1 px of scroll |
| Animation fires at the wrong scroll offset for nested elements | `offsetTop` is relative to the nearest *positioned* ancestor | Use `getBoundingClientRect().top + scrollY` |
| Label/text swaps at a different moment than the colour change | `Math.round(progress)` vs `Math.floor` boundaries | Pick one rule; make colour tween centre on the same boundary |
| Plain untextured model flashes before the real texture | Material compiled without a map, map assigned later, recompile stalls | Don't render the object until its textures exist; create material with the map from the start; swap maps (same shader define) afterwards |
| `Cannot read properties of null (reading 'position')` in `useFrame` | Frame loop runs before the conditionally-rendered mesh mounts | `if (!ref.current) return` at the top of `useFrame` |
| Text drawn into a canvas texture uses the fallback font | Fonts not loaded when the canvas was painted | `await document.fonts.load('100px "Face"')` before drawing |
| Canvas text mirrored/offset on a cylinder | Cylinder UV seam is at the front by default | `texture.wrapS = RepeatWrapping; texture.offset.x = 0.5` |
| Scroll feels floaty, anchors jump | Smooth-scroll lib not wired to GSAP's ticker; anchor links bypass it | `gsap.ticker.add(t => lenis.raf(t*1000))`, `lagSmoothing(0)`, `new Lenis({ anchors: true })` |
| Everything repaints on every scroll frame | A CSS variable on `<html>` is tweened and read by the whole tree | Acceptable on desktop; for heavy pages tween a single background layer's colour instead |
| Mobile: layout jumps when the URL bar hides | `100vh` | `100svh` |
| Pinned section is too short/long | Track height in `vh` doesn't match tween distance | Track = (stages x N vh); tween duration = track height minus one viewport |
| `React.StrictMode` double-mount breaks WebGL | Calling `WEBGL_lose_context` in cleanup | Don't; let R3F dispose |
| A full-page demo embedded in a host SPA leaks styles or breaks routing | Global selectors (`html`, `body`, `*`, `:root`), shared class names, `href="#id"` anchors in a hash-routed host | Scope CSS under a wrapper class (`tools/scope-css.py`), rename colliding classes, handle anchor clicks in JS, put variables and classes on the wrapper, not `<html>` |
| A heavy route (WebGL) shows a tiny or black snapshot after navigating | The host's View Transition morph hangs while the first render blocks the main thread | Skip the transition for routes into and out of full-screen demos |
| `Invalid hook call` / two Reacts after adding deps in dev | Vite's pre-bundled dependency cache is stale | Stop the dev server, delete `node_modules/.vite`, restart |
| Sticky or pinned sections stop working inside the wrapper | `overflow-x: hidden` on an ancestor makes it a scroll container | Use `overflow-x: clip` |
| `scrollIntoView` as effect body returns a Promise | Newer Chromium | Wrap in braces so the effect returns nothing |
| Classes toggled on the site's root (`.large`, `.show-grid`) stop working after scoping | `scope-css.py` rewrites `.x` as a descendant of the wrapper, not as a second class on the wrapper itself | Drive state with an inline CSS variable or inline style on the root, or put the class on an inner element |
| Brand text and a styled span stack vertically in a header | `display: grid` on a flex or inline container turns each text node and child into its own grid item | Use `display: flex; gap` for inline lockups |
| In-page links land under a sticky header | The target scrolls to the very top, behind the header | `scroll-margin-top` on the targets (about the header height plus 16px) |
| `Cannot access 'X' before initialization` from a module-level helper | A top-level IIFE used a `const` declared below it | Declare dependencies first, or compute inside a function |
| The home grid or registry throws "Pattern file missing" after changing globs | A negative `import.meta.glob` pattern applies to the whole list, so a later positive pattern is removed too | Use separate globs and merge the results |
| Screenshots show half-drawn lines and unmoved counters | The browser pane is hidden or throttled, so transitions and `requestAnimationFrame` stall | Call `document.getAnimations().forEach(a => a.finish())` before the screenshot; set `document.startViewTransition = undefined` when crawling routes |
| axe: `aria-label` on a div, p or pre | `aria-label` is not allowed on elements with no role | Give the element a role (`region`, `group`) or use visible or hidden text instead |
| axe: `role="status"` on a `<dl>` or `<ul>` | The role is not allowed on those elements, and removing the list semantics breaks the children | Wrap the list in a `<div role="status">` |
| axe: `aria-selected` on a button inside a grid | `aria-selected` belongs on the `gridcell` or `option`, not on the button inside it | Put it on the cell |
| A centred popover opens in the page corner | A top-layer popover is positioned against the viewport, not its trigger | Set `top` and `left` from the trigger's rect when it opens |
| The first load is huge | Every pattern and every source file was imported eagerly | Lazy-load patterns with `React.lazy` over `import.meta.glob` and load sources on demand |

## Smoke checklist (copy into the final report)

```
[ ] build + typecheck pass
[ ] console clean on fresh load
[ ] every section screenshotted at 1440 and 375
[ ] no horizontal scroll at 375
[ ] reduced-motion usable
[ ] keyboard: focus visible, reachable
[ ] first paint fast; heavy chunks code-split; loader shown
[ ] untested: ______ (be specific)
```


# Worlds: design directions to start from

A *world* is a coherent set of choices (palette logic, type, motion, signature moves, refusals) that makes a site feel
authored. Pick one that fits the brief, or invent a new one and add it here. Don't blend two worlds half and half; cross
*techniques*, keep one world's identity.

Fonts below are Fontsource packages (`npm i @fontsource/<name>` or `@fontsource-variable/<name>`).
Hex values are starting points; shift them to the brand, keep the **roles**.

---

## 1. Product Hero Scroll
**Proof:** pattern `site-solar`.
**Use for:** a physical product (drink, shoe, headphones, car) where the object is the star.
**Metaphor:** a product launch film you control with the scroll wheel.
**Palette:** one **flat saturated colour per variant**, tweened as the visitor scrolls; ink that flips light/dark per variant. Support: cream, near-black.
**Type:** condensed display at enormous scale *behind* the object (Anton, Bebas Neue, Oswald), grotesk body (Bricolage Grotesque, Hanken Grotesk).
**Motion:** scrubbed, weighty, linear where the object spins, `power2.inOut` for position moves; text swaps by state attribute, not per-frame.
**Signature:** the object rotates through stages; label, colour and copy change on stage boundaries.
**Needs:** a model or frame sequence. See `site-solar`.
**Refuse:** dark-gradient hero, floating glass cards, lifestyle stock photos, a second competing animation.

## 2. Editorial Quiet Luxury
**Proof:** pattern `site-mare`.
**Use for:** fashion, hospitality, architecture, ceramics, high-end services.
**Metaphor:** a printed magazine spread that breathes.
**Palette:** warm off-white `#f4f0e8`, ink `#14110f`, **one** muted accent (clay, oxblood, moss). No gradients.
**Type:** high-contrast serif display (Instrument Serif, Cormorant, Fraunces) with a precise sans (Geist, Hanken Grotesk). Generous leading, hairline rules.
**Motion:** slow (0.9-1.4 s), exponential ease-out, image mask reveals, gentle parallax <= 8%. Silence between moments.
**Signature:** one oversized photograph cropped with intent, a caption set like a museum label.
**Needs:** real photography.
**Refuse:** drop shadows, rounded pills, emoji, bouncy easing, stock "team" photos.

## 3. Technical Dark / Dev Tool
**Proof:** pattern `site-lattice`.
**Use for:** developer products, infra, AI tooling, security.
**Metaphor:** a well-lit terminal with a single status light.
**Palette:** near-black `#0a0a0b`, surfaces `#111113`/`#17171a`, 1px borders `rgba(255,255,255,.08)`, **one** accent used sparingly (signal green, electric blue, amber).
**Type:** Geist or Inter Tight for UI, **Geist Mono / JetBrains Mono for real code and data only**.
**Motion:** short (0.15-0.3 s), tight easing, subtle glow/gradient border on hover, live product UI as the hero (an actual component, not a screenshot).
**Signature:** an interactive or animated slice of the product itself; command palette; keyboard shortcuts shown.
**Refuse:** purple-blue gradient blobs, "10x faster" metric rows, monospace everywhere as decoration.

## 4. Neo-Brutalist Print
**Proof:** pattern `site-hotmess`.
**Use for:** indie products, zines, creative tools, anything with attitude.
**Metaphor:** a risograph poster stapled to a wall.
**Palette:** cream `#fff4e0`, black, 2-3 acid colours (tomato, lemon, mint, cobalt). Flat only.
**Type:** heavy grotesk or slab (Archivo Black, Space Grotesk, Bowlby One) + a mono for small print (Space Mono).
**Motion:** snappy, slight overshoot allowed, marquees, rotated stickers, hover that moves the offset shadow.
**Signature:** thick 2px borders with **hard offset shadows** (this is the one world where they are earned), oversized type crossing boundaries.
**Refuse:** blur, soft shadows, gradients, thin light-grey text.

## 5. Cinematic Immersive
**Proof:** pattern `site-abyss`.
**Use for:** portfolios, studios, launches, games, experiences.
**Metaphor:** a title sequence; the interface is the credits.
**Palette:** deep neutral or colour-graded dark, one luminous accent from the imagery itself.
**Type:** a confident display (Syne, Unbounded, Fraunces, Inter Tight at huge scale) with tiny, quiet UI text.
**Motion:** full-bleed WebGL/video, scroll scrubs the camera or timeline, text appears at beats and gets out of the way. Page transitions are part of the show.
**Signature:** a camera path, shader transition or physical simulation that responds to the pointer.
**Needs:** strong assets and a perf budget (code-split three.js, loader, lower DPR on weak GPUs).
**Refuse:** nav bars with 7 links, long paragraphs over moving imagery, effects that don't serve the story.

## 6. Soft Playful
**Proof:** site `site-pip`.
**Use for:** consumer apps, kids/education, wellness with humour, community products.
**Metaphor:** a sticker sheet that reacts when you touch it.
**Palette:** pastel field + 2 saturated pops; generous white space; friendly dark ink (not pure black).
**Type:** rounded or quirky sans (Bricolage Grotesque, Fredoka, Nunito) with one characterful display accent.
**Motion:** springy (stiffness ~200, damping ~18), squash/stretch on press, staggered pop-ins, cursor-reactive mascots.
**Signature:** a character or object that reacts to input; big rounded shapes (radius 24-32).
**Refuse:** corporate stock icons, tiny type, sharp corners, glass.

## 7. Swiss Grid / Data Poster
**Proof:** site `site-commute-report`.
**Use for:** reports, data stories, institutions, products whose pitch is clarity.
**Metaphor:** a conference poster that happens to be interactive.
**Palette:** white or paper, black, **one** hard accent (signal red or international blue).
**Type:** neo-grotesk (Inter Tight, Hanken Grotesk, Schibsted Grotesk) in 3 sizes only; huge numerals; tabular figures.
**Motion:** minimal. Number counters, line draw on charts, section rules that extend on enter.
**Signature:** a strict 12-column grid made visible; one giant statistic as the page's argument (here a big number *is* earned, because the data is the content).
**Refuse:** decoration, shadows, rounded corners, more than one accent.

## 8. Warm Organic
**Proof:** site `site-crumb`.
**Use for:** food, wellness, craft, sustainability, local business.
**Metaphor:** a hand-made label on good paper.
**Palette:** earth tones (terracotta, sage, oat, deep brown), subtle grain (SVG noise, 4-6% opacity).
**Type:** soft serif display (Fraunces with soft/wonk axes, Young Serif) + humanist sans.
**Motion:** gentle float, slow parallax, arch/blob masks on imagery, hand-drawn SVG line animation.
**Signature:** organic shapes cropping real photography; a hand-drawn underline/stamp that draws on.
**Refuse:** neon, hard grids, tech jargon, glossy 3D.

---

## Adding a world

Copy the shape above (Use for / Metaphor / Palette / Type / Motion / Signature / Needs / Refuse). A world is only
real if you've shipped something in it. Link the project or pattern that proves it (all eight general worlds now have a proof site).

## Choosing quickly

| Brief smells like... | Start with |
|---|---|
| "a product with a hero object" | 1 Product Hero Scroll |
| "premium", "timeless", "boutique" | 2 Editorial Quiet Luxury |
| "developers", "API", "agents" | 3 Technical Dark |
| "indie", "bold", "doesn't look corporate" | 4 Neo-Brutalist Print |
| "wow", "portfolio", "studio" | 5 Cinematic Immersive |
| "friendly", "for everyone", "app" | 6 Soft Playful |
| "report", "numbers", "trust" | 7 Swiss Grid |
| "natural", "handmade", "local" | 8 Warm Organic |

Narrower directions that borrow the look and logic of a real object or printed form (departures board, botanical plate, hi-fi deck, broadsheet, and eight more) live in [niche-worlds.md](niche-worlds.md), worlds 9 to 24. `src/router.ts` maps briefs to both sets.


# Design tokens
> Color, type, spacing, radius, elevation and motion tokens. Light/dark aware, no flash.
- **Category:** Foundations
- **Slug:** tokens
- **Tags:** design tokens, css variables, theme, dark mode, color, typography, spacing
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/tokens
- **Raw source:** https://ui-lab-weld.vercel.app/raw/foundations/Tokens.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/foundations/Tokens.tsx

## When to use
- Starting any new project: copy src/tokens/tokens.css first
- Plain HTML projects too; the file has no framework dependency

## Accessibility

Colour pairs meet WCAG AA for body text in both themes. Motion durations collapse to 0 under prefers-reduced-motion.


## Source
`src/patterns/foundations/Tokens.tsx`
```tsx
const COLORS = [
  'bg', 'surface', 'surface-2', 'border', 'fg', 'fg-muted',
  'accent', 'accent-fg', 'accent-soft', 'success', 'warning', 'danger',
]
const TYPE = ['5xl', '4xl', '3xl', '2xl', 'xl', 'lg', 'base', 'sm', 'xs']
const SPACE = [1, 2, 3, 4, 6, 8, 12, 16, 24]
const RADII = ['sm', 'md', 'lg', 'xl', 'full']
const SHADOWS = ['sm', 'md', 'lg']
const EASINGS = ['ease-standard', 'ease-out-expo', 'ease-in-out', 'ease-spring']

function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <section className="space-y-3">
      <h3 className="text-sm font-semibold uppercase tracking-wider text-fg-muted">{title}</h3>
      {children}
    </section>
  )
}

export default function Tokens() {
  return (
    <div className="space-y-10">
      <Section title="Color">
        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
          {COLORS.map((c) => (
            <div key={c} className="overflow-hidden rounded-md border border-border">
              <div className="h-14" style={{ background: `var(--${c})` }} />
              <code className="block bg-surface px-3 py-2 font-mono text-xs">--{c}</code>
            </div>
          ))}
        </div>
      </Section>

      <Section title="Type scale">
        <div className="space-y-2">
          {TYPE.map((t) => (
            <div key={t} className="flex items-baseline gap-4">
              <code className="w-20 shrink-0 font-mono text-xs text-fg-muted">--text-{t}</code>
              <span className="truncate font-semibold" style={{ fontSize: `var(--text-${t})`, lineHeight: 'var(--leading-tight)' }}>
                Reconstruct the day
              </span>
            </div>
          ))}
        </div>
      </Section>

      <Section title="Spacing">
        <div className="space-y-1.5">
          {SPACE.map((s) => (
            <div key={s} className="flex items-center gap-4">
              <code className="w-20 shrink-0 font-mono text-xs text-fg-muted">--space-{s}</code>
              <div className="h-3 rounded-sm bg-accent" style={{ width: `var(--space-${s})` }} />
            </div>
          ))}
        </div>
      </Section>

      <Section title="Radius & elevation">
        <div className="flex flex-wrap gap-4">
          {RADII.map((r) => (
            <div key={r} className="grid h-20 w-20 place-items-center border border-border bg-surface-2 font-mono text-xs" style={{ borderRadius: `var(--radius-${r})` }}>
              {r}
            </div>
          ))}
          {SHADOWS.map((s) => (
            <div key={s} className="grid h-20 w-28 place-items-center rounded-md bg-surface font-mono text-xs" style={{ boxShadow: `var(--shadow-${s})` }}>
              shadow-{s}
            </div>
          ))}
        </div>
      </Section>

      <Section title="Easing (hover a row)">
        <div className="space-y-2">
          {EASINGS.map((e) => (
            <div key={e} className="group flex items-center gap-4 rounded-md bg-surface-2 p-2">
              <code className="w-32 shrink-0 font-mono text-xs text-fg-muted">--{e}</code>
              <div className="relative h-6 flex-1">
                <div
                  className="absolute top-0 h-6 w-6 rounded-full bg-accent group-hover:left-[calc(100%-1.5rem)]"
                  style={{ left: 0, transition: `left var(--dur-slower) var(--${e})` }}
                />
              </div>
            </div>
          ))}
        </div>
      </Section>
    </div>
  )
}
```

# Contrast checker (WCAG)
> Pick two colours and see the WCAG contrast ratio, with plain pass or fail for normal text, large text and UI parts at AA and AAA, and a live sample.
- **Category:** Foundations
- **Slug:** contrast-checker
- **Tags:** contrast, wcag, colour, accessibility, tool
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/contrast-checker
- **Raw source:** https://ui-lab-weld.vercel.app/raw/foundations/ContrastChecker.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/foundations/ContrastChecker.tsx

## When to use
- Choosing text and background colours
- Checking a brand palette before it ships

## Accessibility

The inputs have labels and an invalid state; the ratio and each pass or fail are written in words and symbols, not colour alone; results update in a status region.


## Source
`src/patterns/foundations/ContrastChecker.tsx`
```tsx
import { useId, useMemo, useState } from 'react'

/*
 * A WCAG contrast checker you can keep. Type or pick two colours; it computes the relative luminance of each (the WCAG
 * formula, with sRGB linearisation) and the contrast ratio, then says in words whether normal text, large text and UI
 * components pass AA and AAA. The sample renders your pair at real sizes. Pure maths, no library.
 */

function parse(hex: string): [number, number, number] | null {
  const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim())
  if (!m) return null
  const h = m[1].length === 3 ? m[1].split('').map((c) => c + c).join('') : m[1]
  return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)]
}
const lin = (v: number) => {
  const c = v / 255
  return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
}
const lum = ([r, g, b]: [number, number, number]) => 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b)
export const ratio = (a: [number, number, number], b: [number, number, number]) => {
  const x = lum(a)
  const y = lum(b)
  return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05)
}

export default function ContrastChecker() {
  const id = useId()
  const [fg, setFg] = useState('#4f46e5')
  const [bg, setBg] = useState('#ffffff')
  const f = parse(fg)
  const b = parse(bg)
  const r = useMemo(() => (f && b ? ratio(f, b) : null), [f, b])
  const rows: [string, number, string][] = [
    ['Normal text, AA', 4.5, 'body copy, labels'],
    ['Normal text, AAA', 7, 'the enhanced level'],
    ['Large text, AA', 3, '24px, or 19px bold and up'],
    ['UI parts and icons, AA', 3, 'borders, focus rings, icons'],
  ]
  return (
    <div className="mx-auto grid max-w-2xl gap-6 md:grid-cols-2">
      <div className="space-y-3">
        {[['Text colour', fg, setFg, 'fg'], ['Background', bg, setBg, 'bg']].map(([label, val, set, k]) => (
          <div key={k as string}>
            <label htmlFor={`${id}-${k}`} className="text-sm font-medium">{label as string}</label>
            <div className="mt-1 flex gap-2">
              <input type="color" aria-label={`${label} picker`} value={parse(val as string) ? `#${(val as string).replace('#', '').padStart(6, '0').slice(0, 6)}` : '#000000'} onChange={(e) => (set as (v: string) => void)(e.target.value)} className="size-12 shrink-0 cursor-pointer rounded-md border border-border bg-transparent p-1" />
              <input id={`${id}-${k}`} value={val as string} onChange={(e) => (set as (v: string) => void)(e.target.value)} aria-invalid={!parse(val as string)} className="min-h-12 w-full rounded-md border border-border bg-surface px-3 font-mono text-sm" />
            </div>
          </div>
        ))}
        <button onClick={() => { setFg(bg); setBg(fg) }} className="min-h-11 rounded-md border border-border px-3 text-sm hover:bg-surface">Swap colours</button>
        <p className="text-sm text-fg-muted" role="status">
          {r === null ? 'Enter colours as hex, like #1a1a1a or #fff.' : <>Contrast ratio <b className="text-fg tabular-nums">{r.toFixed(2)} : 1</b></>}
        </p>
      </div>
      <div>
        <div className="rounded-xl border border-border p-5" style={{ background: b ? bg : '#fff', color: f ? fg : '#000' }}>
          <p className="text-2xl font-semibold">Large sample text</p>
          <p className="mt-1 text-base">Body text at sixteen pixels, the size most people read.</p>
          <p className="mt-2 text-xs">Small print at twelve pixels.</p>
        </div>
        <ul className="mt-3 space-y-1.5 text-sm">
          {rows.map(([name, min, hint]) => {
            const ok = r !== null && r >= min
            return (
              <li key={name} className="flex items-center justify-between gap-3">
                <span>{name} <span className="text-fg-muted">({hint})</span></span>
                <span className={`font-medium ${ok ? 'text-success' : 'text-danger'}`}>{r === null ? '—' : ok ? '✓ Pass' : '✕ Fail'}</span>
              </li>
            )
          })}
        </ul>
      </div>
    </div>
  )
}
```

# Fluid type scale
> A type scale where every size is a clamp() between a narrow-screen and wide-screen size, with a base size and ratio you can change, and the CSS to copy.
- **Category:** Foundations
- **Slug:** fluid-type
- **Tags:** typography, fluid, clamp, type scale, css
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/fluid-type
- **Raw source:** https://ui-lab-weld.vercel.app/raw/foundations/FluidType.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/foundations/FluidType.tsx

## When to use
- Typography that needs no breakpoints
- Setting up a design system

## Accessibility

Body text never falls below 16px; the controls are native range and select with labels; the CSS output is a focusable, labelled region.


## Source
`src/patterns/foundations/FluidType.tsx`
```tsx
import { useState } from 'react'

/*
 * A fluid type scale: every size is a clamp() between a size at a narrow screen and a size at a wide one, so type grows
 * smoothly with the viewport and needs no breakpoints. Pick the base size and the ratio between steps and see the whole
 * scale, with the CSS to copy. The preview is capped at readable sizes: body never goes below 16px.
 */

const RATIOS: [string, number][] = [['Minor third', 1.2], ['Major third', 1.25], ['Perfect fourth', 1.333], ['Golden', 1.618]]
const STEPS = [-1, 0, 1, 2, 3, 4]
const NAMES: Record<number, string> = { [-1]: 'small', 0: 'body', 1: 'lead', 2: 'h3', 3: 'h2', 4: 'h1' }

export default function FluidType() {
  const [base, setBase] = useState(17)
  const [ri, setRi] = useState(1)
  const r = RATIOS[ri][1]
  const lo = (n: number) => Math.max(n < 0 ? 14 : 16, base * Math.pow(Math.min(r, 1.25), n))
  const hi = (n: number) => base * 1.12 * Math.pow(r, n)
  const clampFor = (n: number) => {
    const a = lo(n)
    const b = hi(n)
    const slope = (b - a) / (1280 - 360)
    const inter = a - slope * 360
    return `clamp(${(a / 16).toFixed(3)}rem, ${(inter / 16).toFixed(3)}rem + ${(slope * 100).toFixed(3)}vw, ${(b / 16).toFixed(3)}rem)`
  }
  const css = STEPS.map((n) => `--step-${n}: ${clampFor(n)};`).join('\n')

  return (
    <div className="mx-auto max-w-2xl">
      <div className="flex flex-wrap items-end gap-6">
        <label className="text-sm">
          <span className="block font-medium">Base size: {base}px</span>
          <input type="range" min={16} max={20} value={base} onChange={(e) => setBase(Number(e.target.value))} className="mt-1 h-11 w-48" />
        </label>
        <label className="text-sm">
          <span className="block font-medium">Ratio</span>
          <select value={ri} onChange={(e) => setRi(Number(e.target.value))} className="mt-1 min-h-11 rounded-md border border-border bg-surface px-3">
            {RATIOS.map(([n, v], i) => <option key={n} value={i}>{n} ({v})</option>)}
          </select>
        </label>
      </div>
      <div className="mt-5 divide-y divide-border rounded-xl border border-border">
        {[...STEPS].reverse().map((n) => (
          <div key={n} className="flex items-baseline justify-between gap-4 px-4 py-3">
            <span style={{ fontSize: clampFor(n), lineHeight: 1.15 }} className="font-semibold tracking-tight">Reading well</span>
            <code className="shrink-0 text-xs text-fg-muted">{NAMES[n]} · {lo(n).toFixed(0)}–{hi(n).toFixed(0)}px</code>
          </div>
        ))}
      </div>
      <pre tabIndex={0} aria-label="CSS custom properties for this scale" className="mt-4 overflow-x-auto rounded-lg bg-surface-2 p-3 font-mono text-xs leading-5">{`:root {\n${css}\n}`}</pre>
    </div>
  )
}
```

# Buttons
> Primary / secondary / ghost / danger, three sizes, loading state and a tactile press.
- **Category:** Components
- **Slug:** buttons
- **Tags:** button, cta, loading, variants
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/buttons
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/Buttons.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/Buttons.tsx

## When to use
- Any clickable action
- Swap --accent to rebrand without touching the component

## Accessibility

Native <button>; aria-busy while loading; disabled state removes pointer events; visible focus ring from tokens.


## Source
`src/patterns/components/Buttons.tsx`
```tsx
import { useState, type ButtonHTMLAttributes } from 'react'

type Variant = 'primary' | 'secondary' | 'ghost' | 'danger'
type Size = 'sm' | 'md' | 'lg'

const VARIANTS: Record<Variant, string> = {
  primary: 'bg-accent text-accent-fg hover:brightness-110 shadow-sm',
  secondary: 'bg-surface text-fg border border-border hover:bg-surface-2',
  ghost: 'text-fg hover:bg-surface-2',
  danger: 'bg-danger text-danger-fg hover:brightness-110 shadow-sm',
}

const SIZES: Record<Size, string> = {
  sm: 'h-8 px-3 text-sm rounded-sm gap-1.5',
  md: 'h-10 px-4 text-sm rounded-md gap-2',
  lg: 'h-12 px-6 text-base rounded-md gap-2',
}

export function Button({
  variant = 'primary',
  size = 'md',
  loading = false,
  className = '',
  children,
  disabled,
  ...rest
}: ButtonHTMLAttributes<HTMLButtonElement> & { variant?: Variant; size?: Size; loading?: boolean }) {
  return (
    <button
      {...rest}
      disabled={disabled || loading}
      aria-busy={loading || undefined}
      className={`inline-flex select-none items-center justify-center font-medium transition-[transform,filter,background-color] duration-150 ease-standard active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 ${VARIANTS[variant]} ${SIZES[size]} ${className}`}
    >
      {loading && (
        <span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent" aria-hidden />
      )}
      {children}
    </button>
  )
}

export default function Buttons() {
  const [loading, setLoading] = useState(false)
  const fakeSave = () => {
    setLoading(true)
    setTimeout(() => setLoading(false), 1500)
  }

  return (
    <div className="space-y-8">
      <div className="flex flex-wrap items-center gap-3">
        {(Object.keys(VARIANTS) as Variant[]).map((v) => (
          <Button key={v} variant={v}>
            {v[0].toUpperCase() + v.slice(1)}
          </Button>
        ))}
      </div>
      <div className="flex flex-wrap items-center gap-3">
        {(Object.keys(SIZES) as Size[]).map((s) => (
          <Button key={s} size={s} variant="secondary">
            Size {s}
          </Button>
        ))}
      </div>
      <div className="flex flex-wrap items-center gap-3">
        <Button loading={loading} onClick={fakeSave}>
          {loading ? 'Saving…' : 'Click to save'}
        </Button>
        <Button disabled variant="secondary">
          Disabled
        </Button>
      </div>
    </div>
  )
}
```

# Command palette
> Ctrl/⌘K launcher on the native <dialog>: focus trap, Esc and backdrop for free, arrow-key navigation.
- **Category:** Components
- **Slug:** command-palette
- **Tags:** cmdk, search, command menu, keyboard, dialog, ctrl k
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/command-palette
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/CommandPalette.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/CommandPalette.tsx
- **Reference:** [Heavier alternative: cmdk](https://github.com/pacocoursey/cmdk)

## When to use
- Any app with more than a handful of pages or actions
- Power-user shortcut on top of normal nav, never instead of it

## Accessibility

Native <dialog> traps focus and handles Esc; listbox/option roles with aria-selected; full keyboard nav.


## Source
`src/patterns/components/CommandPalette.tsx`
```tsx
import { useEffect, useMemo, useRef, useState } from 'react'

export type Command = { id: string; label: string; group?: string; hint?: string }

/*
 * ⌘K / Ctrl+K palette. Uses the native <dialog> for focus trapping, Esc and
 * the backdrop; arrow keys move, Enter runs. Filtering is a simple
 * all-words-present match, which is plenty for < a few hundred items.
 */
export function CommandPalette({
  commands,
  open,
  onOpenChange,
  onRun,
  hotkey = true,
}: {
  commands: Command[]
  open: boolean
  onOpenChange: (open: boolean) => void
  onRun: (cmd: Command) => void
  /** Bind ⌘K / Ctrl+K globally. Turn off when another palette owns the shortcut. */
  hotkey?: boolean
}) {
  const dialog = useRef<HTMLDialogElement>(null)
  const [query, setQuery] = useState('')
  const [index, setIndex] = useState(0)

  useEffect(() => {
    const d = dialog.current
    if (!d) return
    if (open && !d.open) {
      setQuery('')
      setIndex(0)
      d.showModal()
    } else if (!open && d.open) d.close()
  }, [open])

  useEffect(() => {
    if (!hotkey) return
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault()
        onOpenChange(!open)
      }
    }
    addEventListener('keydown', onKey)
    return () => removeEventListener('keydown', onKey)
  }, [open, onOpenChange, hotkey])

  const results = useMemo(() => {
    const words = query.toLowerCase().split(/\s+/).filter(Boolean)
    return commands.filter((c) => {
      const hay = `${c.label} ${c.group ?? ''} ${c.hint ?? ''}`.toLowerCase()
      return words.every((w) => hay.includes(w))
    })
  }, [commands, query])

  const run = (cmd?: Command) => {
    if (!cmd) return
    onOpenChange(false)
    onRun(cmd)
  }

  const onKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'ArrowDown') {
      e.preventDefault()
      setIndex((i) => Math.min(i + 1, results.length - 1))
    } else if (e.key === 'ArrowUp') {
      e.preventDefault()
      setIndex((i) => Math.max(i - 1, 0))
    } else if (e.key === 'Enter') run(results[index])
  }

  return (
    <dialog
      ref={dialog}
      onClose={() => onOpenChange(false)}
      onClick={(e) => e.target === dialog.current && onOpenChange(false)}
      className="cmdk m-auto mt-[15vh] w-[min(560px,calc(100vw-2rem))] overflow-hidden rounded-xl border border-border bg-surface p-0 text-fg shadow-lg backdrop:bg-black/50 backdrop:backdrop-blur-sm"
    >
      <style>{`
        .cmdk[open] { animation: cmdk-in var(--dur-base) var(--ease-out-expo); }
        @keyframes cmdk-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
      `}</style>
      <input
        autoFocus
        value={query}
        onChange={(e) => {
          setQuery(e.target.value)
          setIndex(0)
        }}
        onKeyDown={onKeyDown}
        placeholder="Search patterns…"
        className="w-full border-b border-border bg-transparent px-4 py-3.5 text-base outline-none placeholder:text-fg-muted"
      />
      <ul className="max-h-80 overflow-y-auto p-2" role="listbox">
        {results.length === 0 && <li className="px-3 py-6 text-center text-sm text-fg-muted">No matches</li>}
        {results.map((c, i) => (
          <li
            key={c.id}
            role="option"
            aria-selected={i === index}
            onMouseMove={() => setIndex(i)}
            onClick={() => run(c)}
            className={`flex cursor-pointer items-center justify-between rounded-md px-3 py-2 text-sm ${
              i === index ? 'bg-accent-soft text-accent' : ''
            }`}
          >
            <span>{c.label}</span>
            {c.group && <span className="font-mono text-xs text-fg-muted">{c.group}</span>}
          </li>
        ))}
      </ul>
    </dialog>
  )
}

const DEMO: Command[] = [
  { id: 'new', label: 'New project', group: 'Create' },
  { id: 'invite', label: 'Invite teammate', group: 'Create' },
  { id: 'theme', label: 'Toggle theme', group: 'Settings' },
  { id: 'billing', label: 'Open billing', group: 'Settings' },
  { id: 'docs', label: 'Search docs', group: 'Help' },
]

export default function CommandPaletteDemo() {
  const [open, setOpen] = useState(false)
  const [last, setLast] = useState<string | null>(null)
  return (
    <div className="flex flex-col items-start gap-3">
      <button
        onClick={() => setOpen(true)}
        className="flex w-72 items-center justify-between rounded-md border border-border bg-surface px-3 py-2 text-sm text-fg-muted hover:text-fg"
      >
        Search…
        <span className="font-mono text-xs">click</span>
      </button>
      <p className="text-sm text-fg-muted">{last ? `Ran: ${last}` : 'Open it, type, use ↑ ↓ and Enter.'}</p>
      <CommandPalette commands={DEMO} open={open} onOpenChange={setOpen} onRun={(c) => setLast(c.label)} hotkey={false} />
    </div>
  )
}
```

# Toasts
> Provider + useToast() hook. Stacks up to four, auto-dismisses, springs in, announced via aria-live.
- **Category:** Components
- **Slug:** toast
- **Tags:** notification, snackbar, feedback, alert
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/toast
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/Toast.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/Toast.tsx
- **Reference:** [Fuller alternative: Sonner](https://sonner.emilkowal.ski/)

## When to use
- Confirming a background action (saved, sent, copied)
- Never for errors the user must act on; use inline errors

## Accessibility

aria-live="polite" region; dismiss buttons labelled.


## Source
`src/patterns/components/Toast.tsx`
```tsx
import { createContext, useCallback, useContext, useState, type ReactNode } from 'react'

/*
 * Stacked toasts. A provider owns the queue; any component calls
 * useToast()('Saved'). Toasts auto-dismiss, pause on hover, and live in an
 * aria-live region so screen readers announce them.
 */

type Tone = 'default' | 'success' | 'danger'
type Toast = { id: number; message: string; tone: Tone }

const Ctx = createContext<(message: string, tone?: Tone) => void>(() => {})
export const useToast = () => useContext(Ctx)

const TONE: Record<Tone, string> = {
  default: 'bg-fg',
  success: 'bg-success',
  danger: 'bg-danger',
}

export function ToastProvider({ children, duration = 3500 }: { children: ReactNode; duration?: number }) {
  const [toasts, setToasts] = useState<Toast[]>([])

  const dismiss = useCallback((id: number) => setToasts((t) => t.filter((x) => x.id !== id)), [])

  const push = useCallback(
    (message: string, tone: Tone = 'default') => {
      const id = Date.now() + Math.random()
      setToasts((t) => [...t.slice(-3), { id, message, tone }])
      setTimeout(() => dismiss(id), duration)
    },
    [dismiss, duration],
  )

  return (
    <Ctx.Provider value={push}>
      {children}
      <style>{`
        .toast { animation: toast-in var(--dur-slow) var(--ease-spring); }
        @keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(0.96); } }
      `}</style>
      <ol aria-live="polite" className="pointer-events-none fixed right-4 bottom-4 z-[500] flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-2">
        {toasts.map((t) => (
          <li
            key={t.id}
            className="toast pointer-events-auto flex items-center gap-3 rounded-lg border border-border bg-surface px-4 py-3 text-sm shadow-lg"
          >
            <span className={`h-2 w-2 shrink-0 rounded-full ${TONE[t.tone]}`} />
            <span className="flex-1">{t.message}</span>
            <button onClick={() => dismiss(t.id)} className="text-fg-muted hover:text-fg" aria-label="Dismiss">
              ✕
            </button>
          </li>
        ))}
      </ol>
    </Ctx.Provider>
  )
}

function Triggers() {
  const toast = useToast()
  const btn = 'rounded-md border border-border bg-surface px-4 py-2 text-sm hover:bg-surface-2'
  return (
    <div className="flex flex-wrap gap-3">
      <button className={btn} onClick={() => toast('Draft saved')}>Default</button>
      <button className={btn} onClick={() => toast('Payment received', 'success')}>Success</button>
      <button className={btn} onClick={() => toast('Upload failed, retry?', 'danger')}>Error</button>
    </div>
  )
}

export default function ToastDemo() {
  return (
    <ToastProvider>
      <Triggers />
    </ToastProvider>
  )
}
```

# Drawer
> Left or right sheet on the native <dialog>, with animated exit and backdrop fade.
- **Category:** Components
- **Slug:** drawer
- **Tags:** sheet, side panel, dialog, filters, off-canvas
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/drawer
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/Drawer.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/Drawer.tsx

## When to use
- Filters, settings, detail panes that keep list context
- Mobile navigation

## Accessibility

Native <dialog> modal: focus trap, Esc closes, background inert; close button labelled.


## Source
`src/patterns/components/Drawer.tsx`
```tsx
import { useEffect, useRef, useState, type ReactNode } from 'react'

/*
 * Side drawer on the native <dialog>. showModal() gives focus trapping,
 * Esc-to-close and inert background for free. Closing plays the exit
 * animation first, then calls close().
 */
export function Drawer({
  open,
  onClose,
  side = 'right',
  title,
  children,
}: {
  open: boolean
  onClose: () => void
  side?: 'left' | 'right'
  title: string
  children: ReactNode
}) {
  const ref = useRef<HTMLDialogElement>(null)
  const [closing, setClosing] = useState(false)

  useEffect(() => {
    const d = ref.current
    if (!d) return
    if (open && !d.open) {
      setClosing(false)
      d.showModal()
    } else if (!open && d.open) {
      setClosing(true)
      const t = setTimeout(() => d.close(), 250)
      return () => clearTimeout(t)
    }
  }, [open])

  return (
    <dialog
      ref={ref}
      data-side={side}
      data-closing={closing || undefined}
      onCancel={(e) => {
        e.preventDefault()
        onClose()
      }}
      onClick={(e) => e.target === ref.current && onClose()}
      className="drawer m-0 h-dvh max-h-none w-[min(400px,90vw)] max-w-none border-border bg-surface p-0 text-fg backdrop:bg-black/40"
    >
      <style>{`
        .drawer[data-side='right'] { margin-left: auto; border-left-width: 1px; --from: 100%; }
        .drawer[data-side='left'] { margin-right: auto; border-right-width: 1px; --from: -100%; }
        .drawer[open] { animation: drawer-in var(--dur-slow) var(--ease-out-expo); }
        .drawer[data-closing] { animation: drawer-out 250ms var(--ease-in-out) forwards; }
        .drawer[open]::backdrop { animation: fade-in var(--dur-base); }
        .drawer[data-closing]::backdrop { animation: fade-out 250ms forwards; }
        @keyframes drawer-in { from { transform: translateX(var(--from)); } }
        @keyframes drawer-out { to { transform: translateX(var(--from)); } }
        @keyframes fade-in { from { opacity: 0; } }
        @keyframes fade-out { to { opacity: 0; } }
      `}</style>
      <div className="flex h-full flex-col">
        <header className="flex items-center justify-between border-b border-border px-5 py-4">
          <h2 className="font-medium">{title}</h2>
          <button onClick={onClose} className="text-fg-muted hover:text-fg" aria-label="Close">
            ✕
          </button>
        </header>
        <div className="flex-1 overflow-y-auto p-5">{children}</div>
      </div>
    </dialog>
  )
}

export default function DrawerDemo() {
  const [side, setSide] = useState<'left' | 'right' | null>(null)
  return (
    <div className="flex gap-3">
      {(['left', 'right'] as const).map((s) => (
        <button
          key={s}
          onClick={() => setSide(s)}
          className="rounded-md border border-border bg-surface px-4 py-2 text-sm capitalize hover:bg-surface-2"
        >
          Open {s}
        </button>
      ))}
      <Drawer open={side !== null} side={side ?? 'right'} onClose={() => setSide(null)} title="Filters">
        <div className="space-y-4 text-sm">
          {['Status', 'Owner', 'Date range', 'Tags'].map((f) => (
            <label key={f} className="block">
              <span className="mb-1.5 block text-fg-muted">{f}</span>
              <input className="w-full rounded-md border border-border bg-bg px-3 py-2 outline-none focus:border-accent" />
            </label>
          ))}
        </div>
      </Drawer>
    </div>
  )
}
```

# Sound opt-in
> Asks before playing sound with two equal choices, remembers the answer and leaves a small equaliser toggle.
- **Category:** Components
- **Slug:** sound-opt-in
- **Tags:** audio, consent, sound toggle, immersive
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/sound-opt-in
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/SoundOptIn.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/SoundOptIn.tsx

## When to use
- Immersive sites with music or UI sounds
- Any autoplay-audio temptation

## Accessibility

No audio without an explicit click; toggle uses aria-pressed; animation stops under reduced motion.


## Source
`src/patterns/components/SoundOptIn.tsx`
```tsx
import { useEffect, useState } from 'react'

/*
 * Ask before playing sound. A non-blocking bar on first visit with two
 * equal choices; the answer is remembered and a small toggle stays in the
 * corner afterwards. Audio never autoplays without a click, which is also
 * what browsers require anyway.
 */

const KEY = 'sound-pref'

export function useSoundPref() {
  const [pref, setPref] = useState<'on' | 'off' | null>(() => {
    try {
      return (localStorage.getItem(KEY) as 'on' | 'off' | null) ?? null
    } catch {
      return null
    }
  })
  useEffect(() => {
    try {
      if (pref) localStorage.setItem(KEY, pref)
      else localStorage.removeItem(KEY)
    } catch {}
  }, [pref])
  return [pref, setPref] as const
}

export function SoundOptIn({ pref, onChange }: { pref: 'on' | 'off' | null; onChange: (p: 'on' | 'off' | null) => void }) {
  if (pref === null) {
    return (
      <div
        role="region"
        aria-label="Sound preference"
        className="flex flex-wrap items-center gap-3 rounded-full border border-border bg-surface/90 px-4 py-2 text-sm shadow-lg backdrop-blur"
      >
        <span className="flex-1">This site has sound. Turn it on?</span>
        <button onClick={() => onChange('on')} className="rounded-full bg-fg px-3 py-1 text-xs font-medium text-bg">
          Sound on
        </button>
        <button onClick={() => onChange('off')} className="rounded-full border border-border px-3 py-1 text-xs">
          Continue without
        </button>
      </div>
    )
  }
  return (
    <button
      onClick={() => onChange(pref === 'on' ? 'off' : 'on')}
      aria-pressed={pref === 'on'}
      className="flex items-center gap-2 rounded-full border border-border px-3 py-1 font-mono text-xs text-fg-muted hover:text-fg"
    >
      <span className="flex h-3 items-end gap-[2px]" aria-hidden>
        {[0, 1, 2].map((i) => (
          <span
            key={i}
            className="w-[2px] bg-current"
            style={{
              height: pref === 'on' ? undefined : '3px',
              animation: pref === 'on' ? `eq .9s ${i * 0.15}s ease-in-out infinite alternate` : 'none',
            }}
          />
        ))}
      </span>
      sound {pref}
      <style>{`@keyframes eq { from { height: 3px } to { height: 12px } } @media (prefers-reduced-motion: reduce) { [aria-pressed] span span { animation: none !important; height: 8px !important; } }`}</style>
    </button>
  )
}

export default function SoundOptInDemo() {
  const [pref, setPref] = useState<'on' | 'off' | null>(null)
  return (
    <div className="space-y-4">
      <SoundOptIn pref={pref} onChange={setPref} />
      <button onClick={() => setPref(null)} className="text-sm text-fg-muted hover:text-fg">
        ↻ Reset (first visit)
      </button>
    </div>
  )
}
```

# Liquid glass button
> Glass pill: backdrop blur + saturate, bevel shadows, and a pointer-following highlight on registered CSS properties.
- **Category:** Components
- **Slug:** liquid-glass-button
- **Tags:** glassmorphism, liquid glass, button, backdrop-filter, @property
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/liquid-glass-button
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/LiquidGlassButton.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/LiquidGlassButton.tsx

## When to use
- CTAs over imagery, video or shader backgrounds
- Apple-style glass UI

## Accessibility

Native button. Check text contrast against the actual background; transition removed under reduced motion.


## Source
`src/patterns/components/LiquidGlassButton.tsx`
```tsx
import type { ButtonHTMLAttributes } from 'react'

/*
 * Liquid glass pill. backdrop-filter blurs and saturates what is behind it;
 * layered inset shadows fake a thick bevel; a radial highlight follows the
 * pointer. Pointer position lives in registered CSS properties (@property),
 * so the highlight can transition smoothly with zero per-frame JS.
 * Needs something colourful behind it to read as glass.
 */

const CSS = `
@property --gx { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --gy { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.glass {
  position: relative; isolation: isolate; overflow: hidden;
  background: rgb(255 255 255 / .08);
  backdrop-filter: blur(14px) saturate(1.8) contrast(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.8) contrast(1.1);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .45),
    inset 0 -1px 0 rgb(255 255 255 / .12),
    inset 0 0 0 1px rgb(255 255 255 / .14),
    inset 0 -10px 18px -10px rgb(255 255 255 / .25),
    0 8px 24px rgb(0 0 0 / .25);
  transition: --gx .35s var(--ease-out-expo), --gy .35s var(--ease-out-expo), transform .2s var(--ease-out-expo);
}
.glass::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(120% 90% at var(--gx) var(--gy), rgb(255 255 255 / .38), transparent 55%);
}
.glass:hover { --gy: 30%; }
.glass:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .glass { transition: none; } }
`

export function LiquidGlassButton({ className = '', children, ...rest }: ButtonHTMLAttributes<HTMLButtonElement>) {
  return (
    <button
      {...rest}
      onPointerMove={(e) => {
        const r = e.currentTarget.getBoundingClientRect()
        e.currentTarget.style.setProperty('--gx', `${((e.clientX - r.left) / r.width) * 100}%`)
        e.currentTarget.style.setProperty('--gy', `${((e.clientY - r.top) / r.height) * 100}%`)
      }}
      onPointerLeave={(e) => {
        e.currentTarget.style.removeProperty('--gx')
        e.currentTarget.style.removeProperty('--gy')
      }}
      className={`glass rounded-full px-7 py-3 text-sm font-medium text-white ${className}`}
    >
      <style>{CSS}</style>
      {children}
    </button>
  )
}

export default function LiquidGlassDemo() {
  return (
    <div
      className="relative grid h-72 place-items-center overflow-hidden rounded-xl"
      style={{
        background:
          'radial-gradient(circle at 25% 35%, #f97316 0 18%, transparent 19%), radial-gradient(circle at 70% 60%, #8b5cf6 0 22%, transparent 23%), radial-gradient(circle at 50% 110%, #06b6d4 0 30%, transparent 31%), #0b0b10',
      }}
    >
      <div className="flex gap-4">
        <LiquidGlassButton>Get started</LiquidGlassButton>
        <LiquidGlassButton>Learn more</LiquidGlassButton>
      </div>
    </div>
  )
}
```

# Expanding cards
> A rail of tall slivers; the active one widens into a full card. Caption laid out at final width so it never rewraps.
- **Category:** Components
- **Slug:** expanding-cards
- **Tags:** accordion, cards, gallery, hover expand, flex-grow
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/expanding-cards
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/ExpandingCards.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/ExpandingCards.tsx

## When to use
- Destination / product / portfolio pickers
- Feature showcases with imagery

## Accessibility

Buttons with aria-expanded; activates on hover, focus and click so keyboard and touch work.


## Source
`src/patterns/components/ExpandingCards.tsx`
```tsx
import { useState } from 'react'

/*
 * A rail of tall slivers; the active one grows into a full card via
 * flex-grow. The caption is laid out at the final width (min-width), so text
 * never rewraps mid-animation, it is just clipped until there is room.
 * Works on hover, focus and click, so keyboard and touch both get it.
 */

const ITEMS = [
  { title: 'Northern Lights', place: 'Tromsø', hue: 160 },
  { title: 'Salt Flats', place: 'Uyuni', hue: 200 },
  { title: 'Red Dunes', place: 'Sossusvlei', hue: 20 },
  { title: 'Cherry Blossom', place: 'Kyoto', hue: 330 },
  { title: 'Glacier Lagoon', place: 'Jökulsárlón', hue: 190 },
]

export default function ExpandingCards() {
  const [active, setActive] = useState(0)
  return (
    <div className="flex h-80 gap-2" role="group" aria-label="Destinations">
      {ITEMS.map((it, i) => {
        const on = i === active
        return (
          <button
            key={it.title}
            aria-expanded={on}
            onMouseEnter={() => setActive(i)}
            onFocus={() => setActive(i)}
            onClick={() => setActive(i)}
            className="relative min-w-12 overflow-hidden rounded-xl text-left text-white transition-[flex-grow] duration-500 ease-out-expo"
            style={{
              flexGrow: on ? 6 : 1,
              flexBasis: 0,
              background: `linear-gradient(160deg, hsl(${it.hue} 70% 55%), hsl(${it.hue + 30} 60% 20%))`,
            }}
          >
            <div
              className="absolute bottom-0 left-0 min-w-56 p-5 transition-opacity duration-300"
              style={{ opacity: on ? 1 : 0, transitionDelay: on ? '200ms' : '0ms' }}
            >
              <p className="font-mono text-[11px] tracking-wider uppercase opacity-80">{it.place}</p>
              <p className="font-display text-3xl italic">{it.title}</p>
            </div>
            <span
              className="absolute top-4 left-1/2 -translate-x-1/2 font-mono text-xs opacity-80 transition-opacity"
              style={{ opacity: on ? 0 : 0.8 }}
              aria-hidden
            >
              0{i + 1}
            </span>
          </button>
        )
      })}
    </div>
  )
}
```

# Morph pill card
> An avatar pill that grows into a full profile card: one surface animating between two sizes.
- **Category:** Components
- **Slug:** morph-pill-card
- **Tags:** morph, hover card, profile, avatar, expand
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/morph-pill-card
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/MorphPillCard.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/MorphPillCard.tsx

## When to use
- Team / author / creator previews
- Compact UI that reveals detail on intent

## Accessibility

Focusable with aria-expanded; opens on focus and toggles with Enter/Space; hidden button removed from tab order when closed.


## Source
`src/patterns/components/MorphPillCard.tsx`
```tsx
import { useState } from 'react'

/*
 * An avatar pill that grows into a full profile card. It is one element
 * whose width, height and radius animate between two sizes, with content
 * cross-fading inside, so the pill visibly becomes the card instead of a
 * second card appearing. Opens on hover or focus, toggles on click/Enter.
 */

export default function MorphPillCard() {
  const [open, setOpen] = useState(false)
  return (
    <div className="grid h-80 place-items-center">
      <div
        role="group"
        aria-label="Maya Chen, product designer"
        onMouseEnter={() => setOpen(true)}
        onMouseLeave={() => setOpen(false)}
        onFocus={() => setOpen(true)}
        onBlur={() => setOpen(false)}
        className="relative overflow-hidden border border-border bg-surface shadow-md transition-all duration-500 ease-out-expo"
        style={{ width: open ? 300 : 190, height: open ? 260 : 52, borderRadius: open ? 20 : 999 }}
      >
        <button
          type="button"
          aria-expanded={open}
          onClick={() => setOpen((o) => !o)}
          className="absolute flex items-center gap-3 text-left transition-all duration-500 ease-out-expo"
          style={{ top: open ? 20 : 8, left: open ? 20 : 8 }}
        >
          <div
            className="shrink-0 rounded-full bg-gradient-to-br from-pink-400 to-violet-600 transition-all duration-500 ease-out-expo"
            style={{ width: open ? 56 : 36, height: open ? 56 : 36 }}
          />
          <div>
            <p className="text-sm font-medium whitespace-nowrap">Maya Chen</p>
            <p className="text-xs whitespace-nowrap text-fg-muted">Product designer</p>
          </div>
        </button>
        <div
          className="absolute inset-x-5 bottom-5 space-y-4 transition-all duration-500"
          style={{ opacity: open ? 1 : 0, transform: open ? 'none' : 'translateY(10px)', transitionDelay: open ? '150ms' : '0ms' }}
          aria-hidden={!open}
        >
          <p className="text-sm text-fg-muted">Designing calm interfaces for noisy data. Previously at Linear.</p>
          <div className="grid grid-cols-3 text-center text-xs">
            {[['128', 'shots'], ['9.4k', 'followers'], ['312', 'following']].map(([n, l]) => (
              <div key={l}>
                <p className="font-medium text-fg">{n}</p>
                <p className="text-fg-muted">{l}</p>
              </div>
            ))}
          </div>
          <button tabIndex={open ? 0 : -1} className="w-full rounded-full bg-fg py-2 text-xs font-medium text-bg">
            Follow
          </button>
        </div>
      </div>
    </div>
  )
}
```

# Fan deck
> A hand of cards splayed from one pivot below the deck; the focused card lifts out of the spread.
- **Category:** Components
- **Slug:** fan-deck
- **Tags:** cards, fan, deck, rotate, transform-origin
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/fan-deck
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/FanDeck.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/FanDeck.tsx

## When to use
- Services, steps, pricing plans, collectibles
- Playful portfolio sections

## Accessibility

Each card is a button with aria-pressed; arrow keys move between cards.


## Source
`src/patterns/components/FanDeck.tsx`
```tsx
import { useState } from 'react'

/*
 * A hand of cards splayed from a pivot below the deck. Every card uses the
 * same transform-origin (far below its bottom edge) and a single rotate(),
 * so the fan geometry falls out of one number per card. The focused card
 * lifts out of the spread. Arrow keys move focus; each card is a button.
 */

const CARDS = [
  { t: 'Strategy', c: '#f97316' },
  { t: 'Research', c: '#eab308' },
  { t: 'Design', c: '#84cc16' },
  { t: 'Build', c: '#06b6d4' },
  { t: 'Launch', c: '#8b5cf6' },
  { t: 'Grow', c: '#f472b6' },
]

export default function FanDeck() {
  const [active, setActive] = useState(2)
  const mid = (CARDS.length - 1) / 2
  return (
    <div
      className="relative mx-auto h-80 w-full max-w-lg"
      onKeyDown={(e) => {
        if (e.key === 'ArrowRight') setActive((a) => Math.min(a + 1, CARDS.length - 1))
        if (e.key === 'ArrowLeft') setActive((a) => Math.max(a - 1, 0))
      }}
    >
      {CARDS.map((card, i) => {
        const on = i === active
        const angle = (i - mid) * 9
        return (
          <button
            key={card.t}
            onClick={() => setActive(i)}
            onFocus={() => setActive(i)}
            aria-pressed={on}
            className="absolute bottom-6 left-1/2 flex h-56 w-40 -ml-20 flex-col justify-between rounded-2xl border border-black/10 p-4 text-left text-black shadow-lg transition-transform duration-500 ease-out-expo"
            style={{
              background: card.c,
              transformOrigin: '50% 260%',
              transform: `rotate(${angle}deg) translateY(${on ? -36 : 0}px) scale(${on ? 1.06 : 1})`,
              zIndex: on ? 10 : i,
            }}
          >
            <span className="font-mono text-[11px]">0{i + 1}</span>
            <span className="font-display text-3xl italic">{card.t}</span>
          </button>
        )
      })}
    </div>
  )
}
```

# Form controls
> Input with hint/error, switch, checkbox, radio cards, select and range, all native elements restyled.
- **Category:** Components
- **Slug:** form-controls
- **Tags:** form, input, switch, checkbox, radio, select, slider, validation
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/form-controls
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/FormControls.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/FormControls.tsx

## When to use
- Every form: settings, signup, checkout

## Accessibility

Native controls; labels, aria-describedby for hints/errors, aria-invalid, role=switch with aria-checked, visible focus.


## Source
`src/patterns/components/FormControls.tsx`
```tsx
import { useId, useState } from 'react'

/*
 * Form control set: text input with hint + error, switch, checkbox, radio
 * cards, select and range slider. Everything is a native element restyled,
 * so keyboard, autofill and form submission work unchanged. Errors are
 * linked with aria-describedby and aria-invalid.
 */

export function Field({ label, hint, error, ...rest }: React.InputHTMLAttributes<HTMLInputElement> & { label: string; hint?: string; error?: string }) {
  const id = useId()
  return (
    <div>
      <label htmlFor={id} className="mb-1.5 block text-sm font-medium">{label}</label>
      <input
        id={id}
        aria-invalid={!!error || undefined}
        aria-describedby={hint || error ? `${id}-d` : undefined}
        className="w-full rounded-lg border border-border bg-surface px-3 py-2 text-sm transition-colors outline-none placeholder:text-fg-muted focus:border-accent focus:ring-4 focus:ring-accent/15 aria-[invalid=true]:border-danger aria-[invalid=true]:ring-danger/15"
        {...rest}
      />
      {(hint || error) && <p id={`${id}-d`} className={`mt-1.5 text-xs ${error ? 'text-danger' : 'text-fg-muted'}`}>{error ?? hint}</p>}
    </div>
  )
}

export function Switch({ checked, onChange, label }: { checked: boolean; onChange: (v: boolean) => void; label: string }) {
  return (
    <label className="flex cursor-pointer items-center justify-between gap-4 text-sm">
      {label}
      <button
        role="switch"
        aria-checked={checked}
        onClick={() => onChange(!checked)}
        className={`relative h-6 w-11 shrink-0 rounded-full transition-colors ${checked ? 'bg-accent' : 'bg-surface-2 ring-1 ring-border'}`}
      >
        <span className={`absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform duration-300 ease-out-expo ${checked ? 'translate-x-5' : ''}`} />
      </button>
    </label>
  )
}

export default function FormControls() {
  const [on, setOn] = useState(true)
  const [plan, setPlan] = useState('pro')
  const [vol, setVol] = useState(60)
  return (
    <form className="grid gap-6 md:grid-cols-2" onSubmit={(e) => e.preventDefault()}>
      <div className="space-y-4">
        <Field label="Work email" type="email" placeholder="you@company.com" hint="We'll never share it." />
        <Field label="Username" defaultValue="h@rsh" error="Only letters, numbers and dashes." />
        <div>
          <label htmlFor="fc-role" className="mb-1.5 block text-sm font-medium">Role</label>
          <select id="fc-role" className="w-full appearance-none rounded-lg border border-border bg-surface bg-[url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%228%22><path d=%22M1 1l5 5 5-5%22 stroke=%22gray%22 fill=%22none%22 stroke-width=%221.5%22/></svg>')] bg-[length:12px] bg-[right_12px_center] bg-no-repeat px-3 py-2 text-sm outline-none focus:border-accent">
            <option>Designer</option>
            <option>Engineer</option>
            <option>Founder</option>
          </select>
        </div>
        <div>
          <label htmlFor="fc-vol" className="mb-1.5 flex justify-between text-sm font-medium">Volume <span className="font-mono text-fg-muted">{vol}</span></label>
          <input id="fc-vol" type="range" min={0} max={100} value={vol} onChange={(e) => setVol(+e.target.value)} className="w-full accent-[var(--accent)]" />
        </div>
      </div>
      <div className="space-y-4">
        <Switch label="Email notifications" checked={on} onChange={setOn} />
        <label className="flex items-center gap-3 text-sm">
          <input type="checkbox" defaultChecked className="h-4 w-4 rounded accent-[var(--accent)]" />
          I agree to the terms
        </label>
        <fieldset>
          <legend className="mb-2 text-sm font-medium">Plan</legend>
          <div className="grid grid-cols-2 gap-2">
            {[['free', 'Free', '$0'], ['pro', 'Pro', '$15/mo']].map(([v, l, p]) => (
              <label key={v} className={`cursor-pointer rounded-lg border p-3 text-sm transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-accent ${plan === v ? 'border-accent bg-accent-soft' : 'border-border'}`}>
                <input type="radio" name="plan" value={v} checked={plan === v} onChange={() => setPlan(v)} className="sr-only" />
                <span className="block font-medium">{l}</span>
                <span className="text-fg-muted">{p}</span>
              </label>
            ))}
          </div>
        </fieldset>
        <button className="w-full rounded-lg bg-fg py-2.5 text-sm font-medium text-bg">Save</button>
      </div>
    </form>
  )
}
```

# Animated tabs
> Segmented tabs with a sliding indicator, full WAI-ARIA tabs keyboard pattern.
- **Category:** Components
- **Slug:** animated-tabs
- **Tags:** tabs, segmented control, indicator, aria tabs
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/animated-tabs
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/AnimatedTabs.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/AnimatedTabs.tsx

## When to use
- Section switching, settings, pricing periods

## Accessibility

tablist/tab/tabpanel, roving tabindex, Arrow/Home/End keys, aria-controls/labelledby.


## Source
`src/patterns/components/AnimatedTabs.tsx`
```tsx
import { useLayoutEffect, useRef, useState } from 'react'

/*
 * Tabs with a sliding indicator. The indicator measures the active tab
 * (offsetLeft/Width) and transitions to it. Full WAI-ARIA tabs pattern:
 * roving tabindex, arrow keys / Home / End, aria-controls + tabpanel.
 */

const TABS = [
  ['overview', 'Overview', 'A quick look at everything in one place.'],
  ['activity', 'Activity', 'Recent events across your workspace.'],
  ['settings', 'Settings', 'Preferences, members and billing.'],
  ['billing', 'Billing', 'Invoices and payment methods.'],
]

export default function AnimatedTabs() {
  const [i, setI] = useState(0)
  const refs = useRef<(HTMLButtonElement | null)[]>([])
  const [bar, setBar] = useState({ x: 0, w: 0 })
  useLayoutEffect(() => {
    const el = refs.current[i]
    if (el) setBar({ x: el.offsetLeft, w: el.offsetWidth })
  }, [i])

  const move = (n: number) => {
    const next = (n + TABS.length) % TABS.length
    setI(next)
    refs.current[next]?.focus()
  }

  return (
    <div>
      <div role="tablist" aria-label="Sections" className="relative inline-flex rounded-full bg-surface-2 p-1"
        onKeyDown={(e) => {
          if (e.key === 'ArrowRight') move(i + 1)
          if (e.key === 'ArrowLeft') move(i - 1)
          if (e.key === 'Home') move(0)
          if (e.key === 'End') move(TABS.length - 1)
        }}>
        <span aria-hidden className="absolute top-1 bottom-1 rounded-full bg-surface shadow-sm transition-all duration-300 ease-out-expo" style={{ left: bar.x, width: bar.w }} />
        {TABS.map(([id, label], n) => (
          <button
            key={id}
            ref={(el) => { refs.current[n] = el }}
            role="tab"
            id={`tab-${id}`}
            aria-selected={i === n}
            aria-controls={`panel-${id}`}
            tabIndex={i === n ? 0 : -1}
            onClick={() => setI(n)}
            className={`relative rounded-full px-4 py-1.5 text-sm transition-colors ${i === n ? 'text-fg' : 'text-fg-muted hover:text-fg'}`}
          >
            {label}
          </button>
        ))}
      </div>
      {TABS.map(([id, label, body], n) => (
        <div key={id} role="tabpanel" id={`panel-${id}`} aria-labelledby={`tab-${id}`} hidden={i !== n} className="mt-4 rounded-xl border border-border p-5">
          <h3 className="font-medium">{label}</h3>
          <p className="mt-1 text-sm text-fg-muted">{body}</p>
        </div>
      ))}
    </div>
  )
}
```

# Accordion / FAQ
> Native <details> accordion with smooth height (interpolate-size) and exclusive open via name.
- **Category:** Components
- **Slug:** accordion
- **Tags:** accordion, faq, details, collapsible, disclosure
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/accordion
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/Accordion.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/Accordion.tsx

## When to use
- FAQs, settings groups, long content

## Accessibility

Native details/summary semantics and keyboard; animation off under reduced motion.


## Source
`src/patterns/components/Accordion.tsx`
```tsx
/*
 * Accordion on native <details>/<summary> (keyboard + screen readers for
 * free), with a smooth height animation using `interpolate-size` and
 * ::details-content where supported. `name` makes it exclusive (one open).
 */

const CSS = `
.acc { interpolate-size: allow-keywords; }
.acc::details-content { height: 0; overflow: hidden; transition: height .35s var(--ease-out-expo), content-visibility .35s allow-discrete; }
.acc[open]::details-content { height: auto; }
.acc summary::-webkit-details-marker { display: none; }
.acc[open] .chev { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .acc::details-content { transition: none; } }
`

const FAQ = [
  ['What is UI Lab?', 'A reference library of UI patterns, each a single file with a live demo, built to be read by AI agents and humans.'],
  ['Can I use the code?', 'Yes. Copy tokens.css first, then any pattern file. Most have no dependencies beyond React and Tailwind.'],
  ['Does it handle accessibility?', 'Every pattern lists its keyboard, screen-reader and reduced-motion behaviour in its doc.'],
  ['How do I add a pattern?', 'Add a file under src/patterns and one entry in src/meta.ts. Everything else is generated.'],
]

export default function Accordion() {
  return (
    <div className="divide-y divide-border rounded-xl border border-border">
      <style>{CSS}</style>
      {FAQ.map(([q, a], i) => (
        <details key={q} name="faq" className="acc group" open={i === 0}>
          <summary className="flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-4 font-medium">
            {q}
            <span className="chev text-xl leading-none text-fg-muted transition-transform duration-300" aria-hidden>+</span>
          </summary>
          <p className="px-5 pb-4 text-sm text-fg-muted">{a}</p>
        </details>
      ))}
    </div>
  )
}
```

# Tooltip
> Shows on hover and focus, hides on Escape, linked with aria-describedby.
- **Category:** Components
- **Slug:** tooltip
- **Tags:** tooltip, hint, popover, aria-describedby
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/tooltip
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/Tooltip.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/Tooltip.tsx

## When to use
- Icon buttons, truncated labels, shortcuts

## Accessibility

role=tooltip + aria-describedby; focus shows it; Escape dismisses. Never put essential info only in a tooltip.


## Source
`src/patterns/components/Tooltip.tsx`
```tsx
import { useId, useState, type ReactElement } from 'react'

/*
 * Tooltip that shows on hover AND keyboard focus, hides on Escape, and is
 * wired with aria-describedby. Positioned with plain CSS (top/bottom), which
 * covers most cases; for viewport collision use CSS anchor positioning or
 * Floating UI.
 */

export function Tooltip({ label, side = 'top', children }: { label: string; side?: 'top' | 'bottom'; children: ReactElement<{ 'aria-describedby'?: string }> }) {
  const id = useId()
  const [open, setOpen] = useState(false)
  return (
    <span
      className="relative inline-flex"
      onPointerEnter={() => setOpen(true)}
      onPointerLeave={() => setOpen(false)}
      onFocus={() => setOpen(true)}
      onBlur={() => setOpen(false)}
      onKeyDown={(e) => e.key === 'Escape' && setOpen(false)}
    >
      <span aria-describedby={id} className="inline-flex">{children}</span>
      <span
        role="tooltip"
        id={id}
        className={`pointer-events-none absolute left-1/2 z-50 -translate-x-1/2 rounded-md bg-fg px-2 py-1 text-xs whitespace-nowrap text-bg shadow-md transition-all duration-150 ${
          side === 'top' ? 'bottom-full mb-2' : 'top-full mt-2'
        } ${open ? 'opacity-100' : 'translate-y-1 opacity-0'}`}
      >
        {label}
      </span>
    </span>
  )
}

export default function TooltipDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4 py-10">
      {[['B', 'Bold (Ctrl+B)'], ['I', 'Italic (Ctrl+I)'], ['U', 'Underline (Ctrl+U)']].map(([l, t]) => (
        <Tooltip key={l} label={t}>
          <button className="grid h-10 w-10 place-items-center rounded-md border border-border font-semibold" aria-label={t.split(' ')[0]}>{l}</button>
        </Tooltip>
      ))}
      <Tooltip label="Shown below" side="bottom">
        <button className="rounded-md border border-border px-3 py-2 text-sm">Bottom</button>
      </Tooltip>
    </div>
  )
}
```

# Confirm modal
> Destructive-action dialog: focus starts on Cancel, type-to-confirm guard, native <dialog>.
- **Category:** Components
- **Slug:** confirm-modal
- **Tags:** modal, dialog, confirm, destructive, delete
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/confirm-modal
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/ConfirmModal.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/ConfirmModal.tsx

## When to use
- Delete / irreversible actions

## Accessibility

showModal focus trap + Esc, aria-labelledby/describedby, safe default focus, result announced.


## Source
`src/patterns/components/ConfirmModal.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'

/*
 * Confirm dialog on native <dialog>.showModal(): focus trap, Esc, inert
 * background. Initial focus goes to the SAFE action (Cancel), the
 * destructive button is visually distinct, and typing the name to confirm
 * guards irreversible actions. Returns focus to the trigger on close.
 */

export function ConfirmModal({ open, onClose, onConfirm, name }: { open: boolean; onClose: () => void; onConfirm: () => void; name: string }) {
  const ref = useRef<HTMLDialogElement>(null)
  const [typed, setTyped] = useState('')
  useEffect(() => {
    const d = ref.current!
    if (open && !d.open) {
      setTyped('')
      d.showModal()
    } else if (!open && d.open) d.close()
  }, [open])

  return (
    <dialog
      ref={ref}
      onClose={onClose}
      aria-labelledby="cm-title"
      aria-describedby="cm-desc"
      className="modal m-auto w-[min(420px,calc(100vw-2rem))] rounded-2xl border border-border bg-surface p-6 text-fg shadow-lg backdrop:bg-black/50 backdrop:backdrop-blur-sm"
    >
      <style>{`.modal[open]{animation:pop .3s var(--ease-spring)} @keyframes pop{from{opacity:0;transform:scale(.95)}}`}</style>
      <h2 id="cm-title" className="text-lg font-semibold">Delete project?</h2>
      <p id="cm-desc" className="mt-2 text-sm text-fg-muted">
        This permanently deletes <b className="text-fg">{name}</b> and all its data. This can't be undone.
      </p>
      <label className="mt-4 block text-sm">
        Type <span className="font-mono">{name}</span> to confirm
        <input value={typed} onChange={(e) => setTyped(e.target.value)} className="mt-1.5 w-full rounded-lg border border-border bg-bg px-3 py-2 font-mono text-sm outline-none focus:border-danger" />
      </label>
      <div className="mt-6 flex justify-end gap-2">
        <button autoFocus onClick={onClose} className="rounded-lg border border-border px-4 py-2 text-sm">Cancel</button>
        <button disabled={typed !== name} onClick={() => { onConfirm(); onClose() }} className="rounded-lg bg-danger px-4 py-2 text-sm font-medium text-white disabled:opacity-40">
          Delete
        </button>
      </div>
    </dialog>
  )
}

export default function ConfirmModalDemo() {
  const [open, setOpen] = useState(false)
  const [msg, setMsg] = useState('')
  return (
    <div className="flex flex-col items-start gap-3">
      <button onClick={() => setOpen(true)} className="rounded-lg border border-danger/40 px-4 py-2 text-sm text-danger">Delete project…</button>
      <p className="text-sm text-fg-muted" aria-live="polite">{msg}</p>
      <ConfirmModal open={open} onClose={() => setOpen(false)} onConfirm={() => setMsg('Project deleted (demo).')} name="ui-lab" />
    </div>
  )
}
```

# Magnifying dock
> macOS-style dock: icons grow with a cosine falloff by distance to the pointer.
- **Category:** Components
- **Slug:** dock
- **Tags:** dock, macos, magnify, navigation, hover
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/dock
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/Dock.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/Dock.tsx

## When to use
- App launchers, playful nav, portfolio toolbars

## Accessibility

Labelled buttons in a nav landmark; focus magnifies and shows the label; no transition under reduced motion.


## Source
`src/patterns/components/Dock.tsx`
```tsx
import { useState } from 'react'

/*
 * macOS-style magnifying dock. Each icon's size is a smooth function of its
 * distance to the pointer (cosine falloff), so neighbours grow too. Icons
 * are real buttons with labels; keyboard focus magnifies the focused icon.
 */

const APPS = [['Finder', '🗂'], ['Mail', '✉️'], ['Music', '🎵'], ['Photos', '🌄'], ['Notes', '📝'], ['Maps', '🗺'], ['Settings', '⚙️']]

export default function Dock() {
  const [mx, setMx] = useState<number | null>(null)
  const base = 44
  const max = 76
  const range = 150
  return (
    <div className="grid h-48 place-items-end justify-center">
      <nav
        aria-label="Dock"
        onPointerMove={(e) => setMx(e.clientX)}
        onPointerLeave={() => setMx(null)}
        className="flex items-end gap-2 rounded-2xl border border-border bg-surface/70 px-3 pb-2 pt-2 shadow-lg backdrop-blur"
      >
        {APPS.map(([name, icon]) => (
          <DockIcon key={name} name={name} icon={icon} mx={mx} base={base} max={max} range={range} />
        ))}
      </nav>
    </div>
  )
}

function DockIcon({ name, icon, mx, base, max, range }: { name: string; icon: string; mx: number | null; base: number; max: number; range: number }) {
  const [el, setEl] = useState<HTMLButtonElement | null>(null)
  const [focused, setFocused] = useState(false)
  let size = base
  if (focused) size = max
  else if (mx !== null && el) {
    const r = el.getBoundingClientRect()
    const d = Math.abs(mx - (r.left + r.width / 2))
    if (d < range) size = base + (max - base) * (Math.cos((d / range) * Math.PI) + 1) / 2
  }
  return (
    <button
      ref={setEl}
      aria-label={name}
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}
      className="group relative grid place-items-center rounded-xl bg-surface-2 transition-[width,height] duration-150 ease-out motion-reduce:transition-none"
      style={{ width: size, height: size, fontSize: size * 0.5 }}
    >
      <span aria-hidden>{icon}</span>
      <span className="pointer-events-none absolute -top-8 rounded-md bg-fg px-2 py-0.5 text-xs text-bg opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100">{name}</span>
    </button>
  )
}
```

# OTP / code input
> Six boxes that act as one field: auto-advance, backspace, arrows, paste-to-fill, SMS autofill.
- **Category:** Components
- **Slug:** otp-input
- **Tags:** otp, one-time code, pin, verification, 2fa
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/otp-input
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/OtpInput.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/OtpInput.tsx

## When to use
- 2FA, email verification, PIN entry

## Accessibility

Labelled group, each box labelled "Digit n of 6", inputmode numeric, completion announced.


## Source
`src/patterns/components/OtpInput.tsx`
```tsx
import { useRef, useState } from 'react'

/*
 * One-time-code input: six boxes that behave like one field. Typing
 * advances, Backspace goes back, arrows move, and pasting a full code fills
 * every box. autocomplete="one-time-code" lets phones autofill from SMS.
 * Each box is labelled "Digit n of 6" inside a labelled group.
 */

export default function OtpInput({ length = 6, onComplete }: { length?: number; onComplete?: (code: string) => void }) {
  const [vals, setVals] = useState<string[]>(Array(length).fill(''))
  const refs = useRef<(HTMLInputElement | null)[]>([])
  const [done, setDone] = useState('')

  const set = (next: string[]) => {
    setVals(next)
    const code = next.join('')
    if (code.length === length) {
      setDone(code)
      onComplete?.(code)
    } else setDone('')
  }

  return (
    <div className="space-y-3">
      <div role="group" aria-label="Verification code" className="flex gap-2">
        {vals.map((v, i) => (
          <input
            key={i}
            ref={(el) => { refs.current[i] = el }}
            value={v}
            inputMode="numeric"
            autoComplete={i === 0 ? 'one-time-code' : 'off'}
            maxLength={1}
            aria-label={`Digit ${i + 1} of ${length}`}
            onChange={(e) => {
              const d = e.target.value.replace(/\D/g, '').slice(-1)
              const next = [...vals]
              next[i] = d
              set(next)
              if (d && i < length - 1) refs.current[i + 1]?.focus()
            }}
            onKeyDown={(e) => {
              if (e.key === 'Backspace' && !vals[i] && i > 0) refs.current[i - 1]?.focus()
              if (e.key === 'ArrowLeft' && i > 0) refs.current[i - 1]?.focus()
              if (e.key === 'ArrowRight' && i < length - 1) refs.current[i + 1]?.focus()
            }}
            onPaste={(e) => {
              const digits = e.clipboardData.getData('text').replace(/\D/g, '').slice(0, length)
              if (!digits) return
              e.preventDefault()
              const next = Array(length).fill('').map((_, k) => digits[k] ?? '')
              set(next)
              refs.current[Math.min(digits.length, length - 1)]?.focus()
            }}
            onFocus={(e) => e.target.select()}
            className="h-14 w-11 rounded-lg border border-border bg-surface text-center font-mono text-xl outline-none focus:border-accent focus:ring-4 focus:ring-accent/15"
          />
        ))}
      </div>
      <p aria-live="polite" className="h-5 text-sm text-success">{done && `Code ${done} entered ✓`}</p>
    </div>
  )
}
```

# Stepper
> Numbered steps with a filling rail and checks for completed steps.
- **Category:** Components
- **Slug:** stepper
- **Tags:** stepper, wizard, progress, steps, onboarding
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/stepper
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/Stepper.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/Stepper.tsx

## When to use
- Onboarding, checkout, multi-step forms

## Accessibility

<ol> with aria-current="step" and visually hidden state text.


## Source
`src/patterns/components/Stepper.tsx`
```tsx
import { useState } from 'react'

/*
 * Multi-step progress: numbered steps joined by a filling rail, completed
 * steps get a check. The list is an <ol> with aria-current="step" on the
 * current item, so the position is announced. Back/Next drive it.
 */

const STEPS = ['Account', 'Profile', 'Team', 'Billing', 'Done']

export default function Stepper() {
  const [cur, setCur] = useState(1)
  return (
    <div className="space-y-6">
      <ol className="flex items-center">
        {STEPS.map((s, i) => {
          const state = i < cur ? 'done' : i === cur ? 'current' : 'todo'
          return (
            <li key={s} aria-current={state === 'current' ? 'step' : undefined} className="flex flex-1 items-center last:flex-none">
              <div className="flex flex-col items-center gap-1.5">
                <span
                  className={`grid h-8 w-8 place-items-center rounded-full border text-xs font-medium transition-colors duration-300 ${
                    state === 'done' ? 'border-accent bg-accent text-accent-fg' : state === 'current' ? 'border-accent text-accent ring-4 ring-accent/15' : 'border-border text-fg-muted'
                  }`}
                >
                  {state === 'done' ? '✓' : i + 1}
                </span>
                <span className={`text-xs ${state === 'todo' ? 'text-fg-muted' : ''}`}>{s}</span>
                <span className="sr-only">{state === 'done' ? '(completed)' : state === 'current' ? '(current)' : ''}</span>
              </div>
              {i < STEPS.length - 1 && (
                <div className="mx-2 mb-5 h-0.5 flex-1 overflow-hidden rounded-full bg-border" aria-hidden>
                  <div className="h-full bg-accent transition-transform duration-500 ease-out-expo" style={{ transform: `scaleX(${i < cur ? 1 : 0})`, transformOrigin: 'left' }} />
                </div>
              )}
            </li>
          )
        })}
      </ol>
      <div className="flex justify-between">
        <button disabled={cur === 0} onClick={() => setCur((c) => c - 1)} className="rounded-lg border border-border px-4 py-2 text-sm disabled:opacity-40">Back</button>
        <button disabled={cur === STEPS.length - 1} onClick={() => setCur((c) => c + 1)} className="rounded-lg bg-fg px-4 py-2 text-sm text-bg disabled:opacity-40">Next</button>
      </div>
    </div>
  )
}
```

# Loading, empty & error states
> Skeleton shimmer, empty state, error with retry and loaded list: the four states of any data view.
- **Category:** Components
- **Slug:** loading-states
- **Tags:** skeleton, empty state, error state, loading, placeholder
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/loading-states
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/LoadingStates.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/LoadingStates.tsx

## When to use
- Every list, table, dashboard widget

## Accessibility

aria-busy while loading, role=alert on error, shimmer stops under reduced motion.


## Source
`src/patterns/components/LoadingStates.tsx`
```tsx
import { useState } from 'react'

/*
 * The three states every data view needs: skeleton (loading), empty and
 * error, plus the loaded state, switchable in the demo. Skeletons use a
 * shimmer that stops under reduced motion; the container sets aria-busy
 * while loading and the error uses role="alert".
 */

const CSS = `
.skel { background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: skel 1.4s ease infinite; border-radius: 6px; }
@keyframes skel { from { background-position: 100% 0 } to { background-position: 0 0 } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
`

type S = 'loading' | 'empty' | 'error' | 'loaded'

export default function LoadingStates() {
  const [s, setS] = useState<S>('loading')
  return (
    <div className="space-y-4">
      <style>{CSS}</style>
      <div className="flex flex-wrap gap-2">
        {(['loading', 'empty', 'error', 'loaded'] as S[]).map((x) => (
          <button key={x} aria-pressed={s === x} onClick={() => setS(x)} className={`rounded-full border px-3 py-1 text-xs capitalize ${s === x ? 'border-fg bg-fg text-bg' : 'border-border text-fg-muted'}`}>{x}</button>
        ))}
      </div>
      <div aria-busy={s === 'loading'} className="min-h-56 rounded-xl border border-border p-4">
        {s === 'loading' && (
          <ul className="space-y-4" aria-label="Loading items">
            {[0, 1, 2].map((i) => (
              <li key={i} className="flex items-center gap-3">
                <div className="skel h-10 w-10 !rounded-full" />
                <div className="flex-1 space-y-2">
                  <div className="skel h-3 w-1/3" />
                  <div className="skel h-3 w-2/3" />
                </div>
              </li>
            ))}
          </ul>
        )}
        {s === 'empty' && (
          <div className="grid h-48 place-items-center text-center">
            <div>
              <div className="mx-auto mb-3 grid h-12 w-12 place-items-center rounded-full bg-surface-2 text-xl" aria-hidden>📭</div>
              <p className="font-medium">No projects yet</p>
              <p className="mt-1 text-sm text-fg-muted">Create one to get started.</p>
              <button className="mt-4 rounded-lg bg-fg px-4 py-2 text-sm text-bg">New project</button>
            </div>
          </div>
        )}
        {s === 'error' && (
          <div role="alert" className="grid h-48 place-items-center text-center">
            <div>
              <p className="font-medium text-danger">Couldn't load projects</p>
              <p className="mt-1 text-sm text-fg-muted">Network timeout after 10s.</p>
              <button onClick={() => setS('loading')} className="mt-4 rounded-lg border border-border px-4 py-2 text-sm">Retry</button>
            </div>
          </div>
        )}
        {s === 'loaded' && (
          <ul className="divide-y divide-border">
            {['Aurora site', 'Checkout revamp', 'Mobile onboarding'].map((p, i) => (
              <li key={p} className="flex items-center gap-3 py-3">
                <span className="h-10 w-10 rounded-full" style={{ background: `hsl(${i * 80 + 200} 60% 55%)` }} />
                <div>
                  <p className="text-sm font-medium">{p}</p>
                  <p className="text-xs text-fg-muted">Updated {i + 2}h ago</p>
                </div>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  )
}
```

# Input effects
> Floating label, underline-draw and border-trace inputs using :placeholder-shown, no JS.
- **Category:** Components
- **Slug:** floating-inputs
- **Tags:** input, floating label, form, focus effect, css only
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/floating-inputs
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/FloatingInputs.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/FloatingInputs.tsx

## When to use
- Signup, contact and checkout forms
- Minimal forms where labels double as placeholders

## Accessibility

Real <label for>; label never disappears (it moves); focus is visible; transitions off under reduced motion.


## Source
`src/patterns/components/FloatingInputs.tsx`
```tsx
import { useId } from 'react'

/*
 * Text input effects: floating label (label shrinks to the top when focused
 * or filled, via :placeholder-shown), line-draw underline, and a boxed
 * "border trace" style. Real <label>s; the trick needs placeholder=" " so
 * :placeholder-shown can detect empty.
 */

const CSS = `
.fl { position: relative; }
.fl input { width: 100%; background: transparent; outline: none; padding: 1.25rem .75rem .5rem; border: 1px solid var(--border); border-radius: 10px; transition: border-color .2s; }
.fl label { position: absolute; left: .75rem; top: .9rem; color: var(--fg-muted); pointer-events: none; transform-origin: left; transition: transform .25s var(--ease-out-expo), color .2s; }
.fl input:focus { border-color: var(--accent); }
.fl input:focus + label, .fl input:not(:placeholder-shown) + label { transform: translateY(-.6rem) scale(.78); color: var(--accent); }

.ul { position: relative; padding-top: 1.2rem; }
.ul input { width: 100%; background: transparent; outline: none; border: 0; border-bottom: 1px solid var(--border); padding: .4rem 0; }
.ul label { position: absolute; left: 0; top: 1.6rem; color: var(--fg-muted); pointer-events: none; transition: all .25s var(--ease-out-expo); }
.ul .bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transition: transform .4s var(--ease-out-expo); }
.ul input:focus ~ .bar { transform: scaleX(1); }
.ul input:focus ~ label, .ul input:not(:placeholder-shown) ~ label { top: 0; font-size: .75rem; color: var(--accent); }

.tr { position: relative; }
.tr input { width: 100%; background: var(--surface); outline: none; border: 0; padding: .9rem .9rem; border-radius: 0; }
.tr svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.tr rect { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s var(--ease-out-expo); }
.tr .base { stroke: var(--border); stroke-dashoffset: 0; stroke-width: 1; }
.tr input:focus ~ svg rect:not(.base) { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .fl *, .ul *, .tr * { transition: none !important; } }
`

export default function FloatingInputs() {
  const a = useId(), b = useId(), c = useId()
  return (
    <div className="grid gap-8 md:grid-cols-3">
      <style>{CSS}</style>
      <div className="fl">
        <input id={a} placeholder=" " />
        <label htmlFor={a}>Floating label</label>
      </div>
      <div className="ul">
        <input id={b} placeholder=" " />
        <label htmlFor={b}>Underline draw</label>
        <span className="bar" aria-hidden />
      </div>
      <div className="tr">
        <label htmlFor={c} className="mb-1.5 block text-sm text-fg-muted">Border trace</label>
        <div className="relative">
          <input id={c} placeholder="Type here" />
          <svg aria-hidden preserveAspectRatio="none"><rect className="base" x="0" y="0" width="100%" height="100%" pathLength={1} /><rect x="0" y="0" width="100%" height="100%" pathLength={1} /></svg>
        </div>
      </div>
    </div>
  )
}
```

# Particle burst button
> Click spawns dots that fly out and fade via WAAPI; exported burst() works on any element.
- **Category:** Components
- **Slug:** particle-button
- **Tags:** particles, confetti, burst, click, celebrate
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/particle-button
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/ParticleButton.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/ParticleButton.tsx

## When to use
- Like / celebrate / success moments

## Accessibility

Native button; particles decorative; skipped under reduced motion.


## Source
`src/patterns/components/ParticleButton.tsx`
```tsx
import { useRef, type ButtonHTMLAttributes } from 'react'

/*
 * Particle burst on click: spawns N small dots at the click point that fly
 * out on random angles with the Web Animations API and remove themselves.
 * No state, no library. Skipped under reduced motion (the click still works).
 */

export function burst(host: HTMLElement, x: number, y: number, colors = ['#818cf8', '#f472b6', '#fbbf24', '#34d399'], count = 18) {
  if (matchMedia('(prefers-reduced-motion: reduce)').matches) return
  for (let i = 0; i < count; i++) {
    const p = document.createElement('span')
    const size = 4 + Math.random() * 6
    Object.assign(p.style, {
      position: 'absolute', left: `${x}px`, top: `${y}px`, width: `${size}px`, height: `${size}px`,
      borderRadius: Math.random() > 0.5 ? '50%' : '2px', background: colors[i % colors.length], pointerEvents: 'none',
    })
    host.appendChild(p)
    const a = Math.random() * Math.PI * 2
    const d = 40 + Math.random() * 70
    p.animate(
      [
        { transform: 'translate(-50%,-50%) scale(1)', opacity: 1 },
        { transform: `translate(calc(-50% + ${Math.cos(a) * d}px), calc(-50% + ${Math.sin(a) * d}px)) scale(0) rotate(${Math.random() * 360}deg)`, opacity: 0 },
      ],
      { duration: 600 + Math.random() * 400, easing: 'cubic-bezier(.16,1,.3,1)' },
    ).onfinish = () => p.remove()
  }
}

export function ParticleButton({ children, className = '', onClick, ...rest }: ButtonHTMLAttributes<HTMLButtonElement>) {
  const wrap = useRef<HTMLSpanElement>(null)
  return (
    <span ref={wrap} className="relative inline-block">
      <button
        {...rest}
        onClick={(e) => {
          const r = wrap.current!.getBoundingClientRect()
          const x = e.clientX ? e.clientX - r.left : r.width / 2
          const y = e.clientY ? e.clientY - r.top : r.height / 2
          burst(wrap.current!, x, y)
          onClick?.(e)
        }}
        className={`rounded-full bg-fg px-6 py-3 text-sm font-medium text-bg transition-transform active:scale-95 ${className}`}
      >
        {children}
      </button>
    </span>
  )
}

export default function ParticleButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6 py-10">
      <ParticleButton>Celebrate 🎉</ParticleButton>
      <ParticleButton className="!bg-pink-700 !text-white">♥ Like</ParticleButton>
    </div>
  )
}
```

# SVG distortion button
> feTurbulence + feDisplacementMap wobble on hover/focus, animated then removed so text stays crisp.
- **Category:** Components
- **Slug:** distort-button
- **Tags:** svg filter, distortion, turbulence, hover, glitch
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/distort-button
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/DistortButton.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/DistortButton.tsx

## When to use
- Experimental / art / music sites

## Accessibility

Filter only during the brief animation; off under reduced motion.


## Source
`src/patterns/components/DistortButton.tsx`
```tsx
import { useId, useRef } from 'react'

/*
 * SVG-filter distortion on hover: feTurbulence + feDisplacementMap applied
 * to the button, with the displacement scale animated up then back to 0 by
 * rAF on hover. Gives a liquid/wobble "glitch" without canvas. The filter
 * is removed at rest so text stays crisp.
 */

export function DistortButton({ children, strength = 26 }: { children: React.ReactNode; strength?: number }) {
  const id = useId().replace(/:/g, '')
  const disp = useRef<SVGFEDisplacementMapElement>(null)
  const turb = useRef<SVGFETurbulenceElement>(null)
  const btn = useRef<HTMLButtonElement>(null)

  const play = () => {
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return
    const start = performance.now()
    btn.current!.style.filter = `url(#${id})`
    const tick = (now: number) => {
      const t = Math.min((now - start) / 700, 1)
      const s = Math.sin(t * Math.PI) * strength
      disp.current!.setAttribute('scale', String(s))
      turb.current!.setAttribute('seed', String(Math.floor(t * 20)))
      if (t < 1) requestAnimationFrame(tick)
      else btn.current!.style.filter = ''
    }
    requestAnimationFrame(tick)
  }

  return (
    <>
      <svg width="0" height="0" className="absolute" aria-hidden>
        <filter id={id}>
          <feTurbulence ref={turb} type="fractalNoise" baseFrequency="0.02 0.15" numOctaves="1" result="n" />
          <feDisplacementMap ref={disp} in="SourceGraphic" in2="n" scale="0" xChannelSelector="R" yChannelSelector="G" />
        </filter>
      </svg>
      <button ref={btn} onPointerEnter={play} onFocus={play} className="rounded-lg border-2 border-fg px-8 py-3 font-mono text-sm tracking-widest uppercase">
        {children}
      </button>
    </>
  )
}

export default function DistortButtonDemo() {
  return (
    <div className="flex flex-wrap justify-center gap-6 py-10">
      <DistortButton>Distort</DistortButton>
      <DistortButton strength={50}>More chaos</DistortButton>
    </div>
  )
}
```

# Progress button
> The button fills as its own progress bar, then morphs into a success check.
- **Category:** Components
- **Slug:** progress-button
- **Tags:** progress, button, upload, loading, morph
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/progress-button
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/ProgressButton.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/ProgressButton.tsx

## When to use
- Uploads, submits, long actions

## Accessibility

aria-busy, a role=progressbar with values while busy, completion announced, disabled during work.


## Source
`src/patterns/components/ProgressButton.tsx`
```tsx
import { useState } from 'react'

/*
 * A button that becomes its own progress bar: on click the fill sweeps
 * across it as work progresses, then it morphs into a success check.
 * Uses role="progressbar" semantics on the fill while busy, aria-live for
 * the final state, and disables re-clicks mid-flight.
 */

type S = 'idle' | 'busy' | 'done'

export default function ProgressButton() {
  const [s, setS] = useState<S>('idle')
  const [p, setP] = useState(0)

  const run = () => {
    setS('busy')
    setP(0)
    let v = 0
    const id = setInterval(() => {
      v = Math.min(100, v + 4 + Math.random() * 10)
      setP(v)
      if (v >= 100) {
        clearInterval(id)
        setS('done')
        setTimeout(() => setS('idle'), 1800)
      }
    }, 120)
  }

  return (
    <div className="flex flex-col items-center gap-4 py-8">
      <button
        onClick={run}
        disabled={s !== 'idle'}
        aria-busy={s === 'busy'}
        className={`relative h-12 overflow-hidden rounded-full font-medium text-accent-fg transition-all duration-500 ease-out-expo ${
          s === 'done' ? 'w-12 bg-success' : 'w-52 bg-accent'
        }`}
      >
        {s === 'busy' && (
          <span
            role="progressbar"
            aria-valuenow={Math.round(p)}
            aria-valuemin={0}
            aria-valuemax={100}
            aria-label="Uploading"
            className="absolute inset-y-0 left-0 bg-white/25 transition-[width] duration-150"
            style={{ width: `${p}%` }}
          />
        )}
        <span className="relative">{s === 'idle' ? 'Upload files' : s === 'busy' ? `${Math.round(p)}%` : '✓'}</span>
      </button>
      <p aria-live="polite" className="h-4 text-sm text-fg-muted">{s === 'done' ? 'Upload complete' : ''}</p>
    </div>
  )
}
```

# Gooey FAB menu
> Action bubbles melt out of a floating button via an SVG goo filter; icons stay crisp on a separate layer.
- **Category:** Components
- **Slug:** gooey-menu
- **Tags:** gooey, fab, svg filter, menu, blob
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/gooey-menu
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/GooeyMenu.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/GooeyMenu.tsx

## When to use
- Mobile quick actions, creative tools

## Accessibility

Toggle has aria-expanded; action buttons labelled and removed from tab order when closed.


## Source
`src/patterns/components/GooeyMenu.tsx`
```tsx
import { useState } from 'react'

/*
 * Gooey FAB menu: a blur + alpha-contrast SVG filter (the classic "goo")
 * makes the action bubbles melt out of the main button as they fan out.
 * The filter only applies to the blob layer; labels/icons sit on a crisp
 * layer above so text stays sharp. Real buttons with aria-expanded.
 */

const ITEMS = [['✎', 'Edit'], ['⤴', 'Share'], ['★', 'Favourite'], ['🗑', 'Delete']]

export default function GooeyMenu() {
  const [open, setOpen] = useState(false)
  const angle = (i: number) => (-90 - 60 + i * 40) * (Math.PI / 180)
  const R = 90
  return (
    <div className="grid h-72 place-items-center">
      <svg width="0" height="0" className="absolute" aria-hidden>
        <filter id="goo">
          <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="b" />
          <feColorMatrix in="b" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9" />
        </filter>
      </svg>
      <div className="relative h-16 w-16">
        <div className="absolute inset-0" style={{ filter: 'url(#goo)' }} aria-hidden>
          {ITEMS.map((_, i) => (
            <span
              key={i}
              className="absolute inset-1 rounded-full bg-accent transition-transform duration-500 ease-out-expo motion-reduce:transition-none"
              style={{ transform: open ? `translate(${Math.cos(angle(i)) * R}px, ${Math.sin(angle(i)) * R}px)` : 'none', transitionDelay: `${i * 40}ms` }}
            />
          ))}
          <span className="absolute inset-0 rounded-full bg-accent" />
        </div>
        {ITEMS.map(([icon, label], i) => (
          <button
            key={label}
            aria-label={label}
            tabIndex={open ? 0 : -1}
            aria-hidden={!open}
            className="absolute inset-1 grid place-items-center rounded-full text-lg text-accent-fg transition-all duration-500 ease-out-expo motion-reduce:transition-none"
            style={{ transform: open ? `translate(${Math.cos(angle(i)) * R}px, ${Math.sin(angle(i)) * R}px)` : 'none', opacity: open ? 1 : 0, transitionDelay: `${i * 40}ms` }}
          >
            {icon}
          </button>
        ))}
        <button
          onClick={() => setOpen((o) => !o)}
          aria-expanded={open}
          aria-label={open ? 'Close actions' : 'Open actions'}
          className="absolute inset-0 grid place-items-center rounded-full text-2xl text-accent-fg"
        >
          <span className="transition-transform duration-300" style={{ transform: open ? 'rotate(45deg)' : 'none' }}>+</span>
        </button>
      </div>
    </div>
  )
}
```

# Animated toggle icons
> Hamburger↔close, heart with burst ring, bookmark fill, play↔pause path morph, self-drawing check.
- **Category:** Components
- **Slug:** animated-icons
- **Tags:** icons, toggle, hamburger, like, svg, morph
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/animated-icons
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/AnimatedIcons.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/AnimatedIcons.tsx

## When to use
- Nav toggles, like/save buttons, media controls

## Accessibility

Buttons with aria-label and aria-pressed; animations off under reduced motion.


## Source
`src/patterns/components/AnimatedIcons.tsx`
```tsx
import { useState } from 'react'

/*
 * Animated toggle icons: hamburger ↔ close (three bars rotate/fade),
 * heart like with a burst ring, bookmark fill, play ↔ pause morph, and a
 * self-drawing checkmark. Each is a button with aria-pressed and an
 * accessible label; motion collapses to instant under reduced motion.
 */

const CSS = `
.ai * { transition: transform .4s var(--ease-out-expo), opacity .3s, stroke-dashoffset .5s var(--ease-out-expo), fill .3s, d .35s var(--ease-out-expo); }
.ai .ring { transform-origin: center; transform: scale(0); opacity: 0; }
.ai[aria-pressed=true] .ring { animation: ring .6s var(--ease-out-expo); }
@keyframes ring { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.ai[aria-pressed=true] .pop { animation: pop .45s var(--ease-spring); }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ai *, .ai .ring, .ai .pop { transition: none !important; animation: none !important; } }
`

function Toggle({ label, children }: { label: string; children: (on: boolean) => React.ReactNode }) {
  const [on, setOn] = useState(false)
  return (
    <button aria-label={label} aria-pressed={on} onClick={() => setOn(!on)} className="ai grid h-16 w-16 place-items-center rounded-2xl border border-border hover:bg-surface-2">
      <svg viewBox="0 0 24 24" className="h-7 w-7 overflow-visible" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
        {children(on)}
      </svg>
    </button>
  )
}

export default function AnimatedIcons() {
  return (
    <div className="flex flex-wrap justify-center gap-4 py-8">
      <style>{CSS}</style>
      <Toggle label="Menu">
        {(on) => (
          <>
            <line x1="4" y1="6" x2="20" y2="6" style={{ transformOrigin: '12px 12px', transform: on ? 'translateY(6px) rotate(45deg)' : 'none' }} />
            <line x1="4" y1="12" x2="20" y2="12" style={{ opacity: on ? 0 : 1 }} />
            <line x1="4" y1="18" x2="20" y2="18" style={{ transformOrigin: '12px 12px', transform: on ? 'translateY(-6px) rotate(-45deg)' : 'none' }} />
          </>
        )}
      </Toggle>
      <Toggle label="Like">
        {(on) => (
          <>
            <circle className="ring" cx="12" cy="12" r="10" stroke="#f43f5e" />
            <path className="pop" style={{ transformOrigin: 'center' }} fill={on ? '#f43f5e' : 'none'} stroke={on ? '#f43f5e' : 'currentColor'} d="M12 21s-7-4.35-9.5-8.5C.5 8.5 3 4 7 4c2 0 3.5 1 5 3 1.5-2 3-3 5-3 4 0 6.5 4.5 4.5 8.5C19 16.65 12 21 12 21z" />
          </>
        )}
      </Toggle>
      <Toggle label="Bookmark">
        {(on) => <path className="pop" style={{ transformOrigin: 'center' }} fill={on ? 'currentColor' : 'none'} d="M6 3h12v18l-6-4-6 4z" />}
      </Toggle>
      <Toggle label="Play">
        {(on) => (
          <path
            fill="currentColor"
            stroke="none"
            style={{ d: `path('${on ? 'M6 4h4v16H6zM14 4h4v16h-4z' : 'M6 4l7 4v8l-7 4zM13 8l7 4-7 4z'}')` } as React.CSSProperties}
          />
        )}
      </Toggle>
      <Toggle label="Done">
        {(on) => (
          <>
            <circle cx="12" cy="12" r="10" />
            <path d="M7 12.5l3.2 3.2L17 9" pathLength={1} style={{ strokeDasharray: 1, strokeDashoffset: on ? 0 : 1 }} />
          </>
        )}
      </Toggle>
    </div>
  )
}
```

# Fullscreen overlay menu
> Circle clip-path reveal from the toggle, big links sliding up from masks, hover image previews.
- **Category:** Components
- **Slug:** fullscreen-menu
- **Tags:** menu, overlay, navigation, clip-path, stagger
- **Dependencies:** three-d/_shared.ts (img() placeholder URLs, makeSpinner drag helper)
- **Live demo:** https://ui-lab-weld.vercel.app/#/fullscreen-menu
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/FullscreenMenu.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/FullscreenMenu.tsx

## When to use
- Portfolio / agency / brand site navigation

## Accessibility

aria-expanded/controls, focus moves in and returns to toggle, Esc closes, background inert, closed links untabbable.


## Source
`src/patterns/components/FullscreenMenu.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'
import { img } from '../three-d/_shared'

/*
 * Fullscreen overlay menu: the panel reveals with a circular clip-path from
 * the toggle, big links slide up from masks with a stagger, and hovering a
 * link swaps a preview image. Esc closes, focus moves into the menu and
 * back to the toggle, background marked inert while open.
 */

const LINKS = ['Work', 'Studio', 'Journal', 'Careers', 'Contact']

export default function FullscreenMenu() {
  const [open, setOpen] = useState(false)
  const [hover, setHover] = useState(0)
  const first = useRef<HTMLAnchorElement>(null)
  const toggle = useRef<HTMLButtonElement>(null)

  useEffect(() => {
    if (open) first.current?.focus()
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape' && open) {
        setOpen(false)
        toggle.current?.focus()
      }
    }
    addEventListener('keydown', onKey)
    return () => removeEventListener('keydown', onKey)
  }, [open])

  return (
    <div className="relative h-96 overflow-hidden rounded-xl border border-border bg-bg">
      <div inert={open} className="p-6">
        <p className="font-semibold">◆ atelier</p>
        <p className="mt-24 max-w-xs text-3xl font-semibold tracking-tight">Page content sits here under the menu.</p>
      </div>
      <button
        ref={toggle}
        onClick={() => setOpen((o) => !o)}
        aria-expanded={open}
        aria-controls="fs-menu"
        className="absolute top-4 right-4 z-20 rounded-full bg-fg px-4 py-2 text-sm text-bg"
      >
        {open ? 'Close' : 'Menu'}
      </button>
      <nav
        id="fs-menu"
        aria-label="Main"
        aria-hidden={!open}
        className="absolute inset-0 z-10 grid grid-cols-[1fr_auto] items-center gap-6 bg-neutral-950 p-8 text-white transition-[clip-path] duration-700 ease-[cubic-bezier(.76,0,.24,1)] motion-reduce:transition-none"
        style={{ clipPath: open ? 'circle(150% at calc(100% - 50px) 30px)' : 'circle(0% at calc(100% - 50px) 30px)' }}
      >
        <ul className="space-y-1">
          {LINKS.map((l, i) => (
            <li key={l} className="overflow-hidden">
              <a
                ref={i === 0 ? first : undefined}
                href="#"
                tabIndex={open ? 0 : -1}
                onClick={(e) => e.preventDefault()}
                onPointerEnter={() => setHover(i)}
                onFocus={() => setHover(i)}
                className="block text-5xl font-semibold tracking-tight transition-[transform,color] duration-700 ease-out-expo hover:text-orange-400 motion-reduce:transition-none"
                style={{ transform: open ? 'none' : 'translateY(110%)', transitionDelay: open ? `${250 + i * 60}ms` : '0ms' }}
              >
                {l}
              </a>
            </li>
          ))}
        </ul>
        <div className="hidden h-56 w-44 overflow-hidden rounded-lg sm:block" aria-hidden>
          {LINKS.map((l, i) => (
            <img key={l} src={img(i + 1800, 300, 380)} alt="" className="absolute h-56 w-44 object-cover transition-opacity duration-300" style={{ opacity: hover === i ? 1 : 0 }} />
          ))}
        </div>
      </nav>
    </div>
  )
}
```

# Accessible autocomplete (combobox)
> An autocomplete following the ARIA combobox pattern: focus stays in the input, arrows move through options, Enter picks, Esc closes, and the result count is announced.
- **Category:** Components
- **Slug:** combobox
- **Tags:** combobox, autocomplete, aria-activedescendant, search, form
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/combobox
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/Combobox.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/Combobox.tsx

## When to use
- Search boxes and pickers with a known list
- Replacing a native select when the list is long

## Accessibility

role=combobox with aria-expanded, aria-controls and aria-activedescendant; options are role=option in a listbox; arrows, Home, End, Enter and Esc work; suggestion count is a status message.


## Source
`src/patterns/components/Combobox.tsx`
```tsx
import { useId, useMemo, useRef, useState } from 'react'

/*
 * An accessible autocomplete (the ARIA 1.2 combobox pattern). Focus stays in the input; the highlighted option is
 * exposed with aria-activedescendant. Arrow keys move, Enter picks, Esc closes (and clears on a second press), Home and
 * End jump. The result count is announced in a status region. Options are real list items with role=option.
 */

const CITIES = ['Aberdeen', 'Bath', 'Belfast', 'Birmingham', 'Bristol', 'Cambridge', 'Cardiff', 'Edinburgh', 'Exeter', 'Glasgow', 'Leeds', 'Liverpool', 'London', 'Manchester', 'Newcastle', 'Norwich', 'Oxford', 'Sheffield', 'York']

export default function Combobox() {
  const id = useId()
  const [q, setQ] = useState('')
  const [open, setOpen] = useState(false)
  const [i, setI] = useState(0)
  const [picked, setPicked] = useState('')
  const input = useRef<HTMLInputElement>(null)
  const opts = useMemo(() => (q ? CITIES.filter((c) => c.toLowerCase().startsWith(q.toLowerCase())) : CITIES).slice(0, 8), [q])
  const pick = (c: string) => {
    setPicked(c)
    setQ(c)
    setOpen(false)
    input.current?.focus()
  }
  const key = (e: React.KeyboardEvent) => {
    if (e.key === 'ArrowDown') {
      e.preventDefault()
      if (!open) setOpen(true)
      else setI((n) => Math.min(opts.length - 1, n + 1))
    } else if (e.key === 'ArrowUp') {
      e.preventDefault()
      setI((n) => Math.max(0, n - 1))
    } else if (e.key === 'Home' && open) {
      e.preventDefault()
      setI(0)
    } else if (e.key === 'End' && open) {
      e.preventDefault()
      setI(opts.length - 1)
    } else if (e.key === 'Enter' && open && opts[i]) {
      e.preventDefault()
      pick(opts[i])
    } else if (e.key === 'Escape') {
      if (open) setOpen(false)
      else setQ('')
    }
  }

  return (
    <div className="mx-auto max-w-sm">
      <label htmlFor={`${id}-in`} className="text-sm font-medium">Where are you travelling to?</label>
      <div className="relative mt-1">
        <input
          ref={input}
          id={`${id}-in`}
          role="combobox"
          aria-expanded={open}
          aria-controls={`${id}-list`}
          aria-autocomplete="list"
          aria-activedescendant={open && opts[i] ? `${id}-o${i}` : undefined}
          autoComplete="off"
          value={q}
          onChange={(e) => { setQ(e.target.value); setOpen(true); setI(0); setPicked('') }}
          onKeyDown={key}
          onFocus={() => setOpen(true)}
          onBlur={() => setTimeout(() => setOpen(false), 120)}
          className="min-h-12 w-full rounded-md border border-border bg-surface px-3"
        />
        {open && opts.length > 0 && (
          <ul id={`${id}-list`} role="listbox" aria-label="Cities" className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md border border-border bg-surface p-1 shadow-lg">
            {opts.map((c, n) => (
              <li
                key={c}
                id={`${id}-o${n}`}
                role="option"
                aria-selected={n === i}
                onMouseDown={(e) => { e.preventDefault(); pick(c) }}
                onMouseEnter={() => setI(n)}
                className={`flex min-h-11 cursor-pointer items-center rounded px-3 ${n === i ? 'bg-accent-soft text-accent' : ''}`}
              >
                <span><b className="font-semibold">{c.slice(0, q.length)}</b>{c.slice(q.length)}</span>
              </li>
            ))}
          </ul>
        )}
      </div>
      <p className="mt-2 text-sm text-fg-muted" role="status">
        {picked ? `Selected: ${picked}.` : open ? `${opts.length} suggestion${opts.length === 1 ? '' : 's'}. Use the arrow keys.` : q && opts.length === 0 ? 'No matching cities.' : ' '}
      </p>
      {open && opts.length === 0 && q && <p className="mt-1 text-sm text-fg-muted">Nothing starts with “{q}”.</p>}
    </div>
  )
}
```

# Keyboard date picker
> A calendar grid of buttons with the keyboard model people expect (arrows, Home, End, Page Up and Down), roving tabindex, past dates disabled, and a typed input alongside.
- **Category:** Components
- **Slug:** date-picker
- **Tags:** date picker, calendar, grid, roving tabindex, form
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/date-picker
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/DatePicker.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/DatePicker.tsx

## When to use
- Booking and scheduling forms
- Anywhere a native date input will not do

## Accessibility

Grid with one tab stop; every date has a full spoken name; the month and selection are announced; today is marked by underline and aria-current, not colour alone; typing a date also works.


## Source
`src/patterns/components/DatePicker.tsx`
```tsx
import { useId, useMemo, useRef, useState } from 'react'

/*
 * A date picker built as a grid of buttons, with the keyboard model people expect: arrows move by day and week, Home
 * and End go to the ends of the week, Page Up and Page Down change month, Enter or Space selects. One cell is in the
 * tab order (roving tabindex). Month and selected date are announced; dates before today are disabled with a reason
 * available. The typed input also works, because a calendar alone is slow for someone who knows the date.
 */

const DAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
const iso = (d: Date) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
const sameDay = (a: Date, b: Date) => iso(a) === iso(b)

export default function DatePicker() {
  const id = useId()
  const today = useMemo(() => new Date(), [])
  const [view, setView] = useState(new Date(today.getFullYear(), today.getMonth(), 1))
  const [focus, setFocus] = useState(today)
  const [sel, setSel] = useState<Date | null>(null)
  const grid = useRef<HTMLDivElement>(null)

  const first = (view.getDay() + 6) % 7
  const dim = new Date(view.getFullYear(), view.getMonth() + 1, 0).getDate()
  const cells: (Date | null)[] = [...Array(first).fill(null), ...Array.from({ length: dim }, (_, i) => new Date(view.getFullYear(), view.getMonth(), i + 1))]
  while (cells.length % 7) cells.push(null)
  const disabled = (d: Date) => d < new Date(today.getFullYear(), today.getMonth(), today.getDate())

  const move = (d: Date) => {
    setFocus(d)
    setView(new Date(d.getFullYear(), d.getMonth(), 1))
    requestAnimationFrame(() => grid.current?.querySelector<HTMLButtonElement>(`[data-d="${iso(d)}"]`)?.focus())
  }
  const key = (e: React.KeyboardEvent) => {
    const add = (n: number) => new Date(focus.getFullYear(), focus.getMonth(), focus.getDate() + n)
    const map: Record<string, () => Date> = {
      ArrowLeft: () => add(-1),
      ArrowRight: () => add(1),
      ArrowUp: () => add(-7),
      ArrowDown: () => add(7),
      Home: () => add(-((focus.getDay() + 6) % 7)),
      End: () => add(6 - ((focus.getDay() + 6) % 7)),
      PageUp: () => new Date(focus.getFullYear(), focus.getMonth() - 1, Math.min(focus.getDate(), 28)),
      PageDown: () => new Date(focus.getFullYear(), focus.getMonth() + 1, Math.min(focus.getDate(), 28)),
    }
    if (map[e.key]) {
      e.preventDefault()
      move(map[e.key]())
    }
  }

  return (
    <div className="mx-auto max-w-xs">
      <label htmlFor={`${id}-t`} className="text-sm font-medium">Departure date</label>
      <input
        id={`${id}-t`}
        placeholder="YYYY-MM-DD"
        value={sel ? iso(sel) : ''}
        onChange={(e) => {
          const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e.target.value)
          if (m) {
            const d = new Date(+m[1], +m[2] - 1, +m[3])
            if (!isNaN(+d) && !disabled(d)) { setSel(d); move(d) }
          } else if (!e.target.value) setSel(null)
        }}
        className="mt-1 min-h-11 w-full rounded-md border border-border bg-surface px-3"
      />
      <div className="mt-3 rounded-xl border border-border bg-surface p-3" role="group" aria-label={`${MONTHS[view.getMonth()]} ${view.getFullYear()}`}>
        <div className="flex items-center justify-between">
          <button onClick={() => setView(new Date(view.getFullYear(), view.getMonth() - 1, 1))} aria-label="Previous month" className="grid size-11 place-items-center rounded-md hover:bg-surface-2">‹</button>
          <p className="font-medium" aria-live="polite">{MONTHS[view.getMonth()]} {view.getFullYear()}</p>
          <button onClick={() => setView(new Date(view.getFullYear(), view.getMonth() + 1, 1))} aria-label="Next month" className="grid size-11 place-items-center rounded-md hover:bg-surface-2">›</button>
        </div>
        <div ref={grid} role="grid" aria-label="Choose a date" onKeyDown={key} className="mt-2">
          <div role="row" className="grid grid-cols-7 text-center text-xs text-fg-muted">
            {DAYS.map((d) => <span key={d} role="columnheader" className="py-1">{d}</span>)}
          </div>
          {Array.from({ length: cells.length / 7 }, (_, r) => (
            <div role="row" key={r} className="grid grid-cols-7">
              {cells.slice(r * 7, r * 7 + 7).map((d, c) => (
                <div role="gridcell" key={c} aria-selected={d && sel ? sameDay(d, sel) : undefined} className="grid place-items-center">
                  {d && (
                    <button
                      data-d={iso(d)}
                      tabIndex={sameDay(d, focus) ? 0 : -1}
                      disabled={disabled(d)}
                      aria-current={sameDay(d, today) ? 'date' : undefined}
                      aria-label={d.toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })}
                      onClick={() => { setSel(d); setFocus(d) }}
                      className={`grid size-11 place-items-center rounded-md text-sm tabular-nums disabled:opacity-30 ${sel && sameDay(d, sel) ? 'bg-accent font-semibold text-accent-fg' : 'hover:bg-surface-2'} ${sameDay(d, today) ? 'underline underline-offset-4' : ''}`}
                    >
                      {d.getDate()}
                    </button>
                  )}
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
      <p className="mt-2 text-sm text-fg-muted" role="status">{sel ? `Selected ${sel.toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long' })}.` : 'Use the arrow keys, Page Up and Page Down.'}</p>
    </div>
  )
}
```

# Dropdown action menu
> The ARIA menu-button pattern: a button opens a menu of actions, arrow keys move, type-ahead jumps, Esc closes and returns focus, Tab and outside clicks close.
- **Category:** Components
- **Slug:** menu-button
- **Tags:** menu, dropdown, menuitem, keyboard, roving focus
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/menu-button
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/MenuButton.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/MenuButton.tsx

## When to use
- Row actions, overflow menus and more-buttons
- Actions, not navigation

## Accessibility

aria-haspopup, aria-expanded and aria-controls on the button; role=menu and menuitem; focus moves into the menu on open and back to the button on close; all targets are 44px.


## Source
`src/patterns/components/MenuButton.tsx`
```tsx
import { useEffect, useId, useRef, useState } from 'react'

/*
 * A dropdown action menu following the ARIA menu-button pattern. The button opens a role=menu; arrow keys move
 * through role=menuitem entries (roving focus), Home and End jump, type a letter to jump to a matching item, Esc closes
 * and returns focus to the button, Tab closes. Clicking outside closes. Use it for actions, not for navigation.
 */

const ITEMS = ['Rename', 'Duplicate', 'Move to…', 'Share', 'Archive', 'Delete']

export default function MenuButton() {
  const id = useId()
  const [open, setOpen] = useState(false)
  const [last, setLast] = useState('')
  const btn = useRef<HTMLButtonElement>(null)
  const menu = useRef<HTMLDivElement>(null)
  const items = () => [...(menu.current?.querySelectorAll<HTMLElement>('[role=menuitem]') ?? [])]

  useEffect(() => {
    if (open) items()[0]?.focus()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open])
  useEffect(() => {
    if (!open) return
    const down = (e: MouseEvent) => {
      if (!menu.current?.contains(e.target as Node) && !btn.current?.contains(e.target as Node)) setOpen(false)
    }
    addEventListener('mousedown', down)
    return () => removeEventListener('mousedown', down)
  }, [open])

  const close = (refocus = true) => {
    setOpen(false)
    if (refocus) btn.current?.focus()
  }
  const key = (e: React.KeyboardEvent) => {
    const list = items()
    const i = list.indexOf(document.activeElement as HTMLElement)
    if (e.key === 'ArrowDown') { e.preventDefault(); list[(i + 1) % list.length].focus() }
    else if (e.key === 'ArrowUp') { e.preventDefault(); list[(i - 1 + list.length) % list.length].focus() }
    else if (e.key === 'Home') { e.preventDefault(); list[0].focus() }
    else if (e.key === 'End') { e.preventDefault(); list[list.length - 1].focus() }
    else if (e.key === 'Escape') { e.preventDefault(); close() }
    else if (e.key === 'Tab') close(false)
    else if (e.key.length === 1 && /\w/.test(e.key)) {
      const next = list.find((el, n) => n > i && el.textContent!.toLowerCase().startsWith(e.key.toLowerCase())) ?? list.find((el) => el.textContent!.toLowerCase().startsWith(e.key.toLowerCase()))
      next?.focus()
    }
  }

  return (
    <div className="relative mx-auto grid min-h-72 max-w-xs place-items-start justify-center pt-6">
      <button
        ref={btn}
        id={`${id}-b`}
        aria-haspopup="menu"
        aria-expanded={open}
        aria-controls={`${id}-m`}
        onClick={() => setOpen((o) => !o)}
        onKeyDown={(e) => { if (e.key === 'ArrowDown' && !open) { e.preventDefault(); setOpen(true) } }}
        className="min-h-11 rounded-md border border-border bg-surface px-4 text-sm font-medium hover:bg-surface-2"
      >
        Actions ▾
      </button>
      {open && (
        <div ref={menu} id={`${id}-m`} role="menu" aria-labelledby={`${id}-b`} onKeyDown={key} className="absolute top-20 z-10 w-48 rounded-lg border border-border bg-surface p-1 shadow-lg">
          {ITEMS.map((t) => (
            <button
              key={t}
              role="menuitem"
              tabIndex={-1}
              onClick={() => { setLast(t); close() }}
              className={`flex min-h-11 w-full items-center rounded-md px-3 text-left text-sm hover:bg-surface-2 focus:bg-surface-2 focus:outline-none ${t === 'Delete' ? 'text-danger' : ''}`}
            >
              {t}
            </button>
          ))}
        </div>
      )}
      <p className="mt-24 text-sm text-fg-muted" role="status">{last ? `You chose: ${last}.` : 'Press Enter or the down arrow on the button.'}</p>
    </div>
  )
}
```

# Pagination and breadcrumbs
> Labelled breadcrumb and pagination navs: the current page is aria-current, ellipses collapse long ranges to seven slots, and a status line says which results are shown.
- **Category:** Components
- **Slug:** pagination-breadcrumbs
- **Tags:** pagination, breadcrumbs, navigation, aria-current, lists
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/pagination-breadcrumbs
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/PaginationBreadcrumbs.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/PaginationBreadcrumbs.tsx

## When to use
- Long lists and deep sites
- Orientation for any page more than two levels down

## Accessibility

Both are labelled nav landmarks; the last breadcrumb is plain text with aria-current; page buttons have names like Page 3; disabled ends keep their space so the layout does not jump.


## Source
`src/patterns/components/PaginationBreadcrumbs.tsx`
```tsx
import { useState } from 'react'

/*
 * Two orientation aids that are easy to get wrong. Breadcrumbs: an ordered list in a labelled nav, the last item is
 * the current page (aria-current) and not a link. Pagination: a labelled nav with real previous, next and numbered
 * buttons, the current page marked with aria-current, ellipses collapsed so there are never more than seven slots, and
 * a status line saying which results are shown. Disabled ends keep their place so the layout does not jump.
 */

const TOTAL = 24
const PER = 5

function slots(page: number, total: number): (number | '…')[] {
  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1)
  if (page <= 4) return [1, 2, 3, 4, 5, '…', total]
  if (page >= total - 3) return [1, '…', total - 4, total - 3, total - 2, total - 1, total]
  return [1, '…', page - 1, page, page + 1, '…', total]
}

export default function PaginationBreadcrumbs() {
  const [page, setPage] = useState(1)
  const pages = Math.ceil(TOTAL / PER)
  const from = (page - 1) * PER + 1
  const to = Math.min(TOTAL, page * PER)
  return (
    <div className="mx-auto max-w-xl space-y-8">
      <nav aria-label="Breadcrumb">
        <ol className="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm">
          {['Home', 'Journal', 'Design', 'Setting readable type'].map((c, i, a) => (
            <li key={c} className="flex items-center gap-2">
              {i < a.length - 1 ? (
                <a href="#bc" onClick={(e) => e.preventDefault()} className="grid min-h-8 place-items-center text-fg-muted underline underline-offset-2 hover:text-fg">{c}</a>
              ) : (
                <span aria-current="page" className="font-medium">{c}</span>
              )}
              {i < a.length - 1 && <span aria-hidden className="text-fg-muted">/</span>}
            </li>
          ))}
        </ol>
      </nav>

      <div>
        <ul className="divide-y divide-border rounded-xl border border-border">
          {Array.from({ length: to - from + 1 }, (_, i) => from + i).map((n) => (
            <li key={n} className="px-4 py-3 text-sm">Result {n}</li>
          ))}
        </ul>
        <nav aria-label="Pagination" className="mt-3 flex flex-wrap items-center justify-between gap-3">
          <p className="text-sm text-fg-muted" role="status">Showing {from} to {to} of {TOTAL}</p>
          <ul className="flex items-center gap-1">
            <li><button onClick={() => setPage(page - 1)} disabled={page === 1} aria-label="Previous page" className="grid size-11 place-items-center rounded-md border border-border disabled:opacity-40">‹</button></li>
            {slots(page, pages).map((s, i) => (
              <li key={i}>
                {s === '…' ? (
                  <span aria-hidden className="grid size-8 place-items-center text-fg-muted">…</span>
                ) : (
                  <button onClick={() => setPage(s)} aria-label={`Page ${s}`} aria-current={s === page ? 'page' : undefined} className={`grid size-11 place-items-center rounded-md border text-sm tabular-nums ${s === page ? 'border-fg bg-fg text-bg' : 'border-border hover:bg-surface-2'}`}>{s}</button>
                )}
              </li>
            ))}
            <li><button onClick={() => setPage(page + 1)} disabled={page === pages} aria-label="Next page" className="grid size-11 place-items-center rounded-md border border-border disabled:opacity-40">›</button></li>
          </ul>
        </nav>
      </div>
    </div>
  )
}
```

# Carousel that does not trap anyone
> A slide carousel with Previous, Next and dot controls, an announced position, auto-play off by default, a visible Pause, and hidden slides made inert.
- **Category:** Components
- **Slug:** accessible-carousel
- **Tags:** carousel, slider, aria-roledescription, autoplay, inert
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/accessible-carousel
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/AccessibleCarousel.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/AccessibleCarousel.tsx

## When to use
- Testimonials, steps and galleries where a carousel is truly needed
- Showing the accessible way to do auto-advance

## Accessibility

Region with aria-roledescription of carousel; slides labelled n of N; off-screen slides are inert; auto-play is opt-in, pauses on hover and focus and never runs under reduced motion; position is announced.


## Source
`src/patterns/components/AccessibleCarousel.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'

/*
 * A carousel that does not trap anyone. It is a labelled region with slides as a list; Previous and Next are buttons;
 * the current slide is announced ("Slide 2 of 4") in a live region; auto-advance is OFF by default and, if turned on,
 * pauses on hover, on focus and always under reduced motion, with a visible Pause control. Off-screen slides are inert so
 * keyboard users do not tab into hidden content. Movement is a transform on a track.
 */

const SLIDES = [
  ['Plan', '#f2c9a1', 'Start with the person and the task.'],
  ['Draft', '#bfd8c6', 'Make the smallest version that could work.'],
  ['Test', '#c5cdea', 'Use it with a keyboard and a phone.'],
  ['Ship', '#e6c0d4', 'Release it, then keep watching.'],
] as const

export default function AccessibleCarousel() {
  const [i, setI] = useState(0)
  const [auto, setAuto] = useState(false)
  const [hold, setHold] = useState(false)
  const reduced = useRef(typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches)

  useEffect(() => {
    if (!auto || hold || reduced.current) return
    const t = setInterval(() => setI((n) => (n + 1) % SLIDES.length), 3500)
    return () => clearInterval(t)
  }, [auto, hold])

  return (
    <section aria-roledescription="carousel" aria-label="How we work" className="mx-auto max-w-xl" onMouseEnter={() => setHold(true)} onMouseLeave={() => setHold(false)} onFocus={() => setHold(true)} onBlur={() => setHold(false)}>
      <div className="overflow-hidden rounded-xl border border-border">
        <ul className="flex transition-transform duration-500 ease-out-expo motion-reduce:transition-none" style={{ transform: `translateX(-${i * 100}%)` }}>
          {SLIDES.map(([t, bg, d], n) => (
            <li key={t} aria-roledescription="slide" aria-label={`${n + 1} of ${SLIDES.length}`} inert={n !== i} className="grid h-52 w-full shrink-0 place-content-center px-8 text-center text-[#1d1b18]" style={{ background: bg }}>
              <p className="text-3xl font-semibold tracking-tight">{t}</p>
              <p className="mt-2 max-w-xs text-base">{d}</p>
            </li>
          ))}
        </ul>
      </div>
      <div className="mt-3 flex items-center gap-2">
        <button onClick={() => setI((i - 1 + SLIDES.length) % SLIDES.length)} aria-label="Previous slide" className="grid size-11 place-items-center rounded-md border border-border hover:bg-surface">‹</button>
        <button onClick={() => setI((i + 1) % SLIDES.length)} aria-label="Next slide" className="grid size-11 place-items-center rounded-md border border-border hover:bg-surface">›</button>
        <div className="flex gap-1" role="group" aria-label="Choose a slide">
          {SLIDES.map(([t], n) => (
            <button key={t} onClick={() => setI(n)} aria-label={`Show slide ${n + 1}: ${t}`} aria-current={n === i ? 'true' : undefined} className="grid size-11 place-items-center">
              <span className={`size-2.5 rounded-full ${n === i ? 'bg-fg' : 'bg-border'}`} />
            </button>
          ))}
        </div>
        <button onClick={() => setAuto((a) => !a)} aria-pressed={auto} className="ml-auto min-h-11 rounded-md border border-border px-3 text-sm hover:bg-surface">{auto ? 'Pause' : 'Play'}</button>
      </div>
      <p className="mt-1 text-sm text-fg-muted" role="status" aria-live="polite">Slide {i + 1} of {SLIDES.length}: {SLIDES[i][0]}</p>
    </section>
  )
}
```

# Alerts that say it in words
> Error, warning, success and info messages with an icon shape and a text label so colour is only reinforcement, correct live-region roles, and labelled dismiss buttons.
- **Category:** Components
- **Slug:** alert-banners
- **Tags:** alert, banner, status, aria-live, feedback
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/alert-banners
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/AlertBanners.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/AlertBanners.tsx

## When to use
- Form results, system notices and confirmations
- Messages that must be noticed by everyone

## Accessibility

Errors and warnings use role=alert, success and info role=status; each message starts with a hidden type word; dismiss buttons name what they dismiss; colour is never the only signal.


## Source
`src/patterns/components/AlertBanners.tsx`
```tsx
import { useState } from 'react'

/*
 * Status messages that say what happened in words and a shape, so colour is only reinforcement. Error and warning use
 * role=alert (announced at once); success and info use role=status (announced politely). Each can be dismissed with a
 * labelled button, and dismissal never removes information the user still needs: errors name what to do next.
 */

type Kind = 'error' | 'warning' | 'success' | 'info'
const META: Record<Kind, { icon: string; label: string; cls: string; role: 'alert' | 'status' }> = {
  error: { icon: '✕', label: 'Error', cls: 'border-danger/60 bg-danger/10', role: 'alert' },
  warning: { icon: '!', label: 'Warning', cls: 'border-warning/60 bg-warning/10', role: 'alert' },
  success: { icon: '✓', label: 'Success', cls: 'border-success/60 bg-success/10', role: 'status' },
  info: { icon: 'i', label: 'Note', cls: 'border-border bg-surface', role: 'status' },
}
const MESSAGES: { kind: Kind; title: string; body: string }[] = [
  { kind: 'error', title: 'Payment was not taken', body: 'Your card was declined. Check the number and expiry, or try another card.' },
  { kind: 'warning', title: 'Your session ends in 2 minutes', body: 'Save your work. Press Stay signed in to keep going.' },
  { kind: 'success', title: 'Changes saved', body: 'Your profile has been updated.' },
  { kind: 'info', title: 'Scheduled maintenance', body: 'The site will be read-only on Sunday between 02:00 and 03:00.' },
]

export default function AlertBanners() {
  const [gone, setGone] = useState<string[]>([])
  const shown = MESSAGES.filter((m) => !gone.includes(m.title))
  return (
    <div className="mx-auto max-w-xl space-y-3">
      {shown.map((m) => {
        const k = META[m.kind]
        return (
          <div key={m.title} role={k.role} className={`flex items-start gap-3 rounded-lg border p-4 ${k.cls}`}>
            <span aria-hidden className="mt-0.5 grid size-6 shrink-0 place-items-center rounded-full border border-current text-xs font-bold">{k.icon}</span>
            <div className="min-w-0 flex-1 text-sm">
              <p className="font-semibold"><span className="sr-only">{k.label}: </span>{m.title}</p>
              <p className="mt-0.5 text-fg-muted">{m.body}</p>
            </div>
            <button onClick={() => setGone([...gone, m.title])} aria-label={`Dismiss: ${m.title}`} className="grid size-11 shrink-0 place-items-center rounded-md hover:bg-surface-2">×</button>
          </div>
        )
      })}
      {shown.length === 0 && (
        <p className="text-sm text-fg-muted">
          All dismissed. <button onClick={() => setGone([])} className="font-medium text-accent underline underline-offset-2">Bring them back</button>
        </p>
      )}
    </div>
  )
}
```

# Password field with live rules
> A password input with a Show and Hide button, rules that tick off in words, and a strength estimate written out, allowing paste and using new-password autocomplete.
- **Category:** Components
- **Slug:** password-field
- **Tags:** password, form, strength, validation, input
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/password-field
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/PasswordField.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/PasswordField.tsx

## When to use
- Sign-up and change-password forms
- Guidance without blocking password managers

## Accessibility

Visible label; the show button uses aria-pressed and a hidden full name; each rule says Met or Not yet in text, not colour alone; strength is a status message labelled as an estimate.


## Source
`src/patterns/components/PasswordField.tsx`
```tsx
import { useId, useMemo, useState } from 'react'

/*
 * A password field that helps without nagging. A real label, a show/hide button that names its state (aria-pressed), a
 * rule list that ticks off live in words ("Met" or "Not yet", never colour alone), and a strength line that is written
 * out. The strength is an estimate from length and variety, labelled as such; it does not replace a server check.
 * Paste is allowed (password managers need it) and autocomplete is set to new-password.
 */

const RULES: [string, (p: string) => boolean][] = [
  ['At least 12 characters', (p) => p.length >= 12],
  ['A mix of upper and lower case', (p) => /[a-z]/.test(p) && /[A-Z]/.test(p)],
  ['A number', (p) => /\d/.test(p)],
  ['A symbol or a space', (p) => /[^A-Za-z0-9]/.test(p)],
]

export default function PasswordField() {
  const id = useId()
  const [pw, setPw] = useState('')
  const [show, setShow] = useState(false)
  const met = useMemo(() => RULES.map(([, f]) => f(pw)), [pw])
  const score = pw.length === 0 ? 0 : Math.min(4, met.filter(Boolean).length + (pw.length >= 16 ? 1 : 0)) - (pw.length < 8 ? 1 : 0)
  const label = ['Empty', 'Weak', 'Fair', 'Good', 'Strong'][Math.max(0, Math.min(4, score))]

  return (
    <div className="mx-auto max-w-sm">
      <label htmlFor={id} className="text-sm font-medium">Create a password</label>
      <div className="relative mt-1">
        <input id={id} type={show ? 'text' : 'password'} value={pw} onChange={(e) => setPw(e.target.value)} autoComplete="new-password" aria-describedby={`${id}-rules ${id}-str`} className="min-h-12 w-full rounded-md border border-border bg-surface px-3 pr-20 font-mono" />
        <button type="button" onClick={() => setShow((s) => !s)} aria-pressed={show} className="absolute top-1 right-1 min-h-10 rounded px-3 text-sm font-medium text-accent hover:bg-surface-2">
          {show ? 'Hide' : 'Show'}<span className="sr-only"> password</span>
        </button>
      </div>
      <p id={`${id}-str`} className="mt-2 text-sm" role="status">
        Strength (estimate): <b>{label}</b>
      </p>
      <div className="mt-1 flex gap-1" aria-hidden>
        {[1, 2, 3, 4].map((n) => <span key={n} className={`h-1.5 flex-1 rounded ${score >= n ? 'bg-fg' : 'bg-border'}`} />)}
      </div>
      <ul id={`${id}-rules`} className="mt-3 space-y-1 text-sm">
        {RULES.map(([t], i) => (
          <li key={t} className="flex items-center gap-2">
            <span aria-hidden className={`grid size-5 place-items-center rounded-full border text-[11px] ${met[i] ? 'border-success text-success' : 'border-border text-fg-muted'}`}>{met[i] ? '✓' : ''}</span>
            <span className={met[i] ? '' : 'text-fg-muted'}>{t}<span className="sr-only">: {met[i] ? 'Met' : 'Not yet'}</span></span>
          </li>
        ))}
      </ul>
    </div>
  )
}
```

# Accessible file dropzone
> A drop area that is really a button that opens the file picker, so keyboard users are never left out, with stated limits, written errors and a labelled Remove for each file.
- **Category:** Components
- **Slug:** file-dropzone
- **Tags:** upload, dropzone, file, form, drag and drop
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/file-dropzone
- **Raw source:** https://ui-lab-weld.vercel.app/raw/components/FileDropzone.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/components/FileDropzone.tsx

## When to use
- Uploads and attachments
- Drag and drop as an extra, not the only way

## Accessibility

The visible area is a real button wired to a file input; limits are stated up front; errors are role=alert with reasons; each file has a labelled Remove; the count is a status message.


## Source
`src/patterns/components/FileDropzone.tsx`
```tsx
import { useId, useRef, useState } from 'react'

/*
 * A file upload that works without a mouse. The drop area is a real button that opens the file picker (Enter or Space),
 * and the hidden input is the actual control, so dragging files in is an extra, not the only way. Selected files are
 * listed with their size and a labelled Remove button; limits (type and size) are stated up front and checked, with the
 * reasons given in words. Nothing is uploaded here: this demo only keeps the list in memory.
 */

const MAX = 2 * 1024 * 1024
const OK = ['image/png', 'image/jpeg', 'application/pdf']
const kb = (n: number) => (n < 1024 * 1024 ? `${Math.max(1, Math.round(n / 1024))} KB` : `${(n / 1024 / 1024).toFixed(1)} MB`)

export default function FileDropzone() {
  const id = useId()
  const input = useRef<HTMLInputElement>(null)
  const [files, setFiles] = useState<File[]>([])
  const [errors, setErrors] = useState<string[]>([])
  const [over, setOver] = useState(false)

  const add = (list: FileList | File[]) => {
    const errs: string[] = []
    const ok: File[] = []
    for (const f of Array.from(list)) {
      if (!OK.includes(f.type)) errs.push(`${f.name} was not added: only PNG, JPG and PDF files are accepted.`)
      else if (f.size > MAX) errs.push(`${f.name} was not added: it is ${kb(f.size)} and the limit is 2 MB.`)
      else ok.push(f)
    }
    setErrors(errs)
    setFiles((p) => [...p, ...ok])
  }

  return (
    <div className="mx-auto max-w-md">
      <p id={`${id}-h`} className="text-sm font-medium">Attach your documents</p>
      <input ref={input} id={id} type="file" multiple accept=".png,.jpg,.jpeg,.pdf" hidden onChange={(e) => { if (e.target.files) add(e.target.files); e.target.value = '' }} />
      <button
        type="button"
        onClick={() => input.current?.click()}
        onDragOver={(e) => { e.preventDefault(); setOver(true) }}
        onDragLeave={() => setOver(false)}
        onDrop={(e) => { e.preventDefault(); setOver(false); add(e.dataTransfer.files) }}
        aria-describedby={`${id}-help`}
        aria-labelledby={`${id}-h`}
        className={`mt-1 grid min-h-32 w-full place-content-center gap-1 rounded-xl border-2 border-dashed px-4 text-center transition-colors motion-reduce:transition-none ${over ? 'border-accent bg-accent-soft' : 'border-border hover:bg-surface'}`}
      >
        <span className="font-medium">Choose files, or drop them here</span>
        <span id={`${id}-help`} className="text-sm text-fg-muted">PNG, JPG or PDF, up to 2 MB each</span>
      </button>
      {errors.length > 0 && (
        <ul role="alert" className="mt-3 space-y-1 text-sm text-danger">
          {errors.map((e) => <li key={e}>{e}</li>)}
        </ul>
      )}
      <ul className="mt-3 divide-y divide-border rounded-lg border border-border empty:hidden" aria-label="Selected files">
        {files.map((f, i) => (
          <li key={f.name + i} className="flex items-center justify-between gap-3 px-3 py-2 text-sm">
            <span className="min-w-0 truncate">{f.name} <span className="text-fg-muted">({kb(f.size)})</span></span>
            <button onClick={() => setFiles(files.filter((_, j) => j !== i))} aria-label={`Remove ${f.name}`} className="min-h-11 shrink-0 px-2 text-fg-muted underline underline-offset-2 hover:text-fg">Remove</button>
          </li>
        ))}
      </ul>
      <p className="mt-2 text-sm text-fg-muted" role="status">{files.length ? `${files.length} file${files.length === 1 ? '' : 's'} selected.` : 'No files selected.'}</p>
    </div>
  )
}
```

# Scramble text
> Text decodes into place, characters cycling through glyphs and locking in left to right.
- **Category:** Text
- **Slug:** scramble-text
- **Tags:** text effect, decode, glitch, typewriter, hacker, intro
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/scramble-text
- **Raw source:** https://ui-lab-weld.vercel.app/raw/text/ScrambleText.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/text/ScrambleText.tsx

## When to use
- Intro taglines, nav labels, loading states
- Tech, studio and portfolio sites (Alche-style)

## Accessibility

Final text exposed via aria-label; scrambling glyphs are aria-hidden; instant under reduced motion.


## Source
`src/patterns/text/ScrambleText.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'

/*
 * Text that decodes into place: each character cycles through random glyphs
 * and locks in left to right. Screen readers get the final text via
 * aria-label; the animating glyphs are aria-hidden. Reduced motion shows the
 * final text immediately.
 */

const GLYPHS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ#%&*+=<>/\\|'

export function ScrambleText({
  text,
  duration = 1200,
  delay = 0,
  play = true,
  className = '',
}: {
  text: string
  duration?: number
  delay?: number
  /** Change this (e.g. a counter) to replay. */
  play?: boolean | number
  className?: string
}) {
  const [out, setOut] = useState(text)
  const raf = useRef(0)

  useEffect(() => {
    if (!play || matchMedia('(prefers-reduced-motion: reduce)').matches) {
      setOut(text)
      return
    }
    let start = 0
    const tick = (now: number) => {
      if (!start) start = now + delay
      const p = Math.max(0, (now - start) / duration)
      const locked = Math.floor(p * text.length)
      setOut(
        [...text]
          .map((ch, i) => (i < locked || ch === ' ' ? ch : GLYPHS[(Math.random() * GLYPHS.length) | 0]))
          .join(''),
      )
      if (p < 1) raf.current = requestAnimationFrame(tick)
      else setOut(text)
    }
    raf.current = requestAnimationFrame(tick)
    return () => cancelAnimationFrame(raf.current)
  }, [text, duration, delay, play])

  return (
    <span className={className} aria-label={text} role="text">
      <span aria-hidden>{out}</span>
    </span>
  )
}

export default function ScrambleTextDemo() {
  const [run, setRun] = useState(1)
  return (
    <div className="space-y-6">
      <p className="font-mono text-2xl sm:text-3xl">
        <ScrambleText text="Architect worlds that move." play={run} />
      </p>
      <p className="font-mono text-sm text-fg-muted">
        <ScrambleText text="NEWS / WORKS / ABOUT / CONTACT" play={run} delay={300} duration={900} />
      </p>
      <button onClick={() => setRun((r) => r + 1)} className="text-sm text-fg-muted hover:text-fg">
        ↻ Replay
      </button>
    </div>
  )
}
```

# Focus reveal
> Blurred words come sharp one at a time as a camera-style focus frame travels to each measured word box.
- **Category:** Text
- **Slug:** focus-reveal
- **Tags:** text effect, blur, focus, headline, camera
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/focus-reveal
- **Raw source:** https://ui-lab-weld.vercel.app/raw/text/FocusReveal.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/text/FocusReveal.tsx

## When to use
- Hero headlines and manifesto lines
- Anywhere one phrase should be read word by word

## Accessibility

Sentence exposed via aria-label; frame decorative; all words sharp and static under reduced motion.


## Source
`src/patterns/text/FocusReveal.tsx`
```tsx
import { useEffect, useLayoutEffect, useRef, useState } from 'react'

/*
 * Words sit blurred; a camera-style focus frame (four corner brackets)
 * travels from word to word, resizing to each word's measured box, and the
 * word under it comes sharp. Measuring with offsetLeft/Top/Width/Height
 * means it works with any font and size and survives wrapping.
 * Screen readers read the plain sentence; the frame is decorative.
 */

export function FocusReveal({ text, interval = 1100 }: { text: string; interval?: number }) {
  const words = text.split(' ')
  const refs = useRef<(HTMLSpanElement | null)[]>([])
  const [i, setI] = useState(0)
  const [box, setBox] = useState({ x: 0, y: 0, w: 0, h: 0 })

  useEffect(() => {
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return
    const id = setInterval(() => setI((n) => (n + 1) % words.length), interval)
    return () => clearInterval(id)
  }, [words.length, interval])

  useLayoutEffect(() => {
    const measure = () => {
      const el = refs.current[i]
      if (el) setBox({ x: el.offsetLeft, y: el.offsetTop, w: el.offsetWidth, h: el.offsetHeight })
    }
    measure()
    addEventListener('resize', measure)
    return () => removeEventListener('resize', measure)
  }, [i])

  const reduced = typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches
  const pad = 8
  const corner = 'absolute h-3 w-3 border-accent'

  return (
    <p className="relative">
      <span className="sr-only">{text}</span>
      {words.map((w, n) => (
        <span key={n} aria-hidden>
          <span
            ref={(el) => {
              refs.current[n] = el
            }}
            className="inline-block transition-[filter,opacity] duration-500"
            style={reduced ? undefined : { filter: n === i ? 'none' : 'blur(6px)', opacity: n === i ? 1 : 0.55 }}
          >
            {w}
          </span>{' '}
        </span>
      ))}
      {!reduced && (
        <span
          aria-hidden
          className="pointer-events-none absolute transition-all duration-700 ease-out-expo"
          style={{ left: box.x - pad, top: box.y - pad, width: box.w + pad * 2, height: box.h + pad * 2 }}
        >
          <span className={`${corner} top-0 left-0 border-t-2 border-l-2`} />
          <span className={`${corner} top-0 right-0 border-t-2 border-r-2`} />
          <span className={`${corner} bottom-0 left-0 border-b-2 border-l-2`} />
          <span className={`${corner} right-0 bottom-0 border-r-2 border-b-2`} />
        </span>
      )}
    </p>
  )
}

export default function FocusRevealDemo() {
  return (
    <div className="py-6 text-center text-3xl font-semibold tracking-tight sm:text-5xl">
      <FocusReveal text="Bring every idea into focus" />
    </div>
  )
}
```

# Split text reveal
> Headline split into words or letters that slide up from masks with a stagger when scrolled into view.
- **Category:** Text
- **Slug:** split-text-reveal
- **Tags:** split text, stagger, reveal, headline, gsap alternative
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/split-text-reveal
- **Raw source:** https://ui-lab-weld.vercel.app/raw/text/SplitTextReveal.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/text/SplitTextReveal.tsx

## When to use
- Hero headlines, section titles, manifesto lines

## Accessibility

Full sentence via aria-label, split spans aria-hidden; shown immediately under reduced motion.


## Source
`src/patterns/text/SplitTextReveal.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'

/*
 * Headline split into words (or letters), each masked by an overflow-hidden
 * wrapper and sliding up into view with a stagger when the block enters the
 * viewport. The sentence stays intact for screen readers (aria-label), the
 * split spans are aria-hidden. Reduced motion: shown immediately.
 */

export function SplitTextReveal({ text, by = 'word', stagger = 60, className = '' }: { text: string; by?: 'word' | 'char'; stagger?: number; className?: string }) {
  const ref = useRef<HTMLSpanElement>(null)
  const [on, setOn] = useState(false)
  useEffect(() => {
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return setOn(true)
    const io = new IntersectionObserver(([e]) => e.isIntersecting && setOn(true), { threshold: 0.4 })
    io.observe(ref.current!)
    return () => io.disconnect()
  }, [])
  const parts = by === 'word' ? text.split(' ') : [...text]
  return (
    <span ref={ref} aria-label={text} role="text" className={className}>
      {parts.map((p, i) => (
        <span key={i} aria-hidden className="inline-block overflow-hidden pb-[0.08em] align-bottom">
          <span
            className="inline-block transition-transform duration-[900ms] ease-out-expo"
            style={{ transform: on ? 'none' : 'translateY(110%)', transitionDelay: `${i * stagger}ms` }}
          >
            {p === ' ' ? ' ' : p}
          </span>
          {by === 'word' && i < parts.length - 1 ? ' ' : ''}
        </span>
      ))}
    </span>
  )
}

export default function SplitTextRevealDemo() {
  const [k, setK] = useState(0)
  return (
    <div key={k} className="space-y-6">
      <h3 className="text-4xl leading-tight font-semibold tracking-tight sm:text-6xl">
        <SplitTextReveal text="Design that moves people." />
      </h3>
      <p className="font-display text-3xl italic">
        <SplitTextReveal text="letter by letter" by="char" stagger={30} />
      </p>
      <button onClick={() => setK((x) => x + 1)} className="text-sm text-fg-muted hover:text-fg">↻ Replay</button>
    </div>
  )
}
```

# Typewriter
> Types, holds, deletes and cycles phrases with a blinking caret.
- **Category:** Text
- **Slug:** typewriter
- **Tags:** typewriter, typing, rotating words, caret
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/typewriter
- **Raw source:** https://ui-lab-weld.vercel.app/raw/text/Typewriter.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/text/Typewriter.tsx

## When to use
- Hero taglines listing use cases

## Accessibility

Screen readers get each whole phrase once (polite live region), not every keystroke; no typing under reduced motion.


## Source
`src/patterns/text/Typewriter.tsx`
```tsx
import { useEffect, useState } from 'react'

/*
 * Typewriter that cycles through phrases: types, holds, deletes, next.
 * The live region is polite and only receives the full phrase once typed,
 * so screen readers are not spammed per character. Reduced motion: phrases
 * swap without typing.
 */

export function Typewriter({ words, speed = 70, hold = 1400 }: { words: string[]; speed?: number; hold?: number }) {
  const [i, setI] = useState(0)
  const [n, setN] = useState(0)
  const [del, setDel] = useState(false)
  const reduced = typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches
  const word = words[i % words.length]

  useEffect(() => {
    if (reduced) {
      const id = setTimeout(() => setI((x) => x + 1), hold * 1.5)
      return () => clearTimeout(id)
    }
    const done = !del && n === word.length
    const empty = del && n === 0
    const id = setTimeout(
      () => {
        if (done) setDel(true)
        else if (empty) {
          setDel(false)
          setI((x) => x + 1)
        } else setN((x) => x + (del ? -1 : 1))
      },
      done ? hold : del ? speed / 2 : speed,
    )
    return () => clearTimeout(id)
  }, [n, del, word, speed, hold, reduced])

  return (
    <>
      <span aria-hidden>
        {reduced ? word : word.slice(0, n)}
        <span className="ml-0.5 inline-block w-[2px] animate-pulse bg-current align-middle" style={{ height: '0.9em' }} />
      </span>
      <span className="sr-only" aria-live="polite">{n === word.length || reduced ? word : ''}</span>
    </>
  )
}

export default function TypewriterDemo() {
  return (
    <p className="text-3xl font-semibold tracking-tight sm:text-5xl">
      Build <span className="text-accent"><Typewriter words={['landing pages.', 'dashboards.', 'portfolios.', 'anything.']} /></span>
    </p>
  )
}
```

# Shimmer text & running border
> Gradient shine sweeping across text, and a conic-gradient border that runs around a button. @property animations.
- **Category:** Text
- **Slug:** shimmer-text
- **Tags:** shimmer, gradient text, conic gradient, animated border, @property
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/shimmer-text
- **Raw source:** https://ui-lab-weld.vercel.app/raw/text/ShimmerText.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/text/ShimmerText.tsx

## When to use
- Announcement pills, launch badges, premium CTAs

## Accessibility

Text remains real text; animations stop under reduced motion. Check the muted gradient stops still pass contrast.


## Source
`src/patterns/text/ShimmerText.tsx`
```tsx
/*
 * Shimmering gradient text + a conic "running border" button. Both use
 * registered custom properties (@property) so the gradient angle/position
 * can be animated by CSS keyframes alone.
 */

const CSS = `
@property --shine { syntax: '<percentage>'; inherits: false; initial-value: -50%; }
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.shimmer {
  background: linear-gradient(100deg, var(--fg-muted) 30%, var(--fg) 45%, var(--accent) 50%, var(--fg) 55%, var(--fg-muted) 70%) no-repeat;
  background-size: 250% 100%; background-position: var(--shine) 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 3.2s linear infinite;
}
@keyframes shine { to { --shine: 150%; } }
.run-border {
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              conic-gradient(from var(--spin), transparent 60%, var(--accent), #ec4899, transparent 90%) border-box;
  border: 1.5px solid transparent; animation: spin 3s linear infinite;
}
@keyframes spin { to { --spin: 360deg; } }
@media (prefers-reduced-motion: reduce) { .shimmer, .run-border { animation: none; } }
`

export default function ShimmerText() {
  return (
    <div className="space-y-8 text-center">
      <style>{CSS}</style>
      <h3 className="shimmer text-4xl font-semibold tracking-tight sm:text-6xl">Now shipping v2</h3>
      <button className="run-border rounded-full px-6 py-2.5 text-sm font-medium">✦ Try the beta</button>
    </div>
  )
}
```

# Glitch text
> RGB-split glitch from two clip-path-banded pseudo-element copies; plays on hover.
- **Category:** Text
- **Slug:** glitch-text
- **Tags:** glitch, rgb split, clip-path, hover, cyberpunk
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/glitch-text
- **Raw source:** https://ui-lab-weld.vercel.app/raw/text/GlitchText.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/text/GlitchText.tsx

## When to use
- Tech, gaming, music and 404 pages
- Hover accent on a single word, not paragraphs

## Accessibility

Real text; copies are pseudo-elements (not read twice). Hover-only by default; disabled under reduced motion (flicker can trigger discomfort).


## Source
`src/patterns/text/GlitchText.tsx`
```tsx
/*
 * CSS glitch: two pseudo-element copies of the text (via data-text), each
 * clipped to random horizontal bands with clip-path and offset in opposite
 * directions with RGB-split colours. Keyframes jump between band sets.
 * Runs on hover by default (always-on flicker is hard on some users);
 * disabled under reduced motion.
 */

const CSS = `
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; opacity: 0; }
.glitch::before { color: #22d3ee; transform: translate(-2px, 0); }
.glitch::after  { color: #f43f5e; transform: translate(2px, 0); }
.glitch:hover::before, .glitch.on::before { opacity: .9; animation: g1 .9s steps(1) infinite; }
.glitch:hover::after,  .glitch.on::after  { opacity: .9; animation: g2 .75s steps(1) infinite; }
@keyframes g1 {
  0% { clip-path: inset(10% 0 70% 0); transform: translate(-3px, 1px); }
  20% { clip-path: inset(60% 0 10% 0); transform: translate(3px, -1px); }
  40% { clip-path: inset(30% 0 45% 0); transform: translate(-2px, 2px); }
  60% { clip-path: inset(80% 0 5% 0); transform: translate(2px, 0); }
  80% { clip-path: inset(0 0 85% 0); transform: translate(-4px, -1px); }
}
@keyframes g2 {
  0% { clip-path: inset(75% 0 5% 0); transform: translate(3px, 0); }
  25% { clip-path: inset(5% 0 80% 0); transform: translate(-3px, 1px); }
  50% { clip-path: inset(45% 0 35% 0); transform: translate(2px, -2px); }
  75% { clip-path: inset(20% 0 60% 0); transform: translate(-2px, 1px); }
}
@media (prefers-reduced-motion: reduce) { .glitch::before, .glitch::after { animation: none !important; opacity: 0 !important; } }
`

export function GlitchText({ text, always = false, className = '' }: { text: string; always?: boolean; className?: string }) {
  return (
    <span className={`glitch ${always ? 'on' : ''} ${className}`} data-text={text}>
      <style>{CSS}</style>
      {text}
    </span>
  )
}

export default function GlitchTextDemo() {
  return (
    <div className="grid h-56 place-items-center rounded-xl bg-black text-white">
      <div className="text-center">
        <p className="font-mono text-6xl font-bold tracking-tight sm:text-7xl"><GlitchText text="SIGNAL" /></p>
        <p className="mt-3 font-mono text-xs text-neutral-400">hover the word</p>
      </div>
    </div>
  )
}
```

# Link hover effects (8)
> Grow underline, centre-out, strike, highlighter, text roll, arrow nudge, double line, colour sweep: pure CSS classes.
- **Category:** Text
- **Slug:** link-hover-effects
- **Tags:** link, underline, hover, css only, navigation
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/link-hover-effects
- **Raw source:** https://ui-lab-weld.vercel.app/raw/text/LinkHoverEffects.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/text/LinkHoverEffects.tsx

## When to use
- Nav links, inline links, footers
- Pick one per site and use it everywhere

## Accessibility

Focus-visible triggers the same effect and keeps an outline; transitions off under reduced motion.


## Source
`src/patterns/text/LinkHoverEffects.tsx`
```tsx
/*
 * Eight link hover styles in pure CSS: grow-from-left underline, centre
 * out, strike-through swap, highlighter marker, text roll (duplicate slides
 * up), arrow nudge, double line, and colour fill sweep. Each is a class you
 * can drop on an <a>. All keep a visible focus state.
 */

const CSS = `
.lk { position: relative; text-decoration: none; display: inline-block; }
.lk:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
.lk-grow::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out-expo); }
.lk-grow:hover::after, .lk-grow:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.lk-center::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform .35s var(--ease-out-expo); }
.lk-center:hover::after, .lk-center:focus-visible::after { transform: scaleX(1); }
.lk-strike::before { content: ''; position: absolute; left: 0; top: 55%; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out-expo); }
.lk-strike:hover::before { transform: scaleX(1); }
.lk-mark { background: linear-gradient(transparent 55%, color-mix(in oklab, var(--accent) 45%, transparent) 55%) no-repeat 0 0 / 0% 100%; transition: background-size .5s var(--ease-out-expo); }
.lk-mark:hover, .lk-mark:focus-visible { background-size: 100% 100%; }
.lk-roll { overflow: hidden; vertical-align: bottom; }
.lk-roll span { display: block; transition: transform .45s var(--ease-out-expo); }
.lk-roll span::after { content: attr(data-t); position: absolute; left: 0; top: 100%; color: var(--accent); }
.lk-roll:hover span, .lk-roll:focus-visible span { transform: translateY(-100%); }
.lk-arrow::after { content: '→'; display: inline-block; margin-left: .35em; transition: transform .3s var(--ease-out-expo); }
.lk-arrow:hover::after { transform: translateX(6px); }
.lk-double::before, .lk-double::after { content: ''; position: absolute; left: 0; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transition: transform .4s var(--ease-out-expo); }
.lk-double::before { top: -3px; transform-origin: right; } .lk-double::after { bottom: -3px; transform-origin: left; }
.lk-double:hover::before, .lk-double:hover::after { transform: scaleX(1); }
.lk-fill { background: linear-gradient(90deg, var(--accent) 50%, var(--fg) 50%) 100% 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position .5s var(--ease-out-expo); }
.lk-fill:hover, .lk-fill:focus-visible { background-position: 0 0; }
@media (prefers-reduced-motion: reduce) { .lk, .lk *, .lk::before, .lk::after { transition: none !important; } }
`

const STYLES: [string, string][] = [
  ['lk-grow', 'Grow underline'], ['lk-center', 'Centre out'], ['lk-strike', 'Strike through'], ['lk-mark', 'Highlighter'],
  ['lk-roll', 'Text roll'], ['lk-arrow', 'Arrow nudge'], ['lk-double', 'Double line'], ['lk-fill', 'Colour sweep'],
]

export default function LinkHoverEffects() {
  return (
    <div className="grid gap-6 sm:grid-cols-2">
      <style>{CSS}</style>
      {STYLES.map(([cls, label]) => (
        <div key={cls} className="flex items-baseline justify-between gap-4 border-b border-border pb-3">
          <a href="#" onClick={(e) => e.preventDefault()} className={`lk ${cls} text-2xl font-medium`} data-t={label}>
            {cls === 'lk-roll' ? <span data-t={label}>{label}</span> : label}
          </a>
          <code className="font-mono text-[11px] text-fg-muted">.{cls}</code>
        </div>
      ))}
    </div>
  )
}
```

# Scroll typography (blur, highlight, fill)
> Words un-blur, markers sweep behind key phrases, and words fill with colour as you read. CSS view timelines only.
- **Category:** Text
- **Slug:** scroll-blur-text
- **Tags:** scroll, typography, blur, highlight, animation-timeline, css only
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/scroll-blur-text
- **Raw source:** https://ui-lab-weld.vercel.app/raw/text/ScrollBlurText.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/text/ScrollBlurText.tsx

## When to use
- Manifestos, about pages, long-form storytelling

## Accessibility

Text readable without support; animations off under reduced motion.


## Source
`src/patterns/text/ScrollBlurText.tsx`
```tsx
/*
 * Scroll-driven typography, three modes in one demo, all CSS view
 * timelines (no JS):
 *  - blur-in: each word starts blurred and transparent, sharpens as it enters
 *  - highlight: a marker sweeps behind key phrases as they cross the viewport
 *  - fill: words go from muted to full colour one by one while reading
 * Everything is readable without support; animations off for reduced motion.
 */

const CSS = `
@supports (animation-timeline: view()) {
  .sb-word { animation: sb-blur linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
  .sb-mark { background: linear-gradient(color-mix(in oklab, var(--accent) 40%, transparent), color-mix(in oklab, var(--accent) 40%, transparent)) no-repeat 0 85% / 0% 40%;
             animation: sb-mark linear both; animation-timeline: view(); animation-range: cover 25% cover 50%; }
  .sb-fill { animation: sb-fill linear both; animation-timeline: view(); animation-range: cover 20% cover 45%; }
}
@keyframes sb-blur { from { filter: blur(10px); opacity: 0; transform: translateY(.3em); } }
@keyframes sb-mark { to { background-size: 100% 40%; } }
@keyframes sb-fill { from { color: color-mix(in oklab, var(--fg) 20%, transparent); } }
@media (prefers-reduced-motion: reduce) { .sb-word, .sb-mark, .sb-fill { animation: none; } }
`

const Words = ({ text, cls }: { text: string; cls: string }) => (
  <>
    {text.split(' ').map((w, i) => (
      <span key={i} className={`${cls} inline-block`}>{w}&nbsp;</span>
    ))}
  </>
)

export default function ScrollBlurText() {
  return (
    <div className="h-96 overflow-y-auto rounded-xl border border-border px-6" tabIndex={0} aria-label="Scroll typography demo, scroll inside">
      <style>{CSS}</style>
      <div className="space-y-[40vh] py-[30vh] text-3xl leading-snug font-semibold tracking-tight sm:text-4xl">
        <p><Words text="Words come into focus as you read them, one after another." cls="sb-word" /></p>
        <p>
          Great interfaces feel <span className="sb-mark">inevitable</span>, like nothing else <span className="sb-mark">could have been there</span>.
        </p>
        <p><Words text="Every word lights up in turn, pulling the eye through the sentence." cls="sb-fill" /></p>
      </div>
    </div>
  )
}
```

# Scroll reveal (CSS only)
> Elements fade and rise as they enter the viewport using animation-timeline: view(). Zero JS.
- **Category:** Motion
- **Slug:** scroll-reveal
- **Tags:** scroll animation, reveal, fade in, animation-timeline, css only
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/scroll-reveal
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion/ScrollReveal.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion/ScrollReveal.tsx
- **Reference:** [MDN: scroll-driven animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations)

## When to use
- Landing pages and long-form sections
- Prefer this over IntersectionObserver when you only need enter animations

## Accessibility

Content is visible without support (@supports guard). Animation removed under reduced motion.


## Source
`src/patterns/motion/ScrollReveal.tsx`
```tsx
/*
 * Pure-CSS scroll reveal. The whole trick is the <style> block:
 *   animation-timeline: view()  → the animation progresses as the element crosses the viewport
 *   animation-range             → only play during the element's entry
 * Browsers without support just show the content (the @supports guard).
 */
const CSS = `
@supports (animation-timeline: view()) {
  .reveal {
    animation: reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 90%;
  }
}
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(48px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
}
`

const ITEMS = [
  ['Collect', 'Messages, photos and location pings arrive out of order.'],
  ['Align', 'Timestamps get normalised across sources and time zones.'],
  ['Link', 'Fragments that describe the same moment are clustered.'],
  ['Reconstruct', 'A single, readable timeline of the day emerges.'],
  ['Review', 'Low-confidence links are flagged for a human to confirm.'],
  ['Ship', 'Export the timeline or share it as a live page.'],
]

export default function ScrollReveal() {
  return (
    <div>
      <style>{CSS}</style>
      <p className="mb-6 text-sm text-fg-muted">Scroll down ↓</p>
      <div className="space-y-6 pb-24">
        {ITEMS.map(([title, body], i) => (
          <article key={title} className="reveal rounded-lg border border-border bg-surface p-6 shadow-sm">
            <span className="font-mono text-xs text-accent">0{i + 1}</span>
            <h3 className="mt-1 text-xl font-semibold">{title}</h3>
            <p className="mt-1 text-fg-muted">{body}</p>
          </article>
        ))}
      </div>
    </div>
  )
}
```

# Shared-element view transition
> A card morphs into its detail view with the View Transitions API. Falls back to an instant swap.
- **Category:** Motion
- **Slug:** view-transition-grid
- **Tags:** view transitions, shared element, page transition, morph, gallery
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/view-transition-grid
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion/ViewTransitionGrid.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion/ViewTransitionGrid.tsx
- **Reference:** [MDN: View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API)

## When to use
- Grid → detail navigation
- Gallery / product / project pages (MemoryShards-style)

## Accessibility

Plain buttons; without View Transitions support the swap is instant. Disable transitions for reduced motion globally.


## Source
`src/patterns/motion/ViewTransitionGrid.tsx`
```tsx
import { useState } from 'react'
import { flushSync } from 'react-dom'

/*
 * Shared-element transition: the same `view-transition-name` on the card (grid)
 * and on the hero (detail) makes the browser morph one into the other.
 * flushSync makes React commit inside the transition callback so the browser
 * snapshots the new DOM, not the old one.
 */

const CARDS = [
  { id: 'dawn', title: 'Dawn', hue: 25 },
  { id: 'noon', title: 'Noon', hue: 50 },
  { id: 'dusk', title: 'Dusk', hue: 330 },
  { id: 'night', title: 'Night', hue: 240 },
  { id: 'rain', title: 'Rain', hue: 200 },
  { id: 'fog', title: 'Fog', hue: 160 },
]

const gradient = (hue: number) =>
  `linear-gradient(135deg, hsl(${hue} 85% 62%), hsl(${hue + 40} 75% 42%))`

function withTransition(update: () => void) {
  if (!document.startViewTransition) return update()
  document.startViewTransition(() => flushSync(update))
}

export default function ViewTransitionGrid() {
  const [open, setOpen] = useState<string | null>(null)
  const card = CARDS.find((c) => c.id === open)

  if (card) {
    return (
      <div>
        <button className="mb-4 text-sm text-fg-muted hover:text-fg" onClick={() => withTransition(() => setOpen(null))}>
          ← Back to grid
        </button>
        <div
          className="h-72 rounded-xl"
          style={{ background: gradient(card.hue), viewTransitionName: `card-${card.id}` }}
        />
        <h3 className="mt-6 text-3xl font-semibold" style={{ viewTransitionName: `title-${card.id}` }}>
          {card.title}
        </h3>
        <p className="mt-2 max-w-prose text-fg-muted">
          The block and heading above are the same elements you clicked. The browser tweens their size and position
          between the two layouts. Everything else cross-fades.
        </p>
      </div>
    )
  }

  return (
    <div className="grid grid-cols-2 gap-4 sm:grid-cols-3">
      {CARDS.map((c) => (
        <button
          key={c.id}
          onClick={() => withTransition(() => setOpen(c.id))}
          className="group text-left"
        >
          <div
            className="aspect-[4/3] rounded-lg transition-transform duration-300 ease-out-expo group-hover:scale-[1.03]"
            style={{ background: gradient(c.hue), viewTransitionName: `card-${c.id}` }}
          />
          <span className="mt-2 inline-block font-medium" style={{ viewTransitionName: `title-${c.id}` }}>
            {c.title}
          </span>
        </button>
      ))}
    </div>
  )
}
```

# Count-up stats
> Numbers animate from 0 when scrolled into view, with tabular figures so width stays stable.
- **Category:** Motion
- **Slug:** count-up
- **Tags:** counter, stats, numbers, kpi, intersection observer
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/count-up
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion/CountUp.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion/CountUp.tsx
- **Reference:** [For fancier digit rolls: number-flow](https://github.com/barvian/number-flow)

## When to use
- Stat tiles on landing pages and dashboards

## Accessibility

Final value shown immediately under reduced motion; tabular-nums avoids layout shift.


## Source
`src/patterns/motion/CountUp.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'

const easeOutExpo = (t: number) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t))

export function useCountUp(target: number, duration = 1600) {
  const ref = useRef<HTMLElement | null>(null)
  const [value, setValue] = useState(0)

  useEffect(() => {
    const el = ref.current
    if (!el) return
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
      setValue(target)
      return
    }
    let raf = 0
    const io = new IntersectionObserver(
      ([entry]) => {
        if (!entry.isIntersecting) return
        io.disconnect()
        const start = performance.now()
        const tick = (now: number) => {
          const t = Math.min((now - start) / duration, 1)
          setValue(target * easeOutExpo(t))
          if (t < 1) raf = requestAnimationFrame(tick)
        }
        raf = requestAnimationFrame(tick)
      },
      { threshold: 0.4 },
    )
    io.observe(el)
    return () => {
      io.disconnect()
      cancelAnimationFrame(raf)
    }
  }, [target, duration])

  return [ref, value] as const
}

function Stat({ label, target, format }: { label: string; target: number; format: (n: number) => string }) {
  const [ref, value] = useCountUp(target)
  return (
    <div ref={ref as React.Ref<HTMLDivElement>} className="rounded-lg border border-border bg-surface p-5">
      <div className="text-3xl font-semibold tabular-nums">{format(value)}</div>
      <div className="mt-1 text-sm text-fg-muted">{label}</div>
    </div>
  )
}

const int = (n: number) => Math.round(n).toLocaleString('en-IN')

export default function CountUp() {
  const [key, setKey] = useState(0)
  return (
    <div>
      <div key={key} className="grid grid-cols-2 gap-4 lg:grid-cols-4">
        <Stat label="Fragments ingested" target={128540} format={int} />
        <Stat label="Timelines rebuilt" target={3412} format={int} />
        <Stat label="Accuracy" target={97.4} format={(n) => `${n.toFixed(1)}%`} />
        <Stat label="Median latency" target={180} format={(n) => `${Math.round(n)}ms`} />
      </div>
      <button className="mt-4 text-sm text-fg-muted hover:text-fg" onClick={() => setKey((k) => k + 1)}>
        ↻ Replay
      </button>
    </div>
  )
}
```

# Spotlight card
> Cursor-following glow and slight 3D tilt, driven by CSS variables so React never re-renders.
- **Category:** Motion
- **Slug:** spotlight-card
- **Tags:** hover effect, glow, tilt, cursor, card
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/spotlight-card
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion/SpotlightCard.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion/SpotlightCard.tsx

## When to use
- Feature grids and pricing cards on landing pages
- Sparingly: one group per page

## Accessibility

Purely decorative on pointer; tilt disabled under reduced motion; content readable without effect.


## Source
`src/patterns/motion/SpotlightCard.tsx`
```tsx
import type { ReactNode } from 'react'

/*
 * Cursor spotlight + subtle tilt. Pointer position is written to CSS vars
 * (no React state, so no re-renders); a radial gradient and transform read them.
 */
function track(e: React.PointerEvent<HTMLElement>) {
  const el = e.currentTarget
  const r = el.getBoundingClientRect()
  const x = e.clientX - r.left
  const y = e.clientY - r.top
  el.style.setProperty('--x', `${x}px`)
  el.style.setProperty('--y', `${y}px`)
  el.style.setProperty('--rx', `${((y / r.height) - 0.5) * -6}deg`)
  el.style.setProperty('--ry', `${((x / r.width) - 0.5) * 6}deg`)
}

function reset(e: React.PointerEvent<HTMLElement>) {
  e.currentTarget.style.setProperty('--rx', '0deg')
  e.currentTarget.style.setProperty('--ry', '0deg')
}

export function SpotlightCard({ children, className = '' }: { children: ReactNode; className?: string }) {
  return (
    <div
      onPointerMove={track}
      onPointerLeave={reset}
      className={`spot group relative overflow-hidden rounded-xl border border-border bg-surface p-6 ${className}`}
    >
      <style>{`
        .spot { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform var(--dur-base) var(--ease-out-expo); }
        .spot::before {
          content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-base);
          background: radial-gradient(320px circle at var(--x) var(--y), color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%);
        }
        .spot:hover::before { opacity: 1; }
        @media (prefers-reduced-motion: reduce) { .spot { transform: none; } }
      `}</style>
      <div className="relative">{children}</div>
    </div>
  )
}

const FEATURES = [
  ['Tokens first', 'Every colour, radius and duration comes from one file.'],
  ['Live demos', 'Nothing gets in without a working example.'],
  ['Copy-paste', 'Each pattern is one file with no hidden dependencies.'],
]

export default function SpotlightDemo() {
  return (
    <div className="grid gap-4 sm:grid-cols-3">
      {FEATURES.map(([t, d]) => (
        <SpotlightCard key={t}>
          <h3 className="font-medium">{t}</h3>
          <p className="mt-2 text-sm text-fg-muted">{d}</p>
        </SpotlightCard>
      ))}
    </div>
  )
}
```

# Blueprint intro
> Construction lines draw across the frame, then the logo traces itself, then the tagline fades in. SVG stroke animation.
- **Category:** Motion
- **Slug:** blueprint-intro
- **Tags:** intro, loader, svg, line drawing, stroke-dashoffset, logo animation
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/blueprint-intro
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion/BlueprintIntro.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion/BlueprintIntro.tsx

## When to use
- Studio / architecture / engineering landing intros
- Loading screen that shows the brand being built

## Accessibility

role="img" with a label; finished drawing shown immediately under reduced motion. Keep intros under ~3s and skippable.


## Source
`src/patterns/motion/BlueprintIntro.tsx`
```tsx
import { useState } from 'react'

/*
 * Blueprint intro: construction lines draw across the frame, then the mark
 * traces itself on top, then the tagline fades in. Everything is SVG
 * strokes animated with stroke-dashoffset; pathLength="1" normalises every
 * line so one keyframe works for all of them.
 * Reduced motion: the finished drawing appears without animation.
 */

const CSS = `
.bp line, .bp circle, .bp path { fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.bp .guide { stroke: currentColor; stroke-opacity: .28; stroke-width: 1; animation: bp-draw 1.1s var(--ease-in-out) forwards; }
.bp .mark  { stroke: currentColor; stroke-width: 2; animation: bp-draw 1.4s var(--ease-out-expo) 1.2s forwards; }
.bp .tag   { opacity: 0; animation: bp-fade .8s ease 2.4s forwards; }
@keyframes bp-draw { to { stroke-dashoffset: 0; } }
@keyframes bp-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .bp line, .bp circle, .bp path { stroke-dashoffset: 0; animation: none; }
  .bp .tag { opacity: 1; animation: none; }
}
`

const GUIDES: [number, number, number, number][] = [
  [0, 60, 400, 60], [0, 118, 400, 118], [0, 176, 400, 176], [0, 186, 400, 186],
  [120, 0, 120, 240], [280, 0, 280, 240], [110, 250, 230, -10], [170, -10, 290, 250],
]

export function BlueprintIntro({ tagline = 'Architect worlds that move.' }: { tagline?: string }) {
  return (
    <div className="bp relative text-fg" role="img" aria-label={`Logo drawing: ${tagline}`}>
      <style>{CSS}</style>
      <svg viewBox="0 0 400 240" className="w-full">
        {GUIDES.map(([x1, y1, x2, y2], i) => (
          <line key={i} className="guide" x1={x1} y1={y1} x2={x2} y2={y2} pathLength={1} style={{ animationDelay: `${i * 70}ms` }} />
        ))}
        <circle className="guide" cx={200} cy={120} r={78} pathLength={1} style={{ animationDelay: '300ms' }} />
        <path className="mark" d="M200 40 L290 186 L110 186 Z M200 92 L258 176 L142 176 Z" pathLength={1} />
      </svg>
      <p className="tag mt-2 text-center font-mono text-xs tracking-[0.2em] text-fg-muted uppercase">{tagline}</p>
    </div>
  )
}

export default function BlueprintIntroDemo() {
  const [key, setKey] = useState(0)
  return (
    <div className="mx-auto max-w-xl rounded-xl bg-black p-6 text-white [--fg:#fff] [--fg-muted:#a1a1aa]">
      <BlueprintIntro key={key} />
      <button onClick={() => setKey((k) => k + 1)} className="mt-4 text-sm text-neutral-400 hover:text-white">
        ↻ Replay
      </button>
    </div>
  )
}
```

# Pinned horizontal scroll
> Vertical scroll drives a horizontal track inside a pinned (sticky) frame. No library.
- **Category:** Motion
- **Slug:** pinned-horizontal
- **Tags:** scroll, sticky, pin, horizontal scroll, scrollytelling, parallax
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/pinned-horizontal
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion/PinnedHorizontal.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion/PinnedHorizontal.tsx

## When to use
- Process steps, case-study galleries, timelines
- Storytelling sections on landing pages

## Accessibility

Falls back to a normal horizontally scrollable row under reduced motion; container is focusable for keyboard scrolling.


## Source
`src/patterns/motion/PinnedHorizontal.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'

/*
 * Vertical scroll drives a horizontal track. A tall outer section gives the
 * scroll distance; an inner sticky frame pins to the viewport while the
 * track translates by (progress × overflow width). No library needed.
 * Progress is computed from the section's rect against the nearest
 * scroll container, so it works inside a page or a scrolling panel.
 * Reduced motion: becomes a normal horizontally scrollable row.
 */

const PANELS = ['Discover', 'Collect', 'Align', 'Reconstruct', 'Share'].map((t, i) => ({ t, hue: 220 + i * 28 }))

export default function PinnedHorizontal() {
  const outer = useRef<HTMLDivElement>(null)
  const track = useRef<HTMLDivElement>(null)
  const [x, setX] = useState(0)
  const [reduced] = useState(() => matchMedia('(prefers-reduced-motion: reduce)').matches)

  useEffect(() => {
    if (reduced) return
    const scroller = outer.current!.parentElement!
    const update = () => {
      const o = outer.current!
      const t = track.current!
      const frame = scroller.getBoundingClientRect()
      const r = o.getBoundingClientRect()
      const total = r.height - frame.height
      const p = Math.min(Math.max((frame.top - r.top) / total, 0), 1)
      setX(-p * (t.scrollWidth - t.clientWidth))
    }
    scroller.addEventListener('scroll', update, { passive: true })
    update()
    return () => scroller.removeEventListener('scroll', update)
  }, [reduced])

  const panels = PANELS.map((p, i) => (
    <div
      key={p.t}
      className="flex h-56 w-72 shrink-0 flex-col justify-between rounded-2xl p-6 text-white"
      style={{ background: `linear-gradient(150deg, hsl(${p.hue} 70% 55%), hsl(${p.hue + 30} 60% 22%))` }}
    >
      <span className="font-mono text-xs opacity-80">0{i + 1} / 0{PANELS.length}</span>
      <span className="font-display text-4xl italic">{p.t}</span>
    </div>
  ))

  if (reduced) return <div className="flex gap-4 overflow-x-auto pb-2">{panels}</div>

  return (
    <div className="h-80 overflow-y-auto rounded-xl border border-border" tabIndex={0} aria-label="Scroll down to move sideways">
      <div ref={outer} style={{ height: '320%' }} className="relative">
        <div className="sticky top-0 flex h-80 flex-col justify-center gap-4 overflow-hidden px-6">
          <p className="font-mono text-xs text-fg-muted">scroll ↓ inside this box</p>
          <div ref={track} className="flex gap-4" style={{ transform: `translateX(${x}px)` }}>
            {panels}
          </div>
        </div>
      </div>
    </div>
  )
}
```

# Magnetic button
> Button leans toward the pointer inside its hover area, label leans further, springs back on leave.
- **Category:** Motion
- **Slug:** magnetic-button
- **Tags:** magnetic, hover, cursor, button, micro-interaction
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/magnetic-button
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion/MagneticButton.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion/MagneticButton.tsx

## When to use
- Primary CTAs and nav on creative sites

## Accessibility

Pure pointer effect; the button works normally for keyboard. Disabled under reduced motion.


## Source
`src/patterns/motion/MagneticButton.tsx`
```tsx
import { useRef, type ReactNode } from 'react'

/*
 * Magnetic button: within its hover area the button leans toward the
 * pointer (and its label leans a bit more, for depth), then springs back on
 * leave. Transforms are written straight to style; no React state.
 */

export function Magnetic({ children, strength = 0.35 }: { children: ReactNode; strength?: number }) {
  const inner = useRef<HTMLSpanElement>(null)
  return (
    <span
      className="inline-block p-6 motion-reduce:pointer-events-none"
      onPointerMove={(e) => {
        const r = e.currentTarget.getBoundingClientRect()
        const x = (e.clientX - r.left - r.width / 2) * strength
        const y = (e.clientY - r.top - r.height / 2) * strength
        const btn = e.currentTarget.firstElementChild as HTMLElement
        btn.style.transform = `translate(${x}px, ${y}px)`
        if (inner.current) inner.current.style.transform = `translate(${x * 0.4}px, ${y * 0.4}px)`
      }}
      onPointerLeave={(e) => {
        ;(e.currentTarget.firstElementChild as HTMLElement).style.transform = ''
        if (inner.current) inner.current.style.transform = ''
      }}
    >
      <span className="inline-block transition-transform duration-300 ease-out-expo">
        {typeof children === 'string' ? <span ref={inner} className="inline-block transition-transform duration-300 ease-out-expo">{children}</span> : children}
      </span>
    </span>
  )
}

export default function MagneticButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4 py-8">
      <Magnetic>
        <button className="rounded-full bg-fg px-8 py-4 font-medium text-bg">Let's talk →</button>
      </Magnetic>
      <Magnetic strength={0.5}>
        <button className="grid h-24 w-24 place-items-center rounded-full border border-border text-sm">Menu</button>
      </Magnetic>
    </div>
  )
}
```

# Custom cursor
> Dot + eased ring cursor with blend-mode inversion; grows and shows a label over [data-cursor] elements.
- **Category:** Motion
- **Slug:** custom-cursor
- **Tags:** cursor, custom cursor, mix-blend-mode, hover label, lerp
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/custom-cursor
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion/CustomCursor.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion/CustomCursor.tsx

## When to use
- Portfolio and agency sites with big media

## Accessibility

Only on fine pointers; native cursor kept under reduced motion and on touch. Never hide the cursor over form fields in real use.


## Source
`src/patterns/motion/CustomCursor.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'

/*
 * Custom cursor scoped to a region: a dot that tracks exactly and a ring
 * that eases after it (lerp in rAF). Over elements with data-cursor the ring
 * grows and shows that label; mix-blend-mode: difference inverts what is
 * under it. Only on fine pointers; the native cursor returns under reduced
 * motion and on touch.
 */

export function CursorArea({ children }: { children: React.ReactNode }) {
  const area = useRef<HTMLDivElement>(null)
  const dot = useRef<HTMLDivElement>(null)
  const ring = useRef<HTMLDivElement>(null)
  const [label, setLabel] = useState('')
  const [enabled] = useState(() => matchMedia('(pointer: fine)').matches && !matchMedia('(prefers-reduced-motion: reduce)').matches)

  useEffect(() => {
    if (!enabled) return
    const el = area.current!
    const target = { x: -100, y: -100 }
    const cur = { x: -100, y: -100 }
    let raf = 0
    const tick = () => {
      cur.x += (target.x - cur.x) * 0.18
      cur.y += (target.y - cur.y) * 0.18
      ring.current!.style.transform = `translate(${cur.x}px, ${cur.y}px) translate(-50%, -50%)`
      raf = requestAnimationFrame(tick)
    }
    const move = (e: PointerEvent) => {
      const r = el.getBoundingClientRect()
      target.x = e.clientX - r.left
      target.y = e.clientY - r.top
      dot.current!.style.transform = `translate(${target.x}px, ${target.y}px) translate(-50%, -50%)`
      const hit = (e.target as HTMLElement).closest<HTMLElement>('[data-cursor]')
      setLabel(hit?.dataset.cursor ?? '')
    }
    el.addEventListener('pointermove', move)
    raf = requestAnimationFrame(tick)
    return () => {
      el.removeEventListener('pointermove', move)
      cancelAnimationFrame(raf)
    }
  }, [enabled])

  return (
    <div ref={area} className={`relative overflow-hidden ${enabled ? 'cursor-none [&_*]:cursor-none' : ''}`}>
      {children}
      {enabled && (
        <>
          <div ref={ring} aria-hidden className="pointer-events-none absolute top-0 left-0 z-50 grid place-items-center rounded-full border border-white bg-white font-mono text-[10px] text-black mix-blend-difference transition-[width,height] duration-300 ease-out-expo" style={{ width: label ? 84 : 36, height: label ? 84 : 36, background: label ? 'white' : 'transparent' }}>
            {label}
          </div>
          <div ref={dot} aria-hidden className="pointer-events-none absolute top-0 left-0 z-50 h-1.5 w-1.5 rounded-full bg-white mix-blend-difference" />
        </>
      )}
    </div>
  )
}

export default function CustomCursorDemo() {
  return (
    <CursorArea>
      <div className="grid h-72 grid-cols-3 gap-3 p-4">
        {['View', 'Play', 'Drag'].map((l, i) => (
          <div key={l} data-cursor={l} className="grid place-items-center rounded-xl text-white" style={{ background: `hsl(${i * 90 + 200} 60% 45%)` }}>
            <span className="font-display text-3xl italic">{l}</span>
          </div>
        ))}
      </div>
    </CursorArea>
  )
}
```

# Cursor image trail
> Images drop along the pointer path and fade/scale out, recycled from a fixed pool.
- **Category:** Motion
- **Slug:** image-trail
- **Tags:** image trail, cursor, hover, web animations api, playful
- **Dependencies:** three-d/_shared.ts (img() placeholder URLs, makeSpinner drag helper)
- **Live demo:** https://ui-lab-weld.vercel.app/#/image-trail
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion/ImageTrail.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion/ImageTrail.tsx

## When to use
- Portfolio heroes, photography, fashion

## Accessibility

Decorative, aria-hidden; off under reduced motion.


## Source
`src/patterns/motion/ImageTrail.tsx`
```tsx
import { useRef } from 'react'
import { img } from '../three-d/_shared'

/*
 * Cursor image trail: every N pixels of pointer travel, drop the next image
 * from a pool at the pointer, then scale/fade it out. A fixed pool of DOM
 * nodes is recycled (no mounting per move). Decorative; off under reduced
 * motion.
 */

const POOL = 10
const DIST = 80

export default function ImageTrail() {
  const nodes = useRef<(HTMLImageElement | null)[]>([])
  const last = useRef({ x: 0, y: 0, i: 0 })

  return (
    <div
      className="relative grid h-80 place-items-center overflow-hidden rounded-xl border border-border bg-bg"
      onPointerMove={(e) => {
        if (matchMedia('(prefers-reduced-motion: reduce)').matches) return
        const r = e.currentTarget.getBoundingClientRect()
        const x = e.clientX - r.left
        const y = e.clientY - r.top
        if (Math.hypot(x - last.current.x, y - last.current.y) < DIST) return
        last.current.x = x
        last.current.y = y
        const el = nodes.current[last.current.i++ % POOL]
        if (!el) return
        el.getAnimations().forEach((a) => a.cancel())
        el.style.left = `${x}px`
        el.style.top = `${y}px`
        el.style.zIndex = String(last.current.i)
        el.animate(
          [
            { opacity: 1, transform: 'translate(-50%,-50%) scale(.6) rotate(-6deg)' },
            { opacity: 1, transform: 'translate(-50%,-50%) scale(1) rotate(0deg)', offset: 0.25 },
            { opacity: 0, transform: 'translate(-50%,-40%) scale(.85)' },
          ],
          { duration: 1100, easing: 'cubic-bezier(.16,1,.3,1)', fill: 'forwards' },
        )
      }}
    >
      {Array.from({ length: POOL }, (_, i) => (
        <img key={i} ref={(el) => { nodes.current[i] = el }} src={img(i + 600, 200, 260)} alt="" aria-hidden className="pointer-events-none absolute h-32 w-24 rounded-md object-cover opacity-0 shadow-lg" />
      ))}
      <p className="relative font-display text-5xl italic">Move around</p>
    </div>
  )
}
```

# Sticky stacking cards
> Cards pin with increasing offsets and pile up as you scroll; buried cards shrink via a view timeline. No JS.
- **Category:** Motion
- **Slug:** stacking-cards
- **Tags:** sticky, stack, scroll, cards, animation-timeline
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/stacking-cards
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion/StackingCards.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion/StackingCards.tsx

## When to use
- Process steps, services, feature stories

## Accessibility

Plain articles in reading order; shrink effect removed under reduced motion.


## Source
`src/patterns/motion/StackingCards.tsx`
```tsx
/*
 * Sticky stacking cards: each card is position: sticky with an increasing
 * top offset, so as you scroll they pile up on each other. The ones buried
 * underneath shrink slightly via a scroll-driven animation (view timeline),
 * with no JS. Without scroll-timeline support they simply stack.
 */

const CSS = `
@supports (animation-timeline: view()) {
  .stack-card { animation: stack-shrink linear both; animation-timeline: view(); animation-range: exit-crossing 0% exit-crossing 100%; }
}
@keyframes stack-shrink { to { transform: scale(.9); filter: brightness(.6); } }
@media (prefers-reduced-motion: reduce) { .stack-card { animation: none; } }
`

const CARDS = [
  { t: 'Research', d: 'Interviews, analytics and teardown of competitors.', hue: 250 },
  { t: 'Design', d: 'Tokens first, then screens, then motion.', hue: 320 },
  { t: 'Build', d: 'One component at a time, each with a live demo.', hue: 20 },
  { t: 'Launch', d: 'Measure, fix, and ship again next Friday.', hue: 160 },
]

export default function StackingCards() {
  return (
    <div className="h-96 overflow-y-auto rounded-xl border border-border" tabIndex={0} aria-label="Stacking cards, scroll inside">
      <style>{CSS}</style>
      <div className="space-y-6 p-4 pb-40">
        <p className="font-mono text-xs text-fg-muted">scroll ↓</p>
        {CARDS.map((c, i) => (
          <article
            key={c.t}
            className="stack-card sticky flex h-60 flex-col justify-between rounded-2xl p-6 text-white shadow-lg"
            style={{ top: 16 + i * 14, background: `linear-gradient(140deg, hsl(${c.hue} 70% 55%), hsl(${c.hue + 30} 60% 25%))` }}
          >
            <span className="font-mono text-xs opacity-80">0{i + 1}</span>
            <div>
              <h3 className="font-display text-4xl italic">{c.t}</h3>
              <p className="mt-1 text-sm opacity-90">{c.d}</p>
            </div>
          </article>
        ))}
      </div>
    </div>
  )
}
```

# Zoom-out framed hero
> Full-bleed hero image that shrinks into a rounded window as you scroll (clip-path), headline scaling with it.
- **Category:** Motion
- **Slug:** zoom-out-hero
- **Tags:** hero, scroll, clip-path, zoom, frame, cinematic
- **Dependencies:** three-d/_shared.ts (img() placeholder URLs, makeSpinner drag helper)
- **Live demo:** https://ui-lab-weld.vercel.app/#/zoom-out-hero
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion/ZoomOutHero.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion/ZoomOutHero.tsx

## When to use
- Studio / product launches, cinematic intros

## Accessibility

Image has alt text; end state shown under reduced motion.


## Source
`src/patterns/motion/ZoomOutHero.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'
import { img } from '../three-d/_shared'

/*
 * Full-bleed hero that shrinks into a framed window as you scroll (Alche-
 * style). Scroll progress through a tall section maps to inset (clip-path),
 * corner radius and the headline's position. clip-path keeps layout
 * stable, only paint changes. Reduced motion: shows the framed end state.
 */

export default function ZoomOutHero() {
  const box = useRef<HTMLDivElement>(null)
  const [p, setP] = useState(0)
  const [reduced] = useState(() => matchMedia('(prefers-reduced-motion: reduce)').matches)

  useEffect(() => {
    const el = box.current!
    const on = () => setP(Math.min(1, el.scrollTop / (el.clientHeight * 1.2)))
    el.addEventListener('scroll', on, { passive: true })
    return () => el.removeEventListener('scroll', on)
  }, [])

  const t = reduced ? 1 : p
  return (
    <div ref={box} className="h-96 overflow-y-auto rounded-xl bg-bg" tabIndex={0} aria-label="Zoom-out hero, scroll inside">
      <div style={{ height: '260%' }}>
        <div className="sticky top-0 h-96">
          <div
            className="absolute inset-0 overflow-hidden"
            style={{ clipPath: `inset(${t * 18}% ${t * 22}% ${t * 18}% ${t * 22}% round ${t * 24}px)` }}
          >
            <img src={img(700, 1200, 800)} alt="Aerial landscape" className="h-full w-full object-cover" style={{ transform: `scale(${1.15 - t * 0.15})` }} />
          </div>
          <h3
            className="absolute left-6 font-semibold tracking-tight text-fg mix-blend-difference"
            style={{ bottom: `${8 + t * 4}%`, fontSize: `${3.5 - t * 1.6}rem`, color: 'white' }}
          >
            Worlds, framed.
          </h3>
          <p className="absolute top-3 right-4 font-mono text-xs text-white/70 mix-blend-difference">scroll ↓</p>
        </div>
      </div>
    </div>
  )
}
```

# Reading progress bar
> Progress bar driven by a CSS scroll timeline, no JS.
- **Category:** Motion
- **Slug:** scroll-progress
- **Tags:** progress, scroll, reading, animation-timeline, indicator
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/scroll-progress
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion/ScrollProgress.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion/ScrollProgress.tsx

## When to use
- Articles, docs, long landing pages

## Accessibility

Decorative (aria-hidden); the scrollbar remains the accessible indicator.


## Source
`src/patterns/motion/ScrollProgress.tsx`
```tsx
/*
 * Reading progress bar + section indicator driven by a CSS scroll timeline
 * (animation-timeline: scroll()), no JS. The bar scales on X from 0 to 1
 * with the nearest scroller. Falls back to hidden where unsupported.
 */

const CSS = `
.progress-bar { transform-origin: left; transform: scaleX(0); }
@supports (animation-timeline: scroll()) {
  .progress-bar { animation: grow linear both; animation-timeline: scroll(nearest block); }
}
@keyframes grow { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .progress-bar { animation-duration: 1ms; } }
`

export default function ScrollProgress() {
  return (
    <div className="h-80 overflow-y-auto rounded-xl border border-border" tabIndex={0} aria-label="Article with reading progress, scroll inside">
      <style>{CSS}</style>
      <div className="sticky top-0 z-10 h-1 bg-surface-2">
        <div className="progress-bar h-full bg-accent" aria-hidden />
      </div>
      <article className="prose-sm max-w-none space-y-4 p-6 text-fg-muted">
        <h3 className="text-xl font-semibold text-fg">Reading progress</h3>
        {Array.from({ length: 8 }, (_, i) => (
          <p key={i}>
            Paragraph {i + 1}. The bar above tracks how far through this box you have scrolled, using a scroll timeline so
            the browser drives it on the compositor. Swap the scroller for the document and it becomes a page-level
            reading indicator.
          </p>
        ))}
      </article>
    </div>
  )
}
```

# Hover image list
> Editorial list; hovering a row floats its image near the cursor while other rows dim.
- **Category:** Motion
- **Slug:** hover-image-list
- **Tags:** hover, image reveal, list, editorial, portfolio index
- **Dependencies:** three-d/_shared.ts (img() placeholder URLs, makeSpinner drag helper)
- **Live demo:** https://ui-lab-weld.vercel.app/#/hover-image-list
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion/HoverImageList.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion/HoverImageList.tsx

## When to use
- Work indexes, menus, article lists

## Accessibility

Rows are links; keyboard focus also reveals the image; image decorative.


## Source
`src/patterns/motion/HoverImageList.tsx`
```tsx
import { useRef, useState } from 'react'
import { img } from '../three-d/_shared'

/*
 * Big editorial list where hovering a row reveals its image floating near
 * the cursor (eased follow), rows dimming except the active one. Keyboard
 * focus shows the image too, pinned to the row's right edge.
 */

const ROWS = [
  ['Kyoto Residence', 'Architecture', '2026'],
  ['Saltwater', 'Brand identity', '2025'],
  ['Nocturne', 'Campaign', '2025'],
  ['Field Notes', 'Editorial', '2024'],
  ['Monolith', 'Product', '2024'],
]

export default function HoverImageList() {
  const [active, setActive] = useState<number | null>(null)
  const pic = useRef<HTMLDivElement>(null)
  return (
    <div
      className="relative"
      onPointerMove={(e) => {
        const r = e.currentTarget.getBoundingClientRect()
        if (pic.current) pic.current.style.transform = `translate(${e.clientX - r.left + 24}px, ${e.clientY - r.top - 80}px)`
      }}
      onPointerLeave={() => setActive(null)}
    >
      <ul className="divide-y divide-border border-y border-border">
        {ROWS.map(([t, k, y], i) => (
          <li key={t}>
            <a
              href="#"
              onClick={(e) => e.preventDefault()}
              onPointerEnter={() => setActive(i)}
              onFocus={(e) => {
                setActive(i)
                const r = e.currentTarget.getBoundingClientRect()
                const pr = e.currentTarget.closest('.relative')!.getBoundingClientRect()
                if (pic.current) pic.current.style.transform = `translate(${r.right - pr.left - 200}px, ${r.top - pr.top - 60}px)`
              }}
              className={`flex items-baseline justify-between gap-4 py-4 transition-opacity duration-300 ${active !== null && active !== i ? 'opacity-30' : ''}`}
            >
              <span className="text-2xl font-medium tracking-tight sm:text-3xl">{t}</span>
              <span className="font-mono text-xs text-fg-muted">{k} · {y}</span>
            </a>
          </li>
        ))}
      </ul>
      <div ref={pic} aria-hidden className="pointer-events-none absolute top-0 left-0 h-44 w-36 transition-transform duration-500 ease-out-expo">
        {ROWS.map((_, i) => (
          <img key={i} src={img(i + 800, 280, 360)} alt="" className="absolute inset-0 h-full w-full rounded-lg object-cover shadow-lg transition-all duration-300" style={{ opacity: active === i ? 1 : 0, transform: active === i ? 'scale(1)' : 'scale(.9)' }} />
        ))}
      </div>
    </div>
  )
}
```

# Image caption hovers (6)
> Slide-up caption, zoom + dim, split reveal, frame draw, circle clip reveal and greyscale-to-colour.
- **Category:** Motion
- **Slug:** caption-hover
- **Tags:** hover, image, caption, card, portfolio, clip-path
- **Dependencies:** three-d/_shared.ts (img() placeholder URLs, makeSpinner drag helper)
- **Live demo:** https://ui-lab-weld.vercel.app/#/caption-hover
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion/CaptionHover.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion/CaptionHover.tsx

## When to use
- Portfolio grids, product cards, blog tiles

## Accessibility

Cards are links; :focus-visible gets the hover state so keyboard users see captions.


## Source
`src/patterns/motion/CaptionHover.tsx`
```tsx
import { img } from '../three-d/_shared'

/*
 * Six image-card hover treatments in CSS: slide-up caption, zoom + dim,
 * split reveal (two halves part), corner frame draw, clip-path circle
 * reveal, and colour-from-greyscale. Each card is a link, and focus-visible
 * triggers the same state as hover so keyboard users see it too.
 */

const CSS = `
.cap { position: relative; overflow: hidden; border-radius: 14px; display: block; aspect-ratio: 4/5; color: white; }
.cap img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out-expo), filter .5s; }
.cap .t { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem; }
.c-slide .t { background: linear-gradient(transparent, rgb(0 0 0 / .75)); transform: translateY(100%); transition: transform .5s var(--ease-out-expo); }
.c-slide:is(:hover,:focus-visible) .t { transform: none; }
.c-zoom::after { content: ''; position: absolute; inset: 0; background: rgb(0 0 0 / .45); opacity: 0; transition: opacity .4s; }
.c-zoom .t { z-index: 1; opacity: 0; transform: translateY(10px); transition: all .4s var(--ease-out-expo); }
.c-zoom:is(:hover,:focus-visible) img { transform: scale(1.12); }
.c-zoom:is(:hover,:focus-visible)::after, .c-zoom:is(:hover,:focus-visible) .t { opacity: 1; transform: none; }
.c-split .h { position: absolute; left: 0; right: 0; height: 50%; background: var(--fg); z-index: 1; transition: transform .6s var(--ease-out-expo); }
.c-split .h1 { top: 0; } .c-split .h2 { bottom: 0; }
.c-split .t { top: 50%; bottom: auto; transform: translateY(-50%); text-align: center; z-index: 2; color: var(--bg); transition: opacity .3s; }
.c-split:is(:hover,:focus-visible) .h1 { transform: translateY(-100%); } .c-split:is(:hover,:focus-visible) .h2 { transform: translateY(100%); }
.c-split:is(:hover,:focus-visible) .t { opacity: 0; }
.c-frame::before { content: ''; position: absolute; inset: 14px; border: 1px solid white; z-index: 1; transform: scale(1.15); opacity: 0; transition: all .5s var(--ease-out-expo); }
.c-frame:is(:hover,:focus-visible)::before { transform: none; opacity: 1; }
.c-frame .t { z-index: 1; text-align: center; top: 50%; bottom: auto; transform: translateY(-50%); opacity: 0; transition: opacity .4s .1s; }
.c-frame:is(:hover,:focus-visible) .t { opacity: 1; } .c-frame:is(:hover,:focus-visible) img { filter: brightness(.55); }
.c-circle .t { inset: 0; display: grid; place-items: center; background: var(--accent); clip-path: circle(0% at 50% 50%); transition: clip-path .6s var(--ease-out-expo); }
.c-circle:is(:hover,:focus-visible) .t { clip-path: circle(75% at 50% 50%); }
.c-gray img { filter: grayscale(1) contrast(1.1); } .c-gray:is(:hover,:focus-visible) img { filter: none; transform: scale(1.04); }
.c-gray .t { background: linear-gradient(transparent, rgb(0 0 0 / .6)); }
@media (prefers-reduced-motion: reduce) { .cap *, .cap::before, .cap::after { transition: none !important; } }
`

const CARDS = ['c-slide', 'c-zoom', 'c-split', 'c-frame', 'c-circle', 'c-gray']

export default function CaptionHover() {
  return (
    <div className="grid grid-cols-2 gap-4 md:grid-cols-3">
      <style>{CSS}</style>
      {CARDS.map((c, i) => (
        <a key={c} href="#" onClick={(e) => e.preventDefault()} className={`cap ${c}`}>
          <img src={img(i + 1000, 400, 500)} alt="" />
          {c === 'c-split' && (
            <>
              <span className="h h1" aria-hidden />
              <span className="h h2" aria-hidden />
            </>
          )}
          <span className="t">
            <span className="block font-display text-2xl italic">Project {i + 1}</span>
            <span className="font-mono text-[11px] opacity-80">.{c}</span>
          </span>
        </a>
      ))}
    </div>
  )
}
```

# Direction-aware hover
> The overlay slides in from the edge the pointer entered and leaves through the edge it exits.
- **Category:** Motion
- **Slug:** direction-aware-hover
- **Tags:** hover, direction, overlay, grid, pointer
- **Dependencies:** three-d/_shared.ts (img() placeholder URLs, makeSpinner drag helper)
- **Live demo:** https://ui-lab-weld.vercel.app/#/direction-aware-hover
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion/DirectionAwareHover.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion/DirectionAwareHover.tsx

## When to use
- Image grids, team photos, galleries

## Accessibility

Links; focus shows the overlay from below; no transition under reduced motion.


## Source
`src/patterns/motion/DirectionAwareHover.tsx`
```tsx
import { img } from '../three-d/_shared'

/*
 * Direction-aware hover: the overlay slides in from the edge the pointer
 * entered through, and out through the edge it left by. The entry edge is
 * the side closest to the pointer (compare distances to each edge), written
 * to data attributes that CSS animates. Keyboard focus shows it from below.
 */

type Side = 'top' | 'right' | 'bottom' | 'left'
const FROM: Record<Side, string> = { top: 'translateY(-100%)', right: 'translateX(100%)', bottom: 'translateY(100%)', left: 'translateX(-100%)' }

function side(e: React.PointerEvent<HTMLElement>): Side {
  const r = e.currentTarget.getBoundingClientRect()
  const d = { top: e.clientY - r.top, bottom: r.bottom - e.clientY, left: e.clientX - r.left, right: r.right - e.clientX }
  return (Object.keys(d) as Side[]).reduce((a, b) => (d[a] < d[b] ? a : b))
}

export default function DirectionAwareHover() {
  return (
    <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
      {Array.from({ length: 8 }, (_, i) => (
        <a
          key={i}
          href="#"
          onClick={(e) => e.preventDefault()}
          className="group relative block aspect-square overflow-hidden rounded-xl"
          onPointerEnter={(e) => {
            const o = e.currentTarget.querySelector<HTMLElement>('.ov')!
            o.style.transition = 'none'
            o.style.transform = FROM[side(e)]
            requestAnimationFrame(() => {
              o.style.transition = ''
              o.style.transform = 'none'
            })
          }}
          onPointerLeave={(e) => {
            e.currentTarget.querySelector<HTMLElement>('.ov')!.style.transform = FROM[side(e)]
          }}
        >
          <img src={img(i + 1100, 300, 300)} alt="" className="h-full w-full object-cover" />
          <span
            className="ov absolute inset-0 grid place-items-center bg-accent/85 text-accent-fg transition-transform duration-300 ease-out-expo group-focus-visible:!translate-y-0 motion-reduce:transition-none"
            style={{ transform: 'translateY(100%)' }}
          >
            <span className="font-display text-2xl italic">No. {i + 1}</span>
          </span>
        </a>
      ))}
    </div>
  )
}
```

# Layered image tilt
> Image plus translucent copies and a title move at different depths with the pointer.
- **Category:** Motion
- **Slug:** image-tilt
- **Tags:** tilt, parallax, layers, hover, depth
- **Dependencies:** three-d/_shared.ts (img() placeholder URLs, makeSpinner drag helper)
- **Live demo:** https://ui-lab-weld.vercel.app/#/image-tilt
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion/ImageTilt.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion/ImageTilt.tsx

## When to use
- Hero images, featured posts, album art

## Accessibility

Only the base image has alt text; copies aria-hidden; pointer effect disabled under reduced motion.


## Source
`src/patterns/motion/ImageTilt.tsx`
```tsx
import { useRef } from 'react'
import { img } from '../three-d/_shared'

/*
 * Layered image tilt: the image plus two semi-transparent copies move and
 * rotate by different amounts with the pointer, so the picture seems to
 * separate into depth layers. A title floats above at the largest depth.
 * Transforms are written to style directly.
 */

const DEPTHS = [1, 1.6, 2.4]

export default function ImageTilt() {
  const layers = useRef<(HTMLElement | null)[]>([])
  const move = (x: number, y: number) =>
    layers.current.forEach((el, i) => {
      if (!el) return
      const d = i < DEPTHS.length ? DEPTHS[i] : 3.2
      el.style.transform = `translate(${x * d * 10}px, ${y * d * 10}px) rotateX(${-y * d * 3}deg) rotateY(${x * d * 3}deg)`
    })
  return (
    <div className="grid place-items-center py-6 [perspective:900px]">
      <div
        className="relative h-80 w-64 motion-reduce:pointer-events-none"
        onPointerMove={(e) => {
          const r = e.currentTarget.getBoundingClientRect()
          move((e.clientX - r.left) / r.width - 0.5, (e.clientY - r.top) / r.height - 0.5)
        }}
        onPointerLeave={() => move(0, 0)}
      >
        {DEPTHS.map((_, i) => (
          <img
            key={i}
            ref={(el) => { layers.current[i] = el }}
            src={img(1200, 400, 500)}
            alt={i === 0 ? 'Mountain lake at dusk' : ''}
            aria-hidden={i > 0}
            className="absolute inset-0 h-full w-full rounded-2xl object-cover transition-transform duration-300 ease-out"
            style={{ opacity: i === 0 ? 1 : 0.28, mixBlendMode: i ? 'screen' : undefined }}
          />
        ))}
        <p
          ref={(el) => { layers.current[3] = el }}
          className="absolute bottom-6 left-6 font-display text-4xl text-white italic drop-shadow-lg transition-transform duration-300 ease-out"
        >
          Stillwater
        </p>
      </div>
    </div>
  )
}
```

# Click ripple & shockwave
> Ripple from the exact press point (or centre for keyboard), plus a ring shockwave variant.
- **Category:** Motion
- **Slug:** click-ripple
- **Tags:** ripple, material, click, feedback, waapi
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/click-ripple
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion/ClickRipple.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion/ClickRipple.tsx

## When to use
- Buttons, cards, list rows needing tactile feedback

## Accessibility

Decorative; skipped under reduced motion; works for keyboard activation.


## Source
`src/patterns/motion/ClickRipple.tsx`
```tsx
/*
 * Click effects: Material-style ripple from the exact press point, plus a
 * ring "shockwave" variant. The ripple is a span sized to the button's
 * diagonal, scaled from 0 with WAAPI and removed after. Keyboard presses
 * (no coordinates) ripple from the centre.
 */

function ripple(e: React.MouseEvent<HTMLElement>, ring = false) {
  if (matchMedia('(prefers-reduced-motion: reduce)').matches) return
  const el = e.currentTarget
  const r = el.getBoundingClientRect()
  const x = e.clientX ? e.clientX - r.left : r.width / 2
  const y = e.clientY ? e.clientY - r.top : r.height / 2
  const size = Math.hypot(r.width, r.height) * 2
  const s = document.createElement('span')
  Object.assign(s.style, {
    position: 'absolute', left: `${x - size / 2}px`, top: `${y - size / 2}px`, width: `${size}px`, height: `${size}px`,
    borderRadius: '50%', pointerEvents: 'none',
    background: ring ? 'transparent' : 'currentColor', border: ring ? '2px solid currentColor' : 'none',
  })
  el.appendChild(s)
  s.animate([{ transform: 'scale(0)', opacity: ring ? 0.8 : 0.25 }, { transform: 'scale(1)', opacity: 0 }], {
    duration: ring ? 700 : 600,
    easing: 'cubic-bezier(.16,1,.3,1)',
  }).onfinish = () => s.remove()
}

export default function ClickRipple() {
  const base = 'relative overflow-hidden rounded-xl px-6 py-3 text-sm font-medium'
  return (
    <div className="flex flex-wrap items-center justify-center gap-4 py-10">
      <button onClick={(e) => ripple(e)} className={`${base} bg-accent text-accent-fg`}>Ripple</button>
      <button onClick={(e) => ripple(e)} className={`${base} border border-border`}>Outline ripple</button>
      <button onClick={(e) => ripple(e, true)} className={`${base} bg-fg text-bg`}>Shockwave</button>
      <div onClick={(e) => ripple(e)} className="relative grid h-24 w-40 cursor-pointer place-items-center overflow-hidden rounded-xl bg-surface-2 text-sm text-fg-muted">
        tap this card
      </div>
    </div>
  )
}
```

# Pixel page transition
> A grid of squares covers the screen in random order, the page swaps, then it clears.
- **Category:** Motion
- **Slug:** pixel-transition
- **Tags:** page transition, pixel, grid, route change
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/pixel-transition
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion/PixelTransition.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion/PixelTransition.tsx

## When to use
- Page/route changes on portfolio and creative sites

## Accessibility

Nav uses aria-current; instant swap under reduced motion.


## Source
`src/patterns/motion/PixelTransition.tsx`
```tsx
import { useState } from 'react'

/*
 * Pixel page transition: a grid of squares covers the screen in a random
 * order (each cell gets a random delay), the content swaps underneath at
 * full cover, then the cells clear in a new random order. Pure CSS
 * transitions on transform: scale. Reduced motion: instant swap.
 */

const COLS = 12
const ROWS = 7
const PAGES = [
  { t: 'Index', bg: 'linear-gradient(135deg,#1e1b4b,#4338ca)' },
  { t: 'Work', bg: 'linear-gradient(135deg,#431407,#ea580c)' },
  { t: 'About', bg: 'linear-gradient(135deg,#052e16,#16a34a)' },
]
const rnd = () => Array.from({ length: COLS * ROWS }, () => Math.random() * 400)

export default function PixelTransition() {
  const [page, setPage] = useState(0)
  const [cover, setCover] = useState(false)
  const [delays, setDelays] = useState(rnd)

  const go = (n: number) => {
    if (cover || n === page) return
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return setPage(n)
    setDelays(rnd())
    setCover(true)
    setTimeout(() => {
      setPage(n)
      setDelays(rnd())
      setCover(false)
    }, 750)
  }

  return (
    <div className="relative h-80 overflow-hidden rounded-xl text-white" style={{ background: PAGES[page].bg }}>
      <nav className="absolute top-4 left-4 z-10 flex gap-2" aria-label="Pages">
        {PAGES.map((p, i) => (
          <button key={p.t} onClick={() => go(i)} aria-current={i === page ? 'page' : undefined} className={`rounded-full px-3 py-1 text-xs ${i === page ? 'bg-white text-black' : 'bg-white/15'}`}>
            {p.t}
          </button>
        ))}
      </nav>
      <h3 className="absolute bottom-6 left-6 font-display text-6xl italic">{PAGES[page].t}</h3>
      <div className="pointer-events-none absolute inset-0 grid" style={{ gridTemplateColumns: `repeat(${COLS},1fr)`, gridTemplateRows: `repeat(${ROWS},1fr)` }} aria-hidden>
        {delays.map((d, i) => (
          <span
            key={i}
            className="bg-neutral-950"
            style={{ transform: `scale(${cover ? 1.02 : 0})`, transition: 'transform .25s ease', transitionDelay: `${d}ms` }}
          />
        ))}
      </div>
    </div>
  )
}
```

# Layered wipe transition
> Three coloured panels sweep across with a stagger, page swaps under cover, they exit the other side.
- **Category:** Motion
- **Slug:** layered-wipe
- **Tags:** page transition, wipe, clip-path, curtain, stagger
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/layered-wipe
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion/LayeredWipe.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion/LayeredWipe.tsx

## When to use
- Studio / agency route transitions

## Accessibility

Panels aria-hidden; instant swap under reduced motion; aria-current on nav.


## Source
`src/patterns/motion/LayeredWipe.tsx`
```tsx
import { useState } from 'react'

/*
 * Layered wipe page transition: three coloured panels sweep across with a
 * stagger (clip-path inset from one side), the page swaps while covered,
 * then they exit the other side. Classic studio-site transition.
 */

const PAGES = ['Home', 'Projects', 'Studio', 'Contact']
const LAYERS = ['#f97316', '#ec4899', '#18181b']

export default function LayeredWipe() {
  const [page, setPage] = useState(0)
  const [phase, setPhase] = useState<'idle' | 'in' | 'out'>('idle')

  const go = (n: number) => {
    if (phase !== 'idle' || n === page) return
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return setPage(n)
    setPhase('in')
    setTimeout(() => {
      setPage(n)
      setPhase('out')
      setTimeout(() => setPhase('idle'), 900)
    }, 800)
  }

  return (
    <div className="relative h-80 overflow-hidden rounded-xl border border-border bg-bg">
      <nav className="absolute top-4 right-4 z-10 flex gap-3 text-sm" aria-label="Pages">
        {PAGES.map((p, i) => (
          <button key={p} onClick={() => go(i)} aria-current={i === page ? 'page' : undefined} className={i === page ? 'text-fg underline underline-offset-4' : 'text-fg-muted hover:text-fg'}>
            {p}
          </button>
        ))}
      </nav>
      <div className="absolute inset-0 grid place-items-center">
        <h3 className="text-6xl font-semibold tracking-tight">{PAGES[page]}</h3>
      </div>
      {LAYERS.map((c, i) => (
        <span
          key={c}
          aria-hidden
          className="absolute inset-0"
          style={{
            background: c,
            clipPath: phase === 'in' ? 'inset(0 0 0 0)' : phase === 'out' ? 'inset(0 0 0 100%)' : 'inset(0 100% 0 0)',
            transition: phase === 'idle' ? 'none' : `clip-path .6s cubic-bezier(.76,0,.24,1) ${phase === 'in' ? i * 90 : (LAYERS.length - 1 - i) * 90}ms`,
          }}
        />
      ))}
    </div>
  )
}
```

# Elastic grid scroll
> Each column follows scroll with its own lag; the middle one counter-moves, so the grid stretches and settles.
- **Category:** Motion
- **Slug:** elastic-columns
- **Tags:** scroll, parallax, grid, lerp, elastic
- **Dependencies:** three-d/_shared.ts (img() placeholder URLs, makeSpinner drag helper)
- **Live demo:** https://ui-lab-weld.vercel.app/#/elastic-columns
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion/ElasticColumns.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion/ElasticColumns.tsx

## When to use
- Image-heavy portfolios and lookbooks

## Accessibility

Plain grid under reduced motion; rAF stops when settled.


## Source
`src/patterns/motion/ElasticColumns.tsx`
```tsx
import { useEffect, useRef } from 'react'
import { img } from '../three-d/_shared'

/*
 * Elastic grid scroll: each column follows scroll with its own lag (lerp
 * factor), so fast scrolling stretches the grid and it settles back softly.
 * Middle column also moves the opposite way for parallax. rAF loop writes
 * transforms directly; stops when settled. Reduced motion: plain grid.
 */

const LAGS = [0.08, 0.14, 0.2]

export default function ElasticColumns() {
  const box = useRef<HTMLDivElement>(null)
  const cols = useRef<(HTMLDivElement | null)[]>([])

  useEffect(() => {
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return
    const el = box.current!
    const cur = LAGS.map(() => 0)
    let raf = 0
    const tick = () => {
      const target = el.scrollTop
      let moving = false
      LAGS.forEach((lag, i) => {
        cur[i] += (target - cur[i]) * lag
        if (Math.abs(target - cur[i]) > 0.3) moving = true
        const offset = (target - cur[i]) * (i === 1 ? -0.6 : 1)
        cols.current[i]!.style.transform = `translateY(${-offset}px)`
      })
      raf = moving ? requestAnimationFrame(tick) : 0
    }
    const onScroll = () => {
      if (!raf) raf = requestAnimationFrame(tick)
    }
    el.addEventListener('scroll', onScroll, { passive: true })
    return () => {
      el.removeEventListener('scroll', onScroll)
      cancelAnimationFrame(raf)
    }
  }, [])

  return (
    <div ref={box} className="h-96 overflow-y-auto rounded-xl border border-border" tabIndex={0} role="region" aria-label="Elastic grid, scroll fast inside">
      <div className="grid grid-cols-3 gap-3 p-4">
        {LAGS.map((_, c) => (
          <div key={c} ref={(el) => { cols.current[c] = el }} className="space-y-3 will-change-transform">
            {Array.from({ length: 8 }, (_, i) => (
              <img key={i} src={img(c * 20 + i + 1400, 300, i % 2 ? 360 : 280)} alt="" className="w-full rounded-lg object-cover" />
            ))}
          </div>
        ))}
      </div>
    </div>
  )
}
```

# Pixelated image reveal
> Images resolve from big crisp blocks to full resolution when scrolled into view (canvas, smoothing off).
- **Category:** Motion
- **Slug:** pixel-image-load
- **Tags:** pixel, image reveal, canvas, loading, scroll
- **Dependencies:** three-d/_shared.ts (img() placeholder URLs, makeSpinner drag helper)
- **Live demo:** https://ui-lab-weld.vercel.app/#/pixel-image-load
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion/PixelImageLoad.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion/PixelImageLoad.tsx

## When to use
- Photography, retro/gaming, editorial reveals

## Accessibility

Real <img> with alt underneath; canvas aria-hidden; skipped under reduced motion. Needs CORS-enabled images.


## Source
`src/patterns/motion/PixelImageLoad.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'
import { img } from '../three-d/_shared'

/*
 * Pixelated image reveal: when the image scrolls into view it is drawn to a
 * canvas at tiny resolution (imageSmoothing off, so blocks stay crisp) and
 * the resolution steps up 4 → 8 → 16 → … → full over ~1s, then the real
 * <img> takes over. Needs same-origin or CORS-enabled images.
 */

export function PixelImage({ src, alt, className = '' }: { src: string; alt: string; className?: string }) {
  const canvas = useRef<HTMLCanvasElement>(null)
  const [done, setDone] = useState(false)

  useEffect(() => {
    const c = canvas.current!
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return setDone(true)
    const im = new Image()
    im.crossOrigin = 'anonymous'
    im.src = src
    let timer = 0
    const io = new IntersectionObserver(([e]) => {
      if (!e.isIntersecting) return
      io.disconnect()
      const run = () => {
        const ctx = c.getContext('2d')!
        c.width = c.clientWidth
        c.height = c.clientHeight
        const steps = [4, 8, 14, 24, 40, 70, 120]
        let k = 0
        const step = () => {
          const w = steps[k]
          const h = Math.round((w * c.height) / c.width)
          const off = document.createElement('canvas')
          off.width = w
          off.height = h
          off.getContext('2d')!.drawImage(im, 0, 0, w, h)
          ctx.imageSmoothingEnabled = false
          ctx.drawImage(off, 0, 0, c.width, c.height)
          k++
          if (k < steps.length) timer = window.setTimeout(step, 140)
          else timer = window.setTimeout(() => setDone(true), 140)
        }
        step()
      }
      if (im.complete) run()
      else im.onload = run
    }, { threshold: 0.3 })
    io.observe(c)
    return () => {
      io.disconnect()
      clearTimeout(timer)
    }
  }, [src])

  return (
    <div className={`relative overflow-hidden ${className}`}>
      <img src={src} alt={alt} className="h-full w-full object-cover" style={{ opacity: done ? 1 : 0 }} />
      {!done && <canvas ref={canvas} aria-hidden className="absolute inset-0 h-full w-full" />}
    </div>
  )
}

export default function PixelImageLoad() {
  const [k, setK] = useState(0)
  return (
    <div key={k} className="space-y-3">
      <div className="grid grid-cols-3 gap-3">
        {[0, 1, 2].map((i) => (
          <PixelImage key={i} src={img(i + 1500, 400, 500)} alt={`Sample photo ${i + 1}`} className="aspect-[4/5] rounded-lg" />
        ))}
      </div>
      <button onClick={() => setK((x) => x + 1)} className="text-sm text-fg-muted hover:text-fg">↻ Replay</button>
    </div>
  )
}
```

# Flashlight reveal
> A dark, blurred cover with a radial mask hole that follows the pointer, plus a Reveal-all button.
- **Category:** Motion
- **Slug:** flashlight-reveal
- **Tags:** mask, spotlight, cursor, reveal, mask-image
- **Dependencies:** three-d/_shared.ts (img() placeholder URLs, makeSpinner drag helper)
- **Live demo:** https://ui-lab-weld.vercel.app/#/flashlight-reveal
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion/FlashlightReveal.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion/FlashlightReveal.tsx

## When to use
- Mystery/teaser launches, games, night themes

## Accessibility

Image has alt text; button reveals everything for keyboard/touch; aria-pressed.


## Source
`src/patterns/motion/FlashlightReveal.tsx`
```tsx
import { img } from '../three-d/_shared'

/*
 * Flashlight / spotlight reveal: a dark (or blurred, desaturated) cover sits
 * over an image, with a radial-gradient mask hole following the pointer so
 * you "discover" the picture. Mask position lives in CSS vars. Keyboard /
 * touch fallback: a button reveals everything.
 */

export default function FlashlightReveal() {
  return (
    <div
      className="group relative h-80 overflow-hidden rounded-xl"
      onPointerMove={(e) => {
        const r = e.currentTarget.getBoundingClientRect()
        e.currentTarget.style.setProperty('--mx', `${e.clientX - r.left}px`)
        e.currentTarget.style.setProperty('--my', `${e.clientY - r.top}px`)
      }}
    >
      <img src={img(1600, 1000, 640)} alt="Night city street" className="h-full w-full object-cover" />
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-black/90 backdrop-blur-sm backdrop-grayscale transition-opacity duration-500 group-has-[button[aria-pressed=true]]:opacity-0"
        style={{
          maskImage: 'radial-gradient(circle 110px at var(--mx, 50%) var(--my, 50%), transparent 0 60%, #000 100%)',
          WebkitMaskImage: 'radial-gradient(circle 110px at var(--mx, 50%) var(--my, 50%), transparent 0 60%, #000 100%)',
        }}
      />
      <button
        onClick={(e) => e.currentTarget.setAttribute('aria-pressed', String(e.currentTarget.getAttribute('aria-pressed') !== 'true'))}
        aria-pressed="false"
        className="absolute right-3 bottom-3 rounded-full bg-white/15 px-3 py-1 text-xs text-white backdrop-blur"
      >
        Reveal all
      </button>
    </div>
  )
}
```

# Counter preloader
> Big 000→100 counter with realistic pauses and a thin bar, then curtains split to reveal the page.
- **Category:** Motion
- **Slug:** preloader
- **Tags:** preloader, loader, counter, intro, curtain
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/preloader
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion/Preloader.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion/Preloader.tsx

## When to use
- Heavy WebGL/media sites that really need a load step

## Accessibility

role=progressbar with values; skipped under reduced motion. Don't fake loading on fast pages.


## Source
`src/patterns/motion/Preloader.tsx`
```tsx
import { useEffect, useState } from 'react'

/*
 * Studio preloader: a big counter ticks 0 → 100 (eased, with random
 * pauses so it feels like real loading), a thin bar fills, then the loader
 * splits open (top/bottom curtains) to reveal the page. Exposes progress
 * with role="progressbar"; skipped entirely under reduced motion.
 */

export default function Preloader() {
  const [n, setN] = useState(0)
  const [done, setDone] = useState(false)
  const [run, setRun] = useState(0)

  useEffect(() => {
    setN(0)
    setDone(false)
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
      setN(100)
      setDone(true)
      return
    }
    let v = 0
    let t = 0
    const step = () => {
      v = Math.min(100, v + Math.random() * 12)
      setN(Math.floor(v))
      if (v >= 100) t = window.setTimeout(() => setDone(true), 400)
      else t = window.setTimeout(step, 60 + (Math.random() < 0.15 ? 350 : Math.random() * 90))
    }
    t = window.setTimeout(step, 300)
    return () => clearTimeout(t)
  }, [run])

  return (
    <div className="relative h-80 overflow-hidden rounded-xl bg-bg">
      <div className="grid h-full place-items-center">
        <div className="text-center">
          <p className="font-display text-5xl italic">Welcome in.</p>
          <button onClick={() => setRun((r) => r + 1)} className="mt-4 text-sm text-fg-muted hover:text-fg">↻ Replay loader</button>
        </div>
      </div>
      {(['top', 'bottom'] as const).map((side) => (
        <div
          key={side}
          aria-hidden={done}
          className="absolute inset-x-0 h-1/2 bg-neutral-950 text-white transition-transform duration-[900ms] ease-[cubic-bezier(.76,0,.24,1)]"
          style={{ [side]: 0, transform: done ? `translateY(${side === 'top' ? '-100%' : '100%'})` : 'none' }}
        >
          {side === 'bottom' && (
            <div className="absolute inset-x-6 top-0 flex items-end justify-between">
              <span className="-mt-16 font-mono text-8xl font-light tabular-nums" role="progressbar" aria-valuenow={n} aria-valuemin={0} aria-valuemax={100} aria-label="Loading">
                {String(n).padStart(3, '0')}
              </span>
              <span className="mb-2 font-mono text-xs text-neutral-400">loading assets</span>
            </div>
          )}
          {side === 'top' && <div className="absolute bottom-0 left-0 h-px bg-white transition-[width] duration-150" style={{ width: `${n}%` }} />}
        </div>
      ))}
    </div>
  )
}
```

# Animated mesh gradient
> Three blurred blobs drifting on offset loops, plus SVG grain. Pure CSS hero background.
- **Category:** Backgrounds
- **Slug:** mesh-gradient
- **Tags:** gradient, background, blob, hero, grain, css only
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/mesh-gradient
- **Raw source:** https://ui-lab-weld.vercel.app/raw/recipes/MeshGradient.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/recipes/MeshGradient.tsx
- **Reference:** [Generator alternative: Mesh Gradient](https://www.meshgradient.com/)

## When to use
- Hero and section backgrounds
- Set --mesh-a/b/c to rebrand; pair with big display type

## Accessibility

aria-hidden decorative layer; animation stops under reduced motion.


## Source
`src/patterns/recipes/MeshGradient.tsx`
```tsx
/*
 * Animated mesh gradient, CSS only. Three heavily blurred blobs drift on
 * long, offset loops; a grain overlay stops the blur from looking plastic.
 * Put it behind a hero with `absolute inset-0 -z-10`.
 */
const CSS = `
.mesh { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
.mesh-blob {
  position: absolute; width: 55%; aspect-ratio: 1; border-radius: 50%;
  filter: blur(80px); opacity: 0.55; mix-blend-mode: screen;
  animation: mesh-drift 18s var(--ease-in-out) infinite alternate;
}
.mesh-blob:nth-child(1) { background: var(--mesh-a, #6366f1); top: -20%; left: -10%; }
.mesh-blob:nth-child(2) { background: var(--mesh-b, #ec4899); top: 10%; right: -15%; animation-duration: 22s; animation-delay: -6s; }
.mesh-blob:nth-child(3) { background: var(--mesh-c, #06b6d4); bottom: -30%; left: 25%; animation-duration: 26s; animation-delay: -12s; }
.mesh-grain {
  position: absolute; inset: 0; opacity: 0.12; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes mesh-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(12%, 8%) scale(1.15); }
  100% { transform: translate(-8%, 14%) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) { .mesh-blob { animation: none; } }
:root[data-theme='light'] .mesh-blob { mix-blend-mode: multiply; opacity: 0.5; }
@media (prefers-color-scheme: light) { :root:not([data-theme='dark']) .mesh-blob { mix-blend-mode: multiply; opacity: 0.5; } }
`

export function MeshGradient({ className = '' }: { className?: string }) {
  return (
    <div className={`mesh ${className}`} aria-hidden>
      <style>{CSS}</style>
      <div className="mesh-blob" />
      <div className="mesh-blob" />
      <div className="mesh-blob" />
      <div className="mesh-grain" />
    </div>
  )
}

export default function MeshGradientDemo() {
  return (
    <div className="relative grid h-80 place-items-center overflow-hidden rounded-lg border border-border bg-bg">
      <MeshGradient />
      <h3 className="relative font-display text-5xl italic">Soft motion</h3>
    </div>
  )
}
```

# Shader backgrounds
> One WebGL shader, seven looks (mesh, aurora, swirl, voronoi, flame, halftone, metal) and 16 palette presets with a print-like dither.
- **Category:** Backgrounds
- **Slug:** shader-background
- **Tags:** shader, webgl, glsl, aurora, flame, voronoi, halftone, metal, gradient, background, hero
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/shader-background
- **Raw source:** https://ui-lab-weld.vercel.app/raw/backgrounds/ShaderBackground.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/backgrounds/ShaderBackground.tsx

## When to use
- Hero and section backgrounds that need to feel alive
- Replace background videos: a few KB of GLSL instead of MBs of MP4
- Pick a preset, or pass your own 4-colour palette

## Accessibility

Canvas is aria-hidden. Pauses off-screen and in hidden tabs; renders one still frame under reduced motion; CSS gradient fallback without WebGL.


## Source
`src/patterns/backgrounds/ShaderBackground.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'

/*
 * One WebGL fragment shader, seven looks: mesh, aurora, swirl, voronoi,
 * flame, halftone, metal. Colours come from a 4-stop palette, and a light
 * dither gives the print-like finish. No dependencies.
 *
 * - Pauses when off screen (IntersectionObserver) and when the tab is hidden.
 * - prefers-reduced-motion: renders one still frame.
 * - Pixel ratio capped at 1.5; the look is soft, so full DPR is wasted work.
 * - Falls back to a CSS gradient of the same palette if WebGL is unavailable.
 */

export type ShaderMode = 'mesh' | 'aurora' | 'swirl' | 'voronoi' | 'flame' | 'halftone' | 'metal'
export type ShaderPreset = { name: string; mode: ShaderMode; colors: [string, string, string, string] }

const MODES: ShaderMode[] = ['mesh', 'aurora', 'swirl', 'voronoi', 'flame', 'halftone', 'metal']

export const PRESETS: ShaderPreset[] = [
  { name: 'Indigo Mesh', mode: 'mesh', colors: ['#07061a', '#312e81', '#7c3aed', '#c4b5fd'] },
  { name: 'Sunset Mesh', mode: 'mesh', colors: ['#1a0612', '#9d174d', '#f97316', '#fde68a'] },
  { name: 'Mint Haze', mode: 'mesh', colors: ['#f5f1e8', '#d8eadf', '#9fd3c7', '#5fa89a'] },
  { name: 'Aurora Veil', mode: 'aurora', colors: ['#03060a', '#0f3d3e', '#22c55e', '#a78bfa'] },
  { name: 'Aurora Ice', mode: 'aurora', colors: ['#020617', '#1e3a5f', '#93c5fd', '#f8fafc'] },
  { name: 'Tide Swirl', mode: 'swirl', colors: ['#020617', '#0c4a6e', '#38bdf8', '#e0f2fe'] },
  { name: 'Rose Swirl', mode: 'swirl', colors: ['#1a0610', '#831843', '#f472b6', '#ffe4e6'] },
  { name: 'Violet Cells', mode: 'voronoi', colors: ['#0b0618', '#4c1d95', '#8b5cf6', '#ede9fe'] },
  { name: 'Amber Cells', mode: 'voronoi', colors: ['#140a02', '#78350f', '#f59e0b', '#fef3c7'] },
  { name: 'Ember Flame', mode: 'flame', colors: ['#050201', '#7f1d1d', '#f97316', '#fef9c3'] },
  { name: 'Azure Flame', mode: 'flame', colors: ['#01030a', '#1e3a8a', '#60a5fa', '#f0f9ff'] },
  { name: 'Halftone Mono', mode: 'halftone', colors: ['#f4f1ea', '#111111', '#111111', '#111111'] },
  { name: 'Halftone Sun', mode: 'halftone', colors: ['#fff4e0', '#ea580c', '#ea580c', '#ea580c'] },
  { name: 'Chrome Melt', mode: 'metal', colors: ['#0a0a0f', '#3f3f46', '#a1a1aa', '#c4b5fd'] },
  { name: 'Chrome Gold', mode: 'metal', colors: ['#120a02', '#78350f', '#d97706', '#fef3c7'] },
  { name: 'Oil Slick', mode: 'metal', colors: ['#020617', '#0f766e', '#c026d3', '#22d3ee'] },
]

const VERT = `attribute vec2 p; void main(){ gl_Position = vec4(p, 0., 1.); }`

const FRAG = `
precision mediump float;
uniform vec2 u_res; uniform float u_time; uniform float u_mode; uniform float u_dither;
uniform vec3 c0; uniform vec3 c1; uniform vec3 c2; uniform vec3 c3;

float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
float noise(vec2 p){
  vec2 i = floor(p), f = fract(p); vec2 u = f*f*(3.-2.*f);
  return mix(mix(hash(i), hash(i+vec2(1,0)), u.x), mix(hash(i+vec2(0,1)), hash(i+vec2(1,1)), u.x), u.y);
}
float fbm(vec2 p){ float v = 0., a = .5; for(int i=0;i<5;i++){ v += a*noise(p); p = p*2.03 + 17.; a *= .5; } return v; }
vec3 pal(float t){
  t = clamp(t, 0., 1.) * 3.;
  if (t < 1.) return mix(c0, c1, t);
  if (t < 2.) return mix(c1, c2, t - 1.);
  return mix(c2, c3, t - 2.);
}
float warp(vec2 p, float t){
  vec2 q = vec2(fbm(p + t*.05), fbm(p + vec2(5.2, 1.3) - t*.04));
  return fbm(p + 2.2*q);
}

void main(){
  vec2 uv = gl_FragCoord.xy / u_res;
  vec2 p = (gl_FragCoord.xy - .5*u_res) / min(u_res.x, u_res.y) * 2.;
  float t = u_time;
  vec3 col;

  if (u_mode < .5) {                       // mesh
    col = pal(smoothstep(.2, .85, warp(p*1.2, t)));
  } else if (u_mode < 1.5) {               // aurora
    float band = fbm(vec2(p.x*1.2 + t*.04, t*.08));
    float y = uv.y - .55 - (band - .5)*.6;
    float curtain = exp(-abs(y)*5.) * (.55 + .45*sin(p.x*7. + fbm(p*2.5 + t*.1)*6. + t*.4));
    col = mix(c0, pal(.35 + band*.65), clamp(curtain*1.4, 0., 1.));
  } else if (u_mode < 2.5) {               // swirl
    float r = length(p), a = atan(p.y, p.x);
    float b = sin(a*2. + r*5. - t*.35 + fbm(p*1.5 + t*.05)*4.) * .5 + .5;
    col = pal(mix(b, 1. - r*.35, .25));
  } else if (u_mode < 3.5) {               // voronoi
    vec2 g = p*3.; vec2 i = floor(g), f = fract(g);
    float d1 = 8., d2 = 8.; float id = 0.;
    for (int y=-1; y<=1; y++) for (int x=-1; x<=1; x++) {
      vec2 o = vec2(float(x), float(y));
      float h = hash(i + o);
      vec2 pt = o + .5 + .4*sin(t*.4 + 6.2831*vec2(h, fract(h*7.13))) - f;
      float d = dot(pt, pt);
      if (d < d1) { d2 = d1; d1 = d; id = h; } else if (d < d2) { d2 = d; }
    }
    float edge = sqrt(d2) - sqrt(d1);
    col = mix(pal(.2 + id*.6) * (1. - sqrt(d1)*.5), c3, smoothstep(.07, .0, edge));
  } else if (u_mode < 4.5) {               // flame
    float n = fbm(vec2(p.x*2.2, p.y*1.6 - t*1.1)) + .5*fbm(vec2(p.x*5., p.y*4. - t*2.));
    float v = clamp(n*1.25 - uv.y*1.35 + .35, 0., 1.);
    col = pal(pow(v, 1.3));
  } else if (u_mode < 5.5) {               // halftone
    float v = smoothstep(.25, .8, warp(p, t));
    vec2 g = mat2(.707, -.707, .707, .707) * gl_FragCoord.xy / 7.;
    float d = length(fract(g) - .5);
    float r = sqrt(v) * .55;
    float ink = smoothstep(r + .06, r - .06, d);
    col = mix(c0, c1, ink);
  } else {                                 // metal
    float v = warp(p*.9, t*.7);
    float spec = pow(abs(sin(v*14. + t*.15)), 10.);
    col = mix(pal(v), vec3(1.), spec*.55);
  }

  col += (hash(gl_FragCoord.xy + fract(t)) - .5) * u_dither;
  gl_FragColor = vec4(col, 1.);
}`

function hex(c: string) {
  const n = parseInt(c.slice(1), 16)
  return [(n >> 16) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]
}

export function ShaderBackground({
  preset = PRESETS[0],
  speed = 1,
  dither = 0.06,
  className = '',
}: {
  preset?: ShaderPreset
  speed?: number
  dither?: number
  className?: string
}) {
  const ref = useRef<HTMLCanvasElement>(null)
  const [failed, setFailed] = useState(false)
  const live = useRef({ preset, speed, dither })
  live.current = { preset, speed, dither }

  useEffect(() => {
    const canvas = ref.current!
    const gl = canvas.getContext('webgl', { antialias: false, premultipliedAlpha: false })
    if (!gl || gl.isContextLost()) return setFailed(true)

    const sh = (type: number, src: string) => {
      const s = gl.createShader(type)!
      gl.shaderSource(s, src)
      gl.compileShader(s)
      return s
    }
    const prog = gl.createProgram()!
    gl.attachShader(prog, sh(gl.VERTEX_SHADER, VERT))
    gl.attachShader(prog, sh(gl.FRAGMENT_SHADER, FRAG))
    gl.linkProgram(prog)
    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) return setFailed(true)
    gl.useProgram(prog)

    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW)
    const loc = gl.getAttribLocation(prog, 'p')
    gl.enableVertexAttribArray(loc)
    gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)
    const u = (n: string) => gl.getUniformLocation(prog, n)

    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
    let raf = 0
    let visible = true
    let t = 12
    let last = performance.now()

    const resize = () => {
      const dpr = Math.min(devicePixelRatio, 1.5)
      canvas.width = Math.max(1, Math.round(canvas.clientWidth * dpr))
      canvas.height = Math.max(1, Math.round(canvas.clientHeight * dpr))
      gl.viewport(0, 0, canvas.width, canvas.height)
    }

    const draw = () => {
      const { preset: pr, dither: di } = live.current
      gl.uniform2f(u('u_res'), canvas.width, canvas.height)
      gl.uniform1f(u('u_time'), t)
      gl.uniform1f(u('u_mode'), MODES.indexOf(pr.mode))
      gl.uniform1f(u('u_dither'), di)
      pr.colors.forEach((c, i) => gl.uniform3fv(u(`c${i}`), hex(c)))
      gl.drawArrays(gl.TRIANGLES, 0, 3)
    }

    const loop = (now: number) => {
      t += ((now - last) / 1000) * live.current.speed
      last = now
      draw()
      if (visible && !reduced) raf = requestAnimationFrame(loop)
    }
    const start = () => {
      cancelAnimationFrame(raf)
      last = performance.now()
      raf = requestAnimationFrame(loop)
    }

    const ro = new ResizeObserver(() => {
      resize()
      draw()
    })
    ro.observe(canvas)
    const io = new IntersectionObserver(([e]) => {
      visible = e.isIntersecting && !document.hidden
      if (visible) start()
    })
    io.observe(canvas)
    const onVis = () => {
      visible = !document.hidden
      if (visible) start()
    }
    document.addEventListener('visibilitychange', onVis)

    resize()
    start()
    return () => {
      cancelAnimationFrame(raf)
      ro.disconnect()
      io.disconnect()
      document.removeEventListener('visibilitychange', onVis)
      // Don't force loseContext(): StrictMode re-runs this effect on the same
      // canvas and would get a dead context back. The browser frees it on unmount.
    }
  }, [])

  if (failed) {
    const [a, b, c] = preset.colors
    return <div className={`h-full w-full ${className}`} style={{ background: `radial-gradient(at 30% 30%, ${c}, ${b} 45%, ${a})` }} aria-hidden />
  }
  return <canvas ref={ref} className={`block h-full w-full ${className}`} aria-hidden />
}

export default function ShaderBackgroundDemo() {
  const [preset, setPreset] = useState(PRESETS[0])
  const light = preset.mode === 'halftone' || preset.name === 'Mint Haze'
  return (
    <div className="space-y-4">
      <div className="relative h-80 overflow-hidden rounded-xl border border-border">
        <ShaderBackground preset={preset} />
        <div className={`absolute inset-0 grid place-items-center ${light ? 'text-neutral-900' : 'text-white'}`}>
          <div className="text-center">
            <p className="font-mono text-[11px] tracking-widest uppercase opacity-70">{preset.mode}</p>
            <h3 className="font-display text-5xl italic">{preset.name}</h3>
          </div>
        </div>
      </div>
      <div className="flex flex-wrap gap-2" role="radiogroup" aria-label="Shader preset">
        {PRESETS.map((p) => (
          <button
            key={p.name}
            role="radio"
            aria-checked={p === preset}
            onClick={() => setPreset(p)}
            className={`flex items-center gap-2 rounded-full border px-3 py-1 text-xs transition-colors ${
              p === preset ? 'border-accent text-fg' : 'border-border text-fg-muted hover:text-fg'
            }`}
          >
            <span className="h-3 w-3 rounded-full" style={{ background: `linear-gradient(135deg, ${p.colors[1]}, ${p.colors[2]})` }} />
            {p.name}
          </button>
        ))}
      </div>
    </div>
  )
}
```

# Dot grid warp
> A faint dot grid that bends toward the pointer like a rubber sheet under a weight. Canvas 2D, Gaussian falloff.
- **Category:** Backgrounds
- **Slug:** dot-grid-warp
- **Tags:** canvas, interactive background, dots, grid, pointer, gravity
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/dot-grid-warp
- **Raw source:** https://ui-lab-weld.vercel.app/raw/backgrounds/DotGridWarp.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/backgrounds/DotGridWarp.tsx

## When to use
- Interactive hero or section backgrounds
- Developer-tool and AI product pages

## Accessibility

Decorative, aria-hidden. Static grid under reduced motion; idles when the pointer leaves.


## Source
`src/patterns/backgrounds/DotGridWarp.tsx`
```tsx
import { useEffect, useRef } from 'react'

/*
 * A faint dot grid that bends toward the pointer like a rubber sheet under a
 * weight. Each dot is displaced by a Gaussian falloff of its distance to the
 * (eased) pointer; dots near the well grow brighter. Canvas 2D, no shader.
 * Idles when the pointer is away; static grid under reduced motion.
 */

export function DotGridWarp({ gap = 22, strength = 38, radius = 120, className = '' }: { gap?: number; strength?: number; radius?: number; className?: string }) {
  const ref = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    const c = ref.current!
    const ctx = c.getContext('2d')!
    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
    const color = getComputedStyle(c).color
    const target = { x: -9999, y: -9999 }
    const cur = { x: -9999, y: -9999 }
    let raf = 0
    let w = 0
    let h = 0

    const resize = () => {
      const dpr = Math.min(devicePixelRatio, 2)
      w = c.clientWidth
      h = c.clientHeight
      c.width = w * dpr
      c.height = h * dpr
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
      draw()
    }

    const draw = () => {
      ctx.clearRect(0, 0, w, h)
      ctx.fillStyle = color
      const r2 = 2 * radius * radius
      for (let y = gap / 2; y < h; y += gap) {
        for (let x = gap / 2; x < w; x += gap) {
          const dx = cur.x - x
          const dy = cur.y - y
          const f = Math.exp(-(dx * dx + dy * dy) / r2)
          const d = Math.hypot(dx, dy) || 1
          const px = x + (dx / d) * strength * f
          const py = y + (dy / d) * strength * f
          ctx.globalAlpha = 0.18 + f * 0.8
          ctx.beginPath()
          ctx.arc(px, py, 1 + f * 1.6, 0, Math.PI * 2)
          ctx.fill()
        }
      }
    }

    const loop = () => {
      cur.x += (target.x - cur.x) * 0.12
      cur.y += (target.y - cur.y) * 0.12
      draw()
      if (Math.abs(target.x - cur.x) + Math.abs(target.y - cur.y) > 0.5) raf = requestAnimationFrame(loop)
      else raf = 0
    }

    const move = (e: PointerEvent) => {
      if (reduced) return
      const r = c.getBoundingClientRect()
      target.x = e.clientX - r.left
      target.y = e.clientY - r.top
      if (cur.x < -1000) {
        cur.x = target.x
        cur.y = target.y
      }
      if (!raf) raf = requestAnimationFrame(loop)
    }
    const leave = () => {
      target.x = target.y = -9999
      cur.x = cur.y = -9999
      draw()
    }

    const ro = new ResizeObserver(resize)
    ro.observe(c)
    c.addEventListener('pointermove', move)
    c.addEventListener('pointerleave', leave)
    return () => {
      cancelAnimationFrame(raf)
      ro.disconnect()
      c.removeEventListener('pointermove', move)
      c.removeEventListener('pointerleave', leave)
    }
  }, [gap, strength, radius])

  return <canvas ref={ref} className={`block h-full w-full text-fg ${className}`} aria-hidden />
}

export default function DotGridWarpDemo() {
  return (
    <div className="relative h-80 overflow-hidden rounded-xl border border-border bg-bg">
      <DotGridWarp />
      <p className="pointer-events-none absolute inset-x-0 bottom-4 text-center font-mono text-xs text-fg-muted">move the pointer over the grid</p>
    </div>
  )
}
```

# Warp starfield
> Stars rushing toward the camera as streaks; hover engages warp speed. Canvas 2D.
- **Category:** Backgrounds
- **Slug:** starfield
- **Tags:** starfield, space, warp, canvas, particles, background
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/starfield
- **Raw source:** https://ui-lab-weld.vercel.app/raw/backgrounds/Starfield.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/backgrounds/Starfield.tsx

## When to use
- Space / AI / launch heroes, 404 pages

## Accessibility

Decorative; slow drift only under reduced motion; pauses off-screen.


## Source
`src/patterns/backgrounds/Starfield.tsx`
```tsx
import { useEffect, useRef } from 'react'

/*
 * Warp starfield: stars in 3D space moving toward the camera, projected by
 * x/z, drawn as streaks whose length grows with speed. Hover to engage
 * warp (speed eases up). Canvas 2D; pauses off-screen; slow drift only
 * under reduced motion.
 */

export function Starfield({ count = 500, className = '' }: { count?: number; className?: string }) {
  const ref = useRef<HTMLCanvasElement>(null)
  useEffect(() => {
    const c = ref.current!
    const ctx = c.getContext('2d')!
    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
    const stars = Array.from({ length: count }, () => ({ x: Math.random() * 2 - 1, y: Math.random() * 2 - 1, z: Math.random() }))
    let speed = 0.004
    let target = 0.004
    let raf = 0
    let w = 0
    let h = 0
    const resize = () => {
      const dpr = Math.min(devicePixelRatio, 2)
      w = c.clientWidth
      h = c.clientHeight
      c.width = w * dpr
      c.height = h * dpr
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
    }
    const tick = () => {
      speed += (target - speed) * 0.05
      ctx.fillStyle = 'rgba(0,0,0,.35)'
      ctx.fillRect(0, 0, w, h)
      ctx.strokeStyle = '#fff'
      for (const s of stars) {
        const pz = s.z
        s.z -= reduced ? 0.0005 : speed
        if (s.z <= 0.01) {
          s.x = Math.random() * 2 - 1
          s.y = Math.random() * 2 - 1
          s.z = 1
          continue
        }
        const k = Math.min(w, h) * 0.5
        const x = w / 2 + (s.x / s.z) * k
        const y = h / 2 + (s.y / s.z) * k
        const px = w / 2 + (s.x / pz) * k
        const py = h / 2 + (s.y / pz) * k
        ctx.globalAlpha = Math.min(1, (1 - s.z) * 1.5)
        ctx.lineWidth = (1 - s.z) * 2
        ctx.beginPath()
        ctx.moveTo(px, py)
        ctx.lineTo(x, y)
        ctx.stroke()
      }
      raf = requestAnimationFrame(tick)
    }
    const on = () => (target = 0.035)
    const off = () => (target = 0.004)
    c.addEventListener('pointerenter', on)
    c.addEventListener('pointerleave', off)
    const ro = new ResizeObserver(resize)
    ro.observe(c)
    const io = new IntersectionObserver(([e]) => {
      cancelAnimationFrame(raf)
      if (e.isIntersecting) raf = requestAnimationFrame(tick)
    })
    io.observe(c)
    return () => {
      cancelAnimationFrame(raf)
      ro.disconnect()
      io.disconnect()
      c.removeEventListener('pointerenter', on)
      c.removeEventListener('pointerleave', off)
    }
  }, [count])
  return <canvas ref={ref} className={`block h-full w-full bg-black ${className}`} aria-hidden />
}

export default function StarfieldDemo() {
  return (
    <div className="relative h-80 overflow-hidden rounded-xl">
      <Starfield />
      <p className="pointer-events-none absolute inset-0 grid place-items-center font-display text-5xl text-white italic">hover to warp</p>
    </div>
  )
}
```

# Synthwave perspective grid
> Neon grid floor scrolling toward you under a striped sun. Pure CSS.
- **Category:** Backgrounds
- **Slug:** perspective-grid
- **Tags:** synthwave, retro, grid, perspective, neon, 80s
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/perspective-grid
- **Raw source:** https://ui-lab-weld.vercel.app/raw/backgrounds/PerspectiveGrid.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/backgrounds/PerspectiveGrid.tsx

## When to use
- Retro, gaming, music and event sites

## Accessibility

role=img with description; static under reduced motion.


## Source
`src/patterns/backgrounds/PerspectiveGrid.tsx`
```tsx
/*
 * Retro perspective grid floor (synthwave): a large grid of lines drawn
 * with two repeating linear-gradients, tilted with rotateX, scrolling toward
 * the viewer by animating background-position. A horizon glow and a sun on
 * top. Pure CSS; static under reduced motion.
 */

const CSS = `
.pgrid { background-image: linear-gradient(to right, rgb(236 72 153 / .7) 1px, transparent 1px), linear-gradient(to bottom, rgb(236 72 153 / .7) 1px, transparent 1px);
  background-size: 48px 48px; transform: rotateX(72deg); transform-origin: top; animation: pgrid 1.2s linear infinite; }
@keyframes pgrid { to { background-position: 0 48px; } }
@media (prefers-reduced-motion: reduce) { .pgrid { animation: none; } }
`

export default function PerspectiveGrid() {
  return (
    <div className="relative h-80 overflow-hidden rounded-xl bg-gradient-to-b from-[#0b0220] via-[#2a0a3d] to-[#0b0220] [perspective:300px]" role="img" aria-label="Synthwave sun over a moving neon grid">
      <style>{CSS}</style>
      <div className="absolute top-[18%] left-1/2 h-40 w-40 -translate-x-1/2 rounded-full bg-gradient-to-b from-yellow-300 via-orange-400 to-pink-600 [mask-image:repeating-linear-gradient(to_bottom,#000_0_12px,transparent_12px_16px)]" />
      <div className="absolute inset-x-0 top-1/2 h-px bg-pink-400 shadow-[0_0_30px_8px_rgba(236,72,153,.6)]" />
      <div className="pgrid absolute top-1/2 -left-1/2 h-[200%] w-[200%]" />
      <div className="absolute inset-x-0 top-1/2 h-16 bg-gradient-to-b from-[#2a0a3d] to-transparent" />
    </div>
  )
}
```

# Morphing blob
> Organic gradient blob cycling border-radius shapes while rotating. No JS.
- **Category:** Backgrounds
- **Slug:** morph-blob
- **Tags:** blob, organic, gradient, border-radius, background
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/morph-blob
- **Raw source:** https://ui-lab-weld.vercel.app/raw/backgrounds/MorphBlob.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/backgrounds/MorphBlob.tsx

## When to use
- Behind avatars, product shots, hero words

## Accessibility

Decorative, aria-hidden; static under reduced motion.


## Source
`src/patterns/backgrounds/MorphBlob.tsx`
```tsx
/*
 * Organic morphing blob with no JS: a gradient circle whose border-radius
 * cycles between eight-value shapes while it slowly rotates. Great behind
 * avatars, product shots or a hero word. Static under reduced motion.
 */

const CSS = `
.blob { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; animation: morph 9s ease-in-out infinite, turn 24s linear infinite; }
@keyframes morph {
  0%,100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; }
  33% { border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%; }
  66% { border-radius: 28% 72% 40% 60% / 60% 38% 62% 40%; }
}
@keyframes turn { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .blob { animation: none; } }
`

export default function MorphBlob() {
  return (
    <div className="relative grid h-80 place-items-center overflow-hidden rounded-xl bg-bg">
      <style>{CSS}</style>
      <div aria-hidden className="blob absolute h-64 w-64 bg-gradient-to-br from-accent via-fuchsia-500 to-orange-400 opacity-80 blur-sm" />
      <div aria-hidden className="blob absolute h-52 w-52 bg-gradient-to-tr from-cyan-400 to-accent opacity-60 mix-blend-screen [animation-delay:-4s]" />
      <p className="relative font-display text-5xl text-white italic">fluid</p>
    </div>
  )
}
```

# WebGL liquid slideshow
> Noise-displaced UVs melt one image into the next in a single fragment shader, no library.
- **Category:** Backgrounds
- **Slug:** liquid-slideshow
- **Tags:** webgl, slideshow, distortion, displacement, shader, transition
- **Dependencies:** three-d/_shared.ts (img() placeholder URLs, makeSpinner drag helper)
- **Live demo:** https://ui-lab-weld.vercel.app/#/liquid-slideshow
- **Raw source:** https://ui-lab-weld.vercel.app/raw/backgrounds/LiquidSlideshow.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/backgrounds/LiquidSlideshow.tsx

## When to use
- Hero slideshows, fashion/product campaigns

## Accessibility

Carousel region with labelled buttons and live position; plain crossfade without WebGL or under reduced motion.


## Source
`src/patterns/backgrounds/LiquidSlideshow.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'
import { img } from '../three-d/_shared'

/*
 * WebGL liquid-distortion slideshow: two image textures crossfade while a
 * noise field displaces their UVs in opposite directions, strongest mid-
 * transition, so the old picture melts into the new one. Raw WebGL, one
 * fragment shader, no library. Falls back to a plain crossfade without
 * WebGL or under reduced motion.
 */

const SRCS = [0, 1, 2, 3].map((i) => img(i + 1700, 1200, 700))

const VERT = `attribute vec2 p; varying vec2 uv; void main(){ uv = p * .5 + .5; uv.y = 1. - uv.y; gl_Position = vec4(p, 0., 1.); }`
const FRAG = `
precision mediump float; varying vec2 uv;
uniform sampler2D a; uniform sampler2D b; uniform float t; uniform float time;
float h(vec2 p){ return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); }
float n(vec2 p){ vec2 i = floor(p), f = fract(p); vec2 u = f*f*(3.-2.*f);
  return mix(mix(h(i), h(i+vec2(1,0)), u.x), mix(h(i+vec2(0,1)), h(i+vec2(1,1)), u.x), u.y); }
void main(){
  float k = n(uv * 4. + time * .2) * 2. - 1.;
  float s = sin(t * 3.14159);
  vec2 d = vec2(k, n(uv * 5. - time * .15) - .5) * .18 * s;
  vec4 ca = texture2D(a, uv + d * t);
  vec4 cb = texture2D(b, uv - d * (1. - t));
  float m = smoothstep(t - .15, t + .15, n(uv * 3.) * .7 + uv.x * .3);
  gl_FragColor = mix(cb, ca, m);
}`

export default function LiquidSlideshow() {
  const canvas = useRef<HTMLCanvasElement>(null)
  const [i, setI] = useState(0)
  const [fallback, setFallback] = useState(false)
  const api = useRef<{ go: (n: number) => void } | null>(null)

  useEffect(() => {
    const c = canvas.current!
    const gl = c.getContext('webgl')
    if (!gl || matchMedia('(prefers-reduced-motion: reduce)').matches) return setFallback(true)
    const sh = (t: number, s: string) => {
      const o = gl.createShader(t)!
      gl.shaderSource(o, s)
      gl.compileShader(o)
      return o
    }
    const pr = gl.createProgram()!
    gl.attachShader(pr, sh(gl.VERTEX_SHADER, VERT))
    gl.attachShader(pr, sh(gl.FRAGMENT_SHADER, FRAG))
    gl.linkProgram(pr)
    if (!gl.getProgramParameter(pr, gl.LINK_STATUS)) return setFallback(true)
    gl.useProgram(pr)
    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW)
    gl.enableVertexAttribArray(0)
    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0)
    const U = (n: string) => gl.getUniformLocation(pr, n)
    gl.uniform1i(U('a'), 0)
    gl.uniform1i(U('b'), 1)

    const tex: WebGLTexture[] = SRCS.map((src) => {
      const t = gl.createTexture()!
      gl.bindTexture(gl.TEXTURE_2D, t)
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([20, 20, 24, 255]))
      const im = new Image()
      im.crossOrigin = 'anonymous'
      im.onload = () => {
        gl.bindTexture(gl.TEXTURE_2D, t)
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, im)
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
        draw()
      }
      im.src = src
      return t
    })

    let from = 0, to = 0, prog = 1, start = 0, raf = 0
    const draw = (time = performance.now()) => {
      c.width = c.clientWidth * Math.min(devicePixelRatio, 1.5)
      c.height = c.clientHeight * Math.min(devicePixelRatio, 1.5)
      gl.viewport(0, 0, c.width, c.height)
      gl.activeTexture(gl.TEXTURE0)
      gl.bindTexture(gl.TEXTURE_2D, tex[to])
      gl.activeTexture(gl.TEXTURE1)
      gl.bindTexture(gl.TEXTURE_2D, tex[from])
      gl.uniform1f(U('t'), prog)
      gl.uniform1f(U('time'), time / 1000)
      gl.drawArrays(gl.TRIANGLES, 0, 3)
    }
    const tick = (now: number) => {
      prog = Math.min(1, (now - start) / 1400)
      const e = prog < 0.5 ? 4 * prog ** 3 : 1 - (-2 * prog + 2) ** 3 / 2
      const saved = prog
      prog = e
      draw(now)
      prog = saved
      if (saved < 1) raf = requestAnimationFrame(tick)
    }
    api.current = {
      go(n) {
        from = to
        to = n
        start = performance.now()
        cancelAnimationFrame(raf)
        raf = requestAnimationFrame(tick)
      },
    }
    draw()
    return () => cancelAnimationFrame(raf)
  }, [])

  const go = (n: number) => {
    const next = (n + SRCS.length) % SRCS.length
    setI(next)
    api.current?.go(next)
  }

  return (
    <div className="relative h-80 overflow-hidden rounded-xl bg-black" role="region" aria-roledescription="carousel" aria-label="Liquid slideshow">
      {fallback ? (
        SRCS.map((s, k) => <img key={s} src={s} alt="" className="absolute inset-0 h-full w-full object-cover transition-opacity duration-700" style={{ opacity: k === i ? 1 : 0 }} />)
      ) : (
        <canvas ref={canvas} className="absolute inset-0 h-full w-full" aria-hidden />
      )}
      <div className="absolute right-4 bottom-4 flex items-center gap-2">
        <button onClick={() => go(i - 1)} aria-label="Previous slide" className="rounded-full bg-white/20 px-3 py-1 text-white backdrop-blur">←</button>
        <span className="font-mono text-xs text-white" aria-live="polite">{i + 1} / {SRCS.length}</span>
        <button onClick={() => go(i + 1)} aria-label="Next slide" className="rounded-full bg-white/20 px-3 py-1 text-white backdrop-blur">→</button>
      </div>
    </div>
  )
}
```

# Scroll morphing shapes
> One SVG path lerps between blob keyframes while rotating and shifting hue as you scroll.
- **Category:** Backgrounds
- **Slug:** morph-shapes
- **Tags:** svg, morph, path, scroll, blob
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/morph-shapes
- **Raw source:** https://ui-lab-weld.vercel.app/raw/backgrounds/MorphShapes.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/backgrounds/MorphShapes.tsx

## When to use
- Decorative section backgrounds, storytelling pages

## Accessibility

Decorative, aria-hidden; static under reduced motion.


## Source
`src/patterns/backgrounds/MorphShapes.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'

/*
 * Background shapes that morph as you scroll: one SVG path interpolates
 * between keyframe shapes (same command count, so the points can be
 * lerped numerically), while it rotates and shifts colour. Scroll progress
 * of the container drives it. Static first shape under reduced motion.
 */

const SHAPES = [
  'M100,20 C150,20 180,60 180,100 C180,150 140,180 100,180 C50,180 20,140 20,100 C20,50 60,20 100,20 Z',
  'M100,10 C170,40 190,70 170,110 C150,160 120,190 80,170 C40,150 10,120 30,70 C45,35 60,5 100,10 Z',
  'M100,40 C130,0 190,30 170,90 C200,140 150,200 100,170 C50,200 0,140 30,90 C10,30 70,0 100,40 Z',
  'M60,30 C110,10 190,20 180,90 C170,150 170,190 110,180 C40,170 10,160 20,100 C25,60 30,40 60,30 Z',
]
const nums = SHAPES.map((s) => s.match(/-?\d+(\.\d+)?/g)!.map(Number))
const template = SHAPES[0].split(/-?\d+(?:\.\d+)?/)

function lerpPath(p: number) {
  const seg = Math.min(nums.length - 2, Math.floor(p * (nums.length - 1)))
  const t = p * (nums.length - 1) - seg
  const a = nums[seg], b = nums[seg + 1]
  return template.map((part, i) => (i < a.length ? part + (a[i] + (b[i] - a[i]) * t).toFixed(1) : part)).join('')
}

export default function MorphShapes() {
  const box = useRef<HTMLDivElement>(null)
  const [p, setP] = useState(0)
  useEffect(() => {
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return
    const el = box.current!
    const on = () => setP(el.scrollTop / (el.scrollHeight - el.clientHeight))
    el.addEventListener('scroll', on, { passive: true })
    return () => el.removeEventListener('scroll', on)
  }, [])
  return (
    <div ref={box} className="h-80 overflow-y-auto rounded-xl bg-bg" tabIndex={0} aria-label="Morphing shapes, scroll inside">
      <div className="h-[300%]">
        <div className="sticky top-0 grid h-80 place-items-center">
          <svg viewBox="0 0 200 200" className="h-64 w-64" aria-hidden style={{ transform: `rotate(${p * 180}deg)` }}>
            <defs>
              <linearGradient id="ms" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0" stopColor={`hsl(${250 + p * 120} 80% 65%)`} />
                <stop offset="1" stopColor={`hsl(${320 + p * 80} 80% 55%)`} />
              </linearGradient>
            </defs>
            <path d={lerpPath(p)} fill="url(#ms)" />
          </svg>
          <p className="absolute bottom-4 font-mono text-xs text-fg-muted">scroll ↓ {Math.round(p * 100)}%</p>
        </div>
      </div>
    </div>
  )
}
```

# 3D ring carousel
> Cards on a true CSS 3D cylinder; drag to spin with momentum, snaps to the nearest card.
- **Category:** 3D
- **Slug:** ring-carousel
- **Tags:** carousel, 3d, css 3d, drag, momentum, cylinder, slider
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/ring-carousel
- **Raw source:** https://ui-lab-weld.vercel.app/raw/three-d/RingCarousel.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/three-d/RingCarousel.tsx

## When to use
- Portfolio and product showcases
- Anywhere a gallery should feel physical

## Accessibility

Focusable region with aria-roledescription="carousel", arrow keys rotate, label announces position; no coasting under reduced motion.


## Source
`src/patterns/three-d/RingCarousel.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'

/*
 * Cards seated around a real 3D cylinder (CSS 3D, no canvas). Drag to spin,
 * release to coast with momentum and settle on the nearest card. The back
 * side stays visible through the gaps, mirrored, which is what sells the
 * depth. Arrow keys step one card; reduced motion snaps without coasting.
 */

const CARDS = Array.from({ length: 10 }, (_, i) => ({ id: i, hue: (i * 36 + 200) % 360 }))

export default function RingCarousel() {
  const n = CARDS.length
  const step = 360 / n
  const width = 150
  const radius = Math.round(width / 2 / Math.tan(Math.PI / n)) + 30
  const [angle, setAngle] = useState(0)
  const drag = useRef<{ x: number; a: number; v: number; t: number } | null>(null)
  const raf = useRef(0)
  const reduced = typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

  const settle = (a: number, v: number) => {
    cancelAnimationFrame(raf.current)
    if (reduced) return setAngle(Math.round(a / step) * step)
    let cur = a
    let vel = v
    const tick = () => {
      vel *= 0.94
      cur += vel
      if (Math.abs(vel) < 0.3) {
        const target = Math.round(cur / step) * step
        cur += (target - cur) * 0.15
        if (Math.abs(target - cur) < 0.05) return setAngle(target)
      }
      setAngle(cur)
      raf.current = requestAnimationFrame(tick)
    }
    raf.current = requestAnimationFrame(tick)
  }

  useEffect(() => () => cancelAnimationFrame(raf.current), [])
  const active = ((Math.round(-angle / step) % n) + n) % n

  return (
    <div
      className="relative h-80 cursor-grab touch-pan-y select-none active:cursor-grabbing"
      style={{ perspective: '1100px' }}
      tabIndex={0}
      role="region"
      aria-roledescription="carousel"
      aria-label={`Ring carousel, card ${active + 1} of ${n}. Use arrow keys to rotate.`}
      onKeyDown={(e) => {
        if (e.key === 'ArrowRight') settle(angle - step, 0)
        if (e.key === 'ArrowLeft') settle(angle + step, 0)
      }}
      onPointerDown={(e) => {
        cancelAnimationFrame(raf.current)
        e.currentTarget.setPointerCapture(e.pointerId)
        drag.current = { x: e.clientX, a: angle, v: 0, t: performance.now() }
      }}
      onPointerMove={(e) => {
        const d = drag.current
        if (!d) return
        const next = d.a + (e.clientX - d.x) * 0.3
        const now = performance.now()
        d.v = ((next - angle) / Math.max(1, now - d.t)) * 16
        d.t = now
        setAngle(next)
      }}
      onPointerUp={() => {
        const d = drag.current
        drag.current = null
        if (d) settle(angle, d.v)
      }}
    >
      <div
        className="absolute top-1/2 left-1/2 h-0 w-0"
        style={{ transformStyle: 'preserve-3d', transform: `translateZ(${-radius}px) rotateX(-8deg) rotateY(${angle}deg)` }}
      >
        {CARDS.map((c, i) => (
          <div
            key={c.id}
            className="absolute flex h-52 flex-col justify-end rounded-xl border border-white/20 p-4 text-white shadow-lg"
            style={{
              width,
              left: -width / 2,
              top: -104,
              transform: `rotateY(${i * step}deg) translateZ(${radius}px)`,
              background: `linear-gradient(160deg, hsl(${c.hue} 80% 60%), hsl(${c.hue + 40} 70% 25%))`,
            }}
            aria-hidden={i !== active}
          >
            <span className="font-mono text-[11px] opacity-80">No. {String(i + 1).padStart(2, '0')}</span>
            <span className="font-display text-2xl italic">Frame {i + 1}</span>
          </div>
        ))}
      </div>
    </div>
  )
}
```

# Depth coverflow
> Coverflow where cards turn edge-on, sink and blur with distance from the active one. Plain CSS 3D.
- **Category:** 3D
- **Slug:** coverflow
- **Tags:** coverflow, carousel, 3d, depth, slider
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/coverflow
- **Raw source:** https://ui-lab-weld.vercel.app/raw/three-d/Coverflow.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/three-d/Coverflow.tsx

## When to use
- Album / product / case-study browsers
- Hero galleries

## Accessibility

Prev/next buttons labelled, arrow keys, aria-live announces the active item.


## Source
`src/patterns/three-d/Coverflow.tsx`
```tsx
import { useState } from 'react'

/*
 * Depth coverflow. Each card's transform is a pure function of its offset
 * from the active index: further cards turn more edge-on, sink back and
 * blur, so the sides compress into slivers. Plain CSS 3D, no canvas.
 * Buttons + arrow keys; the active card is announced.
 */

const ITEMS = ['Ember', 'Tide', 'Moss', 'Dusk', 'Frost', 'Clay', 'Bloom'].map((t, i) => ({ t, hue: i * 50 + 10 }))

export default function Coverflow() {
  const [active, setActive] = useState(3)
  const go = (d: number) => setActive((a) => Math.min(Math.max(a + d, 0), ITEMS.length - 1))

  return (
    <div
      tabIndex={0}
      role="region"
      aria-roledescription="carousel"
      aria-label="Coverflow. Use arrow keys to browse."
      onKeyDown={(e) => {
        if (e.key === 'ArrowRight') go(1)
        if (e.key === 'ArrowLeft') go(-1)
      }}
      className="outline-none"
    >
      <div className="relative h-72" style={{ perspective: '900px' }}>
        {ITEMS.map((it, i) => {
          const o = i - active
          const abs = Math.abs(o)
          return (
            <button
              key={it.t}
              onClick={() => setActive(i)}
              tabIndex={-1}
              aria-hidden={o !== 0}
              className="absolute top-1/2 left-1/2 h-56 w-44 -mt-28 -ml-22 rounded-xl border border-white/15 p-4 text-left text-white shadow-lg transition-all duration-500 ease-out-expo"
              style={{
                zIndex: 100 - abs,
                transform: `translateX(${o === 0 ? 0 : Math.sign(o) * (110 + abs * 42)}px) translateZ(${-abs * 110}px) rotateY(${o === 0 ? 0 : -Math.sign(o) * Math.min(55 + abs * 8, 78)}deg)`,
                filter: `blur(${Math.max(0, abs - 1) * 1.5}px) brightness(${1 - abs * 0.12})`,
                background: `linear-gradient(160deg, hsl(${it.hue} 75% 58%), hsl(${it.hue + 30} 65% 22%))`,
              }}
            >
              <span className="font-display text-3xl italic">{it.t}</span>
            </button>
          )
        })}
      </div>
      <div className="mt-4 flex items-center justify-center gap-4">
        <button onClick={() => go(-1)} className="rounded-full border border-border px-3 py-1 text-sm" aria-label="Previous">
          ←
        </button>
        <span className="w-20 text-center font-mono text-xs text-fg-muted" aria-live="polite">
          {ITEMS[active].t}
        </span>
        <button onClick={() => go(1)} className="rounded-full border border-border px-3 py-1 text-sm" aria-label="Next">
          →
        </button>
      </div>
    </div>
  )
}
```

# Particle globe
> A sphere of points on a Fibonacci lattice with a noise land mask; drag to spin with momentum. Canvas 2D.
- **Category:** 3D
- **Slug:** particle-globe
- **Tags:** globe, sphere, particles, canvas, 3d, drag, earth
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/particle-globe
- **Raw source:** https://ui-lab-weld.vercel.app/raw/three-d/ParticleGlobe.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/three-d/ParticleGlobe.tsx

## When to use
- Global / network / logistics product heroes
- About pages showing reach

## Accessibility

role="img" with label; pauses off-screen; no idle spin under reduced motion.


## Source
`src/patterns/three-d/ParticleGlobe.tsx`
```tsx
import { useEffect, useRef } from 'react'

/*
 * A sphere of points on a Fibonacci lattice (even spacing, no clumping at
 * the poles), with a cheap noise mask deciding which points are "land".
 * Projected with plain trig onto a 2D canvas; back-facing points fade.
 * Drag to spin; release keeps the momentum, then it drifts back to idle.
 */

function landMask(lat: number, lon: number) {
  const v =
    Math.sin(lat * 3.1 + 1.3) * Math.cos(lon * 2.3) +
    Math.sin(lon * 4.7 + lat * 1.9) * 0.6 +
    Math.cos(lat * 7.3 - lon * 3.1) * 0.35
  return v > 0.35
}

export function ParticleGlobe({ points = 2600, className = '' }: { points?: number; className?: string }) {
  const ref = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    const c = ref.current!
    const ctx = c.getContext('2d')!
    const color = getComputedStyle(c).color
    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches

    const pts: [number, number, number][] = []
    const golden = Math.PI * (3 - Math.sqrt(5))
    for (let i = 0; i < points; i++) {
      const y = 1 - (i / (points - 1)) * 2
      const r = Math.sqrt(1 - y * y)
      const th = golden * i
      const x = Math.cos(th) * r
      const z = Math.sin(th) * r
      if (landMask(Math.asin(y), Math.atan2(z, x))) pts.push([x, y, z])
    }

    let rot = 0
    let vel = reduced ? 0 : 0.004
    let dragging = false
    let lastX = 0
    let raf = 0
    let size = 0

    const resize = () => {
      const dpr = Math.min(devicePixelRatio, 2)
      size = Math.min(c.clientWidth, c.clientHeight)
      c.width = c.clientWidth * dpr
      c.height = c.clientHeight * dpr
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
    }

    const draw = () => {
      const w = c.clientWidth
      const h = c.clientHeight
      const R = size * 0.42
      ctx.clearRect(0, 0, w, h)
      ctx.fillStyle = color
      const cos = Math.cos(rot)
      const sin = Math.sin(rot)
      const tilt = 0.35
      for (const [x, y, z] of pts) {
        const rx = x * cos - z * sin
        const rz = x * sin + z * cos
        const ry = y * Math.cos(tilt) - rz * Math.sin(tilt)
        const rz2 = y * Math.sin(tilt) + rz * Math.cos(tilt)
        const depth = (rz2 + 1) / 2
        ctx.globalAlpha = 0.08 + depth * 0.85
        const s = 0.6 + depth * 1.1
        ctx.fillRect(w / 2 + rx * R - s / 2, h / 2 - ry * R - s / 2, s, s)
      }
    }

    const loop = () => {
      if (!dragging) {
        vel += ((reduced ? 0 : 0.004) - vel) * 0.02
        rot += vel
      }
      draw()
      raf = requestAnimationFrame(loop)
    }

    const down = (e: PointerEvent) => {
      dragging = true
      lastX = e.clientX
      c.setPointerCapture(e.pointerId)
    }
    const move = (e: PointerEvent) => {
      if (!dragging) return
      const dx = e.clientX - lastX
      lastX = e.clientX
      vel = dx * 0.006
      rot += vel
    }
    const up = () => {
      dragging = false
    }

    const ro = new ResizeObserver(() => {
      resize()
      draw()
    })
    ro.observe(c)
    c.addEventListener('pointerdown', down)
    c.addEventListener('pointermove', move)
    c.addEventListener('pointerup', up)
    const io = new IntersectionObserver(([e]) => {
      cancelAnimationFrame(raf)
      if (e.isIntersecting) raf = requestAnimationFrame(loop)
    })
    io.observe(c)
    return () => {
      cancelAnimationFrame(raf)
      ro.disconnect()
      io.disconnect()
      c.removeEventListener('pointerdown', down)
      c.removeEventListener('pointermove', move)
      c.removeEventListener('pointerup', up)
    }
  }, [points])

  return <canvas ref={ref} className={`block h-full w-full cursor-grab touch-pan-y text-accent active:cursor-grabbing ${className}`} role="img" aria-label="Rotating globe made of points" />
}

export default function ParticleGlobeDemo() {
  return (
    <div className="h-80">
      <ParticleGlobe />
    </div>
  )
}
```

# Helix gallery (spiral of pictures)
> Images wound onto a helix that turns and climbs; far side dims and blurs. Drag to spin, idle rotation.
- **Category:** 3D
- **Slug:** helix-gallery
- **Tags:** spiral, helix, 3d gallery, images, carousel, css 3d, drag
- **Dependencies:** three-d/_shared.ts (img() placeholder URLs, makeSpinner drag helper)
- **Live demo:** https://ui-lab-weld.vercel.app/#/helix-gallery
- **Raw source:** https://ui-lab-weld.vercel.app/raw/three-d/HelixGallery.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/three-d/HelixGallery.tsx

## When to use
- Portfolio / photography heroes
- Any gallery that should feel like an installation

## Accessibility

Focusable carousel region, arrow keys step, images decorative (alt=""); idle spin stops under reduced motion.


## Source
`src/patterns/three-d/HelixGallery.tsx`
```tsx
import { useEffect, useMemo, useRef, useState } from 'react'
import { img, makeSpinner } from './_shared'

/*
 * Spiral of pictures: images wound onto a helix that turns and climbs.
 * Each image sits at angle a = i·step around a vertical axis and height
 * y = i·rise, so rotating the whole helix also "screws" it. The far side
 * dims and blurs so the spiral reads as depth. Drag to spin, keys to step.
 */

export function HelixGallery({ count = 44, radius = 220, rise = 11, step = 22 }: { count?: number; radius?: number; rise?: number; step?: number }) {
  const [angle, setAngle] = useState(0)
  const ref = useRef<HTMLDivElement>(null)
  const spinner = useMemo(() => makeSpinner(setAngle, { idle: 0.15, sensitivity: 0.25 }), [])
  useEffect(() => {
    spinner.start()
    return () => spinner.stop()
  }, [spinner])

  const height = count * rise
  return (
    <div
      ref={ref}
      {...spinner.handlers}
      tabIndex={0}
      role="region"
      aria-roledescription="carousel"
      aria-label="Helix image gallery. Drag or use arrow keys to spin."
      onKeyDown={(e) => {
        if (e.key === 'ArrowRight') spinner.nudge(-step)
        if (e.key === 'ArrowLeft') spinner.nudge(step)
      }}
      className="relative h-[28rem] cursor-grab touch-pan-y overflow-hidden select-none active:cursor-grabbing"
      style={{ perspective: '1200px' }}
    >
      <div
        className="absolute top-1/2 left-1/2"
        style={{
          transformStyle: 'preserve-3d',
          transform: `translateY(${-height / 2}px) rotateX(-14deg) rotateY(${angle}deg)`,
        }}
      >
        {Array.from({ length: count }, (_, i) => {
          const a = i * step
          const facing = Math.cos(((a + angle) * Math.PI) / 180)
          return (
            <img
              key={i}
              src={img(i, 240, 320)}
              alt=""
              draggable={false}
              className="absolute h-22 w-16 max-w-none -mt-11 -ml-8 rounded-lg object-cover shadow-lg"
              style={{
                transform: `rotateY(${a}deg) translateZ(${radius}px) translateY(${i * rise}px)`,
                filter: `brightness(${0.45 + Math.max(0, facing) * 0.6}) blur(${facing < 0 ? 2 : 0}px)`,
                backfaceVisibility: 'visible',
              }}
            />
          )
        })}
      </div>
    </div>
  )
}

export default function HelixGalleryDemo() {
  return <HelixGallery />
}
```


## Helper it imports: `src/patterns/three-d/_shared.ts`

```ts
/* Shared helpers for 3D demos. Kept tiny so each pattern stays copy-pasteable (inline these if you copy one file). */

/**
 * Demo image by seed. Serves one of 48 self-hosted WebPs from /public/img (fast, same-origin
 * so canvas/WebGL can read them). When copying a pattern into another project, replace img()
 * with your own image URLs, or use the remote fallback: `https://picsum.photos/seed/${seed}/${w}/${h}`.
 */
export const IMG_COUNT = 48
export const img = (seed: number | string, _w = 400, _h = 500) => {
  const n = typeof seed === 'number' ? seed : [...seed].reduce((a, c) => a + c.charCodeAt(0), 0)
  return `/img/${((n % IMG_COUNT) + IMG_COUNT) % IMG_COUNT}.webp`
}

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/** Drag-to-rotate with momentum. Returns handlers + current value via callback. */
export function makeSpinner(onChange: (v: number) => void, opts: { sensitivity?: number; friction?: number; idle?: number } = {}) {
  const { sensitivity = 0.3, friction = 0.95, idle = 0 } = opts
  let value = 0
  let vel = idle
  let dragging = false
  let lastX = 0
  let raf = 0
  const tick = () => {
    if (!dragging) {
      vel = vel * friction + idle * (1 - friction)
      value += vel
      onChange(value)
    }
    raf = requestAnimationFrame(tick)
  }
  return {
    start() {
      if (reducedMotion()) vel = 0
      raf = requestAnimationFrame(tick)
    },
    stop() {
      cancelAnimationFrame(raf)
    },
    nudge(d: number) {
      value += d
      onChange(value)
    },
    handlers: {
      onPointerDown(e: React.PointerEvent) {
        dragging = true
        lastX = e.clientX
        ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
      },
      onPointerMove(e: React.PointerEvent) {
        if (!dragging) return
        vel = (e.clientX - lastX) * sensitivity
        lastX = e.clientX
        value += vel
        onChange(value)
      },
      onPointerUp() {
        dragging = false
      },
    },
  }
}
```

# DNA double-helix carousel
> Two opposing strands of pictures joined by rungs, drifting along the axis; depth from scale, blur and z-sort.
- **Category:** 3D
- **Slug:** dna-carousel
- **Tags:** dna, double helix, 3d, carousel, images, drag
- **Dependencies:** three-d/_shared.ts (img() placeholder URLs, makeSpinner drag helper)
- **Live demo:** https://ui-lab-weld.vercel.app/#/dna-carousel
- **Raw source:** https://ui-lab-weld.vercel.app/raw/three-d/DnaCarousel.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/three-d/DnaCarousel.tsx

## When to use
- Biotech / science / data brands
- Playful image strips

## Accessibility

role="img" with label; drag optional; idle drift stops under reduced motion.


## Source
`src/patterns/three-d/DnaCarousel.tsx`
```tsx
import { useEffect, useMemo, useState } from 'react'
import { img, makeSpinner } from './_shared'

/*
 * Two opposing strands of a double helix, pictures on each, with "rungs"
 * between pairs. Strand B is strand A rotated 180°. Depth is faked with
 * scale + brightness + blur from each card's z, and z-index sorted by it.
 * Horizontal drag scrolls the helix along its axis.
 */

export default function DnaCarousel({ pairs = 12 }: { pairs?: number }) {
  const [t, setT] = useState(0)
  const spinner = useMemo(() => makeSpinner(setT, { idle: 0.25, sensitivity: 0.35 }), [])
  useEffect(() => {
    spinner.start()
    return () => spinner.stop()
  }, [spinner])

  const spacing = 70
  const amp = 90
  const items: { x: number; y: number; z: number; key: string; seed: number }[] = []
  for (let i = 0; i < pairs; i++) {
    const phase = (i * 32 + t) * (Math.PI / 180)
    const x = ((i * spacing + t * 2) % (pairs * spacing)) - (pairs * spacing) / 2
    for (const s of [0, 1]) {
      const p = phase + s * Math.PI
      items.push({ x, y: Math.sin(p) * amp, z: Math.cos(p), key: `${i}-${s}`, seed: i * 2 + s })
    }
  }

  return (
    <div
      {...spinner.handlers}
      className="relative h-80 cursor-grab touch-pan-y overflow-hidden select-none active:cursor-grabbing"
      role="img"
      aria-label="Double helix of images, drag to scroll"
    >
      {items
        .filter((it) => it.seed % 2 === 0)
        .map((it) => {
          const pair = items.find((o) => o.key === it.key.replace('-0', '-1'))!
          return (
            <span
              key={`rung-${it.key}`}
              aria-hidden
              className="absolute left-1/2 w-px bg-fg-muted/25"
              style={{ transform: `translateX(${it.x}px)`, top: `calc(50% + ${Math.min(it.y, pair.y)}px)`, height: Math.abs(it.y - pair.y) }}
            />
          )
        })}
      {items.map((it) => {
        const s = 0.65 + (it.z + 1) * 0.25
        return (
          <img
            key={it.key}
            src={img(it.seed, 160, 200)}
            alt=""
            draggable={false}
            className="absolute top-1/2 left-1/2 h-24 w-18 -mt-12 -ml-9 rounded-md object-cover shadow-md"
            style={{
              transform: `translate(${it.x}px, ${it.y}px) scale(${s})`,
              zIndex: Math.round((it.z + 1) * 100),
              filter: `brightness(${0.5 + (it.z + 1) * 0.28}) blur(${it.z < -0.3 ? 1.5 : 0}px)`,
            }}
          />
        )
      })}
    </div>
  )
}
```


## Helper it imports: `src/patterns/three-d/_shared.ts`

```ts
/* Shared helpers for 3D demos. Kept tiny so each pattern stays copy-pasteable (inline these if you copy one file). */

/**
 * Demo image by seed. Serves one of 48 self-hosted WebPs from /public/img (fast, same-origin
 * so canvas/WebGL can read them). When copying a pattern into another project, replace img()
 * with your own image URLs, or use the remote fallback: `https://picsum.photos/seed/${seed}/${w}/${h}`.
 */
export const IMG_COUNT = 48
export const img = (seed: number | string, _w = 400, _h = 500) => {
  const n = typeof seed === 'number' ? seed : [...seed].reduce((a, c) => a + c.charCodeAt(0), 0)
  return `/img/${((n % IMG_COUNT) + IMG_COUNT) % IMG_COUNT}.webp`
}

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/** Drag-to-rotate with momentum. Returns handlers + current value via callback. */
export function makeSpinner(onChange: (v: number) => void, opts: { sensitivity?: number; friction?: number; idle?: number } = {}) {
  const { sensitivity = 0.3, friction = 0.95, idle = 0 } = opts
  let value = 0
  let vel = idle
  let dragging = false
  let lastX = 0
  let raf = 0
  const tick = () => {
    if (!dragging) {
      vel = vel * friction + idle * (1 - friction)
      value += vel
      onChange(value)
    }
    raf = requestAnimationFrame(tick)
  }
  return {
    start() {
      if (reducedMotion()) vel = 0
      raf = requestAnimationFrame(tick)
    },
    stop() {
      cancelAnimationFrame(raf)
    },
    nudge(d: number) {
      value += d
      onChange(value)
    },
    handlers: {
      onPointerDown(e: React.PointerEvent) {
        dragging = true
        lastX = e.clientX
        ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
      },
      onPointerMove(e: React.PointerEvent) {
        if (!dragging) return
        vel = (e.clientX - lastX) * sensitivity
        lastX = e.clientX
        value += vel
        onChange(value)
      },
      onPointerUp() {
        dragging = false
      },
    },
  }
}
```

# Wave gallery
> An endless ribbon of cards bent into a depth wave; cards crest toward you and sink into fog. Drag or wheel to travel.
- **Category:** 3D
- **Slug:** wave-gallery
- **Tags:** wave, 3d, gallery, infinite, fog, ribbon
- **Dependencies:** three-d/_shared.ts (img() placeholder URLs, makeSpinner drag helper)
- **Live demo:** https://ui-lab-weld.vercel.app/#/wave-gallery
- **Raw source:** https://ui-lab-weld.vercel.app/raw/three-d/WaveGallery.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/three-d/WaveGallery.tsx

## When to use
- Project indexes and case-study reels
- Creative agency homepages

## Accessibility

Decorative motion; wheel/drag optional; idle travel stops under reduced motion.


## Source
`src/patterns/three-d/WaveGallery.tsx`
```tsx
import { useEffect, useMemo, useState } from 'react'
import { img, makeSpinner } from './_shared'

/*
 * An endless ribbon of cards bent into a wave in depth. Each card's x is
 * its index offset by scroll; its z and tilt follow a sine of that x, so
 * cards ride up over the crest and sink into fog beyond it. Fog = opacity
 * and blur from z. Drag or wheel to travel.
 */

export default function WaveGallery({ count = 14 }: { count?: number }) {
  const [pos, setPos] = useState(0)
  const spinner = useMemo(() => makeSpinner(setPos, { idle: -0.6, sensitivity: 1 }), [])
  useEffect(() => {
    spinner.start()
    return () => spinner.stop()
  }, [spinner])

  const gap = 170
  const span = count * gap
  return (
    <div
      {...spinner.handlers}
      onWheel={(e) => spinner.nudge(-e.deltaY * 0.5)}
      className="relative h-80 cursor-grab touch-pan-y overflow-hidden select-none active:cursor-grabbing"
      style={{ perspective: '900px' }}
      role="img"
      aria-label="Wave of project cards, drag to travel"
    >
      <div className="absolute inset-0" style={{ transformStyle: 'preserve-3d' }}>
        {Array.from({ length: count }, (_, i) => {
          const x = ((((i * gap + pos) % span) + span) % span) - span / 2
          const k = (x / span) * Math.PI * 2
          const z = Math.cos(k) * 160 - 120
          const tilt = -Math.sin(k) * 35
          const fog = Math.min(1, Math.max(0, (z + 280) / 320))
          return (
            <figure
              key={i}
              className="absolute top-1/2 left-1/2 -mt-28 -ml-20 w-40 overflow-hidden rounded-xl bg-surface shadow-lg"
              style={{ transform: `translateX(${x}px) translateZ(${z}px) rotateY(${tilt}deg)`, opacity: 0.2 + fog * 0.8, filter: `blur(${(1 - fog) * 3}px)` }}
            >
              <img src={img(i + 40, 240, 300)} alt="" draggable={false} className="h-48 w-full object-cover" />
              <figcaption className="px-3 py-2 font-mono text-[11px] text-fg-muted">Project {String(i + 1).padStart(2, '0')}</figcaption>
            </figure>
          )
        })}
      </div>
    </div>
  )
}
```


## Helper it imports: `src/patterns/three-d/_shared.ts`

```ts
/* Shared helpers for 3D demos. Kept tiny so each pattern stays copy-pasteable (inline these if you copy one file). */

/**
 * Demo image by seed. Serves one of 48 self-hosted WebPs from /public/img (fast, same-origin
 * so canvas/WebGL can read them). When copying a pattern into another project, replace img()
 * with your own image URLs, or use the remote fallback: `https://picsum.photos/seed/${seed}/${w}/${h}`.
 */
export const IMG_COUNT = 48
export const img = (seed: number | string, _w = 400, _h = 500) => {
  const n = typeof seed === 'number' ? seed : [...seed].reduce((a, c) => a + c.charCodeAt(0), 0)
  return `/img/${((n % IMG_COUNT) + IMG_COUNT) % IMG_COUNT}.webp`
}

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/** Drag-to-rotate with momentum. Returns handlers + current value via callback. */
export function makeSpinner(onChange: (v: number) => void, opts: { sensitivity?: number; friction?: number; idle?: number } = {}) {
  const { sensitivity = 0.3, friction = 0.95, idle = 0 } = opts
  let value = 0
  let vel = idle
  let dragging = false
  let lastX = 0
  let raf = 0
  const tick = () => {
    if (!dragging) {
      vel = vel * friction + idle * (1 - friction)
      value += vel
      onChange(value)
    }
    raf = requestAnimationFrame(tick)
  }
  return {
    start() {
      if (reducedMotion()) vel = 0
      raf = requestAnimationFrame(tick)
    },
    stop() {
      cancelAnimationFrame(raf)
    },
    nudge(d: number) {
      value += d
      onChange(value)
    },
    handlers: {
      onPointerDown(e: React.PointerEvent) {
        dragging = true
        lastX = e.clientX
        ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
      },
      onPointerMove(e: React.PointerEvent) {
        if (!dragging) return
        vel = (e.clientX - lastX) * sensitivity
        lastX = e.clientX
        value += vel
        onChange(value)
      },
      onPointerUp() {
        dragging = false
      },
    },
  }
}
```

# Sphere gallery
> Images spread over a sphere (Fibonacci lattice), billboarded, rotating on both axes with inertia.
- **Category:** 3D
- **Slug:** sphere-gallery
- **Tags:** sphere, globe, 3d gallery, images, drag, inertia
- **Dependencies:** three-d/_shared.ts (img() placeholder URLs, makeSpinner drag helper)
- **Live demo:** https://ui-lab-weld.vercel.app/#/sphere-gallery
- **Raw source:** https://ui-lab-weld.vercel.app/raw/three-d/SphereGallery.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/three-d/SphereGallery.tsx

## When to use
- Community / team / customer photo walls
- Globe-style showcases

## Accessibility

role="img" with label; idle spin stops under reduced motion.


## Source
`src/patterns/three-d/SphereGallery.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'
import { img, reducedMotion } from './_shared'

/*
 * Images spread over a sphere (Fibonacci lattice), each billboarded to face
 * the camera. Drag rotates on both axes with inertia. Positions are
 * projected in JS (rotation matrices), z sorts stacking and drives scale,
 * brightness and blur. Hidden hemisphere fades out.
 */

type V = [number, number, number]

export default function SphereGallery({ count = 42, radius = 150 }: { count?: number; radius?: number }) {
  const pts = useRef<V[]>([])
  if (!pts.current.length) {
    const g = Math.PI * (3 - Math.sqrt(5))
    for (let i = 0; i < count; i++) {
      const y = 1 - (i / (count - 1)) * 2
      const r = Math.sqrt(1 - y * y)
      pts.current.push([Math.cos(g * i) * r, y, Math.sin(g * i) * r])
    }
  }
  const [rot, setRot] = useState({ x: -0.3, y: 0 })
  const vel = useRef({ x: 0, y: reducedMotion() ? 0 : 0.004 })
  const drag = useRef<{ x: number; y: number } | null>(null)

  useEffect(() => {
    let raf = 0
    const tick = () => {
      if (!drag.current) {
        vel.current.x *= 0.95
        vel.current.y = vel.current.y * 0.95 + (reducedMotion() ? 0 : 0.004) * 0.05
        setRot((r) => ({ x: Math.max(-1.2, Math.min(1.2, r.x + vel.current.x)), y: r.y + vel.current.y }))
      }
      raf = requestAnimationFrame(tick)
    }
    raf = requestAnimationFrame(tick)
    return () => cancelAnimationFrame(raf)
  }, [])

  const cy = Math.cos(rot.y), sy = Math.sin(rot.y), cx = Math.cos(rot.x), sx = Math.sin(rot.x)
  const projected = pts.current.map(([x, y, z], i) => {
    const x1 = x * cy - z * sy
    const z1 = x * sy + z * cy
    const y2 = y * cx - z1 * sx
    const z2 = y * sx + z1 * cx
    return { i, x: x1 * radius, y: y2 * radius, z: z2 }
  })

  return (
    <div
      className="relative h-96 cursor-grab touch-none overflow-hidden select-none active:cursor-grabbing"
      role="img"
      aria-label="Sphere of images, drag to rotate"
      onPointerDown={(e) => {
        drag.current = { x: e.clientX, y: e.clientY }
        e.currentTarget.setPointerCapture(e.pointerId)
      }}
      onPointerMove={(e) => {
        if (!drag.current) return
        const dx = (e.clientX - drag.current.x) * 0.006
        const dy = (e.clientY - drag.current.y) * 0.006
        drag.current = { x: e.clientX, y: e.clientY }
        vel.current = { x: -dy, y: dx }
        setRot((r) => ({ x: Math.max(-1.2, Math.min(1.2, r.x - dy)), y: r.y + dx }))
      }}
      onPointerUp={() => (drag.current = null)}
    >
      {projected.map((p) => {
        const d = (p.z + 1) / 2
        return (
          <img
            key={p.i}
            src={img(p.i + 100, 120, 120)}
            alt=""
            draggable={false}
            className="absolute top-1/2 left-1/2 -mt-7 -ml-7 h-14 w-14 rounded-lg object-cover"
            style={{
              transform: `translate(${p.x}px, ${p.y}px) scale(${0.55 + d * 0.75})`,
              zIndex: Math.round(d * 1000),
              opacity: 0.15 + d * 0.85,
              filter: `blur(${(1 - d) * 2}px)`,
            }}
          />
        )
      })}
    </div>
  )
}
```


## Helper it imports: `src/patterns/three-d/_shared.ts`

```ts
/* Shared helpers for 3D demos. Kept tiny so each pattern stays copy-pasteable (inline these if you copy one file). */

/**
 * Demo image by seed. Serves one of 48 self-hosted WebPs from /public/img (fast, same-origin
 * so canvas/WebGL can read them). When copying a pattern into another project, replace img()
 * with your own image URLs, or use the remote fallback: `https://picsum.photos/seed/${seed}/${w}/${h}`.
 */
export const IMG_COUNT = 48
export const img = (seed: number | string, _w = 400, _h = 500) => {
  const n = typeof seed === 'number' ? seed : [...seed].reduce((a, c) => a + c.charCodeAt(0), 0)
  return `/img/${((n % IMG_COUNT) + IMG_COUNT) % IMG_COUNT}.webp`
}

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/** Drag-to-rotate with momentum. Returns handlers + current value via callback. */
export function makeSpinner(onChange: (v: number) => void, opts: { sensitivity?: number; friction?: number; idle?: number } = {}) {
  const { sensitivity = 0.3, friction = 0.95, idle = 0 } = opts
  let value = 0
  let vel = idle
  let dragging = false
  let lastX = 0
  let raf = 0
  const tick = () => {
    if (!dragging) {
      vel = vel * friction + idle * (1 - friction)
      value += vel
      onChange(value)
    }
    raf = requestAnimationFrame(tick)
  }
  return {
    start() {
      if (reducedMotion()) vel = 0
      raf = requestAnimationFrame(tick)
    },
    stop() {
      cancelAnimationFrame(raf)
    },
    nudge(d: number) {
      value += d
      onChange(value)
    },
    handlers: {
      onPointerDown(e: React.PointerEvent) {
        dragging = true
        lastX = e.clientX
        ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
      },
      onPointerMove(e: React.PointerEvent) {
        if (!dragging) return
        vel = (e.clientX - lastX) * sensitivity
        lastX = e.clientX
        value += vel
        onChange(value)
      },
      onPointerUp() {
        dragging = false
      },
    },
  }
}
```

# Scroll tunnel
> Fly forward through a corridor of images as you scroll; cards emerge from the fog and pass the camera.
- **Category:** 3D
- **Slug:** scroll-tunnel
- **Tags:** tunnel, scroll, 3d, fly through, z-axis, immersive
- **Dependencies:** three-d/_shared.ts (img() placeholder URLs, makeSpinner drag helper)
- **Live demo:** https://ui-lab-weld.vercel.app/#/scroll-tunnel
- **Raw source:** https://ui-lab-weld.vercel.app/raw/three-d/ScrollTunnel.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/three-d/ScrollTunnel.tsx

## When to use
- Immersive storytelling intros
- Portfolio fly-throughs

## Accessibility

Focusable scroll container; content is decorative imagery. Offer a skip link past long scroll scenes.


## Source
`src/patterns/three-d/ScrollTunnel.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'
import { img } from './_shared'

/*
 * Fly through a corridor of images. Cards are placed at increasing depth
 * along -Z, alternating left/right/up/down walls; scroll moves the camera
 * forward (translateZ on the world). Cards fade in from the fog and out as
 * they pass the camera. Scroll inside the frame (wheel, touch or keys).
 */

const N = 18
const GAP = 320

export default function ScrollTunnel() {
  const [z, setZ] = useState(0)
  const ref = useRef<HTMLDivElement>(null)
  const max = N * GAP

  useEffect(() => {
    const el = ref.current!
    const onScroll = () => setZ((el.scrollTop / (el.scrollHeight - el.clientHeight)) * max)
    el.addEventListener('scroll', onScroll, { passive: true })
    return () => el.removeEventListener('scroll', onScroll)
  }, [max])

  return (
    <div ref={ref} className="relative h-96 overflow-y-auto rounded-xl bg-black" tabIndex={0} aria-label="Image tunnel, scroll to fly forward">
      <div style={{ height: '600%' }}>
        <div className="sticky top-0 h-96 overflow-hidden" style={{ perspective: '600px' }}>
          <div className="absolute inset-0" style={{ transformStyle: 'preserve-3d', transform: `translateZ(${z}px)` }}>
            {Array.from({ length: N }, (_, i) => {
              const depth = -(i + 1) * GAP
              const rel = depth + z
              const side = i % 4
              const [x, y] = [[-190, 0], [190, 0], [0, -120], [0, 120]][side]
              const opacity = rel > 150 ? 0 : Math.min(1, (rel + max * 0.35) / (max * 0.25))
              return (
                <img
                  key={i}
                  src={img(i + 200, 300, 220)}
                  alt=""
                  className="absolute top-1/2 left-1/2 -mt-[55px] -ml-[75px] h-[110px] w-[150px] rounded-md object-cover"
                  style={{ transform: `translate3d(${x}px, ${y}px, ${depth}px)`, opacity: Math.max(0, opacity) }}
                />
              )
            })}
          </div>
          <p className="absolute inset-x-0 bottom-3 text-center font-mono text-xs text-white/60">scroll ↓ to fly</p>
        </div>
      </div>
    </div>
  )
}
```


## Helper it imports: `src/patterns/three-d/_shared.ts`

```ts
/* Shared helpers for 3D demos. Kept tiny so each pattern stays copy-pasteable (inline these if you copy one file). */

/**
 * Demo image by seed. Serves one of 48 self-hosted WebPs from /public/img (fast, same-origin
 * so canvas/WebGL can read them). When copying a pattern into another project, replace img()
 * with your own image URLs, or use the remote fallback: `https://picsum.photos/seed/${seed}/${w}/${h}`.
 */
export const IMG_COUNT = 48
export const img = (seed: number | string, _w = 400, _h = 500) => {
  const n = typeof seed === 'number' ? seed : [...seed].reduce((a, c) => a + c.charCodeAt(0), 0)
  return `/img/${((n % IMG_COUNT) + IMG_COUNT) % IMG_COUNT}.webp`
}

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/** Drag-to-rotate with momentum. Returns handlers + current value via callback. */
export function makeSpinner(onChange: (v: number) => void, opts: { sensitivity?: number; friction?: number; idle?: number } = {}) {
  const { sensitivity = 0.3, friction = 0.95, idle = 0 } = opts
  let value = 0
  let vel = idle
  let dragging = false
  let lastX = 0
  let raf = 0
  const tick = () => {
    if (!dragging) {
      vel = vel * friction + idle * (1 - friction)
      value += vel
      onChange(value)
    }
    raf = requestAnimationFrame(tick)
  }
  return {
    start() {
      if (reducedMotion()) vel = 0
      raf = requestAnimationFrame(tick)
    },
    stop() {
      cancelAnimationFrame(raf)
    },
    nudge(d: number) {
      value += d
      onChange(value)
    },
    handlers: {
      onPointerDown(e: React.PointerEvent) {
        dragging = true
        lastX = e.clientX
        ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
      },
      onPointerMove(e: React.PointerEvent) {
        if (!dragging) return
        vel = (e.clientX - lastX) * sensitivity
        lastX = e.clientX
        value += vel
        onChange(value)
      },
      onPointerUp() {
        dragging = false
      },
    },
  }
}
```

# Swipe card stack
> Tinder-style stack: drag the top card, it tilts and flies off past a threshold; buttons and arrow keys do the same.
- **Category:** 3D
- **Slug:** swipe-stack
- **Tags:** swipe, tinder, card stack, drag, gesture, mobile
- **Dependencies:** three-d/_shared.ts (img() placeholder URLs, makeSpinner drag helper)
- **Live demo:** https://ui-lab-weld.vercel.app/#/swipe-stack
- **Raw source:** https://ui-lab-weld.vercel.app/raw/three-d/SwipeStack.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/three-d/SwipeStack.tsx

## When to use
- Onboarding choices, matching, quick triage
- Mobile-first decision UIs

## Accessibility

Buttons + arrow keys alternative to dragging; decisions announced via aria-live.


## Source
`src/patterns/three-d/SwipeStack.tsx`
```tsx
import { useState } from 'react'
import { img } from './_shared'

/*
 * Swipeable card stack. The top card follows the pointer with rotation
 * proportional to horizontal drag; past a threshold it flies off and the
 * next card scales up from the pile. Buttons + arrow keys do the same for
 * keyboard and screen-reader users, and the decision is announced.
 */

const PEOPLE = ['Ira', 'Dev', 'Noor', 'Arjun', 'Tara', 'Kian'].map((n, i) => ({ n, seed: i + 300 }))

export default function SwipeStack() {
  const [index, setIndex] = useState(0)
  const [drag, setDrag] = useState({ x: 0, y: 0, active: false })
  const [fly, setFly] = useState<0 | 1 | -1>(0)
  const [last, setLast] = useState('')

  const decide = (dir: 1 | -1) => {
    if (index >= PEOPLE.length) return
    setFly(dir)
    setLast(`${PEOPLE[index].n}: ${dir > 0 ? 'liked' : 'passed'}`)
    setTimeout(() => {
      setIndex((i) => i + 1)
      setFly(0)
      setDrag({ x: 0, y: 0, active: false })
    }, 280)
  }

  return (
    <div
      className="flex flex-col items-center gap-5"
      tabIndex={0}
      onKeyDown={(e) => {
        if (e.key === 'ArrowRight') decide(1)
        if (e.key === 'ArrowLeft') decide(-1)
      }}
      aria-label="Card stack. Left arrow passes, right arrow likes."
    >
      <div className="relative h-80 w-60">
        {PEOPLE.slice(index, index + 3)
          .map((p, k) => {
            const top = k === 0
            const x = top ? (fly ? fly * 500 : drag.x) : 0
            const rot = top ? x * 0.06 : 0
            return (
              <div
                key={p.n}
                className={`absolute inset-0 overflow-hidden rounded-2xl bg-surface shadow-lg ${top ? 'cursor-grab touch-none active:cursor-grabbing' : ''}`}
                style={{
                  transform: `translate(${x}px, ${top ? drag.y : k * 10}px) rotate(${rot}deg) scale(${1 - k * 0.05})`,
                  transition: drag.active && top ? 'none' : 'transform .3s var(--ease-out-expo)',
                  zIndex: 10 - k,
                }}
                onPointerDown={(e) => {
                  if (!top) return
                  e.currentTarget.setPointerCapture(e.pointerId)
                  setDrag({ x: 0, y: 0, active: true })
                  ;(e.currentTarget as HTMLElement).dataset.sx = String(e.clientX)
                  ;(e.currentTarget as HTMLElement).dataset.sy = String(e.clientY)
                }}
                onPointerMove={(e) => {
                  if (!top || !drag.active) return
                  const el = e.currentTarget as HTMLElement
                  setDrag({ x: e.clientX - Number(el.dataset.sx), y: (e.clientY - Number(el.dataset.sy)) * 0.3, active: true })
                }}
                onPointerUp={() => {
                  if (!top) return
                  if (Math.abs(drag.x) > 100) decide(drag.x > 0 ? 1 : -1)
                  else setDrag({ x: 0, y: 0, active: false })
                }}
                aria-hidden={!top}
              >
                <img src={img(p.seed, 400, 540)} alt="" draggable={false} className="h-full w-full object-cover" />
                <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 p-4 text-white">
                  <p className="text-xl font-semibold">{p.n}</p>
                </div>
                {top && (
                  <>
                    <span className="absolute top-5 left-5 rounded-md border-2 border-green-400 px-2 font-bold text-green-400" style={{ opacity: Math.max(0, x / 100) }}>LIKE</span>
                    <span className="absolute top-5 right-5 rounded-md border-2 border-red-400 px-2 font-bold text-red-400" style={{ opacity: Math.max(0, -x / 100) }}>NOPE</span>
                  </>
                )}
              </div>
            )
          })
          .reverse()}
        {index >= PEOPLE.length && (
          <button onClick={() => setIndex(0)} className="absolute inset-0 grid place-items-center rounded-2xl border border-dashed border-border text-sm text-fg-muted">
            ↻ Start over
          </button>
        )}
      </div>
      <div className="flex gap-3">
        <button onClick={() => decide(-1)} className="rounded-full border border-border px-5 py-2 text-sm" aria-label="Pass">✕</button>
        <button onClick={() => decide(1)} className="rounded-full bg-fg px-5 py-2 text-sm text-bg" aria-label="Like">♥</button>
      </div>
      <p aria-live="polite" className="h-4 font-mono text-xs text-fg-muted">{last}</p>
    </div>
  )
}
```


## Helper it imports: `src/patterns/three-d/_shared.ts`

```ts
/* Shared helpers for 3D demos. Kept tiny so each pattern stays copy-pasteable (inline these if you copy one file). */

/**
 * Demo image by seed. Serves one of 48 self-hosted WebPs from /public/img (fast, same-origin
 * so canvas/WebGL can read them). When copying a pattern into another project, replace img()
 * with your own image URLs, or use the remote fallback: `https://picsum.photos/seed/${seed}/${w}/${h}`.
 */
export const IMG_COUNT = 48
export const img = (seed: number | string, _w = 400, _h = 500) => {
  const n = typeof seed === 'number' ? seed : [...seed].reduce((a, c) => a + c.charCodeAt(0), 0)
  return `/img/${((n % IMG_COUNT) + IMG_COUNT) % IMG_COUNT}.webp`
}

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/** Drag-to-rotate with momentum. Returns handlers + current value via callback. */
export function makeSpinner(onChange: (v: number) => void, opts: { sensitivity?: number; friction?: number; idle?: number } = {}) {
  const { sensitivity = 0.3, friction = 0.95, idle = 0 } = opts
  let value = 0
  let vel = idle
  let dragging = false
  let lastX = 0
  let raf = 0
  const tick = () => {
    if (!dragging) {
      vel = vel * friction + idle * (1 - friction)
      value += vel
      onChange(value)
    }
    raf = requestAnimationFrame(tick)
  }
  return {
    start() {
      if (reducedMotion()) vel = 0
      raf = requestAnimationFrame(tick)
    },
    stop() {
      cancelAnimationFrame(raf)
    },
    nudge(d: number) {
      value += d
      onChange(value)
    },
    handlers: {
      onPointerDown(e: React.PointerEvent) {
        dragging = true
        lastX = e.clientX
        ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
      },
      onPointerMove(e: React.PointerEvent) {
        if (!dragging) return
        vel = (e.clientX - lastX) * sensitivity
        lastX = e.clientX
        value += vel
        onChange(value)
      },
      onPointerUp() {
        dragging = false
      },
    },
  }
}
```

# 3D flip card
> Two faces back-to-back that flip on Y; hover for pointers, click/Enter for everyone.
- **Category:** 3D
- **Slug:** flip-card
- **Tags:** flip, card, 3d, backface-visibility, hover
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/flip-card
- **Raw source:** https://ui-lab-weld.vercel.app/raw/three-d/FlipCard.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/three-d/FlipCard.tsx

## When to use
- Feature teasers, team bios, flashcards
- Pricing details on the back

## Accessibility

Button with aria-pressed; hidden face aria-hidden so only the visible side is read.


## Source
`src/patterns/three-d/FlipCard.tsx`
```tsx
import { useState } from 'react'

/*
 * 3D flip card: two faces back-to-back (backface-visibility: hidden), the
 * inner wrapper rotates 180° on Y. Flips on hover for pointers and on
 * click/Enter for everyone; the hidden face is aria-hidden so screen
 * readers only get the visible side.
 */

export function FlipCard({ front, back }: { front: React.ReactNode; back: React.ReactNode }) {
  const [flipped, setFlipped] = useState(false)
  const face = 'absolute inset-0 rounded-2xl [backface-visibility:hidden]'
  return (
    <button
      onClick={() => setFlipped((f) => !f)}
      aria-pressed={flipped}
      className="group relative h-64 w-48 text-left [perspective:900px]"
    >
      <div
        className={`relative h-full w-full transition-transform duration-700 ease-out-expo [transform-style:preserve-3d] ${flipped ? '[transform:rotateY(180deg)]' : 'group-hover:[transform:rotateY(180deg)]'}`}
      >
        <div className={face} aria-hidden={flipped}>{front}</div>
        <div className={`${face} [transform:rotateY(180deg)]`} aria-hidden={!flipped}>{back}</div>
      </div>
    </button>
  )
}

export default function FlipCardDemo() {
  return (
    <div className="flex flex-wrap justify-center gap-6">
      {[['Aurora', 160], ['Ember', 20], ['Tide', 200]].map(([t, h]) => (
        <FlipCard
          key={t}
          front={
            <div className="flex h-full flex-col justify-end rounded-2xl p-4 text-white" style={{ background: `linear-gradient(160deg, hsl(${h} 80% 60%), hsl(${Number(h) + 40} 70% 25%))` }}>
              <p className="font-display text-3xl italic">{t}</p>
              <p className="font-mono text-[11px] opacity-70">hover / tap to flip</p>
            </div>
          }
          back={
            <div className="flex h-full flex-col justify-between rounded-2xl border border-border bg-surface p-4">
              <p className="text-sm text-fg-muted">A short description lives on the back, with an action.</p>
              <span className="rounded-full bg-fg px-3 py-1.5 text-center text-xs text-bg">View {t}</span>
            </div>
          }
        />
      ))}
    </div>
  )
}
```

# Depth parallax layers
> Scene layers shift by depth against the pointer plus a slight whole-card tilt; CSS variables, no re-renders.
- **Category:** 3D
- **Slug:** depth-parallax
- **Tags:** parallax, layers, depth, hover, tilt, illustration
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/depth-parallax
- **Raw source:** https://ui-lab-weld.vercel.app/raw/three-d/DepthParallax.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/three-d/DepthParallax.tsx

## When to use
- Hero illustrations, game / app promos
- Product cards with foreground props

## Accessibility

role="img" with description; transforms disabled under reduced motion.


## Source
`src/patterns/three-d/DepthParallax.tsx`
```tsx
import { useRef } from 'react'

/*
 * Layered depth on hover: several layers translate by different amounts
 * against the pointer (far layers move less), plus a slight whole-card tilt.
 * Pointer offset goes to CSS vars on the container; each layer multiplies
 * it by its own depth, so there is no React re-render per frame.
 */

const LAYERS = [
  { d: 0.2, el: <div className="absolute inset-0 bg-gradient-to-b from-indigo-950 via-violet-900 to-fuchsia-800" /> },
  { d: 0.5, el: <div className="absolute top-8 right-10 h-16 w-16 rounded-full bg-amber-200 shadow-[0_0_60px_20px_rgba(253,230,138,.35)]" /> },
  { d: 0.9, el: <svg viewBox="0 0 400 200" className="absolute inset-x-[-10%] bottom-0 w-[120%] fill-violet-950/80" preserveAspectRatio="none"><path d="M0 200 L0 120 L80 60 L150 110 L230 40 L320 100 L400 70 L400 200Z" /></svg> },
  { d: 1.5, el: <svg viewBox="0 0 400 200" className="absolute inset-x-[-10%] bottom-[-10px] w-[120%] fill-black/80" preserveAspectRatio="none"><path d="M0 200 L0 150 L60 120 L120 150 L200 110 L280 160 L340 130 L400 150 L400 200Z" /></svg> },
  { d: 2.2, el: <p className="absolute bottom-6 left-6 font-display text-4xl text-white italic">Nightfall</p> },
]

export default function DepthParallax() {
  const ref = useRef<HTMLDivElement>(null)
  return (
    <div className="grid place-items-center [perspective:1000px]">
      <div
        ref={ref}
        onPointerMove={(e) => {
          const r = e.currentTarget.getBoundingClientRect()
          e.currentTarget.style.setProperty('--px', String((e.clientX - r.left) / r.width - 0.5))
          e.currentTarget.style.setProperty('--py', String((e.clientY - r.top) / r.height - 0.5))
        }}
        onPointerLeave={(e) => {
          e.currentTarget.style.setProperty('--px', '0')
          e.currentTarget.style.setProperty('--py', '0')
        }}
        role="img"
        aria-label="Layered mountain scene at night with moon"
        className="relative h-72 w-full max-w-md overflow-hidden rounded-2xl shadow-lg transition-transform duration-300 ease-out motion-reduce:!transform-none"
        style={{ transform: 'rotateY(calc(var(--px, 0) * 10deg)) rotateX(calc(var(--py, 0) * -10deg))' }}
      >
        {LAYERS.map((l, i) => (
          <div
            key={i}
            className="absolute inset-0 transition-transform duration-300 ease-out motion-reduce:!transform-none"
            style={{ transform: `translate(calc(var(--px, 0) * ${-l.d * 24}px), calc(var(--py, 0) * ${-l.d * 16}px)) scale(1.08)` }}
          >
            {l.el}
          </div>
        ))}
      </div>
    </div>
  )
}
```

# 3D cube slider
> Four slides on the faces of a rotating cube; prev/next turn it 90°.
- **Category:** 3D
- **Slug:** cube-slider
- **Tags:** cube, slider, 3d, carousel, rotate
- **Dependencies:** three-d/_shared.ts (img() placeholder URLs, makeSpinner drag helper)
- **Live demo:** https://ui-lab-weld.vercel.app/#/cube-slider
- **Raw source:** https://ui-lab-weld.vercel.app/raw/three-d/CubeSlider.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/three-d/CubeSlider.tsx

## When to use
- Product angle views, before/after, step-throughs

## Accessibility

Labelled prev/next buttons, current face announced, other faces aria-hidden.


## Source
`src/patterns/three-d/CubeSlider.tsx`
```tsx
import { useState } from 'react'
import { img } from './_shared'

/*
 * 3D cube slider: four faces around a Y axis, the cube pulled back by half
 * its width so faces sit on its surface. Next/prev rotate 90°. Each face is
 * a full slide; only the front face is exposed to assistive tech.
 */

const SLIDES = ['North', 'East', 'South', 'West']

export default function CubeSlider() {
  const [i, setI] = useState(0)
  const size = 280
  return (
    <div className="flex flex-col items-center gap-5">
      <div className="[perspective:1000px]" style={{ width: size, height: size * 0.75 }}>
        <div
          className="relative h-full w-full transition-transform duration-700 ease-out-expo [transform-style:preserve-3d]"
          style={{ transform: `translateZ(${-size / 2}px) rotateY(${-i * 90}deg)` }}
        >
          {SLIDES.map((s, k) => (
            <figure
              key={s}
              aria-hidden={((i % 4) + 4) % 4 !== k}
              className="absolute inset-0 overflow-hidden rounded-xl [backface-visibility:hidden]"
              style={{ transform: `rotateY(${k * 90}deg) translateZ(${size / 2}px)` }}
            >
              <img src={img(k + 400, 560, 420)} alt={`${s} view`} className="h-full w-full object-cover" />
              <figcaption className="absolute bottom-3 left-3 rounded-full bg-black/50 px-3 py-1 text-sm text-white backdrop-blur">{s}</figcaption>
            </figure>
          ))}
        </div>
      </div>
      <div className="flex items-center gap-3">
        <button onClick={() => setI((n) => n - 1)} aria-label="Previous" className="rounded-full border border-border px-3 py-1">←</button>
        <span className="w-16 text-center font-mono text-xs text-fg-muted" aria-live="polite">{SLIDES[((i % 4) + 4) % 4]}</span>
        <button onClick={() => setI((n) => n + 1)} aria-label="Next" className="rounded-full border border-border px-3 py-1">→</button>
      </div>
    </div>
  )
}
```


## Helper it imports: `src/patterns/three-d/_shared.ts`

```ts
/* Shared helpers for 3D demos. Kept tiny so each pattern stays copy-pasteable (inline these if you copy one file). */

/**
 * Demo image by seed. Serves one of 48 self-hosted WebPs from /public/img (fast, same-origin
 * so canvas/WebGL can read them). When copying a pattern into another project, replace img()
 * with your own image URLs, or use the remote fallback: `https://picsum.photos/seed/${seed}/${w}/${h}`.
 */
export const IMG_COUNT = 48
export const img = (seed: number | string, _w = 400, _h = 500) => {
  const n = typeof seed === 'number' ? seed : [...seed].reduce((a, c) => a + c.charCodeAt(0), 0)
  return `/img/${((n % IMG_COUNT) + IMG_COUNT) % IMG_COUNT}.webp`
}

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/** Drag-to-rotate with momentum. Returns handlers + current value via callback. */
export function makeSpinner(onChange: (v: number) => void, opts: { sensitivity?: number; friction?: number; idle?: number } = {}) {
  const { sensitivity = 0.3, friction = 0.95, idle = 0 } = opts
  let value = 0
  let vel = idle
  let dragging = false
  let lastX = 0
  let raf = 0
  const tick = () => {
    if (!dragging) {
      vel = vel * friction + idle * (1 - friction)
      value += vel
      onChange(value)
    }
    raf = requestAnimationFrame(tick)
  }
  return {
    start() {
      if (reducedMotion()) vel = 0
      raf = requestAnimationFrame(tick)
    },
    stop() {
      cancelAnimationFrame(raf)
    },
    nudge(d: number) {
      value += d
      onChange(value)
    },
    handlers: {
      onPointerDown(e: React.PointerEvent) {
        dragging = true
        lastX = e.clientX
        ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
      },
      onPointerMove(e: React.PointerEvent) {
        if (!dragging) return
        vel = (e.clientX - lastX) * sensitivity
        lastX = e.clientX
        value += vel
        onChange(value)
      },
      onPointerUp() {
        dragging = false
      },
    },
  }
}
```

# Arc carousel
> Cards riding a huge circle; one shared transform-origin means rotate() alone places and tilts them.
- **Category:** 3D
- **Slug:** arc-carousel
- **Tags:** arc, carousel, rotate, transform-origin, slider
- **Dependencies:** three-d/_shared.ts (img() placeholder URLs, makeSpinner drag helper)
- **Live demo:** https://ui-lab-weld.vercel.app/#/arc-carousel
- **Raw source:** https://ui-lab-weld.vercel.app/raw/three-d/ArcCarousel.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/three-d/ArcCarousel.tsx

## When to use
- Featured work, app screenshots, testimonials

## Accessibility

listbox/option with aria-selected, arrow keys, position announced.


## Source
`src/patterns/three-d/ArcCarousel.tsx`
```tsx
import { useState } from 'react'
import { img } from './_shared'

/*
 * Cards riding a very large circle whose top peeks into the frame. All cards
 * share one transform-origin at the circle's centre (far below), so
 * rotate() alone places AND tilts them tangent to the arc. The active card
 * sits upright at the apex.
 */

const N = 9
const STEP = 12

export default function ArcCarousel() {
  const [active, setActive] = useState(4)
  return (
    <div className="flex flex-col items-center gap-4">
      <div className="relative h-72 w-full overflow-hidden" role="listbox" aria-label="Arc carousel" tabIndex={0}
        onKeyDown={(e) => {
          if (e.key === 'ArrowRight') setActive((a) => Math.min(a + 1, N - 1))
          if (e.key === 'ArrowLeft') setActive((a) => Math.max(a - 1, 0))
        }}>
        {Array.from({ length: N }, (_, i) => {
          const o = i - active
          return (
            <button
              key={i}
              role="option"
              aria-selected={o === 0}
              tabIndex={-1}
              onClick={() => setActive(i)}
              className="absolute top-10 left-1/2 -ml-16 h-48 w-32 overflow-hidden rounded-xl shadow-lg transition-transform duration-700 ease-out-expo"
              style={{ transformOrigin: '50% 900px', transform: `rotate(${o * STEP}deg) scale(${o === 0 ? 1.08 : 0.92})`, zIndex: 20 - Math.abs(o) }}
            >
              <img src={img(i + 500, 260, 380)} alt={`Slide ${i + 1}`} className="h-full w-full object-cover" />
            </button>
          )
        })}
      </div>
      <p className="font-mono text-xs text-fg-muted" aria-live="polite">{active + 1} / {N}</p>
    </div>
  )
}
```


## Helper it imports: `src/patterns/three-d/_shared.ts`

```ts
/* Shared helpers for 3D demos. Kept tiny so each pattern stays copy-pasteable (inline these if you copy one file). */

/**
 * Demo image by seed. Serves one of 48 self-hosted WebPs from /public/img (fast, same-origin
 * so canvas/WebGL can read them). When copying a pattern into another project, replace img()
 * with your own image URLs, or use the remote fallback: `https://picsum.photos/seed/${seed}/${w}/${h}`.
 */
export const IMG_COUNT = 48
export const img = (seed: number | string, _w = 400, _h = 500) => {
  const n = typeof seed === 'number' ? seed : [...seed].reduce((a, c) => a + c.charCodeAt(0), 0)
  return `/img/${((n % IMG_COUNT) + IMG_COUNT) % IMG_COUNT}.webp`
}

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/** Drag-to-rotate with momentum. Returns handlers + current value via callback. */
export function makeSpinner(onChange: (v: number) => void, opts: { sensitivity?: number; friction?: number; idle?: number } = {}) {
  const { sensitivity = 0.3, friction = 0.95, idle = 0 } = opts
  let value = 0
  let vel = idle
  let dragging = false
  let lastX = 0
  let raf = 0
  const tick = () => {
    if (!dragging) {
      vel = vel * friction + idle * (1 - friction)
      value += vel
      onChange(value)
    }
    raf = requestAnimationFrame(tick)
  }
  return {
    start() {
      if (reducedMotion()) vel = 0
      raf = requestAnimationFrame(tick)
    },
    stop() {
      cancelAnimationFrame(raf)
    },
    nudge(d: number) {
      value += d
      onChange(value)
    },
    handlers: {
      onPointerDown(e: React.PointerEvent) {
        dragging = true
        lastX = e.clientX
        ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
      },
      onPointerMove(e: React.PointerEvent) {
        if (!dragging) return
        vel = (e.clientX - lastX) * sensitivity
        lastX = e.clientX
        value += vel
        onChange(value)
      },
      onPointerUp() {
        dragging = false
      },
    },
  }
}
```

# Extruded 3D text
> Chunky 3D type from a generated stack of text-shadows, tilting toward the pointer.
- **Category:** 3D
- **Slug:** extruded-text
- **Tags:** 3d text, text-shadow, extrude, typography, retro
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/extruded-text
- **Raw source:** https://ui-lab-weld.vercel.app/raw/three-d/ExtrudedText.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/three-d/ExtrudedText.tsx

## When to use
- Playful headlines, posters, game UIs

## Accessibility

Real text, still selectable and readable; tilt off under reduced motion. Keep contrast of face colour vs background.


## Source
`src/patterns/three-d/ExtrudedText.tsx`
```tsx
/*
 * Extruded 3D text with pure CSS: a stack of text-shadows, each 1px further
 * along the extrusion direction and slightly darker, then a soft cast
 * shadow. The shadow list is generated, so depth and colour are props.
 * The whole block tilts toward the pointer.
 */

export function extrude(depth = 14, color = '60 50% 40%') {
  const [h, s, l] = color.split(' ')
  const layers = Array.from({ length: depth }, (_, i) => `${i + 1}px ${i + 1}px 0 hsl(${h} ${s} calc(${l} - ${i * 1.5}%))`)
  return [...layers, `${depth + 6}px ${depth + 10}px 18px rgb(0 0 0 / .35)`].join(', ')
}

export default function ExtrudedText() {
  return (
    <div
      className="grid h-64 place-items-center [perspective:800px]"
      onPointerMove={(e) => {
        const r = e.currentTarget.getBoundingClientRect()
        e.currentTarget.style.setProperty('--rx', `${((e.clientY - r.top) / r.height - 0.5) * -20}deg`)
        e.currentTarget.style.setProperty('--ry', `${((e.clientX - r.left) / r.width - 0.5) * 20}deg`)
      }}
    >
      <h3
        className="text-7xl font-black tracking-tight text-amber-300 transition-transform duration-200 select-none motion-reduce:!transform-none sm:text-8xl"
        style={{ textShadow: extrude(16, '30 90% 45%'), transform: 'rotateX(var(--rx, 8deg)) rotateY(var(--ry, -12deg))' }}
      >
        BOLD
      </h3>
    </div>
  )
}
```

# 3D grid on scroll
> Images rotate in from depth as they enter and tilt away as they leave, via CSS view timelines.
- **Category:** 3D
- **Slug:** scroll-3d-grid
- **Tags:** 3d, scroll, grid, perspective, animation-timeline
- **Dependencies:** three-d/_shared.ts (img() placeholder URLs, makeSpinner drag helper)
- **Live demo:** https://ui-lab-weld.vercel.app/#/scroll-3d-grid
- **Raw source:** https://ui-lab-weld.vercel.app/raw/three-d/Scroll3DGrid.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/three-d/Scroll3DGrid.tsx

## When to use
- Galleries, lookbooks, case-study indexes

## Accessibility

Flat grid without support or under reduced motion.


## Source
`src/patterns/three-d/Scroll3DGrid.tsx`
```tsx
import { img } from './_shared'

/*
 * 3D grid on scroll: each image rotates in on X and comes forward in Z as
 * it enters, then tilts away as it leaves, driven by a CSS view timeline.
 * Alternate columns use different transform origins for a staggered,
 * "flipping pages" feel. No JS; flat grid without support.
 */

const CSS = `
.g3 { perspective: 900px; }
@supports (animation-timeline: view()) {
  .g3 figure { animation: g3-in linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  .g3 figure:nth-child(3n+2) { transform-origin: 50% 100%; }
  .g3 figure:nth-child(3n) { transform-origin: 0% 50%; }
}
@keyframes g3-in {
  0% { transform: rotateX(70deg) translateZ(-200px); opacity: 0; filter: blur(4px); }
  35%, 65% { transform: none; opacity: 1; filter: none; }
  100% { transform: rotateX(-50deg) translateZ(-150px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .g3 figure { animation: none; } }
`

export default function Scroll3DGrid() {
  return (
    <div className="h-96 overflow-y-auto rounded-xl border border-border bg-bg" tabIndex={0} role="region" aria-label="3D grid, scroll inside">
      <style>{CSS}</style>
      <div className="g3 grid grid-cols-3 gap-4 p-6 py-40">
        {Array.from({ length: 18 }, (_, i) => (
          <figure key={i} className="overflow-hidden rounded-lg">
            <img src={img(i + 1300, 300, 380)} alt="" className="aspect-[4/5] w-full object-cover" />
          </figure>
        ))}
      </div>
    </div>
  )
}
```


## Helper it imports: `src/patterns/three-d/_shared.ts`

```ts
/* Shared helpers for 3D demos. Kept tiny so each pattern stays copy-pasteable (inline these if you copy one file). */

/**
 * Demo image by seed. Serves one of 48 self-hosted WebPs from /public/img (fast, same-origin
 * so canvas/WebGL can read them). When copying a pattern into another project, replace img()
 * with your own image URLs, or use the remote fallback: `https://picsum.photos/seed/${seed}/${w}/${h}`.
 */
export const IMG_COUNT = 48
export const img = (seed: number | string, _w = 400, _h = 500) => {
  const n = typeof seed === 'number' ? seed : [...seed].reduce((a, c) => a + c.charCodeAt(0), 0)
  return `/img/${((n % IMG_COUNT) + IMG_COUNT) % IMG_COUNT}.webp`
}

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/** Drag-to-rotate with momentum. Returns handlers + current value via callback. */
export function makeSpinner(onChange: (v: number) => void, opts: { sensitivity?: number; friction?: number; idle?: number } = {}) {
  const { sensitivity = 0.3, friction = 0.95, idle = 0 } = opts
  let value = 0
  let vel = idle
  let dragging = false
  let lastX = 0
  let raf = 0
  const tick = () => {
    if (!dragging) {
      vel = vel * friction + idle * (1 - friction)
      value += vel
      onChange(value)
    }
    raf = requestAnimationFrame(tick)
  }
  return {
    start() {
      if (reducedMotion()) vel = 0
      raf = requestAnimationFrame(tick)
    },
    stop() {
      cancelAnimationFrame(raf)
    },
    nudge(d: number) {
      value += d
      onChange(value)
    },
    handlers: {
      onPointerDown(e: React.PointerEvent) {
        dragging = true
        lastX = e.clientX
        ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
      },
      onPointerMove(e: React.PointerEvent) {
        if (!dragging) return
        vel = (e.clientX - lastX) * sensitivity
        lastX = e.clientX
        value += vel
        onChange(value)
      },
      onPointerUp() {
        dragging = false
      },
    },
  }
}
```

# Cursor-following 3D robot
> Boxy robot mascot: head turns to the cursor, glowing eyes slide inside the visor, antenna springs with lag, eyes brighten on hover.
- **Category:** 3D Motion
- **Slug:** cursor-robot
- **Tags:** three.js, react three fiber, cursor follow, robot, mascot, character, eyes
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/cursor-robot
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/CursorRobot.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/CursorRobot.tsx

## When to use
- AI / SaaS / dev-tool mascots
- Hero characters that react to the visitor

## Accessibility

Canvas wrapped in role=img with a description; idle motion stops under reduced motion; decorative (no information in the motion).


## Source
`src/patterns/motion3d/CursorRobot.tsx`
```tsx
import { useRef } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { ContactShadows, RoundedBox } from '@react-three/drei'
import * as THREE from 'three'
import { reducedMotion, useWindowPointer } from './_pointer'

/*
 * Boxy robot mascot: the head turns toward the cursor, the glowing eyes
 * slide inside the visor to look even further, the antenna springs with
 * a lag, and hovering the robot makes the eyes brighten. Built from
 * RoundedBox primitives, emissive eyes, no model file.
 */

function Robot() {
  const pointer = useWindowPointer()
  const head = useRef<THREE.Group>(null!)
  const pupils = useRef<THREE.Group>(null!)
  const antenna = useRef<THREE.Group>(null!)
  const eyeMat = useRef<THREE.MeshStandardMaterial>(null!)
  const hovered = useRef(false)
  const still = reducedMotion()

  useFrame((s, dt) => {
    const { x, y } = pointer.current
    const d = THREE.MathUtils.damp
    head.current.rotation.y = d(head.current.rotation.y, x * 0.7, 5, dt)
    head.current.rotation.x = d(head.current.rotation.x, -y * 0.35, 5, dt)
    pupils.current.position.x = d(pupils.current.position.x, x * 0.09, 8, dt)
    pupils.current.position.y = d(pupils.current.position.y, y * 0.05, 8, dt)
    antenna.current.rotation.z = d(antenna.current.rotation.z, -head.current.rotation.y * 0.6 + (still ? 0 : Math.sin(s.clock.elapsedTime * 3) * 0.05), 3, dt)
    eyeMat.current.emissiveIntensity = d(eyeMat.current.emissiveIntensity, hovered.current ? 6 : 2.5, 6, dt)
  })

  return (
    <group position={[0, -0.4, 0]} onPointerOver={() => (hovered.current = true)} onPointerOut={() => (hovered.current = false)}>
      <RoundedBox args={[1.5, 1.3, 1]} radius={0.2} position={[0, -0.8, 0]}>
        <meshStandardMaterial color="#e4e4e7" metalness={0.3} roughness={0.35} />
      </RoundedBox>
      <mesh position={[0, -0.75, 0.51]}>
        <circleGeometry args={[0.18, 32]} />
        <meshStandardMaterial color="#6366f1" emissive="#6366f1" emissiveIntensity={1.5} />
      </mesh>
      <group ref={head} position={[0, 0.45, 0]}>
        <RoundedBox args={[1.7, 1.2, 1.2]} radius={0.28}>
          <meshStandardMaterial color="#f4f4f5" metalness={0.25} roughness={0.3} />
        </RoundedBox>
        <RoundedBox args={[1.35, 0.6, 0.1]} radius={0.12} position={[0, 0, 0.58]}>
          <meshStandardMaterial color="#09090b" roughness={0.15} metalness={0.6} />
        </RoundedBox>
        <group ref={pupils} position={[0, 0, 0.65]}>
          {[-0.3, 0.3].map((xx) => (
            <mesh key={xx} position={[xx, 0, 0]}>
              <capsuleGeometry args={[0.07, 0.14, 8, 16]} />
              <meshStandardMaterial ref={xx < 0 ? eyeMat : undefined} color="#22d3ee" emissive="#22d3ee" emissiveIntensity={2.5} toneMapped={false} />
            </mesh>
          ))}
        </group>
        <group ref={antenna} position={[0, 0.6, 0]}>
          <mesh position={[0, 0.25, 0]}>
            <cylinderGeometry args={[0.03, 0.03, 0.5]} />
            <meshStandardMaterial color="#a1a1aa" metalness={0.8} roughness={0.2} />
          </mesh>
          <mesh position={[0, 0.55, 0]}>
            <sphereGeometry args={[0.1, 20, 20]} />
            <meshStandardMaterial color="#f43f5e" emissive="#f43f5e" emissiveIntensity={2} toneMapped={false} />
          </mesh>
        </group>
        {[-1, 1].map((sx) => (
          <mesh key={sx} position={[sx * 0.9, 0, 0]} rotation={[0, 0, Math.PI / 2]}>
            <cylinderGeometry args={[0.18, 0.18, 0.12, 24]} />
            <meshStandardMaterial color="#a1a1aa" metalness={0.8} roughness={0.25} />
          </mesh>
        ))}
      </group>
    </group>
  )
}

export function CursorRobot({ className = 'h-96' }: { className?: string }) {
  return (
    <div className={className} role="img" aria-label="3D robot that turns its head and eyes toward the cursor">
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 0.3, 5.5], fov: 35 }}>
        <ambientLight intensity={0.5} />
        <directionalLight position={[3, 5, 4]} intensity={1.8} />
        <pointLight position={[-3, 1, 2]} intensity={8} color="#818cf8" />
        <Robot />
        <ContactShadows position={[0, -1.85, 0]} opacity={0.5} scale={6} blur={2.2} far={3} />
      </Canvas>
    </div>
  )
}

export default function CursorRobotDemo() {
  return <CursorRobot />
}
```

# Floating shapes that dodge the cursor
> Glossy clearcoat 3D shapes bob in space and get pushed away by the cursor (pointer projected onto the scene), springing back home.
- **Category:** 3D Motion
- **Slug:** floating-shapes
- **Tags:** three.js, floating, repel, cursor, physics, shapes, hero
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/floating-shapes
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/FloatingShapes.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/FloatingShapes.tsx

## When to use
- Playful hero backgrounds
- Product / agency landing pages

## Accessibility

Canvas wrapped in role=img with a description; idle motion stops under reduced motion; decorative (no information in the motion).


## Source
`src/patterns/motion3d/FloatingShapes.tsx`
```tsx
import { useRef } from 'react'
import { Canvas, useFrame, useThree } from '@react-three/fiber'
import * as THREE from 'three'
import { reducedMotion } from './_pointer'

/*
 * Glossy 3D shapes floating in space that get pushed away from the cursor
 * and drift back home. The pointer is projected onto the z=0 plane each
 * frame; each shape adds a repulsion offset that falls off with distance,
 * springs back with damping, and keeps its own slow spin and bob.
 */

const SHAPES: { geo: 'torusKnot' | 'ico' | 'torus' | 'box' | 'sphere' | 'cone'; pos: [number, number, number]; color: string; s: number }[] = [
  { geo: 'torusKnot', pos: [-2.2, 0.8, 0], color: '#818cf8', s: 0.45 },
  { geo: 'ico', pos: [2.1, 1, -0.5], color: '#f472b6', s: 0.6 },
  { geo: 'torus', pos: [0.2, -1.1, 0.4], color: '#fbbf24', s: 0.55 },
  { geo: 'box', pos: [-1.4, -1, -0.8], color: '#34d399', s: 0.55 },
  { geo: 'sphere', pos: [1.3, -0.6, 0.6], color: '#22d3ee', s: 0.45 },
  { geo: 'cone', pos: [-0.1, 1.3, -0.6], color: '#fb7185', s: 0.5 },
]

function Geo({ geo }: { geo: (typeof SHAPES)[number]['geo'] }) {
  switch (geo) {
    case 'torusKnot': return <torusKnotGeometry args={[0.6, 0.2, 128, 24]} />
    case 'ico': return <icosahedronGeometry args={[0.8, 0]} />
    case 'torus': return <torusGeometry args={[0.6, 0.25, 32, 64]} />
    case 'box': return <boxGeometry args={[1, 1, 1]} />
    case 'sphere': return <sphereGeometry args={[0.8, 48, 48]} />
    case 'cone': return <coneGeometry args={[0.7, 1.2, 32]} />
  }
}

function Shape({ shape, i }: { shape: (typeof SHAPES)[number]; i: number }) {
  const ref = useRef<THREE.Mesh>(null!)
  const off = useRef(new THREE.Vector3())
  const { camera, pointer } = useThree()
  const tmp = useRef(new THREE.Vector3())
  const still = reducedMotion()
  useFrame((s, dt) => {
    // project the canvas pointer onto z=0
    const v = tmp.current.set(pointer.x, pointer.y, 0.5).unproject(camera)
    const dir = v.sub(camera.position).normalize()
    const hit = camera.position.clone().add(dir.multiplyScalar(-camera.position.z / dir.z))
    const home = new THREE.Vector3(...shape.pos)
    const away = home.clone().add(off.current).sub(hit)
    const dist = away.length()
    const push = Math.max(0, 1.6 - dist) * 1.4
    const target = away.normalize().multiplyScalar(push)
    off.current.x = THREE.MathUtils.damp(off.current.x, target.x, 4, dt)
    off.current.y = THREE.MathUtils.damp(off.current.y, target.y, 4, dt)
    const t = s.clock.elapsedTime
    const bob = still ? 0 : Math.sin(t * 0.8 + i) * 0.12
    ref.current.position.set(home.x + off.current.x, home.y + off.current.y + bob, home.z)
    if (!still) {
      ref.current.rotation.x += dt * 0.3
      ref.current.rotation.y += dt * 0.4
    }
  })
  return (
    <mesh ref={ref} scale={shape.s}>
      <Geo geo={shape.geo} />
      <meshPhysicalMaterial color={shape.color} roughness={0.15} metalness={0.1} clearcoat={1} clearcoatRoughness={0.1} />
    </mesh>
  )
}

export function FloatingShapes({ className = 'h-96' }: { className?: string }) {
  return (
    <div className={className} role="img" aria-label="Glossy 3D shapes floating and dodging the cursor">
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 0, 6], fov: 45 }}>
        <ambientLight intensity={0.5} />
        <directionalLight position={[4, 5, 5]} intensity={2} />
        <directionalLight position={[-5, -2, 2]} intensity={0.8} color="#c4b5fd" />
        {SHAPES.map((s, i) => (
          <Shape key={i} shape={s} i={i} />
        ))}
      </Canvas>
    </div>
  )
}

export default function FloatingShapesDemo() {
  return (
    <div className="relative">
      <FloatingShapes />
      <p className="pointer-events-none absolute inset-0 grid place-items-center text-4xl font-semibold tracking-tight mix-blend-difference">Push them around</p>
    </div>
  )
}
```

# Scroll-driven 3D object
> A 3D planet turns, slides, tilts and recolours through keyframes as text sections scroll past, like an Apple-style product story.
- **Category:** 3D Motion
- **Slug:** scroll-model
- **Tags:** three.js, scroll, scrollytelling, product, keyframes, 3d
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/scroll-model
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/ScrollModel.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/ScrollModel.tsx

## When to use
- Product pages that reveal features by scrolling
- Storytelling / scrollytelling

## Accessibility

Canvas is decorative; the text sections carry the content and stay readable; container is focusable for keyboard scrolling.


## Source
`src/patterns/motion3d/ScrollModel.tsx`
```tsx
import { useEffect, useRef } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import * as THREE from 'three'

/*
 * Scroll-driven 3D product story: a planet with a ring rotates, tilts,
 * slides side to side and changes colour as the text sections scroll past,
 * like a product page where the object turns to show each feature.
 * Scroll progress (0..1) is read from the container into a ref and the
 * scene eases toward it every frame. Keyframes are a plain array: edit
 * them to choreograph any object.
 */

const KEYS = [
  { x: 1.4, rotY: 0, tilt: 0.3, scale: 1, color: '#6366f1' },
  { x: -1.4, rotY: Math.PI * 0.9, tilt: -0.2, scale: 1.15, color: '#ec4899' },
  { x: 1.3, rotY: Math.PI * 1.8, tilt: 0.6, scale: 0.95, color: '#f59e0b' },
  { x: 0, rotY: Math.PI * 2.6, tilt: 0.1, scale: 1.35, color: '#10b981' },
]
const SECTIONS = [
  ['Orbit', 'A calm object to anchor the first screen.'],
  ['Turn', 'It swings across and turns as you read.'],
  ['Tilt', 'Every section gets its own angle and colour.'],
  ['Land', 'And it settles centre stage at the end.'],
]

function Planet({ progress }: { progress: React.MutableRefObject<number> }) {
  const g = useRef<THREE.Group>(null!)
  const mat = useRef<THREE.MeshStandardMaterial>(null!)
  const c = useRef(new THREE.Color())
  useFrame((_, dt) => {
    const p = progress.current * (KEYS.length - 1)
    const i = Math.min(KEYS.length - 2, Math.floor(p))
    const t = THREE.MathUtils.smoothstep(p - i, 0, 1)
    const a = KEYS[i], b = KEYS[i + 1]
    const L = THREE.MathUtils.lerp
    const d = THREE.MathUtils.damp
    g.current.position.x = d(g.current.position.x, L(a.x, b.x, t), 5, dt)
    g.current.rotation.y = d(g.current.rotation.y, L(a.rotY, b.rotY, t), 5, dt)
    g.current.rotation.z = d(g.current.rotation.z, L(a.tilt, b.tilt, t), 5, dt)
    g.current.scale.setScalar(d(g.current.scale.x, L(a.scale, b.scale, t), 5, dt))
    c.current.set(a.color).lerp(new THREE.Color(b.color), t)
    mat.current.color.lerp(c.current, 0.1)
  })
  return (
    <group ref={g}>
      <mesh>
        <sphereGeometry args={[1, 64, 64]} />
        <meshStandardMaterial ref={mat} color={KEYS[0].color} roughness={0.35} metalness={0.2} />
      </mesh>
      <mesh rotation={[Math.PI / 2.3, 0, 0]}>
        <torusGeometry args={[1.6, 0.06, 16, 128]} />
        <meshStandardMaterial color="#e4e4e7" metalness={0.8} roughness={0.2} />
      </mesh>
      <mesh position={[1.9, 0.6, 0]}>
        <sphereGeometry args={[0.16, 32, 32]} />
        <meshStandardMaterial color="#f4f4f5" />
      </mesh>
    </group>
  )
}

export default function ScrollModel() {
  const box = useRef<HTMLDivElement>(null)
  const progress = useRef(0)
  useEffect(() => {
    const el = box.current!
    const on = () => (progress.current = el.scrollTop / (el.scrollHeight - el.clientHeight || 1))
    el.addEventListener('scroll', on, { passive: true })
    return () => el.removeEventListener('scroll', on)
  }, [])
  return (
    <div ref={box} className="relative h-96 overflow-y-auto rounded-xl bg-bg" tabIndex={0} aria-label="Scroll-driven 3D object story, scroll inside">
      <div className="pointer-events-none sticky top-0 h-96" aria-hidden>
        <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 0, 6], fov: 40 }}>
          <ambientLight intensity={0.4} />
          <directionalLight position={[4, 3, 5]} intensity={2.2} />
          <directionalLight position={[-4, -1, -2]} intensity={0.6} color="#a5b4fc" />
          <Planet progress={progress} />
        </Canvas>
      </div>
      <div className="relative -mt-96">
        {SECTIONS.map(([h, p], i) => (
          <section key={h} className={`flex h-96 items-center px-8 ${i % 2 ? 'justify-end text-right' : ''}`}>
            <div className="max-w-[45%]">
              <p className="font-mono text-xs text-fg-muted">0{i + 1}</p>
              <h3 className="font-display text-4xl italic">{h}</h3>
              <p className="mt-2 text-sm text-fg-muted">{p}</p>
            </div>
          </section>
        ))}
      </div>
    </div>
  )
}
```

# Refractive glass torus
> A glass torus (MeshTransmissionMaterial) with chromatic aberration refracts big type behind it and tilts toward the cursor.
- **Category:** 3D Motion
- **Slug:** glass-shape
- **Tags:** three.js, glass, refraction, transmission, chromatic aberration, hero
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/glass-shape
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/GlassShape.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/GlassShape.tsx

## When to use
- Premium hero sections
- Brand moments where the headline should feel tangible

## Accessibility

Canvas wrapped in role=img with a description; idle motion stops under reduced motion; decorative (no information in the motion).


## Source
`src/patterns/motion3d/GlassShape.tsx`
```tsx
import { useMemo, useRef } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { MeshTransmissionMaterial } from '@react-three/drei'
import * as THREE from 'three'
import { reducedMotion, useWindowPointer } from './_pointer'

/*
 * Refractive glass: a torus with drei's MeshTransmissionMaterial rotating
 * in front of big type, bending and colour-splitting it (chromatic
 * aberration) like a thick lens. The type is drawn to a CanvasTexture on
 * a plane in the scene, because transmission only refracts 3D content, so
 * no font files or network loads are needed. Tilts toward the cursor.
 */

function useTextTexture(text: string) {
  return useMemo(() => {
    const c = document.createElement('canvas')
    c.width = 2048
    c.height = 1024
    const g = c.getContext('2d')!
    const grd = g.createLinearGradient(0, 0, 2048, 1024)
    grd.addColorStop(0, '#0b0b12')
    grd.addColorStop(1, '#1e1b4b')
    g.fillStyle = grd
    g.fillRect(0, 0, 2048, 1024)
    g.fillStyle = '#f4f4f5'
    g.font = 'bold 380px Georgia, serif'
    g.textAlign = 'center'
    g.textBaseline = 'middle'
    g.fillText(text, 1024, 512)
    g.strokeStyle = '#818cf8'
    g.lineWidth = 6
    for (let i = 0; i < 9; i++) {
      g.beginPath()
      g.moveTo(0, 90 + i * 110)
      g.lineTo(2048, 90 + i * 110)
      g.globalAlpha = 0.18
      g.stroke()
    }
    const t = new THREE.CanvasTexture(c)
    t.colorSpace = THREE.SRGBColorSpace
    return t
  }, [text])
}

function Glass() {
  const ref = useRef<THREE.Mesh>(null!)
  const pointer = useWindowPointer()
  const still = reducedMotion()
  useFrame((_, dt) => {
    if (!still) ref.current.rotation.z += dt * 0.25
    ref.current.rotation.x = THREE.MathUtils.damp(ref.current.rotation.x, 0.5 - pointer.current.y * 0.5, 4, dt)
    ref.current.rotation.y = THREE.MathUtils.damp(ref.current.rotation.y, pointer.current.x * 0.6, 4, dt)
  })
  return (
    <mesh ref={ref} position={[0, 0, 1.2]}>
      <torusGeometry args={[1.05, 0.42, 64, 128]} />
      <MeshTransmissionMaterial thickness={0.9} roughness={0.05} ior={1.35} chromaticAberration={0.5} anisotropy={0.2} distortion={0.3} distortionScale={0.4} temporalDistortion={0.1} backside samples={6} resolution={512} />
    </mesh>
  )
}

export function GlassShape({ text = 'GLASS', className = 'h-96' }: { text?: string; className?: string }) {
  const tex = useTextTexture(text)
  return (
    <div className={className} role="img" aria-label={`Rotating glass torus refracting the word ${text}`}>
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 0, 5], fov: 45 }}>
        <mesh position={[0, 0, -1]}>
          <planeGeometry args={[10, 5]} />
          <meshBasicMaterial map={tex} toneMapped={false} />
        </mesh>
        <ambientLight intensity={1} />
        <directionalLight position={[3, 4, 5]} intensity={2} />
        <Glass />
      </Canvas>
    </div>
  )
}

export default function GlassShapeDemo() {
  return <GlassShape />
}
```

# Liquid 3D blob
> Noise-distorted sphere that leans toward the cursor, wobbles harder and swells on hover, and changes colour on click.
- **Category:** 3D Motion
- **Slug:** distort-blob
- **Tags:** three.js, blob, distort, liquid, orb, hover, ai
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/distort-blob
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/DistortBlob.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/DistortBlob.tsx

## When to use
- AI / voice / music product heroes
- Interactive brand orbs

## Accessibility

Canvas wrapped in role=img with a description; idle motion stops under reduced motion; decorative (no information in the motion).


## Source
`src/patterns/motion3d/DistortBlob.tsx`
```tsx
import { useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { MeshDistortMaterial } from '@react-three/drei'
import * as THREE from 'three'
import { reducedMotion, useWindowPointer } from './_pointer'

/*
 * A liquid 3D blob (drei MeshDistortMaterial: noise-displaced vertices in
 * the shader). It leans toward the cursor, wobbles harder and swells on
 * hover, and cycles colour on click, springing each change with damping.
 */

const COLORS = ['#818cf8', '#f472b6', '#34d399', '#fbbf24', '#22d3ee']

function Blob() {
  const ref = useRef<THREE.Mesh>(null!)
  // drei does not export the material instance type, so type the fields we drive.
  const mat = useRef<THREE.MeshPhysicalMaterial & { distort: number; speed: number }>(null!)
  const [hover, setHover] = useState(false)
  const [ci, setCi] = useState(0)
  const pointer = useWindowPointer()
  const col = useRef(new THREE.Color(COLORS[0]))
  const still = reducedMotion()
  useFrame((_, dt) => {
    const d = THREE.MathUtils.damp
    ref.current.position.x = d(ref.current.position.x, pointer.current.x * 0.6, 3, dt)
    ref.current.position.y = d(ref.current.position.y, pointer.current.y * 0.4, 3, dt)
    const s = d(ref.current.scale.x, hover ? 1.15 : 1, 6, dt)
    ref.current.scale.setScalar(s)
    mat.current.distort = d(mat.current.distort, still ? 0.15 : hover ? 0.55 : 0.32, 4, dt)
    mat.current.speed = still ? 0 : hover ? 4 : 1.8
    col.current.set(COLORS[ci])
    mat.current.color.lerp(col.current, 0.08)
  })
  return (
    <mesh
      ref={ref}
      onPointerOver={() => setHover(true)}
      onPointerOut={() => setHover(false)}
      onClick={() => setCi((c) => (c + 1) % COLORS.length)}
    >
      <sphereGeometry args={[1.3, 128, 128]} />
      <MeshDistortMaterial ref={mat as never} color={COLORS[0]} roughness={0.15} metalness={0.2} distort={0.32} speed={1.8} />
    </mesh>
  )
}

export default function DistortBlob() {
  return (
    <div className="h-96 cursor-pointer" role="img" aria-label="Liquid 3D blob that wobbles on hover and changes colour on click">
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 0, 5], fov: 45 }}>
        <ambientLight intensity={0.5} />
        <directionalLight position={[3, 4, 5]} intensity={2.2} />
        <pointLight position={[-4, -2, 2]} intensity={15} color="#f0abfc" />
        <Blob />
      </Canvas>
    </div>
  )
}
```

# Particle morph
> 4,000 particles ripple between a sphere, cube, torus knot and wave plane, rotating toward the cursor.
- **Category:** 3D Motion
- **Slug:** particle-morph
- **Tags:** three.js, particles, morph, points, shape, additive
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/particle-morph
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/ParticleMorph.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/ParticleMorph.tsx

## When to use
- Data / AI / tech heroes
- Section transitions and loading moments

## Accessibility

Shape picker is a radiogroup; canvas labelled with the current shape; instant morph and no drift under reduced motion.


## Source
`src/patterns/motion3d/ParticleMorph.tsx`
```tsx
import { useMemo, useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import * as THREE from 'three'
import { reducedMotion, useWindowPointer } from './_pointer'

/*
 * 4,000 particles that morph between shapes (sphere → cube → torus knot →
 * wave plane). Every target shape is a Float32Array of the same length;
 * each frame positions ease toward the active target with a per-particle
 * delay, so the morph ripples. The cloud rotates toward the cursor.
 */

const N = 4000

function targets() {
  const sphere = new Float32Array(N * 3)
  const cube = new Float32Array(N * 3)
  const knot = new Float32Array(N * 3)
  const wave = new Float32Array(N * 3)
  const g = Math.PI * (3 - Math.sqrt(5))
  const k = new THREE.TorusKnotGeometry(1.1, 0.35, 200, 20).attributes.position
  for (let i = 0; i < N; i++) {
    const y = 1 - (i / (N - 1)) * 2
    const r = Math.sqrt(1 - y * y)
    sphere.set([Math.cos(g * i) * r * 1.6, y * 1.6, Math.sin(g * i) * r * 1.6], i * 3)
    const f = i % 6, u = Math.random() * 2 - 1, v = Math.random() * 2 - 1, s = 1.2
    const face = [[s, u * s, v * s], [-s, u * s, v * s], [u * s, s, v * s], [u * s, -s, v * s], [u * s, v * s, s], [u * s, v * s, -s]][f]
    cube.set(face, i * 3)
    const j = i % k.count
    knot.set([k.getX(j), k.getY(j), k.getZ(j)], i * 3)
    const gx = (i % 80) / 79 - 0.5, gz = Math.floor(i / 80) / (N / 80) - 0.5
    wave.set([gx * 4, Math.sin(gx * 8) * 0.3 + Math.cos(gz * 8) * 0.3, gz * 3], i * 3)
  }
  return [sphere, cube, knot, wave]
}

const NAMES = ['Sphere', 'Cube', 'Knot', 'Wave']

function Cloud({ shape }: { shape: number }) {
  const all = useMemo(targets, [])
  const pts = useRef<THREE.Points>(null!)
  const pos = useMemo(() => all[0].slice(), [all])
  const delay = useMemo(() => Float32Array.from({ length: N }, () => Math.random()), [])
  const since = useRef(0)
  const last = useRef(shape)
  const pointer = useWindowPointer()
  const still = reducedMotion()
  useFrame((_, dt) => {
    if (last.current !== shape) {
      last.current = shape
      since.current = 0
    }
    since.current += dt
    const tgt = all[shape]
    for (let i = 0; i < N; i++) {
      if (!still && since.current < delay[i] * 0.8) continue
      const a = still ? 1 : 1 - Math.exp(-dt * 5)
      for (let c = 0; c < 3; c++) pos[i * 3 + c] += (tgt[i * 3 + c] - pos[i * 3 + c]) * a
    }
    pts.current.geometry.attributes.position.needsUpdate = true
    pts.current.rotation.y = THREE.MathUtils.damp(pts.current.rotation.y, pointer.current.x * 0.8 + (still ? 0 : since.current * 0.05), 3, dt)
    pts.current.rotation.x = THREE.MathUtils.damp(pts.current.rotation.x, -pointer.current.y * 0.4, 3, dt)
  })
  return (
    <points ref={pts}>
      <bufferGeometry>
        <bufferAttribute attach="attributes-position" args={[pos, 3]} />
      </bufferGeometry>
      <pointsMaterial size={0.035} color="#a5b4fc" sizeAttenuation transparent opacity={0.9} depthWrite={false} blending={THREE.AdditiveBlending} />
    </points>
  )
}

export default function ParticleMorph() {
  const [shape, setShape] = useState(0)
  return (
    <div className="relative h-96 rounded-xl bg-black">
      <div className="h-full" role="img" aria-label={`Particle cloud shaped as a ${NAMES[shape]}`}>
        <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 0, 5], fov: 45 }}>
          <Cloud shape={shape} />
        </Canvas>
      </div>
      <div className="absolute inset-x-0 bottom-4 flex justify-center gap-2" role="radiogroup" aria-label="Particle shape">
        {NAMES.map((n, i) => (
          <button key={n} role="radio" aria-checked={shape === i} onClick={() => setShape(i)} className={`rounded-full px-3 py-1 text-xs ${shape === i ? 'bg-white text-black' : 'bg-white/10 text-white'}`}>
            {n}
          </button>
        ))}
      </div>
    </div>
  )
}
```

# 3D keycap
> A glossy keycap that tilts toward the cursor and physically presses on click, Space/Enter, or when you type its letter.
- **Category:** 3D Motion
- **Slug:** keycap-3d
- **Tags:** three.js, keyboard, keycap, press, button, 3d
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/keycap-3d
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/Keycap3D.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/Keycap3D.tsx

## When to use
- Keyboard / dev-tool / shortcut marketing
- Playful CTAs

## Accessibility

The canvas sits inside a real button (aria-pressed); works with Space/Enter and the key itself.


## Source
`src/patterns/motion3d/Keycap3D.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { RoundedBox } from '@react-three/drei'
import * as THREE from 'three'
import { useWindowPointer } from './_pointer'

/*
 * A glossy 3D keycap that tilts toward the cursor and physically presses
 * (sinks, squashes, rim light flares) on click, Space/Enter while focused,
 * or when you type its letter anywhere. Built from RoundedBox; the legend
 * is a CanvasTexture so there are no font downloads.
 */

function legend(ch: string) {
  const c = document.createElement('canvas')
  c.width = c.height = 256
  const g = c.getContext('2d')!
  g.fillStyle = '#18181b'
  g.fillRect(0, 0, 256, 256)
  g.fillStyle = '#e4e4e7'
  g.font = '600 150px system-ui, sans-serif'
  g.textAlign = 'center'
  g.textBaseline = 'middle'
  g.fillText(ch, 128, 138)
  const t = new THREE.CanvasTexture(c)
  t.colorSpace = THREE.SRGBColorSpace
  return t
}

function Key({ ch, pressed }: { ch: string; pressed: boolean }) {
  const g = useRef<THREE.Group>(null!)
  const rim = useRef<THREE.PointLight>(null!)
  const pointer = useWindowPointer()
  const tex = useRef(legend(ch))
  useFrame((_, dt) => {
    const d = THREE.MathUtils.damp
    g.current.rotation.x = d(g.current.rotation.x, 0.55 - pointer.current.y * 0.35, 5, dt)
    g.current.rotation.y = d(g.current.rotation.y, pointer.current.x * 0.5, 5, dt)
    g.current.position.y = d(g.current.position.y, pressed ? -0.18 : 0, pressed ? 30 : 10, dt)
    g.current.scale.y = d(g.current.scale.y, pressed ? 0.88 : 1, pressed ? 30 : 10, dt)
    rim.current.intensity = d(rim.current.intensity, pressed ? 40 : 10, 12, dt)
  })
  return (
    <group ref={g}>
      <RoundedBox args={[1.6, 0.7, 1.6]} radius={0.22} smoothness={6}>
        <meshPhysicalMaterial color="#27272a" roughness={0.25} clearcoat={1} clearcoatRoughness={0.15} />
      </RoundedBox>
      <mesh position={[0, 0.36, 0]} rotation={[-Math.PI / 2, 0, 0]}>
        <planeGeometry args={[1.15, 1.15]} />
        <meshStandardMaterial map={tex.current} roughness={0.4} />
      </mesh>
      <pointLight ref={rim} position={[0, -0.6, 0]} color="#8b5cf6" distance={3} intensity={10} />
    </group>
  )
}

export default function Keycap3D({ ch = 'K' }: { ch?: string }) {
  const [pressed, setPressed] = useState(false)
  useEffect(() => {
    const down = (e: KeyboardEvent) => e.key.toLowerCase() === ch.toLowerCase() && setPressed(true)
    const up = (e: KeyboardEvent) => e.key.toLowerCase() === ch.toLowerCase() && setPressed(false)
    addEventListener('keydown', down)
    addEventListener('keyup', up)
    return () => {
      removeEventListener('keydown', down)
      removeEventListener('keyup', up)
    }
  }, [ch])
  return (
    <div className="relative">
      <button
        aria-label={`3D key ${ch}. Press to test`}
        aria-pressed={pressed}
        onPointerDown={() => setPressed(true)}
        onPointerUp={() => setPressed(false)}
        onPointerLeave={() => setPressed(false)}
        onKeyDown={(e) => (e.key === ' ' || e.key === 'Enter') && setPressed(true)}
        onKeyUp={() => setPressed(false)}
        className="block h-80 w-full"
      >
        <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 2.2, 4], fov: 38 }}>
          <ambientLight intensity={0.35} />
          <directionalLight position={[2, 5, 3]} intensity={1.6} />
          <Key ch={ch} pressed={pressed} />
          <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.45, 0]}>
            <circleGeometry args={[2.2, 64]} />
            <meshStandardMaterial color="#8b5cf6" emissive="#8b5cf6" emissiveIntensity={0.25} transparent opacity={0.15} />
          </mesh>
        </Canvas>
      </button>
      <p className="text-center font-mono text-xs text-fg-muted">click it, or type "{ch}"</p>
    </div>
  )
}
```

# 360° product viewer
> Drag-to-orbit product with idle auto-rotate, colourway swatches and hotspots pinned to the model.
- **Category:** 3D Motion
- **Slug:** product-viewer
- **Tags:** three.js, product, orbit controls, 360, configurator, ecommerce, hotspots
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/product-viewer
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/ProductViewer.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/ProductViewer.tsx

## When to use
- E-commerce product pages
- Hardware / packaging showcases

## Accessibility

Canvas labelled with the current colourway; swatches are a radiogroup; auto-rotate off under reduced motion; hotspot text is real HTML.


## Source
`src/patterns/motion3d/ProductViewer.tsx`
```tsx
import { useMemo, useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { ContactShadows, OrbitControls } from '@react-three/drei'
import * as THREE from 'three'
import { reducedMotion } from './_pointer'

/*
 * 360° product viewer: drag to orbit, auto-rotates when idle, colourway
 * swatches recolour the product, and hotspots pinned to the model explain
 * features. Hotspots are plain HTML outside the canvas: each frame their 3D
 * anchors are projected to screen space, and they fade when facing away. The "product" is a soda can with a
 * CanvasTexture label; replace it with useGLTF('/model.glb') for real ones.
 */

const WAYS = [
  { name: 'Citrus', body: '#f59e0b', text: '#1c1917' },
  { name: 'Berry', body: '#db2777', text: '#fff1f2' },
  { name: 'Mint', body: '#10b981', text: '#052e16' },
]

function label(body: string, text: string) {
  const c = document.createElement('canvas')
  c.width = 1024
  c.height = 512
  const g = c.getContext('2d')!
  g.fillStyle = body
  g.fillRect(0, 0, 1024, 512)
  g.fillStyle = text
  g.font = 'italic bold 150px Georgia, serif'
  g.textAlign = 'center'
  g.fillText('fizz', 512, 300)
  g.font = '600 36px system-ui'
  g.fillText('SPARKLING · 330ML', 512, 380)
  const t = new THREE.CanvasTexture(c)
  t.colorSpace = THREE.SRGBColorSpace
  return t
}

function Can({ way }: { way: (typeof WAYS)[number] }) {
  const tex = useMemo(() => label(way.body, way.text), [way])
  return (
    <group>
      <mesh>
        <cylinderGeometry args={[0.8, 0.8, 2.4, 64, 1, true]} />
        <meshStandardMaterial map={tex} metalness={0.3} roughness={0.35} side={THREE.DoubleSide} />
      </mesh>
      {[1.2, -1.2].map((y) => (
        <mesh key={y} position={[0, y, 0]}>
          <cylinderGeometry args={[0.72, 0.8, 0.12, 64]} />
          <meshStandardMaterial color="#d4d4d8" metalness={0.9} roughness={0.2} />
        </mesh>
      ))}
    </group>
  )
}

const SPOTS: { label: string; at: [number, number, number]; normal: [number, number, number] }[] = [
  { label: 'Real fruit', at: [0.82, 0.4, 0], normal: [1, 0, 0] },
  { label: 'Resealable top', at: [0, 1.3, 0.3], normal: [0, 0.6, 0.8] },
]

/** Projects hotspot anchors to screen coords every frame and writes them to DOM refs. */
function Hotspots({ els }: { els: React.MutableRefObject<(HTMLSpanElement | null)[]> }) {
  const v = useMemo(() => new THREE.Vector3(), [])
  const n = useMemo(() => new THREE.Vector3(), [])
  useFrame(({ camera, size }) => {
    SPOTS.forEach((s, i) => {
      const el = els.current[i]
      if (!el) return
      v.set(...s.at).project(camera)
      n.set(...s.normal)
      const facing = n.dot(camera.position.clone().sub(new THREE.Vector3(...s.at)).normalize())
      el.style.transform = `translate(${((v.x + 1) / 2) * size.width}px, ${((1 - v.y) / 2) * size.height}px)`
      el.style.opacity = facing > 0.1 ? '1' : '0'
    })
  })
  return null
}

export default function ProductViewer() {
  const spots = useRef<(HTMLSpanElement | null)[]>([])
  const [w, setW] = useState(0)
  return (
    <div className="grid gap-4 md:grid-cols-[1fr_12rem]">
      <div className="relative h-96 cursor-grab overflow-hidden rounded-xl bg-gradient-to-b from-surface-2 to-bg active:cursor-grabbing" role="img" aria-label={`${WAYS[w].name} soda can, drag to rotate`}>
        <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 0.6, 5.5], fov: 35 }}>
          <ambientLight intensity={0.6} />
          <directionalLight position={[3, 4, 5]} intensity={2} />
          <directionalLight position={[-4, 2, -3]} intensity={0.8} />
          <Can way={WAYS[w]} />
          <ContactShadows position={[0, -1.4, 0]} opacity={0.45} scale={5} blur={2.5} />
          <Hotspots els={spots} />
          <OrbitControls enablePan={false} enableZoom={false} autoRotate={!reducedMotion()} autoRotateSpeed={1.2} minPolarAngle={Math.PI / 3} maxPolarAngle={Math.PI / 1.8} />
        </Canvas>
        {SPOTS.map((s, i) => (
          <span
            key={s.label}
            ref={(el) => { spots.current[i] = el }}
            className="pointer-events-none absolute top-0 left-0 -translate-y-1/2 rounded-full bg-black/70 px-2 py-1 text-[11px] whitespace-nowrap text-white transition-opacity duration-200"
          >
            ● {s.label}
          </span>
        ))}
      </div>
      <div className="space-y-3">
        <h3 className="font-display text-3xl italic">{WAYS[w].name}</h3>
        <p className="text-sm text-fg-muted">Drag to spin. Pick a flavour:</p>
        <div className="flex gap-2" role="radiogroup" aria-label="Flavour">
          {WAYS.map((way, i) => (
            <button key={way.name} role="radio" aria-checked={w === i} aria-label={way.name} onClick={() => setW(i)} className={`h-9 w-9 rounded-full ring-offset-2 ring-offset-bg ${w === i ? 'ring-2 ring-fg' : ''}`} style={{ background: way.body }} />
          ))}
        </div>
      </div>
    </div>
  )
}
```

# Animated 3D robot mascot (real rigged model)
> A rigged, animated GLB character plays its Idle clip while its Head bone and body turn toward the cursor on top of the animation; emote buttons (Wave, Yes, No, Thumbs up, Jump, Dance) crossfade and return to Idle.
- **Category:** 3D Motion
- **Slug:** robot-mascot
- **Tags:** three.js, gltf, glb, rigged character, skeletal animation, bone, look at cursor, mascot, emote
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook), public/models/robot.glb
- **Live demo:** https://ui-lab-weld.vercel.app/#/robot-mascot
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/RobotMascot.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/RobotMascot.tsx

## When to use
- Hero mascots for SaaS / AI / dev tools
- Any time you have a rigged character (Mixamo, Ready Player Me, CC0 packs)

## Accessibility

Canvas labelled; emotes are real buttons with aria-pressed; Dance disabled under reduced motion. Model: RobotExpressive.glb (CC0) served from /models/robot.glb.


## Source
`src/patterns/motion3d/RobotMascot.tsx`
```tsx
import { Suspense, useEffect, useMemo, useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { ContactShadows, useAnimations, useGLTF } from '@react-three/drei'
import * as THREE from 'three'
import { reducedMotion, useWindowPointer } from './_pointer'

/*
 * Real rigged character (RobotExpressive.glb, CC0, from the three.js
 * examples) that plays its baked Idle animation while its Head bone and body
 * turn toward the cursor ON TOP of the animation. Order matters: the mixer
 * writes bone rotations first each frame (useAnimations' useFrame), then our
 * useFrame adds the look-at offset, so the two layers blend instead of
 * fighting. Emote buttons (or clicking the robot) play one-shot clips that
 * crossfade back to Idle.
 *
 * Swap in any rigged GLB: change the URL, the bone name and the clip names.
 */

const URL = '/models/robot.glb'
const EMOTES = ['Wave', 'Yes', 'No', 'ThumbsUp', 'Jump', 'Dance'] as const

function Robot({ emote, onDone }: { emote: string | null; onDone: () => void }) {
  const group = useRef<THREE.Group>(null!)
  const { scene, animations } = useGLTF(URL)
  const { actions, mixer } = useAnimations(animations, group)
  const pointer = useWindowPointer()
  const look = useRef({ x: 0, y: 0 })
  const head = useMemo(() => {
    let h: THREE.Object3D | undefined
    scene.traverse((o) => {
      if ((o as THREE.Bone).isBone && o.name === 'Head') h = o
    })
    return h
  }, [scene])

  useEffect(() => {
    scene.traverse((o) => {
      if ((o as THREE.Mesh).isMesh) o.castShadow = true
    })
    actions.Idle?.reset().fadeIn(0.3).play()
  }, [actions, scene])

  useEffect(() => {
    if (!emote) return
    const a = actions[emote]
    if (!a) return onDone()
    const loopForever = emote === 'Dance'
    actions.Idle?.fadeOut(0.25)
    a.reset().setLoop(loopForever ? THREE.LoopRepeat : THREE.LoopOnce, loopForever ? Infinity : 1)
    a.clampWhenFinished = true
    a.fadeIn(0.25).play()
    const back = () => {
      a.fadeOut(0.3)
      actions.Idle?.reset().fadeIn(0.3).play()
      onDone()
    }
    const t = loopForever ? window.setTimeout(back, 4000) : 0
    const fin = (e: { action: THREE.AnimationAction }) => e.action === a && back()
    if (!loopForever) mixer.addEventListener('finished', fin)
    return () => {
      clearTimeout(t)
      mixer.removeEventListener('finished', fin)
    }
  }, [emote, actions, mixer, onDone])

  const tmp = useMemo(() => ({ parent: new THREE.Quaternion(), offset: new THREE.Quaternion(), euler: new THREE.Euler(0, 0, 0, 'YXZ') }), [])

  useFrame((_, dt) => {
    const d = THREE.MathUtils.damp
    look.current.x = d(look.current.x, pointer.current.x, 5, dt)
    look.current.y = d(look.current.y, pointer.current.y, 5, dt)
    group.current.rotation.y = d(group.current.rotation.y, look.current.x * 0.35, 3, dt)
    if (head?.parent) {
      // Build the look offset in WORLD space (yaw about world-up, pitch about world-right)
      // then convert to the bone's local frame: local = parentWorld⁻¹ · worldOffset · parentWorld.
      // Works for any rig, whatever direction its bones' local axes point.
      head.parent.updateWorldMatrix(true, false)
      head.parent.getWorldQuaternion(tmp.parent)
      tmp.offset.setFromEuler(tmp.euler.set(-look.current.y * 0.45, look.current.x * 0.75 - group.current.rotation.y, 0))
      tmp.offset.premultiply(tmp.parent.clone().invert()).multiply(tmp.parent)
      head.quaternion.premultiply(tmp.offset)
    }
  })

  return (
    <group ref={group} position={[0, -1.85, 0]} scale={0.68}>
      <primitive object={scene} />
    </group>
  )
}

export function RobotMascot({ className = 'h-96' }: { className?: string }) {
  const [emote, setEmote] = useState<string | null>(null)
  const [queued, setQueued] = useState<string | null>(null)
  useEffect(() => {
    if (queued && !emote) {
      setEmote(queued)
      setQueued(null)
    }
  }, [queued, emote])
  return (
    <div className="relative">
      <div className={`${className} cursor-pointer`} role="img" aria-label="Animated 3D robot that looks at your cursor" onClick={() => !emote && setEmote('Wave')}>
        <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 0.2, 6], fov: 35 }} shadows>
          <hemisphereLight args={['#ffffff', '#44403c', 1.2]} />
          <directionalLight position={[3, 5, 4]} intensity={2.2} castShadow />
          <Suspense fallback={null}>
            <Robot emote={emote} onDone={() => setEmote(null)} />
          </Suspense>
          <ContactShadows position={[0, -1.85, 0]} opacity={0.5} scale={6} blur={2.2} far={3} />
        </Canvas>
      </div>
      <div className="absolute inset-x-0 bottom-3 flex flex-wrap justify-center gap-1.5">
        {EMOTES.map((e) => (
          <button
            key={e}
            disabled={reducedMotion() && e === 'Dance'}
            onClick={() => (emote ? setQueued(e) : setEmote(e))}
            aria-pressed={emote === e}
            className={`rounded-full px-2.5 py-1 text-xs backdrop-blur ${emote === e ? 'bg-fg text-bg' : 'bg-surface/80 text-fg-muted hover:text-fg'}`}
          >
            {e}
          </button>
        ))}
      </div>
    </div>
  )
}

useGLTF.preload(URL)

export default function RobotMascotDemo() {
  return <RobotMascot />
}
```

# Fox that chases the cursor
> A rigged fox runs, walks and idles toward the cursor's point on a floor (raycast to ground plane), turning along the shortest angle and crossfading its baked clips.
- **Category:** 3D Motion
- **Slug:** fox-follow
- **Tags:** three.js, gltf, character, follow cursor, raycast, locomotion, animation blending
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook), public/models/fox.glb
- **Live demo:** https://ui-lab-weld.vercel.app/#/fox-follow
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/FoxFollow.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/FoxFollow.tsx

## When to use
- Playful 404 / game / pet brand pages
- Anything where a character should roam a scene

## Accessibility

Canvas labelled; stays in Survey (no locomotion) under reduced motion. Model: Khronos Fox.glb, model CC0, rig/animation CC-BY 4.0 (credit tomkranis, @AsoboStudio, @scurest).


## Source
`src/patterns/motion3d/FoxFollow.tsx`
```tsx
import { Suspense, useEffect, useMemo, useRef } from 'react'
import { Canvas, useFrame, useThree } from '@react-three/fiber'
import { useAnimations, useGLTF } from '@react-three/drei'
import * as THREE from 'three'
import { reducedMotion } from './_pointer'

/*
 * A fox that chases the cursor around a floor. Each frame the pointer is
 * raycast onto the ground plane (y = 0) to get a world-space target; the fox
 * turns toward it along the shortest angle, moves at walk or run speed
 * depending on distance, and crossfades between its baked Survey / Walk /
 * Run clips. Its head bone also glances at the target.
 *
 * Model: Fox.glb from Khronos glTF-Sample-Assets. Model CC0 (PixelMannen),
 * rigging & animation CC-BY 4.0 (tomkranis, @AsoboStudio, @scurest).
 */

const URL = '/models/fox.glb'
const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)

function Fox() {
  const root = useRef<THREE.Group>(null!)
  const { scene, animations } = useGLTF(URL)
  const { actions } = useAnimations(animations, root)
  const { camera, pointer, raycaster } = useThree()
  const target = useRef(new THREE.Vector3())
  const current = useRef<'Survey' | 'Walk' | 'Run'>('Survey')
  const head = useMemo(() => scene.getObjectByName('b_Head_05'), [scene])
  const still = reducedMotion()

  useEffect(() => {
    actions.Survey?.play()
  }, [actions])

  const swap = (next: 'Survey' | 'Walk' | 'Run') => {
    if (current.current === next) return
    actions[current.current]?.fadeOut(0.25)
    actions[next]?.reset().fadeIn(0.25).play()
    current.current = next
  }

  useFrame((_, dt) => {
    raycaster.setFromCamera(pointer, camera)
    raycaster.ray.intersectPlane(plane, target.current)
    target.current.clamp(new THREE.Vector3(-4, 0, -2.5), new THREE.Vector3(4, 0, 2.5))
    const pos = root.current.position
    const to = target.current.clone().sub(pos)
    const dist = to.length()
    if (dist > 0.3) {
      const want = Math.atan2(to.x, to.z)
      let diff = want - root.current.rotation.y
      diff = Math.atan2(Math.sin(diff), Math.cos(diff))
      root.current.rotation.y += diff * Math.min(1, dt * 6)
      const running = dist > 2.2 && !still
      const speed = still ? 0 : running ? 3.2 : 1.2
      pos.addScaledVector(to.normalize(), Math.min(dist, speed * dt))
      swap(still ? 'Survey' : running ? 'Run' : 'Walk')
    } else swap('Survey')
    if (head) head.rotation.y += THREE.MathUtils.clamp(Math.atan2(to.x, to.z) - root.current.rotation.y, -0.6, 0.6) * 0.5
  })

  return (
    <group ref={root}>
      <primitive object={scene} scale={0.026} />
    </group>
  )
}

export function FoxFollow({ className = 'h-96' }: { className?: string }) {
  return (
    <div className={className} role="img" aria-label="3D fox that walks and runs toward the cursor on a floor">
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 4.2, 6], fov: 40 }} onCreated={({ camera }) => camera.lookAt(0, 0, 0)}>
        <color attach="background" args={['#0f1a14']} />
        <fog attach="fog" args={['#0f1a14', 8, 16]} />
        <hemisphereLight args={['#fef3c7', '#14532d', 1.4]} />
        <directionalLight position={[4, 8, 3]} intensity={1.6} />
        <mesh rotation={[-Math.PI / 2, 0, 0]}>
          <planeGeometry args={[30, 30]} />
          <meshStandardMaterial color="#1f3d2b" roughness={1} />
        </mesh>
        <gridHelper args={[30, 30, '#2f5a40', '#24452f']} position={[0, 0.01, 0]} />
        <Suspense fallback={null}>
          <Fox />
        </Suspense>
      </Canvas>
    </div>
  )
}

useGLTF.preload(URL)

export default function FoxFollowDemo() {
  return (
    <div>
      <FoxFollow />
      <p className="mt-2 text-center font-mono text-xs text-fg-muted">move the cursor over the field · far = run, near = walk</p>
    </div>
  )
}
```

# Instanced ripple grid
> 1,600 cubes in one draw call rise and brighten around the cursor; clicking fires a shockwave ring across the field.
- **Category:** 3D Motion
- **Slug:** ripple-grid
- **Tags:** three.js, instancedmesh, grid, ripple, shockwave, cursor, wave
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/ripple-grid
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/RippleGrid.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/RippleGrid.tsx

## When to use
- Tech / data / AI heroes
- Interactive section backgrounds

## Accessibility

Decorative canvas with label; ambient swell stops under reduced motion.


## Source
`src/patterns/motion3d/RippleGrid.tsx`
```tsx
import { useMemo, useRef } from 'react'
import { Canvas, useFrame, useThree } from '@react-three/fiber'
import * as THREE from 'three'
import { reducedMotion } from './_pointer'

/*
 * 1,600 cubes in ONE draw call (InstancedMesh). Cubes near the cursor rise
 * and brighten (Gaussian falloff of distance to the pointer on the floor),
 * and clicking sends a ring-shaped shockwave across the grid. Each frame
 * writes every instance's matrix and colour; heights are eased so the
 * surface behaves like liquid.
 */

const N = 40
const GAP = 0.26

function Grid() {
  const mesh = useRef<THREE.InstancedMesh>(null!)
  const { camera, pointer, raycaster, clock } = useThree()
  const heights = useMemo(() => new Float32Array(N * N), [])
  const hit = useRef(new THREE.Vector3(99, 0, 99))
  const waves = useRef<{ x: number; z: number; t: number }[]>([])
  const m = useMemo(() => new THREE.Matrix4(), [])
  const c = useMemo(() => new THREE.Color(), [])
  const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), [])
  const low = useMemo(() => new THREE.Color('#1e1b4b'), [])
  const high = useMemo(() => new THREE.Color('#c7d2fe'), [])
  const still = reducedMotion()

  useFrame((s, dt) => {
    raycaster.setFromCamera(pointer, camera)
    raycaster.ray.intersectPlane(plane, hit.current)
    const t = s.clock.elapsedTime
    waves.current = waves.current.filter((w) => t - w.t < 3)
    for (let i = 0; i < N; i++) {
      for (let j = 0; j < N; j++) {
        const k = i * N + j
        const x = (i - N / 2) * GAP
        const z = (j - N / 2) * GAP
        const d2 = (x - hit.current.x) ** 2 + (z - hit.current.z) ** 2
        let target = Math.exp(-d2 / 0.9) * 1.4
        for (const w of waves.current) {
          const age = t - w.t
          const r = Math.hypot(x - w.x, z - w.z)
          target += Math.exp(-((r - age * 4) ** 2) / 0.15) * 0.9 * (1 - age / 3)
        }
        if (!still) target += Math.sin(x * 1.3 + t) * Math.cos(z * 1.1 + t * 0.8) * 0.06
        heights[k] = THREE.MathUtils.damp(heights[k], target, 8, dt)
        const h = 0.08 + Math.max(0, heights[k])
        m.makeScale(1, h, 1).setPosition(x, h / 2, z)
        mesh.current.setMatrixAt(k, m)
        mesh.current.setColorAt(k, c.copy(low).lerp(high, Math.min(1, heights[k] / 1.2)))
      }
    }
    mesh.current.instanceMatrix.needsUpdate = true
    if (mesh.current.instanceColor) mesh.current.instanceColor.needsUpdate = true
  })

  return (
    <instancedMesh
      ref={mesh}
      args={[undefined, undefined, N * N]}
      onClick={(e) => waves.current.push({ x: e.point.x, z: e.point.z, t: clock.elapsedTime })}
    >
      <boxGeometry args={[GAP * 0.86, 1, GAP * 0.86]} />
      <meshStandardMaterial roughness={0.35} metalness={0.2} />
    </instancedMesh>
  )
}

export default function RippleGrid() {
  return (
    <div className="h-96 cursor-crosshair rounded-xl bg-[#0b0a1a]" role="img" aria-label="Grid of 3D cubes that rise around the cursor and ripple on click">
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 6, 7], fov: 40 }} onCreated={({ camera }) => camera.lookAt(0, 0, 0)}>
        <ambientLight intensity={0.4} />
        <directionalLight position={[3, 8, 2]} intensity={2} />
        <pointLight position={[-4, 3, 3]} intensity={20} color="#f472b6" />
        <Grid />
      </Canvas>
    </div>
  )
}
```

# Cursor water ripples
> A shader-displaced water plane: expanding rings drop along the cursor path (16-drop ring buffer), normals from finite differences catch the light.
- **Category:** 3D Motion
- **Slug:** water-surface
- **Tags:** three.js, shader, glsl, water, ripple, vertex displacement, cursor
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/water-surface
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/WaterSurface.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/WaterSurface.tsx

## When to use
- Wellness / travel / beverage brands
- Calm interactive backgrounds

## Accessibility

Decorative canvas with label; ambient swell off under reduced motion.


## Source
`src/patterns/motion3d/WaterSurface.tsx`
```tsx
import { useMemo, useRef } from 'react'
import { Canvas, useFrame, useThree } from '@react-three/fiber'
import * as THREE from 'three'
import { reducedMotion } from './_pointer'

/*
 * Liquid surface: a dense plane whose vertices are displaced in a vertex
 * shader by expanding rings dropped along the cursor's path (a ring buffer
 * of 16 drops passed as uniforms) plus gentle ambient swell. Normals are
 * recomputed in-shader from finite differences, so light glints off the
 * crests. One draw call, no simulation textures.
 */

const DROPS = 16

const vert = /* glsl */ `
uniform float uTime; uniform vec3 uDrops[${DROPS}]; uniform float uCalm;
varying vec3 vN; varying float vH;
float h(vec2 p){
  float y = uCalm * (sin(p.x*1.4 + uTime*0.8)*0.05 + cos(p.y*1.7 + uTime*0.6)*0.05);
  for (int i = 0; i < ${DROPS}; i++) {
    vec3 d = uDrops[i];
    float age = uTime - d.z;
    if (age < 0.0 || age > 4.0) continue;
    float r = distance(p, d.xy);
    float front = age * 2.2;
    y += sin((r - front) * 7.0) * exp(-pow(r - front, 2.0) * 2.0) * 0.32 * (1.0 - age / 4.0);
  }
  return y;
}
void main(){
  vec3 p = position;
  float e = 0.03;
  float y = h(p.xy);
  vec3 dx = vec3(e, 0.0, h(p.xy + vec2(e, 0.0)) - y);
  vec3 dy = vec3(0.0, e, h(p.xy + vec2(0.0, e)) - y);
  vN = normalize(normalMatrix * cross(dx, dy));
  vH = y;
  p.z += y;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(p, 1.0);
}`

const frag = /* glsl */ `
varying vec3 vN; varying float vH;
void main(){
  vec3 L = normalize(vec3(0.4, 0.8, 0.6));
  float diff = max(dot(vN, L), 0.0);
  float spec = pow(max(dot(reflect(-L, vN), normalize(vec3(0.0, 0.5, 1.0))), 0.0), 24.0);
  vec3 deep = vec3(0.02, 0.09, 0.2), shallow = vec3(0.1, 0.55, 0.75);
  vec3 col = mix(deep, shallow, 0.15 + diff * 0.45 + vH * 2.2) + spec * 1.1;
  gl_FragColor = vec4(col, 1.0);
}`

function Water() {
  const { camera, pointer, raycaster, clock } = useThree()
  const mat = useRef<THREE.ShaderMaterial>(null!)
  const mesh = useRef<THREE.Mesh>(null!)
  const uniforms = useMemo(
    () => ({ uTime: { value: 0 }, uCalm: { value: reducedMotion() ? 0 : 1 }, uDrops: { value: Array.from({ length: DROPS }, () => new THREE.Vector3(0, 0, -99)) } }),
    [],
  )
  const idx = useRef(0)
  const last = useRef(new THREE.Vector2(99, 99))
  useFrame(() => {
    uniforms.uTime.value = clock.elapsedTime
    raycaster.setFromCamera(pointer, camera)
    const hit = raycaster.intersectObject(mesh.current)[0]
    if (hit?.uv) {
      const local = mesh.current.worldToLocal(hit.point.clone())
      if (last.current.distanceTo(new THREE.Vector2(local.x, local.y)) > 0.35) {
        last.current.set(local.x, local.y)
        uniforms.uDrops.value[idx.current++ % DROPS].set(local.x, local.y, clock.elapsedTime)
      }
    }
  })
  return (
    <mesh ref={mesh} rotation={[-Math.PI / 2, 0, 0]}>
      <planeGeometry args={[14, 10, 260, 180]} />
      <shaderMaterial ref={mat} vertexShader={vert} fragmentShader={frag} uniforms={uniforms} />
    </mesh>
  )
}

export default function WaterSurface() {
  return (
    <div className="h-96 cursor-crosshair overflow-hidden rounded-xl bg-[#020617]" role="img" aria-label="Water surface that ripples behind the cursor">
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 4.5, 3.5], fov: 45 }} onCreated={({ camera }) => camera.lookAt(0, 0, 0)}>
        <Water />
      </Canvas>
    </div>
  )
}
```

# Cursor torchlight on 3D tiles
> A relief wall of randomly deep tiles lit only by a warm point light that follows the cursor, raking shadows across every edge.
- **Category:** 3D Motion
- **Slug:** cursor-light-tiles
- **Tags:** three.js, lighting, point light, relief, tiles, instancedmesh, cursor
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/cursor-light-tiles
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/CursorLightTiles.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/CursorLightTiles.tsx

## When to use
- Architecture / luxury / mysterious teasers
- Dark hero sections with texture

## Accessibility

Decorative canvas with label; the light only moves with the pointer (no autonomous motion).


## Source
`src/patterns/motion3d/CursorLightTiles.tsx`
```tsx
import { useMemo, useRef } from 'react'
import { Canvas, useFrame, useThree } from '@react-three/fiber'
import * as THREE from 'three'

/*
 * A wall of bevelled tiles with random depths, lit only by a warm point
 * light that follows the cursor a little in front of the wall. Moving the
 * cursor rakes the light across the relief so every tile edge catches and
 * casts, like torchlight on stone. Tiles are one InstancedMesh; a faint
 * ambient keeps the unlit side readable.
 */

const COLS = 26
const ROWS = 14
const S = 0.34

function Wall() {
  const mesh = useRef<THREE.InstancedMesh>(null!)
  const light = useRef<THREE.PointLight>(null!)
  const { camera, pointer, raycaster } = useThree()
  const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 0, 1), -0.6), [])
  const hit = useMemo(() => new THREE.Vector3(), [])
  const ready = useRef(false)

  useFrame((_, dt) => {
    if (!ready.current) {
      const m = new THREE.Matrix4()
      const q = new THREE.Quaternion()
      for (let i = 0; i < COLS * ROWS; i++) {
        const x = ((i % COLS) - COLS / 2 + 0.5) * S
        const y = (Math.floor(i / COLS) - ROWS / 2 + 0.5) * S
        const depth = 0.05 + Math.random() * 0.35
        q.setFromEuler(new THREE.Euler((Math.random() - 0.5) * 0.15, (Math.random() - 0.5) * 0.15, 0))
        m.compose(new THREE.Vector3(x, y, depth / 2), q, new THREE.Vector3(1, 1, depth / 0.3))
        mesh.current.setMatrixAt(i, m)
      }
      mesh.current.instanceMatrix.needsUpdate = true
      ready.current = true
    }
    raycaster.setFromCamera(pointer, camera)
    raycaster.ray.intersectPlane(plane, hit)
    const p = light.current.position
    p.x = THREE.MathUtils.damp(p.x, hit.x, 10, dt)
    p.y = THREE.MathUtils.damp(p.y, hit.y, 10, dt)
  })

  return (
    <>
      <instancedMesh ref={mesh} args={[undefined, undefined, COLS * ROWS]}>
        <boxGeometry args={[S * 0.92, S * 0.92, 0.3]} />
        <meshStandardMaterial color="#d6d3d1" roughness={0.55} metalness={0.05} />
      </instancedMesh>
      <pointLight ref={light} position={[0, 0, 0.9]} intensity={6} distance={4} decay={1.4} color="#fdba74" />
    </>
  )
}

export default function CursorLightTiles() {
  return (
    <div className="h-96 cursor-none overflow-hidden rounded-xl bg-black" role="img" aria-label="Relief wall of tiles lit by a light that follows the cursor">
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 0, 5], fov: 45 }}>
        <ambientLight intensity={0.04} />
        <Wall />
      </Canvas>
    </div>
  )
}
```

# Curved WebGL photo gallery
> Photos wrap around the inside of a cylinder; drag or wheel to spin with inertia; the hovered photo ripples out from the pointer in a vertex shader.
- **Category:** 3D Motion
- **Slug:** curved-gallery
- **Tags:** three.js, webgl gallery, cylinder, images, shader, ripple, drag
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/curved-gallery
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/CurvedGallery.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/CurvedGallery.tsx

## When to use
- Portfolio / photography / lookbook heroes
- Immersive galleries

## Accessibility

Canvas labelled; idle drift stops under reduced motion; images decorative.


## Source
`src/patterns/motion3d/CurvedGallery.tsx`
```tsx
import { useMemo, useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import * as THREE from 'three'
import { reducedMotion } from './_pointer'

/*
 * WebGL image gallery on the inside of a cylinder: photo planes wrap around
 * the viewer; drag/wheel spins the ring with inertia; the hovered photo
 * ripples outward from the pointer (vertex shader) and brightens. Each image
 * is a textured, subdivided plane with its own uniforms.
 */

const COUNT = 12
const R = 4.2
const SRCS = Array.from({ length: COUNT }, (_, i) => `/img/${(i * 3) % 48}.webp`)

const vert = /* glsl */ `
uniform float uHover; uniform vec2 uPoint; uniform float uTime;
varying vec2 vUv;
void main(){
  vUv = uv;
  vec3 p = position;
  float d = distance(uv, uPoint);
  p.z += sin(d * 22.0 - uTime * 6.0) * 0.06 * uHover * exp(-d * 3.0);
  gl_Position = projectionMatrix * modelViewMatrix * vec4(p, 1.0);
}`
const frag = /* glsl */ `
uniform sampler2D uTex; uniform float uHover;
varying vec2 vUv;
void main(){
  vec4 c = texture2D(uTex, vUv);
  gl_FragColor = vec4(c.rgb * (0.72 + uHover * 0.35), 1.0);
}`

function Photo({ tex, angle }: { tex: THREE.Texture; angle: number }) {
  const mat = useRef<THREE.ShaderMaterial>(null!)
  const [hover, setHover] = useState(false)
  const uniforms = useMemo(() => ({ uTex: { value: tex }, uHover: { value: 0 }, uPoint: { value: new THREE.Vector2(0.5, 0.5) }, uTime: { value: 0 } }), [tex])
  useFrame((s, dt) => {
    uniforms.uTime.value = s.clock.elapsedTime
    uniforms.uHover.value = THREE.MathUtils.damp(uniforms.uHover.value, hover ? 1 : 0, 6, dt)
  })
  return (
    <mesh
      position={[Math.sin(angle) * R, 0, -Math.cos(angle) * R]}
      rotation={[0, -angle, 0]}
      onPointerMove={(e) => e.uv && uniforms.uPoint.value.copy(e.uv)}
      onPointerOver={() => setHover(true)}
      onPointerOut={() => setHover(false)}
    >
      <planeGeometry args={[1.6, 2.1, 32, 32]} />
      <shaderMaterial ref={mat} vertexShader={vert} fragmentShader={frag} uniforms={uniforms} side={THREE.DoubleSide} />
    </mesh>
  )
}

function Ring({ spin }: { spin: React.MutableRefObject<{ v: number; a: number }> }) {
  // Non-suspending load: textures exist immediately and fill in when each image arrives.
  const texs = useMemo(() => {
    const loader = new THREE.TextureLoader()
    return SRCS.map((src) => {
      const t = loader.load(src)
      t.colorSpace = THREE.SRGBColorSpace
      return t
    })
  }, [])
  const g = useRef<THREE.Group>(null!)
  const still = reducedMotion()
  useFrame((_, dt) => {
    spin.current.v *= 0.94
    spin.current.a += spin.current.v + (still ? 0 : dt * 0.06)
    g.current.rotation.y = spin.current.a
  })
  return (
    <group ref={g}>
      {texs.map((t, i) => (
        <Photo key={i} tex={t} angle={(i / COUNT) * Math.PI * 2} />
      ))}
    </group>
  )
}

export default function CurvedGallery() {
  const spin = useRef({ v: 0, a: 0 })
  const drag = useRef<number | null>(null)
  return (
    <div
      className="h-96 cursor-grab touch-pan-y overflow-hidden rounded-xl bg-black active:cursor-grabbing"
      role="img"
      aria-label="Photos wrapped around a 3D cylinder; drag to spin"
      onPointerDown={(e) => (drag.current = e.clientX)}
      onPointerMove={(e) => {
        if (drag.current === null) return
        spin.current.v = (e.clientX - drag.current) * 0.0025
        drag.current = e.clientX
      }}
      onPointerUp={() => (drag.current = null)}
      onPointerLeave={() => (drag.current = null)}
      onWheel={(e) => (spin.current.v += e.deltaY * 0.00015)}
    >
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 0, 0.01], fov: 70 }}>
        <Ring spin={spin} />
      </Canvas>
    </div>
  )
}
```

# Cursor square lens
> Greyscale photo with a square colour lens following the cursor: magnified, RGB-split at the edges, outlined. One fragment shader.
- **Category:** 3D Motion
- **Slug:** square-lens
- **Tags:** shader, lens, rgb shift, cursor, image reveal, magnify
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook), public/img/*.webp
- **Live demo:** https://ui-lab-weld.vercel.app/#/square-lens
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/SquareLens.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/SquareLens.tsx

## When to use
- Photography / portfolio heroes
- Reveal-on-hover product imagery

## Accessibility

Canvas labelled; the full image is not information-bearing; lens only follows the pointer.


## Source
`src/patterns/motion3d/SquareLens.tsx`
```tsx
import { useMemo } from 'react'
import { Canvas, useFrame, useThree } from '@react-three/fiber'
import * as THREE from 'three'

/*
 * Cursor lens: the picture is shown greyscale and dim everywhere except a
 * square lens that follows the cursor, where it is full colour, slightly
 * magnified, RGB-split at the edges and outlined. One full-screen quad, one
 * fragment shader; the lens position eases toward the pointer each frame.
 */

const frag = /* glsl */ `
uniform sampler2D uTex; uniform vec2 uMouse; uniform float uAspect; uniform float uTime;
varying vec2 vUv;
void main(){
  vec2 d = (vUv - uMouse) * vec2(uAspect, 1.0);
  float size = 0.17;
  float box = max(abs(d.x), abs(d.y));
  float inside = 1.0 - smoothstep(size - 0.004, size, box);
  float edge = smoothstep(size - 0.012, size - 0.004, box) * inside;
  vec2 zoomUv = uMouse + (vUv - uMouse) * 0.75;
  float shift = 0.004 + edge * 0.02;
  vec3 lens = vec3(texture2D(uTex, zoomUv + vec2(shift, 0.)).r, texture2D(uTex, zoomUv).g, texture2D(uTex, zoomUv - vec2(shift, 0.)).b);
  vec3 base = texture2D(uTex, vUv).rgb;
  float g = dot(base, vec3(0.299, 0.587, 0.114)) * 0.55;
  vec3 col = mix(vec3(g), lens, inside) + edge * 0.6;
  gl_FragColor = vec4(col, 1.0);
}`
const vert = /* glsl */ `varying vec2 vUv; void main(){ vUv = uv; gl_Position = vec4(position.xy, 0., 1.); }`

function Lens() {
  const { pointer, size } = useThree()
  const tex = useMemo(() => {
    const t = new THREE.TextureLoader().load('/img/7.webp')
    t.colorSpace = THREE.SRGBColorSpace
    return t
  }, [])
  const uniforms = useMemo(() => ({ uTex: { value: tex }, uMouse: { value: new THREE.Vector2(0.5, 0.5) }, uAspect: { value: 1 }, uTime: { value: 0 } }), [tex])
  useFrame((s, dt) => {
    uniforms.uAspect.value = size.width / size.height
    uniforms.uTime.value = s.clock.elapsedTime
    const m = uniforms.uMouse.value
    m.x = THREE.MathUtils.damp(m.x, pointer.x * 0.5 + 0.5, 10, dt)
    m.y = THREE.MathUtils.damp(m.y, pointer.y * 0.5 + 0.5, 10, dt)
  })
  return (
    <mesh frustumCulled={false}>
      <planeGeometry args={[2, 2]} />
      <shaderMaterial vertexShader={vert} fragmentShader={frag} uniforms={uniforms} />
    </mesh>
  )
}

export default function SquareLens() {
  return (
    <div className="h-96 cursor-none overflow-hidden rounded-xl" role="img" aria-label="Greyscale photo with a colour lens square following the cursor">
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]}>
        <Lens />
      </Canvas>
    </div>
  )
}
```

# Swinging lanyard badge
> A conference badge hangs on a Verlet-rope lanyard, swings with inertia, and can be grabbed and flung. No physics library.
- **Category:** 3D Motion
- **Slug:** lanyard-badge
- **Tags:** verlet, rope, physics, badge, drag, swing
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/lanyard-badge
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/LanyardBadge.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/LanyardBadge.tsx

## When to use
- Event / conference / team pages
- Playful 'about me' heroes

## Accessibility

Canvas labelled; the card content should also exist as text on a real page.


## Source
`src/patterns/motion3d/LanyardBadge.tsx`
```tsx
import { useEffect, useMemo, useRef } from 'react'
import { Canvas, useFrame, useThree } from '@react-three/fiber'
import { RoundedBox } from '@react-three/drei'
import * as THREE from 'three'

/*
 * Hanging conference badge on a lanyard. The strap is a Verlet rope (12
 * points, distance constraints solved a few times per frame); the card hangs
 * from the last point and swings with gravity and inertia. Grab the card and
 * fling it: it follows the pointer on the z=0 plane while dragged, then the
 * rope physics takes over. No physics library.
 */

const SEG = 12
const LEN = 0.17

function badgeTexture() {
  const c = document.createElement('canvas')
  c.width = 512
  c.height = 720
  const g = c.getContext('2d')!
  const grd = g.createLinearGradient(0, 0, 512, 720)
  grd.addColorStop(0, '#312e81')
  grd.addColorStop(1, '#0f172a')
  g.fillStyle = grd
  g.fillRect(0, 0, 512, 720)
  g.fillStyle = '#c7d2fe'
  g.font = '600 34px system-ui'
  g.fillText('UI LAB CONF 2026', 40, 80)
  g.fillStyle = '#ffffff'
  g.font = 'bold 92px Georgia, serif'
  g.fillText('Harsh', 40, 470)
  g.font = '40px system-ui'
  g.fillStyle = '#a5b4fc'
  g.fillText('Speaker · Frontend', 40, 530)
  g.fillStyle = '#818cf8'
  g.beginPath()
  g.arc(256, 260, 110, 0, Math.PI * 2)
  g.fill()
  const t = new THREE.CanvasTexture(c)
  t.colorSpace = THREE.SRGBColorSpace
  return t
}

function Badge() {
  const tex = useMemo(badgeTexture, [])
  const pts = useMemo(() => Array.from({ length: SEG }, (_, i) => ({ p: new THREE.Vector3(0, 2 - i * LEN, 0), o: new THREE.Vector3(0, 2 - i * LEN, 0) })), [])
  const card = useRef<THREE.Group>(null!)
  const line = useMemo(() => new THREE.Line(new THREE.BufferGeometry(), new THREE.LineBasicMaterial({ color: '#f472b6' })), [])
  const dragging = useRef(false)
  const { camera, pointer, raycaster } = useThree()
  const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 0, 1), 0), [])
  const hit = useMemo(() => new THREE.Vector3(), [])
  useEffect(() => {
    const up = () => (dragging.current = false)
    addEventListener('pointerup', up)
    return () => removeEventListener('pointerup', up)
  }, [])

  useFrame((_, dt) => {
    const step = Math.min(dt, 1 / 30)
    for (let i = 1; i < SEG; i++) {
      const pt = pts[i]
      const v = pt.p.clone().sub(pt.o).multiplyScalar(0.985)
      pt.o.copy(pt.p)
      pt.p.add(v).add(new THREE.Vector3(0, -9.8 * step * step, 0))
    }
    if (dragging.current) {
      raycaster.setFromCamera(pointer, camera)
      raycaster.ray.intersectPlane(plane, hit)
      pts[SEG - 1].p.lerp(hit, 0.5)
    }
    for (let k = 0; k < 6; k++) {
      pts[0].p.set(0, 2, 0)
      for (let i = 0; i < SEG - 1; i++) {
        const a = pts[i].p, b = pts[i + 1].p
        const delta = b.clone().sub(a)
        const diff = (delta.length() - LEN) / delta.length()
        const off = delta.multiplyScalar(0.5 * diff)
        if (i > 0) a.add(off)
        b.sub(off)
      }
    }
    line.geometry.setFromPoints(pts.map((x) => x.p))
    const end = pts[SEG - 1].p
    const prev = pts[SEG - 2].p
    card.current.position.copy(end)
    card.current.rotation.z = Math.atan2(end.x - prev.x, prev.y - end.y)
    card.current.rotation.y = THREE.MathUtils.damp(card.current.rotation.y, (end.x - pts[SEG - 1].o.x) * 8, 4, dt)
  })

  return (
    <>
      <primitive object={line} />
      <group ref={card}>
        <group position={[0, -0.75, 0]} onPointerDown={(e) => { e.stopPropagation(); dragging.current = true }}>
          <RoundedBox args={[1.05, 1.48, 0.03]} radius={0.06}>
            <meshPhysicalMaterial color="#1e1b4b" clearcoat={1} roughness={0.3} />
          </RoundedBox>
          <mesh position={[0, 0, 0.017]}>
            <planeGeometry args={[0.98, 1.38]} />
            <meshStandardMaterial map={tex} roughness={0.5} />
          </mesh>
          <mesh position={[0, 0.78, 0]}>
            <torusGeometry args={[0.06, 0.015, 8, 24]} />
            <meshStandardMaterial color="#d4d4d8" metalness={1} roughness={0.2} />
          </mesh>
        </group>
      </group>
    </>
  )
}

export default function LanyardBadge() {
  return (
    <div className="h-[28rem] cursor-grab touch-none active:cursor-grabbing" role="img" aria-label="Conference badge hanging on a lanyard that swings and can be dragged">
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 0.3, 5], fov: 40 }}>
        <ambientLight intensity={0.6} />
        <directionalLight position={[2, 4, 5]} intensity={2} />
        <Badge />
      </Canvas>
      <p className="-mt-6 text-center font-mono text-xs text-fg-muted">grab the badge and fling it</p>
    </div>
  )
}
```

# Raymarched metaballs
> Iridescent liquid blobs merge and split (smooth-min SDFs); one blob follows the cursor. Single full-screen shader.
- **Category:** 3D Motion
- **Slug:** metaballs
- **Tags:** raymarching, sdf, metaballs, shader, liquid, iridescent
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/metaballs
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/Metaballs.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/Metaballs.tsx

## When to use
- AI / music / creative heroes
- Ambient interactive backgrounds

## Accessibility

Decorative canvas with label; motion stops under reduced motion.


## Source
`src/patterns/motion3d/Metaballs.tsx`
```tsx
import { useMemo } from 'react'
import { Canvas, useFrame, useThree } from '@react-three/fiber'
import * as THREE from 'three'
import { reducedMotion } from './_pointer'

/*
 * Raymarched metaballs: six blobs orbit lazily and one follows the cursor;
 * where they meet they melt together (smooth-min of sphere SDFs). Lit with a
 * fresnel rim and an iridescent palette. Everything happens in one fragment
 * shader on a full-screen quad, so it scales to any size at constant cost.
 */

const frag = /* glsl */ `
precision highp float;
uniform vec2 uRes; uniform float uTime; uniform vec2 uMouse;
float smin(float a, float b, float k){ float h = clamp(0.5 + 0.5*(b-a)/k, 0., 1.); return mix(b, a, h) - k*h*(1.-h); }
float map(vec3 p){
  float d = length(p - vec3(uMouse * vec2(2.2, 1.3), 0.)) - 0.55;
  for (int i = 0; i < 6; i++) {
    float fi = float(i);
    vec3 c = vec3(sin(uTime*0.5 + fi*1.7)*1.6, cos(uTime*0.4 + fi*2.3)*0.9, sin(uTime*0.3 + fi)*0.6);
    d = smin(d, length(p - c) - (0.35 + 0.08*sin(fi*3.)), 0.55);
  }
  return d;
}
vec3 normal(vec3 p){ vec2 e = vec2(0.002, 0.); return normalize(vec3(map(p+e.xyy)-map(p-e.xyy), map(p+e.yxy)-map(p-e.yxy), map(p+e.yyx)-map(p-e.yyx))); }
void main(){
  vec2 uv = (gl_FragCoord.xy - 0.5*uRes) / uRes.y;
  vec3 ro = vec3(0., 0., 4.), rd = normalize(vec3(uv, -1.6));
  float t = 0.; float hit = 0.;
  for (int i = 0; i < 80; i++) { float d = map(ro + rd*t); if (d < 0.001) { hit = 1.; break; } t += d; if (t > 10.) break; }
  vec3 col = vec3(0.03, 0.03, 0.06);
  if (hit > 0.) {
    vec3 p = ro + rd*t; vec3 n = normal(p);
    float fres = pow(1. - max(dot(n, -rd), 0.), 3.);
    vec3 irid = 0.5 + 0.5*cos(6.2831*(vec3(0.0, 0.33, 0.67) + n.y*0.5 + fres + uTime*0.05));
    float diff = max(dot(n, normalize(vec3(0.5, 0.8, 0.6))), 0.);
    col = irid * (0.25 + diff*0.6) + fres*0.8;
  }
  gl_FragColor = vec4(col, 1.);
}`
const vert = /* glsl */ `void main(){ gl_Position = vec4(position.xy, 0., 1.); }`

function Balls() {
  const { pointer, size, gl } = useThree()
  const still = reducedMotion()
  const uniforms = useMemo(() => ({ uRes: { value: new THREE.Vector2() }, uTime: { value: 3 }, uMouse: { value: new THREE.Vector2() } }), [])
  useFrame((_, dt) => {
    uniforms.uRes.value.set(size.width * gl.getPixelRatio(), size.height * gl.getPixelRatio())
    if (!still) uniforms.uTime.value += dt
    uniforms.uMouse.value.lerp(new THREE.Vector2(pointer.x, pointer.y), 0.12)
  })
  return (
    <mesh frustumCulled={false}>
      <planeGeometry args={[2, 2]} />
      <shaderMaterial vertexShader={vert} fragmentShader={frag} uniforms={uniforms} />
    </mesh>
  )
}

export default function Metaballs() {
  return (
    <div className="h-96 overflow-hidden rounded-xl" role="img" aria-label="Iridescent liquid metaballs merging, one follows the cursor">
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.25]}>
        <Balls />
      </Canvas>
    </div>
  )
}
```

# Magnetic needle field
> 1,200 needles (one InstancedMesh) turn to point at the cursor like iron filings; nearby ones stand up and glow hot.
- **Category:** 3D Motion
- **Slug:** iron-filings
- **Tags:** instancedmesh, magnet, field, needles, cursor, compass
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/iron-filings
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/IronFilings.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/IronFilings.tsx

## When to use
- Physics / engineering / dev-tool heroes
- Interactive section backgrounds

## Accessibility

Decorative canvas with label; only reacts to the pointer.


## Source
`src/patterns/motion3d/IronFilings.tsx`
```tsx
import { useMemo, useRef } from 'react'
import { Canvas, useFrame, useThree } from '@react-three/fiber'
import * as THREE from 'three'

/*
 * Iron filings / compass field: a grid of 1,200 needles (one InstancedMesh)
 * that all turn to point at the cursor like a magnet, the ones nearby
 * standing up and glowing hot. Each needle's quaternion is built from the
 * direction to the cursor on the floor plane plus a tilt that grows with
 * proximity.
 */

const W = 40
const H = 30
const GAP = 0.22

function Field() {
  const mesh = useRef<THREE.InstancedMesh>(null!)
  const { camera, pointer, raycaster } = useThree()
  const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), [])
  const hit = useMemo(() => new THREE.Vector3(), [])
  const target = useMemo(() => new THREE.Vector3(), [])
  const tmp = useMemo(() => ({ m: new THREE.Matrix4(), q: new THREE.Quaternion(), e: new THREE.Euler(), c: new THREE.Color(), cold: new THREE.Color('#94a3b8'), hot: new THREE.Color('#fb923c') }), [])
  useFrame((_, dt) => {
    raycaster.setFromCamera(pointer, camera)
    raycaster.ray.intersectPlane(plane, hit)
    target.lerp(hit, Math.min(1, dt * 8))
    for (let i = 0; i < W * H; i++) {
      const x = ((i % W) - W / 2) * GAP
      const z = (Math.floor(i / W) - H / 2) * GAP
      const dx = target.x - x, dz = target.z - z
      const d = Math.hypot(dx, dz)
      const yaw = Math.atan2(dx, dz)
      const lift = Math.max(0, 1 - d / 2.2)
      tmp.e.set(Math.PI / 2 - lift * 1.1, yaw, 0, 'YXZ')
      tmp.q.setFromEuler(tmp.e)
      const s = 0.7 + lift * 0.9
      tmp.m.compose(new THREE.Vector3(x, 0.02, z), tmp.q, new THREE.Vector3(1, s, 1))
      mesh.current.setMatrixAt(i, tmp.m)
      mesh.current.setColorAt(i, tmp.c.copy(tmp.cold).lerp(tmp.hot, lift))
    }
    mesh.current.instanceMatrix.needsUpdate = true
    if (mesh.current.instanceColor) mesh.current.instanceColor.needsUpdate = true
  })
  return (
    <instancedMesh ref={mesh} args={[undefined, undefined, W * H]}>
      <coneGeometry args={[0.04, 0.26, 6]} />
      <meshStandardMaterial roughness={0.4} metalness={0.6} />
    </instancedMesh>
  )
}

export default function IronFilings() {
  return (
    <div className="h-96 cursor-crosshair overflow-hidden rounded-xl bg-[#0b0f17]" role="img" aria-label="Field of metal needles that all point toward the cursor like a magnet">
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 3.6, 3], fov: 50 }} onCreated={({ camera }) => camera.lookAt(0, 0, 0)}>
        <ambientLight intensity={0.8} />
        <directionalLight position={[3, 6, 2]} intensity={2} />
        <Field />
      </Canvas>
    </div>
  )
}
```

# Boid flock chasing the cursor
> 220 birds with separation, alignment and cohesion, steering toward the cursor so the swarm chases and swirls.
- **Category:** 3D Motion
- **Slug:** boid-flock
- **Tags:** boids, flocking, swarm, simulation, instancedmesh, cursor
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/boid-flock
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/BoidFlock.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/BoidFlock.tsx

## When to use
- Nature / community / network brands
- Ambient interactive heroes

## Accessibility

Decorative canvas with label; flock barely moves under reduced motion.


## Source
`src/patterns/motion3d/BoidFlock.tsx`
```tsx
import { useMemo, useRef } from 'react'
import { Canvas, useFrame, useThree } from '@react-three/fiber'
import * as THREE from 'three'
import { reducedMotion } from './_pointer'

/*
 * A flock of 220 "birds" (boids: separation, alignment, cohesion) that also
 * steer toward the cursor, so the swarm chases it around and swirls when it
 * stops. Neighbour search is a brute-force O(n²) loop, which is fine at this
 * count. Each boid is a cone in one InstancedMesh, oriented along velocity.
 */

const N = 220

function Flock() {
  const mesh = useRef<THREE.InstancedMesh>(null!)
  const { camera, pointer, raycaster } = useThree()
  const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 0, 1), 0), [])
  const goal = useMemo(() => new THREE.Vector3(), [])
  const boids = useMemo(
    () => Array.from({ length: N }, () => ({ p: new THREE.Vector3((Math.random() - 0.5) * 6, (Math.random() - 0.5) * 3, (Math.random() - 0.5) * 2), v: new THREE.Vector3().randomDirection().multiplyScalar(0.02) })),
    [],
  )
  const tmp = useMemo(() => ({ m: new THREE.Matrix4(), q: new THREE.Quaternion(), up: new THREE.Vector3(0, 1, 0), sep: new THREE.Vector3(), ali: new THREE.Vector3(), coh: new THREE.Vector3(), c: new THREE.Color() }), [])
  const still = reducedMotion()

  useFrame(() => {
    raycaster.setFromCamera(pointer, camera)
    raycaster.ray.intersectPlane(plane, goal)
    for (const b of boids) {
      tmp.sep.set(0, 0, 0); tmp.ali.set(0, 0, 0); tmp.coh.set(0, 0, 0)
      let n = 0
      for (const o of boids) {
        if (o === b) continue
        const d = b.p.distanceTo(o.p)
        if (d < 0.6) {
          n++
          tmp.ali.add(o.v)
          tmp.coh.add(o.p)
          if (d < 0.22) tmp.sep.add(b.p.clone().sub(o.p).divideScalar(d * d + 0.01))
        }
      }
      if (n) {
        b.v.add(tmp.ali.divideScalar(n).sub(b.v).multiplyScalar(0.05))
        b.v.add(tmp.coh.divideScalar(n).sub(b.p).multiplyScalar(0.002))
      }
      b.v.add(tmp.sep.multiplyScalar(0.0008))
      b.v.add(goal.clone().sub(b.p).multiplyScalar(0.0009))
      b.v.z -= b.p.z * 0.002
      b.v.clampLength(0.015, still ? 0.015 : 0.06)
      if (!still) b.p.add(b.v)
    }
    boids.forEach((b, i) => {
      tmp.q.setFromUnitVectors(tmp.up, b.v.clone().normalize())
      tmp.m.compose(b.p, tmp.q, new THREE.Vector3(1, 1, 1))
      mesh.current.setMatrixAt(i, tmp.m)
      mesh.current.setColorAt(i, tmp.c.setHSL(0.55 + b.v.length() * 3, 0.8, 0.6))
    })
    mesh.current.instanceMatrix.needsUpdate = true
    if (mesh.current.instanceColor) mesh.current.instanceColor.needsUpdate = true
  })

  return (
    <instancedMesh ref={mesh} args={[undefined, undefined, N]}>
      <coneGeometry args={[0.04, 0.16, 5]} />
      <meshStandardMaterial roughness={0.5} />
    </instancedMesh>
  )
}

export default function BoidFlock() {
  return (
    <div className="h-96 overflow-hidden rounded-xl bg-gradient-to-b from-[#0c1222] to-[#1e1b4b]" role="img" aria-label="Flock of birds that chases the cursor">
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 0, 6], fov: 50 }}>
        <ambientLight intensity={0.6} />
        <directionalLight position={[3, 5, 4]} intensity={1.5} />
        <Flock />
      </Canvas>
    </div>
  )
}
```

# Spiral galaxy
> 30,000 stars on spiral arms with differential rotation in a vertex shader, tilting toward the cursor.
- **Category:** 3D Motion
- **Slug:** spiral-galaxy
- **Tags:** particles, galaxy, points, shader, space, additive
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/spiral-galaxy
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/SpiralGalaxy.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/SpiralGalaxy.tsx

## When to use
- Space / AI / data products
- 404 and loading screens

## Accessibility

Decorative canvas with label; rotation stops under reduced motion.


## Source
`src/patterns/motion3d/SpiralGalaxy.tsx`
```tsx
import { useMemo, useRef } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import * as THREE from 'three'
import { reducedMotion, useWindowPointer } from './_pointer'

/*
 * Procedural spiral galaxy: 30,000 points distributed along logarithmic-ish
 * arms with randomness that grows toward the rim, coloured from a hot core
 * to a cool edge, additive-blended. It slowly rotates and tilts toward the
 * cursor; a vertex-shader twist makes inner stars orbit faster than outer
 * ones (differential rotation).
 */

const COUNT = 30000
const ARMS = 4

const vert = /* glsl */ `
uniform float uTime; attribute vec3 aColor; varying vec3 vColor;
void main(){
  vec3 p = position;
  float r = length(p.xz);
  float a = atan(p.z, p.x) + uTime * (0.6 / (r + 0.3));
  p.xz = vec2(cos(a), sin(a)) * r;
  vec4 mv = modelViewMatrix * vec4(p, 1.);
  gl_PointSize = 2.2 * (8. / -mv.z);
  gl_Position = projectionMatrix * mv;
  vColor = aColor;
}`
const frag = /* glsl */ `
varying vec3 vColor;
void main(){ float d = length(gl_PointCoord - .5); if (d > .5) discard; gl_FragColor = vec4(vColor, pow(1. - d * 2., 2.)); }`

function Galaxy() {
  const ref = useRef<THREE.Points>(null!)
  const pointer = useWindowPointer()
  const still = reducedMotion()
  const geo = useMemo(() => {
    const pos = new Float32Array(COUNT * 3)
    const col = new Float32Array(COUNT * 3)
    const inside = new THREE.Color('#ffb36b'), outside = new THREE.Color('#4f46e5')
    for (let i = 0; i < COUNT; i++) {
      const r = Math.pow(Math.random(), 1.6) * 5
      const branch = ((i % ARMS) / ARMS) * Math.PI * 2
      const spin = r * 1.1
      const rnd = () => Math.pow(Math.random(), 3) * (Math.random() < 0.5 ? 1 : -1) * 0.35 * (r + 0.4)
      pos[i * 3] = Math.cos(branch + spin) * r + rnd()
      pos[i * 3 + 1] = rnd() * 0.4
      pos[i * 3 + 2] = Math.sin(branch + spin) * r + rnd()
      const c = inside.clone().lerp(outside, r / 5)
      col.set([c.r, c.g, c.b], i * 3)
    }
    const g = new THREE.BufferGeometry()
    g.setAttribute('position', new THREE.BufferAttribute(pos, 3))
    g.setAttribute('aColor', new THREE.BufferAttribute(col, 3))
    return g
  }, [])
  const uniforms = useMemo(() => ({ uTime: { value: 0 } }), [])
  useFrame((_, dt) => {
    if (!still) uniforms.uTime.value += dt * 0.3
    ref.current.rotation.x = THREE.MathUtils.damp(ref.current.rotation.x, 0.5 - pointer.current.y * 0.5, 2, dt)
    ref.current.rotation.z = THREE.MathUtils.damp(ref.current.rotation.z, -pointer.current.x * 0.4, 2, dt)
  })
  return (
    <points ref={ref} geometry={geo}>
      <shaderMaterial vertexShader={vert} fragmentShader={frag} uniforms={uniforms} transparent depthWrite={false} blending={THREE.AdditiveBlending} />
    </points>
  )
}

export default function SpiralGalaxy() {
  return (
    <div className="h-96 overflow-hidden rounded-xl bg-black" role="img" aria-label="Rotating spiral galaxy of thirty thousand stars, tilting toward the cursor">
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 3, 7], fov: 50 }} onCreated={({ camera }) => camera.lookAt(0, 0, 0)}>
        <Galaxy />
      </Canvas>
    </div>
  )
}
```

# Particle typography
> A word rendered as particles (sampled from a 2D canvas) that springs back into shape while the cursor blasts it apart.
- **Category:** 3D Motion
- **Slug:** particle-text
- **Tags:** particles, text, typography, cursor, spring, explode
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/particle-text
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/ParticleText.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/ParticleText.tsx

## When to use
- Hero headlines, launch moments, portfolio names

## Accessibility

The word is in the canvas aria-label; keep the real heading as HTML text too.


## Source
`src/patterns/motion3d/ParticleText.tsx`
```tsx
import { useMemo, useRef } from 'react'
import { Canvas, useFrame, useThree } from '@react-three/fiber'
import * as THREE from 'three'

/*
 * Particle typography: a word is rasterised to a hidden 2D canvas, every lit
 * pixel becomes a 3D particle "home", and particles spring back home while
 * the cursor blasts them away (inverse-square push on the z=0 plane) with a
 * little depth scatter. No font files: the browser draws the text.
 */

function sample(text: string) {
  const c = document.createElement('canvas')
  c.width = 900
  c.height = 260
  const g = c.getContext('2d')!
  g.fillStyle = '#fff'
  g.font = 'bold 200px Georgia, serif'
  g.textAlign = 'center'
  g.textBaseline = 'middle'
  g.fillText(text, 450, 135)
  const d = g.getImageData(0, 0, c.width, c.height).data
  const out: number[] = []
  for (let y = 0; y < c.height; y += 4) for (let x = 0; x < c.width; x += 4) if (d[(y * c.width + x) * 4 + 3] > 128) out.push((x - 450) / 110, -(y - 130) / 110)
  return out
}

function Particles({ text }: { text: string }) {
  const homes = useMemo(() => sample(text), [text])
  const n = homes.length / 2
  const pos = useMemo(() => {
    const a = new Float32Array(n * 3)
    for (let i = 0; i < n; i++) a.set([(Math.random() - 0.5) * 10, (Math.random() - 0.5) * 6, (Math.random() - 0.5) * 4], i * 3)
    return a
  }, [n])
  const vel = useMemo(() => new Float32Array(n * 3), [n])
  const pts = useRef<THREE.Points>(null!)
  const { camera, pointer, raycaster } = useThree()
  const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 0, 1), 0), [])
  const m = useMemo(() => new THREE.Vector3(99, 99, 0), [])
  useFrame(() => {
    raycaster.setFromCamera(pointer, camera)
    raycaster.ray.intersectPlane(plane, m)
    for (let i = 0; i < n; i++) {
      const k = i * 3
      const dx = pos[k] - m.x, dy = pos[k + 1] - m.y
      const d2 = dx * dx + dy * dy + 0.05
      const push = d2 < 1.2 ? 0.012 / d2 : 0
      vel[k] += (homes[i * 2] - pos[k]) * 0.02 + dx * push
      vel[k + 1] += (homes[i * 2 + 1] - pos[k + 1]) * 0.02 + dy * push
      vel[k + 2] += -pos[k + 2] * 0.02 + (push ? (Math.random() - 0.5) * 0.02 : 0)
      vel[k] *= 0.88; vel[k + 1] *= 0.88; vel[k + 2] *= 0.88
      pos[k] += vel[k]; pos[k + 1] += vel[k + 1]; pos[k + 2] += vel[k + 2]
    }
    pts.current.geometry.attributes.position.needsUpdate = true
  })
  return (
    <points ref={pts}>
      <bufferGeometry>
        <bufferAttribute attach="attributes-position" args={[pos, 3]} />
      </bufferGeometry>
      <pointsMaterial size={0.045} color="#c7d2fe" sizeAttenuation transparent opacity={0.95} depthWrite={false} blending={THREE.AdditiveBlending} />
    </points>
  )
}

export default function ParticleText({ text = 'Hello' }: { text?: string }) {
  return (
    <div className="h-80 cursor-crosshair overflow-hidden rounded-xl bg-black" role="img" aria-label={`The word ${text} made of particles that scatter from the cursor`}>
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 0, 6], fov: 45 }}>
        <Particles text={text} />
      </Canvas>
    </div>
  )
}
```

# Neon sign with bloom
> Glass tubes bent from CatmullRom paths with emissive material and a Bloom post-process; flickers on and toggles on click.
- **Category:** 3D Motion
- **Slug:** neon-sign
- **Tags:** neon, bloom, postprocessing, tube geometry, glow, flicker
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook), @react-three/postprocessing
- **Live demo:** https://ui-lab-weld.vercel.app/#/neon-sign
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/NeonSign.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/NeonSign.tsx

## When to use
- Bars, music, nightlife, retro brands
- Signage-style hero headings

## Accessibility

Canvas is inside a button with aria-pressed; flicker disabled under reduced motion (it can be uncomfortable).


## Source
`src/patterns/motion3d/NeonSign.tsx`
```tsx
import { useMemo, useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { EffectComposer, Bloom } from '@react-three/postprocessing'
import * as THREE from 'three'
import { reducedMotion, useWindowPointer } from './_pointer'

/*
 * Neon sign: glass tubes bent from a CatmullRom path (TubeGeometry), bright
 * emissive material pushed above 1.0 so the Bloom post-process makes it
 * glow. It flickers on like a real transformer warming up, randomly
 * stutters, and clicking toggles it. Tilts gently toward the cursor.
 */

// Spells NOVA: N, O (closed loop), V, A (+ separate crossbar).
const PATHS: [number, number][][] = [
  [[-2.5, -0.6], [-2.5, 0.6], [-1.7, -0.6], [-1.7, 0.6]],
  [[-1.0, -0.6], [-1.25, 0], [-1.0, 0.6], [-0.35, 0.6], [-0.1, 0], [-0.35, -0.6], [-1.0, -0.6]],
  [[0.3, 0.6], [0.75, -0.6], [1.2, 0.6]],
  [[1.6, -0.6], [2.05, 0.6], [2.5, -0.6]],
  [[1.78, -0.12], [2.32, -0.12]],
]

function Tubes({ on }: { on: boolean }) {
  const g = useRef<THREE.Group>(null!)
  // One shared material so the whole sign flickers together.
  const mat = useMemo(() => new THREE.MeshStandardMaterial({ color: '#ff3bd4', emissive: '#ff3bd4', emissiveIntensity: 4, toneMapped: false }), [])
  const pointer = useWindowPointer()
  const still = reducedMotion()
  const geos = useMemo(() => PATHS.map((p) => new THREE.TubeGeometry(new THREE.CatmullRomCurve3(p.map(([x, y]) => new THREE.Vector3(x, y, 0)), false, 'catmullrom', 0.05), 200, 0.045, 12, false)), [])
  const warm = useRef(0)
  useFrame((s, dt) => {
    warm.current = on ? Math.min(1, warm.current + dt * 0.8) : 0
    const flick = still ? 1 : warm.current < 1 ? (Math.random() < warm.current ? 1 : 0.08) : Math.random() < 0.006 ? 0.2 : 1
    mat.emissiveIntensity = on ? 4.5 * flick : 0.05
    g.current.rotation.y = THREE.MathUtils.damp(g.current.rotation.y, pointer.current.x * 0.35, 3, dt)
    g.current.rotation.x = THREE.MathUtils.damp(g.current.rotation.x, -pointer.current.y * 0.2, 3, dt)
    void s
  })
  return (
    <group ref={g}>
      {geos.map((geo, i) => (
        <mesh key={i} geometry={geo} material={mat} />
      ))}
      <mesh position={[0, 0, -0.15]}>
        <planeGeometry args={[6, 2.2]} />
        <meshStandardMaterial color="#0b0b10" roughness={0.9} />
      </mesh>
    </group>
  )
}

export default function NeonSign() {
  const [on, setOn] = useState(true)
  return (
    <button onClick={() => setOn((o) => !o)} aria-pressed={on} aria-label="Neon sign reading NOVA; click to switch it on or off" className="block h-80 w-full overflow-hidden rounded-xl bg-[#07070a]">
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 0, 5], fov: 45 }}>
        <ambientLight intensity={0.15} />
        <Tubes on={on} />
        <EffectComposer>
          <Bloom intensity={1.4} luminanceThreshold={0.6} luminanceSmoothing={0.3} mipmapBlur />
        </EffectComposer>
      </Canvas>
    </button>
  )
}
```

# Portal card (window into a world)
> A card whose surface is a window into a separate 3D scene (MeshPortalMaterial); tilting it with the cursor reveals parallax inside.
- **Category:** 3D Motion
- **Slug:** portal-card
- **Tags:** portal, mesh portal material, parallax, card, world, tilt
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/portal-card
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/PortalCard.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/PortalCard.tsx

## When to use
- Travel / game / product world teasers
- Feature cards that open into a scene

## Accessibility

Canvas labelled; idle crystal spin stops under reduced motion.


## Source
`src/patterns/motion3d/PortalCard.tsx`
```tsx
import { useRef } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { MeshPortalMaterial, RoundedBox } from '@react-three/drei'
import * as THREE from 'three'
import { reducedMotion, useWindowPointer } from './_pointer'

/*
 * A card that is a window into another 3D world (drei MeshPortalMaterial
 * renders a separate scene through the card's surface with correct
 * parallax). Tilting the card with the cursor changes what you see inside,
 * like looking through a real window. Inner world: a low-poly sunset
 * desert with spinning crystal.
 */

function Inside() {
  const crystal = useRef<THREE.Mesh>(null!)
  const still = reducedMotion()
  useFrame((_, dt) => {
    if (!still) crystal.current.rotation.y += dt * 0.6
  })
  return (
    <>
      <color attach="background" args={['#fb923c']} />
      <fog attach="fog" args={['#fb7185', 3, 12]} />
      <ambientLight intensity={0.8} />
      <directionalLight position={[2, 3, 1]} intensity={2} color="#fde68a" />
      <mesh position={[0, 0.8, -6]}>
        <circleGeometry args={[1.4, 48]} />
        <meshBasicMaterial color="#fef3c7" />
      </mesh>
      {[-3, -1.2, 1.5, 3.2].map((x, i) => (
        <mesh key={i} position={[x, -1.4, -3 - i]} rotation={[0, i, 0]}>
          <coneGeometry args={[1.4, 2.2 + i * 0.4, 4]} />
          <meshStandardMaterial color={i % 2 ? '#9a3412' : '#c2410c'} flatShading />
        </mesh>
      ))}
      <mesh position={[0, -1.5, -2]} rotation={[-Math.PI / 2, 0, 0]}>
        <planeGeometry args={[20, 20]} />
        <meshStandardMaterial color="#7c2d12" />
      </mesh>
      <mesh ref={crystal} position={[0, -0.2, -1.5]}>
        <octahedronGeometry args={[0.5]} />
        <meshStandardMaterial color="#a78bfa" emissive="#7c3aed" emissiveIntensity={0.6} flatShading />
      </mesh>
    </>
  )
}

function Card() {
  const g = useRef<THREE.Group>(null!)
  const pointer = useWindowPointer()
  useFrame((_, dt) => {
    g.current.rotation.y = THREE.MathUtils.damp(g.current.rotation.y, pointer.current.x * 0.6, 4, dt)
    g.current.rotation.x = THREE.MathUtils.damp(g.current.rotation.x, -pointer.current.y * 0.4, 4, dt)
  })
  return (
    <group ref={g}>
      <RoundedBox args={[2.1, 3, 0.06]} radius={0.12}>
        <meshStandardMaterial color="#e7e5e4" />
      </RoundedBox>
      <mesh position={[0, 0, 0.035]}>
        <planeGeometry args={[1.95, 2.85]} />
        <MeshPortalMaterial resolution={512} blur={0}>
          <Inside />
        </MeshPortalMaterial>
      </mesh>
    </group>
  )
}

export default function PortalCard() {
  return (
    <div className="h-[26rem] overflow-hidden rounded-xl bg-gradient-to-b from-surface-2 to-bg" role="img" aria-label="Card that is a window into a 3D desert world; tilt with the cursor to look inside">
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 0, 5], fov: 45 }}>
        <ambientLight intensity={1} />
        <Card />
      </Canvas>
    </div>
  )
}
```

# 3D dice roll
> Two dice thrown with bounces and wild spin that settle exactly on pre-chosen faces; total announced.
- **Category:** 3D Motion
- **Slug:** dice-roll
- **Tags:** dice, random, physics feel, quaternion, slerp, game
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/dice-roll
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/DiceRoll.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/DiceRoll.tsx

## When to use
- Games, random pickers, giveaways

## Accessibility

Roll is a real button; result in aria-live; instant settle under reduced motion.


## Source
`src/patterns/motion3d/DiceRoll.tsx`
```tsx
import { useMemo, useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import * as THREE from 'three'
import { reducedMotion } from './_pointer'

/*
 * Two dice you can roll. Each roll picks the result first, then animates a
 * throw: an arc with bounces (decaying |sin|), wild spin that slerps into
 * the exact quaternion that shows the chosen face up. Faces are canvas
 * textures with pips. The total is announced for screen readers.
 */

const FACE_UP: Record<number, THREE.Euler> = {
  1: new THREE.Euler(0, 0, Math.PI / 2), 6: new THREE.Euler(0, 0, -Math.PI / 2),
  2: new THREE.Euler(0, 0, 0), 5: new THREE.Euler(Math.PI, 0, 0),
  3: new THREE.Euler(-Math.PI / 2, 0, 0), 4: new THREE.Euler(Math.PI / 2, 0, 0),
}
const PIPS: Record<number, [number, number][]> = {
  1: [[0, 0]], 2: [[-1, -1], [1, 1]], 3: [[-1, -1], [0, 0], [1, 1]], 4: [[-1, -1], [1, -1], [-1, 1], [1, 1]],
  5: [[-1, -1], [1, -1], [0, 0], [-1, 1], [1, 1]], 6: [[-1, -1], [1, -1], [-1, 0], [1, 0], [-1, 1], [1, 1]],
}

function faceTex(n: number) {
  const c = document.createElement('canvas')
  c.width = c.height = 128
  const g = c.getContext('2d')!
  g.fillStyle = '#fafaf9'
  g.fillRect(0, 0, 128, 128)
  g.fillStyle = n === 1 ? '#dc2626' : '#18181b'
  for (const [x, y] of PIPS[n]) {
    g.beginPath()
    g.arc(64 + x * 32, 64 + y * 32, 12, 0, Math.PI * 2)
    g.fill()
  }
  return new THREE.CanvasTexture(c)
}
// BoxGeometry material order: +x, -x, +y, -y, +z, -z
const ORDER = [1, 6, 2, 5, 3, 4]

function Die({ value, roll, x }: { value: number; roll: number; x: number }) {
  const ref = useRef<THREE.Group>(null!)
  const mats = useMemo(() => ORDER.map((n) => new THREE.MeshStandardMaterial({ map: faceTex(n), roughness: 0.4 })), [])
  const start = useRef(-10)
  const spin = useMemo(() => new THREE.Vector3(), [])
  const last = useRef(roll)
  const target = useMemo(() => new THREE.Quaternion(), [])
  useFrame((s) => {
    if (last.current !== roll) {
      last.current = roll
      start.current = s.clock.elapsedTime
      spin.set(Math.random() * 20 + 10, Math.random() * 20 + 10, Math.random() * 20)
      target.setFromEuler(FACE_UP[value]).premultiply(new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.random() * Math.PI * 2))
    }
    const t = reducedMotion() ? 1 : Math.min(1, (s.clock.elapsedTime - start.current) / 1.4)
    const e = 1 - Math.pow(1 - t, 3)
    ref.current.position.set(x + (1 - e) * -2.5, Math.abs(Math.sin(t * Math.PI * 3)) * (1 - t) * 1.6, (1 - e) * 1.5)
    const wild = new THREE.Quaternion().setFromEuler(new THREE.Euler(spin.x * (1 - e), spin.y * (1 - e), spin.z * (1 - e)))
    ref.current.quaternion.copy(wild).slerp(target, e)
  })
  return (
    <group ref={ref}>
      <mesh castShadow>
        <boxGeometry args={[1, 1, 1]} />
        {mats.map((m, i) => <primitive key={i} object={m} attach={`material-${i}`} />)}
      </mesh>
    </group>
  )
}

export default function DiceRoll() {
  const [vals, setVals] = useState([4, 2])
  const [roll, setRoll] = useState(0)
  const doRoll = () => {
    setVals([1 + Math.floor(Math.random() * 6), 1 + Math.floor(Math.random() * 6)])
    setRoll((r) => r + 1)
  }
  return (
    <div className="relative">
      <div className="h-80 overflow-hidden rounded-xl bg-[#14532d]" role="img" aria-label={`Two dice showing ${vals[0]} and ${vals[1]}`}>
        <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 4.5, 4.5], fov: 40 }} onCreated={({ camera }) => camera.lookAt(0, 0, 0)} shadows>
          <ambientLight intensity={0.6} />
          <directionalLight position={[3, 6, 3]} intensity={2} castShadow />
          <Die value={vals[0]} roll={roll} x={-0.8} />
          <Die value={vals[1]} roll={roll} x={0.8} />
          <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.5, 0]} receiveShadow>
            <planeGeometry args={[20, 20]} />
            <meshStandardMaterial color="#166534" roughness={1} />
          </mesh>
        </Canvas>
      </div>
      <div className="mt-3 flex items-center justify-center gap-4">
        <button onClick={doRoll} className="rounded-full bg-fg px-5 py-2 text-sm font-medium text-bg">🎲 Roll</button>
        <span aria-live="polite" className="font-mono text-sm">{roll ? `Total: ${vals[0] + vals[1]}` : 'Roll the dice'}</span>
      </div>
    </div>
  )
}
```

# Self-scrambling puzzle cube
> A 3×3 cube turns random layers by re-parenting cubelets to a pivot, then snapping them back to the grid; orbits with the cursor.
- **Category:** 3D Motion
- **Slug:** twist-cube
- **Tags:** rubik, puzzle, cube, pivot, reparent, layer rotation
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/twist-cube
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/TwistCube.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/TwistCube.tsx

## When to use
- Problem-solving / puzzle / engineering themes
- Loading and empty states

## Accessibility

Decorative canvas with label; scrambling stops under reduced motion.


## Source
`src/patterns/motion3d/TwistCube.tsx`
```tsx
import { useEffect, useMemo, useRef } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { RoundedBox } from '@react-three/drei'
import * as THREE from 'three'
import { reducedMotion, useWindowPointer } from './_pointer'

/*
 * A 3×3 twisting puzzle cube that scrambles itself: every ~0.8s a random
 * layer (x/y/z, -1/0/1) turns 90°. The trick is the pivot: the 9 cubelets of
 * the layer are re-parented to a pivot group, the pivot is rotated with
 * easing, then they are re-parented back with their world transforms baked
 * and positions snapped to the grid. The whole cube orbits with the cursor.
 */

const COLORS = ['#ef4444', '#f97316', '#ffffff', '#facc15', '#22c55e', '#3b82f6'] // +x -x +y -y +z -z

function Cubelet({ pos }: { pos: [number, number, number] }) {
  const mats = useMemo(
    () => [0, 1, 2, 3, 4, 5].map((f) => {
      const axis = Math.floor(f / 2), sign = f % 2 ? -1 : 1
      const outer = pos[axis] === sign
      return new THREE.MeshStandardMaterial({ color: outer ? COLORS[f] : '#111', roughness: 0.35 })
    }),
    [pos],
  )
  return (
    <group position={pos} userData={{ cubelet: true }}>
      <RoundedBox args={[0.95, 0.95, 0.95]} radius={0.08}>
        <meshStandardMaterial color="#0a0a0a" />
      </RoundedBox>
      <mesh>
        <boxGeometry args={[0.86, 0.86, 0.96]} />
        {mats.map((m, i) => <primitive key={i} object={m} attach={`material-${i}`} />)}
      </mesh>
      <mesh>
        <boxGeometry args={[0.96, 0.86, 0.86]} />
        {mats.map((m, i) => <primitive key={i} object={m} attach={`material-${i}`} />)}
      </mesh>
      <mesh>
        <boxGeometry args={[0.86, 0.96, 0.86]} />
        {mats.map((m, i) => <primitive key={i} object={m} attach={`material-${i}`} />)}
      </mesh>
    </group>
  )
}

function Puzzle() {
  const root = useRef<THREE.Group>(null!)
  const pivot = useMemo(() => new THREE.Group(), [])
  const turn = useRef<{ axis: 'x' | 'y' | 'z'; dir: number; t: number; members: THREE.Object3D[] } | null>(null)
  const pointer = useWindowPointer()
  const still = reducedMotion()
  const positions = useMemo(() => {
    const out: [number, number, number][] = []
    for (let x = -1; x <= 1; x++) for (let y = -1; y <= 1; y++) for (let z = -1; z <= 1; z++) out.push([x, y, z])
    return out
  }, [])

  useEffect(() => {
    root.current.add(pivot)
  }, [pivot])

  useFrame((_, dt) => {
    root.current.rotation.y = THREE.MathUtils.damp(root.current.rotation.y, 0.6 + pointer.current.x * 0.8, 3, dt)
    root.current.rotation.x = THREE.MathUtils.damp(root.current.rotation.x, 0.45 - pointer.current.y * 0.5, 3, dt)
    if (still) return
    if (!turn.current) {
      const axis = (['x', 'y', 'z'] as const)[Math.floor(Math.random() * 3)]
      const layer = Math.floor(Math.random() * 3) - 1
      const members = root.current.children.filter((c) => c.userData.cubelet && Math.round(c.position[axis]) === layer)
      pivot.rotation.set(0, 0, 0)
      members.forEach((m) => pivot.attach(m))
      turn.current = { axis, dir: Math.random() < 0.5 ? 1 : -1, t: 0, members }
    }
    const tr = turn.current
    tr.t = Math.min(1, tr.t + dt * 2.2)
    const e = tr.t < 0.5 ? 4 * tr.t ** 3 : 1 - (-2 * tr.t + 2) ** 3 / 2
    pivot.rotation[tr.axis] = e * (Math.PI / 2) * tr.dir
    if (tr.t >= 1) {
      pivot.updateMatrixWorld()
      tr.members.forEach((m) => {
        root.current.attach(m)
        m.position.set(Math.round(m.position.x), Math.round(m.position.y), Math.round(m.position.z))
      })
      turn.current = null
    }
  })

  return (
    <group ref={root}>
      {positions.map((p) => <Cubelet key={p.join()} pos={p} />)}
    </group>
  )
}

export default function TwistCube() {
  return (
    <div className="h-96 overflow-hidden rounded-xl bg-gradient-to-b from-surface-2 to-bg" role="img" aria-label="Three by three puzzle cube scrambling itself, turning toward the cursor">
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 0, 8], fov: 40 }}>
        <ambientLight intensity={0.7} />
        <directionalLight position={[4, 6, 5]} intensity={2} />
        <directionalLight position={[-4, -2, -3]} intensity={0.6} />
        <Puzzle />
      </Canvas>
    </div>
  )
}
```

# Newton's cradle
> Five chrome balls with energy handing over through the middle; click to release a ball. Chrome reflects a generated gradient environment.
- **Category:** 3D Motion
- **Slug:** newton-cradle
- **Tags:** physics, pendulum, chrome, environment map, desk toy
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/newton-cradle
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/NewtonCradle.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/NewtonCradle.tsx

## When to use
- Physics / finance ('momentum') / desk-toy themes

## Accessibility

Release is also a real button; canvas labelled.


## Source
`src/patterns/motion3d/NewtonCradle.tsx`
```tsx
import { useMemo, useRef } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import * as THREE from 'three'

/*
 * Newton's cradle. Five chrome balls on V-strings. The physics is faked
 * the way the real thing behaves: only the outer balls ever swing, as a
 * damped pendulum, and energy hands over through the stationary middle
 * balls each time an end ball hits. Click a ball (or press the button) to
 * pull an end ball back and release it; strings are redrawn every frame.
 */

const N = 5
const L = 2
const R = 0.25

function Cradle({ kick }: { kick: React.MutableRefObject<number> }) {
  const balls = useRef<(THREE.Group | null)[]>([])
  const s = useRef({ left: 0, right: 0, vl: 0, vr: 0, active: 'left' as 'left' | 'right' })
  const strings = useMemo(() => Array.from({ length: N }, () => new THREE.Line(new THREE.BufferGeometry(), new THREE.LineBasicMaterial({ color: '#a1a1aa' }))), [])
  useFrame((_, dt) => {
    const st = s.current
    if (kick.current) {
      st.left = -0.9
      st.vl = 0
      st.right = 0
      st.vr = 0
      st.active = 'left'
      kick.current = 0
    }
    const g = 9.8 / L
    const h = Math.min(dt, 1 / 30)
    if (st.active === 'left') {
      st.vl += -g * Math.sin(st.left) * h
      st.left += st.vl * h
      if (st.left > 0 && st.vl > 0) {
        st.vr = st.vl * 0.985
        st.vl = 0
        st.left = 0
        st.active = 'right'
      }
    } else {
      st.vr += -g * Math.sin(st.right) * h
      st.right += st.vr * h
      if (st.right < 0 && st.vr < 0) {
        st.vl = st.vr * 0.985
        st.vr = 0
        st.right = 0
        st.active = 'left'
      }
    }
    for (let i = 0; i < N; i++) {
      const ang = i === 0 ? st.left : i === N - 1 ? st.right : 0
      const px = (i - (N - 1) / 2) * R * 2
      const bx = px + Math.sin(ang) * L
      const by = 1.6 - Math.cos(ang) * L
      balls.current[i]?.position.set(bx, by, 0)
      strings[i].geometry.setFromPoints([new THREE.Vector3(px, 1.6, -0.5), new THREE.Vector3(bx, by, 0), new THREE.Vector3(px, 1.6, 0.5)])
    }
  })
  return (
    <group position={[0, 0.3, 0]}>
      {strings.map((l, i) => <primitive key={i} object={l} />)}
      {Array.from({ length: N }, (_, i) => (
        <group key={i} ref={(el) => { balls.current[i] = el }} onClick={() => (kick.current = 1)}>
          <mesh>
            <sphereGeometry args={[R * 0.98, 48, 48]} />
            <meshStandardMaterial color="#e4e4e7" metalness={1} roughness={0.08} />
          </mesh>
        </group>
      ))}
      <mesh position={[0, 1.62, 0]} rotation={[0, 0, Math.PI / 2]}>
        <cylinderGeometry args={[0.03, 0.03, 3.2]} />
        <meshStandardMaterial color="#27272a" metalness={0.8} roughness={0.3} />
      </mesh>
    </group>
  )
}

function Studio() {
  // A tiny gradient "environment" so chrome has something to reflect, no HDR download.
  const env = useMemo(() => {
    const c = document.createElement('canvas')
    c.width = 256
    c.height = 128
    const g = c.getContext('2d')!
    const grd = g.createLinearGradient(0, 0, 0, 128)
    grd.addColorStop(0, '#ffffff')
    grd.addColorStop(0.5, '#6366f1')
    grd.addColorStop(1, '#0a0a0a')
    g.fillStyle = grd
    g.fillRect(0, 0, 256, 128)
    const t = new THREE.CanvasTexture(c)
    t.mapping = THREE.EquirectangularReflectionMapping
    return t
  }, [])
  return <primitive object={env} attach="environment" />
}

export default function NewtonCradle() {
  const kick = useRef(1)
  return (
    <div>
      <div className="h-80 cursor-pointer overflow-hidden rounded-xl bg-gradient-to-b from-zinc-900 to-black" role="img" aria-label="Newton's cradle with chrome balls swinging">
        <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 0.5, 5], fov: 40 }}>
          <Studio />
          <ambientLight intensity={0.3} />
          <directionalLight position={[2, 4, 3]} intensity={1.5} />
          <Cradle kick={kick} />
        </Canvas>
      </div>
      <button onClick={() => (kick.current = 1)} className="mx-auto mt-3 block rounded-full border border-border px-4 py-1.5 text-sm">Release a ball</button>
    </div>
  )
}
```

# Waving cloth flag
> A pinned flag rippling on layered sine waves with recomputed normals; the cursor adds a gust and a bulge.
- **Category:** 3D Motion
- **Slug:** cloth-flag
- **Tags:** cloth, flag, wind, vertex animation, waves
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/cloth-flag
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/ClothFlag.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/ClothFlag.tsx

## When to use
- Events, sports, national / campaign pages

## Accessibility

Decorative canvas with label; flag is still under reduced motion.


## Source
`src/patterns/motion3d/ClothFlag.tsx`
```tsx
import { useMemo, useRef } from 'react'
import { Canvas, useFrame, useThree } from '@react-three/fiber'
import * as THREE from 'three'
import { reducedMotion } from './_pointer'

/*
 * A flag rippling in the wind, pinned on its left edge: a subdivided plane
 * whose vertices travel along overlapping sine waves (amplitude grows with
 * distance from the pole). The cursor acts as a gust: waves speed up and a
 * bulge forms where the pointer is. Shading comes from recomputed normals,
 * so folds catch the light. Texture is a CanvasTexture.
 */

function flagTex() {
  const c = document.createElement('canvas')
  c.width = 600
  c.height = 400
  const g = c.getContext('2d')!
  const stripes = ['#f43f5e', '#f97316', '#facc15', '#22c55e', '#3b82f6', '#8b5cf6']
  stripes.forEach((col, i) => {
    g.fillStyle = col
    g.fillRect(0, (i * 400) / stripes.length, 600, 400 / stripes.length + 1)
  })
  g.fillStyle = 'rgba(255,255,255,.92)'
  g.font = 'italic bold 110px Georgia, serif'
  g.textAlign = 'center'
  g.fillText('UI Lab', 300, 235)
  const t = new THREE.CanvasTexture(c)
  t.colorSpace = THREE.SRGBColorSpace
  return t
}

function Flag() {
  const mesh = useRef<THREE.Mesh>(null!)
  const tex = useMemo(flagTex, [])
  const geo = useMemo(() => new THREE.PlaneGeometry(3, 2, 60, 40), [])
  const base = useMemo(() => Float32Array.from(geo.attributes.position.array), [geo])
  const { pointer } = useThree()
  const gust = useRef(0)
  const still = reducedMotion()
  useFrame((s, dt) => {
    const near = Math.abs(pointer.x) < 0.9 && Math.abs(pointer.y) < 0.9 ? 1 : 0
    gust.current = THREE.MathUtils.damp(gust.current, near, 2, dt)
    const t = still ? 0 : s.clock.elapsedTime * (1.6 + gust.current * 1.8)
    const p = geo.attributes.position as THREE.BufferAttribute
    const px = pointer.x * 1.6, py = pointer.y * 1.1
    for (let i = 0; i < p.count; i++) {
      const x = base[i * 3], y = base[i * 3 + 1]
      const k = (x + 1.5) / 3
      let z = (Math.sin(x * 2.2 - t * 2) * 0.18 + Math.sin(x * 4.1 + y * 1.3 - t * 3.1) * 0.06) * k
      const d2 = (x - px) ** 2 + (y - py) ** 2
      z += Math.exp(-d2 * 2.5) * 0.35 * gust.current * k
      p.setZ(i, z)
      p.setY(i, y - k * k * 0.12)
    }
    p.needsUpdate = true
    geo.computeVertexNormals()
  })
  return (
    <group position={[-0.2, 0.3, 0]}>
      <mesh ref={mesh} geometry={geo} position={[1.5, 0, 0]}>
        <meshStandardMaterial map={tex} side={THREE.DoubleSide} roughness={0.8} />
      </mesh>
      <mesh position={[0, -0.9, 0]}>
        <cylinderGeometry args={[0.04, 0.04, 4.2]} />
        <meshStandardMaterial color="#d4d4d8" metalness={0.9} roughness={0.25} />
      </mesh>
    </group>
  )
}

export default function ClothFlag() {
  return (
    <div className="h-96 overflow-hidden rounded-xl bg-gradient-to-b from-sky-300 to-sky-100" role="img" aria-label="Flag waving in the wind; the cursor makes a gust">
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0.6, 0, 5], fov: 45 }}>
        <ambientLight intensity={0.7} />
        <directionalLight position={[3, 3, 4]} intensity={2} />
        <Flag />
      </Canvas>
    </div>
  )
}
```

# Cursor snake
> A glossy segmented snake slithers after the cursor using a follow-the-leader distance constraint.
- **Category:** 3D Motion
- **Slug:** cursor-snake
- **Tags:** snake, follow, chain, constraint, cursor, playful
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/cursor-snake
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/CursorSnake.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/CursorSnake.tsx

## When to use
- Games, playful 404s, kids' brands

## Accessibility

Decorative canvas with label.


## Source
`src/patterns/motion3d/CursorSnake.tsx`
```tsx
import { useMemo, useRef } from 'react'
import { Canvas, useFrame, useThree } from '@react-three/fiber'
import * as THREE from 'three'

/*
 * A glossy segmented snake that chases the cursor. The head eases toward the
 * pointer on the z=0 plane; each following segment is pulled to stay a fixed
 * distance behind the one in front (follow-the-leader constraint), which
 * produces natural slithering curves. Segments taper and shift hue along
 * the body; the head gets eyes oriented along its velocity.
 */

const SEGS = 34
const GAP = 0.17

function Snake() {
  const { camera, pointer, raycaster } = useThree()
  const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 0, 1), 0), [])
  const target = useMemo(() => new THREE.Vector3(), [])
  const pts = useMemo(() => Array.from({ length: SEGS }, (_, i) => new THREE.Vector3(-i * GAP, 0, 0)), [])
  const meshes = useRef<(THREE.Mesh | null)[]>([])
  const head = useRef<THREE.Group>(null!)
  useFrame((s, dt) => {
    raycaster.setFromCamera(pointer, camera)
    raycaster.ray.intersectPlane(plane, target)
    const wobble = Math.sin(s.clock.elapsedTime * 6) * 0.04
    pts[0].lerp(target, Math.min(1, dt * 5))
    pts[0].y += wobble * 0.3
    for (let i = 1; i < SEGS; i++) {
      const d = pts[i].clone().sub(pts[i - 1])
      const len = d.length() || 1
      pts[i].copy(pts[i - 1]).add(d.multiplyScalar(GAP / len))
    }
    pts.forEach((p, i) => meshes.current[i]?.position.copy(p))
    const dir = pts[0].clone().sub(pts[1])
    head.current.position.copy(pts[0])
    head.current.rotation.z = Math.atan2(dir.y, dir.x)
  })
  return (
    <>
      {pts.map((_, i) => {
        const k = i / SEGS
        return (
          <mesh key={i} ref={(el) => { meshes.current[i] = el }} scale={0.2 * (1 - k * 0.75)}>
            <sphereGeometry args={[1, 24, 24]} />
            <meshPhysicalMaterial color={new THREE.Color().setHSL(0.38 - k * 0.25, 0.75, 0.5)} clearcoat={1} roughness={0.25} />
          </mesh>
        )
      })}
      <group ref={head}>
        {[-1, 1].map((sd) => (
          <mesh key={sd} position={[0.1, sd * 0.09, 0.15]}>
            <sphereGeometry args={[0.045, 16, 16]} />
            <meshStandardMaterial color="#09090b" roughness={0.1} />
          </mesh>
        ))}
      </group>
    </>
  )
}

export default function CursorSnake() {
  return (
    <div className="h-96 cursor-crosshair overflow-hidden rounded-xl bg-[#052e16]" role="img" aria-label="Glossy 3D snake that slithers after the cursor">
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 0, 6], fov: 45 }}>
        <ambientLight intensity={0.6} />
        <directionalLight position={[2, 4, 5]} intensity={2} />
        <Snake />
      </Canvas>
    </div>
  )
}
```

# Endless terrain flyover
> Low-poly, height-coloured landscape scrolling forever via noise offset, fog at the edge; cursor banks and steers the camera.
- **Category:** 3D Motion
- **Slug:** terrain-flyover
- **Tags:** terrain, procedural, noise, flyover, low poly, landscape
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/terrain-flyover
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/TerrainFlyover.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/TerrainFlyover.tsx

## When to use
- Travel, outdoor, game and exploration heroes

## Accessibility

Decorative canvas with label; flight stops under reduced motion.


## Source
`src/patterns/motion3d/TerrainFlyover.tsx`
```tsx
import { useMemo, useRef } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import * as THREE from 'three'
import { reducedMotion, useWindowPointer } from './_pointer'

/*
 * Endless low-poly terrain flyover. The ground is one plane whose heights
 * come from fractal noise sampled at (x, z + travel), so moving "forward" is
 * just scrolling the noise; nothing is ever regenerated. Flat-shaded,
 * height-coloured (water, sand, grass, rock, snow), with fog hiding the
 * edge. The cursor banks and steers the camera.
 */

function hash(x: number, y: number) {
  const s = Math.sin(x * 127.1 + y * 311.7) * 43758.5453
  return s - Math.floor(s)
}
function noise(x: number, y: number) {
  const ix = Math.floor(x), iy = Math.floor(y), fx = x - ix, fy = y - iy
  const u = fx * fx * (3 - 2 * fx), v = fy * fy * (3 - 2 * fy)
  const a = hash(ix, iy), b = hash(ix + 1, iy), c = hash(ix, iy + 1), d = hash(ix + 1, iy + 1)
  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v
}
const fbm = (x: number, y: number) => noise(x, y) * 0.55 + noise(x * 2, y * 2) * 0.28 + noise(x * 4, y * 4) * 0.12 + noise(x * 8, y * 8) * 0.05

const SEA = 0.42
const BANDS: [number, THREE.Color][] = [
  [0.0, new THREE.Color('#1d4ed8')], [SEA - 0.03, new THREE.Color('#38bdf8')], [SEA + 0.01, new THREE.Color('#fde68a')],
  [SEA + 0.05, new THREE.Color('#4ade80')], [0.58, new THREE.Color('#15803d')], [0.66, new THREE.Color('#78716c')], [0.74, new THREE.Color('#fafafa')],
]

function Terrain() {
  const geo = useMemo(() => {
    const g = new THREE.PlaneGeometry(40, 40, 56, 56).toNonIndexed()
    g.rotateX(-Math.PI / 2)
    g.setAttribute('color', new THREE.BufferAttribute(new Float32Array(g.attributes.position.count * 3), 3))
    return g
  }, [])
  const base = useMemo(() => Float32Array.from(geo.attributes.position.array), [geo])
  const travel = useRef(0)
  const pointer = useWindowPointer()
  const still = reducedMotion()
  const c = useMemo(() => new THREE.Color(), [])
  useFrame((s, dt) => {
    if (!still) travel.current += dt * 2.2
    const p = geo.attributes.position as THREE.BufferAttribute
    const col = geo.attributes.color as THREE.BufferAttribute
    for (let i = 0; i < p.count; i++) {
      const x = base[i * 3], z = base[i * 3 + 2]
      let h = fbm(x * 0.09 + 50, (z - travel.current) * 0.09 + 50)
      // stretch contrast so peaks and sea both appear, then flatten the sea
      h = THREE.MathUtils.clamp((h - 0.5) * 1.8 + 0.5, 0, 1)
      const level = Math.max(h, SEA)
      p.setY(i, (level - SEA) * 7)
      let k = 0
      while (k < BANDS.length - 1 && h > BANDS[k + 1][0]) k++
      if (h < SEA) k = h < SEA - 0.06 ? 0 : 1
      c.copy(BANDS[k][1])
      col.setXYZ(i, c.r, c.g, c.b)
    }
    p.needsUpdate = true
    col.needsUpdate = true
    geo.computeVertexNormals()
    const cam = s.camera
    cam.position.x = THREE.MathUtils.damp(cam.position.x, pointer.current.x * 5, 1.5, dt)
    cam.position.y = THREE.MathUtils.damp(cam.position.y, 6 + pointer.current.y * 2, 1.5, dt)
    cam.rotation.z = THREE.MathUtils.damp(cam.rotation.z, -pointer.current.x * 0.25, 2, dt)
  })
  return (
    <mesh geometry={geo}>
      <meshStandardMaterial vertexColors flatShading roughness={0.9} />
    </mesh>
  )
}

export default function TerrainFlyover() {
  return (
    <div className="h-96 overflow-hidden rounded-xl" role="img" aria-label="Endless low-poly landscape flyover steered by the cursor">
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 6, 9], fov: 55, rotation: [-0.45, 0, 0] }}>
        <color attach="background" args={['#bae6fd']} />
        <fog attach="fog" args={['#bae6fd', 8, 26]} />
        <hemisphereLight args={['#ffffff', '#1e293b', 0.9]} />
        <directionalLight position={[5, 10, 3]} intensity={1.8} />
        <Terrain />
      </Canvas>
    </div>
  )
}
```

# Exploding crystal
> A faceted crystal bursts into its triangles along face normals on hover/focus and snaps back together.
- **Category:** 3D Motion
- **Slug:** explode-shape
- **Tags:** explode, shards, faces, hover, assemble
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/explode-shape
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/ExplodeShape.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/ExplodeShape.tsx

## When to use
- Product reveals, 'deconstruct' storytelling, CTAs

## Accessibility

Focusable wrapper triggers the same effect on keyboard focus.


## Source
`src/patterns/motion3d/ExplodeShape.tsx`
```tsx
import { useMemo, useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import * as THREE from 'three'
import { useWindowPointer } from './_pointer'

/*
 * A faceted crystal that explodes into its individual triangles on hover
 * and snaps back together when you leave. The geometry is split into one
 * mesh per face (non-indexed), and every shard flies out along its own
 * face normal with a random spin; one eased progress value drives them all.
 */

function Shards({ open }: { open: boolean }) {
  const g = useRef<THREE.Group>(null!)
  const pointer = useWindowPointer()
  const t = useRef(0)
  const shards = useMemo(() => {
    const src = new THREE.IcosahedronGeometry(1.4, 1).toNonIndexed()
    const p = src.attributes.position
    const out: { geo: THREE.BufferGeometry; n: THREE.Vector3; c: THREE.Vector3; spin: THREE.Vector3; color: THREE.Color }[] = []
    for (let i = 0; i < p.count; i += 3) {
      const a = new THREE.Vector3().fromBufferAttribute(p, i), b = new THREE.Vector3().fromBufferAttribute(p, i + 1), c = new THREE.Vector3().fromBufferAttribute(p, i + 2)
      const centre = a.clone().add(b).add(c).divideScalar(3)
      const geo = new THREE.BufferGeometry().setFromPoints([a.sub(centre), b.sub(centre), c.sub(centre)])
      geo.computeVertexNormals()
      out.push({ geo, n: centre.clone().normalize(), c: centre, spin: new THREE.Vector3(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).multiplyScalar(6), color: new THREE.Color().setHSL(0.7 + centre.y * 0.08, 0.7, 0.6) })
    }
    return out
  }, [])
  const meshes = useRef<(THREE.Mesh | null)[]>([])
  useFrame((s, dt) => {
    t.current = THREE.MathUtils.damp(t.current, open ? 1 : 0, open ? 4 : 6, dt)
    const e = t.current
    shards.forEach((sh, i) => {
      const m = meshes.current[i]
      if (!m) return
      m.position.copy(sh.c).addScaledVector(sh.n, e * (1.4 + (i % 5) * 0.25))
      m.rotation.set(sh.spin.x * e, sh.spin.y * e, sh.spin.z * e)
    })
    g.current.rotation.y += dt * 0.25
    g.current.rotation.x = THREE.MathUtils.damp(g.current.rotation.x, -pointer.current.y * 0.5, 3, dt)
    void s
  })
  return (
    <group ref={g}>
      {shards.map((sh, i) => (
        <mesh key={i} ref={(el) => { meshes.current[i] = el }} geometry={sh.geo}>
          <meshStandardMaterial color={sh.color} flatShading side={THREE.DoubleSide} metalness={0.3} roughness={0.3} />
        </mesh>
      ))}
    </group>
  )
}

export default function ExplodeShape() {
  const [open, setOpen] = useState(false)
  return (
    <div
      className="h-96 overflow-hidden rounded-xl bg-[#0c0a1d]"
      onPointerEnter={() => setOpen(true)}
      onPointerLeave={() => setOpen(false)}
      onFocus={() => setOpen(true)}
      onBlur={() => setOpen(false)}
      tabIndex={0}
      role="img"
      aria-label="Crystal that bursts into shards on hover and reassembles"
    >
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 0, 6], fov: 45 }}>
        <ambientLight intensity={0.4} />
        <directionalLight position={[3, 4, 5]} intensity={2} />
        <pointLight position={[-3, -2, 2]} intensity={20} color="#f472b6" />
        <Shards open={open} />
      </Canvas>
    </div>
  )
}
```

# Audio-reactive 3D ring
> A ring of 64 bars driven by a real AnalyserNode on music synthesised in the browser; nothing plays until you press Play.
- **Category:** 3D Motion
- **Slug:** audio-bars
- **Tags:** audio, web audio, analyser, visualizer, music, instancedmesh
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/audio-bars
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/AudioBars.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/AudioBars.tsx

## When to use
- Music, podcast, audio-product pages

## Accessibility

No sound without an explicit click; Play/Stop button with aria-pressed; idle ripple is subtle.


## Source
`src/patterns/motion3d/AudioBars.tsx`
```tsx
import { useEffect, useMemo, useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import * as THREE from 'three'

/*
 * Audio-reactive 3D: a ring of 64 bars driven by a real AnalyserNode. The
 * sound is synthesised in the browser (a little arpeggio + bass + hi-hat
 * noise via Web Audio), so there's no file to load and no microphone
 * permission. Nothing plays until the user presses Play (autoplay rules and
 * good manners). Bars scale and glow with their frequency bin; the ring
 * slowly rotates.
 */

const BINS = 64

function useSynth() {
  const ctx = useRef<AudioContext | null>(null)
  const analyser = useRef<AnalyserNode | null>(null)
  const timer = useRef(0)
  const stop = () => {
    clearInterval(timer.current)
    ctx.current?.close()
    ctx.current = null
    analyser.current = null
  }
  const start = () => {
    const ac = new AudioContext()
    const an = ac.createAnalyser()
    an.fftSize = 256
    const gain = ac.createGain()
    gain.gain.value = 0.18
    gain.connect(an).connect(ac.destination)
    const notes = [220, 277.2, 329.6, 440, 329.6, 277.2]
    let step = 0
    const tick = () => {
      const t = ac.currentTime
      const o = ac.createOscillator()
      const g = ac.createGain()
      o.type = 'sawtooth'
      o.frequency.value = notes[step % notes.length] * (step % 12 < 6 ? 1 : 1.5)
      g.gain.setValueAtTime(0.5, t)
      g.gain.exponentialRampToValueAtTime(0.001, t + 0.28)
      o.connect(g).connect(gain)
      o.start(t)
      o.stop(t + 0.3)
      if (step % 4 === 0) {
        const b = ac.createOscillator()
        const bg = ac.createGain()
        b.frequency.setValueAtTime(110, t)
        b.frequency.exponentialRampToValueAtTime(40, t + 0.25)
        bg.gain.setValueAtTime(1, t)
        bg.gain.exponentialRampToValueAtTime(0.001, t + 0.3)
        b.connect(bg).connect(gain)
        b.start(t)
        b.stop(t + 0.3)
      }
      const buf = ac.createBuffer(1, 2205, ac.sampleRate)
      buf.getChannelData(0).forEach((_, i, a) => (a[i] = (Math.random() * 2 - 1) * (1 - i / a.length)))
      const n = ac.createBufferSource()
      const ng = ac.createGain()
      ng.gain.value = 0.15
      n.buffer = buf
      n.connect(ng).connect(gain)
      n.start(t)
      step++
    }
    tick()
    timer.current = window.setInterval(tick, 180)
    ctx.current = ac
    analyser.current = an
  }
  useEffect(() => stop, [])
  return { analyser, start, stop }
}

function Bars({ analyser }: { analyser: React.MutableRefObject<AnalyserNode | null> }) {
  const mesh = useRef<THREE.InstancedMesh>(null!)
  const data = useMemo(() => new Uint8Array(128), [])
  const levels = useMemo(() => new Float32Array(BINS), [])
  const tmp = useMemo(() => ({ m: new THREE.Matrix4(), q: new THREE.Quaternion(), c: new THREE.Color() }), [])
  useFrame((s, dt) => {
    if (analyser.current) analyser.current.getByteFrequencyData(data)
    else data.fill(0)
    for (let i = 0; i < BINS; i++) {
      const v = analyser.current ? data[Math.floor(i * 1.6)] / 255 : 0.05 + 0.04 * Math.sin(s.clock.elapsedTime * 2 + i * 0.4)
      levels[i] = THREE.MathUtils.damp(levels[i], v, 14, dt)
      const a = (i / BINS) * Math.PI * 2
      const h = 0.1 + levels[i] * 2.4
      tmp.q.setFromAxisAngle(new THREE.Vector3(0, 1, 0), -a)
      tmp.m.compose(new THREE.Vector3(Math.cos(a) * 2, h / 2, Math.sin(a) * 2), tmp.q, new THREE.Vector3(1, h, 1))
      mesh.current.setMatrixAt(i, tmp.m)
      mesh.current.setColorAt(i, tmp.c.setHSL(0.75 - levels[i] * 0.35, 0.85, 0.35 + levels[i] * 0.35))
    }
    mesh.current.instanceMatrix.needsUpdate = true
    if (mesh.current.instanceColor) mesh.current.instanceColor.needsUpdate = true
    mesh.current.rotation.y += dt * 0.15
  })
  return (
    <instancedMesh ref={mesh} args={[undefined, undefined, BINS]}>
      <boxGeometry args={[0.12, 1, 0.12]} />
      <meshStandardMaterial roughness={0.3} metalness={0.2} emissive="#1e1b4b" />
    </instancedMesh>
  )
}

export default function AudioBars() {
  const { analyser, start, stop } = useSynth()
  const [playing, setPlaying] = useState(false)
  return (
    <div className="relative">
      <div className="h-96 overflow-hidden rounded-xl bg-[#05050a]" role="img" aria-label="Ring of 3D bars that dance to synthesised music">
        <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 3.2, 5.5], fov: 45 }} onCreated={({ camera }) => camera.lookAt(0, 0.6, 0)}>
          <ambientLight intensity={0.5} />
          <pointLight position={[0, 4, 0]} intensity={30} color="#a78bfa" />
          <Bars analyser={analyser} />
        </Canvas>
      </div>
      <button
        onClick={() => {
          if (playing) stop()
          else start()
          setPlaying(!playing)
        }}
        aria-pressed={playing}
        className="absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full bg-white px-5 py-2 text-sm font-medium text-black"
      >
        {playing ? '■ Stop' : '▶ Play (sound)'}
      </button>
    </div>
  )
}
```

# Interactive solar system
> Planets orbit on tilted rings; hover pauses and highlights; click flies the camera to a planet and shows its facts.
- **Category:** 3D Motion
- **Slug:** solar-system
- **Tags:** solar system, orbit, camera fly-to, click select, education
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/solar-system
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/SolarSystem.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/SolarSystem.tsx

## When to use
- Education, data exploration, product 'universe' maps

## Accessibility

Info panel in aria-live; planet buttons below the canvas; orbits stop under reduced motion.


## Source
`src/patterns/motion3d/SolarSystem.tsx`
```tsx
import { useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import * as THREE from 'three'
import { reducedMotion } from './_pointer'

/*
 * Mini interactive solar system: planets orbit at different speeds on
 * tilted rings; hovering one pauses its orbit and outlines it; clicking it
 * selects it, the camera glides to frame it and an info card updates
 * (aria-live). Click empty space to zoom back out.
 */

const PLANETS = [
  { name: 'Ember', r: 1.3, size: 0.16, speed: 1.6, color: '#f97316', fact: 'Closest and fastest. A year lasts 4 seconds here.' },
  { name: 'Azure', r: 2.1, size: 0.26, speed: 1.0, color: '#38bdf8', fact: 'Ocean world with two tiny moons.' },
  { name: 'Verdant', r: 3.0, size: 0.3, speed: 0.7, color: '#22c55e', fact: 'Forests cover 80% of the surface.' },
  { name: 'Ringer', r: 4.1, size: 0.42, speed: 0.45, color: '#eab308', fact: 'Gas giant with a bright ice ring.', ring: true },
  { name: 'Frost', r: 5.1, size: 0.22, speed: 0.3, color: '#c4b5fd', fact: 'Coldest planet, wrapped in violet haze.' },
]

function Planet({ p, i, selected, onSelect }: { p: (typeof PLANETS)[number]; i: number; selected: boolean; onSelect: (i: number, pos: THREE.Vector3) => void }) {
  const ref = useRef<THREE.Group>(null!)
  const angle = useRef(i * 1.7)
  const [hover, setHover] = useState(false)
  const still = reducedMotion()
  useFrame((_, dt) => {
    if (!hover && !selected && !still) angle.current += dt * p.speed * 0.4
    ref.current.position.set(Math.cos(angle.current) * p.r, 0, Math.sin(angle.current) * p.r)
    ref.current.rotation.y += dt
  })
  return (
    <>
      <mesh rotation={[-Math.PI / 2, 0, 0]}>
        <ringGeometry args={[p.r - 0.005, p.r + 0.005, 128]} />
        <meshBasicMaterial color="#ffffff" transparent opacity={0.12} />
      </mesh>
      <group
        ref={ref}
        onPointerOver={(e) => { e.stopPropagation(); setHover(true) }}
        onPointerOut={() => setHover(false)}
        onClick={(e) => { e.stopPropagation(); onSelect(i, ref.current.position) }}
      >
        <mesh scale={hover || selected ? 1.18 : 1}>
          <sphereGeometry args={[p.size, 32, 32]} />
          <meshStandardMaterial color={p.color} roughness={0.6} emissive={p.color} emissiveIntensity={hover || selected ? 0.35 : 0.05} />
        </mesh>
        {p.ring && (
          <mesh rotation={[-Math.PI / 2.4, 0, 0]}>
            <ringGeometry args={[p.size * 1.4, p.size * 2.1, 64]} />
            <meshStandardMaterial color="#fef3c7" side={THREE.DoubleSide} transparent opacity={0.7} />
          </mesh>
        )}
      </group>
    </>
  )
}

function Rig({ focus }: { focus: React.MutableRefObject<THREE.Vector3 | null> }) {
  useFrame((s, dt) => {
    const f = focus.current
    const want = f ? new THREE.Vector3(f.x * 1.25, 1.2, f.z * 1.25 + 1.8) : new THREE.Vector3(0, 6.5, 8)
    s.camera.position.x = THREE.MathUtils.damp(s.camera.position.x, want.x, 2.5, dt)
    s.camera.position.y = THREE.MathUtils.damp(s.camera.position.y, want.y, 2.5, dt)
    s.camera.position.z = THREE.MathUtils.damp(s.camera.position.z, want.z, 2.5, dt)
    s.camera.lookAt(f ?? new THREE.Vector3())
  })
  return null
}

export default function SolarSystem() {
  const [sel, setSel] = useState<number | null>(null)
  const focus = useRef<THREE.Vector3 | null>(null)
  return (
    <div className="relative">
      <div className="h-[26rem] overflow-hidden rounded-xl bg-black" role="img" aria-label="Interactive solar system; click a planet to fly to it">
        <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 6.5, 8], fov: 45 }} onPointerMissed={() => { setSel(null); focus.current = null }}>
          <ambientLight intensity={0.15} />
          <pointLight position={[0, 0, 0]} intensity={60} color="#fde68a" decay={1.6} />
          <mesh>
            <sphereGeometry args={[0.6, 48, 48]} />
            <meshBasicMaterial color="#fbbf24" />
          </mesh>
          {PLANETS.map((p, i) => (
            <Planet key={p.name} p={p} i={i} selected={sel === i} onSelect={(n, pos) => { setSel(n); focus.current = pos }} />
          ))}
          <Rig focus={focus} />
        </Canvas>
      </div>
      <div aria-live="polite" className="absolute top-3 left-3 max-w-56 rounded-lg bg-black/60 p-3 text-sm text-white backdrop-blur">
        {sel === null ? (
          <p className="text-white/70">Click a planet</p>
        ) : (
          <>
            <p className="font-display text-2xl italic">{PLANETS[sel].name}</p>
            <p className="mt-1 text-white/80">{PLANETS[sel].fact}</p>
          </>
        )}
      </div>
      <div className="mt-2 flex flex-wrap justify-center gap-1.5">
        {PLANETS.map((p, i) => (
          <button key={p.name} onClick={() => { setSel(i); focus.current = null }} className="rounded-full border border-border px-2.5 py-0.5 text-xs">{p.name}</button>
        ))}
      </div>
    </div>
  )
}
```

# Cursor comet with light trails
> A glowing comet follows the cursor springily, painting a fading ribbon, with three orbiting sparks leaving their own trails.
- **Category:** 3D Motion
- **Slug:** comet-trail
- **Tags:** trail, cursor, light painting, comet, ribbon
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/comet-trail
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/CometTrail.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/CometTrail.tsx

## When to use
- Creative portfolios, night / space themes

## Accessibility

Decorative canvas with label.


## Source
`src/patterns/motion3d/CometTrail.tsx`
```tsx
import { useMemo, useRef } from 'react'
import { Canvas, useFrame, useThree } from '@react-three/fiber'
import { Trail } from '@react-three/drei'
import * as THREE from 'three'

/*
 * Cursor comet: a glowing head follows the cursor with a springy lag and
 * leaves a fading ribbon of light (drei <Trail>, a mesh-line that remembers
 * recent positions). Three satellite sparks orbit the head with their own
 * trails, so fast movements draw braided light-painting strokes.
 */

function Head() {
  const { camera, pointer, raycaster } = useThree()
  const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 0, 1), 0), [])
  const target = useMemo(() => new THREE.Vector3(), [])
  const vel = useMemo(() => new THREE.Vector3(), [])
  const head = useRef<THREE.Mesh>(null!)
  const sparks = useRef<(THREE.Mesh | null)[]>([])
  useFrame((s, dt) => {
    raycaster.setFromCamera(pointer, camera)
    raycaster.ray.intersectPlane(plane, target)
    const p = head.current.position
    vel.add(target.clone().sub(p).multiplyScalar(dt * 30)).multiplyScalar(0.82)
    p.addScaledVector(vel, dt)
    const t = s.clock.elapsedTime
    sparks.current.forEach((m, i) => {
      if (!m) return
      const a = t * (3 + i) + (i * Math.PI * 2) / 3
      m.position.set(p.x + Math.cos(a) * 0.35, p.y + Math.sin(a) * 0.35, Math.sin(a * 0.5) * 0.2)
    })
  })
  const colors = ['#f472b6', '#22d3ee', '#facc15']
  return (
    <>
      <Trail width={1.6} length={7} color="#a5b4fc" attenuation={(w) => w * w}>
        <mesh ref={head}>
          <sphereGeometry args={[0.1, 24, 24]} />
          <meshBasicMaterial color="#e0e7ff" toneMapped={false} />
        </mesh>
      </Trail>
      {colors.map((c, i) => (
        <Trail key={c} width={0.5} length={5} color={c} attenuation={(w) => w}>
          <mesh ref={(el) => { sparks.current[i] = el }}>
            <sphereGeometry args={[0.035, 12, 12]} />
            <meshBasicMaterial color={c} toneMapped={false} />
          </mesh>
        </Trail>
      ))}
    </>
  )
}

export default function CometTrail() {
  return (
    <div className="h-96 cursor-none overflow-hidden rounded-xl bg-[#03030a]" role="img" aria-label="Glowing comet with light trails following the cursor">
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 0, 6], fov: 45 }}>
        <Head />
      </Canvas>
    </div>
  )
}
```

# Isometric room diorama
> Orthographic iso room built from primitives; hovering furniture lifts and labels it; scene parallax-tilts with the cursor.
- **Category:** 3D Motion
- **Slug:** iso-room
- **Tags:** isometric, orthographic, diorama, room, hover, portfolio
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/iso-room
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/IsoRoom.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/IsoRoom.tsx

## When to use
- Personal portfolios, 'about me', product setups

## Accessibility

Labels shown in aria-live and listed as text for screen readers.


## Source
`src/patterns/motion3d/IsoRoom.tsx`
```tsx
import { useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { RoundedBox } from '@react-three/drei'
import * as THREE from 'three'
import { useWindowPointer } from './_pointer'

/*
 * Isometric room diorama (a classic portfolio hero): an orthographic camera
 * at the iso angle, a cut-away room with furniture built from primitives.
 * Hovering an object lifts and highlights it and shows its label; the whole
 * scene parallax-tilts with the cursor. Labels/descriptions are also
 * listed as text for assistive tech.
 */

const ITEMS = [
  { id: 'desk', label: 'Desk: where the code happens', pos: [-0.6, 0.45, -0.7] as const, size: [1.6, 0.1, 0.8] as const, color: '#a16207' },
  { id: 'monitor', label: 'Monitor: 3 projects open', pos: [-0.6, 0.85, -0.95] as const, size: [0.8, 0.5, 0.06] as const, color: '#18181b' },
  { id: 'plant', label: 'Plant: still alive', pos: [1.1, 0.35, -1.1] as const, size: [0.3, 0.7, 0.3] as const, color: '#16a34a' },
  { id: 'bed', label: 'Bed: rarely used', pos: [0.7, 0.2, 0.6] as const, size: [1.2, 0.4, 0.8] as const, color: '#6366f1' },
  { id: 'rug', label: 'Rug: very cosy', pos: [-0.4, 0.02, 0.5] as const, size: [1.2, 0.04, 0.9] as const, color: '#f472b6' },
]

function Item({ it, hover, setHover }: { it: (typeof ITEMS)[number]; hover: string | null; setHover: (s: string | null) => void }) {
  const on = hover === it.id
  return (
    <group position={[it.pos[0], it.pos[1] + (on ? 0.12 : 0), it.pos[2]]} onPointerOver={(e) => { e.stopPropagation(); setHover(it.id) }} onPointerOut={() => setHover(null)}>
      <RoundedBox args={it.size as unknown as [number, number, number]} radius={0.03}>
        <meshStandardMaterial color={it.color} emissive={on ? '#ffffff' : '#000000'} emissiveIntensity={on ? 0.18 : 0} />
      </RoundedBox>
      {it.id === 'monitor' && (
        <mesh position={[0, 0, 0.035]}>
          <planeGeometry args={[0.72, 0.42]} />
          <meshBasicMaterial color={on ? '#a5b4fc' : '#4f46e5'} />
        </mesh>
      )}
    </group>
  )
}

function Scene({ hover, setHover }: { hover: string | null; setHover: (s: string | null) => void }) {
  const pointer = useWindowPointer()
  useFrame((s, dt) => {
    const g = s.scene.getObjectByName('room') as THREE.Group
    g.rotation.y = THREE.MathUtils.damp(g.rotation.y, pointer.current.x * 0.15, 3, dt)
    g.rotation.x = THREE.MathUtils.damp(g.rotation.x, -pointer.current.y * 0.06, 3, dt)
  })
  return (
    <group name="room">
      <mesh position={[0, -0.05, 0]}>
        <boxGeometry args={[3, 0.1, 3]} />
        <meshStandardMaterial color="#e7e5e4" />
      </mesh>
      <mesh position={[0, 1, -1.5]}>
        <boxGeometry args={[3, 2.1, 0.1]} />
        <meshStandardMaterial color="#fde68a" />
      </mesh>
      <mesh position={[-1.5, 1, 0]}>
        <boxGeometry args={[0.1, 2.1, 3]} />
        <meshStandardMaterial color="#fcd34d" />
      </mesh>
      <mesh position={[0.3, 1.4, -1.44]}>
        <planeGeometry args={[0.8, 0.6]} />
        <meshBasicMaterial color="#7dd3fc" />
      </mesh>
      {ITEMS.map((it) => <Item key={it.id} it={it} hover={hover} setHover={setHover} />)}
    </group>
  )
}

export default function IsoRoom() {
  const [hover, setHover] = useState<string | null>(null)
  return (
    <div className="relative">
      <div className="h-96 overflow-hidden rounded-xl bg-gradient-to-b from-orange-100 to-rose-100" role="img" aria-label="Isometric room diorama; hover the furniture">
        <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} orthographic camera={{ position: [6, 5.2, 6], zoom: 85 }} onCreated={({ camera }) => camera.lookAt(0, 0.6, 0)}>
          <ambientLight intensity={0.7} />
          <directionalLight position={[4, 6, 2]} intensity={1.8} />
          <Scene hover={hover} setHover={setHover} />
        </Canvas>
      </div>
      <p aria-live="polite" className="absolute bottom-3 left-3 rounded-full bg-black/70 px-3 py-1 text-xs text-white">{ITEMS.find((i) => i.id === hover)?.label ?? 'Hover the furniture'}</p>
      <ul className="sr-only">{ITEMS.map((i) => <li key={i.id}>{i.label}</li>)}</ul>
    </div>
  )
}
```

# Poppable soap bubbles
> Thin-film iridescent bubbles drift upward; click to pop into a droplet ring; count announced.
- **Category:** 3D Motion
- **Slug:** soap-bubbles
- **Tags:** bubbles, iridescent, thin film, shader, click, pop
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/soap-bubbles
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/SoapBubbles.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/SoapBubbles.tsx

## When to use
- Playful brands, kids, cleaning / beauty products

## Accessibility

Popped count in aria-live; drifting stops under reduced motion.


## Source
`src/patterns/motion3d/SoapBubbles.tsx`
```tsx
import { useMemo, useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import * as THREE from 'three'
import { reducedMotion } from './_pointer'

/*
 * Soap bubbles: transparent spheres with a custom thin-film shader
 * (iridescent hue shifting with view angle = fresnel), drifting up with a
 * wobble. Click a bubble to pop it: it bursts into a quick ring of droplets
 * and a new bubble respawns at the bottom. Popped count is announced.
 */

const vert = /* glsl */ `
varying vec3 vN; varying vec3 vV; uniform float uTime; uniform float uSeed;
void main(){
  vec3 p = position + normal * sin(position.y * 6. + uTime * 3. + uSeed) * 0.015;
  vec4 mv = modelViewMatrix * vec4(p, 1.);
  vN = normalize(normalMatrix * normal); vV = normalize(-mv.xyz);
  gl_Position = projectionMatrix * mv;
}`
const frag = /* glsl */ `
varying vec3 vN; varying vec3 vV; uniform float uTime; uniform float uSeed;
void main(){
  float f = 1. - abs(dot(vN, vV));
  vec3 film = 0.5 + 0.5 * cos(6.2831 * (f * 1.6 + vec3(0., .33, .67) + uTime * .05 + uSeed));
  float a = pow(f, 2.2) * 0.9 + 0.04;
  float spec = pow(max(dot(reflect(-normalize(vec3(.4,.8,.5)), vN), vV), 0.), 60.);
  gl_FragColor = vec4(film + spec, a + spec);
}`

type B = { id: number; x: number; y: number; z: number; r: number; seed: number }
let uid = 0
const spawn = (y = -2.6): B => ({ id: uid++, x: (Math.random() - 0.5) * 6, y, z: (Math.random() - 0.5) * 2, r: 0.25 + Math.random() * 0.4, seed: Math.random() * 10 })

function Bubble({ b, onPop }: { b: B; onPop: (b: B, p: THREE.Vector3) => void }) {
  const ref = useRef<THREE.Mesh>(null!)
  const uniforms = useMemo(() => ({ uTime: { value: 0 }, uSeed: { value: b.seed } }), [b.seed])
  const still = reducedMotion()
  useFrame((s, dt) => {
    uniforms.uTime.value = s.clock.elapsedTime
    if (still) return
    b.y += dt * (0.25 + 0.15 / b.r)
    b.x += Math.sin(s.clock.elapsedTime + b.seed) * dt * 0.2
    ref.current.position.set(b.x, b.y, b.z)
    if (b.y > 3.2) Object.assign(b, spawn())
  })
  return (
    <mesh ref={ref} position={[b.x, b.y, b.z]} onClick={(e) => { e.stopPropagation(); onPop(b, ref.current.position.clone()) }}>
      <sphereGeometry args={[b.r, 48, 48]} />
      <shaderMaterial vertexShader={vert} fragmentShader={frag} uniforms={uniforms} transparent depthWrite={false} />
    </mesh>
  )
}

function Splash({ at, onDone }: { at: THREE.Vector3; onDone: () => void }) {
  const g = useRef<THREE.Group>(null!)
  const t = useRef(0)
  const dirs = useMemo(() => Array.from({ length: 14 }, (_, i) => new THREE.Vector3(Math.cos((i / 14) * Math.PI * 2), Math.sin((i / 14) * Math.PI * 2), (Math.random() - 0.5) * 0.6)), [])
  useFrame((_, dt) => {
    t.current += dt
    g.current.children.forEach((c, i) => c.position.copy(dirs[i]).multiplyScalar(t.current * 1.6))
    g.current.scale.setScalar(Math.max(0.001, 1 - t.current * 2))
    if (t.current > 0.5) onDone()
  })
  return (
    <group ref={g} position={at}>
      {dirs.map((_, i) => (
        <mesh key={i}>
          <sphereGeometry args={[0.035, 8, 8]} />
          <meshBasicMaterial color="#e0f2fe" />
        </mesh>
      ))}
    </group>
  )
}

export default function SoapBubbles() {
  const [bubbles, setBubbles] = useState<B[]>(() => Array.from({ length: 12 }, () => spawn(-2.6 + Math.random() * 5.5)))
  const [splashes, setSplashes] = useState<{ id: number; at: THREE.Vector3 }[]>([])
  const [popped, setPopped] = useState(0)
  return (
    <div className="relative">
      <div className="h-96 cursor-pointer overflow-hidden rounded-xl bg-gradient-to-b from-sky-950 to-indigo-950" role="img" aria-label="Iridescent soap bubbles drifting up; click to pop">
        <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 0, 6], fov: 50 }}>
          {bubbles.map((b) => (
            <Bubble
              key={b.id}
              b={b}
              onPop={(bb, p) => {
                setSplashes((s) => [...s, { id: bb.id, at: p }])
                setBubbles((all) => all.map((x) => (x.id === bb.id ? spawn() : x)))
                setPopped((n) => n + 1)
              }}
            />
          ))}
          {splashes.map((s) => <Splash key={s.id} at={s.at} onDone={() => setSplashes((all) => all.filter((x) => x.id !== s.id))} />)}
        </Canvas>
      </div>
      <p aria-live="polite" className="absolute top-3 right-3 rounded-full bg-black/50 px-3 py-1 font-mono text-xs text-white">popped: {popped}</p>
    </div>
  )
}
```

# Scroll fly-through on a 3D path
> Scroll moves the camera along a CatmullRom spline past image cards, looking ahead so it banks through turns.
- **Category:** 3D Motion
- **Slug:** spline-flythrough
- **Tags:** scroll, camera path, spline, fly through, gallery, storytelling
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook), public/img/*.webp
- **Live demo:** https://ui-lab-weld.vercel.app/#/spline-flythrough
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/SplineFlythrough.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/SplineFlythrough.tsx

## When to use
- Storytelling, case studies, timelines

## Accessibility

Focusable scroll container; content images are decorative; provide the same content as a list elsewhere.


## Source
`src/patterns/motion3d/SplineFlythrough.tsx`
```tsx
import { useEffect, useMemo, useRef } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import * as THREE from 'three'

/*
 * Scroll-driven camera flight along a 3D spline. A closed CatmullRom curve
 * winds through space; image cards hang along it. Scroll progress (0..1)
 * maps to a point on the curve; the camera eases to that point and looks a
 * little further ahead along the curve, so it banks through the turns.
 * The path itself is drawn as a thin glowing tube.
 */

const CARDS = 10

function Flight({ progress }: { progress: React.MutableRefObject<number> }) {
  const curve = useMemo(
    () => new THREE.CatmullRomCurve3([[0, 0, 0], [4, 1, -6], [0, 3, -12], [-5, 1, -16], [-3, -2, -24], [3, 0, -30], [6, 3, -36], [0, 2, -42]].map(([x, y, z]) => new THREE.Vector3(x, y, z))),
    [],
  )
  const tube = useMemo(() => new THREE.TubeGeometry(curve, 300, 0.02, 6, false), [curve])
  const texs = useMemo(() => {
    const l = new THREE.TextureLoader()
    return Array.from({ length: CARDS }, (_, i) => {
      const t = l.load(`/img/${(i * 5 + 3) % 48}.webp`)
      t.colorSpace = THREE.SRGBColorSpace
      return t
    })
  }, [])
  const cards = useMemo(
    () =>
      Array.from({ length: CARDS }, (_, i) => {
        const u = (i + 0.6) / (CARDS + 0.5)
        const p = curve.getPointAt(u)
        const side = i % 2 ? 1 : -1
        const tan = curve.getTangentAt(u)
        const offset = new THREE.Vector3().crossVectors(tan, new THREE.Vector3(0, 1, 0)).normalize().multiplyScalar(1.3 * side)
        return { pos: p.add(offset).add(new THREE.Vector3(0, 0.3, 0)), look: curve.getPointAt(Math.max(0, u - 0.03)) }
      }),
    [curve],
  )
  const cur = useRef(0)
  useFrame((s, dt) => {
    cur.current = THREE.MathUtils.damp(cur.current, progress.current, 3, dt)
    const u = Math.min(0.96, cur.current * 0.96)
    s.camera.position.copy(curve.getPointAt(u)).add(new THREE.Vector3(0, 0.7, 0))
    s.camera.lookAt(curve.getPointAt(Math.min(1, u + 0.035)).add(new THREE.Vector3(0, 0.45, 0)))
  })
  return (
    <>
      <mesh geometry={tube}>
        <meshBasicMaterial color="#818cf8" />
      </mesh>
      {cards.map((c, i) => (
        <mesh key={i} position={c.pos} onUpdate={(m) => m.lookAt(c.look)}>
          <planeGeometry args={[1.4, 1.8]} />
          <meshBasicMaterial map={texs[i]} side={THREE.DoubleSide} />
        </mesh>
      ))}
    </>
  )
}

export default function SplineFlythrough() {
  const box = useRef<HTMLDivElement>(null)
  const progress = useRef(0)
  useEffect(() => {
    const el = box.current!
    const on = () => (progress.current = el.scrollTop / (el.scrollHeight - el.clientHeight || 1))
    el.addEventListener('scroll', on, { passive: true })
    return () => el.removeEventListener('scroll', on)
  }, [])
  return (
    <div ref={box} className="relative h-96 overflow-y-auto rounded-xl bg-[#05040f]" tabIndex={0} aria-label="Camera flies along a 3D path past image cards as you scroll inside">
      <div className="h-[600%]">
        <div className="sticky top-0 h-96">
          <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ fov: 60, position: [0, 0.25, 0] }}>
            <fog attach="fog" args={['#05040f', 4, 18]} />
            <Flight progress={progress} />
          </Canvas>
          <p className="pointer-events-none absolute bottom-3 w-full text-center font-mono text-xs text-white/60">scroll ↓ to fly</p>
        </div>
      </div>
    </div>
  )
}
```

# Holographic foil card
> A trading card with a foil shader: rainbow sheen, sparkles and glare shift with tilt as it follows the cursor.
- **Category:** 3D Motion
- **Slug:** hologram-card
- **Tags:** holographic, foil, shader, card, tilt, sparkle
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/hologram-card
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/HologramCard.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/HologramCard.tsx

## When to use
- Collectibles, membership / pass cards, premium tiers

## Accessibility

Canvas labelled; card text should also be available as HTML.


## Source
`src/patterns/motion3d/HologramCard.tsx`
```tsx
import { useMemo, useRef } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { RoundedBox } from '@react-three/drei'
import * as THREE from 'three'
import { useWindowPointer } from './_pointer'

/*
 * Holographic trading card: a foil shader whose rainbow sheen depends on the
 * card's tilt (view angle) and the pointer position, plus diagonal sparkle
 * bands and a glare spot, the way real holo foil shifts as you turn it. The
 * card tilts toward the cursor in 3D. Artwork is a canvas texture.
 */

const frag = /* glsl */ `
uniform sampler2D uArt; uniform vec2 uTilt; uniform float uTime;
varying vec2 vUv;
float h(vec2 p){ return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); }
void main(){
  vec3 art = texture2D(uArt, vUv).rgb;
  float band = vUv.x * 1.2 + vUv.y * 0.8 + uTilt.x * 1.5 - uTilt.y * 1.2;
  vec3 rainbow = 0.5 + 0.5 * cos(6.2831 * (band + vec3(0., .33, .67)));
  float stripes = smoothstep(0.4, 1., sin((vUv.x - vUv.y) * 60. + uTilt.x * 20.) * .5 + .5);
  float sparkle = step(0.985, h(floor(vUv * 180.))) * (0.5 + 0.5 * sin(uTime * 5. + h(floor(vUv * 180.)) * 30.));
  vec2 g = vec2(0.5 + uTilt.x * 1.2, 0.5 - uTilt.y * 1.2);
  float glare = exp(-distance(vUv, g) * 5.) * 0.6;
  vec3 col = art + rainbow * (0.22 + stripes * 0.25) + sparkle + glare;
  gl_FragColor = vec4(col, 1.);
}`
const vert = /* glsl */ `varying vec2 vUv; void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.); }`

function art() {
  const c = document.createElement('canvas')
  c.width = 500
  c.height = 700
  const g = c.getContext('2d')!
  const grd = g.createLinearGradient(0, 0, 0, 700)
  grd.addColorStop(0, '#1e1b4b')
  grd.addColorStop(1, '#4c1d95')
  g.fillStyle = grd
  g.fillRect(0, 0, 500, 700)
  g.strokeStyle = '#fbbf24'
  g.lineWidth = 10
  g.strokeRect(20, 20, 460, 660)
  g.fillStyle = '#fef3c7'
  g.font = 'bold 44px Georgia, serif'
  g.fillText('Lumen Drake', 50, 90)
  g.fillStyle = '#f59e0b'
  g.beginPath()
  g.moveTo(250, 170); g.lineTo(380, 380); g.lineTo(250, 330); g.lineTo(120, 380); g.closePath()
  g.fill()
  g.fillStyle = '#e9d5ff'
  g.font = '28px system-ui'
  g.fillText('★★★★★  LEGENDARY', 60, 560)
  g.font = '22px system-ui'
  g.fillText('Turns light into wishes.', 60, 610)
  const t = new THREE.CanvasTexture(c)
  t.colorSpace = THREE.SRGBColorSpace
  return t
}

function Card() {
  const g = useRef<THREE.Group>(null!)
  const pointer = useWindowPointer()
  const uniforms = useMemo(() => ({ uArt: { value: art() }, uTilt: { value: new THREE.Vector2() }, uTime: { value: 0 } }), [])
  useFrame((s, dt) => {
    g.current.rotation.y = THREE.MathUtils.damp(g.current.rotation.y, pointer.current.x * 0.55, 5, dt)
    g.current.rotation.x = THREE.MathUtils.damp(g.current.rotation.x, -pointer.current.y * 0.45, 5, dt)
    uniforms.uTilt.value.set(g.current.rotation.y, g.current.rotation.x)
    uniforms.uTime.value = s.clock.elapsedTime
  })
  return (
    <group ref={g}>
      <RoundedBox args={[2.1, 2.94, 0.04]} radius={0.1}>
        <meshStandardMaterial color="#d4d4d8" metalness={0.8} roughness={0.3} />
      </RoundedBox>
      <mesh position={[0, 0, 0.022]}>
        <planeGeometry args={[2.0, 2.84]} />
        <shaderMaterial vertexShader={vert} fragmentShader={frag} uniforms={uniforms} />
      </mesh>
    </group>
  )
}

export default function HologramCard() {
  return (
    <div className="h-[26rem] overflow-hidden rounded-xl bg-gradient-to-b from-zinc-900 to-black" role="img" aria-label="Holographic trading card whose foil shimmers as it tilts toward the cursor">
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 0, 5], fov: 45 }}>
        <ambientLight intensity={0.8} />
        <directionalLight position={[2, 3, 4]} intensity={1.5} />
        <Card />
      </Canvas>
    </div>
  )
}
```

# Marbles with cursor gravity
> 60 glossy marbles are pulled to the cursor, collide and cluster; hold the mouse button to repel.
- **Category:** 3D Motion
- **Slug:** marble-gravity
- **Tags:** physics, collision, gravity, marbles, instancedmesh, cursor
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/marble-gravity
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/MarbleGravity.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/MarbleGravity.tsx

## When to use
- Playful heroes, physics toys, 'attract' metaphors

## Accessibility

Decorative canvas with label.


## Source
`src/patterns/motion3d/MarbleGravity.tsx`
```tsx
import { useEffect, useMemo, useRef } from 'react'
import { Canvas, useFrame, useThree } from '@react-three/fiber'
import * as THREE from 'three'

/*
 * Marbles with gravity toward the cursor: 60 glossy spheres are pulled to
 * the pointer (on the z=0 plane), collide with each other (pairwise sphere
 * separation + velocity exchange), and pile into a squishy cluster that
 * follows the cursor around. Hold the mouse button to repel instead.
 * Plain Euler integration, no physics engine.
 */

const N = 60

function Marbles() {
  const mesh = useRef<THREE.InstancedMesh>(null!)
  const { camera, pointer, raycaster } = useThree()
  const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 0, 1), 0), [])
  const goal = useMemo(() => new THREE.Vector3(), [])
  const down = useRef(false)
  useEffect(() => {
    const up = () => (down.current = false)
    addEventListener('pointerup', up)
    return () => removeEventListener('pointerup', up)
  }, [])
  const balls = useMemo(
    () => Array.from({ length: N }, (_, i) => ({ p: new THREE.Vector3((Math.random() - 0.5) * 6, (Math.random() - 0.5) * 3, 0), v: new THREE.Vector3(), r: 0.14 + (i % 4) * 0.05 })),
    [],
  )
  const tmp = useMemo(() => ({ m: new THREE.Matrix4(), q: new THREE.Quaternion(), c: new THREE.Color() }), [])
  useFrame((_, dt) => {
    const h = Math.min(dt, 1 / 30)
    raycaster.setFromCamera(pointer, camera)
    raycaster.ray.intersectPlane(plane, goal)
    for (const b of balls) {
      const d = goal.clone().sub(b.p)
      const dist = Math.max(0.3, d.length())
      b.v.addScaledVector(d.normalize(), (down.current ? -12 : 6) * h / Math.sqrt(dist))
      b.v.z -= b.p.z * 4 * h
      b.v.multiplyScalar(0.96)
    }
    for (let i = 0; i < N; i++) {
      for (let j = i + 1; j < N; j++) {
        const a = balls[i], b = balls[j]
        const d = b.p.clone().sub(a.p)
        const len = d.length()
        const min = a.r + b.r
        if (len < min && len > 0) {
          const n = d.divideScalar(len)
          const push = (min - len) / 2
          a.p.addScaledVector(n, -push)
          b.p.addScaledVector(n, push)
          const rel = b.v.clone().sub(a.v).dot(n)
          if (rel < 0) {
            a.v.addScaledVector(n, rel * 0.9)
            b.v.addScaledVector(n, -rel * 0.9)
          }
        }
      }
    }
    balls.forEach((b, i) => {
      b.p.addScaledVector(b.v, h)
      tmp.m.compose(b.p, tmp.q, new THREE.Vector3(b.r, b.r, b.r))
      mesh.current.setMatrixAt(i, tmp.m)
      mesh.current.setColorAt(i, tmp.c.setHSL((i * 0.137) % 1, 0.75, 0.55))
    })
    mesh.current.instanceMatrix.needsUpdate = true
    if (mesh.current.instanceColor) mesh.current.instanceColor.needsUpdate = true
  })
  return (
    <instancedMesh
      ref={mesh}
      args={[undefined, undefined, N]}
      onPointerDown={() => (down.current = true)}
    >
      <sphereGeometry args={[1, 32, 32]} />
      <meshPhysicalMaterial clearcoat={1} roughness={0.15} />
    </instancedMesh>
  )
}

export default function MarbleGravity() {
  return (
    <div className="h-96 cursor-crosshair overflow-hidden rounded-xl bg-[#0a0a12]" role="img" aria-label="Colourful marbles pulled toward the cursor, colliding into a cluster">
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 0, 7], fov: 45 }}>
        <ambientLight intensity={0.5} />
        <directionalLight position={[3, 4, 5]} intensity={2.2} />
        <pointLight position={[-4, -2, 3]} intensity={15} color="#93c5fd" />
        <Marbles />
      </Canvas>
      <p className="-mt-7 text-center font-mono text-xs text-white/50">hold mouse button over a marble to repel</p>
    </div>
  )
}
```

# Kinetic typography ring
> Bands of looping text wrap around cylinders, spinning in alternate directions around a chrome knot, tilting with the cursor.
- **Category:** 3D Motion
- **Slug:** kinetic-type-ring
- **Tags:** kinetic typography, text, cylinder, loop, rotate
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook)
- **Live demo:** https://ui-lab-weld.vercel.app/#/kinetic-type-ring
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/KineticTypeRing.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/KineticTypeRing.tsx

## When to use
- Agency / brand manifesto sections, event posters

## Accessibility

The words are in the aria-label; spin stops under reduced motion.


## Source
`src/patterns/motion3d/KineticTypeRing.tsx`
```tsx
import { useMemo, useRef } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import * as THREE from 'three'
import { reducedMotion, useWindowPointer } from './_pointer'

/*
 * Kinetic typography: three bands of text wrapped around open cylinders,
 * spinning in alternating directions at different speeds around a central
 * glossy object, while the stack tilts toward the cursor. Each band is a
 * repeating CanvasTexture (wrapS = Repeat), so the text loops seamlessly.
 */

function bandTex(text: string, fg: string, bg: string) {
  const c = document.createElement('canvas')
  c.width = 2048
  c.height = 128
  const g = c.getContext('2d')!
  g.fillStyle = bg
  g.fillRect(0, 0, 2048, 128)
  g.fillStyle = fg
  g.font = 'bold 84px system-ui, sans-serif'
  g.textBaseline = 'middle'
  const unit = `${text} ✦ `
  let x = 0
  while (x < 2048) {
    g.fillText(unit, x, 68)
    x += g.measureText(unit).width
  }
  const t = new THREE.CanvasTexture(c)
  t.wrapS = THREE.RepeatWrapping
  t.colorSpace = THREE.SRGBColorSpace
  return t
}

const BANDS = [
  { text: 'DESIGN', fg: '#0a0a0a', bg: '#facc15', y: 0.75, speed: 0.4 },
  { text: 'MOTION', fg: '#ffffff', bg: '#7c3aed', y: 0, speed: -0.55 },
  { text: 'CODE', fg: '#0a0a0a', bg: '#22d3ee', y: -0.75, speed: 0.3 },
]

function Ring() {
  const g = useRef<THREE.Group>(null!)
  const bands = useRef<(THREE.Mesh | null)[]>([])
  const texs = useMemo(() => BANDS.map((b) => bandTex(b.text, b.fg, b.bg)), [])
  const pointer = useWindowPointer()
  const still = reducedMotion()
  useFrame((_, dt) => {
    if (!still) bands.current.forEach((m, i) => m && (m.rotation.y += dt * BANDS[i].speed))
    g.current.rotation.z = THREE.MathUtils.damp(g.current.rotation.z, -0.25 - pointer.current.x * 0.25, 3, dt)
    g.current.rotation.x = THREE.MathUtils.damp(g.current.rotation.x, 0.25 - pointer.current.y * 0.3, 3, dt)
  })
  return (
    <group ref={g}>
      {BANDS.map((b, i) => (
        <mesh key={b.text} ref={(el) => { bands.current[i] = el }} position={[0, b.y, 0]}>
          <cylinderGeometry args={[1.6, 1.6, 0.62, 96, 1, true]} />
          <meshStandardMaterial map={texs[i]} side={THREE.DoubleSide} roughness={0.6} />
        </mesh>
      ))}
      <mesh>
        <torusKnotGeometry args={[0.45, 0.16, 160, 24]} />
        <meshPhysicalMaterial color="#e5e7eb" metalness={1} roughness={0.12} clearcoat={1} />
      </mesh>
    </group>
  )
}

export default function KineticTypeRing() {
  return (
    <div className="h-96 overflow-hidden rounded-xl bg-[#111]" role="img" aria-label="Rings of text reading design, motion, code spinning around a chrome knot">
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 0, 5.5], fov: 45 }}>
        <ambientLight intensity={0.9} />
        <directionalLight position={[3, 4, 5]} intensity={1.5} />
        <pointLight position={[-3, 0, 2]} intensity={20} color="#f472b6" />
        <Ring />
      </Canvas>
    </div>
  )
}
```

# Click-to-shatter glass
> An image pane breaks into radial shards around the click point, which fly, spin and fall, then the pane restores.
- **Category:** 3D Motion
- **Slug:** glass-shatter
- **Tags:** shatter, glass, shards, click, physics, image
- **Dependencies:** three, @react-three/fiber, @react-three/drei, motion3d/_pointer.ts (window pointer hook), public/img/*.webp
- **Live demo:** https://ui-lab-weld.vercel.app/#/glass-shatter
- **Raw source:** https://ui-lab-weld.vercel.app/raw/motion3d/GlassShatter.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/motion3d/GlassShatter.tsx

## When to use
- Bold reveals, game UI, 'break the mould' campaigns

## Accessibility

Decorative; avoid using it on essential content.


## Source
`src/patterns/motion3d/GlassShatter.tsx`
```tsx
import { useMemo, useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import * as THREE from 'three'

/*
 * Click to shatter: a pane of glass showing an image breaks into triangular
 * shards around the click point (a fan of radial cracks plus rings, so
 * shards are smaller near impact), which fly outward, spin and fall under
 * gravity, then the pane restores itself. Each shard keeps the slice of
 * the image texture it covered (UVs from its original position).
 */

type Shard = { geo: THREE.BufferGeometry; c: THREE.Vector3; v: THREE.Vector3; w: THREE.Vector3 }
const W = 3.6, H = 2.4

function build(hx: number, hy: number): Shard[] {
  const rays = 16
  const rings = [0.25, 0.6, 1.1, 1.9, 4]
  const pt = (r: number, a: number) => new THREE.Vector2(THREE.MathUtils.clamp(hx + Math.cos(a) * r, -W / 2, W / 2), THREE.MathUtils.clamp(hy + Math.sin(a) * r, -H / 2, H / 2))
  const angles = Array.from({ length: rays }, (_, i) => (i / rays) * Math.PI * 2 + (Math.random() - 0.5) * 0.25)
  const out: Shard[] = []
  const tri = (a: THREE.Vector2, b: THREE.Vector2, c: THREE.Vector2) => {
    if (Math.abs((b.x - a.x) * (c.y - a.y) - (c.x - a.x) * (b.y - a.y)) < 1e-4) return
    const centre = new THREE.Vector3((a.x + b.x + c.x) / 3, (a.y + b.y + c.y) / 3, 0)
    const pos = new Float32Array([a.x - centre.x, a.y - centre.y, 0, b.x - centre.x, b.y - centre.y, 0, c.x - centre.x, c.y - centre.y, 0])
    const uv = new Float32Array([a.x / W + 0.5, a.y / H + 0.5, b.x / W + 0.5, b.y / H + 0.5, c.x / W + 0.5, c.y / H + 0.5])
    const geo = new THREE.BufferGeometry()
    geo.setAttribute('position', new THREE.BufferAttribute(pos, 3))
    geo.setAttribute('uv', new THREE.BufferAttribute(uv, 2))
    geo.computeVertexNormals()
    const dir = new THREE.Vector3(centre.x - hx, centre.y - hy, 0).normalize()
    const near = 1 / (0.4 + Math.hypot(centre.x - hx, centre.y - hy))
    out.push({ geo, c: centre, v: dir.multiplyScalar(1.2 * near).add(new THREE.Vector3(0, 0.6, 1.5 + Math.random() * 2)), w: new THREE.Vector3(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).multiplyScalar(8) })
  }
  const centre = new THREE.Vector2(hx, hy)
  for (let k = 0; k < rays; k++) {
    const a0 = angles[k], a1 = angles[(k + 1) % rays]
    tri(centre, pt(rings[0], a0), pt(rings[0], a1))
    for (let r = 0; r < rings.length - 1; r++) {
      const p00 = pt(rings[r], a0), p01 = pt(rings[r], a1), p10 = pt(rings[r + 1], a0), p11 = pt(rings[r + 1], a1)
      tri(p00, p10, p11)
      tri(p00, p11, p01)
    }
  }
  return out
}

function Pane() {
  const tex = useMemo(() => {
    const t = new THREE.TextureLoader().load('/img/12.webp')
    t.colorSpace = THREE.SRGBColorSpace
    return t
  }, [])
  const [shards, setShards] = useState<Shard[] | null>(null)
  const t = useRef(0)
  const meshes = useRef<(THREE.Mesh | null)[]>([])
  useFrame((_, dt) => {
    if (!shards) return
    t.current += dt
    const time = t.current
    shards.forEach((s, i) => {
      const m = meshes.current[i]
      if (!m) return
      m.position.set(s.c.x + s.v.x * time, s.c.y + s.v.y * time - 4.9 * time * time, s.c.z + s.v.z * time)
      m.rotation.set(s.w.x * time, s.w.y * time, s.w.z * time)
    })
    if (time > 1.8) setShards(null)
  })
  return shards ? (
    <>
      {shards.map((s, i) => (
        <mesh key={i} ref={(el) => { meshes.current[i] = el }} geometry={s.geo} position={s.c}>
          <meshStandardMaterial map={tex} side={THREE.DoubleSide} metalness={0.1} roughness={0.2} />
        </mesh>
      ))}
    </>
  ) : (
    <mesh
      onClick={(e) => {
        t.current = 0
        setShards(build(e.point.x, e.point.y))
      }}
    >
      <planeGeometry args={[W, H]} />
      <meshStandardMaterial map={tex} roughness={0.15} metalness={0.1} />
    </mesh>
  )
}

export default function GlassShatter() {
  return (
    <div className="h-96 cursor-pointer overflow-hidden rounded-xl bg-[#0b0b0f]" role="img" aria-label="Image on a glass pane that shatters into shards where you click, then restores">
      <Canvas resize={{ offsetSize: true }} dpr={[1, 1.5]} camera={{ position: [0, 0, 4.2], fov: 45 }}>
        <ambientLight intensity={1.1} />
        <directionalLight position={[2, 3, 4]} intensity={1.5} />
        <Pane />
      </Canvas>
      <p className="-mt-7 text-center font-mono text-xs text-white/50">click the glass</p>
    </div>
  )
}
```

# Bento grid
> Six-column grid with mixed tile spans and dense packing. Collapses to one column on phones.
- **Category:** Layouts
- **Slug:** bento-grid
- **Tags:** bento, grid, features, layout, dashboard summary
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/bento-grid
- **Raw source:** https://ui-lab-weld.vercel.app/raw/layouts/BentoGrid.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/layouts/BentoGrid.tsx

## When to use
- Feature overviews and dashboard summaries
- Landing sections that need hierarchy without a long list

## Accessibility

Source order = reading order; collapses to a single column.


## Source
`src/patterns/layouts/BentoGrid.tsx`
```tsx
import type { ReactNode } from 'react'

/*
 * Bento grid: a 6-column grid where tiles span different widths/heights.
 * grid-auto-flow: dense backfills gaps so uneven tiles still pack tightly.
 * Collapses to a single column on small screens.
 */

export function BentoGrid({ children }: { children: ReactNode }) {
  return <div className="grid auto-rows-[10rem] grid-cols-1 gap-3 [grid-auto-flow:dense] sm:grid-cols-6">{children}</div>
}

export function BentoTile({
  span = 'sm:col-span-2',
  className = '',
  children,
}: {
  span?: string
  className?: string
  children: ReactNode
}) {
  return (
    <div className={`relative overflow-hidden rounded-xl border border-border bg-surface p-5 ${span} ${className}`}>
      {children}
    </div>
  )
}

const Label = ({ k, v }: { k: string; v: string }) => (
  <>
    <p className="font-mono text-[11px] uppercase tracking-wider text-fg-muted">{k}</p>
    <p className="mt-1 text-lg font-medium">{v}</p>
  </>
)

export default function BentoDemo() {
  return (
    <BentoGrid>
      <BentoTile span="sm:col-span-4 sm:row-span-2" className="flex flex-col justify-end bg-gradient-to-br from-accent/25 to-transparent">
        <p className="font-display text-4xl italic">Your day, reconstructed.</p>
        <p className="mt-2 max-w-sm text-sm text-fg-muted">Lead tile: 4 columns × 2 rows. Put the one thing you want seen here.</p>
      </BentoTile>
      <BentoTile>
        <Label k="Sources" v="12 connected" />
      </BentoTile>
      <BentoTile>
        <Label k="Accuracy" v="97.4%" />
      </BentoTile>
      <BentoTile span="sm:col-span-3">
        <Label k="Latency" v="180ms median" />
      </BentoTile>
      <BentoTile span="sm:col-span-3">
        <Label k="Export" v="JSON · CSV · Live page" />
      </BentoTile>
    </BentoGrid>
  )
}
```

# Article with sticky contents list
> A reading layout with a 65-character measure, a sticky table of contents that marks the current section, reading time and generous leading.
- **Category:** Layouts
- **Slug:** article-layout
- **Tags:** article, reading, toc, scrollspy, typography
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/article-layout
- **Raw source:** https://ui-lab-weld.vercel.app/raw/layouts/ArticleLayout.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/layouts/ArticleLayout.tsx

## When to use
- Blog posts, docs and long reads
- Read-mode pages

## Accessibility

The contents list is a labelled nav with aria-current; links jump with plain anchors; smooth scrolling is off under reduced motion; headings are in order.


## Source
`src/patterns/layouts/ArticleLayout.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'

/*
 * An article layout built for reading: a measure of about 65 characters, a sticky table of contents that marks the
 * section you are in (IntersectionObserver, aria-current), heading anchors, reading time, and generous line height.
 * The contents list is a real nav of real links; without script it still jumps to the sections.
 */

const SECTIONS = [
  ['why', 'Why a measure matters', 'Lines of text that run too long make the eye lose its place on the way back to the next line. Around sixty-five characters is comfortable for most readers. On a wide screen, do not stretch the text. Leave the margin empty, and put something useful in it: a contents list, a note, a figure.'],
  ['leading', 'Line height is a kindness', 'Body text wants roughly one and a half times its size between lines. Headings want less. The difference between a page that feels crowded and one that feels calm is often only this number.'],
  ['links', 'Links that say where they go', 'A link should make sense out of context. “Read the accessibility checklist” works; “click here” does not. Underline links in running text, and keep a visible focus ring for people who navigate by keyboard.'],
  ['end', 'Ending well', 'Finish with the one thing the reader should do or remember. Then stop. A footer of related links is useful; a wall of them is not.'],
] as const

export default function ArticleLayout() {
  const [active, setActive] = useState<string>(SECTIONS[0][0])
  const box = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const root = box.current!
    const io = new IntersectionObserver(
      (es) => {
        const v = es.filter((e) => e.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)[0]
        if (v) setActive(v.target.id.replace('art-', ''))
      },
      { root, rootMargin: '0px 0px -65% 0px' },
    )
    SECTIONS.forEach(([id]) => {
      const el = root.querySelector(`#art-${id}`)
      if (el) io.observe(el)
    })
    return () => io.disconnect()
  }, [])

  const words = SECTIONS.reduce((n, s) => n + s[2].split(' ').length, 0)

  return (
    <div className="overflow-hidden rounded-xl border border-border bg-bg">
      <div ref={box} tabIndex={0} role="region" aria-label="Article, scrolls" className="grid max-h-[26rem] gap-8 overflow-y-auto p-6 md:grid-cols-[11rem_minmax(0,1fr)]">
        <nav aria-label="On this page" className="md:sticky md:top-0 md:self-start">
          <p className="text-xs font-medium tracking-wider text-fg-muted uppercase">On this page</p>
          <ol className="mt-2 space-y-1 text-sm">
            {SECTIONS.map(([id, title]) => (
              <li key={id}>
                <a
                  href={`#art-${id}`}
                  onClick={(e) => {
                    e.preventDefault()
                    box.current?.querySelector(`#art-${id}`)?.scrollIntoView({ behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' })
                  }}
                  aria-current={active === id ? 'true' : undefined}
                  className={`block min-h-8 rounded px-2 py-1 ${active === id ? 'bg-accent-soft font-medium text-accent' : 'text-fg-muted hover:text-fg'}`}
                >
                  {title}
                </a>
              </li>
            ))}
          </ol>
        </nav>
        <article className="max-w-[65ch]">
          <h3 className="text-3xl leading-tight font-semibold tracking-tight">Setting text people can read</h3>
          <p className="mt-2 text-sm text-fg-muted">{Math.max(1, Math.round(words / 200))} min read · Updated October</p>
          {SECTIONS.map(([id, title, body]) => (
            <section key={id} id={`art-${id}`} className="mt-8 scroll-mt-2" aria-labelledby={`art-h-${id}`}>
              <h4 id={`art-h-${id}`} className="text-xl font-semibold">{title}</h4>
              <p className="mt-2 text-[17px] leading-[1.65]">{body}</p>
            </section>
          ))}
        </article>
      </div>
    </div>
  )
}
```

# Layout primitives (stack, cluster, sidebar…)
> Six tiny CSS layouts (stack, cluster, sidebar, switcher, center, auto grid) that respond to available space with no media queries.
- **Category:** Layouts
- **Slug:** layout-primitives
- **Tags:** layout, flexbox, grid, css, responsive
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/layout-primitives
- **Raw source:** https://ui-lab-weld.vercel.app/raw/layouts/LayoutPrimitives.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/layouts/LayoutPrimitives.tsx

## When to use
- Page structure that adapts to its container
- Replacing ad-hoc margins with a few reusable layouts

## Accessibility

Pure layout, no motion. Content order matches reading order in every arrangement.


## Source
`src/patterns/layouts/LayoutPrimitives.tsx`
```tsx
/*
 * Layout primitives: six small CSS layouts that answer most page-structure questions with no media queries. Stack
 * (vertical rhythm), Cluster (wrapping row), Sidebar (a fixed-width side that stacks when there is no room), Switcher
 * (a row that becomes a column below a width), Center (a readable column) and Auto grid (columns that fit). They use
 * flex-wrap, gap, min() and auto-fit, so they respond to the space they are in, not to the viewport.
 */

const Box = ({ children, h }: { children: React.ReactNode; h?: string }) => (
  <div className="grid place-items-center rounded-md border border-border bg-accent-soft px-3 py-2 text-xs font-medium text-accent" style={{ minHeight: h }}>{children}</div>
)

function Demo({ name, rule, children }: { name: string; rule: string; children: React.ReactNode }) {
  return (
    <section className="rounded-xl border border-border bg-surface p-4">
      <h3 className="text-sm font-semibold">{name}</h3>
      <p className="mt-0.5 font-mono text-[11px] text-fg-muted">{rule}</p>
      <div className="mt-3 overflow-hidden rounded-lg border border-dashed border-border p-2">{children}</div>
    </section>
  )
}

export default function LayoutPrimitives() {
  return (
    <div className="grid gap-4 md:grid-cols-2">
      <Demo name="Stack" rule="display:flex; flex-direction:column; gap:1rem">
        <div className="flex flex-col gap-3"><Box>One</Box><Box>Two</Box><Box>Three</Box></div>
      </Demo>
      <Demo name="Cluster" rule="display:flex; flex-wrap:wrap; gap:.5rem">
        <div className="flex flex-wrap gap-2">{['design', 'type', 'motion', 'access', 'colour', 'layout', 'forms', 'tables'].map((t) => <Box key={t}>{t}</Box>)}</div>
      </Demo>
      <Demo name="Sidebar" rule="flex-wrap; side flex-basis:10rem; main flex-basis:0; flex-grow:999">
        <div className="flex flex-wrap gap-3">
          <div className="grow basis-40"><Box h="5rem">Side</Box></div>
          <div className="basis-0 grow-[999] [min-inline-size:50%]"><Box h="5rem">Main content</Box></div>
        </div>
      </Demo>
      <Demo name="Switcher" rule="flex-wrap; each flex-basis: calc((30rem - 100%) * 999)">
        <div className="flex flex-wrap gap-3">{['A', 'B', 'C'].map((t) => <div key={t} className="grow" style={{ flexBasis: 'calc((26rem - 100%) * 999)' }}><Box h="3.5rem">{t}</Box></div>)}</div>
      </Demo>
      <Demo name="Center" rule="max-inline-size:40ch; margin-inline:auto">
        <div className="mx-auto" style={{ maxInlineSize: '40ch' }}><Box h="5rem">A readable column</Box></div>
      </Demo>
      <Demo name="Auto grid" rule="grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr))">
        <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 7rem), 1fr))' }}>{Array.from({ length: 6 }, (_, i) => <Box key={i} h="3rem">{i + 1}</Box>)}</div>
      </Demo>
    </div>
  )
}
```

# Masonry with CSS columns
> Cards of different heights packed into columns with CSS only. Notes the one catch: order runs down each column, not across.
- **Category:** Layouts
- **Slug:** masonry-columns
- **Tags:** masonry, columns, gallery, css, layout
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/masonry-columns
- **Raw source:** https://ui-lab-weld.vercel.app/raw/layouts/MasonryColumns.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/layouts/MasonryColumns.tsx

## When to use
- Image and card galleries where order does not matter
- Avoiding a masonry script

## Accessibility

Reading order is down each column in both the visual layout and the DOM; do not use it for ranked or numbered lists.


## Source
`src/patterns/layouts/MasonryColumns.tsx`
```tsx
/*
 * A masonry layout with CSS columns: items of different heights pack into columns with no JavaScript. The catch to know
 * about: columns fill top to bottom, so the visual order is down each column, not across. That is fine for a gallery and
 * wrong for anything numbered or ranked. `break-inside: avoid` keeps each card whole. Column count follows the width.
 */

const ITEMS = [
  ['Notes on kerning', 120], ['A field guide', 200], ['Three small rules', 90], ['The long read', 260], ['Colour, briefly', 140],
  ['Why margins matter', 180], ['Fonts we love', 110], ['A short list', 80], ['On line length', 220], ['Sketchbook', 150],
] as const

export default function MasonryColumns() {
  return (
    <div className="[column-gap:1rem] [columns:2_9rem] md:[columns:3_11rem]">
      {ITEMS.map(([t, h], i) => (
        <article key={t} className="mb-4 break-inside-avoid rounded-xl border border-border bg-surface p-4" style={{ minHeight: h }}>
          <p className="font-mono text-[11px] text-fg-muted">{String(i + 1).padStart(2, '0')}</p>
          <h3 className="mt-1 font-semibold">{t}</h3>
          <p className="mt-1 text-sm text-fg-muted">Cards keep their natural height, and the columns settle around them.</p>
        </article>
      ))}
    </div>
  )
}
```

# Pricing tiers
> Three plans with a monthly/yearly radiogroup, featured middle card, tick lists and a ghost wordmark.
- **Category:** Sections
- **Slug:** pricing-tiers
- **Tags:** pricing, plans, section, billing toggle, saas
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/pricing-tiers
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sections/PricingTiers.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sections/PricingTiers.tsx

## When to use
- SaaS and product pricing pages

## Accessibility

Billing switch is a radiogroup with aria-checked; section labelled by its heading; ticks are aria-hidden.


## Source
`src/patterns/sections/PricingTiers.tsx`
```tsx
import { useState } from 'react'

/*
 * Three-tier pricing band: monthly/yearly switch (a real radiogroup),
 * a highlighted middle plan, ticked feature lists and a ghost wordmark
 * behind the grid. Prices animate width-stably with tabular figures.
 */

const PLANS = [
  { name: 'Starter', m: 0, y: 0, blurb: 'For side projects', features: ['1 project', 'Community support', 'Core patterns'] },
  { name: 'Pro', m: 19, y: 15, blurb: 'For working builders', features: ['Unlimited projects', 'All patterns + shaders', 'Priority support', 'Figma files'], featured: true },
  { name: 'Team', m: 49, y: 39, blurb: 'For studios', features: ['Everything in Pro', '10 seats', 'Private registry', 'Custom tokens'] },
]

export default function PricingTiers() {
  const [yearly, setYearly] = useState(true)
  return (
    <section className="relative overflow-hidden rounded-2xl bg-bg px-4 py-14 sm:px-8" aria-labelledby="pricing-h">
      <span aria-hidden className="pointer-events-none absolute inset-x-0 top-2 text-center font-display text-[18vw] leading-none italic opacity-[0.05] sm:text-[9rem]">
        Pricing
      </span>
      <div className="relative text-center">
        <h2 id="pricing-h" className="text-3xl font-semibold tracking-tight sm:text-4xl">
          Simple, <span className="font-display font-normal italic text-accent">honest</span> pricing
        </h2>
        <div role="radiogroup" aria-label="Billing period" className="mx-auto mt-6 inline-flex rounded-full border border-border p-1 text-sm">
          {[['Monthly', false], ['Yearly −20%', true]].map(([label, val]) => (
            <button
              key={String(label)}
              role="radio"
              aria-checked={yearly === val}
              onClick={() => setYearly(val as boolean)}
              className={`rounded-full px-4 py-1.5 transition-colors ${yearly === val ? 'bg-fg text-bg' : 'text-fg-muted hover:text-fg'}`}
            >
              {label}
            </button>
          ))}
        </div>
      </div>
      <div className="relative mt-10 grid gap-4 md:grid-cols-3">
        {PLANS.map((p) => (
          <article
            key={p.name}
            className={`flex flex-col rounded-2xl border p-6 backdrop-blur ${
              p.featured ? 'border-accent/60 bg-accent-soft/60 shadow-lg md:-translate-y-2' : 'border-border bg-surface/60'
            }`}
          >
            <div className="flex items-center justify-between">
              <h3 className="font-medium">{p.name}</h3>
              {p.featured && <span className="rounded-full bg-accent px-2 py-0.5 text-[11px] font-medium text-accent-fg">Popular</span>}
            </div>
            <p className="mt-1 text-sm text-fg-muted">{p.blurb}</p>
            <p className="mt-6 flex items-baseline gap-1">
              <span className="text-4xl font-semibold tabular-nums">${yearly ? p.y : p.m}</span>
              <span className="text-sm text-fg-muted">/mo</span>
            </p>
            <ul className="mt-6 flex-1 space-y-2 text-sm">
              {p.features.map((f) => (
                <li key={f} className="flex gap-2">
                  <span className="text-accent" aria-hidden>✓</span>
                  {f}
                </li>
              ))}
            </ul>
            <button className={`mt-8 rounded-full py-2.5 text-sm font-medium ${p.featured ? 'bg-fg text-bg' : 'border border-border hover:bg-surface-2'}`}>
              Choose {p.name}
            </button>
          </article>
        ))}
      </div>
    </section>
  )
}
```

# Wordmark footer
> Newsletter, link columns and a giant wordmark bleeding off the bottom edge, sized with container query units.
- **Category:** Sections
- **Slug:** wordmark-footer
- **Tags:** footer, wordmark, newsletter, container queries, section
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/wordmark-footer
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sections/WordmarkFooter.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sections/WordmarkFooter.tsx

## When to use
- Studio, agency and brand sites
- Any footer that should close the page with presence

## Accessibility

Labelled email input, nav landmarks per column; giant wordmark aria-hidden since the brand is in text.


## Source
`src/patterns/sections/WordmarkFooter.tsx`
```tsx
/*
 * Studio footer: newsletter panel, link columns, and an enormous wordmark
 * bleeding off the bottom edge. The wordmark is sized in container query
 * units (cqw) so it always spans the footer's width, and is aria-hidden
 * because the brand name already appears as text.
 */

const COLS = {
  Product: ['Patterns', 'Shaders', 'Sections', 'Changelog'],
  Studio: ['About', 'Work', 'Careers', 'Press'],
  Social: ['X / Twitter', 'GitHub', 'Dribbble', 'YouTube'],
}

export default function WordmarkFooter({ brand = 'tidewave' }: { brand?: string }) {
  return (
    <footer className="relative overflow-hidden rounded-2xl bg-neutral-950 text-neutral-200 [container-type:inline-size]">
      <div className="grid gap-10 p-6 sm:p-10 md:grid-cols-[1.4fr_repeat(3,1fr)]">
        <form className="max-w-xs space-y-3" onSubmit={(e) => e.preventDefault()}>
          <p className="text-lg font-medium text-white">Letters from the studio</p>
          <p className="text-sm text-neutral-400">One email a month. New work, no noise.</p>
          <div className="flex rounded-full border border-white/15 p-1 focus-within:border-white/40">
            <label htmlFor="footer-email" className="sr-only">
              Email address
            </label>
            <input id="footer-email" type="email" required placeholder="you@studio.com" className="min-w-0 flex-1 bg-transparent px-3 text-sm outline-none placeholder:text-neutral-400" />
            <button className="rounded-full bg-white px-4 py-1.5 text-sm font-medium text-black">Join</button>
          </div>
        </form>
        {Object.entries(COLS).map(([h, links]) => (
          <nav key={h} aria-label={h}>
            <p className="mb-3 font-mono text-[11px] tracking-wider text-neutral-400 uppercase">{h}</p>
            <ul className="space-y-2 text-sm">
              {links.map((l) => (
                <li key={l}>
                  <a href="#" onClick={(e) => e.preventDefault()} className="hover:text-white">
                    {l}
                  </a>
                </li>
              ))}
            </ul>
          </nav>
        ))}
      </div>
      <div className="flex justify-between px-6 font-mono text-[11px] text-neutral-400 sm:px-10">
        <span>© 2026 {brand}</span>
        <span>Made with care</span>
      </div>
      <p aria-hidden className="-mb-[4cqw] text-center leading-[0.8] font-semibold tracking-tighter text-lime-300 select-none" style={{ fontSize: '22cqw' }}>
        {brand}
      </p>
    </footer>
  )
}
```

# Contact section
> Promise list, contact rows and a glass form with labelled fields, validation summary and success state.
- **Category:** Sections
- **Slug:** contact-section
- **Tags:** contact, form, validation, section, enquiry
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/contact-section
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sections/ContactSection.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sections/ContactSection.tsx

## When to use
- Agency / freelancer / product contact pages

## Accessibility

Real <label>s, required fields, error summary in aria-live, success state with role="status".


## Source
`src/patterns/sections/ContactSection.tsx`
```tsx
import { useState } from 'react'

/*
 * Enquiry section: promise list + contact rows on the left, a glass message
 * panel on the right, a ghost wordmark and a corner glow behind. The form
 * has real labels, native validation, an inline error summary announced via
 * aria-live, and a success state that replaces the form.
 */

export default function ContactSection() {
  const [status, setStatus] = useState<'idle' | 'error' | 'sent'>('idle')
  return (
    <section className="relative overflow-hidden rounded-2xl bg-bg p-6 sm:p-10" aria-labelledby="contact-h">
      <div aria-hidden className="absolute -right-24 -bottom-24 h-72 w-72 rounded-full bg-emerald-500/30 blur-3xl" />
      <span aria-hidden className="pointer-events-none absolute -top-4 left-4 font-display text-[7rem] leading-none italic opacity-[0.05]">
        Get in touch
      </span>
      <div className="relative grid gap-10 md:grid-cols-2">
        <div>
          <h2 id="contact-h" className="text-3xl font-semibold tracking-tight">
            Let's build <span className="font-display font-normal italic">something</span>.
          </h2>
          <ul className="mt-6 space-y-2 text-sm text-fg-muted">
            {['Reply within one working day', 'Fixed quotes, no hourly surprises', 'NDA on request'].map((t) => (
              <li key={t} className="flex gap-2">
                <span className="text-success" aria-hidden>●</span>
                {t}
              </li>
            ))}
          </ul>
          <dl className="mt-8 divide-y divide-border rounded-xl border border-border text-sm">
            {[['Email', 'hello@studio.dev'], ['Phone', '+91 98 7654 3210'], ['Studio', 'Pune, India']].map(([k, v]) => (
              <div key={k} className="flex justify-between px-4 py-3">
                <dt className="text-fg-muted">{k}</dt>
                <dd>{v}</dd>
              </div>
            ))}
          </dl>
        </div>

        <div className="rounded-2xl border border-border bg-surface/70 p-6 shadow-lg backdrop-blur">
          {status === 'sent' ? (
            <div role="status" className="grid h-full place-items-center py-10 text-center">
              <div>
                <p className="text-2xl">✓</p>
                <p className="mt-2 font-medium">Message sent</p>
                <button onClick={() => setStatus('idle')} className="mt-4 text-sm text-fg-muted hover:text-fg">
                  Send another
                </button>
              </div>
            </div>
          ) : (
            <form
              noValidate
              className="space-y-4"
              onSubmit={(e) => {
                e.preventDefault()
                setStatus(e.currentTarget.checkValidity() ? 'sent' : 'error')
              }}
            >
              <p aria-live="assertive" className="text-sm text-danger">
                {status === 'error' && 'Please fill in your name, a valid email and a message.'}
              </p>
              {[
                ['name', 'Name', 'text'],
                ['email', 'Email', 'email'],
              ].map(([id, label, type]) => (
                <div key={id}>
                  <label htmlFor={`c-${id}`} className="mb-1.5 block text-sm">
                    {label}
                  </label>
                  <input
                    id={`c-${id}`}
                    type={type}
                    required
                    className="w-full rounded-lg border border-border bg-bg px-3 py-2 outline-none focus:border-accent aria-[invalid=true]:border-danger"
                  />
                </div>
              ))}
              <div>
                <label htmlFor="c-msg" className="mb-1.5 block text-sm">
                  Message
                </label>
                <textarea id="c-msg" required rows={4} className="w-full resize-none rounded-lg border border-border bg-bg px-3 py-2 outline-none focus:border-accent" />
              </div>
              <button className="w-full rounded-full bg-fg py-2.5 text-sm font-medium text-bg">Send message</button>
            </form>
          )}
        </div>
      </div>
    </section>
  )
}
```

# Testimonial wall
> Masonry of quote cards in columns scrolling opposite ways with faded edges.
- **Category:** Sections
- **Slug:** testimonial-wall
- **Tags:** testimonials, social proof, masonry, marquee, reviews
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/testimonial-wall
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sections/TestimonialWall.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sections/TestimonialWall.tsx

## When to use
- Social proof on landing pages

## Accessibility

figure/blockquote/figcaption; duplicate copies aria-hidden; pauses on hover; static under reduced motion.


## Source
`src/patterns/sections/TestimonialWall.tsx`
```tsx
/*
 * Testimonial wall: CSS columns masonry of quote cards, with columns
 * scrolling in opposite directions (vertical marquee) and faded top/bottom
 * edges. Each quote is a real <figure>/<blockquote>/<figcaption>. Pauses on
 * hover; static under reduced motion.
 */

const Q = [
  ['Shipped our landing page in a day. It looks like we hired a studio.', 'Anika R.', 'Founder, Loop'],
  ['The shader backgrounds replaced a 12MB hero video.', 'Marco D.', 'Frontend lead'],
  ['Finally a library that cares about reduced motion.', 'Sam K.', 'Accessibility engineer'],
  ['Our AI agent reads llms.txt and builds on-brand every time.', 'Priya S.', 'CTO, Nova'],
  ['Copy one file, it just works. No dependency soup.', 'Leo M.', 'Indie hacker'],
  ['The dashboard screen saved us two sprints.', 'Hana T.', 'PM, Ledger'],
  ['Design tokens first was the right call.', 'Omar F.', 'Design systems'],
  ['Every demo is live, which is what sold me.', 'Zoe W.', 'Designer'],
  ['Carousels that actually work with a keyboard.', 'Ravi P.', 'Engineer'],
]

const CSS = `
.col-up { animation: col 28s linear infinite; } .col-down { animation: col 28s linear infinite reverse; }
@keyframes col { to { transform: translateY(-50%); } }
.wall:hover .col-up, .wall:hover .col-down { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .col-up, .col-down { animation: none; } }
`

function Card([q, n, r]: string[]) {
  return (
    <figure key={q + n} className="rounded-xl border border-border bg-surface p-4">
      <blockquote className="text-sm">"{q}"</blockquote>
      <figcaption className="mt-3 text-xs">
        <span className="font-medium">{n}</span> <span className="text-fg-muted">· {r}</span>
      </figcaption>
    </figure>
  )
}

export default function TestimonialWall() {
  const cols = [Q.slice(0, 3), Q.slice(3, 6), Q.slice(6, 9)]
  return (
    <section aria-label="Testimonials" className="wall relative h-96 overflow-hidden [mask-image:linear-gradient(transparent,#000_15%,#000_85%,transparent)]">
      <style>{CSS}</style>
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
        {cols.map((col, i) => (
          <div key={i} className={`space-y-3 ${i % 2 ? 'col-down' : 'col-up'} ${i > 0 ? 'hidden sm:block' : ''}`}>
            {[...col, ...col].map((q, k) => (
              <div key={k} aria-hidden={k >= col.length || undefined}>{Card(q)}</div>
            ))}
          </div>
        ))}
      </div>
    </section>
  )
}
```

# Split hero
> Headline, announcement pill, dual CTA and avatar proof beside a rotated image collage.
- **Category:** Sections
- **Slug:** split-hero
- **Tags:** hero, landing page, cta, collage, social proof
- **Dependencies:** three-d/_shared.ts (img() placeholder URLs, makeSpinner drag helper)
- **Live demo:** https://ui-lab-weld.vercel.app/#/split-hero
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sections/SplitHero.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sections/SplitHero.tsx

## When to use
- SaaS and product landing pages

## Accessibility

Single h1; collage aria-hidden; CTAs are buttons/links with clear text.


## Source
`src/patterns/sections/SplitHero.tsx`
```tsx
import { img } from '../three-d/_shared'

/*
 * Split hero: headline, sub, dual CTA, avatar social proof and a pill
 * announcement on the left; a stacked, slightly rotated image collage on
 * the right. Collapses to one column. The h1 is the only heading level 1.
 */

export default function SplitHero() {
  return (
    <section className="grid items-center gap-10 rounded-2xl bg-bg p-6 sm:p-10 md:grid-cols-2">
      <div>
        <a href="#" onClick={(e) => e.preventDefault()} className="inline-flex items-center gap-2 rounded-full border border-border px-3 py-1 text-xs text-fg-muted hover:text-fg">
          <span className="rounded-full bg-accent px-1.5 text-[10px] font-medium text-accent-fg">New</span> Shader backgrounds are here →
        </a>
        <h1 className="mt-5 text-4xl leading-[1.05] font-semibold tracking-tight sm:text-6xl">
          Websites that feel <span className="font-display font-normal text-accent italic">alive</span>.
        </h1>
        <p className="mt-5 max-w-md text-fg-muted">Motion-first patterns, tokens and full screens. Copy a file, ship a page that doesn't look generated.</p>
        <div className="mt-8 flex flex-wrap gap-3">
          <button className="rounded-full bg-fg px-6 py-3 text-sm font-medium text-bg">Start building</button>
          <button className="rounded-full border border-border px-6 py-3 text-sm font-medium">Watch demo ▸</button>
        </div>
        <div className="mt-8 flex items-center gap-3">
          <div className="flex -space-x-2">
            {[1, 2, 3, 4].map((i) => (
              <img key={i} src={img(i + 900, 64, 64)} alt="" className="h-8 w-8 rounded-full border-2 border-bg object-cover" />
            ))}
          </div>
          <p className="text-sm text-fg-muted"><b className="text-fg">6,100+</b> builders shipping faster</p>
        </div>
      </div>
      <div className="relative h-80 sm:h-96" aria-hidden>
        <img src={img(910, 400, 500)} alt="" className="absolute top-0 right-6 h-64 w-48 rotate-6 rounded-2xl object-cover shadow-lg" />
        <img src={img(911, 400, 500)} alt="" className="absolute top-16 left-4 h-64 w-48 -rotate-6 rounded-2xl object-cover shadow-lg" />
        <img src={img(912, 400, 400)} alt="" className="absolute right-20 bottom-0 h-40 w-40 rounded-2xl border-4 border-bg object-cover shadow-lg" />
      </div>
    </section>
  )
}
```

# Logo cloud & stats
> Greyscale logos that light up on hover plus a stats band as a definition list.
- **Category:** Sections
- **Slug:** logo-cloud
- **Tags:** logos, clients, stats, social proof, trust
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/logo-cloud
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sections/LogoCloud.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sections/LogoCloud.tsx

## When to use
- Credibility band under a hero

## Accessibility

Stats as <dl> pairs; replace text logos with SVGs that have alt text.


## Source
`src/patterns/sections/LogoCloud.tsx`
```tsx
/*
 * Logo cloud + stats band. Wordmark "logos" are text here (swap for SVGs
 * with alt text). Logos sit greyscale and light up on hover; the stats row
 * uses a <dl> so each number is paired with its label for screen readers.
 */

const LOGOS = ['Northwind', 'Acme', 'Globex', 'Umbrella', 'Initech', 'Hooli', 'Vandelay', 'Stark']
const STATS = [['99.99%', 'uptime'], ['4.2M', 'requests / day'], ['180ms', 'median latency'], ['140+', 'countries']]

export default function LogoCloud() {
  return (
    <section className="space-y-10 rounded-2xl bg-bg p-6 sm:p-10" aria-labelledby="lc-h">
      <p id="lc-h" className="text-center font-mono text-xs tracking-wider text-fg-muted uppercase">Trusted by teams at</p>
      <ul className="grid grid-cols-2 gap-6 sm:grid-cols-4">
        {LOGOS.map((l, i) => (
          <li key={l} className="text-center text-xl font-semibold tracking-tight text-fg-muted transition-colors hover:text-fg" style={{ fontStyle: i % 3 === 0 ? 'italic' : undefined, fontFamily: i % 2 ? 'var(--font-display)' : undefined }}>
            {l}
          </li>
        ))}
      </ul>
      <dl className="grid grid-cols-2 gap-px overflow-hidden rounded-xl border border-border bg-border sm:grid-cols-4">
        {STATS.map(([n, l]) => (
          <div key={l} className="bg-surface p-5">
            <dt className="order-2 text-sm text-fg-muted">{l}</dt>
            <dd className="text-3xl font-semibold tabular-nums">{n}</dd>
          </div>
        ))}
      </dl>
    </section>
  )
}
```

# Site header with skip link and mobile menu
> A header with a skip link, a labelled nav landmark, aria-current on the active page, and a menu button on small screens that closes with Esc and returns focus.
- **Category:** Sections
- **Slug:** site-nav
- **Tags:** header, navigation, mobile menu, skip link, aria-current
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/site-nav
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sections/SiteNav.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sections/SiteNav.tsx

## When to use
- Every site header
- Teaching the accessible baseline for navigation

## Accessibility

Skip link appears on focus; nav is a labelled landmark; the menu button has aria-expanded and aria-controls; Esc closes and returns focus; targets are 44px.


## Source
`src/patterns/sections/SiteNav.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'

/*
 * A site header that works for everyone: a skip link, a real nav landmark, aria-current on the active page, and on
 * small screens a menu button that toggles a list (aria-expanded, Esc to close, focus returns to the button).
 * No library. The links are real links; in this demo they only change the "current page" state.
 */

const LINKS = ['Work', 'Services', 'Journal', 'Contact']

export default function SiteNav() {
  const [open, setOpen] = useState(false)
  const [current, setCurrent] = useState('Work')
  const btn = useRef<HTMLButtonElement>(null)
  const menu = useRef<HTMLUListElement>(null)

  useEffect(() => {
    if (!open) return
    const key = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        setOpen(false)
        btn.current?.focus()
      }
    }
    addEventListener('keydown', key)
    return () => removeEventListener('keydown', key)
  }, [open])

  const go = (l: string) => (e: React.MouseEvent) => {
    e.preventDefault()
    setCurrent(l)
    setOpen(false)
  }

  return (
    <div className="relative rounded-xl border border-border bg-surface">
      <a href="#demo-main" onClick={(e) => e.preventDefault()} className="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-10 focus:rounded-md focus:bg-fg focus:px-3 focus:py-2 focus:text-bg">
        Skip to content
      </a>
      <header className="flex items-center justify-between gap-4 px-4 py-3">
        <a href="#demo" onClick={(e) => e.preventDefault()} className="text-lg font-semibold tracking-tight">Studio</a>
        <nav aria-label="Main" className="hidden sm:block">
          <ul className="flex gap-1">
            {LINKS.map((l) => (
              <li key={l}>
                <a href="#demo" onClick={go(l)} aria-current={current === l ? 'page' : undefined} className={`grid min-h-11 place-items-center rounded-md px-3 text-sm ${current === l ? 'bg-accent-soft font-medium text-accent' : 'text-fg-muted hover:text-fg'}`}>
                  {l}
                </a>
              </li>
            ))}
          </ul>
        </nav>
        <button ref={btn} onClick={() => setOpen((o) => !o)} aria-expanded={open} aria-controls="demo-menu" className="min-h-11 rounded-md border border-border px-4 text-sm font-medium sm:hidden">
          {open ? 'Close' : 'Menu'}
        </button>
      </header>
      <nav aria-label="Main (mobile)" className={`border-t border-border sm:hidden ${open ? '' : 'hidden'}`}>
        <ul id="demo-menu" ref={menu} className="p-2">
          {LINKS.map((l) => (
            <li key={l}>
              <a href="#demo" onClick={go(l)} aria-current={current === l ? 'page' : undefined} className={`flex min-h-12 items-center rounded-md px-3 text-base ${current === l ? 'bg-accent-soft font-medium text-accent' : ''}`}>
                {l}
              </a>
            </li>
          ))}
        </ul>
      </nav>
      <p id="demo-main" className="px-4 pb-4 text-sm text-fg-muted">Current page: {current}. Resize below 640px to see the menu button.</p>
    </div>
  )
}
```

# FAQ with native details and search
> An FAQ on native details elements with a search box that reports how many answers match, and an Open all button. Works without script.
- **Category:** Sections
- **Slug:** faq-section
- **Tags:** faq, accordion, details, search, content
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/faq-section
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sections/FaqSection.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sections/FaqSection.tsx

## When to use
- Support and pricing pages
- Content that should stay in the DOM for search engines

## Accessibility

Native details give keyboard and screen-reader support; the match count is a status region; the arrow does not rely on colour; motion removed under reduced motion.


## Source
`src/patterns/sections/FaqSection.tsx`
```tsx
import { useMemo, useState } from 'react'

/*
 * An FAQ built on native <details>, so it works with no script, keyboard and screen readers included. A search box
 * filters the list and says how many answers match (a live region). "Open all" is a real button. Nothing is hidden
 * from search engines: the answers are in the DOM whether open or not.
 */

const FAQ = [
  ['How long does a project take?', 'Most sites take six to eight weeks from the first call to launch. A single landing page can be done in two.'],
  ['Do you work with existing brands?', 'Yes. We start by reading what you already have and keep whatever is working. We only redraw what is not.'],
  ['What do you need from us?', 'The words, the images and one person who can say yes. We handle the rest, and we will tell you early if something is missing.'],
  ['Will it work on phones and with a keyboard?', 'Always. Every site is tested at phone width, with a keyboard, with reduced motion switched on and with a screen reader.'],
  ['What happens after launch?', 'You get the source, a short guide for your team, and thirty days of fixes. Longer support is optional.'],
] as const

export default function FaqSection() {
  const [q, setQ] = useState('')
  const [all, setAll] = useState(false)
  const items = useMemo(() => FAQ.filter(([a, b]) => `${a} ${b}`.toLowerCase().includes(q.trim().toLowerCase())), [q])
  return (
    <section className="mx-auto max-w-2xl" aria-labelledby="faq-h">
      <div className="flex flex-wrap items-end justify-between gap-3">
        <h3 id="faq-h" className="text-2xl font-semibold tracking-tight">Questions, answered</h3>
        <button onClick={() => setAll((a) => !a)} className="min-h-11 rounded-md border border-border px-3 text-sm hover:bg-surface">
          {all ? 'Close all' : 'Open all'}
        </button>
      </div>
      <label className="mt-4 block">
        <span className="sr-only">Search the questions</span>
        <input type="search" value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search the questions" className="min-h-11 w-full rounded-md border border-border bg-surface px-3 text-sm" />
      </label>
      <p className="mt-2 text-xs text-fg-muted" role="status">{items.length} of {FAQ.length} shown</p>
      <div className="mt-2 divide-y divide-border border-y border-border">
        {items.map(([a, b]) => (
          <details key={a + all} open={all} className="group py-1">
            <summary className="flex min-h-12 cursor-pointer list-none items-center justify-between gap-4 text-base font-medium marker:content-none">
              {a}
              <span aria-hidden className="text-fg-muted transition-transform group-open:rotate-45 motion-reduce:transition-none">+</span>
            </summary>
            <p className="pb-4 text-fg-muted">{b}</p>
          </details>
        ))}
      </div>
      {items.length === 0 && <p className="mt-4 text-sm text-fg-muted">No question matches that. Try one word, like “time” or “brand”.</p>}
    </section>
  )
}
```

# Fair cookie consent banner
> A consent banner where Reject and Accept have equal weight, nothing is pre-ticked, optional categories are explained, and the choice can be reopened.
- **Category:** Sections
- **Slug:** cookie-banner
- **Tags:** cookies, consent, privacy, banner, gdpr
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/cookie-banner
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sections/CookieBanner.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sections/CookieBanner.tsx

## When to use
- Sites that need consent for analytics or marketing
- Avoiding dark patterns in consent

## Accessibility

A non-modal region: focus is not stolen and the page stays usable; checkboxes have real labels; the saved state is announced; the change link is always available.


## Source
`src/patterns/sections/CookieBanner.tsx`
```tsx
import { useState } from 'react'

/*
 * A consent banner that is fair: "Reject non-essential" and "Accept all" are the same size and weight, nothing is
 * pre-ticked, choices are grouped and explained, and the page stays usable behind it. It is a non-modal region, not
 * a trap: focus is not stolen, Esc is not required, and the choice can be reopened from the footer link.
 */

type Choice = { analytics: boolean; marketing: boolean }

export default function CookieBanner() {
  const [saved, setSaved] = useState<Choice | null>(null)
  const [more, setMore] = useState(false)
  const [draft, setDraft] = useState<Choice>({ analytics: false, marketing: false })

  if (saved)
    return (
      <div className="rounded-xl border border-border bg-surface p-4 text-sm">
        <p role="status">
          Saved: analytics {saved.analytics ? 'on' : 'off'}, marketing {saved.marketing ? 'on' : 'off'}.{' '}
          <button onClick={() => setSaved(null)} className="font-medium text-accent underline underline-offset-2">Change cookie choices</button>
        </p>
      </div>
    )

  return (
    <section aria-labelledby="ck-h" className="rounded-xl border border-border bg-surface p-5 shadow-lg">
      <h3 id="ck-h" className="text-base font-semibold">Cookies on this site</h3>
      <p className="mt-1 max-w-prose text-sm text-fg-muted">
        We use essential cookies to make the site work. With your permission we would also like to measure how it is used and show relevant offers. You can say no and still use everything.
      </p>
      {more && (
        <fieldset className="mt-4 grid gap-3 text-sm">
          <legend className="sr-only">Optional cookies</legend>
          <label className="flex items-start gap-3">
            <input type="checkbox" checked={draft.analytics} onChange={(e) => setDraft({ ...draft, analytics: e.target.checked })} className="mt-1 size-5" />
            <span><b className="font-medium">Analytics.</b> Counts visits so we can see which pages help. No names, no cross-site tracking.</span>
          </label>
          <label className="flex items-start gap-3">
            <input type="checkbox" checked={draft.marketing} onChange={(e) => setDraft({ ...draft, marketing: e.target.checked })} className="mt-1 size-5" />
            <span><b className="font-medium">Marketing.</b> Lets partners show you our offers elsewhere.</span>
          </label>
        </fieldset>
      )}
      <div className="mt-4 flex flex-wrap gap-2">
        <button onClick={() => setSaved({ analytics: false, marketing: false })} className="min-h-11 rounded-md border border-fg px-4 text-sm font-medium hover:bg-surface-2">Reject non-essential</button>
        <button onClick={() => setSaved({ analytics: true, marketing: true })} className="min-h-11 rounded-md border border-fg px-4 text-sm font-medium hover:bg-surface-2">Accept all</button>
        {more ? (
          <button onClick={() => setSaved(draft)} className="min-h-11 rounded-md bg-fg px-4 text-sm font-medium text-bg">Save my choices</button>
        ) : (
          <button onClick={() => setMore(true)} className="min-h-11 rounded-md px-3 text-sm text-fg-muted underline underline-offset-2 hover:text-fg">Choose</button>
        )}
      </div>
    </section>
  )
}
```

# Sign-up form with real validation
> An email sign-up with a visible label, the right keyboard, an error tied to the field and announced, a busy state and a clear success message.
- **Category:** Sections
- **Slug:** newsletter-form
- **Tags:** form, email, validation, newsletter, aria-invalid
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/newsletter-form
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sections/NewsletterForm.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sections/NewsletterForm.tsx

## When to use
- Newsletter, waitlist and contact capture
- Showing the unhappy paths of a simple form

## Accessibility

Label is visible and linked; aria-invalid and aria-describedby carry the error; the error is role=alert; the button is aria-busy while sending; success is role=status.


## Source
`src/patterns/sections/NewsletterForm.tsx`
```tsx
import { useId, useState } from 'react'

/*
 * A sign-up form that handles the unhappy paths. A visible label (not a placeholder), a type that brings up the right
 * keyboard, validation on submit with the message tied to the field (aria-describedby, aria-invalid) and announced
 * (role=alert), a busy state that prevents double sending, and a success message that replaces the form's promise.
 * The "send" is a timer here; connect it to your own endpoint.
 */

type State = 'idle' | 'invalid' | 'sending' | 'done'

export default function NewsletterForm() {
  const id = useId()
  const [email, setEmail] = useState('')
  const [state, setState] = useState<State>('idle')
  const bad = state === 'invalid'

  const submit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email.trim())) return setState('invalid')
    setState('sending')
    setTimeout(() => setState('done'), 900)
  }

  if (state === 'done')
    return (
      <div className="rounded-xl border border-border bg-surface p-6" role="status">
        <p className="text-lg font-semibold">You are on the list.</p>
        <p className="mt-1 text-sm text-fg-muted">We sent a confirmation to {email}. Click the link in it and you are done. No other emails until then.</p>
        <button onClick={() => { setEmail(''); setState('idle') }} className="mt-4 min-h-11 rounded-md border border-border px-3 text-sm hover:bg-surface-2">Add another address</button>
      </div>
    )

  return (
    <form onSubmit={submit} noValidate className="rounded-xl border border-border bg-surface p-6">
      <h3 className="text-xl font-semibold tracking-tight">One email a month</h3>
      <p className="mt-1 text-sm text-fg-muted">What we shipped and what we learned. Unsubscribe in one click.</p>
      <label htmlFor={id} className="mt-5 block text-sm font-medium">Email address</label>
      <div className="mt-1 flex flex-col gap-2 sm:flex-row">
        <input
          id={id}
          type="email"
          inputMode="email"
          autoComplete="email"
          value={email}
          onChange={(e) => { setEmail(e.target.value); if (bad) setState('idle') }}
          aria-invalid={bad}
          aria-describedby={`${id}-msg`}
          disabled={state === 'sending'}
          className={`min-h-12 flex-1 rounded-md border bg-bg px-3 ${bad ? 'border-danger' : 'border-border'}`}
        />
        <button disabled={state === 'sending'} aria-busy={state === 'sending'} className="min-h-12 rounded-md bg-accent px-6 text-sm font-medium text-accent-fg disabled:opacity-60">
          {state === 'sending' ? 'Sending…' : 'Subscribe'}
        </button>
      </div>
      <p id={`${id}-msg`} role={bad ? 'alert' : undefined} className={`mt-2 min-h-5 text-sm ${bad ? 'text-danger' : 'text-fg-muted'}`}>
        {bad ? 'That does not look like an email address. Check for an @ and a domain, like name@example.com.' : 'We never share your address.'}
      </p>
    </form>
  )
}
```

# Feature rows (not a card grid)
> Each feature gets its own row with the picture alternating sides, with DOM order that stays heading, text, picture.
- **Category:** Sections
- **Slug:** feature-rows
- **Tags:** features, landing, rows, section, layout
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/feature-rows
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sections/FeatureRows.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sections/FeatureRows.tsx

## When to use
- Product and service pages with three or four distinct ideas
- Replacing the identical icon-heading-text grid

## Accessibility

Each row is a labelled section; reading and tab order do not change with the picture side; the pictures are decorative stand-ins.


## Source
`src/patterns/sections/FeatureRows.tsx`
```tsx
/*
 * Feature rows: instead of a grid of identical cards, each feature gets its own row, with the picture alternating sides.
 * The picture is a drawn stand-in (swap it for a screenshot of the real thing). The text order in the DOM is always
 * heading, then text, then picture, so reading and tab order do not depend on which side the picture is on.
 */

const ROWS = [
  ['Write once', 'Draft in a plain editor and the page lays itself out. Nothing to drag, nothing to align.', 'M10 60 H110 M10 40 H90 M10 20 H100'],
  ['See every change', 'Each edit is saved as a version you can compare, restore or share with a link.', 'M10 60 L40 30 L70 45 L110 10'],
  ['Hand it over', 'Send a read-only link, or invite someone to edit. You always know who changed what.', 'M20 20 H100 V60 H20 Z M20 20 L60 45 L100 20'],
] as const

export default function FeatureRows() {
  return (
    <div className="mx-auto max-w-3xl divide-y divide-border">
      {ROWS.map(([title, body, path], i) => (
        <section key={title} aria-labelledby={`fr-${i}`} className={`grid items-center gap-6 py-8 sm:grid-cols-2 ${i % 2 ? 'sm:[&>figure]:order-first' : ''}`}>
          <div>
            <h3 id={`fr-${i}`} className="text-2xl font-semibold tracking-tight">{title}</h3>
            <p className="mt-2 text-fg-muted">{body}</p>
          </div>
          <figure className="rounded-xl border border-border bg-surface p-4" aria-hidden>
            <svg viewBox="0 0 120 70" className="w-full text-accent" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d={path} /></svg>
          </figure>
        </section>
      ))}
    </div>
  )
}
```

# How it works (numbered steps)
> An ordered list of steps with a connecting line, announced as a real list with step numbers, stacking on narrow screens.
- **Category:** Sections
- **Slug:** how-it-works
- **Tags:** steps, process, ordered list, section, onboarding
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/how-it-works
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sections/HowItWorks.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sections/HowItWorks.tsx

## When to use
- Onboarding, process and booking explanations
- Three to five steps in a fixed order

## Accessibility

A real ol so the count and position are announced; each step has a hidden 'Step n' prefix; the connecting line is decorative.


## Source
`src/patterns/sections/HowItWorks.tsx`
```tsx
/*
 * How it works: an ordered list of steps with a connecting line. It is a real <ol>, so assistive technology announces
 * "list, 3 items" and "1 of 3". The number is part of the list, not a separate decoration, and the line is drawn with a
 * border so it needs no image. On narrow screens the steps stack and the line runs down the side.
 */

const STEPS = [
  ['Tell us what you need', 'A short form, five minutes. We read every answer.'],
  ['We send a plan', 'A fixed price, a start date and a named person who is responsible.'],
  ['You approve, we build', 'Check in at the end of each week. Stop at any time and keep the work.'],
] as const

export default function HowItWorks() {
  return (
    <section aria-labelledby="hiw-h" className="mx-auto max-w-3xl">
      <h3 id="hiw-h" className="text-2xl font-semibold tracking-tight">How it works</h3>
      <ol className="mt-6 space-y-0 sm:grid sm:grid-cols-3 sm:gap-6 sm:space-y-0">
        {STEPS.map(([t, b], i) => (
          <li key={t} className="relative flex gap-4 pb-8 sm:block sm:pb-0">
            <span className="relative z-10 grid size-10 shrink-0 place-items-center rounded-full border-2 border-fg bg-bg font-mono text-sm font-semibold" aria-hidden>{i + 1}</span>
            {i < STEPS.length - 1 && <span aria-hidden className="absolute top-10 bottom-0 left-5 w-px bg-border sm:top-5 sm:right-[-1.5rem] sm:bottom-auto sm:left-10 sm:h-px sm:w-auto" />}
            <div className="sm:mt-4">
              <h4 className="font-semibold"><span className="sr-only">Step {i + 1}: </span>{t}</h4>
              <p className="mt-1 text-sm text-fg-muted">{b}</p>
            </div>
          </li>
        ))}
      </ol>
    </section>
  )
}
```

# Plan comparison table
> A comparison where every cell says Included or Not included in words, with proper headers, the recommended plan marked in text, and sideways scrolling in a focusable region.
- **Category:** Sections
- **Slug:** comparison-table
- **Tags:** comparison, pricing, table, plans, accessibility
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/comparison-table
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sections/ComparisonTable.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sections/ComparisonTable.tsx

## When to use
- Pricing and plan pages
- Any feature-by-option comparison

## Accessibility

Column and row headers are scoped; ticks are symbols with hidden text; Recommended is text, not just colour; the scroll region is focusable and labelled.


## Source
`src/patterns/sections/ComparisonTable.tsx`
```tsx
/*
 * A comparison table that does not rely on colour or on tiny ticks. Each cell says "Included" or "Not included" in words
 * (visually as a symbol with hidden text), the plan columns are proper column headers, rows are row headers, and the
 * recommended plan is marked in text as well as by emphasis. On small screens the table scrolls inside a focusable
 * region instead of squashing.
 */

const PLANS = ['Free', 'Studio', 'Team'] as const
const ROWS: [string, boolean[]][] = [
  ['Projects', [true, true, true]],
  ['Version history', [false, true, true]],
  ['Private sharing links', [false, true, true]],
  ['Comments and review', [false, false, true]],
  ['Single sign-on', [false, false, true]],
]
const NOTES = ['3 projects', 'Unlimited', 'Unlimited']

export default function ComparisonTable() {
  return (
    <div tabIndex={0} role="region" aria-label="Plan comparison, scrolls sideways on small screens" className="overflow-x-auto rounded-xl border border-border">
      <table className="w-full min-w-[30rem] border-collapse text-sm">
        <caption className="sr-only">What each plan includes</caption>
        <thead>
          <tr className="bg-surface-2">
            <td className="p-3" />
            {PLANS.map((p) => (
              <th key={p} scope="col" className="p-3 text-center font-semibold">
                {p}
                {p === 'Studio' && <span className="mt-0.5 block text-xs font-normal text-accent">Recommended</span>}
              </th>
            ))}
          </tr>
        </thead>
        <tbody className="divide-y divide-border">
          <tr>
            <th scope="row" className="p-3 text-left font-medium">Projects</th>
            {NOTES.map((n, i) => <td key={i} className="p-3 text-center">{n}</td>)}
          </tr>
          {ROWS.slice(1).map(([name, vals]) => (
            <tr key={name}>
              <th scope="row" className="p-3 text-left font-medium">{name}</th>
              {vals.map((v, i) => (
                <td key={i} className="p-3 text-center">
                  <span aria-hidden className={v ? 'font-bold text-success' : 'text-fg-muted'}>{v ? '✓' : '–'}</span>
                  <span className="sr-only">{v ? 'Included' : 'Not included'}</span>
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}
```

# Closing call to action
> One sentence, one button, one line of reassurance, in a high-contrast band with its own heading.
- **Category:** Sections
- **Slug:** cta-band
- **Tags:** cta, call to action, banner, section, conversion
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/cta-band
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sections/CtaBand.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sections/CtaBand.tsx

## When to use
- The end of a landing page
- A single clear next step

## Accessibility

A labelled region; the link name says where it goes; the reassurance sits beside the button; colours are high contrast in light and dark.


## Source
`src/patterns/sections/CtaBand.tsx`
```tsx
/*
 * A closing call to action: one sentence, one button, one line of reassurance. The band is a region with its own heading,
 * the button is a real link (it goes somewhere) with a name that says where, and the reassurance sits next to the button
 * so a hesitating reader finds it. High contrast is built into the colours, so it holds in light and dark.
 */

export default function CtaBand() {
  return (
    <section aria-labelledby="cta-h" className="rounded-2xl bg-fg px-6 py-10 text-bg sm:px-12 sm:py-14">
      <div className="mx-auto max-w-xl text-center">
        <h3 id="cta-h" className="text-3xl font-semibold tracking-tight sm:text-4xl">Ready to see your site, finished?</h3>
        <p className="mt-3 text-base opacity-90">Book a thirty-minute call. We will tell you what we would build, what it would cost and how long it would take, whether or not we work together.</p>
        <div className="mt-6 flex flex-col items-center justify-center gap-3 sm:flex-row">
          <a href="#cta" onClick={(e) => e.preventDefault()} className="grid min-h-12 place-items-center rounded-md bg-bg px-6 text-sm font-semibold text-fg underline-offset-4 hover:underline">Book a call</a>
          <p className="text-sm opacity-90">Free. No obligation. Reply within one working day.</p>
        </div>
      </div>
    </section>
  )
}
```

# Team as a list
> People as rows of name, role and one real sentence, in a description list, instead of a wall of identical cards.
- **Category:** Sections
- **Slug:** team-list
- **Tags:** team, about, people, list, section
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/team-list
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sections/TeamList.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sections/TeamList.tsx

## When to use
- About pages
- Small teams where each person matters

## Accessibility

A description list ties each name to its description; initials discs are decorative; one readable column at every width.


## Source
`src/patterns/sections/TeamList.tsx`
```tsx
/*
 * A team section as a list, not a wall of identical cards. Each person is a row: name, role and one real sentence about
 * what they do, with initials in a plain disc standing in for a photograph (use real photos with real alt text, or none).
 * The list is a description list so the relationship between a name and its description is machine-readable, and the
 * layout is a single readable column that works at any width.
 */

const TEAM = [
  ['Amara Osei', 'Design lead', 'Draws the first sketch and decides when it is finished.'],
  ['Ben Hollis', 'Engineering', 'Builds the parts you never see, and keeps them boring on purpose.'],
  ['Chioma Eze', 'Research', 'Talks to your customers so that nobody has to guess.'],
  ['Dev Patel', 'Production', 'Makes sure what we promised on Monday is what ships on Friday.'],
] as const

export default function TeamList() {
  return (
    <section aria-labelledby="team-h" className="mx-auto max-w-2xl">
      <h3 id="team-h" className="text-2xl font-semibold tracking-tight">Who you will work with</h3>
      <dl className="mt-4 divide-y divide-border border-y border-border">
        {TEAM.map(([n, r, d]) => (
          <div key={n} className="relative py-4 pl-16">
            <span aria-hidden className="absolute top-4 left-0 grid size-12 place-items-center rounded-full bg-accent-soft font-mono text-sm font-semibold text-accent">{n.split(' ').map((w) => w[0]).join('')}</span>
            <dt className="font-semibold">{n} <span className="font-normal text-fg-muted">· {r}</span></dt>
            <dd className="mt-0.5 text-fg-muted">{d}</dd>
          </div>
        ))}
      </dl>
    </section>
  )
}
```

# Single large testimonial
> One testimonial set large in a real figure with blockquote and figcaption, attributed with name, role and tenure.
- **Category:** Sections
- **Slug:** pull-quote
- **Tags:** testimonial, quote, blockquote, social proof, section
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/pull-quote
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sections/PullQuote.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sections/PullQuote.tsx

## When to use
- Social proof that says what changed
- Replacing a testimonial carousel

## Accessibility

figure, blockquote and figcaption give the quote and its source; the decorative quotation mark is hidden from assistive technology.


## Source
`src/patterns/sections/PullQuote.tsx`
```tsx
/*
 * One testimonial, set large. A real <figure> with a <blockquote> and a <figcaption> naming who said it and why they are
 * credible, rather than a carousel of five small ones. Specific beats glowing: the quote says what changed. Attribution is
 * in text, and the decorative quotation mark is hidden from assistive technology.
 */

export default function PullQuote() {
  return (
    <figure className="mx-auto max-w-2xl px-2 text-center">
      <span aria-hidden className="block font-display text-7xl leading-none text-accent">&ldquo;</span>
      <blockquote className="-mt-4 text-2xl leading-snug font-medium tracking-tight text-balance sm:text-3xl">
        <p>We cut our support emails in half in the first month. Nobody had to be taught how to use it.</p>
      </blockquote>
      <figcaption className="mt-5 text-sm text-fg-muted">
        <span className="font-semibold text-fg">Ruth Adeyemi</span>, head of operations at Longshore Freight, customer since 2024
      </figcaption>
    </figure>
  )
}
```

# Analytics dashboard
> Full screen: sidebar, KPI tiles with sparklines, paired bar chart, arc dial, donut and orders table, all hand-drawn SVG.
- **Category:** Screens
- **Slug:** analytics-dashboard
- **Tags:** dashboard, admin, charts, svg charts, kpi, table, donut, sparkline
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/analytics-dashboard
- **Raw source:** https://ui-lab-weld.vercel.app/raw/screens/AnalyticsDashboard.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/screens/AnalyticsDashboard.tsx

## When to use
- Admin panels, SaaS dashboards, store analytics
- Reference for drawing charts without a library

## Accessibility

Charts have role="img" + text labels; data also present as text and a real <table> with scoped headers; aria-current on nav.


## Source
`src/patterns/screens/AnalyticsDashboard.tsx`
```tsx
/*
 * A complete analytics screen: sidebar, KPI tiles with sparklines, a paired
 * bar histogram, a segmented arc dial, a donut and an orders table. Every
 * chart is hand-drawn SVG (no chart library), each with role="img" and a
 * text description, and the numbers also exist as real text/table cells.
 */

const KPIS = [
  { k: 'Revenue', v: '₹4.82L', d: '+12.4%', up: true, s: [3, 5, 4, 6, 7, 6, 9] },
  { k: 'Orders', v: '1,284', d: '+8.1%', up: true, s: [4, 4, 5, 6, 5, 7, 8] },
  { k: 'Conversion', v: '3.6%', d: '−0.4%', up: false, s: [6, 5, 6, 5, 4, 4, 3] },
  { k: 'Avg. order', v: '₹375', d: '+2.2%', up: true, s: [5, 5, 6, 5, 6, 6, 7] },
]
const WEEK = [
  ['Mon', 62, 40], ['Tue', 75, 52], ['Wed', 58, 38], ['Thu', 90, 61], ['Fri', 84, 57], ['Sat', 70, 44], ['Sun', 48, 30],
] as const
const ORDERS = [
  ['#4821', 'Aarav Shah', '₹1,240', 'Shipped'],
  ['#4820', 'Meera Iyer', '₹860', 'Processing'],
  ['#4819', 'Kabir Rao', '₹2,110', 'Delivered'],
  ['#4818', 'Zoya Khan', '₹540', 'Refunded'],
]
const STATUS: Record<string, string> = {
  Shipped: 'bg-accent-soft text-accent',
  Processing: 'bg-warning/15 text-warning',
  Delivered: 'bg-success/15 text-success',
  Refunded: 'bg-danger/15 text-danger',
}

function Spark({ data, up }: { data: number[]; up: boolean }) {
  const max = Math.max(...data)
  const pts = data.map((v, i) => `${(i / (data.length - 1)) * 80},${24 - (v / max) * 22}`).join(' ')
  return (
    <svg viewBox="0 0 80 26" className={`h-7 w-20 ${up ? 'text-success' : 'text-danger'}`} aria-hidden>
      <polyline points={pts} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  )
}

function ArcDial({ value }: { value: number }) {
  const segs = 24
  return (
    <svg viewBox="0 0 200 116" className="w-full" role="img" aria-label={`Goal progress ${value}%`}>
      {Array.from({ length: segs }, (_, i) => {
        const a = Math.PI + (i / (segs - 1)) * Math.PI
        const on = i / (segs - 1) <= value / 100
        const [x1, y1, x2, y2] = [100 + Math.cos(a) * 72, 104 + Math.sin(a) * 72, 100 + Math.cos(a) * 92, 104 + Math.sin(a) * 92]
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} strokeWidth="6" strokeLinecap="round" className={on ? 'stroke-accent' : 'stroke-border'} />
      })}
      <text x="100" y="98" textAnchor="middle" className="fill-fg text-[26px] font-semibold">
        {value}%
      </text>
      <text x="100" y="114" textAnchor="middle" className="fill-fg-muted text-[10px]">
        of monthly goal
      </text>
    </svg>
  )
}

function Donut({ parts }: { parts: [string, number, string][] }) {
  const total = parts.reduce((s, p) => s + p[1], 0)
  const C = 2 * Math.PI * 40
  let acc = 0
  return (
    <div className="flex items-center gap-4">
      <svg viewBox="0 0 100 100" className="h-28 w-28 -rotate-90" role="img" aria-label={parts.map(([n, v]) => `${n} ${Math.round((v / total) * 100)}%`).join(', ')}>
        {parts.map(([n, v, c]) => {
          const len = (v / total) * C
          const el = <circle key={n} cx="50" cy="50" r="40" fill="none" stroke={c} strokeWidth="14" strokeDasharray={`${len - 2} ${C - len + 2}`} strokeDashoffset={-acc} />
          acc += len
          return el
        })}
      </svg>
      <ul className="space-y-1 text-xs">
        {parts.map(([n, v, c]) => (
          <li key={n} className="flex items-center gap-2">
            <span className="h-2 w-2 rounded-full" style={{ background: c }} />
            <span className="text-fg-muted">{n}</span>
            <span className="tabular-nums">{Math.round((v / total) * 100)}%</span>
          </li>
        ))}
      </ul>
    </div>
  )
}

const card = 'rounded-xl border border-border bg-surface p-4'

export default function AnalyticsDashboard() {
  const max = Math.max(...WEEK.map((w) => w[1]))
  return (
    <div className="flex overflow-hidden rounded-xl border border-border bg-bg text-sm">
      <nav aria-label="Dashboard" className="hidden w-44 shrink-0 border-r border-border p-4 lg:block">
        <p className="mb-6 font-semibold">storefront</p>
        {['Overview', 'Orders', 'Products', 'Customers', 'Settings'].map((l, i) => (
          <a key={l} href="#" onClick={(e) => e.preventDefault()} aria-current={i === 0 ? 'page' : undefined} className={`block rounded-md px-2 py-1.5 ${i === 0 ? 'bg-surface-2 font-medium' : 'text-fg-muted hover:text-fg'}`}>
            {l}
          </a>
        ))}
      </nav>
      <div className="min-w-0 flex-1 space-y-4 p-4">
        <header className="flex items-center justify-between">
          <h3 className="text-lg font-semibold">Overview</h3>
          <span className="rounded-md border border-border px-2 py-1 font-mono text-xs text-fg-muted">Last 7 days</span>
        </header>

        <div className="grid grid-cols-2 gap-3 xl:grid-cols-4">
          {KPIS.map((k) => (
            <div key={k.k} className={card}>
              <p className="text-xs text-fg-muted">{k.k}</p>
              <div className="mt-1 flex items-end justify-between gap-2">
                <p className="text-xl font-semibold tabular-nums">{k.v}</p>
                <Spark data={k.s} up={k.up} />
              </div>
              <p className={`mt-1 text-xs ${k.up ? 'text-success' : 'text-danger'}`}>{k.d} vs last week</p>
            </div>
          ))}
        </div>

        <div className="grid gap-3 xl:grid-cols-3">
          <div className={`${card} xl:col-span-2`}>
            <div className="mb-3 flex items-center justify-between">
              <p className="font-medium">Revenue vs orders</p>
              <div className="flex gap-3 text-xs text-fg-muted">
                <span className="flex items-center gap-1"><span className="h-2 w-2 rounded-sm bg-accent" />Revenue</span>
                <span className="flex items-center gap-1"><span className="h-2 w-2 rounded-sm bg-fg-muted/40" />Orders</span>
              </div>
            </div>
            <div className="flex h-40 items-end gap-3" role="img" aria-label={`Weekly revenue and orders. Peak on Thursday.`}>
              {WEEK.map(([d, r, o]) => (
                <div key={d} className="group flex flex-1 flex-col items-center gap-1">
                  <div className="flex h-32 w-full items-end justify-center gap-1">
                    <div className="w-1/3 rounded-t-sm bg-accent transition-opacity group-hover:opacity-80" style={{ height: `${(r / max) * 100}%` }} />
                    <div className="w-1/3 rounded-t-sm bg-fg-muted/40" style={{ height: `${(o / max) * 100}%` }} />
                  </div>
                  <span className="font-mono text-[10px] text-fg-muted">{d}</span>
                </div>
              ))}
            </div>
          </div>
          <div className={`${card} space-y-4`}>
            <ArcDial value={72} />
            <Donut parts={[['Direct', 42, 'var(--accent)'], ['Social', 28, '#ec4899'], ['Search', 20, '#22c55e'], ['Email', 10, '#f59e0b']]} />
          </div>
        </div>

        <div className={card}>
          <p className="mb-3 font-medium">Recent orders</p>
          <div className="overflow-x-auto">
            <table className="w-full text-left">
              <thead className="text-xs text-fg-muted">
                <tr>
                  {['Order', 'Customer', 'Total', 'Status'].map((h) => (
                    <th key={h} scope="col" className="pb-2 font-normal">{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody className="divide-y divide-border">
                {ORDERS.map(([id, name, total, st]) => (
                  <tr key={id}>
                    <td className="py-2 font-mono text-xs">{id}</td>
                    <td className="py-2">{name}</td>
                    <td className="py-2 tabular-nums">{total}</td>
                    <td className="py-2"><span className={`rounded-full px-2 py-0.5 text-xs ${STATUS[st]}`}>{st}</span></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  )
}
```

# Auth screen
> Split sign-in/up: brand quote panel, social buttons, email/password with show/hide and correct autocomplete.
- **Category:** Screens
- **Slug:** auth-screen
- **Tags:** login, signup, auth, form, password
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/auth-screen
- **Raw source:** https://ui-lab-weld.vercel.app/raw/screens/AuthScreen.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/screens/AuthScreen.tsx

## When to use
- Login, signup, invite acceptance

## Accessibility

Labelled inputs, autocomplete tokens for password managers, show/hide with aria-pressed, errors in aria-live.


## Source
`src/patterns/screens/AuthScreen.tsx`
```tsx
import { useState } from 'react'

/*
 * Split auth screen: brand panel with quote on one side, sign-in form on
 * the other. Social buttons, divider, email + password with show/hide,
 * remember me, and a sign-in/up toggle. Proper autocomplete tokens so
 * password managers work; errors announced via aria-live.
 */

export default function AuthScreen() {
  const [mode, setMode] = useState<'in' | 'up'>('in')
  const [show, setShow] = useState(false)
  const [err, setErr] = useState('')
  return (
    <div className="grid overflow-hidden rounded-2xl border border-border bg-bg md:grid-cols-2">
      <div className="relative hidden flex-col justify-between bg-gradient-to-br from-indigo-600 via-violet-700 to-fuchsia-700 p-8 text-white md:flex">
        <p className="font-semibold">◆ northstar</p>
        <figure>
          <blockquote className="font-display text-2xl italic">"The fastest way we've found to go from idea to something people can use."</blockquote>
          <figcaption className="mt-3 text-sm opacity-80">Lena Ortiz, Head of Product</figcaption>
        </figure>
      </div>
      <div className="p-6 sm:p-10">
        <h2 className="text-2xl font-semibold tracking-tight">{mode === 'in' ? 'Welcome back' : 'Create your account'}</h2>
        <p className="mt-1 text-sm text-fg-muted">
          {mode === 'in' ? 'New here?' : 'Already have an account?'}{' '}
          <button onClick={() => setMode(mode === 'in' ? 'up' : 'in')} className="text-accent hover:underline">{mode === 'in' ? 'Sign up' : 'Sign in'}</button>
        </p>
        <div className="mt-6 grid grid-cols-2 gap-2">
          {['Google', 'GitHub'].map((p) => (
            <button key={p} className="rounded-lg border border-border py-2 text-sm hover:bg-surface">Continue with {p}</button>
          ))}
        </div>
        <div className="my-5 flex items-center gap-3 text-xs text-fg-muted" aria-hidden>
          <span className="h-px flex-1 bg-border" /> or <span className="h-px flex-1 bg-border" />
        </div>
        <form
          noValidate
          className="space-y-4"
          onSubmit={(e) => {
            e.preventDefault()
            setErr(e.currentTarget.checkValidity() ? '' : 'Enter a valid email and a password of 8+ characters.')
          }}
        >
          <p aria-live="assertive" className="text-sm text-danger empty:hidden">{err}</p>
          {mode === 'up' && (
            <label className="block text-sm">Name<input autoComplete="name" required className="mt-1.5 w-full rounded-lg border border-border bg-surface px-3 py-2 outline-none focus:border-accent" /></label>
          )}
          <label className="block text-sm">Email<input type="email" autoComplete="email" required className="mt-1.5 w-full rounded-lg border border-border bg-surface px-3 py-2 outline-none focus:border-accent" /></label>
          <label className="block text-sm">
            <span className="flex justify-between">Password {mode === 'in' && <a href="#" onClick={(e) => e.preventDefault()} className="text-xs text-fg-muted hover:text-fg">Forgot?</a>}</span>
            <span className="relative mt-1.5 block">
              <input type={show ? 'text' : 'password'} minLength={8} required autoComplete={mode === 'in' ? 'current-password' : 'new-password'} className="w-full rounded-lg border border-border bg-surface px-3 py-2 pr-16 outline-none focus:border-accent" />
              <button type="button" onClick={() => setShow((s) => !s)} aria-pressed={show} className="absolute top-1/2 right-2 -translate-y-1/2 rounded px-2 text-xs text-fg-muted hover:text-fg">{show ? 'Hide' : 'Show'}</button>
            </span>
          </label>
          <label className="flex items-center gap-2 text-sm"><input type="checkbox" className="accent-[var(--accent)]" /> Remember me</label>
          <button className="w-full rounded-lg bg-fg py-2.5 text-sm font-medium text-bg">{mode === 'in' ? 'Sign in' : 'Create account'}</button>
        </form>
      </div>
    </div>
  )
}
```

# Kanban board
> Columns with drag-and-drop cards plus a per-card "Move to" select as the keyboard path.
- **Category:** Screens
- **Slug:** kanban-board
- **Tags:** kanban, drag and drop, board, tasks, trello
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/kanban-board
- **Raw source:** https://ui-lab-weld.vercel.app/raw/screens/KanbanBoard.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/screens/KanbanBoard.tsx

## When to use
- Task boards, pipelines, CRMs

## Accessibility

DnD has a select-based alternative; columns are labelled sections; moves announced.


## Source
`src/patterns/screens/KanbanBoard.tsx`
```tsx
import { useState } from 'react'

/*
 * Kanban board with drag and drop (native HTML5 DnD) AND a keyboard path:
 * each card has a "Move to…" select, since DnD alone is not accessible.
 * Columns show counts; a live region announces moves.
 */

type Card = { id: number; t: string; tag: string }
const COLS = ['Backlog', 'In progress', 'Review', 'Done'] as const
type Col = (typeof COLS)[number]
const TAGS: Record<string, string> = { design: 'bg-pink-500/15 text-pink-500', eng: 'bg-sky-500/15 text-sky-500', bug: 'bg-danger/15 text-danger' }

export default function KanbanBoard() {
  const [board, setBoard] = useState<Record<Col, Card[]>>({
    Backlog: [{ id: 1, t: 'Pricing page copy', tag: 'design' }, { id: 2, t: 'Rate-limit the API', tag: 'eng' }],
    'In progress': [{ id: 3, t: 'Shader presets', tag: 'design' }, { id: 4, t: 'Fix Safari blur', tag: 'bug' }],
    Review: [{ id: 5, t: 'OTP input', tag: 'eng' }],
    Done: [{ id: 6, t: 'Design tokens', tag: 'design' }],
  })
  const [msg, setMsg] = useState('')
  const [over, setOver] = useState<Col | null>(null)

  const move = (id: number, to: Col) => {
    setBoard((b) => {
      const from = COLS.find((c) => b[c].some((x) => x.id === id))!
      if (from === to) return b
      const card = b[from].find((x) => x.id === id)!
      setMsg(`Moved "${card.t}" to ${to}`)
      return { ...b, [from]: b[from].filter((x) => x.id !== id), [to]: [...b[to], card] }
    })
  }

  return (
    <div>
      <div className="grid gap-3 overflow-x-auto sm:grid-cols-2 lg:grid-cols-4">
        {COLS.map((col) => (
          <section
            key={col}
            aria-label={col}
            onDragOver={(e) => { e.preventDefault(); setOver(col) }}
            onDragLeave={() => setOver(null)}
            onDrop={(e) => { move(Number(e.dataTransfer.getData('text')), col); setOver(null) }}
            className={`min-h-48 rounded-xl border p-3 transition-colors ${over === col ? 'border-accent bg-accent-soft/40' : 'border-border bg-surface/50'}`}
          >
            <h3 className="mb-3 flex justify-between text-sm font-medium">{col}<span className="font-mono text-xs text-fg-muted">{board[col].length}</span></h3>
            <ul className="space-y-2">
              {board[col].map((c) => (
                <li key={c.id} draggable onDragStart={(e) => e.dataTransfer.setData('text', String(c.id))} className="cursor-grab rounded-lg border border-border bg-surface p-3 shadow-sm active:cursor-grabbing">
                  <p className="text-sm">{c.t}</p>
                  <div className="mt-2 flex items-center justify-between">
                    <span className={`rounded-full px-2 py-0.5 text-[11px] ${TAGS[c.tag]}`}>{c.tag}</span>
                    <label className="sr-only" htmlFor={`mv-${c.id}`}>Move {c.t}</label>
                    <select id={`mv-${c.id}`} value={col} onChange={(e) => move(c.id, e.target.value as Col)} className="rounded border border-border bg-bg px-1 text-[11px] text-fg-muted">
                      {COLS.map((o) => <option key={o}>{o}</option>)}
                    </select>
                  </div>
                </li>
              ))}
            </ul>
          </section>
        ))}
      </div>
      <p aria-live="polite" className="mt-2 h-4 font-mono text-xs text-fg-muted">{msg}</p>
    </div>
  )
}
```

# AI chat screen
> Message log, bubbles, typing indicator, suggestion chips and an auto-growing composer.
- **Category:** Screens
- **Slug:** chat-ui
- **Tags:** chat, ai assistant, messages, composer, chatbot
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/chat-ui
- **Raw source:** https://ui-lab-weld.vercel.app/raw/screens/ChatUI.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/screens/ChatUI.tsx

## When to use
- AI assistants, support chat, messaging

## Accessibility

role=log live region, speaker prefixes for screen readers, Enter/Shift+Enter, labelled composer and send button.


## Source
`src/patterns/screens/ChatUI.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'

/*
 * AI chat screen: message list (role="log" so new messages are announced),
 * user/assistant bubbles, typing indicator, auto-scroll to the latest,
 * suggestion chips, and a composer that grows with content. Enter sends,
 * Shift+Enter adds a line. The reply here is canned for the demo.
 */

type Msg = { who: 'me' | 'ai'; text: string }

export default function ChatUI() {
  const [msgs, setMsgs] = useState<Msg[]>([{ who: 'ai', text: 'Hi! Ask me for a UI pattern, e.g. "a 3D carousel".' }])
  const [text, setText] = useState('')
  const [typing, setTyping] = useState(false)
  const end = useRef<HTMLDivElement>(null)
  useEffect(() => {
    // Braces matter: newer browsers return a Promise from scrollIntoView, and
    // React treats any non-function effect return value as an error.
    end.current?.scrollIntoView({ block: 'nearest' })
  }, [msgs, typing])

  const send = (t: string) => {
    if (!t.trim()) return
    setMsgs((m) => [...m, { who: 'me', text: t.trim() }])
    setText('')
    setTyping(true)
    setTimeout(() => {
      setTyping(false)
      setMsgs((m) => [...m, { who: 'ai', text: `Try "3D ring carousel" or "helix gallery". Both are in /llms.txt with full source.` }])
    }, 1100)
  }

  return (
    <div className="flex h-[26rem] flex-col overflow-hidden rounded-2xl border border-border bg-bg">
      <header className="flex items-center gap-3 border-b border-border px-4 py-3">
        <span className="grid h-8 w-8 place-items-center rounded-full bg-accent text-sm text-accent-fg" aria-hidden>✦</span>
        <div><p className="text-sm font-medium">Pattern assistant</p><p className="text-xs text-success">online</p></div>
      </header>
      <div role="log" aria-live="polite" className="flex-1 space-y-3 overflow-y-auto p-4">
        {msgs.map((m, i) => (
          <div key={i} className={`flex ${m.who === 'me' ? 'justify-end' : ''}`}>
            <p className={`max-w-[75%] rounded-2xl px-4 py-2 text-sm ${m.who === 'me' ? 'rounded-br-sm bg-accent text-accent-fg' : 'rounded-bl-sm bg-surface-2'}`}>
              <span className="sr-only">{m.who === 'me' ? 'You: ' : 'Assistant: '}</span>{m.text}
            </p>
          </div>
        ))}
        {typing && (
          <div className="flex w-fit gap-1 rounded-2xl bg-surface-2 px-4 py-3" aria-label="Assistant is typing">
            {[0, 1, 2].map((i) => <span key={i} className="h-1.5 w-1.5 animate-bounce rounded-full bg-fg-muted" style={{ animationDelay: `${i * 0.15}s` }} />)}
          </div>
        )}
        <div ref={end} />
      </div>
      <div className="flex gap-2 overflow-x-auto px-4 pb-2">
        {['3D carousel', 'Shader hero', 'Pricing section'].map((s) => (
          <button key={s} onClick={() => send(s)} className="shrink-0 rounded-full border border-border px-3 py-1 text-xs text-fg-muted hover:text-fg">{s}</button>
        ))}
      </div>
      <form onSubmit={(e) => { e.preventDefault(); send(text) }} className="flex items-end gap-2 border-t border-border p-3">
        <label htmlFor="chat-in" className="sr-only">Message</label>
        <textarea
          id="chat-in"
          rows={1}
          value={text}
          onChange={(e) => setText(e.target.value)}
          onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(text) } }}
          placeholder="Message…"
          className="max-h-32 flex-1 resize-none rounded-xl border border-border bg-surface px-3 py-2 text-sm outline-none [field-sizing:content] focus:border-accent"
        />
        <button aria-label="Send" disabled={!text.trim()} className="grid h-9 w-9 place-items-center rounded-full bg-fg text-bg disabled:opacity-30">↑</button>
      </form>
    </div>
  )
}
```

# Sortable, filterable data table
> A real table with scoped headers, sort buttons in the header cells with aria-sort, a filter that reports its row count, tabular figures, and a scroll region on phones.
- **Category:** Screens
- **Slug:** data-table
- **Tags:** table, sort, filter, aria-sort, data
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/data-table
- **Raw source:** https://ui-lab-weld.vercel.app/raw/screens/DataTable.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/screens/DataTable.tsx

## When to use
- Admin lists and reports
- Any tabular data that people compare

## Accessibility

th scope and aria-sort are set; sort controls are buttons; status is a word plus a shape, not colour alone; the scroll region is focusable and labelled; the count is a live region.


## Source
`src/patterns/screens/DataTable.tsx`
```tsx
import { useMemo, useState } from 'react'

/*
 * An accessible data table: real <table> with scoped headers, sortable columns as buttons inside the header cells
 * (aria-sort on the th), a filter that reports the row count in a live region, and numbers right-aligned in tabular
 * figures. Status is a word plus a shape, never colour alone. Wide tables scroll inside a focusable region on phones.
 */

type Row = { name: string; role: string; city: string; salary: number; status: 'Active' | 'Away' | 'Left' }
const ROWS: Row[] = [
  { name: 'Amara Osei', role: 'Designer', city: 'Leeds', salary: 52000, status: 'Active' },
  { name: 'Ben Hollis', role: 'Engineer', city: 'Bristol', salary: 68000, status: 'Active' },
  { name: 'Chioma Eze', role: 'Engineer', city: 'London', salary: 72000, status: 'Away' },
  { name: 'Dev Patel', role: 'Producer', city: 'Leeds', salary: 49000, status: 'Active' },
  { name: 'Elin Berg', role: 'Designer', city: 'Glasgow', salary: 55000, status: 'Left' },
  { name: 'Farid Noor', role: 'Support', city: 'Bristol', salary: 38000, status: 'Active' },
]
type Key = keyof Row
const COLS: { key: Key; label: string; num?: boolean }[] = [
  { key: 'name', label: 'Name' },
  { key: 'role', label: 'Role' },
  { key: 'city', label: 'City' },
  { key: 'salary', label: 'Salary', num: true },
  { key: 'status', label: 'Status' },
]
const MARK = { Active: '●', Away: '◐', Left: '○' }

export default function DataTable() {
  const [sort, setSort] = useState<{ key: Key; dir: 'asc' | 'desc' } | null>(null)
  const [q, setQ] = useState('')
  const rows = useMemo(() => {
    const f = ROWS.filter((r) => Object.values(r).join(' ').toLowerCase().includes(q.trim().toLowerCase()))
    if (!sort) return f
    return [...f].sort((a, b) => {
      const x = a[sort.key]
      const y = b[sort.key]
      const c = typeof x === 'number' ? x - (y as number) : String(x).localeCompare(String(y))
      return sort.dir === 'asc' ? c : -c
    })
  }, [q, sort])

  const toggle = (key: Key) => setSort((s) => (s?.key === key ? (s.dir === 'asc' ? { key, dir: 'desc' } : null) : { key, dir: 'asc' }))

  return (
    <div>
      <div className="mb-3 flex flex-wrap items-center justify-between gap-3">
        <label className="block">
          <span className="sr-only">Filter people</span>
          <input type="search" value={q} onChange={(e) => setQ(e.target.value)} placeholder="Filter people" className="min-h-11 w-64 max-w-full rounded-md border border-border bg-surface px-3 text-sm" />
        </label>
        <p className="text-sm text-fg-muted" role="status">{rows.length} of {ROWS.length} people</p>
      </div>
      <div tabIndex={0} role="region" aria-label="People table, scrolls sideways on small screens" className="overflow-x-auto rounded-xl border border-border">
        <table className="w-full min-w-[34rem] border-collapse text-sm">
          <caption className="sr-only">People, with role, city, salary and status. Column headers are sort buttons.</caption>
          <thead className="bg-surface-2 text-left">
            <tr>
              {COLS.map((c) => (
                <th key={c.key} scope="col" aria-sort={sort?.key === c.key ? (sort.dir === 'asc' ? 'ascending' : 'descending') : 'none'} className={`p-0 font-medium ${c.num ? 'text-right' : ''}`}>
                  <button onClick={() => toggle(c.key)} className={`flex min-h-11 w-full items-center gap-1.5 px-3 hover:bg-surface ${c.num ? 'justify-end' : ''}`}>
                    {c.label}
                    <span aria-hidden className="text-fg-muted">{sort?.key === c.key ? (sort.dir === 'asc' ? '▲' : '▼') : '↕'}</span>
                  </button>
                </th>
              ))}
            </tr>
          </thead>
          <tbody className="divide-y divide-border">
            {rows.map((r) => (
              <tr key={r.name} className="hover:bg-surface-2/60">
                <th scope="row" className="px-3 py-3 text-left font-medium">{r.name}</th>
                <td className="px-3 py-3">{r.role}</td>
                <td className="px-3 py-3">{r.city}</td>
                <td className="px-3 py-3 text-right tabular-nums">£{r.salary.toLocaleString('en-GB')}</td>
                <td className="px-3 py-3"><span aria-hidden>{MARK[r.status]} </span>{r.status}</td>
              </tr>
            ))}
            {rows.length === 0 && (
              <tr><td colSpan={5} className="px-3 py-8 text-center text-fg-muted">No one matches “{q}”.</td></tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  )
}
```

# Shop with basket and live totals
> Product rows, a basket with quantity steppers that stop at one, a separate Remove button, a subtotal and delivery that update in a live region, and a free-delivery nudge.
- **Category:** Screens
- **Slug:** shop-cart
- **Tags:** shop, cart, ecommerce, stepper, totals
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/shop-cart
- **Raw source:** https://ui-lab-weld.vercel.app/raw/screens/ShopCart.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/screens/ShopCart.tsx

## When to use
- Small shops and order forms
- Showing money and quantity done carefully

## Accessibility

Every control is a labelled button of at least 44px; quantity changes and totals are announced in a status region; prices use Intl; the empty basket explains what to do.


## Source
`src/patterns/screens/ShopCart.tsx`
```tsx
import { useMemo, useState } from 'react'

/*
 * A small shop: product cards with an add button, a cart with quantity steppers that never go below one (remove is a
 * separate, labelled button), a subtotal and shipping line that update in a live region, and an empty state that
 * points back. Prices are formatted with Intl. Everything is a real button or link; nothing relies on hover.
 */

const PRODUCTS = [
  { id: 'mug', name: 'Stoneware mug', price: 18, note: 'Holds 350 ml. Dishwasher safe.' },
  { id: 'tote', name: 'Canvas tote', price: 24, note: 'Heavy cotton, inside pocket.' },
  { id: 'print', name: 'Risograph print', price: 35, note: 'A3, two-colour, numbered.' },
] as const
const money = (n: number) => new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP' }).format(n)

export default function ShopCart() {
  const [cart, setCart] = useState<Record<string, number>>({})
  const lines = PRODUCTS.filter((p) => cart[p.id])
  const sub = useMemo(() => lines.reduce((n, p) => n + p.price * cart[p.id], 0), [lines, cart])
  const ship = sub === 0 ? 0 : sub >= 50 ? 0 : 4.5
  const count = Object.values(cart).reduce((a, b) => a + b, 0)
  const set = (id: string, q: number) => setCart((c) => { const n = { ...c }; if (q <= 0) delete n[id]; else n[id] = q; return n })

  return (
    <div className="grid gap-6 md:grid-cols-[1fr_20rem]">
      <section aria-labelledby="shop-h">
        <h3 id="shop-h" className="text-lg font-semibold">Shop</h3>
        <ul className="mt-3 grid gap-3 sm:grid-cols-3 md:grid-cols-1">
          {PRODUCTS.map((p) => (
            <li key={p.id} className="flex items-center gap-4 rounded-xl border border-border bg-surface p-3">
              <div aria-hidden className="size-16 shrink-0 rounded-lg bg-surface-2" style={{ background: `color-mix(in srgb, var(--accent) ${p.price}%, var(--surface-2))` }} />
              <div className="min-w-0 flex-1">
                <p className="font-medium">{p.name}</p>
                <p className="text-sm text-fg-muted">{p.note}</p>
                <p className="mt-1 text-sm tabular-nums">{money(p.price)}</p>
              </div>
              <button onClick={() => set(p.id, (cart[p.id] ?? 0) + 1)} className="min-h-11 shrink-0 rounded-md bg-fg px-4 text-sm font-medium text-bg" aria-label={`Add ${p.name} to basket`}>Add</button>
            </li>
          ))}
        </ul>
      </section>

      <section aria-labelledby="cart-h" className="rounded-xl border border-border bg-surface p-4">
        <h3 id="cart-h" className="text-lg font-semibold">Basket <span className="text-sm font-normal text-fg-muted">({count})</span></h3>
        {lines.length === 0 ? (
          <p className="mt-3 text-sm text-fg-muted">Your basket is empty. Add something from the shop and it will appear here.</p>
        ) : (
          <ul className="mt-3 divide-y divide-border">
            {lines.map((p) => (
              <li key={p.id} className="py-3">
                <div className="flex items-baseline justify-between gap-2">
                  <p className="font-medium">{p.name}</p>
                  <p className="text-sm tabular-nums">{money(p.price * cart[p.id])}</p>
                </div>
                <div className="mt-2 flex items-center gap-2">
                  <button onClick={() => set(p.id, Math.max(1, cart[p.id] - 1))} disabled={cart[p.id] === 1} aria-label={`One fewer ${p.name}`} className="grid size-11 place-items-center rounded-md border border-border disabled:opacity-40">−</button>
                  <span className="w-8 text-center tabular-nums" aria-label={`Quantity ${cart[p.id]}`}>{cart[p.id]}</span>
                  <button onClick={() => set(p.id, cart[p.id] + 1)} aria-label={`One more ${p.name}`} className="grid size-11 place-items-center rounded-md border border-border">+</button>
                  <button onClick={() => set(p.id, 0)} className="ml-auto min-h-11 px-2 text-sm text-fg-muted underline underline-offset-2 hover:text-fg">Remove</button>
                </div>
              </li>
            ))}
          </ul>
        )}
        <div role="status" aria-live="polite" className="mt-3 border-t border-border pt-3 text-sm">
        <dl className="space-y-1">
          <div className="flex justify-between"><dt className="text-fg-muted">Subtotal</dt><dd className="tabular-nums">{money(sub)}</dd></div>
          <div className="flex justify-between"><dt className="text-fg-muted">Delivery</dt><dd className="tabular-nums">{sub === 0 ? '—' : ship === 0 ? 'Free' : money(ship)}</dd></div>
          <div className="flex justify-between text-base font-semibold"><dt>Total</dt><dd className="tabular-nums">{money(sub + ship)}</dd></div>
        </dl>
        </div>
        {sub > 0 && sub < 50 && <p className="mt-2 text-xs text-fg-muted">Add {money(50 - sub)} more for free delivery.</p>}
        <button disabled={lines.length === 0} className="mt-4 min-h-12 w-full rounded-md bg-accent text-sm font-medium text-accent-fg disabled:opacity-40">Checkout</button>
      </section>
    </div>
  )
}
```

# Settings with switches and unsaved changes
> Switches with visible On and Off words, fieldsets, an unsaved-changes message with Save and Discard, and a separate confirmed delete action.
- **Category:** Screens
- **Slug:** settings-screen
- **Tags:** settings, switch, form, fieldset, confirm
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/settings-screen
- **Raw source:** https://ui-lab-weld.vercel.app/raw/screens/SettingsScreen.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/screens/SettingsScreen.tsx

## When to use
- Account and preference screens
- Forms that must not lose changes silently

## Accessibility

Switches use role=switch with aria-checked and a text state; groups are fieldsets with legends; the unsaved state is announced; the destructive action needs a second step.


## Source
`src/patterns/screens/SettingsScreen.tsx`
```tsx
import { useId, useState } from 'react'

/*
 * A settings screen with honest state: real switches (role=switch, aria-checked) with a visible on/off word, grouped
 * in fieldsets, an unsaved-changes bar that appears only when something differs, Save and Discard buttons, and a
 * status message after saving. Danger actions are separate, named and need a confirmation step.
 */

type S = { emails: boolean; digest: boolean; sound: boolean; theme: 'system' | 'light' | 'dark'; name: string }
const START: S = { emails: true, digest: false, sound: false, theme: 'system', name: 'Alex Morgan' }

function Switch({ label, hint, on, set }: { label: string; hint: string; on: boolean; set: (v: boolean) => void }) {
  const id = useId()
  return (
    <div className="flex items-center justify-between gap-4 py-3">
      <div>
        <p id={id} className="font-medium">{label}</p>
        <p className="text-sm text-fg-muted">{hint}</p>
      </div>
      <button role="switch" aria-checked={on} aria-labelledby={id} onClick={() => set(!on)} className={`flex min-h-11 min-w-20 items-center justify-between gap-2 rounded-full border px-3 text-xs font-medium ${on ? 'border-accent bg-accent-soft text-accent' : 'border-border text-fg-muted'}`}>
        <span>{on ? 'On' : 'Off'}</span>
        <span aria-hidden className={`size-4 rounded-full ${on ? 'bg-accent' : 'bg-fg-muted'}`} />
      </button>
    </div>
  )
}

export default function SettingsScreen() {
  const [saved, setSaved] = useState<S>(START)
  const [s, setS] = useState<S>(START)
  const [msg, setMsg] = useState('')
  const [confirm, setConfirm] = useState(false)
  const dirty = JSON.stringify(s) !== JSON.stringify(saved)
  const put = (p: Partial<S>) => { setS({ ...s, ...p }); setMsg('') }

  return (
    <div className="mx-auto max-w-xl">
      <h3 className="text-2xl font-semibold tracking-tight">Settings</h3>
      <form className="mt-4 divide-y divide-border rounded-xl border border-border bg-surface px-4" onSubmit={(e) => { e.preventDefault(); setSaved(s); setMsg('Settings saved.') }}>
        <fieldset className="py-3">
          <legend className="sr-only">Profile</legend>
          <p aria-hidden className="text-xs font-medium tracking-wider text-fg-muted uppercase">Profile</p>
          <label className="mt-2 block text-sm font-medium" htmlFor="set-name">Display name</label>
          <input id="set-name" value={s.name} onChange={(e) => put({ name: e.target.value })} className="mt-1 min-h-11 w-full rounded-md border border-border bg-bg px-3" />
        </fieldset>
        <fieldset>
          <legend className="sr-only">Notifications</legend>
          <p aria-hidden className="pt-3 text-xs font-medium tracking-wider text-fg-muted uppercase">Notifications</p>
          <Switch label="Product emails" hint="News about features you use." on={s.emails} set={(v) => put({ emails: v })} />
          <Switch label="Weekly digest" hint="One summary on Monday morning." on={s.digest} set={(v) => put({ digest: v })} />
          <Switch label="Sounds" hint="Play a short tone for new messages." on={s.sound} set={(v) => put({ sound: v })} />
        </fieldset>
        <fieldset className="py-3">
          <legend className="sr-only">Theme</legend>
          <p aria-hidden className="text-xs font-medium tracking-wider text-fg-muted uppercase">Theme</p>
          <div className="mt-2 flex flex-wrap gap-2" role="radiogroup" aria-label="Theme">
            {(['system', 'light', 'dark'] as const).map((t) => (
              <button type="button" key={t} role="radio" aria-checked={s.theme === t} onClick={() => put({ theme: t })} className={`min-h-11 rounded-md border px-4 text-sm capitalize ${s.theme === t ? 'border-fg bg-fg text-bg' : 'border-border'}`}>{t}</button>
            ))}
          </div>
        </fieldset>
        <div className="flex flex-wrap items-center gap-2 py-3">
          <button disabled={!dirty} className="min-h-11 rounded-md bg-accent px-5 text-sm font-medium text-accent-fg disabled:opacity-40">Save changes</button>
          <button type="button" disabled={!dirty} onClick={() => { setS(saved); setMsg('') }} className="min-h-11 rounded-md border border-border px-4 text-sm disabled:opacity-40">Discard</button>
          <p className="text-sm text-fg-muted" role="status">{dirty ? 'You have unsaved changes.' : msg}</p>
        </div>
      </form>

      <section className="mt-6 rounded-xl border border-danger/50 p-4" aria-labelledby="danger-h">
        <h4 id="danger-h" className="font-semibold">Delete account</h4>
        <p className="mt-1 text-sm text-fg-muted">This removes your data and cannot be undone.</p>
        {!confirm ? (
          <button onClick={() => setConfirm(true)} className="mt-3 min-h-11 rounded-md border border-danger px-4 text-sm font-medium text-danger">Delete my account…</button>
        ) : (
          <div className="mt-3 flex flex-wrap items-center gap-2" role="alert">
            <p className="text-sm font-medium">Are you sure?</p>
            <button className="min-h-11 rounded-md bg-danger px-4 text-sm font-medium text-danger-fg">Yes, delete</button>
            <button onClick={() => setConfirm(false)} className="min-h-11 rounded-md border border-border px-4 text-sm">Cancel</button>
          </div>
        )}
      </section>
    </div>
  )
}
```

# Helpful 404 page
> A 404 that says what happened and offers search, popular pages and the home page. No joke needed.
- **Category:** Screens
- **Slug:** not-found-page
- **Tags:** 404, error page, search, recovery
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/not-found-page
- **Raw source:** https://ui-lab-weld.vercel.app/raw/screens/NotFoundPage.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/screens/NotFoundPage.tsx

## When to use
- Every site
- Recovering lost visitors

## Accessibility

Plain language; a labelled search form; links are real links with 44px targets; remember to return a 404 status and a clear page title.


## Source
`src/patterns/screens/NotFoundPage.tsx`
```tsx
import { useState } from 'react'

/*
 * A 404 that helps. It says plainly what happened, gives the likely ways forward (home, search, the most visited
 * pages) and keeps the site's chrome. The page title should read "Page not found", and the server should return a 404
 * status so search engines do not index it. No joke is required; being useful is the joke.
 */

const POPULAR = ['Pricing', 'Documentation', 'Contact us', 'Status page']

export default function NotFoundPage() {
  const [q, setQ] = useState('')
  const [sent, setSent] = useState('')
  return (
    <div className="mx-auto max-w-lg py-6 text-center">
      <p className="font-mono text-sm text-fg-muted">Error 404</p>
      <h3 className="mt-2 text-4xl font-semibold tracking-tight">We cannot find that page</h3>
      <p className="mt-3 text-fg-muted">The link may be old, or the address may have a typo. Here are some ways back.</p>
      <form
        role="search"
        className="mt-6 flex gap-2"
        onSubmit={(e) => { e.preventDefault(); setSent(q.trim()) }}
      >
        <label className="flex-1 text-left">
          <span className="sr-only">Search this site</span>
          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search this site" className="min-h-12 w-full rounded-md border border-border bg-surface px-3" />
        </label>
        <button className="min-h-12 rounded-md bg-fg px-5 text-sm font-medium text-bg">Search</button>
      </form>
      {sent && <p className="mt-3 text-sm text-fg-muted" role="status">Searching for “{sent}” would go here.</p>}
      <p className="mt-8 text-sm font-medium">Popular pages</p>
      <ul className="mt-2 flex flex-wrap justify-center gap-2">
        {POPULAR.map((p) => (
          <li key={p}>
            <a href="#nf" onClick={(e) => e.preventDefault()} className="grid min-h-11 place-items-center rounded-md border border-border px-4 text-sm hover:bg-surface">{p}</a>
          </li>
        ))}
      </ul>
      <p className="mt-8"><a href="#nf" onClick={(e) => e.preventDefault()} className="text-sm font-medium text-accent underline underline-offset-2">Go to the home page</a></p>
    </div>
  )
}
```

# Search with filters
> A search box and grouped checkbox filters with counts, removable chips for what is applied, a live result count and an honest empty state.
- **Category:** Screens
- **Slug:** faceted-search
- **Tags:** search, filters, facets, checkbox, results
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/faceted-search
- **Raw source:** https://ui-lab-weld.vercel.app/raw/screens/FacetedSearch.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/screens/FacetedSearch.tsx

## When to use
- Libraries, catalogues and directories
- Filtering a list the user already understands

## Accessibility

Filters are native checkboxes in fieldsets with legends; the result count is a status region; each applied filter is a labelled remove button; the empty state offers a way out.


## Source
`src/patterns/screens/FacetedSearch.tsx`
```tsx
import { useMemo, useState } from 'react'

/*
 * Search with filters (facets): a text box, grouped filters in fieldsets with real checkboxes, removable chips showing
 * what is applied, a live result count, and an honest empty state with a way out. Filters combine with AND between groups
 * and OR inside a group. Every control is a native input or button; the results list is a plain list.
 */

type Item = { name: string; kind: string; level: string; mins: number }
const ITEMS: Item[] = [
  { name: 'Reading a contrast ratio', kind: 'Guide', level: 'Beginner', mins: 6 },
  { name: 'Building a combobox', kind: 'Tutorial', level: 'Advanced', mins: 25 },
  { name: 'Focus rings that people can see', kind: 'Guide', level: 'Beginner', mins: 5 },
  { name: 'Sorting and filtering tables', kind: 'Tutorial', level: 'Intermediate', mins: 18 },
  { name: 'Motion without vertigo', kind: 'Essay', level: 'Intermediate', mins: 12 },
  { name: 'A short history of the screen reader', kind: 'Essay', level: 'Beginner', mins: 9 },
  { name: 'Forms that forgive', kind: 'Tutorial', level: 'Beginner', mins: 14 },
  { name: 'Testing with a keyboard alone', kind: 'Guide', level: 'Intermediate', mins: 8 },
]
const FACETS: { key: 'kind' | 'level'; label: string; opts: string[] }[] = [
  { key: 'kind', label: 'Type', opts: ['Guide', 'Tutorial', 'Essay'] },
  { key: 'level', label: 'Level', opts: ['Beginner', 'Intermediate', 'Advanced'] },
]

export default function FacetedSearch() {
  const [q, setQ] = useState('')
  const [sel, setSel] = useState<Record<string, string[]>>({ kind: [], level: [] })
  const results = useMemo(
    () => ITEMS.filter((it) => it.name.toLowerCase().includes(q.trim().toLowerCase()) && FACETS.every((f) => !sel[f.key].length || sel[f.key].includes(it[f.key]))),
    [q, sel],
  )
  const toggle = (k: string, v: string) => setSel((s) => ({ ...s, [k]: s[k].includes(v) ? s[k].filter((x) => x !== v) : [...s[k], v] }))
  const chips = FACETS.flatMap((f) => sel[f.key].map((v) => [f.key, v] as const))
  const clear = () => { setQ(''); setSel({ kind: [], level: [] }) }

  return (
    <div className="grid gap-6 md:grid-cols-[14rem_1fr]">
      <form role="search" aria-label="Filter the library" onSubmit={(e) => e.preventDefault()} className="space-y-4">
        <label className="block text-sm font-medium">Search
          <input type="search" value={q} onChange={(e) => setQ(e.target.value)} className="mt-1 min-h-11 w-full rounded-md border border-border bg-surface px-3 font-normal" />
        </label>
        {FACETS.map((f) => (
          <fieldset key={f.key}>
            <legend className="text-sm font-medium">{f.label}</legend>
            <div className="mt-1 space-y-1">
              {f.opts.map((o) => (
                <label key={o} className="flex min-h-9 cursor-pointer items-center gap-2 text-sm">
                  <input type="checkbox" checked={sel[f.key].includes(o)} onChange={() => toggle(f.key, o)} className="size-5" />
                  {o} <span className="text-fg-muted">({ITEMS.filter((it) => it[f.key] === o).length})</span>
                </label>
              ))}
            </div>
          </fieldset>
        ))}
      </form>
      <div>
        <div className="flex flex-wrap items-center gap-2 text-sm">
          <p role="status" className="font-medium">{results.length} result{results.length === 1 ? '' : 's'}</p>
          {chips.map(([k, v]) => (
            <button key={k + v} onClick={() => toggle(k, v)} aria-label={`Remove filter: ${v}`} className="inline-flex min-h-9 items-center gap-1.5 rounded-full border border-border bg-surface px-3 hover:bg-surface-2">
              {v} <span aria-hidden>×</span>
            </button>
          ))}
          {(q || chips.length > 0) && <button onClick={clear} className="min-h-9 px-2 text-fg-muted underline underline-offset-2 hover:text-fg">Clear all</button>}
        </div>
        {results.length === 0 ? (
          <p className="mt-6 rounded-xl border border-border p-6 text-center text-fg-muted">Nothing matches. <button onClick={clear} className="font-medium text-accent underline underline-offset-2">Clear the search and filters</button> to see everything.</p>
        ) : (
          <ul className="mt-3 divide-y divide-border rounded-xl border border-border">
            {results.map((r) => (
              <li key={r.name} className="flex flex-wrap items-baseline justify-between gap-2 px-4 py-3">
                <span className="font-medium">{r.name}</span>
                <span className="text-sm text-fg-muted">{r.kind} · {r.level} · {r.mins} min</span>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  )
}
```

# First-run checklist
> A getting-started checklist with real checkboxes, a progress bar and words, a suggested next step, any order, and a way to hide it.
- **Category:** Screens
- **Slug:** onboarding-checklist
- **Tags:** onboarding, checklist, progress, first run, app
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/onboarding-checklist
- **Raw source:** https://ui-lab-weld.vercel.app/raw/screens/OnboardingChecklist.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/screens/OnboardingChecklist.tsx

## When to use
- Apps with a few setup steps
- Activation without a forced tour

## Accessibility

Real checkboxes announce their state; progress is a progressbar with a value and a spoken count; nothing is locked; the whole list can be hidden and restored.


## Source
`src/patterns/screens/OnboardingChecklist.tsx`
```tsx
import { useState } from 'react'

/*
 * A first-run checklist that respects people. Real checkboxes (so state is announced), a progress line written in words
 * and drawn as a bar, a way to dismiss the whole thing without finishing it, and the next unfinished step surfaced as the
 * suggested one. Progress is the count of ticked items, not an animation, and nothing is locked: any step can be done in
 * any order.
 */

const STEPS = [
  ['Add your name and photo', 'Takes a minute. People trust a name.'],
  ['Create your first project', 'Start from a template or a blank page.'],
  ['Invite a teammate', 'Work is easier when someone can review it.'],
  ['Connect your calendar', 'Optional. Shows deadlines next to your work.'],
] as const

export default function OnboardingChecklist() {
  const [done, setDone] = useState<boolean[]>([true, false, false, false])
  const [hidden, setHidden] = useState(false)
  const n = done.filter(Boolean).length
  const next = done.findIndex((d) => !d)

  if (hidden)
    return (
      <p className="mx-auto max-w-md rounded-xl border border-border p-4 text-sm text-fg-muted">
        Checklist hidden. <button onClick={() => setHidden(false)} className="font-medium text-accent underline underline-offset-2">Show it again</button>
      </p>
    )

  return (
    <section aria-labelledby="ob-h" className="mx-auto max-w-md rounded-xl border border-border bg-surface p-5">
      <div className="flex items-start justify-between gap-3">
        <div>
          <h3 id="ob-h" className="text-lg font-semibold">Getting started</h3>
          <p className="text-sm text-fg-muted" role="status">{n === STEPS.length ? 'All done. Nice work.' : `${n} of ${STEPS.length} done`}</p>
        </div>
        <button onClick={() => setHidden(true)} className="min-h-11 shrink-0 px-2 text-sm text-fg-muted underline underline-offset-2 hover:text-fg">Hide</button>
      </div>
      <div className="mt-3 h-2 overflow-hidden rounded bg-border" role="progressbar" aria-valuemin={0} aria-valuemax={STEPS.length} aria-valuenow={n} aria-label="Setup progress">
        <div className="h-full origin-left bg-accent transition-transform duration-500 motion-reduce:transition-none" style={{ transform: `scaleX(${n / STEPS.length})` }} />
      </div>
      <ul className="mt-4 space-y-2">
        {STEPS.map(([t, d], i) => (
          <li key={t}>
            <label className={`flex cursor-pointer items-start gap-3 rounded-lg p-2 ${i === next ? 'bg-accent-soft' : 'hover:bg-surface-2'}`}>
              <input type="checkbox" checked={done[i]} onChange={() => setDone(done.map((v, j) => (j === i ? !v : v)))} className="mt-1 size-5" />
              <span>
                <span className={`block font-medium ${done[i] ? 'line-through' : ''}`}>{t}{i === next && <span className="ml-2 text-xs font-semibold text-accent">Suggested next</span>}</span>
                <span className="block text-sm text-fg-muted">{d}</span>
              </span>
            </label>
          </li>
        ))}
      </ul>
    </section>
  )
}
```

# Site: SOLAR (3D product scroll)
> A complete product site. One procedural 3D can spins through three flavors as you scroll; label, palette and copy swap on every turn.
- **Category:** Sites
- **Slug:** site-solar
- **Tags:** site, full page, product, 3d, scroll, gsap, scrolltrigger, lenis, react three fiber, can, palette, pinned
- **Dependencies:** gsap, lenis, three, @react-three/fiber, @react-three/drei, @fontsource/anton, @fontsource-variable/bricolage-grotesque, sites/_shared.ts
- **Live demo:** https://ui-lab-weld.vercel.app/#/site-solar
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sites/solar/index.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sites/solar/index.tsx
- **Raw files:** https://ui-lab-weld.vercel.app/raw/sites/solar/index.tsx, https://ui-lab-weld.vercel.app/raw/sites/solar/Scene.tsx, https://ui-lab-weld.vercel.app/raw/sites/solar/label.ts, https://ui-lab-weld.vercel.app/raw/sites/solar/rig.ts, https://ui-lab-weld.vercel.app/raw/sites/solar/flavors.ts, https://ui-lab-weld.vercel.app/raw/sites/solar/styles.css

## When to use
- A physical product with one hero object (drink, shoe, headphones)
- Reference for the master-timeline pattern: 1 GSAP time unit = 1px of scroll, a mutable rig read in useFrame

## Accessibility

Decorative canvas is aria-hidden; flavor names are exposed through a visually hidden heading. Smooth scroll, sparkles and the intro are off under reduced motion; keyboard focus rings and 44px targets throughout.


## Source
Files: `src/patterns/sites/solar/index.tsx`, `src/patterns/sites/solar/Scene.tsx`, `src/patterns/sites/solar/label.ts`, `src/patterns/sites/solar/rig.ts`, `src/patterns/sites/solar/flavors.ts`, `src/patterns/sites/solar/styles.css`
```tsx
// ===== src/patterns/sites/solar/index.tsx =====
import { lazy, Suspense, useCallback, useLayoutEffect, useRef } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import '@fontsource/anton'
import '@fontsource-variable/bricolage-grotesque'
import './styles.css'
import { reducedMotion, useSiteScroll } from '../_shared'
import { CTA_BG, CTA_FG, FLAVORS, STORY_BG, STORY_FG } from './flavors'
import { intro, rig } from './rig'

gsap.registerPlugin(ScrollTrigger)

// three.js is ~1MB: load it after first paint so the splash shows immediately
const Scene = lazy(() => import('./Scene'))

const WORDS = ['ZERO SUGAR', 'REAL FRUIT', 'COLD PRESSED', 'SUN FIRST']
const Spark = () => (
  <svg className="spark" viewBox="0 0 24 24" aria-hidden="true">
    <path d="M12 0l3 9 9 3-9 3-3 9-3-9-9-3 9-3z" />
  </svg>
)

const reduced = reducedMotion()
const TURNS = Math.PI * 6

const Line = ({ children }: { children: React.ReactNode }) => (
  <span className="mask">
    <span className="line">{children}</span>
  </span>
)

export default function SolarSite() {
  const root = useRef<HTMLDivElement>(null)

  useSiteScroll(root, { lerp: 0.09 })

  const onReady = useCallback(() => {
    root.current?.classList.add('ready')
    gsap.to(intro, { s: 1, ry: 0, duration: reduced ? 0 : 2.2, ease: 'expo.out', delay: 0.25 })
    gsap.to('.hero .line', { yPercent: 0, duration: reduced ? 0 : 1.2, ease: 'expo.out', stagger: 0.07, delay: 0.4 })
    gsap.to('.nav', { y: 0, opacity: 1, duration: 1, delay: 0.9, ease: 'power3.out' })
  }, [])

  useLayoutEffect(() => {
    let watch: () => void = () => {}
    const ctx = gsap.context(() => {
      const el = root.current!
      const sec = (id: string) => el.querySelector<HTMLElement>(`#${id}`)!
      const vh = window.innerHeight
      const hero = sec('hero'), fl = sec('flavors'), story = sec('story'), cta = sec('cta'), page = sec('page')
      const top = (e: HTMLElement) => e.getBoundingClientRect().top + window.scrollY

      // One master timeline. 1 unit of timeline time == 1px of scroll, so every
      // tween is placed at the exact pixel offset of its section.
      const tl = gsap.timeline({
        defaults: { ease: 'power2.inOut', immediateRender: false },
        scrollTrigger: { trigger: page, start: 'top top', end: 'bottom bottom', scrub: 0.6 },
      })

      // HERO: can drifts from right of centre to dead centre and straightens up
      tl.fromTo(rig, { x: 0.34, y: 0, s: 1.05, rz: -0.18, ry: 0.6, rx: 0 },
        { x: 0, y: 0, s: 1.3, rz: 0, ry: 0, duration: hero.offsetHeight }, top(hero))

      // FLAVORS: sticky stage. Three full turns, label + palette swap once per turn.
      const fh = fl.offsetHeight - vh
      tl.fromTo(rig, { ry: 0 }, { ry: TURNS, ease: 'none', duration: fh }, top(fl))
      tl.fromTo(rig, { flavor: 0 }, { flavor: FLAVORS.length - 0.001, ease: 'none', duration: fh }, top(fl))
      const seg = fh / FLAVORS.length
      for (let i = 1; i < FLAVORS.length; i++) {
        tl.fromTo(
          el,
          { '--bg': FLAVORS[i - 1].bg, '--fg': FLAVORS[i - 1].fg },
          { '--bg': FLAVORS[i].bg, '--fg': FLAVORS[i].fg, ease: 'none', duration: seg * 0.24 },
          top(fl) + seg * i - seg * 0.12,
        )
      }

      // STORY: palette goes cream; can swings left -> centre -> right between the beats
      const [b1, stats, b2] = ['beat1', 'stats', 'beat2'].map(sec)
      const mid = (e: HTMLElement) => top(e) + e.offsetHeight / 2 - vh / 2
      const flEnd = top(fl) + fh
      tl.fromTo(el, { '--bg': FLAVORS[2].bg, '--fg': FLAVORS[2].fg },
        { '--bg': STORY_BG, '--fg': STORY_FG, ease: 'none', duration: vh * 0.6 }, top(story) - vh * 0.5)
      tl.fromTo(rig, { x: 0, s: 1.3, rz: 0, ry: TURNS },
        { x: -0.52, s: 1.15, rz: 0.16, ry: TURNS + 0.9, duration: mid(b1) - flEnd }, flEnd)
      tl.to(rig, { x: 0, s: 1.0, rz: 0, ry: TURNS + 2.4, duration: mid(stats) - mid(b1) }, mid(b1))
      tl.to(rig, { x: 0.52, s: 1.15, rz: -0.14, ry: TURNS + 3.6, duration: mid(b2) - mid(stats) }, mid(stats))

      // CTA: back to centre, upright, one last spin
      tl.fromTo(el, { '--bg': STORY_BG, '--fg': STORY_FG },
        { '--bg': CTA_BG, '--fg': CTA_FG, ease: 'none', duration: vh * 0.6 }, top(cta) - vh * 0.9)
      tl.to(rig, { x: 0, y: -0.5, s: 1.15, rz: 0, ry: TURNS + Math.PI * 2, duration: top(cta) + cta.offsetHeight - vh - mid(b2) }, mid(b2))

      // pad so timeline length == scrollable distance (1 time unit == 1px)
      tl.set({}, {}, page.offsetHeight - vh)

      // text swaps are driven by a data attribute on <html>
      let last = -1
      watch = () => {
        const i = Math.min(FLAVORS.length - 1, Math.max(0, Math.floor(rig.flavor)))
        if (i !== last) {
          last = i
          el.dataset.flavor = String(i)
        }
      }
      gsap.ticker.add(watch)

      // intro starts once the can has rendered its first frame (see onReady)
      gsap.set('.hero .line', { yPercent: 115 })
      gsap.set('.nav', { y: -30, opacity: 0 })

      // reveal-on-scroll lines
      gsap.utils.toArray<HTMLElement>('.rv').forEach((r) => {
        gsap.from(r.querySelectorAll('.line'), {
          yPercent: 115,
          duration: 1,
          ease: 'expo.out',
          stagger: 0.08,
          scrollTrigger: { trigger: r, start: 'top 85%', once: true },
        })
      })

      // count-up stats
      gsap.utils.toArray<HTMLElement>('[data-count]').forEach((n) => {
        const o = { v: 0 }
        gsap.to(o, {
          v: Number(n.dataset.count),
          duration: 1.6,
          ease: 'power3.out',
          scrollTrigger: { trigger: n, start: 'top 85%', once: true },
          onUpdate: () => (n.textContent = Math.round(o.v).toString()),
        })
      })
    }, root)

    const onLoad = () => ScrollTrigger.refresh()
    window.addEventListener('load', onLoad)
    return () => {
      window.removeEventListener('load', onLoad)
      gsap.ticker.remove(watch)
      ctx.revert()
    }
  }, [])

  return (
    <div ref={root} className="site-solar">
      <div className="bg" />
      <div className="loader" aria-hidden="true"><span>SOLAR</span></div>
      <Suspense fallback={null}>
        <Scene reduced={reduced} onReady={onReady} />
      </Suspense>

      <header className="nav">
        <a className="logo" href="#hero">SOLAR</a>
        <nav>
          <a href="#flavors">Flavors</a>
          <a href="#story">Story</a>
          <a className="btn" href="#cta">Get a case</a>
        </nav>
      </header>

      <main id="page">
        <section id="hero" className="hero">
          <div className="giant" aria-hidden="true">SOLAR</div>
          <div className="hero-copy">
            <h1>
              <Line>Sunlight,</Line>
              <Line>bottled.</Line>
            </h1>
            <p><Line>Zero-sugar sparkling soda made from real fruit.</Line></p>
          </div>
          <div className="hero-meta"><Line>355 ml · Aluminium · Infinitely recyclable</Line></div>
          <div className="scroll-cue"><span />Scroll</div>
        </section>

        <section id="flavors" className="flavors">
          <div className="sticky">
            <h2 className="sr-only">Three flavors: {FLAVORS.map((f) => f.name).join(', ')}</h2>
            <div className="giant giant-flavor" aria-hidden="true">
              {FLAVORS.map((f, i) => (
                <span key={f.name} className="gname" data-i={i}>{f.name}</span>
              ))}
            </div>
            <div className="fl-left">
              {FLAVORS.map((f, i) => (
                <div key={f.name} className="fl-copy" data-i={i}>
                  <span className="tag">{f.tag}</span>
                  <p>{f.blurb}</p>
                </div>
              ))}
            </div>
            <div className="fl-right">
              <div className="dots">
                {FLAVORS.map((f, i) => (
                  <span key={f.name} data-i={i}>0{i + 1}</span>
                ))}
              </div>
              <small>Keep scrolling. Three flavors, one spin each.</small>
            </div>
          </div>
        </section>

        <section id="story" className="story">
          <div id="beat1" className="beat beat-r">
            <h2 className="rv"><Line>No sugar.</Line><Line>All fruit.</Line></h2>
            <p className="rv"><Line>We press whole fruit the morning it is picked,</Line><Line>then carbonate it cold so the bubbles stay sharp.</Line></p>
          </div>
          <div id="stats" className="stats">
            <div><b data-count="0">0</b><span>g added sugar</span></div>
            <div><b data-count="100">0</b><span>% real fruit juice</span></div>
            <div><b data-count="12">0</b><span>hours field to can</span></div>
          </div>
          <div id="beat2" className="beat beat-l">
            <h2 className="rv"><Line>Cold, loud,</Line><Line>recyclable.</Line></h2>
            <p className="rv"><Line>Every can is infinitely recyclable aluminium.</Line><Line>Finish it, crush it, bring the sun back around.</Line></p>
          </div>
          <div className="marquee" aria-hidden="true">
            <div>
              {[0, 1].map((k) => (
                <span key={k}>
                  {[...WORDS, ...WORDS].map((w, i) => (
                    <span key={i} className="mw">{w}<Spark /></span>
                  ))}
                </span>
              ))}
            </div>
          </div>
        </section>

        <section id="cta" className="cta">
          <h2 className="rv"><Line>Taste the sun.</Line></h2>
          <a className="btn big" href="#hero">Order a 12-pack</a>
          <footer>Demo build · Three.js · GSAP ScrollTrigger · Lenis</footer>
        </section>
      </main>
    </div>
  )
}


// ===== src/patterns/sites/solar/Scene.tsx =====
import { Suspense, useEffect, useMemo, useRef, useState } from 'react'
import { Canvas, useFrame, useThree } from '@react-three/fiber'
import { Environment, Lightformer, RoundedBox, Sparkles } from '@react-three/drei'
import * as THREE from 'three'
import { FLAVORS } from './flavors'
import { makeLabel } from './label'
import { intro, pointer, rig } from './rig'

const R = 0.62
const BODY_H = 2.0
const HALF = BODY_H / 2

const v = (x: number, y: number) => new THREE.Vector2(x, y)

// Shoulder -> neck -> rim -> recessed lid, as a lathe profile.
const TOP_PROFILE = [
  v(R, HALF), v(R - 0.012, HALF + 0.05), v(R - 0.05, HALF + 0.11), v(R - 0.1, HALF + 0.16),
  v(R - 0.13, HALF + 0.19), v(R - 0.135, HALF + 0.215), v(R - 0.13, HALF + 0.235), v(R - 0.145, HALF + 0.255),
  v(R - 0.17, HALF + 0.25), v(R - 0.18, HALF + 0.2), v(R - 0.2, HALF + 0.185), v(0.001, HALF + 0.185),
]

const BOTTOM_PROFILE = [
  v(R, -HALF), v(R - 0.012, -HALF - 0.05), v(R - 0.05, -HALF - 0.1), v(R - 0.1, -HALF - 0.14),
  v(R - 0.14, -HALF - 0.15), v(R - 0.18, -HALF - 0.12), v(R - 0.22, -HALF - 0.05), v(R - 0.3, -HALF - 0.025),
  v(0.001, -HALF - 0.01),
]

function Can({ onReady }: { onReady: () => void }) {
  const group = useRef<THREE.Group>(null!)
  const matRef = useRef<THREE.MeshPhysicalMaterial>(null!)
  const gl = useThree((s) => s.gl)
  const [labels, setLabels] = useState<THREE.CanvasTexture[] | null>(null)
  const shown = useRef(-1)

  useEffect(() => {
    let alive = true
    const aniso = gl.capabilities.getMaxAnisotropy()
    Promise.all([
      document.fonts.load('100px Anton'),
      document.fonts.load('600 40px "Bricolage Grotesque Variable"'),
    ]).then(() => {
      if (!alive) return
      setLabels(FLAVORS.map((f) => makeLabel(f, aniso)))
      shown.current = 0
      // wait two frames so the first render (shader compile + texture upload) happens hidden
      requestAnimationFrame(() => requestAnimationFrame(onReady))
    })
    return () => {
      alive = false
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [gl])

  const metal = useMemo(
    () => new THREE.MeshPhysicalMaterial({ color: '#d9dde2', metalness: 1, roughness: 0.22, side: THREE.DoubleSide }),
    [],
  )
  const topGeo = useMemo(() => new THREE.LatheGeometry(TOP_PROFILE, 96), [])
  const botGeo = useMemo(() => new THREE.LatheGeometry(BOTTOM_PROFILE, 96), [])

  const cur = useRef({ x: rig.x, y: rig.y, s: rig.s, rx: 0, ry: 0, rz: rig.rz })

  useFrame((state, dt) => {
    const g = group.current
    if (!g) return
    const { viewport, clock } = state
    const k = 9
    const c = cur.current
    const narrow = viewport.width / viewport.height < 0.9

    c.x = THREE.MathUtils.damp(c.x, narrow ? 0 : rig.x, k, dt)
    c.y = THREE.MathUtils.damp(c.y, rig.y + (narrow ? 0.12 : 0), k, dt)
    c.s = THREE.MathUtils.damp(c.s, rig.s, k, dt)
    c.rx = THREE.MathUtils.damp(c.rx, rig.rx + pointer.y * 0.18, 5, dt)
    c.ry = THREE.MathUtils.damp(c.ry, rig.ry + pointer.x * 0.35, 5, dt)
    c.rz = THREE.MathUtils.damp(c.rz, rig.rz, k, dt)

    const unit = Math.min(viewport.height / 5.0, viewport.width / 2.3)
    const t = clock.elapsedTime
    g.position.set((c.x * viewport.width) / 2, c.y + Math.sin(t * 1.2) * 0.04, 0)
    g.scale.setScalar(c.s * unit * intro.s)
    g.rotation.set(c.rx, c.ry + intro.ry, c.rz + Math.sin(t * 0.9) * 0.015)

    const idx = Math.min(FLAVORS.length - 1, Math.max(0, Math.floor(rig.flavor)))
    if (labels && matRef.current && idx !== shown.current) {
      shown.current = idx
      matRef.current.map = labels[idx]
      matRef.current.needsUpdate = true
    }
  })

  if (!labels) return null

  return (
    <group ref={group}>
      {/* printed body */}
      <mesh>
        <cylinderGeometry args={[R, R, BODY_H, 128, 1, true]} />
        <meshPhysicalMaterial
          ref={matRef}
          map={labels[0]}
          color="#ffffff"
          metalness={0.55}
          roughness={0.3}
          clearcoat={0.8}
          clearcoatRoughness={0.18}
          envMapIntensity={1.1}
        />
      </mesh>
      <mesh geometry={topGeo} material={metal} />
      <mesh geometry={botGeo} material={metal} />
      {/* pull tab */}
      <group position={[0.02, HALF + 0.19, 0.0]}>
        <RoundedBox args={[0.34, 0.012, 0.17]} radius={0.006} position={[0.04, 0.01, 0.08]} material={metal} />
        <mesh position={[-0.06, 0.004, -0.09]} rotation={[-Math.PI / 2, 0, 0]}>
          <circleGeometry args={[0.1, 32]} />
          <meshStandardMaterial color="#14161a" metalness={0.8} roughness={0.5} />
        </mesh>
      </group>
    </group>
  )
}

function Rig() {
  useEffect(() => {
    const move = (e: PointerEvent) => {
      pointer.x = (e.clientX / window.innerWidth) * 2 - 1
      pointer.y = (e.clientY / window.innerHeight) * 2 - 1
    }
    window.addEventListener('pointermove', move)
    return () => window.removeEventListener('pointermove', move)
  }, [])
  return null
}

export default function Scene({ reduced, onReady }: { reduced: boolean; onReady: () => void }) {
  return (
    <div className="stage" aria-hidden="true">
      <Canvas
        dpr={[1, 2]}
        camera={{ position: [0, 0, 10], fov: 30 }}
        gl={{ alpha: true, antialias: true, powerPreference: 'high-performance' }}
        onCreated={({ gl }) => {
          gl.toneMapping = THREE.ACESFilmicToneMapping
          gl.toneMappingExposure = 1.05
        }}
      >
        <Suspense fallback={null}>
          <Environment resolution={512} frames={1}>
            <color attach="background" args={['#15110e']} />
            <Lightformer form="rect" intensity={6} position={[0, 5, 3]} scale={[10, 2.5, 1]} rotation-x={Math.PI / 2.4} />
            <Lightformer form="rect" intensity={3.5} position={[-5, 0.5, 2]} scale={[1.2, 8, 1]} rotation-y={Math.PI / 2.4} />
            <Lightformer form="rect" intensity={3.5} position={[5, 0.5, 2]} scale={[1.2, 8, 1]} rotation-y={-Math.PI / 2.4} />
            <Lightformer form="ring" intensity={2.2} position={[0, 0, -6]} scale={9} color="#ffd9b0" />
            <Lightformer form="rect" intensity={1.5} position={[0, -5, 2]} scale={[8, 1.5, 1]} rotation-x={-Math.PI / 2.4} />
          </Environment>
          <Can onReady={onReady} />
          {!reduced && (
            <Sparkles count={70} scale={[9, 6, 3]} size={4} speed={0.35} opacity={0.55} color="#ffffff" position={[0, 0, -1]} />
          )}
        </Suspense>
        <Rig />
      </Canvas>
    </div>
  )
}


// ===== src/patterns/sites/solar/label.ts =====
import * as THREE from 'three'
import type { Flavor } from './flavors'

const W = 2048
const H = 1050

function drawCitrus(ctx: CanvasRenderingContext2D, cx: number, cy: number, r: number, rind: string, flesh: string) {
  ctx.save()
  ctx.translate(cx, cy)
  ctx.fillStyle = rind
  ctx.beginPath()
  ctx.arc(0, 0, r, 0, Math.PI * 2)
  ctx.fill()
  ctx.fillStyle = flesh
  ctx.beginPath()
  ctx.arc(0, 0, r * 0.88, 0, Math.PI * 2)
  ctx.fill()
  ctx.fillStyle = rind
  for (let i = 0; i < 8; i++) {
    ctx.save()
    ctx.rotate((i * Math.PI) / 4)
    ctx.fillRect(-r * 0.018, 0, r * 0.036, r * 0.86)
    ctx.restore()
  }
  ctx.beginPath()
  ctx.arc(0, 0, r * 0.1, 0, Math.PI * 2)
  ctx.fill()
  ctx.restore()
}

export function makeLabel(f: Flavor, maxAniso: number): THREE.CanvasTexture {
  const c = document.createElement('canvas')
  c.width = W
  c.height = H
  const ctx = c.getContext('2d')!

  // base
  ctx.fillStyle = f.can
  ctx.fillRect(0, 0, W, H)

  // sunburst rays emanating from the front-centre
  ctx.save()
  ctx.translate(W / 2, H * 0.5)
  ctx.globalAlpha = 0.14
  ctx.fillStyle = f.accent
  for (let i = 0; i < 28; i++) {
    ctx.rotate((Math.PI * 2) / 28)
    ctx.beginPath()
    ctx.moveTo(0, 0)
    ctx.lineTo(1500, -60)
    ctx.lineTo(1500, 60)
    ctx.fill()
  }
  ctx.restore()

  // wavy bands top + bottom
  const wave = (y: number, amp: number, color: string, thick: number) => {
    ctx.fillStyle = color
    ctx.beginPath()
    ctx.moveTo(0, y)
    for (let x = 0; x <= W; x += 16) ctx.lineTo(x, y + Math.sin((x / W) * Math.PI * 8) * amp)
    for (let x = W; x >= 0; x -= 16) ctx.lineTo(x, y + thick + Math.sin((x / W) * Math.PI * 8) * amp)
    ctx.fill()
  }
  wave(H * 0.08, 18, f.accent, 46)
  wave(H * 0.08 + 70, 18, f.ink, 14)
  wave(H * 0.86, 18, f.ink, 14)
  wave(H * 0.86 + 34, 18, f.accent, 46)

  // front + back brand blocks (front centred at u=0.5, back split over the seam)
  const brand = (cx: number, big: boolean) => {
    ctx.save()
    ctx.translate(cx, 0)
    ctx.textAlign = 'center'
    ctx.fillStyle = f.ink
    ctx.font = `${big ? 330 : 250}px Anton, Impact, sans-serif`
    ctx.fillText('SOLAR', 0, H * (big ? 0.5 : 0.46))
    ctx.fillStyle = f.accent
    ctx.font = `${big ? 66 : 56}px "Bricolage Grotesque Variable", Arial, sans-serif`
    ctx.fillText(f.name.toUpperCase(), 0, H * (big ? 0.6 : 0.56))
    ctx.fillStyle = f.ink
    ctx.font = `600 ${big ? 30 : 28}px "Bricolage Grotesque Variable", Arial, sans-serif`
    ctx.fillText(big ? 'SPARKLING · ZERO SUGAR · 355 ML' : 'REAL FRUIT  ·  NO ADDED SUGAR', 0, H * (big ? 0.67 : 0.62))
    ctx.restore()
  }
  brand(W / 2, true)
  brand(0, false)
  brand(W, false)

  // citrus slices flanking the front brand
  drawCitrus(ctx, W / 2 - 520, H * 0.45, 130, f.accent, f.can)
  drawCitrus(ctx, W / 2 + 520, H * 0.45, 130, f.accent, f.can)

  // bubbles
  ctx.fillStyle = 'rgba(255,255,255,0.22)'
  let seed = 7
  const rnd = () => ((seed = (seed * 16807) % 2147483647) / 2147483647)
  for (let i = 0; i < 90; i++) {
    ctx.beginPath()
    ctx.arc(rnd() * W, H * (0.2 + rnd() * 0.6), 4 + rnd() * 16, 0, Math.PI * 2)
    ctx.fill()
  }

  const tex = new THREE.CanvasTexture(c)
  tex.colorSpace = THREE.SRGBColorSpace
  tex.wrapS = THREE.RepeatWrapping
  tex.offset.x = 0.5 // cylinder seam sits at the back, brand faces camera
  tex.anisotropy = maxAniso
  tex.needsUpdate = true
  return tex
}


// ===== src/patterns/sites/solar/rig.ts =====
// Mutable animation state. GSAP scrubs these from scroll, the R3F loop reads them
// every frame, so React never re-renders while scrolling.
export const rig = {
  x: 0.34, // fraction of half viewport width
  y: 0,
  s: 1.05,
  rx: 0,
  ry: 0.6,
  rz: -0.18,
  flavor: 0,
}

// Intro animation layered on top of the scroll rig.
export const intro = { s: 0, ry: -5 }

export const pointer = { x: 0, y: 0 }


// ===== src/patterns/sites/solar/flavors.ts =====
export type Flavor = {
  name: string
  tag: string
  blurb: string
  bg: string
  fg: string
  can: string
  accent: string
  ink: string
}

export const FLAVORS: Flavor[] = [
  {
    name: 'Blood Orange',
    tag: 'Nº 01 — Bright',
    blurb: 'Sicilian blood orange, a squeeze of yuzu peel, and bubbles that hit like a sunrise.',
    bg: '#ff5a1f',
    fg: '#1b0802',
    can: '#ff6a2b',
    accent: '#ffd23f',
    ink: '#1b0802',
  },
  {
    name: 'Lime Volt',
    tag: 'Nº 02 — Electric',
    blurb: 'Persian lime and green mandarin. Sharp, cold, and loud enough to wake a Monday.',
    bg: '#c6f432',
    fg: '#0e1a00',
    can: '#1d6b3a',
    accent: '#d8ff4f',
    ink: '#f2ffd0',
  },
  {
    name: 'Midnight Berry',
    tag: 'Nº 03 — Deep',
    blurb: 'Blackcurrant, blueberry and a thread of vanilla. The one you save for after dark.',
    bg: '#5b2bff',
    fg: '#ffffff',
    can: '#2a1070',
    accent: '#ff7ad9',
    ink: '#ffffff',
  },
]

export const STORY_BG = '#fff1dc'
export const STORY_FG = '#1b0802'
export const CTA_BG = '#0f0805'
export const CTA_FG = '#fff1dc'


// ===== src/patterns/sites/solar/styles.css =====
.site-solar { position: relative; min-height: 100svh; overflow-x: clip; }
.site-solar {
  --bg: #ff5a1f;
  --fg: #1b0802;
  --display: 'Anton', Impact, sans-serif;
  --body: 'Bricolage Grotesque Variable', system-ui, sans-serif;
}
.site-solar * { box-sizing: border-box; margin: 0; padding: 0; }
.site-solar { background: var(--bg); }
.site-solar { font-family: var(--body); color: var(--fg); overflow-x: clip; -webkit-font-smoothing: antialiased; }
.site-solar a { color: inherit; text-decoration: none; }
.site-solar::selection, .site-solar ::selection { background: var(--fg); color: var(--bg); }
.site-solar :focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; border-radius: 4px; }
.site-solar .btn:focus-visible { outline-color: var(--bg); box-shadow: 0 0 0 3px var(--fg); }
.site-solar .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.site-solar { scrollbar-color: var(--fg) transparent; scrollbar-width: thin; }
.site-solar .bg { position: fixed; inset: 0; background: var(--bg); z-index: 0; }
.site-solar .stage { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.site-solar .stage canvas { display: block; }
.site-solar #page { position: relative; z-index: 1; }
.site-solar .mask { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.site-solar .line { display: block; }
.site-solar .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 22px clamp(20px, 4vw, 56px); }
.site-solar .logo { font-family: var(--display); font-size: 28px; letter-spacing: 0.04em; }
.site-solar .nav nav { display: flex; gap: 28px; align-items: center; font-weight: 600; font-size: 15px; }
.site-solar .btn { background: var(--fg); color: var(--bg); min-height: 44px; display: inline-flex; align-items: center; padding: 0 22px; border-radius: 999px; font-weight: 700; transition: transform 0.25s; }
.site-solar .btn:hover { transform: scale(1.06); }
.site-solar .btn.big { font-size: 20px; padding: 18px 36px; }
.site-solar .giant { position: absolute; font-family: var(--display); line-height: 0.82; white-space: nowrap; z-index: 1; pointer-events: none; text-transform: uppercase; }
.site-solar .hero { height: 100svh; position: relative; }
.site-solar .hero .giant { left: 50%; top: 50%; transform: translate(-50%, -52%); font-size: clamp(180px, 34vw, 640px); opacity: 0.16; letter-spacing: 0.01em; }
.site-solar .hero-copy { position: absolute; left: clamp(20px, 4vw, 56px); bottom: 12vh; z-index: 3; max-width: 34ch; }
.site-solar .hero-copy h1 { font-family: var(--display); font-weight: 400; font-size: clamp(56px, 8vw, 128px); line-height: 0.92; text-transform: uppercase; }
.site-solar .hero-copy p { margin-top: 18px; font-size: clamp(16px, 1.4vw, 22px); font-weight: 500; max-width: 26ch; }
.site-solar .hero-meta { position: absolute; right: clamp(20px, 4vw, 56px); bottom: 12vh; font-size: 14px; font-weight: 600; text-align: right; letter-spacing: 0.04em; text-transform: uppercase; max-width: 22ch; z-index: 3; }
.site-solar .scroll-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 10px; font-weight: 700; z-index: 3; }
.site-solar .scroll-cue span { width: 1px; height: 38px; background: var(--fg); transform-origin: top; animation: solar-cue 1.8s ease-in-out infinite; }
@keyframes solar-cue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.site-solar .flavors { height: 500vh; position: relative; }
.site-solar .sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.site-solar .giant-flavor { inset: 0; display: grid; place-items: center; font-size: clamp(120px, 24vw, 460px); }
.site-solar .gname { grid-area: 1 / 1; opacity: 0; transform: translateY(40px) scale(0.96); transition: opacity 0.5s, transform 0.7s cubic-bezier(0.2, 0.9, 0.2, 1); text-align: center; line-height: 0.85; }
.site-solar[data-flavor='0'] .gname[data-i='0'], .site-solar[data-flavor='1'] .gname[data-i='1'], .site-solar[data-flavor='2'] .gname[data-i='2'] { opacity: 0.16; transform: none; }
.site-solar .fl-left { position: absolute; left: clamp(20px, 4vw, 56px); top: 50%; transform: translateY(-50%); width: min(28ch, 30vw); z-index: 3; display: grid; }
.site-solar .fl-copy { grid-area: 1 / 1; opacity: 0; transform: translateY(24px); transition: opacity 0.45s, transform 0.6s cubic-bezier(0.2, 0.9, 0.2, 1); }
.site-solar[data-flavor='0'] .fl-copy[data-i='0'], .site-solar[data-flavor='1'] .fl-copy[data-i='1'], .site-solar[data-flavor='2'] .fl-copy[data-i='2'] { opacity: 1; transform: none; }
.site-solar .tag { display: inline-block; font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; border: 1.5px solid currentColor; padding: 6px 12px; border-radius: 999px; margin-bottom: 18px; }
.site-solar .fl-copy p { font-size: clamp(18px, 1.7vw, 28px); line-height: 1.25; font-weight: 500; }
.site-solar .fl-right { position: absolute; right: clamp(20px, 4vw, 56px); top: 50%; transform: translateY(-50%); z-index: 3; text-align: right; display: flex; flex-direction: column; gap: 18px; align-items: flex-end; }
.site-solar .dots { display: flex; flex-direction: column; gap: 10px; font-family: var(--display); font-size: clamp(34px, 4vw, 64px); line-height: 1; }
.site-solar .dots span { opacity: 0.25; transition: opacity 0.3s, transform 0.4s; transform-origin: right center; }
.site-solar[data-flavor='0'] .dots span[data-i='0'], .site-solar[data-flavor='1'] .dots span[data-i='1'], .site-solar[data-flavor='2'] .dots span[data-i='2'] { opacity: 1; transform: scale(1.18); }
.site-solar .fl-right small { font-size: 12px; font-weight: 600; opacity: 0.7; max-width: 18ch; line-height: 1.35; }
.site-solar .story { position: relative; }
.site-solar .beat { min-height: 120vh; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(20px, 4vw, 56px); }
.site-solar .beat-r { align-items: flex-end; text-align: right; }
.site-solar .beat-l { align-items: flex-start; }
.site-solar .beat h2, .site-solar .cta h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(64px, 10vw, 170px); line-height: 0.9; }
.site-solar .beat p { margin-top: 24px; font-size: clamp(16px, 1.5vw, 22px); font-weight: 500; line-height: 1.35; max-width: 44ch; }
.site-solar .beat-r p { max-width: 36ch; }
.site-solar .stats { display: flex; flex-direction: column; padding: 0 clamp(20px, 4vw, 56px); }
.site-solar .stats div { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; width: 34vw; }
.site-solar .stats div:nth-child(even) { align-self: flex-end; text-align: right; }
.site-solar .stats b { font-family: var(--display); font-weight: 400; font-size: clamp(72px, 11vw, 190px); line-height: 0.95; display: block; }
.site-solar .stats span { font-weight: 600; font-size: clamp(14px, 1.3vw, 20px); text-transform: uppercase; letter-spacing: 0.06em; }
.site-solar .marquee { overflow: hidden; border-block: 2px solid currentColor; padding: 18px 0; margin-top: 12vh; position: relative; z-index: 3; }
.site-solar .marquee div { display: flex; width: max-content; animation: solar-marq 28s linear infinite; }
.site-solar .marquee > div > span { display: flex; flex-shrink: 0; }
.site-solar .mw { display: inline-flex; align-items: center; gap: 0.5em; padding-right: 0.5em; font-family: var(--display); font-size: clamp(36px, 5vw, 80px); white-space: nowrap; letter-spacing: 0.02em; }
.site-solar .spark { width: 0.55em; height: 0.55em; fill: currentColor; }
@keyframes solar-marq { to { transform: translateX(-50%); } }
.site-solar .cta { height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 0; padding: 15vh 20px 0; position: relative; }
.site-solar .cta h2 { font-size: clamp(64px, 11vw, 200px); line-height: 0.88; }
.site-solar .cta .btn { position: absolute; bottom: 12vh; z-index: 3; }
.site-solar .cta footer { position: absolute; bottom: 4vh; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; font-weight: 600; }
@media (max-width: 800px) {
.site-solar .nav nav a:not(.btn) { display: none; }
.site-solar .hero-copy { bottom: 9vh; }
.site-solar .hero-meta { display: none; }
.site-solar .fl-left { top: auto; bottom: 8vh; transform: none; width: calc(100% - 40px); }
.site-solar .fl-right { top: 90px; transform: none; }
.site-solar .stats div { width: 60vw; }
.site-solar .beat-r { align-items: flex-start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
.site-solar .marquee div, .site-solar .scroll-cue span { animation: none; }
.site-solar .gname, .site-solar .fl-copy { transition: none; }
}
.site-solar .loader { position: fixed; inset: 0; z-index: 50; background: #ff5a1f; display: grid; place-items: center; font-family: var(--display); font-size: clamp(60px, 14vw, 220px); color: #1b0802; transition: opacity 0.6s ease 0.1s, visibility 0s linear 0.7s; }
.site-solar .loader span { animation: solar-pulse 1.1s ease-in-out infinite alternate; }
@keyframes solar-pulse { from { opacity: 0.35; } to { opacity: 1; } }
.site-solar.ready .loader { opacity: 0; visibility: hidden; pointer-events: none; }
```


## Helper it imports: `src/patterns/sites/_shared.ts`

```ts
import { useEffect, type RefObject } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import Lenis from 'lenis'

/* Helpers shared by the whole-site demos in this folder. They are full pages, so they scroll the window,
   and they must coexist with UI Lab's own hash router and clean up completely when you leave. */

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/**
 * Smooth scroll (Lenis, driven by GSAP's ticker so ScrollTrigger stays in sync) plus in-page anchor links.
 * Anchor clicks are handled here instead of by the browser: UI Lab's router lives in the URL hash,
 * so a real `#section` navigation would be read as a route change.
 * Everything is torn down on unmount.
 */
export function useSiteScroll(root: RefObject<HTMLElement | null>, { smooth = true, lerp = 0.1 } = {}) {
  useEffect(() => {
    const el = root.current
    if (!el) return
    let lenis: Lenis | null = null
    let tick: ((t: number) => void) | null = null
    if (smooth && !reducedMotion()) {
      lenis = new Lenis({ lerp })
      lenis.on('scroll', ScrollTrigger.update)
      tick = (t: number) => lenis!.raf(t * 1000)
      gsap.ticker.add(tick)
      gsap.ticker.lagSmoothing(0)
    }
    const onClick = (e: MouseEvent) => {
      const a = (e.target as HTMLElement).closest<HTMLAnchorElement>('a[href^="#"]')
      if (!a || !el.contains(a)) return
      const id = a.getAttribute('href')!.slice(1)
      if (id.startsWith('/')) return // a UI Lab route, let it through
      e.preventDefault()
      const target = id ? el.querySelector<HTMLElement>(`#${CSS.escape(id)}`) : null
      if (!target) return
      if (lenis) lenis.scrollTo(target)
      else target.scrollIntoView({ behavior: 'smooth' })
    }
    el.addEventListener('click', onClick)
    return () => {
      el.removeEventListener('click', onClick)
      if (tick) gsap.ticker.remove(tick)
      gsap.ticker.lagSmoothing(500, 33) // GSAP's default
      lenis?.destroy()
      ScrollTrigger.getAll().forEach((t) => t.kill())
    }
  }, [root, smooth, lerp])
}
```

# Site: MARE (editorial luxury)
> A slow-travel quarterly. A framed photograph opens to full bleed, a pinned horizontal photo essay slides sideways, and the contents list previews images at the cursor.
- **Category:** Sites
- **Slug:** site-mare
- **Tags:** site, full page, editorial, serif, luxury, horizontal scroll, pin, clip-path, parallax, gsap, lenis, cursor preview
- **Dependencies:** gsap, lenis, @fontsource/instrument-serif, @fontsource-variable/geist, sites/_shared.ts, public/img/*.webp
- **Live demo:** https://ui-lab-weld.vercel.app/#/site-mare
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sites/mare/index.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sites/mare/index.tsx
- **Raw files:** https://ui-lab-weld.vercel.app/raw/sites/mare/index.tsx, https://ui-lab-weld.vercel.app/raw/sites/mare/styles.css

## When to use
- Fashion, hospitality, architecture, anything premium and image-led
- Reference for clip-path reveals, pinned horizontal scroll and cursor-following previews

## Accessibility

Reduced motion drops the pin and stacks the essay vertically. Index rows are real links with focus-triggered previews; footer form has a visible label.


## Source
Files: `src/patterns/sites/mare/index.tsx`, `src/patterns/sites/mare/styles.css`
```tsx
// ===== src/patterns/sites/mare/index.tsx =====
import { useEffect, useLayoutEffect, useRef, useState } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import '@fontsource/instrument-serif'
import '@fontsource/instrument-serif/400-italic.css'
import '@fontsource-variable/geist'
import './styles.css'
import { reducedMotion, useSiteScroll } from '../_shared'

gsap.registerPlugin(ScrollTrigger)

const reduced = reducedMotion()

const STATEMENT =
  'For one season we followed the shoreline by ferry, on foot and by the last bus, sleeping wherever the final boat of the day left us. This issue is what the tide kept.'

const CHAPTERS = [
  { img: 6, title: 'The Last Ferry', fig: 'Fig. 01', cap: 'Moored boat, harbour wall, 06:10', w: 'tall' },
  { img: 2, title: 'Salt & Stone', fig: 'Fig. 02', cap: 'A gull keeping watch over the quay', w: 'wide' },
  { img: 15, title: 'Houses That Lean', fig: 'Fig. 03', cap: 'Alley to the water, mid-morning', w: 'tall' },
  { img: 22, title: 'What the Tide Kept', fig: 'Fig. 04', cap: 'Under the pier at low water', w: 'wide' },
  { img: 19, title: 'A Pier at Dusk', fig: 'Fig. 05', cap: 'The last light, the last bird', w: 'tall' },
]

const INDEX = [
  { n: '01', t: 'The Last Ferry', place: 'Harbour towns', p: 12, img: 6 },
  { n: '02', t: 'Salt & Stone', place: 'The quay walls', p: 28, img: 2 },
  { n: '03', t: 'Houses That Lean', place: 'Old town', p: 44, img: 15 },
  { n: '04', t: 'What the Tide Kept', place: 'Under the pier', p: 60, img: 22 },
  { n: '05', t: 'A Pier at Dusk', place: 'West shore', p: 76, img: 19 },
  { n: '06', t: 'Slow Is a Direction', place: 'Afterword', p: 92, img: 20 },
]

export default function MareSite() {
  const root = useRef<HTMLDivElement>(null)
  const [peek, setPeek] = useState<{ img: number; on: boolean }>({ img: 6, on: false })
  const peekRef = useRef<HTMLDivElement>(null)

  useSiteScroll(root)

  useLayoutEffect(() => {
    const ctx = gsap.context(() => {
      const mm = gsap.matchMedia()

      // HERO: the framed photograph opens to full bleed as you scroll; the headline lifts away.
      gsap.set('.hero-frame', { clipPath: 'inset(24% 33% 12% 33%)' })
      gsap.set('.hero-img', { scale: 1.25 })
      const hero = gsap.timeline({
        defaults: { ease: 'none' },
        scrollTrigger: { trigger: '.hero', start: 'top top', end: 'bottom bottom', scrub: 0.5 },
      })
      hero
        .to('.hero-frame', { clipPath: 'inset(0% 0% 0% 0%)', duration: 1 }, 0)
        .to('.hero-img', { scale: 1, duration: 1 }, 0)
        .to('.hero-title', { yPercent: -60, opacity: 0, duration: 0.55 }, 0.1)
        .fromTo('.hero-end', { opacity: 0, y: 40 }, { opacity: 1, y: 0, duration: 0.3, ease: 'power2.out' }, 0.7)

      // intro lines
      gsap.from('.hero-title .line', { yPercent: 110, duration: 1.4, ease: 'expo.out', stagger: 0.12, delay: 0.1 })
      gsap.from('.nav', { opacity: 0, y: -12, duration: 1, delay: 0.7 })

      // STATEMENT: words ink in as you read
      gsap.fromTo('.w', { opacity: 0.16 }, {
        opacity: 1,
        ease: 'none',
        stagger: 0.12,
        scrollTrigger: { trigger: '.statement', start: 'top 72%', end: 'bottom 58%', scrub: true },
      })

      // CHAPTERS: horizontal pinned gallery (desktop and phones alike); inner photographs drift against the track
      mm.add('(prefers-reduced-motion: no-preference)', () => {
        const track = document.querySelector<HTMLElement>('.track')!
        const dist = () => track.scrollWidth - window.innerWidth
        const slide = gsap.to(track, {
          x: () => -dist(),
          ease: 'none',
          scrollTrigger: { trigger: '.chapters', pin: true, scrub: 0.6, start: 'top top', end: () => '+=' + dist(), invalidateOnRefresh: true },
        })
        gsap.utils.toArray<HTMLElement>('.panel').forEach((p) => {
          gsap.fromTo(p.querySelector('img'), { xPercent: -9 }, {
            xPercent: 9,
            ease: 'none',
            scrollTrigger: { trigger: p, containerAnimation: slide, start: 'left right', end: 'right left', scrub: true },
          })
        })
        gsap.to('.progress i', {
          scaleX: 1,
          ease: 'none',
          scrollTrigger: { trigger: '.chapters', start: 'top top', end: () => '+=' + dist(), scrub: true, invalidateOnRefresh: true },
        })
      })

      // INDEX rows slide in
      gsap.utils.toArray<HTMLElement>('.row').forEach((r) =>
        gsap.from(r, { yPercent: 40, opacity: 0, duration: 0.9, ease: 'expo.out', scrollTrigger: { trigger: r, start: 'top 92%', once: true } }),
      )
      gsap.from('.big-mare span', { yPercent: 105, duration: 1.4, ease: 'expo.out', stagger: 0.06, scrollTrigger: { trigger: '.foot', start: 'top 70%', once: true } })
    }, root)

    const refresh = () => ScrollTrigger.refresh()
    addEventListener('load', refresh)
    return () => {
      removeEventListener('load', refresh)
      ctx.revert()
    }
  }, [])

  // cursor-following preview for the index
  useEffect(() => {
    const el = peekRef.current
    if (!el || reduced) return
    const x = gsap.quickTo(el, 'x', { duration: 0.5, ease: 'power3' })
    const y = gsap.quickTo(el, 'y', { duration: 0.5, ease: 'power3' })
    const move = (e: PointerEvent) => {
      x(e.clientX + 24)
      y(e.clientY - 120)
    }
    addEventListener('pointermove', move)
    return () => removeEventListener('pointermove', move)
  }, [])

  return (
    <div ref={root} className="site-mare">
      <header className="nav">
        <a href="#top" className="logo">Mare</a>
        <span className="issue">Issue 07 · The Slow Coast</span>
        <a href="#end" className="sub">Subscribe</a>
      </header>

      <main id="top">
        <section className="hero">
          <div className="hero-pin">
            <h1 className="hero-title">
              <span className="mask"><span className="line">The slow</span></span>
              <span className="mask"><span className="line"><em>coast</em></span></span>
            </h1>
            <div className="hero-frame">
              <img className="hero-img" src="/img/4.webp" alt="Rocky shoreline at sunset, a lighthouse on the far point" />
              <div className="grain" />
            </div>
            <p className="hero-end">Seven harbours.<br />One coastline.<br /><em>No timetable.</em></p>
          </div>
        </section>

        <section className="statement">
          <p>
            <span style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', clip: 'rect(0 0 0 0)', whiteSpace: 'nowrap' }}>{STATEMENT}</span>
            {STATEMENT.split(' ').map((w, i) => (
              <span key={i} className="w" aria-hidden="true">{w}{' '}</span>
            ))}
          </p>
        </section>

        <section className="chapters" aria-label="Photo essay">
          <div className="track">
            <div className="lead">
              <h2>Five<br />frames,<br /><em>slowly.</em></h2>
              <p>Scroll sideways through the essay. Every picture was taken between the first and last boat.</p>
            </div>
            {CHAPTERS.map((c) => (
              <figure key={c.fig} className={`panel ${c.w}`}>
                <div className="ph">
                  <img src={`/img/${c.img}.webp`} alt={c.cap} loading="lazy" />
                </div>
                <figcaption>
                  <span className="fig">{c.fig}</span>
                  <b>{c.title}</b>
                  <span>{c.cap}</span>
                </figcaption>
              </figure>
            ))}
            <div className="lead end"><h2><em>Slow</em> is a<br />direction.</h2></div>
          </div>
          <div className="progress" aria-hidden="true"><i /></div>
        </section>

        <section className="index" aria-label="In this issue">
          <h2>In this issue</h2>
          <ol onPointerLeave={() => setPeek((p) => ({ ...p, on: false }))}>
            {INDEX.map((r) => (
              <li key={r.n}>
                <a
                  href="#end"
                  className="row"
                  onPointerEnter={() => setPeek({ img: r.img, on: true })}
                  onFocus={() => setPeek({ img: r.img, on: true })}
                  onBlur={() => setPeek((p) => ({ ...p, on: false }))}
                >
                  <span className="n">{r.n}</span>
                  <span className="t">{r.t}</span>
                  <span className="pl">{r.place}</span>
                  <span className="pg">p. {r.p}</span>
                </a>
              </li>
            ))}
          </ol>
        </section>

        <footer className="foot" id="end">
          <div className="sign">
            <p>Four issues a year, printed on uncoated paper, posted flat.</p>
            <form onSubmit={(e) => e.preventDefault()}>
              <label htmlFor="em">Email address</label>
              <div>
                <input id="em" type="email" placeholder="you@somewhere.com" />
                <button type="submit">Subscribe</button>
              </div>
              <small>Demo form. Nothing is sent.</small>
            </form>
          </div>
          <div className="big-mare" aria-hidden="true">
            {'MARE'.split('').map((c, i) => <span key={i}>{c}</span>)}
          </div>
        </footer>
      </main>

      <div ref={peekRef} className={`peek ${peek.on ? 'on' : ''}`} aria-hidden="true">
        <img src={`/img/${peek.img}.webp`} alt="" />
      </div>
    </div>
  )
}


// ===== src/patterns/sites/mare/styles.css =====
.site-mare { position: relative; min-height: 100svh; overflow-x: clip; }
.site-mare {
  --paper: #f3efe6;
  --ink: #15110e;
  --muted: #6d645b;
  --clay: #b4532a;
  --rule: rgba(21, 17, 14, 0.18);
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Geist Variable', system-ui, sans-serif;
}
.site-mare * { box-sizing: border-box; margin: 0; padding: 0; }
.site-mare { background: var(--paper); }
.site-mare { font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: clip; }
.site-mare a { color: inherit; text-decoration: none; }
.site-mare em { font-style: italic; }
.site-mare::selection, .site-mare ::selection { background: var(--clay); color: var(--paper); }
.site-mare :focus-visible { outline: 2px solid var(--clay); outline-offset: 4px; }
.site-mare img { display: block; max-width: none; }
.site-mare .mask { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.site-mare .line { display: block; }
.site-mare .nav { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; justify-content: space-between; align-items: baseline; padding: 22px clamp(20px, 4vw, 56px); mix-blend-mode: difference; color: #f3efe6; }
.site-mare .logo { font-family: var(--serif); font-size: 30px; letter-spacing: 0.02em; }
.site-mare .issue { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.site-mare .sub { font-size: 13px; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.site-mare .hero { height: 260svh; position: relative; }
.site-mare .hero-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.site-mare .hero-title { position: absolute; z-index: 3; left: 0; right: 0; top: 11svh; text-align: center; font-family: var(--serif); font-weight: 400; font-size: clamp(88px, 17vw, 300px); line-height: 0.82; letter-spacing: -0.02em; }
.site-mare .hero-title em { color: var(--clay); }
.site-mare .hero-frame { position: absolute; inset: 0; z-index: 2; overflow: hidden; will-change: clip-path; }
.site-mare .hero-img { width: 100%; height: 100%; object-fit: cover; }
.site-mare .grain { position: absolute; inset: 0; opacity: 0.2; mix-blend-mode: multiply; pointer-events: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.site-mare .hero-end { position: absolute; z-index: 4; left: clamp(20px, 4vw, 56px); bottom: 9svh; color: #f7f2e8; font-family: var(--serif); font-size: clamp(36px, 5.4vw, 88px); line-height: 0.98; text-shadow: 0 1px 24px rgba(0, 0, 0, 0.25); }
.site-mare .statement { padding: 26svh clamp(20px, 6vw, 120px) 22svh; }
.site-mare .statement p { font-family: var(--serif); font-size: clamp(34px, 5vw, 80px); line-height: 1.08; max-width: min(100%, 15em); letter-spacing: -0.01em; }
.site-mare .chapters { height: 100svh; position: relative; overflow: hidden; border-top: 1px solid var(--rule); }
.site-mare .track { display: flex; align-items: center; height: 100%; width: max-content; padding: 0 8vw 0 clamp(20px, 6vw, 120px); gap: clamp(40px, 7vw, 120px); will-change: transform; }
.site-mare .lead { flex: 0 0 auto; width: min(34vw, 460px); }
.site-mare .lead h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(64px, 9vw, 150px); line-height: 0.88; letter-spacing: -0.02em; }
.site-mare .lead h2 em { color: var(--clay); }
.site-mare .lead p { margin-top: 28px; color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 26ch; }
.site-mare .lead.end { width: min(60vw, 720px); }
.site-mare .panel { flex: 0 0 auto; }
.site-mare .panel .ph { overflow: hidden; background: #d9d2c4; }
.site-mare .panel.tall .ph { width: min(34vw, 46svh * 0.8, 520px); height: min(62svh, 520px * 1.25); }
.site-mare .panel.wide .ph { width: min(52vw, 760px); height: min(48svh, 480px); }
.site-mare .panel .ph img { width: 128%; height: 100%; object-fit: cover; margin-left: -14%; }
.site-mare .panel:nth-child(even) { align-self: flex-start; margin-top: 12svh; }
.site-mare .panel:nth-child(odd) { align-self: flex-end; margin-bottom: 9svh; }
.site-mare figcaption { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin-top: 14px; font-size: 12.5px; color: var(--muted); max-width: 38ch; }
.site-mare figcaption .fig { grid-row: 1 / 3; font-variant-numeric: tabular-nums; letter-spacing: 0.06em; text-transform: uppercase; color: var(--clay); padding-top: 2px; }
.site-mare figcaption b { font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--ink); line-height: 1.05; }
.site-mare .progress { position: absolute; left: clamp(20px, 6vw, 120px); right: clamp(20px, 6vw, 120px); bottom: 28px; height: 1px; background: var(--rule); }
.site-mare .progress i { display: block; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.site-mare .index { padding: 22svh clamp(20px, 6vw, 120px) 18svh; }
.site-mare .index h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 76px); margin-bottom: 6svh; }
.site-mare .index ol { list-style: none; border-top: 1px solid var(--ink); }
.site-mare .row { display: grid; grid-template-columns: 56px 1fr 0.7fr 64px; align-items: baseline; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--rule); transition: padding 0.4s cubic-bezier(0.2, 0.9, 0.2, 1), color 0.3s; }
.site-mare .row .n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.site-mare .row .t { font-family: var(--serif); font-size: clamp(30px, 4.4vw, 68px); line-height: 1; }
.site-mare .row .pl { color: var(--muted); font-size: 14px; }
.site-mare .row .pg { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); }
.site-mare .row:hover, .site-mare .row:focus-visible { padding-left: 18px; color: var(--clay); outline-offset: -2px; }
.site-mare .peek { position: fixed; left: 0; top: 0; z-index: 30; width: 220px; height: 280px; pointer-events: none; overflow: hidden; opacity: 0; transform-origin: center; transition: opacity 0.3s; }
.site-mare .peek.on { opacity: 1; }
.site-mare .peek img { width: 100%; height: 100%; object-fit: cover; }
.site-mare .foot { background: var(--ink); color: var(--paper); padding: 14svh clamp(20px, 6vw, 120px) 0; overflow: hidden; }
.site-mare .sign { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; align-items: end; }
.site-mare .sign p { font-family: var(--serif); font-size: clamp(28px, 3.4vw, 52px); line-height: 1.05; max-width: 14em; }
.site-mare .sign form { width: min(100%, 420px); }
.site-mare .sign label { display: block; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; color: #b7aea2; }
.site-mare .sign form div { display: flex; border-bottom: 1px solid var(--paper); }
.site-mare .sign input { flex: 1; background: none; border: 0; color: inherit; font: inherit; font-size: 18px; padding: 12px 0; min-width: 0; }
.site-mare .sign input::placeholder { color: #8b8278; }
.site-mare .sign input:focus-visible { outline: none; }
.site-mare .sign form div:focus-within { border-color: var(--clay); }
.site-mare .sign button { background: none; border: 0; color: inherit; font: inherit; font-size: 14px; cursor: pointer; padding: 0 0 0 16px; min-height: 44px; }
.site-mare .sign button:hover { color: var(--clay); }
.site-mare .sign small { display: block; margin-top: 10px; color: #8b8278; font-size: 12px; }
.site-mare .big-mare { display: flex; justify-content: space-between; font-family: var(--serif); font-size: clamp(120px, 31vw, 560px); line-height: 0.8; margin-top: 12svh; padding-bottom: 0; transform: translateY(3%); user-select: none; }
.site-mare .big-mare span { display: block; }
@media (max-width: 760px) {
.site-mare .issue { display: none; }
.site-mare .lead { width: 72vw; }
.site-mare .panel.tall .ph { width: 64vw; height: 52svh; }
.site-mare .panel.wide .ph { width: 78vw; height: 38svh; }
.site-mare .row { grid-template-columns: 34px 1fr 52px; }
.site-mare .row .pl { display: none; }
.site-mare .peek { display: none; }
.site-mare .hero-title { font-size: 26vw; }
}
@media (prefers-reduced-motion: reduce) {
.site-mare .hero { height: auto; }
.site-mare .hero-pin { position: relative; height: 100svh; }
.site-mare .hero-frame { clip-path: none !important; }
.site-mare .hero-end { opacity: 1 !important; transform: none !important; }
.site-mare .chapters { height: auto; overflow: visible; }
.site-mare .track { flex-direction: column; width: auto; padding: 12vh 6vw; align-items: flex-start; }
.site-mare .panel { align-self: flex-start !important; margin: 0 !important; }
.site-mare .progress { display: none; }
.site-mare .w { opacity: 1 !important; }
}
.site-mare a.sub { display: inline-grid; place-items: center; min-height: 44px; padding: 0 14px; }
```


## Helper it imports: `src/patterns/sites/_shared.ts`

```ts
import { useEffect, type RefObject } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import Lenis from 'lenis'

/* Helpers shared by the whole-site demos in this folder. They are full pages, so they scroll the window,
   and they must coexist with UI Lab's own hash router and clean up completely when you leave. */

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/**
 * Smooth scroll (Lenis, driven by GSAP's ticker so ScrollTrigger stays in sync) plus in-page anchor links.
 * Anchor clicks are handled here instead of by the browser: UI Lab's router lives in the URL hash,
 * so a real `#section` navigation would be read as a route change.
 * Everything is torn down on unmount.
 */
export function useSiteScroll(root: RefObject<HTMLElement | null>, { smooth = true, lerp = 0.1 } = {}) {
  useEffect(() => {
    const el = root.current
    if (!el) return
    let lenis: Lenis | null = null
    let tick: ((t: number) => void) | null = null
    if (smooth && !reducedMotion()) {
      lenis = new Lenis({ lerp })
      lenis.on('scroll', ScrollTrigger.update)
      tick = (t: number) => lenis!.raf(t * 1000)
      gsap.ticker.add(tick)
      gsap.ticker.lagSmoothing(0)
    }
    const onClick = (e: MouseEvent) => {
      const a = (e.target as HTMLElement).closest<HTMLAnchorElement>('a[href^="#"]')
      if (!a || !el.contains(a)) return
      const id = a.getAttribute('href')!.slice(1)
      if (id.startsWith('/')) return // a UI Lab route, let it through
      e.preventDefault()
      const target = id ? el.querySelector<HTMLElement>(`#${CSS.escape(id)}`) : null
      if (!target) return
      if (lenis) lenis.scrollTo(target)
      else target.scrollIntoView({ behavior: 'smooth' })
    }
    el.addEventListener('click', onClick)
    return () => {
      el.removeEventListener('click', onClick)
      if (tick) gsap.ticker.remove(tick)
      gsap.ticker.lagSmoothing(500, 33) // GSAP's default
      lenis?.destroy()
      ScrollTrigger.getAll().forEach((t) => t.kill())
    }
  }, [root, smooth, lerp])
}
```

# Site: Lattice (technical dark)
> A developer-database landing page. A scroll-scrubbed terminal drives a live canvas edge network that reacts to the pointer, plus a working Ctrl K palette and a latency race.
- **Category:** Sites
- **Slug:** site-lattice
- **Tags:** site, full page, dark, developer, terminal, canvas, network, command palette, scrolltrigger, gsap, lenis
- **Dependencies:** gsap, lenis, @fontsource-variable/geist, @fontsource-variable/jetbrains-mono, sites/_shared.ts
- **Live demo:** https://ui-lab-weld.vercel.app/#/site-lattice
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sites/lattice/index.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sites/lattice/index.tsx
- **Raw files:** https://ui-lab-weld.vercel.app/raw/sites/lattice/index.tsx, https://ui-lab-weld.vercel.app/raw/sites/lattice/network.ts, https://ui-lab-weld.vercel.app/raw/sites/lattice/styles.css

## When to use
- Developer tools, infra, AI products, any pitch that is best shown by watching it work
- Reference for scroll-driven state with canvas, a command palette and a mono-only-for-code type system

## Accessibility

Terminal is labelled per step; the palette is a modal dialog with arrow/enter/escape; city picker is a radiogroup; typing and packets stop under reduced motion.


## Source
Files: `src/patterns/sites/lattice/index.tsx`, `src/patterns/sites/lattice/network.ts`, `src/patterns/sites/lattice/styles.css`
```tsx
// ===== src/patterns/sites/lattice/index.tsx =====
import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import '@fontsource-variable/geist'
import '@fontsource-variable/jetbrains-mono'
import './styles.css'
import { reducedMotion, useSiteScroll } from '../_shared'
import { net, startNetwork } from './network'

gsap.registerPlugin(ScrollTrigger)
const reduced = reducedMotion()

type Line = { step: number; kind: 'cmd' | 'out' | 'ok' | 'warn'; text: string }

const STEPS = [
  { title: 'Create', body: 'One command makes a Postgres-compatible database with sync built in.' },
  { title: 'Deploy', body: 'Pick regions. Data replicates to each; nothing to configure per region.' },
  { title: 'Query', body: 'Reads land on the nearest replica. Writes are conflict-free by construction.' },
  { title: 'Fail over', body: 'Lose a region and traffic moves on. No dropped writes, no pager.' },
  { title: 'Scale out', body: 'Add regions while serving traffic. Edges join the mesh in seconds.' },
]

const LINES: Line[] = [
  { step: 0, kind: 'cmd', text: 'npx lattice init orders-db' },
  { step: 0, kind: 'ok', text: 'created project orders-db (iad)' },
  { step: 1, kind: 'cmd', text: 'lattice deploy --regions iad,fra,sin' },
  { step: 1, kind: 'out', text: 'provisioning fra ........ done  1.1s' },
  { step: 1, kind: 'out', text: 'provisioning sin ........ done  1.3s' },
  { step: 1, kind: 'ok', text: '3 regions live, replication lag 9ms' },
  { step: 2, kind: 'cmd', text: `lattice query "select * from orders where user = 'ada'"` },
  { step: 2, kind: 'out', text: 'served from fra  ·  11ms' },
  { step: 2, kind: 'ok', text: '14 rows' },
  { step: 3, kind: 'cmd', text: 'lattice chaos --kill iad' },
  { step: 3, kind: 'warn', text: 'iad unreachable' },
  { step: 3, kind: 'ok', text: 'traffic rerouted to fra  ·  0 writes dropped' },
  { step: 4, kind: 'cmd', text: 'lattice scale --add syd,gru,nrt,lhr,bom,sfo' },
  { step: 4, kind: 'ok', text: '9 regions live  ·  p99 14ms worldwide' },
]

const LIT_BY_STEP = [1, 3, 3, 3, 9]

const PALETTE = [
  { id: 'top', label: 'Overview', hint: 'top' },
  { id: 'how', label: 'How it works', hint: 'story' },
  { id: 'race', label: 'Latency, felt', hint: 'compare' },
  { id: 'why', label: 'Why Lattice', hint: 'features' },
  { id: 'install', label: 'Install', hint: 'npm' },
]

const CITIES: Record<string, { single: number; lattice: number }> = {
  Sydney: { single: 212, lattice: 9 },
  'São Paulo': { single: 128, lattice: 11 },
  Frankfurt: { single: 94, lattice: 7 },
  Singapore: { single: 236, lattice: 10 },
}

function Terminal({ step }: { step: number }) {
  const [typed, setTyped] = useState(0)
  const box = useRef<HTMLDivElement>(null)
  const current = useMemo(() => LINES.filter((l) => l.step === step), [step])
  const total = current.reduce((n, l) => n + l.text.length + 4, 0)

  useEffect(() => {
    if (reduced) return setTyped(total)
    setTyped(0)
    const id = setInterval(() => setTyped((t) => (t >= total ? t : t + 2)), 16)
    return () => clearInterval(id)
  }, [step, total])

  useEffect(() => {
    box.current?.scrollTo({ top: box.current.scrollHeight })
  }, [typed, step])

  let budget = typed
  return (
    <div className="term" role="img" aria-label={`Terminal session, step ${step + 1}: ${STEPS[step].title}`}>
      <div className="term-bar">
        <i /><i /><i />
        <span>orders-db — zsh</span>
      </div>
      <div className="term-body" ref={box}>
        {LINES.filter((l) => l.step <= step).map((l, i) => {
          let text = l.text
          if (l.step === step) {
            if (budget <= 0) return null
            text = l.text.slice(0, Math.min(l.text.length, budget))
            budget -= l.text.length + 4
          }
          return (
            <div key={i} className={`ln ${l.kind}`}>
              <span className="g">{l.kind === 'cmd' ? '$' : l.kind === 'ok' ? '✔' : l.kind === 'warn' ? '!' : '·'}</span>
              <span>{text}</span>
            </div>
          )
        })}
        <div className="ln cmd"><span className="g">$</span><span className="caret" /></div>
      </div>
    </div>
  )
}

function Palette({ open, onClose }: { open: boolean; onClose: () => void }) {
  const [q, setQ] = useState('')
  const [i, setI] = useState(0)
  const input = useRef<HTMLInputElement>(null)
  const items = PALETTE.filter((p) => (p.label + p.hint).toLowerCase().includes(q.toLowerCase()))
  useEffect(() => {
    if (open) {
      setQ('')
      setI(0)
      setTimeout(() => input.current?.focus(), 0)
    }
  }, [open])
  if (!open) return null
  const go = (id: string) => {
    onClose()
    document.getElementById(id)?.scrollIntoView({ behavior: reduced ? 'auto' : 'smooth' }) // ids are unique inside this page
  }
  return (
    <div className="pal-back" onMouseDown={onClose}>
      <div className="pal" role="dialog" aria-modal="true" aria-label="Command palette" onMouseDown={(e) => e.stopPropagation()}>
        <input
          ref={input}
          value={q}
          placeholder="Jump to…"
          onChange={(e) => {
            setQ(e.target.value)
            setI(0)
          }}
          onKeyDown={(e) => {
            if (e.key === 'ArrowDown') (e.preventDefault(), setI((v) => Math.min(items.length - 1, v + 1)))
            if (e.key === 'ArrowUp') (e.preventDefault(), setI((v) => Math.max(0, v - 1)))
            if (e.key === 'Enter' && items[i]) go(items[i].id)
            if (e.key === 'Escape') onClose()
          }}
        />
        <ul>
          {items.map((p, n) => (
            <li key={p.id}>
              <button className={n === i ? 'sel' : ''} onMouseEnter={() => setI(n)} onClick={() => go(p.id)}>
                {p.label}
                <kbd>{p.hint}</kbd>
              </button>
            </li>
          ))}
          {!items.length && <li className="none">No match</li>}
        </ul>
      </div>
    </div>
  )
}

export default function LatticeSite() {
  const root = useRef<HTMLDivElement>(null)
  const canvas = useRef<HTMLCanvasElement>(null)
  const [step, setStep] = useState(0)
  const [city, setCity] = useState('Sydney')
  const [pal, setPal] = useState(false)
  const [copied, setCopied] = useState(false)

  useEffect(() => startNetwork(canvas.current!, reduced), [])

  useSiteScroll(root)

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault()
        setPal((v) => !v)
      }
    }
    addEventListener('keydown', onKey)
    return () => removeEventListener('keydown', onKey)
  }, [])

  // story steps follow the scroll through the pinned section
  useLayoutEffect(() => {
    const ctx = gsap.context(() => {
      ScrollTrigger.create({
        trigger: '.story',
        start: 'top top',
        end: 'bottom bottom',
        onUpdate: (self) => {
          const s = Math.min(STEPS.length - 1, Math.floor(self.progress * STEPS.length))
          setStep((cur) => (cur === s ? cur : s))
          net.lit = self.progress < 0.004 ? 4 : LIT_BY_STEP[s]
          net.dead = self.progress >= 0.004 && s === 3
        },
      })
      gsap.from('.hero .line', { yPercent: 110, duration: 1.1, ease: 'expo.out', stagger: 0.08, delay: 0.1 })
      gsap.from('.hero .fade', { opacity: 0, y: 14, duration: 1, ease: 'power3.out', stagger: 0.1, delay: 0.5 })
      gsap.utils.toArray<HTMLElement>('.rv').forEach((el) =>
        gsap.from(el, { opacity: 0, y: 28, duration: 0.9, ease: 'expo.out', scrollTrigger: { trigger: el, start: 'top 88%', once: true } }),
      )
    }, root)
    return () => ctx.revert()
  }, [])

  // latency race
  const c = CITIES[city]
  useEffect(() => {
    const max = 240
    gsap.to('.bar.single i', { width: `${(c.single / max) * 100}%`, duration: reduced ? 0 : 1.1, ease: 'expo.out' })
    gsap.to('.bar.lattice i', { width: `${(c.lattice / max) * 100}%`, duration: reduced ? 0 : 1.1, ease: 'expo.out' })
    const o = { a: 0, b: 0 }
    gsap.to(o, {
      a: c.single,
      b: c.lattice,
      duration: reduced ? 0 : 1.1,
      ease: 'expo.out',
      onUpdate: () => {
        const A = document.querySelector('.bar.single b')
        const B = document.querySelector('.bar.lattice b')
        if (A) A.textContent = `${Math.round(o.a)} ms`
        if (B) B.textContent = `${Math.round(o.b)} ms`
      },
    })
  }, [c])

  const copy = async () => {
    try {
      await navigator.clipboard.writeText('npm i @lattice/client')
    } catch {}
    setCopied(true)
    setTimeout(() => setCopied(false), 1400)
  }

  return (
    <div ref={root} className="site-lattice">
      <canvas ref={canvas} className="net" aria-hidden="true" />

      <header className="nav">
        <a href="#top" className="logo"><span aria-hidden="true">◈</span> lattice</a>
        <nav>
          <a href="#how">How it works</a>
          <a href="#race">Latency</a>
          <a href="#why">Why</a>
          <button className="kbd" onClick={() => setPal(true)} aria-label="Open command palette">
            <span>Jump to</span><kbd>Ctrl K</kbd>
          </button>
        </nav>
      </header>

      <main id="top">
        <section className="hero">
          <h1>
            <span className="mask"><span className="line">Your database,</span></span>
            <span className="mask"><span className="line">already where</span></span>
            <span className="mask"><span className="line">your users <em>are.</em></span></span>
          </h1>
          <p className="fade lede">Postgres-compatible data, replicated to the edge with strong reads and conflict-free writes. Deploy once, serve everywhere.</p>
          <div className="fade actions">
            <button className="install" onClick={copy} aria-label="Copy install command">
              <code><span className="g">$</span> npm i @lattice/client</code>
              <span className="cp">{copied ? 'copied' : 'copy'}</span>
            </button>
            <a className="ghost" href="#how">See it work ↓</a>
          </div>
          <p className="fade hint">Move your pointer over the grid. Nine regions, waiting.</p>
        </section>

        <section className="story" id="how" style={{ height: `${STEPS.length * 90 + 40}svh` }}>
          <div className="stage">
            <ol className="steps">
              {STEPS.map((s, i) => (
                <li key={s.title} className={i === step ? 'on' : i < step ? 'done' : ''}>
                  <span className="num">{String(i + 1).padStart(2, '0')}</span>
                  <div>
                    <h2>{s.title}</h2>
                    <p>{s.body}</p>
                  </div>
                </li>
              ))}
            </ol>
            <Terminal step={step} />
          </div>
        </section>

        <section className="race" id="race">
          <h2 className="rv">Latency, <em>felt.</em></h2>
          <p className="rv sub">Round-trip for a read, one user, one city. Illustrative numbers for the demo.</p>
          <div className="cities rv" role="radiogroup" aria-label="User location">
            {Object.keys(CITIES).map((k) => (
              <button key={k} role="radio" aria-checked={k === city} className={k === city ? 'on' : ''} onClick={() => setCity(k)}>{k}</button>
            ))}
          </div>
          <div className="lanes">
            <div className="lane">
              <span>Single region (us-east-1)</span>
              <div className="bar single"><i /><b>0 ms</b></div>
            </div>
            <div className="lane">
              <span>Lattice (nearest edge)</span>
              <div className="bar lattice"><i /><b>0 ms</b></div>
            </div>
          </div>
        </section>

        <section className="why" id="why">
          <h2 className="rv">Built for the 3 a.m. page.</h2>
          <dl>
            {[
              ['Conflict-free by default', 'Writes merge deterministically across regions. No last-write-wins surprises, no manual reconciliation.', 'await db.insert(orders, row)'],
              ['One connection string', 'Your driver talks to the nearest region. Nothing to route, nothing to pin.', 'postgres://edge.lattice.dev/orders'],
              ['Region failure is a non-event', 'Reads and writes continue through the surviving mesh. Replay catches the dead region up when it returns.', 'lattice chaos --kill iad'],
              ['Local-first friendly', 'The same sync engine runs in the browser, so offline edits converge when the network returns.', 'const db = await open(\'orders\')'],
            ].map(([t, d, code]) => (
              <div key={t} className="rv">
                <dt>{t}</dt>
                <dd>
                  <p>{d}</p>
                  <code>{code}</code>
                </dd>
              </div>
            ))}
          </dl>
        </section>

        <footer className="foot" id="install">
          <h2>Ship it close to everyone.</h2>
          <button className="install big" onClick={copy} aria-label="Copy install command">
            <code><span className="g">$</span> npm i @lattice/client</code>
            <span className="cp">{copied ? 'copied' : 'copy'}</span>
          </button>
          <small>Demo site for a fictional product. Numbers are illustrative.</small>
        </footer>
      </main>

      <Palette open={pal} onClose={() => setPal(false)} />
    </div>
  )
}


// ===== src/patterns/sites/lattice/network.ts =====
/* Canvas 2D "edge network": a dot grid that wakes up near the pointer, region nodes that light up as the
   story progresses, and packets that replicate along lit edges. State lives in a plain object (`net`) that
   scroll code writes and the draw loop reads, so React never re-renders per frame. */

export const net = { lit: 4, dead: false } // starts ambient (4 regions) until the story section takes over

type Region = { n: string; x: number; y: number }
// Lit in this order as `net.lit` grows.
const REGIONS: Region[] = [
  { n: 'iad', x: 0.3, y: 0.36 },
  { n: 'fra', x: 0.58, y: 0.3 },
  { n: 'sin', x: 0.8, y: 0.62 },
  { n: 'syd', x: 0.9, y: 0.84 },
  { n: 'gru', x: 0.34, y: 0.74 },
  { n: 'nrt', x: 0.9, y: 0.38 },
  { n: 'lhr', x: 0.48, y: 0.2 },
  { n: 'bom', x: 0.7, y: 0.48 },
  { n: 'sfo', x: 0.12, y: 0.42 },
]

const ACCENT = '94, 242, 178'
const AMBER = '255, 180, 84'

type Packet = { a: number; b: number; t: number; speed: number }

export function startNetwork(canvas: HTMLCanvasElement, reduced: boolean) {
  const ctx = canvas.getContext('2d')!
  let w = 0
  let h = 0
  let dpr = 1
  const pointer = { x: -999, y: -999 }
  const packets: Packet[] = []
  let raf = 0
  let last = performance.now()
  let spawn = 0

  const resize = () => {
    dpr = Math.min(devicePixelRatio || 1, 2)
    w = canvas.clientWidth
    h = canvas.clientHeight
    canvas.width = Math.round(w * dpr)
    canvas.height = Math.round(h * dpr)
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
  }
  const move = (e: PointerEvent) => {
    pointer.x = e.clientX
    pointer.y = e.clientY
  }
  resize()
  addEventListener('resize', resize)
  addEventListener('pointermove', move)

  const pos = (r: Region) => ({ x: r.x * w, y: r.y * h })

  const frame = (now: number) => {
    const dt = Math.min(0.05, (now - last) / 1000)
    last = now
    ctx.clearRect(0, 0, w, h)

    // dot grid
    const gap = w < 700 ? 30 : 36
    for (let x = gap / 2; x < w; x += gap) {
      for (let y = gap / 2; y < h; y += gap) {
        const dx = pointer.x - x
        const dy = pointer.y - y
        const d = Math.hypot(dx, dy)
        const k = Math.max(0, 1 - d / 180)
        const px = x + (dx / (d || 1)) * k * 6
        const py = y + (dy / (d || 1)) * k * 6
        ctx.fillStyle = `rgba(${ACCENT}, ${0.07 + k * 0.5})`
        ctx.fillRect(px - 0.75, py - 0.75, 1.5 + k * 1.5, 1.5 + k * 1.5)
      }
    }

    const lit = REGIONS.slice(0, net.lit).map((r, i) => ({ ...pos(r), n: r.n, dead: net.dead && i === 0 }))
    const alive = lit.filter((p) => !p.dead)

    // edges: each lit node to its two nearest living neighbours
    ctx.lineWidth = 1
    const edges: [number, number][] = []
    alive.forEach((p, i) => {
      alive
        .map((q, j) => ({ j, d: Math.hypot(p.x - q.x, p.y - q.y) }))
        .filter((o) => o.j !== i)
        .sort((a, b) => a.d - b.d)
        .slice(0, 2)
        .forEach((o) => {
          if (i < o.j || !edges.some(([a, b]) => a === o.j && b === i)) edges.push([i, o.j])
        })
    })
    edges.forEach(([i, j]) => {
      ctx.strokeStyle = `rgba(${ACCENT}, 0.22)`
      ctx.beginPath()
      ctx.moveTo(alive[i].x, alive[i].y)
      ctx.lineTo(alive[j].x, alive[j].y)
      ctx.stroke()
    })

    // packets
    if (!reduced) {
      spawn -= dt
      if (spawn <= 0 && edges.length) {
        const [a, b] = edges[Math.floor(Math.random() * edges.length)]
        packets.push({ a, b, t: 0, speed: 0.35 + Math.random() * 0.4 })
        spawn = 0.35
      }
    }
    for (let i = packets.length - 1; i >= 0; i--) {
      const p = packets[i]
      p.t += dt * p.speed
      const A = alive[p.a]
      const B = alive[p.b]
      if (p.t >= 1 || !A || !B) {
        packets.splice(i, 1)
        continue
      }
      const x = A.x + (B.x - A.x) * p.t
      const y = A.y + (B.y - A.y) * p.t
      ctx.fillStyle = `rgba(${ACCENT}, 0.95)`
      ctx.beginPath()
      ctx.arc(x, y, 2.2, 0, Math.PI * 2)
      ctx.fill()
      ctx.fillStyle = `rgba(${ACCENT}, 0.18)`
      ctx.beginPath()
      ctx.arc(x, y, 7, 0, Math.PI * 2)
      ctx.fill()
    }

    // nodes
    const t = now / 1000
    REGIONS.forEach((r, i) => {
      const { x, y } = pos(r)
      const on = i < net.lit
      const dead = net.dead && i === 0
      const rgb = dead ? AMBER : ACCENT
      if (on) {
        const pulse = reduced ? 0 : (Math.sin(t * 2 + i) + 1) / 2
        ctx.fillStyle = `rgba(${rgb}, ${0.08 + pulse * 0.08})`
        ctx.beginPath()
        ctx.arc(x, y, 18 + pulse * 6, 0, Math.PI * 2)
        ctx.fill()
        ctx.fillStyle = `rgba(${rgb}, 1)`
        ctx.beginPath()
        ctx.arc(x, y, 4, 0, Math.PI * 2)
        ctx.fill()
      } else {
        ctx.strokeStyle = 'rgba(255,255,255,0.22)'
        ctx.beginPath()
        ctx.arc(x, y, 3.5, 0, Math.PI * 2)
        ctx.stroke()
      }
      ctx.font = '11px "JetBrains Mono Variable", ui-monospace, monospace'
      ctx.fillStyle = on ? `rgba(${rgb}, 0.95)` : 'rgba(255,255,255,0.35)'
      ctx.fillText(dead ? `${r.n} ✕` : r.n, x + 10, y - 9)
    })

    raf = requestAnimationFrame(frame)
  }
  raf = requestAnimationFrame(frame)

  return () => {
    cancelAnimationFrame(raf)
    removeEventListener('resize', resize)
    removeEventListener('pointermove', move)
  }
}


// ===== src/patterns/sites/lattice/styles.css =====
.site-lattice { position: relative; min-height: 100svh; overflow-x: clip; }
.site-lattice {
  --bg: #08080a;
  --surface: #0f0f12;
  --line: rgba(255, 255, 255, 0.09);
  --fg: #ececef;
  --muted: #8d8d98;
  --acc: #5ef2b2;
  --warn: #ffb454;
  --sans: 'Geist Variable', system-ui, sans-serif;
  --mono: 'JetBrains Mono Variable', ui-monospace, monospace;
}
.site-lattice * { box-sizing: border-box; margin: 0; padding: 0; }
.site-lattice { background: var(--bg); }
.site-lattice { font-family: var(--sans); color: var(--fg); -webkit-font-smoothing: antialiased; overflow-x: clip; }
.site-lattice a { color: inherit; text-decoration: none; }
.site-lattice em { font-style: normal; color: var(--acc); }
.site-lattice::selection, .site-lattice ::selection { background: var(--acc); color: #04130c; }
.site-lattice :focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px; }
.site-lattice button { font: inherit; color: inherit; }
.site-lattice code, .site-lattice kbd { font-family: var(--mono); }
.site-lattice .net { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.site-lattice main { position: relative; z-index: 1; }
.site-lattice .mask { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.site-lattice .line { display: block; }
.site-lattice .nav { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: 16px clamp(18px, 4vw, 48px); background: linear-gradient(var(--bg), transparent); }
.site-lattice .logo { font-weight: 600; letter-spacing: -0.01em; font-size: 17px; display: flex; gap: 8px; align-items: center; }
.site-lattice .logo span { color: var(--acc); }
.site-lattice .nav nav { display: flex; gap: 26px; align-items: center; font-size: 14px; color: var(--muted); }
.site-lattice .nav nav a:hover { color: var(--fg); }
.site-lattice .kbd { display: flex; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 0 8px 0 12px; height: 36px; cursor: pointer; color: var(--muted); }
.site-lattice .kbd:hover { border-color: rgba(255, 255, 255, 0.22); color: var(--fg); }
.site-lattice kbd { font-size: 11px; border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; color: var(--muted); }
.site-lattice .hero { min-height: 100svh; padding: 22svh clamp(18px, 4vw, 48px) 10svh; display: flex; flex-direction: column; justify-content: center; max-width: 920px; }
.site-lattice .hero h1 { font-weight: 600; font-size: clamp(46px, 7.4vw, 112px); line-height: 0.98; letter-spacing: -0.045em; }
.site-lattice .lede { margin-top: 28px; max-width: 46ch; color: var(--muted); font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; }
.site-lattice .actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.site-lattice .install { display: inline-flex; align-items: center; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0 8px 0 16px; min-height: 48px; cursor: pointer; transition: border-color 0.2s; }
.site-lattice .install:hover { border-color: rgba(94, 242, 178, 0.5); }
.site-lattice .install code { font-size: 14px; }
.site-lattice .g { color: var(--acc); margin-right: 8px; }
.site-lattice .cp { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; }
.site-lattice .ghost { color: var(--muted); font-size: 14px; padding: 12px 6px; }
.site-lattice .ghost:hover { color: var(--fg); }
.site-lattice .hint { margin-top: 8svh; font-size: 12px; font-family: var(--mono); color: #6a6a75; }
.site-lattice .story { position: relative; }
.site-lattice .stage { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 80px); align-items: center; padding: 0 clamp(18px, 4vw, 48px); }
.site-lattice .steps { list-style: none; display: grid; gap: 4px; }
.site-lattice .steps li { display: grid; grid-template-columns: 38px 1fr; gap: 6px; padding: 16px 0 16px 18px; border-left: 1px solid var(--line); opacity: 0.38; transition: opacity 0.4s, border-color 0.4s; }
.site-lattice .steps li.done { opacity: 0.6; }
.site-lattice .steps li.on { opacity: 1; border-color: var(--acc); }
.site-lattice .num { font-family: var(--mono); font-size: 12px; color: var(--acc); padding-top: 6px; }
.site-lattice .steps h2 { font-size: clamp(24px, 3vw, 40px); font-weight: 600; letter-spacing: -0.03em; }
.site-lattice .steps p { color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 38ch; max-height: 0; overflow: hidden; transition: max-height 0.5s, margin 0.5s; }
.site-lattice .steps li.on p { max-height: 6em; margin-top: 8px; }
.site-lattice .term { background: rgba(10, 10, 13, 0.92); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7); overflow: hidden; backdrop-filter: blur(8px); }
.site-lattice .term-bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.site-lattice .term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2a2a31; }
.site-lattice .term-bar span { margin-left: 8px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.site-lattice .term-body { padding: 18px; height: min(52svh, 420px); overflow: hidden; font-family: var(--mono); font-size: clamp(11.5px, 1.05vw, 13.5px); line-height: 1.75; }
.site-lattice .ln { display: flex; gap: 12px; white-space: pre-wrap; word-break: break-word; }
.site-lattice .ln .g { margin: 0; width: 1ch; flex: none; }
.site-lattice .ln.cmd { color: var(--fg); }
.site-lattice .ln.out { color: var(--muted); }
.site-lattice .ln.out .g { color: var(--muted); }
.site-lattice .ln.ok .g, .site-lattice .ln.ok { color: var(--acc); }
.site-lattice .ln.warn .g, .site-lattice .ln.warn { color: var(--warn); }
.site-lattice .caret { width: 8px; height: 1.1em; background: var(--fg); animation: lattice-blink 1s steps(1) infinite; align-self: center; }
@keyframes lattice-blink { 50% { opacity: 0; } }
.site-lattice .race, .site-lattice .why { padding: 22svh clamp(18px, 4vw, 48px) 0; max-width: 1100px; }
.site-lattice .race h2, .site-lattice .why h2, .site-lattice .foot h2 { font-weight: 600; font-size: clamp(36px, 5.4vw, 76px); letter-spacing: -0.04em; line-height: 1; }
.site-lattice .sub { color: var(--muted); margin-top: 14px; max-width: 48ch; }
.site-lattice .cities { display: flex; flex-wrap: wrap; gap: 8px; margin: 36px 0 28px; }
.site-lattice .cities button { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 0 16px; min-height: 44px; cursor: pointer; color: var(--muted); }
.site-lattice .cities button:hover { color: var(--fg); }
.site-lattice .cities button.on { border-color: var(--acc); color: var(--acc); background: rgba(94, 242, 178, 0.07); }
.site-lattice .lanes { display: grid; gap: 26px; }
.site-lattice .lane > span { font-size: 13px; color: var(--muted); }
.site-lattice .bar { position: relative; height: 54px; margin-top: 8px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.site-lattice .bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: #2b2b33; }
.site-lattice .bar.lattice i { background: linear-gradient(90deg, rgba(94, 242, 178, 0.3), var(--acc)); }
.site-lattice .bar b { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-weight: 500; font-size: 15px; font-variant-numeric: tabular-nums; text-shadow: 0 0 8px var(--bg); }
.site-lattice dl { margin-top: 7svh; border-top: 1px solid var(--line); }
.site-lattice dl > div { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 28px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.site-lattice dt { font-size: clamp(19px, 2vw, 26px); font-weight: 600; letter-spacing: -0.02em; }
.site-lattice dd p { color: var(--muted); line-height: 1.55; max-width: 52ch; }
.site-lattice dd code { display: inline-block; margin-top: 14px; font-size: 12.5px; color: var(--acc); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px; }
.site-lattice .foot { padding: 26svh clamp(18px, 4vw, 48px) 8svh; display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.site-lattice .foot .install.big { min-height: 60px; padding-left: 22px; }
.site-lattice .foot .install.big code { font-size: 17px; }
.site-lattice .foot small { color: #6a6a75; font-size: 12px; }
.site-lattice .pal-back { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.55); display: grid; place-items: start center; padding-top: 18svh; backdrop-filter: blur(3px); }
.site-lattice .pal { width: min(560px, calc(100vw - 32px)); background: #0d0d10; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px; overflow: hidden; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7); }
.site-lattice .pal input { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--fg); font: inherit; font-size: 16px; padding: 18px 20px; }
.site-lattice .pal input:focus-visible { outline: none; }
.site-lattice .pal ul { list-style: none; padding: 8px; }
.site-lattice .pal li button { width: 100%; display: flex; justify-content: space-between; align-items: center; text-align: left; background: none; border: 0; border-radius: 8px; padding: 0 12px; min-height: 44px; cursor: pointer; }
.site-lattice .pal li button.sel { background: rgba(94, 242, 178, 0.09); color: var(--acc); }
.site-lattice .pal .none { padding: 14px 12px; color: var(--muted); }
@media (max-width: 860px) {
.site-lattice .nav nav a { display: none; }
.site-lattice .stage { grid-template-columns: 1fr; align-content: center; gap: 18px; }
.site-lattice .steps li { padding: 8px 0 8px 14px; }
.site-lattice .steps li:not(.on) { display: none; }
.site-lattice .term-body { height: 38svh; }
.site-lattice dl > div { grid-template-columns: 1fr; gap: 10px; }
.site-lattice .hero h1 { font-size: 12.4vw; }
}
@media (prefers-reduced-motion: reduce) {
.site-lattice .caret { animation: none; }
}
```


## Helper it imports: `src/patterns/sites/_shared.ts`

```ts
import { useEffect, type RefObject } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import Lenis from 'lenis'

/* Helpers shared by the whole-site demos in this folder. They are full pages, so they scroll the window,
   and they must coexist with UI Lab's own hash router and clean up completely when you leave. */

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/**
 * Smooth scroll (Lenis, driven by GSAP's ticker so ScrollTrigger stays in sync) plus in-page anchor links.
 * Anchor clicks are handled here instead of by the browser: UI Lab's router lives in the URL hash,
 * so a real `#section` navigation would be read as a route change.
 * Everything is torn down on unmount.
 */
export function useSiteScroll(root: RefObject<HTMLElement | null>, { smooth = true, lerp = 0.1 } = {}) {
  useEffect(() => {
    const el = root.current
    if (!el) return
    let lenis: Lenis | null = null
    let tick: ((t: number) => void) | null = null
    if (smooth && !reducedMotion()) {
      lenis = new Lenis({ lerp })
      lenis.on('scroll', ScrollTrigger.update)
      tick = (t: number) => lenis!.raf(t * 1000)
      gsap.ticker.add(tick)
      gsap.ticker.lagSmoothing(0)
    }
    const onClick = (e: MouseEvent) => {
      const a = (e.target as HTMLElement).closest<HTMLAnchorElement>('a[href^="#"]')
      if (!a || !el.contains(a)) return
      const id = a.getAttribute('href')!.slice(1)
      if (id.startsWith('/')) return // a UI Lab route, let it through
      e.preventDefault()
      const target = id ? el.querySelector<HTMLElement>(`#${CSS.escape(id)}`) : null
      if (!target) return
      if (lenis) lenis.scrollTo(target)
      else target.scrollIntoView({ behavior: 'smooth' })
    }
    el.addEventListener('click', onClick)
    return () => {
      el.removeEventListener('click', onClick)
      if (tick) gsap.ticker.remove(tick)
      gsap.ticker.lagSmoothing(500, 33) // GSAP's default
      lenis?.destroy()
      ScrollTrigger.getAll().forEach((t) => t.kill())
    }
  }, [root, smooth, lerp])
}
```

# Site: HOT MESS (neo-brutalist)
> A coffee roaster with attitude. A pile of stickers you can grab and throw (hand-rolled pointer physics), hard offset shadows, marquees and a live bag configurator.
- **Category:** Sites
- **Slug:** site-hotmess
- **Tags:** site, full page, brutalist, zine, stickers, drag, physics, pointer events, configurator, marquee, shop
- **Dependencies:** @fontsource/archivo-black, @fontsource/space-mono, sites/_shared.ts
- **Live demo:** https://ui-lab-weld.vercel.app/#/site-hotmess
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sites/hotmess/index.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sites/hotmess/index.tsx
- **Raw files:** https://ui-lab-weld.vercel.app/raw/sites/hotmess/index.tsx, https://ui-lab-weld.vercel.app/raw/sites/hotmess/Stickers.tsx, https://ui-lab-weld.vercel.app/raw/sites/hotmess/styles.css

## When to use
- Indie brands, zines, creative tools, anything that should not look corporate
- Reference for a tiny rAF physics integrator, drag with inertia and arrow-key nudging, flat-colour print styling

## Accessibility

Stickers are focusable and move with arrow keys; throw momentum is disabled under reduced motion; slider and grind picker are native controls with visible labels.


## Source
Files: `src/patterns/sites/hotmess/index.tsx`, `src/patterns/sites/hotmess/Stickers.tsx`, `src/patterns/sites/hotmess/styles.css`
```tsx
// ===== src/patterns/sites/hotmess/index.tsx =====
import { useEffect, useRef, useState } from 'react'
import '@fontsource/archivo-black'
import '@fontsource/space-mono'
import '@fontsource/space-mono/700.css'
import './styles.css'
import Stickers from './Stickers'
import { reducedMotion, useSiteScroll } from '../_shared'

const reduced = reducedMotion()

const BEANS = [
  { id: 'fire', name: 'Dumpster Fire', level: 5, notes: 'Burnt toast, dark chocolate, regret.', price: 18, bg: 'tomato', big: true },
  { id: 'sunday', name: 'Sunday Scaries', level: 3, notes: 'Caramel, hazelnut, mild dread.', price: 17, bg: 'lemon' },
  { id: 'oops', name: 'Oops All Fruit', level: 1, notes: 'Blueberry jam, peach, a rumour of tea.', price: 19, bg: 'mint' },
]

const ROASTS = ['Barely warm', 'Sunday scaries', 'Perfectly fine', 'Dark and moody', 'Dumpster fire']
const TAGLINES = ['LIGHT AS A LIE', 'MOSTLY HARMLESS', 'ACCEPTABLY MESSY', 'DARK AS MY SOUL', 'ABSOLUTELY FERAL']
const GRINDS = ['Whole bean', 'Espresso', 'Filter']
const BAG_COLORS = ['#8de8b5', '#ffd23f', '#fff1d6', '#2f5bff', '#ff4b2b']

function Meter({ level }: { level: number }) {
  return (
    <div className="meter" role="img" aria-label={`Roast level ${level} of 5`}>
      {[1, 2, 3, 4, 5].map((n) => (
        <i key={n} className={n <= level ? 'on' : ''} />
      ))}
    </div>
  )
}

export default function HotMessSite() {
  const root = useRef<HTMLDivElement>(null)
  useSiteScroll(root, { smooth: false })
  const [bag, setBag] = useState(0)
  const [pop, setPop] = useState(0)
  const [roast, setRoast] = useState(3)
  const [grind, setGrind] = useState(0)
  const [toast, setToast] = useState('')
  const t = useRef<number>(0)

  const add = (label: string) => {
    setBag((b) => b + 1)
    setPop((p) => p + 1)
    setToast(`${label} added. Bad decision logged.`)
    clearTimeout(t.current)
    t.current = window.setTimeout(() => setToast(''), 1800)
  }

  useEffect(() => {
    if (reduced) return
    const io = new IntersectionObserver((es) => es.forEach((e) => e.isIntersecting && e.target.classList.add('in')), { threshold: 0.15 })
    document.querySelectorAll('.rise').forEach((el) => io.observe(el))
    return () => io.disconnect()
  }, [])

  return (
    <div ref={root} className="site-hotmess">
      <header className="nav">
        <a href="#top" className="logo">HOT<span>MESS</span></a>
        <nav>
          <a href="#beans">Beans</a>
          <a href="#build">Build a bag</a>
          <button className="bagbtn" aria-label={`Bag, ${bag} items`}>
            Bag <b key={pop} className={pop ? 'pop' : ''}>{bag}</b>
          </button>
        </nav>
      </header>

      <main id="top">
        <section className="hero">
          <h1>
            <span>HOT</span>
            <span className="r">MESS</span>
          </h1>
          <p className="sub">Coffee roasted in small batches by people who should really know better.</p>
          <a className="btn" href="#beans">Shop the beans</a>
          <p className="drag-hint">Go on, grab a sticker. Throw it.</p>
          <Stickers />
        </section>

        <div className="strip a" aria-hidden="true">
          <div>{Array.from({ length: 2 }).map((_, k) => <span key={k}>ROASTED TUESDAY ★ SHIPPED WEDNESDAY ★ GONE BY FRIDAY ★ NO REFUNDS ON REGRET ★ </span>)}</div>
        </div>

        <section className="beans" id="beans">
          <h2 className="rise">The lineup. <span>Pick your poison.</span></h2>
          <div className="lineup">
            {BEANS.map((b) => (
              <article key={b.id} className={`bean ${b.bg} ${b.big ? 'big' : ''} rise`}>
                <h3>{b.name}</h3>
                <Meter level={b.level} />
                <p>{b.notes}</p>
                <div className="buy">
                  <span>${b.price}</span>
                  <button onClick={() => add(b.name)}>Add to bag</button>
                </div>
              </article>
            ))}
          </div>
        </section>

        <div className="strip b" aria-hidden="true">
          <div>{Array.from({ length: 2 }).map((_, k) => <span key={k}>SMALL BATCH ★ BIG OPINIONS ★ SMALL BATCH ★ BIG OPINIONS ★ SMALL BATCH ★ BIG OPINIONS ★ </span>)}</div>
        </div>

        <section className="build" id="build">
          <div className="controls rise">
            <h2>Build<br />your bag.</h2>
            <label htmlFor="roast" className="lbl">Roast: <b>{ROASTS[roast - 1]}</b></label>
            <input id="roast" type="range" min={1} max={5} step={1} value={roast} onChange={(e) => setRoast(Number(e.target.value))} aria-valuetext={ROASTS[roast - 1]} />
            <div className="ticks" aria-hidden="true">{[1, 2, 3, 4, 5].map((n) => <span key={n}>{n}</span>)}</div>

            <div className="lbl">Grind</div>
            <div className="seg" role="radiogroup" aria-label="Grind">
              {GRINDS.map((g, i) => (
                <button key={g} role="radio" aria-checked={i === grind} className={i === grind ? 'on' : ''} onClick={() => setGrind(i)}>{g}</button>
              ))}
            </div>
            <button className="btn full" onClick={() => add('Custom bag')}>Add to bag · ${16 + roast}</button>
          </div>

          <div className="preview" aria-live="polite">
            <div className="bagshape" style={{ background: BAG_COLORS[roast - 1], color: roast >= 4 ? '#fff1d6' : '#111' }}>
              <div className="fold" />
              <small>HOT MESS COFFEE</small>
              <strong key={roast}>{TAGLINES[roast - 1]}</strong>
              <Meter level={roast} />
              <em>{GRINDS[grind]} · 340 g</em>
              <span className="stamp">NO. {roast}</span>
            </div>
          </div>
        </section>

        <footer className="foot">
          <h2>STAY<br />CAFFEINATED.<br /><span>(Responsibly. Ish.)</span></h2>
          <p>Demo site for a fictional roaster. Nothing is sold.</p>
        </footer>
      </main>

      <div className={`toast ${toast ? 'on' : ''}`} role="status">{toast}</div>
    </div>
  )
}


// ===== src/patterns/sites/hotmess/Stickers.tsx =====
import { useEffect, useRef } from 'react'

/* A pile of stickers you can grab, throw and stack. Plain pointer events + a tiny rAF integrator:
   no physics library. Position/velocity live in refs and are written straight to transforms. */

type Body = { x: number; y: number; vx: number; vy: number; r: number; vr: number; w: number; h: number; drag: boolean }

const INK = '#111'

const stroke = { stroke: INK, strokeWidth: 4, strokeLinejoin: 'round' as const }

export const STICKERS: { id: string; label: string; w: number; h: number; fx: number; fy: number; r: number; node: React.ReactNode }[] = [
  {
    id: 'burst',
    label: 'No decaf sticker',
    w: 190,
    h: 190,
    fx: 0.07,
    fy: 0.16,
    r: -12,
    node: (
      <svg viewBox="0 0 200 200">
        <polygon {...stroke} fill="#ffd23f" points="100,6 121,36 156,22 160,59 196,66 175,97 196,128 160,138 156,176 121,164 100,194 79,164 44,176 40,138 4,128 25,97 4,66 40,59 44,22 79,36" />
        <text x="100" y="92" textAnchor="middle" fontFamily="Archivo Black" fontSize="34" fill={INK}>NO</text>
        <text x="100" y="128" textAnchor="middle" fontFamily="Archivo Black" fontSize="34" fill={INK}>DECAF</text>
      </svg>
    ),
  },
  {
    id: 'cup',
    label: 'Smiling cup sticker',
    w: 170,
    h: 190,
    fx: 0.8,
    fy: 0.1,
    r: 9,
    node: (
      <svg viewBox="0 0 180 200">
        <path {...stroke} fill="#ff4b2b" d="M24 50h120l-14 124a14 14 0 0 1-14 12H52a14 14 0 0 1-14-12z" />
        <path {...stroke} fill="none" d="M144 70h14a20 20 0 0 1 0 44h-18" />
        <rect {...stroke} fill="#fff1d6" x="18" y="32" width="132" height="20" rx="8" />
        <circle cx="66" cy="108" r="8" fill={INK} />
        <circle cx="106" cy="108" r="8" fill={INK} />
        <path {...stroke} fill="none" d="M62 138q24 22 50 0" />
        <path {...stroke} fill="none" d="M60 14q-10 -8 0 -16M86 14q-10 -8 0 -16M112 14q-10 -8 0 -16" />
      </svg>
    ),
  },
  {
    id: 'bolt',
    label: 'Lightning bolt sticker',
    w: 120,
    h: 170,
    fx: 0.62,
    fy: 0.52,
    r: 14,
    node: (
      <svg viewBox="0 0 120 170">
        <polygon {...stroke} fill="#2f5bff" points="70,6 10,96 52,96 38,164 112,64 68,64 92,6" />
      </svg>
    ),
  },
  {
    id: 'fresh',
    label: 'Fresh roasted label sticker',
    w: 230,
    h: 80,
    fx: 0.1,
    fy: 0.66,
    r: -6,
    node: (
      <svg viewBox="0 0 230 80">
        <rect {...stroke} fill="#8de8b5" x="4" y="6" width="222" height="68" rx="34" />
        <text x="115" y="50" textAnchor="middle" fontFamily="Archivo Black" fontSize="26" fill={INK}>FRESH ROASTED</text>
      </svg>
    ),
  },
  {
    id: 'badge',
    label: 'Small batch badge sticker',
    w: 190,
    h: 190,
    fx: 0.4,
    fy: 0.7,
    r: 0,
    node: (
      <svg viewBox="0 0 200 200">
        <defs>
          <path id="ring" d="M100 100m-70 0a70 70 0 1 1 140 0a70 70 0 1 1 -140 0" />
        </defs>
        <circle {...stroke} fill="#fff1d6" cx="100" cy="100" r="94" />
        <text fontFamily="Space Mono" fontWeight="700" fontSize="15" letterSpacing="3" fill={INK}>
          <textPath href="#ring">SMALL BATCH · BAD DECISIONS · SMALL BATCH · BAD DECISIONS ·</textPath>
        </text>
        <circle {...stroke} fill="#ff4b2b" cx="100" cy="100" r="34" />
        <ellipse cx="100" cy="100" rx="14" ry="22" fill="none" stroke={INK} strokeWidth="4" transform="rotate(30 100 100)" />
      </svg>
    ),
  },
  {
    id: 'bean',
    label: 'Coffee bean sticker',
    w: 110,
    h: 150,
    fx: 0.88,
    fy: 0.56,
    r: -24,
    node: (
      <svg viewBox="0 0 110 150">
        <ellipse {...stroke} fill="#8a5a3c" cx="55" cy="75" rx="44" ry="66" />
        <path {...stroke} fill="none" d="M55 14c-26 30 26 50 0 76s26 36 0 46" />
      </svg>
    ),
  },
  {
    id: 'bad',
    label: 'Bad idea sticker',
    w: 200,
    h: 70,
    fx: 0.74,
    fy: 0.82,
    r: 5,
    node: (
      <svg viewBox="0 0 200 70">
        <rect {...stroke} fill={INK} x="4" y="6" width="192" height="58" rx="10" />
        <text x="100" y="44" textAnchor="middle" fontFamily="Archivo Black" fontSize="26" fill="#ffd23f">BAD IDEA?</text>
      </svg>
    ),
  },
  {
    id: 'star',
    label: 'Star sticker',
    w: 120,
    h: 120,
    fx: 0.3,
    fy: 0.08,
    r: 18,
    node: (
      <svg viewBox="0 0 120 120">
        <path {...stroke} fill="#ff4b2b" d="M60 6l14 34 36 4-27 24 8 36-31-19-31 19 8-36L10 44l36-4z" />
      </svg>
    ),
  },
]

export default function Stickers() {
  const board = useRef<HTMLDivElement>(null)
  const els = useRef<(HTMLDivElement | null)[]>([])
  const bodies = useRef<Body[]>([])
  const z = useRef(10)

  useEffect(() => {
    const b = board.current!
    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
    const place = () => {
      const { width, height } = b.getBoundingClientRect()
      const small = width < 700
      STICKERS.forEach((s, i) => {
        const k = small ? 0.62 : 1
        const w = s.w * k
        const h = s.h * k
        const prev = bodies.current[i]
        bodies.current[i] = {
          x: prev ? Math.min(Math.max(0, prev.x), width - w) : s.fx * (width - w),
          y: prev ? Math.min(Math.max(0, prev.y), height - h) : s.fy * (height - h),
          vx: 0, vy: 0, r: prev ? prev.r : s.r, vr: 0, w, h, drag: false,
        }
        const el = els.current[i]!
        el.style.width = `${w}px`
        el.style.height = `${h}px`
      })
    }
    place()
    addEventListener('resize', place)

    let raf = 0
    const tick = () => {
      const { width, height } = b.getBoundingClientRect()
      bodies.current.forEach((s, i) => {
        if (!s.drag) {
          s.x += s.vx
          s.y += s.vy
          s.r += s.vr
          s.vx *= 0.95
          s.vy *= 0.95
          s.vr *= 0.95
          if (s.x < 0) (s.x = 0, s.vx *= -0.6)
          if (s.x > width - s.w) (s.x = width - s.w, s.vx *= -0.6)
          if (s.y < 0) (s.y = 0, s.vy *= -0.6)
          if (s.y > height - s.h) (s.y = height - s.h, s.vy *= -0.6)
        }
        els.current[i]!.style.transform = `translate3d(${s.x}px, ${s.y}px, 0) rotate(${s.r}deg)`
      })
      raf = requestAnimationFrame(tick)
    }
    raf = requestAnimationFrame(tick)

    // drag
    const cleanups: (() => void)[] = []
    els.current.forEach((el, i) => {
      if (!el) return
      let ox = 0
      let oy = 0
      let lx = 0
      let ly = 0
      const down = (e: PointerEvent) => {
        const s = bodies.current[i]
        el.setPointerCapture(e.pointerId)
        const r = b.getBoundingClientRect()
        ox = e.clientX - r.left - s.x
        oy = e.clientY - r.top - s.y
        lx = e.clientX
        ly = e.clientY
        s.drag = true
        s.vx = s.vy = s.vr = 0
        el.style.zIndex = String(++z.current)
        el.classList.add('held')
      }
      const move = (e: PointerEvent) => {
        const s = bodies.current[i]
        if (!s.drag) return
        const r = b.getBoundingClientRect()
        s.x = e.clientX - r.left - ox
        s.y = e.clientY - r.top - oy
        s.vx = s.vx * 0.5 + (e.clientX - lx) * 0.5
        s.vy = s.vy * 0.5 + (e.clientY - ly) * 0.5
        lx = e.clientX
        ly = e.clientY
      }
      const up = () => {
        const s = bodies.current[i]
        if (!s.drag) return
        s.drag = false
        el.classList.remove('held')
        const cap = 38
        s.vx = reduced ? 0 : Math.max(-cap, Math.min(cap, s.vx))
        s.vy = reduced ? 0 : Math.max(-cap, Math.min(cap, s.vy))
        s.vr = s.vx * 0.35
      }
      const key = (e: KeyboardEvent) => {
        const s = bodies.current[i]
        const step = 28
        const m: Record<string, [number, number]> = { ArrowLeft: [-step, 0], ArrowRight: [step, 0], ArrowUp: [0, -step], ArrowDown: [0, step] }
        if (m[e.key]) {
          e.preventDefault()
          s.x += m[e.key][0]
          s.y += m[e.key][1]
          s.r += m[e.key][0] / 4
          el.style.zIndex = String(++z.current)
        }
      }
      el.addEventListener('pointerdown', down)
      el.addEventListener('pointermove', move)
      el.addEventListener('pointerup', up)
      el.addEventListener('pointercancel', up)
      el.addEventListener('keydown', key)
      cleanups.push(() => {
        el.removeEventListener('pointerdown', down)
        el.removeEventListener('pointermove', move)
        el.removeEventListener('pointerup', up)
        el.removeEventListener('pointercancel', up)
        el.removeEventListener('keydown', key)
      })
    })

    return () => {
      cancelAnimationFrame(raf)
      removeEventListener('resize', place)
      cleanups.forEach((c) => c())
    }
  }, [])

  return (
    <div ref={board} className="board">
      {STICKERS.map((s, i) => (
        <div
          key={s.id}
          ref={(el) => {
            els.current[i] = el
          }}
          className="sticker"
          role="img"
          aria-label={`${s.label}. Drag to move, or focus and use the arrow keys.`}
          tabIndex={0}
        >
          {s.node}
        </div>
      ))}
    </div>
  )
}


// ===== src/patterns/sites/hotmess/styles.css =====
.site-hotmess { position: relative; min-height: 100svh; overflow-x: clip; }
.site-hotmess {
  --cream: #fff1d6;
  --ink: #111;
  --tomato: #ff4b2b;
  --lemon: #ffd23f;
  --cobalt: #2f5bff;
  --mint: #8de8b5;
  --display: 'Archivo Black', Impact, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
  --shadow: 6px 6px 0 var(--ink);
}
.site-hotmess * { box-sizing: border-box; margin: 0; padding: 0; }
.site-hotmess { background: var(--cream); scroll-behavior: smooth; overflow-x: clip; }
.site-hotmess { font-family: var(--mono); color: var(--ink); overflow-x: clip; -webkit-font-smoothing: antialiased; }
.site-hotmess a { color: inherit; text-decoration: none; }
.site-hotmess button { font: inherit; color: inherit; cursor: pointer; }
.site-hotmess::selection, .site-hotmess ::selection { background: var(--ink); color: var(--lemon); }
.site-hotmess :focus-visible { outline: 4px solid var(--cobalt); outline-offset: 3px; }
.site-hotmess h1, .site-hotmess h2, .site-hotmess h3 { font-family: var(--display); font-weight: 400; line-height: 0.92; text-transform: uppercase; }
.site-hotmess .nav { position: sticky; top: 0; z-index: 200; display: flex; justify-content: space-between; align-items: center; padding: 14px clamp(16px, 3vw, 40px); background: var(--cream); border-bottom: 4px solid var(--ink); }
.site-hotmess .logo { font-family: var(--display); font-size: 26px; letter-spacing: 0.01em; }
.site-hotmess .logo span { background: var(--ink); color: var(--lemon); padding: 0 6px; margin-left: 3px; }
.site-hotmess .nav nav { display: flex; gap: 22px; align-items: center; font-weight: 700; font-size: 14px; text-transform: uppercase; }
.site-hotmess .nav nav a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.site-hotmess .bagbtn { background: var(--lemon); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: 0 14px; min-height: 44px; font-weight: 700; text-transform: uppercase; }
.site-hotmess .bagbtn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.site-hotmess .bagbtn b { display: inline-block; min-width: 1.4ch; }
.site-hotmess .bagbtn b.pop { animation: hotmess-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes hotmess-pop { 0% { transform: scale(0.4) rotate(-20deg); } 100% { transform: none; } }
.site-hotmess .btn { display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--cream); font-weight: 700; text-transform: uppercase; font-size: 15px; letter-spacing: 0.04em; min-height: 52px; padding: 0 28px; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--tomato); transition: transform 0.12s, box-shadow 0.12s; }
.site-hotmess .btn:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--tomato); }
.site-hotmess .btn:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--tomato); }
.site-hotmess .btn.full { width: 100%; margin-top: 28px; }
.site-hotmess .hero { position: relative; min-height: calc(100svh - 76px); padding: clamp(24px, 6vh, 64px) clamp(16px, 3vw, 40px) 40px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.site-hotmess .hero h1 { font-size: clamp(96px, 26vw, 420px); letter-spacing: -0.03em; line-height: 0.78; user-select: none; }
.site-hotmess .hero h1 span { display: block; }
.site-hotmess .hero h1 .r { color: var(--tomato); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; margin-left: 0.4em; }
.site-hotmess .hero h1 span:first-child { -webkit-text-stroke: 4px var(--ink); color: var(--lemon); }
.site-hotmess .sub { position: relative; z-index: 5; margin-top: 28px; font-size: clamp(16px, 1.6vw, 22px); font-weight: 700; max-width: 26ch; line-height: 1.3; background: var(--cream); display: inline-block; padding: 4px 8px 4px 0; align-self: flex-start; }
.site-hotmess .hero .btn { position: relative; z-index: 5; margin-top: 22px; align-self: flex-start; }
.site-hotmess .drag-hint { position: relative; z-index: 5; margin-top: 18px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; }
.site-hotmess .board { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.site-hotmess .sticker { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: grab; touch-action: none; user-select: none; will-change: transform; filter: drop-shadow(5px 6px 0 rgba(17, 17, 17, 0.9)); transition: filter 0.15s; }
.site-hotmess .sticker.held { cursor: grabbing; filter: drop-shadow(10px 12px 0 rgba(17, 17, 17, 0.9)); }
.site-hotmess .sticker svg { width: 100%; height: 100%; display: block; pointer-events: none; overflow: visible; }
.site-hotmess .sticker:focus-visible { outline-offset: 6px; }
.site-hotmess .strip { overflow: hidden; border-block: 4px solid var(--ink); padding: 12px 0; font-family: var(--display); font-size: clamp(22px, 3vw, 40px); white-space: nowrap; text-transform: uppercase; }
.site-hotmess .strip.a { background: var(--lemon); transform: rotate(-1.4deg); margin: 3vh -2vw; }
.site-hotmess .strip.b { background: var(--ink); color: var(--lemon); transform: rotate(1.2deg); margin: 3vh -2vw; }
.site-hotmess .strip > div { display: flex; width: max-content; animation: hotmess-marq 26s linear infinite; }
.site-hotmess .strip.b > div { animation-direction: reverse; animation-duration: 32s; }
.site-hotmess .strip span { padding-right: 1ch; }
@keyframes hotmess-marq { to { transform: translateX(-50%); } }
.site-hotmess .beans { padding: 12vh clamp(16px, 3vw, 40px) 8vh; }
.site-hotmess .beans h2 { font-size: clamp(44px, 8vw, 128px); }
.site-hotmess .beans h2 span { display: block; color: var(--tomato); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.site-hotmess .lineup { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; gap: 28px; margin-top: 7vh; align-items: stretch; }
.site-hotmess .bean { border: 4px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); padding: clamp(18px, 2.4vw, 34px); display: flex; flex-direction: column; gap: 16px; transition: transform 0.2s, box-shadow 0.2s; }
.site-hotmess .bean:hover { transform: translate(-4px, -4px) rotate(-0.6deg); box-shadow: 14px 14px 0 var(--ink); }
.site-hotmess .bean.tomato { background: var(--tomato); grid-row: 1 / 3; }
.site-hotmess .bean.lemon { background: var(--lemon); transform: rotate(0.8deg); }
.site-hotmess .bean.mint { background: var(--mint); transform: rotate(-0.8deg); }
.site-hotmess .bean:hover.lemon, .site-hotmess .bean:hover.mint { transform: translate(-4px, -4px) rotate(0deg); }
.site-hotmess .bean h3 { font-size: clamp(30px, 4vw, 64px); }
.site-hotmess .bean.big h3 { font-size: clamp(54px, 8vw, 130px); }
.site-hotmess .bean p { font-weight: 700; font-size: clamp(14px, 1.3vw, 18px); line-height: 1.35; max-width: 28ch; }
.site-hotmess .bean.big p { font-size: clamp(16px, 1.8vw, 24px); }
.site-hotmess .buy { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; }
.site-hotmess .buy span { font-family: var(--display); font-size: clamp(30px, 3vw, 48px); }
.site-hotmess .buy button { background: var(--ink); color: var(--cream); border: 0; min-height: 48px; padding: 0 20px; font-weight: 700; text-transform: uppercase; font-size: 14px; box-shadow: 4px 4px 0 var(--cream); }
.site-hotmess .buy button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--cream); }
.site-hotmess .meter { display: flex; gap: 6px; }
.site-hotmess .meter i { width: 30px; height: 14px; border: 3px solid var(--ink); background: transparent; transform: skewX(-18deg); }
.site-hotmess .meter i.on { background: var(--ink); }
.site-hotmess .rise { opacity: 0; transform: translateY(40px); transition: opacity 0.7s, transform 0.7s cubic-bezier(0.2, 0.9, 0.2, 1); }
.site-hotmess .rise.in { opacity: 1; transform: none; }
.site-hotmess .bean.lemon.rise.in { transform: rotate(0.8deg); }
.site-hotmess .bean.mint.rise.in { transform: rotate(-0.8deg); }
.site-hotmess .build { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); padding: 10vh clamp(16px, 3vw, 40px); align-items: center; }
.site-hotmess .controls h2 { font-size: clamp(54px, 9vw, 150px); margin-bottom: 36px; }
.site-hotmess .lbl { display: block; font-weight: 700; text-transform: uppercase; font-size: 14px; margin: 24px 0 10px; letter-spacing: 0.04em; }
.site-hotmess .lbl b { background: var(--ink); color: var(--lemon); padding: 2px 8px; }
.site-hotmess input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; }
.site-hotmess input[type='range']::-webkit-slider-runnable-track { height: 18px; background: var(--cream); border: 4px solid var(--ink); }
.site-hotmess input[type='range']::-moz-range-track { height: 14px; background: var(--cream); border: 4px solid var(--ink); }
.site-hotmess input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 44px; margin-top: -17px; background: var(--tomato); border: 4px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.site-hotmess input[type='range']::-moz-range-thumb { width: 26px; height: 36px; background: var(--tomato); border: 4px solid var(--ink); border-radius: 0; box-shadow: 4px 4px 0 var(--ink); }
.site-hotmess .ticks { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; padding: 0 12px; }
.site-hotmess .seg { display: flex; flex-wrap: wrap; gap: 10px; }
.site-hotmess .seg button { background: var(--cream); border: 3px solid var(--ink); min-height: 48px; padding: 0 18px; font-weight: 700; text-transform: uppercase; font-size: 13px; }
.site-hotmess .seg button.on { background: var(--ink); color: var(--lemon); box-shadow: 4px 4px 0 var(--tomato); }
.site-hotmess .preview { display: grid; place-items: center; min-height: 440px; }
.site-hotmess .bagshape { position: relative; width: min(100%, 330px); aspect-ratio: 0.72; border: 4px solid var(--ink); box-shadow: 12px 12px 0 var(--ink); padding: 56px 24px 24px; display: flex; flex-direction: column; gap: 16px; transform: rotate(-3deg); transition: background 0.35s, color 0.35s; }
.site-hotmess .bagshape .fold { position: absolute; top: 0; left: 0; right: 0; height: 30px; border-bottom: 4px dashed var(--ink); background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0 6px, transparent 6px 12px); }
.site-hotmess .bagshape small { font-weight: 700; letter-spacing: 0.12em; font-size: 12px; }
.site-hotmess .bagshape strong { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 3.3vw, 44px); line-height: 0.95; overflow-wrap: anywhere; animation: hotmess-swap 0.4s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes hotmess-swap { from { transform: translateY(14px) scale(0.92); opacity: 0; } }
.site-hotmess .bagshape .meter i { border-color: currentColor; }
.site-hotmess .bagshape .meter i.on { background: currentColor; }
.site-hotmess .bagshape em { font-style: normal; font-weight: 700; font-size: 13px; text-transform: uppercase; margin-top: auto; }
.site-hotmess .stamp { position: absolute; right: -16px; bottom: 54px; background: var(--lemon); color: var(--ink); border: 4px solid var(--ink); padding: 8px 12px; font-family: var(--display); font-size: 20px; transform: rotate(10deg); }
.site-hotmess .foot { background: var(--ink); color: var(--cream); padding: 14vh clamp(16px, 3vw, 40px) 8vh; }
.site-hotmess .foot h2 { font-size: clamp(64px, 14vw, 240px); }
.site-hotmess .foot h2 span { font-family: var(--mono); font-weight: 700; font-size: clamp(16px, 2vw, 28px); text-transform: none; color: var(--lemon); }
.site-hotmess .foot p { margin-top: 5vh; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.75; }
.site-hotmess .toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 140%); opacity: 0; pointer-events: none; z-index: 300; background: var(--lemon); border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding: 12px 18px; font-weight: 700; font-size: 14px; transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.2s; max-width: calc(100vw - 32px); }
.site-hotmess .toast.on { transform: translate(-50%, 0); opacity: 1; }
@media (max-width: 860px) {
.site-hotmess .nav nav a { display: none; }
.site-hotmess .lineup { grid-template-columns: 1fr; }
.site-hotmess .bean.tomato { grid-row: auto; }
.site-hotmess .build { grid-template-columns: 1fr; }
.site-hotmess .preview { min-height: 380px; }
.site-hotmess .hero h1 .r { margin-left: 0.2em; }
.site-hotmess .meter i { width: 24px; }
}
@media (prefers-reduced-motion: reduce) {
.site-hotmess { scroll-behavior: auto; }
.site-hotmess .strip > div, .site-hotmess .bagbtn b.pop, .site-hotmess .bagshape strong { animation: none; }
.site-hotmess .rise { opacity: 1; transform: none; transition: none; }
.site-hotmess .bean.lemon.rise { transform: rotate(0.8deg); }
.site-hotmess .bean.mint.rise { transform: rotate(-0.8deg); }
}
```


## Helper it imports: `src/patterns/sites/_shared.ts`

```ts
import { useEffect, type RefObject } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import Lenis from 'lenis'

/* Helpers shared by the whole-site demos in this folder. They are full pages, so they scroll the window,
   and they must coexist with UI Lab's own hash router and clean up completely when you leave. */

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/**
 * Smooth scroll (Lenis, driven by GSAP's ticker so ScrollTrigger stays in sync) plus in-page anchor links.
 * Anchor clicks are handled here instead of by the browser: UI Lab's router lives in the URL hash,
 * so a real `#section` navigation would be read as a route change.
 * Everything is torn down on unmount.
 */
export function useSiteScroll(root: RefObject<HTMLElement | null>, { smooth = true, lerp = 0.1 } = {}) {
  useEffect(() => {
    const el = root.current
    if (!el) return
    let lenis: Lenis | null = null
    let tick: ((t: number) => void) | null = null
    if (smooth && !reducedMotion()) {
      lenis = new Lenis({ lerp })
      lenis.on('scroll', ScrollTrigger.update)
      tick = (t: number) => lenis!.raf(t * 1000)
      gsap.ticker.add(tick)
      gsap.ticker.lagSmoothing(0)
    }
    const onClick = (e: MouseEvent) => {
      const a = (e.target as HTMLElement).closest<HTMLAnchorElement>('a[href^="#"]')
      if (!a || !el.contains(a)) return
      const id = a.getAttribute('href')!.slice(1)
      if (id.startsWith('/')) return // a UI Lab route, let it through
      e.preventDefault()
      const target = id ? el.querySelector<HTMLElement>(`#${CSS.escape(id)}`) : null
      if (!target) return
      if (lenis) lenis.scrollTo(target)
      else target.scrollIntoView({ behavior: 'smooth' })
    }
    el.addEventListener('click', onClick)
    return () => {
      el.removeEventListener('click', onClick)
      if (tick) gsap.ticker.remove(tick)
      gsap.ticker.lagSmoothing(500, 33) // GSAP's default
      lenis?.destroy()
      ScrollTrigger.getAll().forEach((t) => t.kill())
    }
  }, [root, smooth, lerp])
}
```

# Site: ABYSS (cinematic descent)
> An ocean descent where scroll is depth. One full-screen fragment shader draws light shafts, marine snow and bioluminescence; a depth gauge and a pointer lantern complete it.
- **Category:** Sites
- **Slug:** site-abyss
- **Tags:** site, full page, cinematic, immersive, webgl, glsl, shader, scroll, depth, three, lenis
- **Dependencies:** three, lenis, @fontsource-variable/unbounded, @fontsource-variable/hanken-grotesk, sites/_shared.ts
- **Live demo:** https://ui-lab-weld.vercel.app/#/site-abyss
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sites/abyss/index.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sites/abyss/index.tsx
- **Raw files:** https://ui-lab-weld.vercel.app/raw/sites/abyss/index.tsx, https://ui-lab-weld.vercel.app/raw/sites/abyss/shader.ts, https://ui-lab-weld.vercel.app/raw/sites/abyss/styles.css

## When to use
- Immersive storytelling, launches, anything where progress through the page is the story
- Reference for a single-shader scene driven by scroll, with ink colour that adapts to the water behind it

## Accessibility

Canvas is aria-hidden; all content is real text with readable ink at every depth. Reduced motion slows the shader and removes smooth scrolling.


## Source
Files: `src/patterns/sites/abyss/index.tsx`, `src/patterns/sites/abyss/shader.ts`, `src/patterns/sites/abyss/styles.css`
```tsx
// ===== src/patterns/sites/abyss/index.tsx =====
import { useEffect, useRef } from 'react'
import * as THREE from 'three'
import '@fontsource-variable/unbounded'
import '@fontsource-variable/hanken-grotesk'
import './styles.css'
import { reducedMotion } from '../_shared'
import Lenis from 'lenis'
import { fragment, vertex } from './shader'

const reduced = reducedMotion()

/* Scroll fraction at which each zone's text sits, paired with its real depth in metres.
   Between stops depth is interpolated linearly, so the counter always agrees with the words on screen. */
const ZONES = [
  { f: 0.0, m: 0, name: 'Sunlight', title: 'Abyss', body: 'Ten thousand nine hundred metres of ocean, and nobody lives at the top of it. Scroll to descend.', side: 'l' },
  { f: 0.2, m: 200, name: 'Twilight', title: 'The light gives up.', body: 'Below 200 metres there is too little sun for plants to grow. What is left is a blue that gets darker every metre.', side: 'r' },
  { f: 0.42, m: 1000, name: 'Midnight', title: 'No sun reaches here.', body: 'At 1,000 metres the dark is complete. Many animals make their own light, to hunt, to hide and to talk.', side: 'l' },
  { f: 0.66, m: 4000, name: 'Abyss', title: 'Cold, still, crushing.', body: 'Water just above freezing, soft mud for a floor, and pressure hundreds of times what you feel at the surface.', side: 'r' },
  { f: 0.9, m: 10935, name: 'Hadal', title: 'Challenger Deep.', body: 'The deepest known point in the ocean. The pressure is more than a thousand times the surface. Something still glows.', side: 'l' },
]
const TOTAL_SVH = 760 // page height in svh; text blocks are positioned along it

function metersAt(p: number) {
  for (let i = 0; i < ZONES.length - 1; i++) {
    const a = ZONES[i]
    const b = ZONES[i + 1]
    if (p <= b.f) return a.m + ((p - a.f) / (b.f - a.f)) * (b.m - a.m)
  }
  return ZONES[ZONES.length - 1].m
}
const fmt = (n: number) => Math.round(n).toLocaleString('en-US')

export default function AbyssSite() {
  const root = useRef<HTMLDivElement>(null)
  const canvasHost = useRef<HTMLDivElement>(null)
  const meter = useRef<HTMLSpanElement>(null)
  const zoneLabel = useRef<HTMLSpanElement>(null)
  const marker = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const lenis = reduced ? null : new Lenis({ lerp: 0.075 })
    const host = canvasHost.current!
    const renderer = new THREE.WebGLRenderer({ antialias: false, powerPreference: 'high-performance' })
    const cap = matchMedia('(max-width: 800px)').matches ? 1.25 : 1.6
    renderer.setPixelRatio(Math.min(devicePixelRatio, cap))
    host.appendChild(renderer.domElement)

    const scene = new THREE.Scene()
    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1)
    const uniforms = {
      uRes: { value: new THREE.Vector2(1, 1) },
      uTime: { value: 0 },
      uP: { value: 0 },
      uScroll: { value: 0 },
      uPtr: { value: new THREE.Vector2(0.5, 0.5) },
    }
    const mat = new THREE.ShaderMaterial({ uniforms, vertexShader: vertex, fragmentShader: fragment })
    scene.add(new THREE.Mesh(new THREE.PlaneGeometry(2, 2), mat))

    const resize = () => {
      renderer.setSize(innerWidth, innerHeight)
      const b = renderer.getDrawingBufferSize(new THREE.Vector2())
      uniforms.uRes.value.copy(b)
    }
    resize()
    addEventListener('resize', resize)

    const ptr = { x: 0.5, y: 0.5 }
    const onMove = (e: PointerEvent) => {
      ptr.x = e.clientX / innerWidth
      ptr.y = 1 - e.clientY / innerHeight
    }
    addEventListener('pointermove', onMove)

    // smoothed state
    let p = 0
    let sy = 0
    let m = 0
    let last = performance.now()
    let raf = 0
    let lastZone = -1
    const frame = (now: number) => {
      const dt = Math.min(0.05, (now - last) / 1000)
      last = now
      lenis?.raf(now)
      const max = document.documentElement.scrollHeight - innerHeight
      const target = max > 0 ? scrollY / max : 0
      const k = 1 - Math.exp(-dt * 5)
      p += (target - p) * k
      sy += (scrollY - sy) * k
      m += (metersAt(target) - m) * k

      uniforms.uTime.value += dt * (reduced ? 0.25 : 1)
      uniforms.uP.value = p
      uniforms.uScroll.value = sy
      uniforms.uPtr.value.x += (ptr.x - uniforms.uPtr.value.x) * (1 - Math.exp(-dt * 6))
      uniforms.uPtr.value.y += (ptr.y - uniforms.uPtr.value.y) * (1 - Math.exp(-dt * 6))
      renderer.render(scene, camera)

      // ink flips from deep navy (bright water) to pale (dark water) so text is readable at every depth
      const t = Math.min(1, Math.max(0, (p - 0.02) / 0.16))
      const mixc = (a: number[], b: number[]) => a.map((v, i) => Math.round(v + (b[i] - v) * t)).join(',')
      const rs = root.current!.style
      rs.setProperty('--fg', `rgb(${mixc([5, 38, 54], [232, 246, 246])})`)
      rs.setProperty('--muted', `rgba(${mixc([5, 38, 54], [232, 246, 246])},0.78)`)
      rs.setProperty('--glow', `rgb(${mixc([0, 92, 104], [94, 242, 221])})`)
      rs.setProperty('--rail', `rgba(${mixc([5, 38, 54], [232, 246, 246])},0.4)`)

      if (meter.current) meter.current.textContent = fmt(m)
      if (marker.current) marker.current.style.top = `${Math.min(1, Math.max(0, p)) * 100}%`
      let z = 0
      ZONES.forEach((zn, i) => {
        if (target >= zn.f - 0.07) z = i
      })
      if (z !== lastZone && zoneLabel.current) {
        lastZone = z
        zoneLabel.current.textContent = ZONES[z].name
      }
      raf = requestAnimationFrame(frame)
    }
    raf = requestAnimationFrame(frame)

    // text blocks surface and sink as they cross the viewport
    const io = new IntersectionObserver((es) => es.forEach((e) => e.target.classList.toggle('in', e.isIntersecting)), { rootMargin: '-18% 0px -18% 0px' })
    document.querySelectorAll('.zone').forEach((el) => io.observe(el))

    return () => {
      cancelAnimationFrame(raf)
      io.disconnect()
      removeEventListener('resize', resize)
      removeEventListener('pointermove', onMove)
      lenis?.destroy()
      renderer.dispose()
      host.removeChild(renderer.domElement)
    }
  }, [])

  return (
    <div ref={root} className="site-abyss">
      <div ref={canvasHost} className="sea" aria-hidden="true" />

      <aside className="gauge" aria-label="Depth gauge">
        <div className="readout">
          <span ref={meter}>0</span><small>m</small>
          <em ref={zoneLabel}>Sunlight</em>
        </div>
        <div className="rail" aria-hidden="true">
          {ZONES.map((z) => (
            <i key={z.name} style={{ top: `${z.f * 100}%` }}><b>{z.name}</b></i>
          ))}
          <div ref={marker} className="mk" />
        </div>
      </aside>

      <main style={{ height: `${TOTAL_SVH}svh` }}>
        {ZONES.map((z, i) => (
          <section key={z.name} className={`zone ${z.side} ${i === 0 ? 'first' : ''}`} style={{ top: `${(z.f * (TOTAL_SVH - 100)).toFixed(1)}svh` }}>
            <div className="inner">
              <p className="depth">{fmt(z.m)} m · {z.name}</p>
              {i === 0 ? <h1>{z.title}</h1> : <h2>{z.title}</h2>}
              <p className="body">{z.body}</p>
              {i === 0 && <p className="hint">Move the pointer. Your lantern lights the snow.</p>}
            </div>
          </section>
        ))}

        <section className="zone end" style={{ top: `${TOTAL_SVH - 100}svh` }}>
          <button onClick={() => scrollTo({ top: 0, behavior: reduced ? 'auto' : 'smooth' })}>Return to the surface</button>
          <p className="fine">Demo site. Depth figures are approximate.</p>
        </section>
      </main>
    </div>
  )
}


// ===== src/patterns/sites/abyss/shader.ts =====
/* Full-screen fragment shader: the whole ocean is one draw call.
   Inputs: uP (scroll progress 0..1, drives the colour grade and which layers exist), uScroll (px, parallax),
   uPtr (pointer in 0..1, a lantern that lights marine snow), uTime. */

export const vertex = /* glsl */ `
varying vec2 vUv;
void main() {
  vUv = uv;
  gl_Position = vec4(position.xy, 0.0, 1.0);
}
`

export const fragment = /* glsl */ `
precision highp float;
varying vec2 vUv;
uniform vec2 uRes;
uniform float uTime;
uniform float uP;
uniform float uScroll;
uniform vec2 uPtr;

float hash(vec2 p) {
  p = fract(p * vec2(123.34, 456.21));
  p += dot(p, p + 45.32);
  return fract(p.x * p.y);
}
float noise(vec2 p) {
  vec2 i = floor(p), f = fract(p);
  f = f * f * (3.0 - 2.0 * f);
  return mix(mix(hash(i), hash(i + vec2(1, 0)), f.x), mix(hash(i + vec2(0, 1)), hash(i + vec2(1, 1)), f.x), f.y);
}
float fbm(vec2 p) {
  float v = 0.0, a = 0.5;
  for (int i = 0; i < 4; i++) { v += a * noise(p); p *= 2.02; a *= 0.5; }
  return v;
}

// colour grade by zone: sunlit -> twilight -> midnight -> abyss -> hadal
vec3 grade(float p) {
  vec3 c0 = vec3(0.30, 0.86, 0.88);
  vec3 c1 = vec3(0.04, 0.42, 0.66);
  vec3 c2 = vec3(0.02, 0.13, 0.32);
  vec3 c3 = vec3(0.008, 0.045, 0.13);
  vec3 c4 = vec3(0.0, 0.01, 0.035);
  vec3 c = mix(c0, c1, smoothstep(0.0, 0.2, p));
  c = mix(c, c2, smoothstep(0.2, 0.42, p));
  c = mix(c, c3, smoothstep(0.42, 0.66, p));
  c = mix(c, c4, smoothstep(0.66, 0.92, p));
  return c;
}

// marine snow: drifting specks in jittered cells, parallax by layer
float snow(vec2 q, float scale, float rate, float seed) {
  vec2 st = q * scale;
  st.y -= uScroll * 0.0011 * scale * rate;
  st.y += uTime * 0.03 * scale * rate;
  vec2 id = floor(st), f = fract(st) - 0.5;
  float h = hash(id + seed);
  vec2 o = (vec2(hash(id + seed + 1.7), hash(id + seed + 3.1)) - 0.5) * 0.6;
  float d = length(f - o);
  float r = 0.025 + 0.05 * hash(id + seed + 9.0);
  return smoothstep(r, 0.0, d) * step(0.55, h);
}

// bioluminescent orbs: slow pulses, cool colours, only deep
vec3 orbs(vec2 q, float scale, float seed, float rate) {
  vec2 st = q * scale;
  st.y -= uScroll * 0.0008 * scale * rate;
  st.x += sin(uTime * 0.2 + seed) * 0.15;
  vec2 id = floor(st), f = fract(st) - 0.5;
  float h = hash(id + seed);
  vec2 o = (vec2(hash(id + seed + 4.3), hash(id + seed + 7.7)) - 0.5) * 0.5;
  float d = length(f - o);
  float pulse = 0.55 + 0.45 * sin(uTime * (0.8 + h * 1.4) + h * 40.0);
  float glow = exp(-d * (9.0 + h * 8.0)) * step(0.72, h) * pulse;
  vec3 col = mix(vec3(0.15, 0.95, 0.85), vec3(0.55, 0.45, 1.0), hash(id + seed + 2.2));
  return col * glow;
}

void main() {
  vec2 uv = vUv;
  float aspect = uRes.x / uRes.y;
  vec2 q = (uv - 0.5) * vec2(aspect, 1.0);

  vec3 col = grade(uP);
  // vertical falloff inside the screen: lighter above, darker below
  col *= 0.78 + 0.34 * uv.y;

  // sunlight shafts, fading with depth
  float lightAmt = 1.0 - smoothstep(0.0, 0.34, uP);
  float a = q.x * 2.4 + fbm(vec2(q.x * 1.6, uTime * 0.08)) * 1.6;
  float shafts = pow(max(0.0, sin(a * 5.0 + uTime * 0.25) * 0.5 + 0.5), 3.0) * smoothstep(-0.2, 0.7, uv.y);
  float cau = fbm(q * 3.0 + vec2(uTime * 0.05, -uTime * 0.04));
  col += vec3(0.55, 0.95, 0.9) * (shafts * 0.28 + cau * 0.10) * lightAmt;

  // lantern: a soft pool of light at the pointer once it gets dark
  vec2 pq = (uPtr - 0.5) * vec2(aspect, 1.0);
  float dl = length(q - pq);
  float dark = smoothstep(0.12, 0.5, uP);
  float lantern = exp(-dl * 4.2) * dark;
  col += vec3(0.30, 0.55, 0.62) * lantern * 0.22;

  // marine snow in three depth layers; the lantern makes them bright
  float s = 0.0;
  s += snow(q, 5.0, 0.55, 1.0) * 0.55;
  s += snow(q, 9.0, 1.0, 5.0) * 0.8;
  s += snow(q, 16.0, 1.7, 9.0) * 1.0;
  float snowAmt = 0.35 + 0.65 * smoothstep(0.08, 0.5, uP);
  col += vec3(0.75, 0.9, 0.95) * s * snowAmt * (0.35 + lantern * 5.5) * (0.5 + 0.5 * lightAmt);

  // living light, from the midnight zone down; it gathers toward the pointer
  float deep = smoothstep(0.38, 0.66, uP);
  vec3 b = orbs(q, 3.2, 11.0, 0.7) + orbs(q, 5.5, 23.0, 1.1) * 0.8 + orbs(q, 8.0, 37.0, 1.6) * 0.6;
  col += b * deep * (0.55 + lantern * 2.2);

  // vignette + faint grain
  float v = smoothstep(1.15, 0.25, length(q * vec2(0.8, 1.0)));
  col *= mix(0.55, 1.0, v);
  col += (hash(uv * uRes + uTime) - 0.5) * 0.018;

  gl_FragColor = vec4(col, 1.0);
}
`


// ===== src/patterns/sites/abyss/styles.css =====
.site-abyss { position: relative; min-height: 100svh; overflow-x: clip; }
.site-abyss {
  
  --fg: rgb(5, 38, 54);
  --muted: rgba(5, 38, 54, 0.78);
  --glow: rgb(0, 92, 104);
  --rail: rgba(5, 38, 54, 0.4);
  --display: 'Unbounded Variable', system-ui, sans-serif;
  --body: 'Hanken Grotesk Variable', system-ui, sans-serif;
}
.site-abyss * { box-sizing: border-box; margin: 0; padding: 0; }
.site-abyss { background: #041a2c; }
.site-abyss { font-family: var(--body); color: var(--fg); -webkit-font-smoothing: antialiased; overflow-x: clip; }
.site-abyss::selection, .site-abyss ::selection { background: var(--glow); color: #02161c; }
.site-abyss :focus-visible { outline: 2px solid var(--glow); outline-offset: 4px; }
.site-abyss .sea { position: fixed; inset: 0; z-index: 0; }
.site-abyss .sea canvas { display: block; width: 100% !important; height: 100% !important; }
.site-abyss main { position: relative; z-index: 2; }
.site-abyss .zone { position: absolute; left: 0; right: 0; height: 100svh; display: flex; align-items: center; padding: 0 clamp(20px, 7vw, 120px); }
.site-abyss .zone.l { justify-content: flex-start; }
.site-abyss .zone.r { justify-content: flex-end; text-align: right; padding-right: clamp(150px, 17vw, 260px); }
.site-abyss .inner { max-width: min(560px, 100%); opacity: 0; filter: blur(14px); transform: translateY(26px); transition: opacity 1.1s ease, filter 1.1s ease, transform 1.1s cubic-bezier(0.2, 0.9, 0.2, 1); }
.site-abyss .zone.in .inner { opacity: 1; filter: none; transform: none; }
.site-abyss .zone.first .inner { animation: abyss-surface 1.6s 0.25s cubic-bezier(0.2, 0.9, 0.2, 1) both; }
@keyframes abyss-surface { from { opacity: 0; filter: blur(14px); transform: translateY(26px); } to { opacity: 1; filter: none; transform: none; } }
.site-abyss .depth { font-family: var(--body); font-weight: 600; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--glow); margin-bottom: 22px; }
.site-abyss h1 { font-family: var(--display); font-weight: 800; font-size: clamp(64px, 14vw, 220px); line-height: 0.9; letter-spacing: -0.05em; text-transform: uppercase; margin-left: -0.04em; }
.site-abyss h2 { font-family: var(--display); font-weight: 700; font-size: clamp(34px, 5.2vw, 78px); line-height: 1; letter-spacing: -0.04em; }
.site-abyss .body { margin-top: 26px; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; color: var(--muted); max-width: 34ch; }
.site-abyss .zone.r .body { margin-left: auto; }
.site-abyss .hint { margin-top: 34px; font-size: 13px; color: var(--muted); border-left: 2px solid var(--glow); padding-left: 12px; }
.site-abyss .zone.first .inner { max-width: min(900px, 100%); }
.site-abyss .zone.end { flex-direction: column; justify-content: center; align-items: center; gap: 22px; }
.site-abyss .zone.end button { background: transparent; color: var(--fg); border: 1px solid rgba(94, 242, 221, 0.6); border-radius: 999px; min-height: 56px; padding: 0 34px; font: 600 15px var(--body); letter-spacing: 0.06em; cursor: pointer; transition: background 0.3s, color 0.3s, box-shadow 0.3s; box-shadow: 0 0 40px rgba(94, 242, 221, 0.15); }
.site-abyss .zone.end button:hover { background: var(--glow); color: #02161c; box-shadow: 0 0 60px rgba(94, 242, 221, 0.45); }
.site-abyss .fine { font-size: 12px; color: var(--muted); }
.site-abyss .gauge { position: fixed; z-index: 10; right: clamp(14px, 2.4vw, 36px); top: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 18px; pointer-events: none; }
.site-abyss .readout { text-align: right; display: grid; justify-items: end; }
.site-abyss .readout span { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 3.2vw, 46px); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.site-abyss .readout small { font-size: 12px; letter-spacing: 0.2em; color: var(--muted); margin-top: -2px; }
.site-abyss .readout em { font-style: normal; margin-top: 10px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--glow); }
.site-abyss .rail { position: relative; width: 1px; height: 38svh; background: var(--rail); margin-right: 5px; }
.site-abyss .rail i { position: absolute; right: -4px; width: 9px; height: 1px; background: var(--fg); opacity: 0.6; }
.site-abyss .rail i b { position: absolute; right: 16px; top: -7px; font-weight: 500; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.site-abyss .mk { position: absolute; left: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 16px var(--glow), 0 0 40px var(--glow); }
@media (max-width: 800px) {
.site-abyss .zone.r { text-align: left; justify-content: flex-start; }
.site-abyss .zone.r .body { margin-left: 0; }
.site-abyss .zone { padding-right: 70px; }
.site-abyss .rail i b { display: none; }
.site-abyss .rail { height: 30svh; }
.site-abyss .gauge { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.site-abyss .inner { transition: opacity 0.4s; filter: none; transform: none; }
}
```


## Helper it imports: `src/patterns/sites/_shared.ts`

```ts
import { useEffect, type RefObject } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import Lenis from 'lenis'

/* Helpers shared by the whole-site demos in this folder. They are full pages, so they scroll the window,
   and they must coexist with UI Lab's own hash router and clean up completely when you leave. */

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/**
 * Smooth scroll (Lenis, driven by GSAP's ticker so ScrollTrigger stays in sync) plus in-page anchor links.
 * Anchor clicks are handled here instead of by the browser: UI Lab's router lives in the URL hash,
 * so a real `#section` navigation would be read as a route change.
 * Everything is torn down on unmount.
 */
export function useSiteScroll(root: RefObject<HTMLElement | null>, { smooth = true, lerp = 0.1 } = {}) {
  useEffect(() => {
    const el = root.current
    if (!el) return
    let lenis: Lenis | null = null
    let tick: ((t: number) => void) | null = null
    if (smooth && !reducedMotion()) {
      lenis = new Lenis({ lerp })
      lenis.on('scroll', ScrollTrigger.update)
      tick = (t: number) => lenis!.raf(t * 1000)
      gsap.ticker.add(tick)
      gsap.ticker.lagSmoothing(0)
    }
    const onClick = (e: MouseEvent) => {
      const a = (e.target as HTMLElement).closest<HTMLAnchorElement>('a[href^="#"]')
      if (!a || !el.contains(a)) return
      const id = a.getAttribute('href')!.slice(1)
      if (id.startsWith('/')) return // a UI Lab route, let it through
      e.preventDefault()
      const target = id ? el.querySelector<HTMLElement>(`#${CSS.escape(id)}`) : null
      if (!target) return
      if (lenis) lenis.scrollTo(target)
      else target.scrollIntoView({ behavior: 'smooth' })
    }
    el.addEventListener('click', onClick)
    return () => {
      el.removeEventListener('click', onClick)
      if (tick) gsap.ticker.remove(tick)
      gsap.ticker.lagSmoothing(500, 33) // GSAP's default
      lenis?.destroy()
      ScrollTrigger.getAll().forEach((t) => t.kill())
    }
  }, [root, smooth, lerp])
}
```

# Site: MERIDIAN NIGHT RAIL (departures board)
> A night-train brand set as a station departure hall. A split-flap board that resolves letter by letter, a route map whose line draws itself with a train riding it, a berth comparison table and a ticket that prints.
- **Category:** Sites
- **Slug:** site-departures
- **Tags:** site, full page, niche world, departures board, split flap, transit, timetable, svg map, offset-path, ticket, signage
- **Dependencies:** @fontsource/barlow-condensed, @fontsource-variable/hanken-grotesk, @fontsource-variable/jetbrains-mono, sites/_shared.ts
- **Live demo:** https://ui-lab-weld.vercel.app/#/site-departures
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sites/departures/index.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sites/departures/index.tsx
- **Raw files:** https://ui-lab-weld.vercel.app/raw/sites/departures/index.tsx, https://ui-lab-weld.vercel.app/raw/sites/departures/Board.tsx, https://ui-lab-weld.vercel.app/raw/sites/departures/styles.css

## When to use
- Travel, transit, events and schedule-driven brands
- Reference for a split-flap component, SVG route drawing with CSS offset-path, and a form whose result is an object (the ticket)

## Accessibility

The board is role=img with a visually hidden table of the same data; the route list is a listbox of buttons; the comparison is a real table with scoped headers; the ticket result is a polite live region; flaps, line-draw, train and ticket print are all disabled under reduced motion.


## Source
Files: `src/patterns/sites/departures/index.tsx`, `src/patterns/sites/departures/Board.tsx`, `src/patterns/sites/departures/styles.css`
```tsx
// ===== src/patterns/sites/departures/index.tsx =====
import { useEffect, useMemo, useRef, useState } from 'react'
import '@fontsource/barlow-condensed/500.css'
import '@fontsource/barlow-condensed/700.css'
import '@fontsource-variable/hanken-grotesk'
import '@fontsource-variable/jetbrains-mono'
import './styles.css'
import { reducedMotion, useSiteScroll } from '../_shared'
import { Board } from './Board'

/*
 * MERIDIAN NIGHT RAIL: a night-train brand set as a departure hall. World 9 (Departures Board).
 * Signature: the board resolves letter by letter on load and again whenever you pick a route; the route line
 * on the map draws itself and the train rides it. All content is real text; the board mirrors a table.
 */

const reduced = reducedMotion()

type Route = { id: string; from: string; to: string; dep: string; arr: string; dur: string; km: number; from_: [number, number]; to_: [number, number]; via: [number, number][]; price: [number, number, number]; status: string }
const ROUTES: Route[] = [
  { id: 'ber-vie', from: 'BERLIN', to: 'VIENNA', dep: '21:40', arr: '07:12', dur: '9H32', km: 680, from_: [60, 60], to_: [330, 210], via: [[150, 70], [230, 120]], price: [59, 99, 189], status: 'ON TIME' },
  { id: 'vie-rom', from: 'VIENNA', to: 'ROME', dep: '19:50', arr: '08:20', dur: '12H30', km: 1010, from_: [330, 210], to_: [300, 330], via: [[340, 260], [320, 300]], price: [69, 119, 219], status: 'BOARDING' },
  { id: 'ams-zrh', from: 'AMSTERDAM', to: 'ZURICH', dep: '20:35', arr: '08:05', dur: '11H30', km: 830, from_: [20, 120], to_: [200, 220], via: [[60, 160], [130, 200]], price: [64, 109, 199], status: 'DELAYED' },
  { id: 'pra-war', from: 'PRAGUE', to: 'WARSAW', dep: '22:15', arr: '06:40', dur: '8H25', km: 640, from_: [200, 100], to_: [390, 90], via: [[260, 110], [330, 100]], price: [49, 89, 169], status: 'ON TIME' },
  { id: 'mun-bud', from: 'MUNICH', to: 'BUDAPEST', dep: '21:05', arr: '07:30', dur: '10H25', km: 700, from_: [210, 180], to_: [390, 200], via: [[270, 190], [330, 190]], price: [54, 94, 179], status: 'ON TIME' },
]
const STATIONS: [string, number, number][] = [['BERLIN', 60, 60], ['PRAGUE', 200, 100], ['WARSAW', 390, 90], ['AMSTERDAM', 20, 120], ['MUNICH', 210, 180], ['BUDAPEST', 390, 200], ['ZURICH', 200, 220], ['VIENNA', 330, 210], ['ROME', 300, 330]]
const BERTHS = ['Seat', 'Couchette', 'Sleeper'] as const

function useClock() {
  const [now, setNow] = useState(() => new Date())
  useEffect(() => {
    const id = window.setInterval(() => setNow(new Date()), 1000)
    return () => window.clearInterval(id)
  }, [])
  return now
}

export default function DeparturesSite() {
  const root = useRef<HTMLDivElement>(null)
  const now = useClock()
  const [sel, setSel] = useState(0)
  const [berth, setBerth] = useState(1)
  const [ticket, setTicket] = useState<null | { route: Route; berth: number; seat: string }>(null)
  const [form, setForm] = useState({ route: ROUTES[0].id, berth: 1, date: '2026-11-14' })
  const route = ROUTES[sel]

  useSiteScroll(root, { smooth: false })

  const heroRows = useMemo(() => ROUTES.map((r) => [r.dep, r.to, String(1 + ROUTES.indexOf(r) * 2), r.status]), [])
  const detailRows = useMemo(() => [[route.from, route.to, route.dep], ['ARRIVES', route.arr, route.dur]], [route])

  // next departure countdown (to the next whole minute that ends in :40, purely illustrative)
  const secs = 59 - now.getSeconds()
  const mins = (39 - now.getMinutes() + 60) % 60
  const countdown = `00:${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`
  const clock = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`

  const book = (e: React.FormEvent) => {
    e.preventDefault()
    const r = ROUTES.find((x) => x.id === form.route)!
    setTicket({ route: r, berth: form.berth, seat: `${12 + (r.km % 20)}${'ABCD'[r.km % 4]}` })
  }

  return (
    <div className="site-departures" ref={root}>
      <header className="nav">
        <a href="#top" className="logo">MERIDIAN<span>NIGHT RAIL</span></a>
        <nav aria-label="Sections">
          <a href="#routes">Routes</a>
          <a href="#berths">Berths</a>
          <a href="#book" className="cta-sm">Book</a>
        </nav>
        <time className="clock" dateTime={clock} aria-label={`Local time ${clock}`}>{clock}</time>
      </header>

      <main id="top">
        <section className="hero" aria-labelledby="h1">
          <div className="hero-copy">
            <p className="tag">Departures · Hall 2</p>
            <h1 id="h1">The night<br />is the route.</h1>
            <p className="lede">Board at dusk in one capital, wake in the next. Eleven night trains, forty-one stations, no airports.</p>
            <a className="cta" href="#book">Book a berth</a>
          </div>
          <div className="hero-board">
            <Board rows={heroRows} cols={[5, 9, 2, 8]} reduced={reduced} label="Departure board: five night trains tonight" />
            <table className="sr-only">
              <caption>Tonight&apos;s departures</caption>
              <thead><tr><th>Time</th><th>Destination</th><th>Platform</th><th>Status</th></tr></thead>
              <tbody>{heroRows.map((r) => <tr key={r[1]}>{r.map((c, i) => <td key={i}>{c}</td>)}</tr>)}</tbody>
            </table>
          </div>
        </section>

        <section className="routes" id="routes" aria-labelledby="h2r">
          <div className="routes-head">
            <h2 id="h2r">Pick a line.</h2>
            <p>Select a route to see it drawn and the board resolve again.</p>
          </div>
          <div className="routes-grid">
            <ul className="route-list" aria-label="Routes">
              {ROUTES.map((r, i) => (
                <li key={r.id}>
                  <button className={i === sel ? 'on' : ''} aria-pressed={i === sel} onClick={() => setSel(i)}>
                    <span className="r-time">{r.dep}</span>
                    <span className="r-name">{r.from} → {r.to}</span>
                    <span className="r-dur">{r.dur}</span>
                  </button>
                </li>
              ))}
            </ul>
            <div className="map-wrap">
              <svg viewBox="0 0 490 360" className="map" role="img" aria-label={`Map of the ${route.from} to ${route.to} line`}>
                {ROUTES.map((r, i) => (
                  <polyline key={r.id} points={[r.from_, ...r.via, r.to_].map((p) => p.join(',')).join(' ')} className={`line ${i === sel ? 'sel' : ''}`} pathLength={1} />
                ))}
                {STATIONS.map(([n, x, y]) => {
                  const on = n === route.from || n === route.to
                  return (
                    <g key={n} className={on ? 'stn on' : 'stn'}>
                      <circle cx={x} cy={y} r={on ? 7 : 4} />
                      <text x={x + 10} y={y + 4}>{n}</text>
                    </g>
                  )
                })}
                <circle key={route.id} className="train" r="6" style={{ offsetPath: `path('M${[route.from_, ...route.via, route.to_].map((p) => p.join(' ')).join(' L')}')` }} />
              </svg>
              <div className="detail">
                <Board key={route.id} rows={detailRows} cols={[9, 9, 5]} reduced={reduced} label={`${route.from} to ${route.to}, departs ${route.dep}, arrives ${route.arr}, ${route.dur}`} />
                <dl className="facts">
                  <div><dt>Distance</dt><dd>{route.km} km</dd></div>
                  <div><dt>From</dt><dd>€{route.price[0]}</dd></div>
                  <div><dt>Status</dt><dd className={route.status === 'DELAYED' ? 'late' : ''}>{route.status}</dd></div>
                </dl>
              </div>
            </div>
          </div>
        </section>

        <section className="berths" id="berths" aria-labelledby="h2b">
          <h2 id="h2b">Three ways to sleep.</h2>
          <div className="table-scroll">
            <table className="cmp">
              <caption className="sr-only">Berth types compared</caption>
              <thead>
                <tr><td />{BERTHS.map((b, i) => <th key={b} scope="col"><button className={i === berth ? 'on' : ''} onClick={() => setBerth(i)} aria-pressed={i === berth}>{b}</button></th>)}</tr>
              </thead>
              <tbody>
                <tr><th scope="row">Bed</th><td className={berth === 0 ? 'hl' : ''}>Reclining seat</td><td className={berth === 1 ? 'hl' : ''}>Bunk, 4 or 6 per cabin</td><td className={berth === 2 ? 'hl' : ''}>Private bed, 1 to 3 per cabin</td></tr>
                <tr><th scope="row">Bedding</th><td className={berth === 0 ? 'hl' : ''}>Blanket</td><td className={berth === 1 ? 'hl' : ''}>Sheets, pillow</td><td className={berth === 2 ? 'hl' : ''}>Sheets, duvet, towel</td></tr>
                <tr><th scope="row">Breakfast</th><td className={berth === 0 ? 'hl' : ''}>Buy on board</td><td className={berth === 1 ? 'hl' : ''}>Roll and coffee</td><td className={berth === 2 ? 'hl' : ''}>Served at your door</td></tr>
                <tr><th scope="row">From</th><td className={`price ${berth === 0 ? 'hl' : ''}`}>€{route.price[0]}</td><td className={`price ${berth === 1 ? 'hl' : ''}`}>€{route.price[1]}</td><td className={`price ${berth === 2 ? 'hl' : ''}`}>€{route.price[2]}</td></tr>
              </tbody>
            </table>
          </div>
          <p className="note">Prices for {route.from} → {route.to}. Change the line above to see the others.</p>
        </section>

        <section className="book" id="book" aria-labelledby="h2k">
          <h2 id="h2k">Print a ticket.</h2>
          <form onSubmit={book} className="book-form">
            <label>Line
              <select value={form.route} onChange={(e) => setForm({ ...form, route: e.target.value })}>
                {ROUTES.map((r) => <option key={r.id} value={r.id}>{r.from} to {r.to}, {r.dep}</option>)}
              </select>
            </label>
            <label>Berth
              <select value={form.berth} onChange={(e) => setForm({ ...form, berth: Number(e.target.value) })}>
                {BERTHS.map((b, i) => <option key={b} value={i}>{b}</option>)}
              </select>
            </label>
            <label>Date
              <input type="date" value={form.date} onChange={(e) => setForm({ ...form, date: e.target.value })} required />
            </label>
            <button className="cta">Print ticket</button>
          </form>
          <div className="slot" aria-live="polite">
            {ticket && (
              <article className="ticket" key={`${ticket.route.id}${ticket.berth}`}>
                <div className="t-main">
                  <p className="t-tag">MERIDIAN NIGHT RAIL · {BERTHS[ticket.berth].toUpperCase()}</p>
                  <p className="t-route">{ticket.route.from} <span>→</span> {ticket.route.to}</p>
                  <p className="t-meta">{form.date} · DEP {ticket.route.dep} · ARR {ticket.route.arr}</p>
                </div>
                <div className="t-stub">
                  <p>SEAT</p>
                  <b>{ticket.seat}</b>
                  <p>€{ticket.route.price[ticket.berth]}</p>
                </div>
              </article>
            )}
          </div>
        </section>
      </main>

      <footer className="foot">
        <p>Next departure in <b className="count">{countdown}</b></p>
        <p className="fine">A fictional railway. Every number on this page is invented.</p>
      </footer>
    </div>
  )
}


// ===== src/patterns/sites/departures/Board.tsx =====
import { useEffect, useRef, useState } from 'react'

/* A split-flap board: each cell cycles forward through the character set until it shows its target. */

const SET = ' ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789:.-'
export const pad = (s: string, n: number) => s.toUpperCase().padEnd(n, ' ').slice(0, n)

function Cell({ ch, prev, tick }: { ch: string; prev: string; tick: number }) {
  return (
    <span className="flap" aria-hidden>
      <span className="flap-top"><b>{ch}</b></span>
      <span className="flap-bot"><b>{prev}</b></span>
      <span key={tick} className="flap-fall flap-top"><b>{prev}</b></span>
      <span key={`b${tick}`} className="flap-rise flap-bot"><b>{ch}</b></span>
    </span>
  )
}

export function Board({ rows, cols, reduced, label }: { rows: string[][]; cols: number[]; reduced: boolean; label: string }) {
  const target = rows.flatMap((r) => r.map((c, i) => pad(c, cols[i]))).join('')
  const [cur, setCur] = useState(() => (reduced ? target : ' '.repeat(target.length)))
  const [prev, setPrev] = useState(cur)
  const [ticks, setTicks] = useState<number[]>(() => Array(target.length).fill(0))
  const curRef = useRef(cur)

  useEffect(() => {
    if (reduced) {
      curRef.current = target
      setCur(target)
      setPrev(target)
      return
    }
    const id = window.setInterval(() => {
      const c = curRef.current
      const next = c.split('').map((ch, i) => (ch === target[i] ? ch : SET[(SET.indexOf(ch) + 1) % SET.length])).join('')
      if (next === c) return window.clearInterval(id)
      setPrev(c)
      setTicks((t) => t.map((n, i) => (c[i] === target[i] ? n : n + 1)))
      curRef.current = next
      setCur(next)
    }, 60)
    return () => window.clearInterval(id)
  }, [target, reduced])

  let k = 0
  return (
    <div className="board" role="img" aria-label={label}>
      {rows.map((_, r) => (
        <div className="board-row" key={r}>
          {cols.map((n, c) => (
            <span className="board-grp" key={c}>
              {Array.from({ length: n }, () => {
                const i = k++
                return <Cell key={i} ch={cur[i]} prev={prev[i]} tick={ticks[i]} />
              })}
            </span>
          ))}
        </div>
      ))}
    </div>
  )
}


// ===== src/patterns/sites/departures/styles.css =====
.site-departures { position: relative; min-height: 100svh; overflow-x: clip; }
.site-departures {
  --night: #0a0e18;
  --night-2: #121826;
  --board: #16130e;
  --cream: #f4e9c8;
  --signal: #ffd23f;
  --alarm: #ff6a55;
  --steel: #9aa6bd;
  --sign: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Hanken Grotesk Variable', system-ui, sans-serif;
  --mono: 'JetBrains Mono Variable', ui-monospace, monospace;
}
.site-departures * { box-sizing: border-box; margin: 0; padding: 0; }
.site-departures, .site-departures { background: var(--night); color: var(--cream); font-family: var(--body); -webkit-font-smoothing: antialiased; }
.site-departures a { color: inherit; text-decoration: none; }
.site-departures button, .site-departures select, .site-departures input { font: inherit; color: inherit; }
.site-departures button { cursor: pointer; }
.site-departures :focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.site-departures .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-departures h1, .site-departures h2 { font-family: var(--sign); font-weight: 700; text-transform: uppercase; line-height: 0.92; letter-spacing: 0.01em; }
.site-departures .nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 28px; padding: 12px clamp(16px, 4vw, 48px); background: var(--night); border-bottom: 2px solid var(--signal); }
.site-departures .logo { font-family: var(--sign); font-weight: 700; font-size: 24px; letter-spacing: 0.06em; }
.site-departures .logo span { margin-left: 10px; color: var(--signal); font-weight: 500; font-size: 14px; letter-spacing: 0.22em; }
.site-departures .nav nav { display: flex; gap: 8px; margin-left: auto; font-family: var(--sign); font-weight: 500; font-size: 19px; letter-spacing: 0.1em; text-transform: uppercase; }
.site-departures .nav nav a { display: grid; place-items: center; min-height: 44px; padding: 0 14px; }
.site-departures .nav nav a:hover { color: var(--signal); }
.site-departures .cta-sm { background: var(--signal); color: var(--night); }
.site-departures .cta-sm:hover { color: var(--night) !important; background: #ffe27a; }
.site-departures .clock { font-family: var(--mono); font-size: 18px; color: var(--signal); min-width: 5ch; }
.site-departures .hero { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 64px); align-items: center; min-height: calc(100svh - 64px); padding: clamp(32px, 6vw, 80px) clamp(16px, 4vw, 48px); }
.site-departures .tag { font-family: var(--sign); font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--signal); font-size: 17px; }
.site-departures .hero h1 { margin-top: 14px; font-size: clamp(64px, 9vw, 132px); }
.site-departures .lede { margin-top: 22px; max-width: 34ch; font-size: 18px; line-height: 1.5; color: var(--steel); }
.site-departures .cta { display: inline-grid; place-items: center; min-height: 52px; margin-top: 30px; padding: 0 30px; background: var(--signal); color: var(--night); border: 0; border-radius: 2px; font-family: var(--sign); font-weight: 700; font-size: 22px; letter-spacing: 0.12em; text-transform: uppercase; }
.site-departures .cta:hover { background: #ffe27a; }
.site-departures .cta:active { transform: translateY(2px); }
.site-departures .board { display: inline-block; max-width: 100%; padding: 22px 24px; background: var(--board); border: 2px solid #2a2418; border-radius: 6px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.04); container-type: inline-size; }
.site-departures .hero-board .board { display: block; }
.site-departures .board-row { display: flex; gap: 0.9em; margin-bottom: 6px; justify-content: space-between; }
.site-departures .board-grp { display: flex; gap: 2px; }
.site-departures .flap { position: relative; display: inline-block; width: 1.02em; height: 1.55em; font: 600 clamp(5px, 2.55cqw, 28px) / 1.55 var(--mono); color: var(--cream); perspective: 300px; }
.site-departures .flap-top, .site-departures .flap-bot { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: #211d16; border-radius: 3px; text-align: center; }
.site-departures .flap-top { top: 0; transform-origin: bottom; border-bottom: 1px solid #000; }
.site-departures .flap-bot { bottom: 0; transform-origin: top; }
.site-departures .flap-top b, .site-departures .flap-bot b { display: block; font-weight: 600; }
.site-departures .flap-bot b { transform: translateY(-50%); }
.site-departures .flap-fall { animation: departures-flap-fall 60ms ease-in forwards; z-index: 2; }
.site-departures .flap-rise { animation: departures-flap-rise 60ms ease-out 60ms both; z-index: 1; }
@keyframes departures-flap-fall { to { transform: rotateX(-90deg); } }
@keyframes departures-flap-rise { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
.site-departures .routes { padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 48px); background: var(--night-2); border-top: 2px solid #1e2740; }
.site-departures .routes-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px 32px; margin-bottom: 36px; }
.site-departures .routes h2, .site-departures .berths h2, .site-departures .book h2 { font-size: clamp(48px, 7vw, 96px); }
.site-departures .routes-head p { color: var(--steel); max-width: 38ch; }
.site-departures .routes-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(20px, 4vw, 56px); }
.site-departures .route-list { list-style: none; display: grid; gap: 6px; align-content: start; }
.site-departures .route-list button { display: grid; grid-template-columns: 5ch 1fr auto; gap: 14px; align-items: baseline; width: 100%; min-height: 56px; padding: 10px 16px; text-align: left; background: transparent; border: 1px solid #2a3350; border-radius: 3px; }
.site-departures .route-list button:hover { border-color: var(--steel); }
.site-departures .route-list button.on { background: var(--signal); border-color: var(--signal); color: var(--night); }
.site-departures .r-time { font-family: var(--mono); font-size: 16px; }
.site-departures .r-name { font-family: var(--sign); font-weight: 700; font-size: 24px; letter-spacing: 0.06em; }
.site-departures .r-dur { font-family: var(--mono); font-size: 13px; opacity: 0.8; }
.site-departures .map-wrap { display: grid; gap: 22px; }
.site-departures .map { width: 100%; height: auto; background: #0d1321; border: 1px solid #1e2740; border-radius: 4px; }
.site-departures .line { fill: none; stroke: #2b3555; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.site-departures .line.sel { stroke: var(--signal); stroke-width: 3.5; stroke-dasharray: 1; stroke-dashoffset: 0; animation: departures-draw 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes departures-draw { from { stroke-dashoffset: 1; } }
.site-departures .stn circle { fill: #0d1321; stroke: var(--steel); stroke-width: 2; }
.site-departures .stn text { fill: var(--steel); font: 500 11px var(--sign); letter-spacing: 0.14em; }
.site-departures .stn.on circle { fill: var(--signal); stroke: var(--signal); }
.site-departures .stn.on text { fill: var(--cream); font-size: 13px; }
.site-departures .train { fill: var(--cream); offset-rotate: 0deg; animation: departures-ride 3.2s cubic-bezier(0.5, 0, 0.3, 1) both; }
@keyframes departures-ride { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.site-departures .detail { display: grid; gap: 14px; }
.site-departures .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.site-departures .facts div { padding: 12px 0; border-top: 2px solid var(--signal); }
.site-departures .facts dt { font-family: var(--sign); letter-spacing: 0.2em; text-transform: uppercase; font-size: 14px; color: var(--steel); }
.site-departures .facts dd { margin-top: 4px; font-family: var(--mono); font-size: 22px; }
.site-departures .facts .late { color: var(--alarm); }
.site-departures .berths { padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 48px); }
.site-departures .table-scroll { margin-top: 36px; overflow-x: auto; }
.site-departures .cmp { width: 100%; min-width: 640px; border-collapse: collapse; }
.site-departures .cmp th, .site-departures .cmp td { padding: 16px 18px; text-align: left; border-bottom: 1px solid #243052; vertical-align: top; }
.site-departures .cmp thead th { padding: 0 0 14px; }
.site-departures .cmp thead button { width: 100%; min-height: 56px; background: transparent; border: 2px solid #2a3350; border-radius: 3px; font-family: var(--sign); font-weight: 700; font-size: 26px; letter-spacing: 0.08em; text-transform: uppercase; }
.site-departures .cmp thead button.on { background: var(--cream); color: var(--night); border-color: var(--cream); }
.site-departures .cmp tbody th { font-family: var(--sign); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel); width: 12ch; }
.site-departures .cmp td.hl { background: rgba(255, 210, 63, 0.09); }
.site-departures .cmp td.price { font-family: var(--mono); font-size: 26px; }
.site-departures .note { margin-top: 14px; color: var(--steel); font-size: 14px; }
.site-departures .book { padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 48px); background: var(--night-2); border-top: 2px solid #1e2740; }
.site-departures .book-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: end; margin-top: 32px; max-width: 1100px; }
.site-departures .book-form label { display: grid; gap: 8px; font-family: var(--sign); letter-spacing: 0.2em; text-transform: uppercase; font-size: 14px; color: var(--steel); }
.site-departures .book-form select, .site-departures .book-form input { min-height: 52px; padding: 0 12px; background: #0d1321; border: 1px solid #2a3350; border-radius: 2px; font-family: var(--mono); font-size: 15px; color-scheme: dark; letter-spacing: 0; text-transform: none; }
.site-departures .book-form .cta { margin-top: 0; }
.site-departures .slot { margin-top: 40px; padding-top: 10px; border-top: 6px solid #000; min-height: 190px; }
.site-departures .ticket { display: grid; grid-template-columns: 1fr auto; max-width: 760px; background: var(--cream); color: #1a1710; border-radius: 4px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); animation: departures-print 0.9s steps(14) both; }
@keyframes departures-print { from { transform: translateY(-110%); } }
.site-departures .t-main { padding: 22px 26px; }
.site-departures .t-tag { font-family: var(--sign); letter-spacing: 0.26em; font-size: 14px; }
.site-departures .t-route { margin-top: 8px; font-family: var(--sign); font-weight: 700; font-size: clamp(34px, 5vw, 56px); text-transform: uppercase; line-height: 1; }
.site-departures .t-route span { color: #b78a00; }
.site-departures .t-meta { margin-top: 10px; font-family: var(--mono); font-size: 14px; }
.site-departures .t-stub { display: grid; gap: 4px; align-content: center; justify-items: center; padding: 18px 26px; border-left: 3px dashed #1a1710; font-family: var(--sign); letter-spacing: 0.2em; }
.site-departures .t-stub b { font-family: var(--mono); font-size: 34px; letter-spacing: 0; }
.site-departures .foot { padding: 40px clamp(16px, 4vw, 48px) 56px; border-top: 2px solid var(--signal); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-family: var(--sign); letter-spacing: 0.14em; text-transform: uppercase; font-size: 20px; }
.site-departures .count { font-family: var(--mono); color: var(--signal); letter-spacing: 0; font-weight: 500; }
.site-departures .fine { font-family: var(--body); text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--steel); }
@media (max-width: 860px) {
.site-departures .nav { gap: 8px; }
.site-departures .nav nav { gap: 0; font-size: 15px; letter-spacing: 0.06em; }
.site-departures .nav nav a { padding: 0 8px; }
.site-departures .nav .clock, .site-departures .nav .count { display: none; }
.site-departures .board { padding: 14px 12px; }
.site-departures .logo span { display: none; }
.site-departures .hero, .site-departures .routes-grid { grid-template-columns: minmax(0, 1fr); }
.site-departures .book-form { grid-template-columns: minmax(0, 1fr); }
.site-departures .ticket { grid-template-columns: 1fr; }
.site-departures .t-stub { border-left: 0; border-top: 3px dashed #1a1710; grid-auto-flow: column; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
.site-departures .line.sel, .site-departures .train, .site-departures .ticket { animation: none; }
.site-departures .flap-fall, .site-departures .flap-rise { animation: none; }
}
```


## Helper it imports: `src/patterns/sites/_shared.ts`

```ts
import { useEffect, type RefObject } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import Lenis from 'lenis'

/* Helpers shared by the whole-site demos in this folder. They are full pages, so they scroll the window,
   and they must coexist with UI Lab's own hash router and clean up completely when you leave. */

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/**
 * Smooth scroll (Lenis, driven by GSAP's ticker so ScrollTrigger stays in sync) plus in-page anchor links.
 * Anchor clicks are handled here instead of by the browser: UI Lab's router lives in the URL hash,
 * so a real `#section` navigation would be read as a route change.
 * Everything is torn down on unmount.
 */
export function useSiteScroll(root: RefObject<HTMLElement | null>, { smooth = true, lerp = 0.1 } = {}) {
  useEffect(() => {
    const el = root.current
    if (!el) return
    let lenis: Lenis | null = null
    let tick: ((t: number) => void) | null = null
    if (smooth && !reducedMotion()) {
      lenis = new Lenis({ lerp })
      lenis.on('scroll', ScrollTrigger.update)
      tick = (t: number) => lenis!.raf(t * 1000)
      gsap.ticker.add(tick)
      gsap.ticker.lagSmoothing(0)
    }
    const onClick = (e: MouseEvent) => {
      const a = (e.target as HTMLElement).closest<HTMLAnchorElement>('a[href^="#"]')
      if (!a || !el.contains(a)) return
      const id = a.getAttribute('href')!.slice(1)
      if (id.startsWith('/')) return // a UI Lab route, let it through
      e.preventDefault()
      const target = id ? el.querySelector<HTMLElement>(`#${CSS.escape(id)}`) : null
      if (!target) return
      if (lenis) lenis.scrollTo(target)
      else target.scrollIntoView({ behavior: 'smooth' })
    }
    el.addEventListener('click', onClick)
    return () => {
      el.removeEventListener('click', onClick)
      if (tick) gsap.ticker.remove(tick)
      gsap.ticker.lagSmoothing(500, 33) // GSAP's default
      lenis?.destroy()
      ScrollTrigger.getAll().forEach((t) => t.kill())
    }
  }, [root, smooth, lerp])
}
```

# Site: HEDGEROW PRESS (field notebook)
> A pressed-plant print shop set as an open field notebook: a taped plate with numbered callouts and handwritten notes, a specimen index, and a plant press you turn with a slider to watch a flower dry and flatten over fourteen days.
- **Category:** Sites
- **Slug:** site-herbarium
- **Tags:** site, full page, niche world, herbarium, field notebook, botanical, paper, handwriting, procedural svg, slider, craft
- **Dependencies:** @fontsource-variable/fraunces, @fontsource/caveat, @fontsource-variable/jetbrains-mono, sites/_shared.ts
- **Live demo:** https://ui-lab-weld.vercel.app/#/site-herbarium
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sites/herbarium/index.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sites/herbarium/index.tsx
- **Raw files:** https://ui-lab-weld.vercel.app/raw/sites/herbarium/index.tsx, https://ui-lab-weld.vercel.app/raw/sites/herbarium/Plant.tsx, https://ui-lab-weld.vercel.app/raw/sites/herbarium/styles.css

## When to use
- Craft, nature, archive, museum and slow-commerce brands
- Reference for procedural SVG illustration driven by one number, paper texture without images, and handwriting used only for annotation

## Accessibility

Callout pins are buttons that respond to hover and focus with the note in a live region; the index is a real table with scoped headers; the press slider is a native range with aria-valuetext and a handwritten status line; reveal-on-scroll is disabled under reduced motion.


## Source
Files: `src/patterns/sites/herbarium/index.tsx`, `src/patterns/sites/herbarium/Plant.tsx`, `src/patterns/sites/herbarium/styles.css`
```tsx
// ===== src/patterns/sites/herbarium/index.tsx =====
import { useEffect, useRef, useState } from 'react'
import '@fontsource-variable/fraunces/full.css'
import '@fontsource/caveat/500.css'
import '@fontsource-variable/jetbrains-mono'
import './styles.css'
import { reducedMotion, useSiteScroll } from '../_shared'
import { Plant, SPECIES } from './Plant'

/*
 * HEDGEROW PRESS: a pressed-plant print shop set as an open field notebook. World 10 (Herbarium).
 * Signature: a plate you can interrogate (numbered callouts with handwritten notes) and a plant press you
 * turn with a slider, so you watch a flower dry and flatten over fourteen days. Everything is real text.
 */

const reduced = reducedMotion()
const SEASONS = ['All', 'Spring', 'Summer', 'Autumn'] as const

const PARTS = [
  { n: 1, name: 'Corolla', note: 'Five petals, opening at dusk and closing by noon.', top: '16%', left: '66%' },
  { n: 2, name: 'Leaf', note: 'Lanceolate, finely serrate. Press it flat the same day.', top: '73%', left: '22%' },
  { n: 3, name: 'Stem', note: 'Hollow and ribbed. It bends, so tie it before pressing.', top: '48%', left: '50%' },
  { n: 4, name: 'Root', note: 'Left in the ground. We only ever take the flower and one leaf.', top: '95%', left: '50%' },
]

export default function HerbariumSite() {
  const root = useRef<HTMLDivElement>(null)
  const [part, setPart] = useState<number | null>(null)
  const [season, setSeason] = useState<(typeof SEASONS)[number]>('All')
  const [days, setDays] = useState(0)
  const [pick, setPick] = useState(0)
  const [frame, setFrame] = useState('Oak')
  const [ordered, setOrdered] = useState(false)
  const rows = SPECIES.filter((s) => season === 'All' || s.season === season)
  const sp = SPECIES[pick]
  const frames: Record<string, number> = { Oak: 24, Ash: 24, Walnut: 36, Unframed: 0 }

  useSiteScroll(root, { smooth: false })

  useEffect(() => {
    if (reduced) return
    const io = new IntersectionObserver((es) => es.forEach((e) => e.isIntersecting && e.target.classList.add('in')), { threshold: 0.2 })
    root.current?.querySelectorAll('.rev').forEach((el) => io.observe(el))
    return () => io.disconnect()
  }, [])

  return (
    <div className="site-herbarium" ref={root}>
      <header className="mast">
        <a href="#top" className="brand">Hedgerow <em>Press</em></a>
        <nav aria-label="Sections">
          <a href="#index">The index</a>
          <a href="#press">The press</a>
          <a href="#order">Order a plate</a>
        </nav>
      </header>

      <main id="top">
        <section className="hero" aria-labelledby="h1">
          <div className="hero-text">
            <p className="label">Plate XIV · Campanula, from a hedgerow near the river</p>
            <h1 id="h1">Notes from<br />the <em>hedgerow</em>.</h1>
            <p className="lede">Pressed-plant prints and field guides, made one season at a time. Every plate is a single specimen, collected by hand and mounted on cotton paper.</p>
            <a href="#index" className="btn">Browse the index</a>
          </div>
          <figure className="plate" onPointerLeave={() => setPart(null)}>
            <div className="art">
              <Plant petals={5} leaves={4} hue={255} className="plate-art" label="A pressed harebell on a cream plate with four numbered parts" />
              {PARTS.map((p) => (
                <button key={p.n} className={`pin ${part === p.n ? 'on' : ''}`} style={{ top: p.top, left: p.left }} onPointerEnter={() => setPart(p.n)} onFocus={() => setPart(p.n)} onBlur={() => setPart(null)} aria-label={`${p.n}. ${p.name}`}>{p.n}</button>
              ))}
            </div>
            <figcaption className="note" aria-live="polite">{part ? PARTS[part - 1].note : 'Point at a number to read the field note.'}</figcaption>
          </figure>
        </section>

        <section className="index rev" id="index" aria-labelledby="h2i">
          <div className="head">
            <h2 id="h2i">The index</h2>
            <div className="seasons" role="radiogroup" aria-label="Filter by season">
              {SEASONS.map((s) => <button key={s} role="radio" aria-checked={season === s} className={season === s ? 'on' : ''} onClick={() => setSeason(s)}>{s}</button>)}
            </div>
          </div>
          <table>
            <caption className="sr-only">Specimens in the index</caption>
            <thead><tr><th scope="col">Plant</th><th scope="col">Latin</th><th scope="col">Habitat</th><th scope="col">Season</th><th scope="col" className="r">Plate</th></tr></thead>
            <tbody>
              {rows.map((s) => (
                <tr key={s.id} onPointerEnter={() => setPick(SPECIES.indexOf(s))} onFocus={() => setPick(SPECIES.indexOf(s))} tabIndex={0}>
                  <th scope="row">{s.common}</th>
                  <td className="latin">{s.latin}</td>
                  <td>{s.hab}</td>
                  <td>{s.season}</td>
                  <td className="r">£{s.price}</td>
                </tr>
              ))}
            </tbody>
          </table>
          <aside className="peek" aria-hidden>
            <Plant petals={sp.petals} leaves={sp.leaves} hue={sp.hue} className="peek-art" label={sp.common} />
            <p>{sp.common}</p>
          </aside>
        </section>

        <section className="press rev" id="press" aria-labelledby="h2p">
          <h2 id="h2p">Fourteen days under the weight.</h2>
          <p className="intro">Fresh plants are mostly water. In the press they lose it slowly between blotting paper, and flatten, and fade to the colours of old books. Turn the screw and watch.</p>
          <div className="press-box">
            <div className="press-art">
              <Plant petals={sp.petals} leaves={sp.leaves} hue={sp.hue} dry={days / 14} className="press-plant" label={`${sp.common}, pressed for ${days} days`} />
            </div>
            <div className="press-ctl">
              <label htmlFor="days">Days pressed: <b>{days}</b></label>
              <input id="days" type="range" min={0} max={14} value={days} onChange={(e) => setDays(Number(e.target.value))} aria-valuetext={`${days} days`} />
              <p className="hand" aria-live="polite">{days === 0 ? 'Just picked. Still full of water.' : days < 5 ? 'Colour holding. Change the blotting paper.' : days < 11 ? 'Flattening nicely. Do not peek.' : days < 14 ? 'Nearly paper. The colours have softened.' : 'Ready to mount.'}</p>
              <div className="pick" role="radiogroup" aria-label="Choose a specimen">
                {SPECIES.map((s, i) => <button key={s.id} role="radio" aria-checked={pick === i} className={pick === i ? 'on' : ''} onClick={() => setPick(i)}>{s.common}</button>)}
              </div>
            </div>
          </div>
        </section>

        <section className="order rev" id="order" aria-labelledby="h2o">
          <h2 id="h2o">Order a plate.</h2>
          <form onSubmit={(e) => { e.preventDefault(); setOrdered(true) }}>
            <label>Specimen
              <select value={pick} onChange={(e) => setPick(Number(e.target.value))}>{SPECIES.map((s, i) => <option key={s.id} value={i}>{s.common}</option>)}</select>
            </label>
            <label>Frame
              <select value={frame} onChange={(e) => setFrame(e.target.value)}>{Object.keys(frames).map((f) => <option key={f}>{f}</option>)}</select>
            </label>
            <p className="total">Total <b>£{sp.price + frames[frame]}</b></p>
            <button className="btn">Reserve this plate</button>
          </form>
          <p className="hand big" aria-live="polite">{ordered ? `Reserved: ${sp.common}, ${frame.toLowerCase()} frame. We will write to you when it is mounted.` : ' '}</p>
        </section>
      </main>

      <footer className="colophon">
        <p>Set in Fraunces and Caveat. Every plant was collected with permission and only where it was common.</p>
        <p className="fine">A fictional press. Names, prices and places are invented.</p>
      </footer>
    </div>
  )
}


// ===== src/patterns/sites/herbarium/Plant.tsx =====
/* A procedural pressed-plant drawing. `dry` goes 0 (fresh) to 1 (pressed): colours fade toward sepia and the stem flattens. */

const mix = (a: number, b: number, t: number) => a + (b - a) * t
/** Hue interpolation along the shorter way round the colour wheel, so a purple flower browns through red, not green. */
const hueMix = (a: number, b: number, t: number) => (a + (((b - a + 540) % 360) - 180) * t + 360) % 360

export function Plant({ petals = 5, leaves = 4, hue = 330, dry = 0, className, label }: { petals?: number; leaves?: number; hue?: number; dry?: number; className?: string; label: string }) {
  const leaf = `hsl(${mix(98, 44, dry)} ${mix(38, 26, dry)}% ${mix(36, 50, dry)}%)`
  const leafDark = `hsl(${mix(98, 40, dry)} ${mix(40, 28, dry)}% ${mix(26, 36, dry)}%)`
  const petal = `hsl(${hueMix(hue, 30, dry * 0.85)} ${mix(62, 28, dry)}% ${mix(68, 70, dry)}%)`
  const center = `hsl(${mix(44, 34, dry)} ${mix(80, 40, dry)}% ${mix(52, 40, dry)}%)`
  const squash = 1 - dry * 0.16

  return (
    <svg viewBox="0 0 200 310" className={className} role="img" aria-label={label}>
      <g style={{ transform: `scaleY(${squash})`, transformOrigin: '100px 300px', transition: 'transform 0.4s' }}>
        <path d="M100 298C96 240 106 170 100 92" stroke={leafDark} strokeWidth="3" fill="none" strokeLinecap="round" style={{ transition: 'stroke 0.4s' }} />
        {Array.from({ length: leaves }, (_, i) => {
          const y = 262 - i * (150 / leaves + 8)
          const d = i % 2 ? 1 : -1
          const len = 52 - i * 4
          return (
            <g key={i} style={{ transition: 'fill 0.4s' }}>
              <path d={`M100 ${y}c${d * 16} -8 ${d * len * 0.7} -10 ${d * len} -34c${-d * 24} -4 ${-d * 38} 8 ${-d * len} 34Z`} fill={leaf} stroke={leafDark} strokeWidth="1.2" />
              <path d={`M100 ${y}c${d * 18} -12 ${d * len * 0.6} -20 ${d * len * 0.95} -33`} stroke={leafDark} strokeWidth="0.8" fill="none" />
            </g>
          )
        })}
        <g>
          {Array.from({ length: petals }, (_, i) => (
            <ellipse key={i} cx="100" cy="62" rx="12" ry="26" transform={`rotate(${(i * 360) / petals} 100 88)`} fill={petal} stroke={`hsl(${hueMix(hue, 30, dry)} 40% 38%)`} strokeWidth="1" />
          ))}
          <circle cx="100" cy="88" r="9" fill={center} stroke="#6b4b14" strokeWidth="1" />
        </g>
      </g>
    </svg>
  )
}

export const SPECIES = [
  { id: 'campanula', common: 'Harebell', latin: 'Campanula rotundifolia', hab: 'Dry grassland', season: 'Summer', price: 38, petals: 5, leaves: 3, hue: 255 },
  { id: 'primula', common: 'Primrose', latin: 'Primula vulgaris', hab: 'Hedge banks', season: 'Spring', price: 34, petals: 5, leaves: 4, hue: 52 },
  { id: 'geranium', common: 'Herb Robert', latin: 'Geranium robertianum', hab: 'Shaded walls', season: 'Summer', price: 36, petals: 5, leaves: 5, hue: 330 },
  { id: 'anemone', common: 'Wood Anemone', latin: 'Anemone nemorosa', hab: 'Ancient woodland', season: 'Spring', price: 42, petals: 7, leaves: 3, hue: 200 },
  { id: 'aster', common: 'Sea Aster', latin: 'Tripolium pannonicum', hab: 'Salt marsh', season: 'Autumn', price: 40, petals: 12, leaves: 4, hue: 285 },
  { id: 'clematis', common: 'Old Man’s Beard', latin: 'Clematis vitalba', hab: 'Chalk hedgerows', season: 'Autumn', price: 44, petals: 8, leaves: 5, hue: 90 },
] as const


// ===== src/patterns/sites/herbarium/styles.css =====
.site-herbarium { position: relative; min-height: 100svh; overflow-x: clip; }
.site-herbarium {
  --paper: #f1e8d2;
  --paper-2: #e8dcc0;
  --ink: #2b2418;
  --oxblood: #a8402a;
  --moss: #5b6b3a;
  --tape: rgba(217, 182, 106, 0.55);
  --serif: 'Fraunces Variable', Georgia, serif;
  --hand: 'Caveat', 'Segoe Script', cursive;
  --mono: 'JetBrains Mono Variable', ui-monospace, monospace;
}
.site-herbarium * { box-sizing: border-box; margin: 0; padding: 0; }
.site-herbarium, .site-herbarium { background: var(--paper); color: var(--ink); font-family: var(--serif); font-variation-settings: 'opsz' 14, 'SOFT' 50; -webkit-font-smoothing: antialiased; }
.site-herbarium a { color: inherit; text-decoration: none; }
.site-herbarium button, .site-herbarium select, .site-herbarium input { font: inherit; color: inherit; }
.site-herbarium button { cursor: pointer; }
.site-herbarium :focus-visible { outline: 3px solid var(--oxblood); outline-offset: 3px; }
.site-herbarium .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-herbarium h1, .site-herbarium h2 { font-weight: 500; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; line-height: 0.98; letter-spacing: -0.02em; }
.site-herbarium em { font-style: italic; color: var(--oxblood); }
.site-herbarium::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: 0.08; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.site-herbarium .mast { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px clamp(16px, 5vw, 64px); border-bottom: 1px solid var(--ink); position: sticky; top: 0; z-index: 40; background: var(--paper); }
.site-herbarium .brand { font-size: 26px; font-variation-settings: 'opsz' 72, 'SOFT' 100, 'WONK' 1; font-weight: 600; }
.site-herbarium .mast nav { display: flex; gap: 6px; font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; }
.site-herbarium .mast nav a { display: grid; place-items: center; min-height: 44px; padding: 0 14px; border-bottom: 2px solid transparent; }
.site-herbarium .mast nav a:hover { border-bottom-color: var(--oxblood); }
.site-herbarium .hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 5vw, 80px); align-items: center; padding: clamp(40px, 6vw, 90px) clamp(16px, 5vw, 64px); min-height: calc(100svh - 70px); }
.site-herbarium .label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--moss); }
.site-herbarium .hero h1 { margin-top: 16px; font-size: clamp(54px, 8vw, 112px); }
.site-herbarium .lede { margin-top: 26px; max-width: 40ch; font-size: 19px; line-height: 1.55; }
.site-herbarium .btn { display: inline-grid; place-items: center; min-height: 52px; margin-top: 30px; padding: 0 28px; background: var(--ink); color: var(--paper); border: 0; border-radius: 2px; font-family: var(--mono); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; }
.site-herbarium .btn:hover { background: var(--oxblood); }
.site-herbarium .plate { position: relative; justify-self: center; width: min(100%, 460px); padding: 34px 30px 20px; background: #f8f1de; border: 1px solid var(--ink); box-shadow: 0 2px 0 var(--ink), 0 24px 50px rgba(43, 36, 24, 0.22); transform: rotate(1.4deg); }
.site-herbarium .plate::before, .site-herbarium .plate::after { content: ''; position: absolute; top: -12px; width: 90px; height: 28px; background: var(--tape); }
.site-herbarium .plate::before { left: 24px; transform: rotate(-6deg); }
.site-herbarium .plate::after { right: 24px; transform: rotate(5deg); }
.site-herbarium .art { position: relative; }
.site-herbarium .plate-art { display: block; width: 100%; height: auto; max-height: 56vh; }
.site-herbarium .pin { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 50%; font-family: var(--mono); font-size: 14px; }
.site-herbarium .pin.on, .site-herbarium .pin:hover { background: var(--oxblood); border-color: var(--oxblood); color: #fff; }
.site-herbarium .note { margin-top: 10px; min-height: 3.2em; font-family: var(--hand); font-size: 26px; line-height: 1.05; color: var(--oxblood); }
.site-herbarium .index { position: relative; padding: clamp(48px, 8vw, 110px) clamp(16px, 5vw, 64px); border-top: 1px solid var(--ink); }
.site-herbarium .head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.site-herbarium .index h2, .site-herbarium .press h2, .site-herbarium .order h2 { font-size: clamp(42px, 6vw, 84px); }
.site-herbarium .seasons { display: flex; gap: 6px; }
.site-herbarium .seasons button { min-height: 44px; padding: 0 16px; background: transparent; border: 1px solid var(--ink); border-radius: 999px; font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }
.site-herbarium .seasons button.on { background: var(--ink); color: var(--paper); }
.site-herbarium .index table { width: min(100%, 880px); border-collapse: collapse; }
.site-herbarium .index th, .site-herbarium .index td { padding: 16px 12px; text-align: left; border-bottom: 1px solid rgba(43, 36, 24, 0.35); }
.site-herbarium .index thead th { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--moss); }
.site-herbarium .index tbody th { font-size: 22px; font-weight: 500; font-variation-settings: 'opsz' 48, 'SOFT' 100; }
.site-herbarium .index tbody tr:hover, .site-herbarium .index tbody tr:focus-visible { background: var(--paper-2); }
.site-herbarium .latin { font-style: italic; }
.site-herbarium .r { text-align: right !important; font-family: var(--mono); }
.site-herbarium .peek { position: absolute; top: clamp(120px, 14vw, 200px); right: clamp(16px, 5vw, 64px); width: 190px; padding: 14px 14px 8px; background: #f8f1de; border: 1px solid var(--ink); text-align: center; font-family: var(--hand); font-size: 24px; transform: rotate(-2.5deg); box-shadow: 0 14px 30px rgba(43, 36, 24, 0.2); }
.site-herbarium .peek-art { width: 100%; height: auto; }
.site-herbarium .press { padding: clamp(48px, 8vw, 110px) clamp(16px, 5vw, 64px); background: var(--paper-2); border-top: 1px solid var(--ink); }
.site-herbarium .intro { margin-top: 18px; max-width: 52ch; font-size: 19px; line-height: 1.55; }
.site-herbarium .press-box { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center; margin-top: 40px; }
.site-herbarium .press-art { background: #f8f1de; border: 1px solid var(--ink); padding: 24px; width: min(100%, 360px); justify-self: center; box-shadow: 0 20px 40px rgba(43, 36, 24, 0.18); }
.site-herbarium .press-plant { display: block; width: 100%; height: auto; }
.site-herbarium .press-ctl label { font-family: var(--mono); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; }
.site-herbarium .press-ctl input[type='range'] { display: block; width: 100%; height: 44px; margin: 8px 0 4px; accent-color: var(--oxblood); }
.site-herbarium .hand { min-height: 2.2em; font-family: var(--hand); font-size: 30px; line-height: 1; color: var(--oxblood); }
.site-herbarium .hand.big { font-size: 34px; }
.site-herbarium .pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.site-herbarium .pick button { min-height: 44px; padding: 0 14px; background: transparent; border: 1px solid var(--ink); border-radius: 2px; font-size: 15px; }
.site-herbarium .pick button.on { background: var(--ink); color: var(--paper); }
.site-herbarium .order { padding: clamp(48px, 8vw, 110px) clamp(16px, 5vw, 64px); border-top: 1px solid var(--ink); }
.site-herbarium .order form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto auto; gap: 18px; align-items: end; margin-top: 30px; max-width: 980px; }
.site-herbarium .order label { display: grid; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--moss); }
.site-herbarium .order select { min-height: 52px; padding: 0 12px; background: #f8f1de; border: 1px solid var(--ink); border-radius: 2px; font-family: var(--serif); font-size: 18px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.site-herbarium .total { font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; padding-bottom: 14px; }
.site-herbarium .total b { font-size: 30px; font-family: var(--serif); letter-spacing: 0; }
.site-herbarium .order .btn { margin-top: 0; }
.site-herbarium .colophon { padding: 36px clamp(16px, 5vw, 64px) 56px; border-top: 1px solid var(--ink); font-size: 15px; line-height: 1.6; max-width: 70ch; }
.site-herbarium .fine { margin-top: 8px; color: var(--moss); font-size: 14px; }
.site-herbarium .rev { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
.site-herbarium .rev { opacity: 0; transform: translateY(14px); transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.site-herbarium .rev.in { opacity: 1; transform: none; }
}
@media (max-width: 860px) {
.site-herbarium .hero, .site-herbarium .press-box { grid-template-columns: minmax(0, 1fr); }
.site-herbarium .peek { display: none; }
.site-herbarium .order form { grid-template-columns: minmax(0, 1fr); }
.site-herbarium .index table { display: block; overflow-x: auto; }
.site-herbarium .mast nav a { padding: 0 6px; white-space: nowrap; font-size: 11px; letter-spacing: 0.04em; }
.site-herbarium .mast nav a:nth-child(2) { display: none; }
}
```


## Helper it imports: `src/patterns/sites/_shared.ts`

```ts
import { useEffect, type RefObject } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import Lenis from 'lenis'

/* Helpers shared by the whole-site demos in this folder. They are full pages, so they scroll the window,
   and they must coexist with UI Lab's own hash router and clean up completely when you leave. */

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/**
 * Smooth scroll (Lenis, driven by GSAP's ticker so ScrollTrigger stays in sync) plus in-page anchor links.
 * Anchor clicks are handled here instead of by the browser: UI Lab's router lives in the URL hash,
 * so a real `#section` navigation would be read as a route change.
 * Everything is torn down on unmount.
 */
export function useSiteScroll(root: RefObject<HTMLElement | null>, { smooth = true, lerp = 0.1 } = {}) {
  useEffect(() => {
    const el = root.current
    if (!el) return
    let lenis: Lenis | null = null
    let tick: ((t: number) => void) | null = null
    if (smooth && !reducedMotion()) {
      lenis = new Lenis({ lerp })
      lenis.on('scroll', ScrollTrigger.update)
      tick = (t: number) => lenis!.raf(t * 1000)
      gsap.ticker.add(tick)
      gsap.ticker.lagSmoothing(0)
    }
    const onClick = (e: MouseEvent) => {
      const a = (e.target as HTMLElement).closest<HTMLAnchorElement>('a[href^="#"]')
      if (!a || !el.contains(a)) return
      const id = a.getAttribute('href')!.slice(1)
      if (id.startsWith('/')) return // a UI Lab route, let it through
      e.preventDefault()
      const target = id ? el.querySelector<HTMLElement>(`#${CSS.escape(id)}`) : null
      if (!target) return
      if (lenis) lenis.scrollTo(target)
      else target.scrollIntoView({ behavior: 'smooth' })
    }
    el.addEventListener('click', onClick)
    return () => {
      el.removeEventListener('click', onClick)
      if (tick) gsap.ticker.remove(tick)
      gsap.ticker.lagSmoothing(500, 33) // GSAP's default
      lenis?.destroy()
      ScrollTrigger.getAll().forEach((t) => t.kill())
    }
  }, [root, smooth, lerp])
}
```

# Site: KESTREL K-1 (cassette deck)
> A product page where the product plays: a cassette deck whose generated drum-and-bass loop runs through a switchable tape stage (saturation, roll-off, wobble), with VU needles that read the real signal, turning reels and a tape counter. Finish chooser re-skins the panel.
- **Category:** Sites
- **Slug:** site-tape
- **Tags:** site, full page, niche world, hi-fi, tape deck, webaudio, analyser, vu meter, hardware, product, skeuomorphic
- **Dependencies:** @fontsource/oswald, @fontsource/ibm-plex-mono, sites/_shared.ts
- **Live demo:** https://ui-lab-weld.vercel.app/#/site-tape
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sites/tape/index.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sites/tape/index.tsx
- **Raw files:** https://ui-lab-weld.vercel.app/raw/sites/tape/index.tsx, https://ui-lab-weld.vercel.app/raw/sites/tape/engine.ts, https://ui-lab-weld.vercel.app/raw/sites/tape/styles.css

## When to use
- Audio, hardware and instrument brands; any product whose pitch is how it sounds or feels
- Reference for WebAudio scheduling (look-ahead loop), an AnalyserNode driving UI, and CSS-variable theming per product finish

## Accessibility

Audio starts only when Play is pressed, at a low level; transport buttons are real buttons with pressed state; faders are native ranges with aria-valuetext; the tape stage is a switch; meters are role=meter; the counter is a timer; reels do not spin under reduced motion.


## Source
Files: `src/patterns/sites/tape/index.tsx`, `src/patterns/sites/tape/engine.ts`, `src/patterns/sites/tape/styles.css`
```tsx
// ===== src/patterns/sites/tape/index.tsx =====
import { useEffect, useRef, useState } from 'react'
import '@fontsource/oswald/500.css'
import '@fontsource/oswald/700.css'
import '@fontsource/ibm-plex-mono/400.css'
import '@fontsource/ibm-plex-mono/500.css'
import './styles.css'
import { reducedMotion, useSiteScroll } from '../_shared'
import { createEngine, type Engine } from './engine'

/*
 * KESTREL K-1: a tape deck with a working sound. World 11 (Hi-Fi Deck).
 * Signature: the product is the page. Press play and a generated loop runs through a tape stage (saturation,
 * roll-off, wobble) you can switch out to hear the difference; the VU needles read the real signal, the reels turn,
 * the counter counts. No audio file exists; WebAudio only starts after you press a button, at a low level.
 */

const reduced = reducedMotion()
const FINISHES = [
  { id: 'charcoal', name: 'Charcoal', note: 'Powder-coated steel' },
  { id: 'walnut', name: 'Walnut', note: 'Oiled American walnut' },
  { id: 'cream', name: 'Cream', note: 'Stoved enamel' },
] as const

function Vu({ value, label }: { value: number; label: string }) {
  const a = -48 + value * 96
  return (
    <figure className="vu" role="meter" aria-label={label} aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(value * 100)}>
      <svg viewBox="0 0 160 100" aria-hidden>
        {Array.from({ length: 11 }, (_, i) => {
          const t = ((-48 + i * 9.6) * Math.PI) / 180
          const r1 = 70, r2 = i > 7 ? 56 : 62
          return <line key={i} x1={80 + Math.sin(t) * r1} y1={92 - Math.cos(t) * r1} x2={80 + Math.sin(t) * r2} y2={92 - Math.cos(t) * r2} className={i > 7 ? 'tick hot' : 'tick'} />
        })}
        <text x="14" y="22" className="vu-txt">VU</text>
        <g style={{ transform: `rotate(${a}deg)`, transformOrigin: '80px 92px', transition: 'transform 80ms linear' }}>
          <line x1="80" y1="92" x2="80" y2="26" className="needle" />
        </g>
        <circle cx="80" cy="92" r="5" className="hub" />
      </svg>
    </figure>
  )
}

export default function TapeSite() {
  const root = useRef<HTMLDivElement>(null)
  const eng = useRef<Engine | null>(null)
  const raf = useRef(0)
  const [playing, setPlaying] = useState(false)
  const [tape, setTape] = useState(true)
  const [level, setLevel] = useState(5)
  const [tone, setTone] = useState(7)
  const [vu, setVu] = useState<[number, number]>([0, 0])
  const [secs, setSecs] = useState(0)
  const [finish, setFinish] = useState<(typeof FINISHES)[number]['id']>('charcoal')

  useSiteScroll(root, { smooth: false })

  useEffect(() => {
    if (!playing) return
    const id = window.setInterval(() => setSecs((s) => s + 1), 1000)
    return () => window.clearInterval(id)
  }, [playing])
  useEffect(() => () => {
    cancelAnimationFrame(raf.current)
    eng.current?.close()
  }, [])
  useEffect(() => eng.current?.setLevel(level / 10), [level])
  useEffect(() => eng.current?.setTone(tone / 10), [tone])
  useEffect(() => eng.current?.setTape(tape), [tape])

  const play = () => {
    if (!eng.current) {
      eng.current = createEngine()
      eng.current.setLevel(level / 10)
      eng.current.setTone(tone / 10)
      eng.current.setTape(tape)
    }
    eng.current.start()
    setPlaying(true)
    const buf = new Uint8Array(eng.current.analyser.fftSize)
    let sm = 0
    const read = () => {
      eng.current!.analyser.getByteTimeDomainData(buf)
      let peak = 0
      for (const v of buf) peak = Math.max(peak, Math.abs(v - 128) / 128)
      sm = Math.max(peak * 2.6, sm * 0.88)
      const v = Math.min(1, sm)
      setVu([v, Math.min(1, v * (0.88 + Math.random() * 0.2))])
      raf.current = requestAnimationFrame(read)
    }
    read()
  }
  const stop = () => {
    eng.current?.stop()
    cancelAnimationFrame(raf.current)
    setPlaying(false)
    setVu([0, 0])
  }
  const toggle = () => (playing ? stop() : play())

  useEffect(() => {
    const key = (e: KeyboardEvent) => {
      if (e.code === 'Space' && (e.target as HTMLElement).tagName === 'BODY') {
        e.preventDefault()
        toggle()
      }
    }
    window.addEventListener('keydown', key)
    return () => window.removeEventListener('keydown', key)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [playing])

  const mm = String(Math.floor(secs / 60)).padStart(2, '0')
  const ss = String(secs % 60).padStart(2, '0')

  return (
    <div className="site-tape" data-finish={finish} ref={root}>
      <header className="top">
        <a className="logo" href="#top">KESTREL<span>AUDIO</span></a>
        <nav aria-label="Sections">
          <a href="#deck">The deck</a>
          <a href="#why">Why tape</a>
          <a href="#specs">Specs</a>
          <a href="#own" className="buy-sm">Own one</a>
        </nav>
      </header>

      <main id="top">
        <section className="hero" aria-labelledby="h1">
          <div className="hero-copy">
            <p className="kicker">Model K-1 · Cassette deck</p>
            <h1 id="h1">Warm is a<br />mechanism.</h1>
            <p className="lede">A cassette deck rebuilt around one idea: the sound of tape is saturation, roll-off and a little wobble, and you should be able to switch each of them on.</p>
            <a className="cta" href="#deck">Try it below</a>
          </div>
        </section>

        <section className="deck-sec" id="deck" aria-labelledby="h2d">
          <h2 id="h2d" className="sr-only">The K-1, playable</h2>
          <div className="deck">
            <div className="window">
              <div className={`cassette ${playing ? 'run' : ''}`} aria-hidden>
                <div className="reel l"><i /><i /><i /></div>
                <div className="reel r"><i /><i /><i /></div>
                <div className="label">SIDE A · 92 BPM</div>
              </div>
              <div className="counter" role="timer" aria-label={`Tape counter ${mm} minutes ${ss} seconds`}>{mm}:{ss}</div>
            </div>
            <div className="meters"><Vu value={vu[0]} label="Left level" /><Vu value={vu[1]} label="Right level" /></div>
            <div className="transport" role="group" aria-label="Transport">
              <button className={`key ${playing ? 'down' : ''}`} onClick={toggle} aria-pressed={playing}>{playing ? 'Stop' : 'Play'}</button>
              <button className="key rec" disabled aria-label="Record (not on the demo)">Rec</button>
              <button className="key" onClick={() => setSecs(0)}>Reset</button>
            </div>
            <div className="controls">
              <label className="fader">Level
                <input type="range" min={0} max={10} value={level} onChange={(e) => setLevel(Number(e.target.value))} aria-valuetext={`${level} of 10`} />
                <span>{level}</span>
              </label>
              <label className="fader">Tone
                <input type="range" min={0} max={10} value={tone} onChange={(e) => setTone(Number(e.target.value))} aria-valuetext={`${tone} of 10`} />
                <span>{tone}</span>
              </label>
              <button className={`tapeswitch ${tape ? 'on' : ''}`} role="switch" aria-checked={tape} onClick={() => setTape((t) => !t)}>
                <span className="lamp" aria-hidden />Tape stage <b>{tape ? 'ON' : 'OFF'}</b>
              </button>
            </div>
          </div>
          <p className="deck-note">{reduced ? 'Reduced motion is on: the reels stay still, but the sound and meters work.' : 'Press Play (or Space). A generated loop at a low level. Switch the tape stage on and off while it runs.'}</p>
        </section>

        <section className="why" id="why" aria-labelledby="h2w">
          <h2 id="h2w">Three things make tape sound like tape.</h2>
          <ol>
            <li><h3>Saturation</h3><p>Loud peaks are rounded, not clipped. The signal bends at the top, which adds quiet harmonics and makes drums feel glued.</p></li>
            <li><h3>Roll-off</h3><p>The highest frequencies fade out. It is the reason old recordings feel soft instead of tired.</p></li>
            <li><h3>Wobble</h3><p>Transport speed drifts by a fraction of a percent. Held notes move, very slightly, the way a voice does.</p></li>
          </ol>
        </section>

        <section className="specs" id="specs" aria-labelledby="h2s">
          <h2 id="h2s">Specifications</h2>
          <dl>
            <div><dt>Heads</dt><dd>Three, hard permalloy</dd></div>
            <div><dt>Wow &amp; flutter</dt><dd>0.06% WRMS</dd></div>
            <div><dt>Frequency response</dt><dd>30 Hz to 18 kHz, Type II</dd></div>
            <div><dt>Noise reduction</dt><dd>Dolby B, C</dd></div>
            <div><dt>Outputs</dt><dd>RCA line, 6.3 mm headphone</dd></div>
            <div><dt>Weight</dt><dd>5.4 kg</dd></div>
          </dl>
        </section>

        <section className="own" id="own" aria-labelledby="h2o">
          <h2 id="h2o">Choose a finish.</h2>
          <div className="finishes" role="radiogroup" aria-label="Finish">
            {FINISHES.map((f) => (
              <button key={f.id} role="radio" aria-checked={finish === f.id} className={`sw ${f.id} ${finish === f.id ? 'on' : ''}`} onClick={() => setFinish(f.id)}>
                <span className="chip" aria-hidden />
                <b>{f.name}</b>
                <small>{f.note}</small>
              </button>
            ))}
          </div>
          <p className="price">£1,490 <small>Made to order · 10 weeks</small></p>
          <a className="cta" href="#top">Reserve a K-1</a>
        </section>
      </main>
      <footer className="foot">A fictional audio company. The K-1 does not exist; the loop is generated in your browser.</footer>
    </div>
  )
}


// ===== src/patterns/sites/tape/engine.ts =====
/*
 * A tiny drum-and-bass loop made with WebAudio, plus a "tape" stage: soft saturation, a low-pass roll-off and a
 * slow pitch wobble. Created only after a user gesture. Everything is generated; there are no audio files.
 */

export interface Engine {
  analyser: AnalyserNode
  start(): void
  stop(): void
  setLevel(v: number): void
  setTone(v: number): void
  setTape(on: boolean): void
  close(): void
  playing(): boolean
}

const BASS = [55, 55, 65.41, 55, 49, 49, 55, 73.42]

function curve(amount: number): Float32Array<ArrayBuffer> {
  const n = 1024
  const c = new Float32Array(n)
  for (let i = 0; i < n; i++) {
    const x = (i / (n - 1)) * 2 - 1
    c[i] = amount === 0 ? x : Math.tanh(x * (1 + amount * 4)) / Math.tanh(1 + amount * 4)
  }
  return c
}

export function createEngine(): Engine {
  const ac = new AudioContext()
  const bus = ac.createGain()
  const sat = ac.createWaveShaper()
  const lp = ac.createBiquadFilter()
  const master = ac.createGain()
  const analyser = ac.createAnalyser()
  analyser.fftSize = 512
  lp.type = 'lowpass'
  lp.frequency.value = 18000
  master.gain.value = 0.35
  sat.curve = curve(0)
  bus.connect(sat).connect(lp).connect(master).connect(analyser).connect(ac.destination)

  // slow pitch wobble, only audible when the tape stage is on
  const wow = ac.createOscillator()
  const wowDepth = ac.createGain()
  wow.frequency.value = 0.55
  wowDepth.gain.value = 0
  wow.connect(wowDepth)
  wow.start()

  const noise = ac.createBuffer(1, ac.sampleRate * 0.2, ac.sampleRate)
  const nd = noise.getChannelData(0)
  for (let i = 0; i < nd.length; i++) nd[i] = Math.random() * 2 - 1

  let on = false
  let step = 0
  let next = 0
  let timer = 0
  let tapeOn = false
  let toneV = 0.75
  const BPM = 92
  const sixteenth = 60 / BPM / 4

  const applyTone = () => {
    lp.frequency.value = tapeOn ? 1800 + toneV * 5200 : 18000
  }

  const kick = (t: number) => {
    const o = ac.createOscillator()
    const g = ac.createGain()
    o.type = 'sine'
    o.frequency.setValueAtTime(130, t)
    o.frequency.exponentialRampToValueAtTime(42, t + 0.14)
    g.gain.setValueAtTime(1, t)
    g.gain.exponentialRampToValueAtTime(0.001, t + 0.3)
    o.connect(g).connect(bus)
    o.start(t)
    o.stop(t + 0.32)
  }
  const hat = (t: number, open: boolean) => {
    const s = ac.createBufferSource()
    const hp = ac.createBiquadFilter()
    const g = ac.createGain()
    s.buffer = noise
    hp.type = 'highpass'
    hp.frequency.value = 7000
    g.gain.setValueAtTime(open ? 0.35 : 0.22, t)
    g.gain.exponentialRampToValueAtTime(0.001, t + (open ? 0.14 : 0.04))
    s.connect(hp).connect(g).connect(bus)
    s.start(t)
    s.stop(t + 0.16)
  }
  const bass = (t: number, f: number) => {
    const o = ac.createOscillator()
    const flt = ac.createBiquadFilter()
    const g = ac.createGain()
    o.type = 'sawtooth'
    o.frequency.value = f
    wowDepth.connect(o.detune)
    flt.type = 'lowpass'
    flt.frequency.setValueAtTime(900, t)
    flt.frequency.exponentialRampToValueAtTime(160, t + 0.22)
    g.gain.setValueAtTime(0.0001, t)
    g.gain.exponentialRampToValueAtTime(0.5, t + 0.01)
    g.gain.exponentialRampToValueAtTime(0.001, t + sixteenth * 3)
    o.connect(flt).connect(g).connect(bus)
    o.start(t)
    o.stop(t + sixteenth * 3.2)
  }

  const schedule = () => {
    while (next < ac.currentTime + 0.12) {
      const s = step % 16
      if ([0, 6, 10].includes(s)) kick(next)
      if (s % 2 === 1) hat(next, s % 8 === 7)
      if (s % 2 === 0) bass(next, BASS[(s / 2) % BASS.length] * (step % 64 >= 32 ? 1.122 : 1))
      next += sixteenth
      step += 1
    }
  }

  return {
    analyser,
    start() {
      if (on) return
      on = true
      void ac.resume()
      next = ac.currentTime + 0.05
      step = 0
      timer = window.setInterval(schedule, 25)
    },
    stop() {
      on = false
      window.clearInterval(timer)
    },
    setLevel(v) {
      master.gain.value = v * 0.55
    },
    setTone(v) {
      toneV = v
      applyTone()
    },
    setTape(t) {
      tapeOn = t
      sat.curve = curve(t ? 1 : 0)
      wowDepth.gain.value = t ? 14 : 0
      applyTone()
    },
    close() {
      window.clearInterval(timer)
      on = false
      void ac.close()
    },
    playing: () => on,
  }
}


// ===== src/patterns/sites/tape/styles.css =====
.site-tape { position: relative; min-height: 100svh; overflow-x: clip; }
.site-tape {
  --panel: #2a2822;
  --panel-2: #1b1a16;
  --cream: #e8d9a6;
  --amber: #ffb23f;
  --rec: #e0442e;
  --bg: #12110e;
  --ink: #f1e8c9;
  --muted: #a89f84;
  --sil: 'Oswald', 'Arial Narrow', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
.site-tape[data-finish='walnut'] { --panel: #4a2f1c; --panel-2: #2d1c10; --cream: #ead6a8; }
.site-tape[data-finish='cream'] { --panel: #d9ceb0; --panel-2: #b9ad8c; --cream: #2a2418; }
.site-tape * { box-sizing: border-box; margin: 0; padding: 0; }
.site-tape, .site-tape { background: var(--bg); color: var(--ink); font-family: var(--mono); -webkit-font-smoothing: antialiased; }
.site-tape a { color: inherit; text-decoration: none; }
.site-tape button, .site-tape input { font: inherit; color: inherit; }
.site-tape button { cursor: pointer; }
.site-tape :focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.site-tape .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-tape h1, .site-tape h2, .site-tape h3 { font-family: var(--sil); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 0.98; }
.site-tape .top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px clamp(16px, 4vw, 56px); border-bottom: 1px solid #2c2a22; position: sticky; top: 0; z-index: 40; background: var(--bg); }
.site-tape .logo { font-family: var(--sil); font-weight: 700; font-size: 24px; letter-spacing: 0.18em; }
.site-tape .logo span { margin-left: 10px; color: var(--amber); font-size: 13px; letter-spacing: 0.3em; font-weight: 500; }
.site-tape .top nav { display: flex; gap: 4px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; }
.site-tape .top nav a { display: grid; place-items: center; min-height: 44px; padding: 0 12px; }
.site-tape .top nav a:hover { color: var(--amber); }
.site-tape .buy-sm { border: 1px solid var(--amber); color: var(--amber); border-radius: 2px; }
.site-tape .hero { padding: clamp(56px, 10vw, 140px) clamp(16px, 4vw, 56px) clamp(24px, 4vw, 48px); }
.site-tape .kicker { font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); }
.site-tape .hero h1 { margin-top: 18px; font-size: clamp(64px, 11vw, 168px); }
.site-tape .lede { margin-top: 26px; max-width: 46ch; font-size: 16px; line-height: 1.7; color: var(--muted); }
.site-tape .cta { display: inline-grid; place-items: center; min-height: 52px; margin-top: 30px; padding: 0 28px; background: var(--amber); color: #1b1608; border: 0; border-radius: 2px; font-family: var(--sil); font-weight: 700; font-size: 18px; letter-spacing: 0.16em; text-transform: uppercase; }
.site-tape .cta:hover { background: #ffc566; }
.site-tape .deck-sec { padding: 24px clamp(16px, 4vw, 56px) clamp(56px, 8vw, 110px); }
.site-tape .deck { max-width: 920px; margin: 0 auto; padding: clamp(18px, 3vw, 34px); background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, #fff), var(--panel)); border: 1px solid #000; border-radius: 10px; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -3px 0 rgba(0, 0, 0, 0.35); display: grid; gap: 22px; }
.site-tape .deck, .site-tape .deck * { color: var(--cream); }
.site-tape .window { position: relative; padding: 14px; background: #0c0b09; border-radius: 6px; border: 2px solid #000; }
.site-tape .cassette { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 18px 26px; height: clamp(130px, 22vw, 190px); background: #3b382f; border-radius: 8px; place-items: center; }
.site-tape .cassette::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: 10px; height: 26px; background: #151410; border-radius: 3px; }
.site-tape .label { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); padding: 3px 14px; background: #e8d9a6; color: #2a2418 !important; font-family: var(--sil); letter-spacing: 0.2em; font-size: 12px; border-radius: 2px; }
.site-tape .reel { position: relative; width: clamp(64px, 11vw, 100px); aspect-ratio: 1; border-radius: 50%; background: #e8e2cc; border: 6px solid #1b1a16; }
.site-tape .reel i { position: absolute; top: 50%; left: 50%; width: 38%; height: 8%; background: #1b1a16; transform-origin: 0 50%; border-radius: 2px; }
.site-tape .reel i:nth-child(1) { transform: rotate(0deg); }
.site-tape .reel i:nth-child(2) { transform: rotate(120deg); }
.site-tape .reel i:nth-child(3) { transform: rotate(240deg); }
.site-tape .run .reel.l { animation: tape-spin 2.6s linear infinite; }
.site-tape .run .reel.r { animation: tape-spin 3.4s linear infinite; }
@keyframes tape-spin { to { transform: rotate(360deg); } }
.site-tape .counter { position: absolute; right: 22px; bottom: 20px; padding: 2px 10px; background: #1b0f08; color: var(--amber) !important; font-size: 22px; letter-spacing: 0.1em; border-radius: 2px; }
.site-tape .meters { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.site-tape .vu { margin: 0; aspect-ratio: 8 / 5; background: #e8d9a6; border: 3px solid #000; border-radius: 4px; overflow: hidden; }
.site-tape .vu svg { width: 100%; height: 100%; display: block; }
.site-tape .tick { stroke: #2a2418; stroke-width: 2; }
.site-tape .tick.hot { stroke: #b0331f; }
.site-tape .vu-txt { fill: #2a2418; font: 600 11px var(--mono); }
.site-tape .needle { stroke: #b0331f; stroke-width: 2; }
.site-tape .hub { fill: #2a2418; }
.site-tape .transport { display: flex; gap: 10px; flex-wrap: wrap; }
.site-tape .key { min-height: 56px; min-width: 110px; padding: 0 22px; background: linear-gradient(180deg, #d9cba0, #b7a977); border: 1px solid #000; border-bottom: 5px solid #5d5232; border-radius: 4px; color: #2a2418 !important; font-family: var(--sil); font-weight: 700; font-size: 18px; letter-spacing: 0.16em; text-transform: uppercase; }
.site-tape .key.down { border-bottom-width: 1px; transform: translateY(4px); background: linear-gradient(180deg, #ffc566, var(--amber)); }
.site-tape .key.rec { color: var(--rec) !important; }
.site-tape .key:disabled { opacity: 0.5; cursor: not-allowed; }
.site-tape .controls { display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px 24px; align-items: end; }
.site-tape .fader { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; font-family: var(--sil); letter-spacing: 0.22em; text-transform: uppercase; font-size: 14px; }
.site-tape .fader input { grid-column: 1 / -1; width: 100%; height: 44px; accent-color: var(--amber); }
.site-tape .fader span { font-family: var(--mono); letter-spacing: 0; }
.site-tape .tapeswitch { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 20px; background: var(--panel-2); border: 1px solid #000; border-radius: 4px; font-family: var(--sil); letter-spacing: 0.16em; text-transform: uppercase; }
.site-tape .tapeswitch b { font-family: var(--mono); letter-spacing: 0; min-width: 3ch; }
.site-tape .lamp { width: 12px; height: 12px; border-radius: 50%; background: #3a2a10; box-shadow: inset 0 0 0 1px #000; }
.site-tape .tapeswitch.on .lamp { background: var(--amber); box-shadow: 0 0 12px var(--amber), inset 0 0 0 1px #000; }
.site-tape .deck-note { max-width: 920px; margin: 18px auto 0; font-size: 13px; color: var(--muted); text-align: center; }
.site-tape .why { padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 56px); background: #1b1a16; border-top: 1px solid #2c2a22; }
.site-tape .why h2, .site-tape .specs h2, .site-tape .own h2 { font-size: clamp(40px, 6vw, 84px); max-width: 16ch; }
.site-tape .why ol { list-style: none; margin-top: 40px; display: grid; gap: 0; max-width: 820px; }
.site-tape .why li { display: grid; grid-template-columns: 11rem 1fr; gap: 24px; padding: 26px 0; border-top: 1px solid #36332a; }
.site-tape .why li:last-child { border-bottom: 1px solid #36332a; }
.site-tape .why h3 { font-size: 28px; color: var(--amber); }
.site-tape .why p { font-size: 15px; line-height: 1.75; color: var(--muted); max-width: 52ch; }
.site-tape .specs { padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 56px); }
.site-tape .specs dl { margin-top: 36px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 40px; max-width: 980px; }
.site-tape .specs dl div { padding: 16px 0; border-bottom: 1px solid #36332a; display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.site-tape .specs dt { color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; }
.site-tape .specs dd { text-align: right; }
.site-tape .own { padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 56px); background: #1b1a16; border-top: 1px solid #2c2a22; }
.site-tape .finishes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.site-tape .sw { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; min-width: 240px; padding: 14px 18px; background: transparent; border: 1px solid #3a372d; border-radius: 3px; text-align: left; }
.site-tape .sw.on { border-color: var(--amber); }
.site-tape .sw .chip { grid-row: span 2; width: 38px; height: 38px; border-radius: 4px; border: 1px solid #000; }
.site-tape .sw.charcoal .chip { background: #2a2822; }
.site-tape .sw.walnut .chip { background: #4a2f1c; }
.site-tape .sw.cream .chip { background: #d9ceb0; }
.site-tape .sw b { font-family: var(--sil); font-size: 20px; letter-spacing: 0.14em; text-transform: uppercase; }
.site-tape .sw small { color: var(--muted); font-size: 12px; }
.site-tape .price { margin-top: 30px; font-family: var(--sil); font-size: 44px; letter-spacing: 0.04em; }
.site-tape .price small { font-family: var(--mono); font-size: 13px; color: var(--muted); letter-spacing: 0; margin-left: 12px; }
.site-tape .foot { padding: 32px clamp(16px, 4vw, 56px) 48px; font-size: 13px; color: var(--muted); border-top: 1px solid #2c2a22; }
@media (max-width: 760px) {
.site-tape .logo span { display: none; }
.site-tape .controls { grid-template-columns: minmax(0, 1fr); }
.site-tape .why li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.site-tape .meters { gap: 8px; }
.site-tape .label { white-space: nowrap; font-size: 10px; letter-spacing: 0.12em; padding: 3px 8px; top: 8px; }
.site-tape .cassette { padding: 36px 14px 18px; height: 150px; }
.site-tape .counter { right: 12px; bottom: 12px; font-size: 16px; }
.site-tape .top nav a { white-space: nowrap; font-size: 11px; letter-spacing: 0.06em; padding: 0 6px; }
.site-tape .top nav a:nth-child(2) { display: none; }
.site-tape .logo { font-size: 20px; letter-spacing: 0.12em; }
}
@media (prefers-reduced-motion: reduce) {
.site-tape .run .reel { animation: none; }
}
```


## Helper it imports: `src/patterns/sites/_shared.ts`

```ts
import { useEffect, type RefObject } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import Lenis from 'lenis'

/* Helpers shared by the whole-site demos in this folder. They are full pages, so they scroll the window,
   and they must coexist with UI Lab's own hash router and clean up completely when you leave. */

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/**
 * Smooth scroll (Lenis, driven by GSAP's ticker so ScrollTrigger stays in sync) plus in-page anchor links.
 * Anchor clicks are handled here instead of by the browser: UI Lab's router lives in the URL hash,
 * so a real `#section` navigation would be read as a route change.
 * Everything is torn down on unmount.
 */
export function useSiteScroll(root: RefObject<HTMLElement | null>, { smooth = true, lerp = 0.1 } = {}) {
  useEffect(() => {
    const el = root.current
    if (!el) return
    let lenis: Lenis | null = null
    let tick: ((t: number) => void) | null = null
    if (smooth && !reducedMotion()) {
      lenis = new Lenis({ lerp })
      lenis.on('scroll', ScrollTrigger.update)
      tick = (t: number) => lenis!.raf(t * 1000)
      gsap.ticker.add(tick)
      gsap.ticker.lagSmoothing(0)
    }
    const onClick = (e: MouseEvent) => {
      const a = (e.target as HTMLElement).closest<HTMLAnchorElement>('a[href^="#"]')
      if (!a || !el.contains(a)) return
      const id = a.getAttribute('href')!.slice(1)
      if (id.startsWith('/')) return // a UI Lab route, let it through
      e.preventDefault()
      const target = id ? el.querySelector<HTMLElement>(`#${CSS.escape(id)}`) : null
      if (!target) return
      if (lenis) lenis.scrollTo(target)
      else target.scrollIntoView({ behavior: 'smooth' })
    }
    el.addEventListener('click', onClick)
    return () => {
      el.removeEventListener('click', onClick)
      if (tick) gsap.ticker.remove(tick)
      gsap.ticker.lagSmoothing(500, 33) // GSAP's default
      lenis?.destroy()
      ScrollTrigger.getAll().forEach((t) => t.kill())
    }
  }, [root, smooth, lerp])
}
```

# Site: THE LEDGER (broadsheet newsletter)
> A finance newsletter set as a broadsheet: masthead, ruled columns, a markets table with sign-and-arrow change, a long essay with justified hyphenated text, marginal sidenotes, a reading progress rule and a text-size control.
- **Category:** Sites
- **Slug:** site-ledger
- **Tags:** site, full page, niche world, broadsheet, editorial, newspaper, reading, sidenotes, table, newsletter, serif
- **Dependencies:** @fontsource-variable/newsreader, @fontsource-variable/libre-franklin, sites/_shared.ts
- **Live demo:** https://ui-lab-weld.vercel.app/#/site-ledger
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sites/ledger/index.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sites/ledger/index.tsx
- **Raw files:** https://ui-lab-weld.vercel.app/raw/sites/ledger/index.tsx, https://ui-lab-weld.vercel.app/raw/sites/ledger/styles.css

## When to use
- Publications, newsletters, journals, long-form and reference products where the job is reading
- Reference for sidenotes that sit in the margin on wide screens and inline on narrow ones, a transform-driven progress rule, and a table that does not rely on colour

## Accessibility

Real headings and landmarks; sidenotes are linked asides; text size is a radio group; the markets table has caption, scoped headers and states change with sign and arrow, not colour; the form has a label, aria-invalid and a live status; the progress rule is decorative.


## Source
Files: `src/patterns/sites/ledger/index.tsx`, `src/patterns/sites/ledger/styles.css`
```tsx
// ===== src/patterns/sites/ledger/index.tsx =====
import { useEffect, useMemo, useRef, useState } from 'react'
import '@fontsource-variable/newsreader'
import '@fontsource-variable/newsreader/wght-italic.css'
import '@fontsource-variable/libre-franklin'
import './styles.css'
import { useSiteScroll } from '../_shared'

/*
 * THE LEDGER: a small finance newsletter set as a broadsheet. World 12 (Broadsheet), the Read-mode proof.
 * Signature: reading is the interface. A progress rule, text-size control, marginal sidenotes instead of footnotes,
 * justified hyphenated columns, and a markets table where change is shown by sign and arrow, not colour alone.
 */

const MARKETS: [string, string, number, number[]][] = [
  ['Nifty 50', '24,812', 0.4, [10, 12, 11, 14, 13, 16, 18, 17, 20]],
  ['Sensex', '81,340', 0.3, [8, 9, 12, 11, 13, 14, 13, 16, 17]],
  ['Gold, 10 g', '74,120', -0.1, [18, 17, 19, 16, 17, 15, 16, 15, 14]],
  ['Brent', '81.4', 1.2, [9, 8, 10, 9, 12, 11, 14, 15, 16]],
  ['USD / INR', '83.6', 0.0, [12, 12, 13, 12, 12, 13, 12, 12, 12]],
  ['10-yr G-sec', '7.02%', -0.02, [14, 15, 14, 13, 14, 12, 13, 12, 12]],
]

const SIDENOTES = [
  'Reserves rose from $571bn to $646bn over the two years the essay covers. The central bank does not publish daily intervention figures.',
  'A currency that moves less than its peers is not necessarily strong. It may simply be managed.',
  'The 2013 taper episode is the usual comparison. It is a poor one: the current account deficit then was more than three times today’s.',
]

const SIZES = [
  ['S', 16],
  ['M', 18],
  ['L', 21],
] as const

function Spark({ pts, up }: { pts: number[]; up: boolean }) {
  const d = pts.map((y, i) => `${i === 0 ? 'M' : 'L'}${(i / (pts.length - 1)) * 60} ${24 - y}`).join('')
  return (
    <svg viewBox="0 0 60 26" className="spark" aria-hidden>
      <path d={d} fill="none" stroke="currentColor" strokeWidth="1.5" strokeDasharray={up ? undefined : '0'} />
    </svg>
  )
}

export default function LedgerSite() {
  const root = useRef<HTMLDivElement>(null)
  const art = useRef<HTMLElement>(null)
  const bar = useRef<HTMLDivElement>(null)
  const [size, setSize] = useState(18)
  const [email, setEmail] = useState('')
  const [state, setState] = useState<'idle' | 'bad' | 'ok'>('idle')

  useSiteScroll(root, { smooth: false })

  useEffect(() => {
    let raf = 0
    const update = () => {
      raf = 0
      const a = art.current
      if (!a || !bar.current) return
      const r = a.getBoundingClientRect()
      const total = r.height - window.innerHeight * 0.6
      const p = Math.max(0, Math.min(1, (window.innerHeight * 0.2 - r.top) / Math.max(1, total)))
      bar.current.style.transform = `scaleX(${p})`
    }
    const on = () => {
      if (!raf) raf = requestAnimationFrame(update)
    }
    window.addEventListener('scroll', on, { passive: true })
    update()
    return () => {
      window.removeEventListener('scroll', on)
      cancelAnimationFrame(raf)
    }
  }, [])

  const date = useMemo(() => new Intl.DateTimeFormat('en-GB', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }).format(new Date()), [])

  return (
    <div className="site-ledger" ref={root}>
      <div className="prog" aria-hidden><div ref={bar} className="prog-bar" /></div>
      <header className="mast">
        <p className="strap"><span>Vol. XII · No. 214</span><span>{date}</span><span>Mumbai</span></p>
        <h1 className="title">The Ledger</h1>
        <nav className="sections" aria-label="Sections">
          <a href="#front">Front page</a>
          <a href="#markets">Markets</a>
          <a href="#essay">The essay</a>
          <a href="#letters">Letters</a>
          <a href="#subscribe" className="sub">Subscribe</a>
        </nav>
      </header>

      <main>
        <section id="front" className="front" aria-labelledby="lead">
          <article className="lead">
            <p className="kicker">Economics</p>
            <h2 id="lead">A currency that refuses to move, and the price of that stillness</h2>
            <p className="deck">For two years the rupee has traded in a band so narrow that traders stopped quoting the range. The calm is deliberate, and it is not free.</p>
            <p className="by">By the Economics Desk · <a href="#essay">Read the essay, 9 min</a></p>
          </article>
          <article className="side">
            <p className="kicker">Business</p>
            <h3>Small lenders quietly tighten the screws</h3>
            <p>Microfinance books grew twice as fast as incomes last year. This quarter the loan officers stopped saying yes.</p>
          </article>
          <article className="side">
            <p className="kicker">Policy</p>
            <h3>The budget’s smallest line is its biggest bet</h3>
            <p>Four hundred crore for a payments rail nobody has built yet, and the argument for why it might be the best money spent.</p>
          </article>
        </section>

        <section id="markets" className="markets" aria-labelledby="mk">
          <h2 id="mk">Markets</h2>
          <table>
            <caption className="sr-only">Closing levels and change</caption>
            <thead><tr><th scope="col">Instrument</th><th scope="col" className="n">Close</th><th scope="col" className="n">Change</th><th scope="col"><span className="sr-only">Trend, last nine sessions</span></th></tr></thead>
            <tbody>
              {MARKETS.map(([n, v, c, p]) => (
                <tr key={n}>
                  <th scope="row">{n}</th>
                  <td className="n">{v}</td>
                  <td className="n chg">{c > 0 ? '▲ +' : c < 0 ? '▼ ' : '– '}{Math.abs(c).toFixed(2)}%</td>
                  <td className="tr"><Spark pts={p} up={c >= 0} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>

        <article id="essay" className="essay" ref={art} style={{ ['--fs' as string]: `${size}px` }} aria-labelledby="et">
          <header>
            <p className="kicker">The essay</p>
            <h2 id="et">The price of a quiet rupee</h2>
            <div className="ctl" role="radiogroup" aria-label="Text size">
              Text size
              {SIZES.map(([l, px]) => <button key={l} role="radio" aria-checked={size === px} className={size === px ? 'on' : ''} onClick={() => setSize(px)} aria-label={`${l === 'S' ? 'Small' : l === 'M' ? 'Medium' : 'Large'} text`}>{l}</button>)}
            </div>
          </header>
          <div className="body">
            <div className="blk"><p className="first">The rupee has spent most of the year doing very little, which is itself the story. Traders who expected a swing in either direction found a currency that moved the way a tide does, slowly and with a predictable return.<sup><a href="#sn1" id="r1">1</a></sup></p><aside id="sn1" className="sn"><b>1</b> {SIDENOTES[0]}</aside></div>
            <p>Behind the calm sits a central bank that has been quietly buying dollars on every dip, building a cushion that few outside the market appreciate. The cost is real, and it is paid in the form of reserves that cannot be spent twice.</p>
            <div className="blk"><p>Economists disagree about how long the arrangement can last. Some argue that a stable currency is worth almost any price; others point out that stability purchased with reserves is borrowed against the next shock.<sup><a href="#sn2" id="r2">2</a></sup></p><aside id="sn2" className="sn"><b>2</b> {SIDENOTES[1]}</aside></div>
            <blockquote>“Stability bought with reserves is borrowed against the next shock.”</blockquote>
            <div className="blk"><p>What both camps accept is that the margin for error is shrinking. A single bad quarter of exports, or one oil spike that lasts a month rather than a week, would test the cushion in ways the last two years have not.<sup><a href="#sn3" id="r3">3</a></sup></p><aside id="sn3" className="sn"><b>3</b> {SIDENOTES[2]}</aside></div>
            <p>For households the lesson is more modest. A steady rupee has made imported goods predictable, and the habit of planning around it has spread. The risk is that planning becomes assumption, and that the first year of movement arrives as a surprise to everyone who stopped watching.</p>
          </div>
        </article>

        <section id="letters" className="letters" aria-labelledby="lt">
          <h2 id="lt">Letters</h2>
          <div className="cols">
            <blockquote><p>Your piece on microfinance was the first to mention the loan officers. They are the early warning, not the footnote.</p><cite>R. Nair, Kochi</cite></blockquote>
            <blockquote><p>Please stop putting the ticker above the fold. I came for the essay and I stayed for the weather.</p><cite>A. Dsouza, Pune</cite></blockquote>
          </div>
        </section>

        <section id="subscribe" className="subscribe" aria-labelledby="sb">
          <h2 id="sb">Subscribe to the morning edition</h2>
          <p>One email at 6am. The numbers, one essay, no adverts.</p>
          <form
            noValidate
            onSubmit={(e) => {
              e.preventDefault()
              setState(/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email) ? 'ok' : 'bad')
            }}
          >
            <label htmlFor="em">Email address</label>
            <div className="row">
              <input id="em" type="email" autoComplete="email" value={email} onChange={(e) => { setEmail(e.target.value); setState('idle') }} aria-invalid={state === 'bad'} aria-describedby="em-msg" />
              <button>Subscribe</button>
            </div>
            <p id="em-msg" role={state === 'bad' ? 'alert' : 'status'}>{state === 'bad' ? 'Please enter a valid email address.' : state === 'ok' ? 'Welcome. The first edition arrives tomorrow at 6am.' : ' '}</p>
          </form>
        </section>
      </main>
      <footer className="foot">The Ledger is a fictional publication. Figures are illustrative.</footer>
    </div>
  )
}


// ===== src/patterns/sites/ledger/styles.css =====
.site-ledger { position: relative; min-height: 100svh; overflow-x: clip; }
.site-ledger {
  --paper: #f3eee0;
  --ink: #1a1712;
  --red: #b3261e;
  --grey: #6b655a;
  --rule: #1a1712;
  --serif: 'Newsreader Variable', Georgia, serif;
  --sans: 'Libre Franklin Variable', system-ui, sans-serif;
}
.site-ledger * { box-sizing: border-box; margin: 0; padding: 0; }
.site-ledger, .site-ledger { background: var(--paper); color: var(--ink); font-family: var(--serif); -webkit-font-smoothing: antialiased; }
.site-ledger a { color: inherit; }
.site-ledger button, .site-ledger input { font: inherit; color: inherit; }
.site-ledger button { cursor: pointer; }
.site-ledger :focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.site-ledger .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-ledger .kicker { font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.site-ledger .prog { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 60; background: transparent; }
.site-ledger .prog-bar { height: 100%; background: var(--red); transform-origin: left; transform: scaleX(0); }
.site-ledger .mast { padding: 18px clamp(16px, 4vw, 56px) 0; text-align: center; }
.site-ledger .strap { display: flex; justify-content: space-between; gap: 12px; font-family: var(--sans); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.site-ledger .title { margin-top: 8px; padding: 6px 0 4px; border-top: 4px solid var(--rule); border-bottom: 1px solid var(--rule); font-weight: 800; font-size: clamp(64px, 12vw, 168px); line-height: 1; letter-spacing: -0.03em; font-variation-settings: 'opsz' 72; }
.site-ledger .sections { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 6px; padding: 6px 0; border-bottom: 4px double var(--rule); font-family: var(--sans); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.site-ledger .sections a { display: grid; place-items: center; min-height: 44px; padding: 0 14px; text-decoration: none; }
.site-ledger .sections a:hover { color: var(--red); text-decoration: underline; text-underline-offset: 4px; }
.site-ledger .sections .sub { background: var(--ink); color: var(--paper); }
.site-ledger .sections .sub:hover { background: var(--red); color: var(--paper); text-decoration: none; }
.site-ledger .front { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 0 clamp(16px, 4vw, 56px); }
.site-ledger .front > article { padding: 28px 24px; border-right: 1px solid var(--rule); }
.site-ledger .front > article:first-child { padding-left: 0; }
.site-ledger .front > article:last-child { border-right: 0; padding-right: 0; }
.site-ledger .lead h2 { margin-top: 10px; font-size: clamp(36px, 5vw, 68px); line-height: 1.02; font-weight: 800; letter-spacing: -0.02em; font-variation-settings: 'opsz' 72; }
.site-ledger .deck { margin-top: 16px; font-size: 21px; line-height: 1.4; font-style: italic; color: #3a352b; max-width: 40ch; }
.site-ledger .by { margin-top: 14px; font-family: var(--sans); font-size: 13px; color: var(--grey); }
.site-ledger .side h3 { margin-top: 8px; font-size: 26px; line-height: 1.1; font-weight: 700; }
.site-ledger .side p:not(.kicker) { margin-top: 10px; font-size: 16px; line-height: 1.5; color: #3a352b; }
.site-ledger .markets { padding: 28px clamp(16px, 4vw, 56px); border-top: 4px double var(--rule); border-bottom: 1px solid var(--rule); background: #ece5d0; }
.site-ledger .markets h2, .site-ledger .letters h2, .site-ledger .subscribe h2 { font-family: var(--sans); font-size: 14px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 14px; }
.site-ledger .markets table { width: min(100%, 900px); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.site-ledger .markets th, .site-ledger .markets td { padding: 11px 10px; border-bottom: 1px solid rgba(26, 23, 18, 0.35); text-align: left; font-size: 17px; }
.site-ledger .markets thead th { font-family: var(--sans); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); font-weight: 600; }
.site-ledger .markets tbody th { font-weight: 600; }
.site-ledger .markets .n { text-align: right; font-family: var(--sans); }
.site-ledger .markets .tr { width: 90px; color: var(--ink); }
.site-ledger .spark { width: 60px; height: 26px; display: block; }
.site-ledger .essay { max-width: 1180px; margin: 0 auto; padding: 56px clamp(16px, 4vw, 56px) 40px; --fs: 18px; }
.site-ledger .essay h2 { margin-top: 10px; font-size: clamp(40px, 6vw, 80px); line-height: 1; font-weight: 800; letter-spacing: -0.02em; font-variation-settings: 'opsz' 72; }
.site-ledger .ctl { display: flex; align-items: center; gap: 6px; margin-top: 18px; font-family: var(--sans); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.site-ledger .ctl button { min-width: 44px; min-height: 44px; background: transparent; border: 1px solid var(--ink); border-radius: 2px; font-weight: 700; }
.site-ledger .ctl button.on { background: var(--ink); color: var(--paper); }
.site-ledger .body { position: relative; margin-top: 32px; max-width: 38em; font-size: var(--fs); line-height: 1.65; hyphens: auto; text-align: justify; padding-right: 0; }
.site-ledger .blk { position: relative; }
.site-ledger .body p:not(.first) { text-indent: 1.4em; }
.site-ledger .body p.first::first-letter { float: left; font-size: 4.7em; line-height: 0.82; padding: 0.05em 0.1em 0 0; font-weight: 800; }
.site-ledger .body sup a { font-family: var(--sans); font-size: 0.65em; color: var(--red); text-decoration: none; padding: 0 2px; display: inline-grid; min-width: 1.2em; }
.site-ledger .body blockquote { margin: 1.2em 0; padding: 0.8em 0; border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule); font-size: 1.5em; line-height: 1.25; font-style: italic; text-align: center; font-weight: 600; }
.site-ledger .sn { margin: 0.6em 0; padding: 0.6em 0.9em; background: #ece5d0; border-left: 3px solid var(--red); font-family: var(--sans); font-size: 0.78em; line-height: 1.5; text-align: left; hyphens: manual; }
.site-ledger .sn b { color: var(--red); margin-right: 4px; }
@media (min-width: 1100px) {
.site-ledger .sn { position: absolute; left: calc(100% + 36px); width: 15rem; margin: 0; background: transparent; border-left: 0; border-top: 1px solid var(--red); padding: 8px 0 0; font-size: 14px; }
.site-ledger .body { padding-right: 0; }
.site-ledger .blk .sn { top: 0.3em; }
}
.site-ledger .letters { padding: 36px clamp(16px, 4vw, 56px); border-top: 4px double var(--rule); }
.site-ledger .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; max-width: 900px; }
.site-ledger .cols blockquote { padding: 0 28px; border-left: 1px solid var(--rule); font-size: 17px; line-height: 1.55; }
.site-ledger .cols blockquote:first-child { padding-left: 0; border-left: 0; }
.site-ledger .cols cite { display: block; margin-top: 10px; font-family: var(--sans); font-style: normal; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); }
.site-ledger .subscribe { padding: 44px clamp(16px, 4vw, 56px) 56px; background: var(--ink); color: var(--paper); }
.site-ledger .subscribe h2 { font-family: var(--serif); text-transform: none; letter-spacing: -0.01em; font-size: clamp(30px, 4vw, 52px); font-weight: 800; margin-bottom: 10px; }
.site-ledger .subscribe p { color: #cfc7b0; }
.site-ledger .subscribe form { margin-top: 24px; max-width: 560px; }
.site-ledger .subscribe label { font-family: var(--sans); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.site-ledger .row { display: flex; gap: 8px; margin-top: 8px; }
.site-ledger .row input { flex: 1; min-height: 52px; padding: 0 14px; background: var(--paper); color: var(--ink); border: 0; border-radius: 2px; font-size: 17px; }
.site-ledger .row button { min-height: 52px; padding: 0 24px; background: var(--red); color: #fff; border: 0; border-radius: 2px; font-family: var(--sans); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; }
.site-ledger .subscribe form p { min-height: 1.6em; margin-top: 10px; font-family: var(--sans); font-size: 14px; }
.site-ledger .foot { padding: 20px clamp(16px, 4vw, 56px) 40px; font-family: var(--sans); font-size: 12px; color: var(--grey); }
@media (max-width: 860px) {
.site-ledger .front { grid-template-columns: minmax(0, 1fr); }
.site-ledger .front > article { border-right: 0; border-bottom: 1px solid var(--rule); padding: 22px 0; }
.site-ledger .strap span:nth-child(3) { display: none; }
.site-ledger .cols { grid-template-columns: minmax(0, 1fr); }
.site-ledger .cols blockquote { padding: 16px 0; border-left: 0; border-top: 1px solid var(--rule); }
.site-ledger .body { text-align: left; }
}
```


## Helper it imports: `src/patterns/sites/_shared.ts`

```ts
import { useEffect, type RefObject } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import Lenis from 'lenis'

/* Helpers shared by the whole-site demos in this folder. They are full pages, so they scroll the window,
   and they must coexist with UI Lab's own hash router and clean up completely when you leave. */

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/**
 * Smooth scroll (Lenis, driven by GSAP's ticker so ScrollTrigger stays in sync) plus in-page anchor links.
 * Anchor clicks are handled here instead of by the browser: UI Lab's router lives in the URL hash,
 * so a real `#section` navigation would be read as a route change.
 * Everything is torn down on unmount.
 */
export function useSiteScroll(root: RefObject<HTMLElement | null>, { smooth = true, lerp = 0.1 } = {}) {
  useEffect(() => {
    const el = root.current
    if (!el) return
    let lenis: Lenis | null = null
    let tick: ((t: number) => void) | null = null
    if (smooth && !reducedMotion()) {
      lenis = new Lenis({ lerp })
      lenis.on('scroll', ScrollTrigger.update)
      tick = (t: number) => lenis!.raf(t * 1000)
      gsap.ticker.add(tick)
      gsap.ticker.lagSmoothing(0)
    }
    const onClick = (e: MouseEvent) => {
      const a = (e.target as HTMLElement).closest<HTMLAnchorElement>('a[href^="#"]')
      if (!a || !el.contains(a)) return
      const id = a.getAttribute('href')!.slice(1)
      if (id.startsWith('/')) return // a UI Lab route, let it through
      e.preventDefault()
      const target = id ? el.querySelector<HTMLElement>(`#${CSS.escape(id)}`) : null
      if (!target) return
      if (lenis) lenis.scrollTo(target)
      else target.scrollIntoView({ behavior: 'smooth' })
    }
    el.addEventListener('click', onClick)
    return () => {
      el.removeEventListener('click', onClick)
      if (tick) gsap.ticker.remove(tick)
      gsap.ticker.lagSmoothing(500, 33) // GSAP's default
      lenis?.destroy()
      ScrollTrigger.getAll().forEach((t) => t.kill())
    }
  }, [root, smooth, lerp])
}
```

# Site: HARROW SOUND (tide and pilotage)
> A harbour authority page where the chart is the tool: pick a vessel draft, scrub the time of day, and a generated seabed redraws as the tide moves. Land dries, shallows turn hazard-pink, and a plain sentence says whether the channel is safe to enter.
- **Category:** Sites
- **Slug:** site-tidewater
- **Tags:** site, full page, niche world, nautical chart, tide, canvas, marching squares, operate, form, data
- **Dependencies:** @fontsource-variable/newsreader, @fontsource/ibm-plex-mono, sites/_shared.ts
- **Live demo:** https://ui-lab-weld.vercel.app/#/site-tidewater
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sites/tidewater/index.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sites/tidewater/index.tsx
- **Raw files:** https://ui-lab-weld.vercel.app/raw/sites/tidewater/index.tsx, https://ui-lab-weld.vercel.app/raw/sites/tidewater/chart.ts, https://ui-lab-weld.vercel.app/raw/sites/tidewater/styles.css

## When to use
- Operate-mode pages for utilities, transport and field services where a small calculator decides the visit
- Reference for a canvas tint field under SVG contours (marching squares), a tide model, and a verdict written in words and symbols

## Accessibility

The chart has a text alternative that states time, tide, limiting depth and the verdict; the same information is in the readout and a role=status sentence; draft is a radio group; time is a native range with aria-valuetext; the tide table is a real table; the form has labels, aria-invalid and an alert.


## Source
Files: `src/patterns/sites/tidewater/index.tsx`, `src/patterns/sites/tidewater/chart.ts`, `src/patterns/sites/tidewater/styles.css`
```tsx
// ===== src/patterns/sites/tidewater/index.tsx =====
import { useEffect, useMemo, useRef, useState } from 'react'
import '@fontsource-variable/newsreader'
import '@fontsource-variable/newsreader/wght-italic.css'
import '@fontsource/ibm-plex-mono/400.css'
import '@fontsource/ibm-plex-mono/500.css'
import './styles.css'
import { useSiteScroll } from '../_shared'
import { H, N, W, contour, extremes, hhmm, sample, seabed, tideAt } from './chart'

/*
 * HARROW SOUND: a harbour authority's tide and pilotage page. World 20 (Nautical Chart), the Operate-mode proof.
 * Signature: the chart is the tool. Pick your vessel's draft, scrub the time of day, and the generated seabed redraws:
 * land dries, shallows turn hazard-pink, and a plain sentence says whether the channel is safe to enter.
 * The chart is a canvas for the tints and SVG for the contours, so the numbers stay real text.
 */

const DRAFTS = [1.2, 2.5, 3.5, 4.5]
const CLEARANCE = 0.6
const CHANNEL = [0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.59, 0.62, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9].map((u) => [u, 0.42 + 0.26 * u] as const)

function tint(a: number, danger: number): [number, number, number] {
  if (a < 0) return [230, 211, 163] // dries
  if (a < danger) return [221, 170, 196] // too shallow for this vessel
  if (a < 4) return [207, 231, 226]
  if (a < 9) return [190, 224, 220]
  if (a < 15) return [166, 211, 212]
  return [136, 188, 196]
}

export default function TidewaterSite() {
  const root = useRef<HTMLDivElement>(null)
  const cv = useRef<HTMLCanvasElement>(null)
  const [t, setT] = useState(9)
  const [draft, setDraft] = useState(2.5)
  const [vessel, setVessel] = useState('')
  const [eta, setEta] = useState('')
  const [sent, setSent] = useState<'idle' | 'bad' | 'ok'>('idle')

  useSiteScroll(root, { smooth: false })

  const f = useMemo(seabed, [])
  const tide = tideAt(t)
  const danger = draft + CLEARANCE
  const lines = useMemo(() => [0, 5, 10, 15, 20].map((l) => [l, contour(f, l)] as const), [f])
  const ex = useMemo(extremes, [])
  const rising = tideAt(t + 0.1) > tide

  const limiting = useMemo(() => Math.min(...CHANNEL.map(([u, v]) => sample(f, u * (N - 1), v * (N - 1)) + tide)), [f, tide])
  const safe = limiting >= danger

  useEffect(() => {
    const c = cv.current
    if (!c) return
    const cw = 280
    const ch = Math.round(cw * (H / W))
    c.width = cw
    c.height = ch
    const g = c.getContext('2d')!
    const img = g.createImageData(cw, ch)
    for (let y = 0; y < ch; y++)
      for (let x = 0; x < cw; x++) {
        const a = sample(f, (x / (cw - 1)) * (N - 1), (y / (ch - 1)) * (N - 1)) + tide
        const [r, gg, b] = tint(a, danger)
        const i = (y * cw + x) * 4
        img.data[i] = r
        img.data[i + 1] = gg
        img.data[i + 2] = b
        img.data[i + 3] = 255
      }
    g.putImageData(img, 0, 0)
  }, [f, tide, danger])

  const soundings = useMemo(
    () =>
      Array.from({ length: 16 }, (_, i) => {
        const gx = 3 + ((i * 7) % 42)
        const gy = 3 + ((i * 11) % 42)
        return { x: (gx / (N - 1)) * W, y: (gy / (N - 1)) * H, d: f[gy * N + gx] }
      }),
    [f],
  )

  const next = ex.find((e) => e.t > t) ?? ex[0]

  return (
    <div className="site-tidewater" ref={root}>
      <header className="top">
        <a href="#top" className="logo">Harrow Sound <span>Harbour Authority</span></a>
        <nav aria-label="Sections">
          <a href="#planner">Tide planner</a>
          <a href="#table">Tide table</a>
          <a href="#pilot">Pilotage</a>
          <a href="#notices">Notices</a>
        </nav>
      </header>

      <main id="top">
        <section className="hero" aria-labelledby="h1">
          <p className="kicker">Chart datum, metres. Times local.</p>
          <h1 id="h1">Know the water before you leave the berth.</h1>
          <p className="lede">The channel into Harrow Sound moves with the tide. Choose your draft, set the time you will arrive, and see on the chart whether there is water under you.</p>
          <a className="cta" href="#planner">Open the planner</a>
        </section>

        <section className="planner" id="planner" aria-labelledby="h2p">
          <h2 id="h2p">Tide planner</h2>
          <div className="plan-grid">
            <figure className="chart">
              <div className="chart-box">
                <canvas ref={cv} aria-hidden />
                <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={`Chart of Harrow Sound at ${hhmm(t)}. Tide ${tide.toFixed(1)} metres. Limiting depth in the channel ${limiting.toFixed(1)} metres. ${safe ? 'Safe to enter' : 'Not safe to enter'} for a ${draft} metre draft.`}>
                  {lines.map(([l, d]) => (
                    <path key={l} d={d} fill="none" stroke="#2a5b6b" strokeWidth={l === 0 ? 1.8 : 0.8} opacity={l === 0 ? 0.95 : 0.55} />
                  ))}
                  {CHANNEL.map(([u, v], i) => (i === 0 ? null : <line key={i} x1={CHANNEL[i - 1][0] * W} y1={CHANNEL[i - 1][1] * H} x2={u * W} y2={v * H} stroke="#a22b63" strokeWidth="1.4" strokeDasharray="5 4" />))}
                  <text x={0.62 * W} y={(0.42 + 0.26 * 0.62) * H - 16} fontSize="10" textAnchor="middle" className="snd" fontWeight="500">THE BAR</text>
                  {soundings.map((s, i) => (
                    <text key={i} x={s.x} y={s.y} fontSize="9" textAnchor="middle" className="snd">{Math.abs(s.d).toFixed(0)}{s.d < 0 ? 'D' : ''}</text>
                  ))}
                  <rect x="2" y="2" width={W - 4} height={H - 4} fill="none" stroke="#11303a" strokeWidth="1.5" />
                </svg>
              </div>
              <figcaption>Generated chart. Magenta dashes are the dredged channel; soundings are metres below chart datum, D marks ground that dries.</figcaption>
            </figure>

            <div className="controls">
              <fieldset>
                <legend>Vessel draft</legend>
                <div className="drafts" role="radiogroup" aria-label="Vessel draft">
                  {DRAFTS.map((d) => (
                    <button key={d} role="radio" aria-checked={draft === d} className={draft === d ? 'on' : ''} onClick={() => setDraft(d)}>{d.toFixed(1)} m</button>
                  ))}
                </div>
              </fieldset>

              <label className="time" htmlFor="tm">Time of arrival <b>{hhmm(t)}</b></label>
              <input id="tm" type="range" min={0} max={95} step={1} value={Math.round(t * 4)} onChange={(e) => setT(Number(e.target.value) / 4)} aria-valuetext={`${hhmm(t)}, tide ${tide.toFixed(1)} metres, ${rising ? 'rising' : 'falling'}`} />
              <div className="ticks" aria-hidden><span>00</span><span>06</span><span>12</span><span>18</span><span>24</span></div>

              <dl className="read">
                <div><dt>Tide</dt><dd>{tide.toFixed(1)} m {rising ? '▲ rising' : '▼ falling'}</dd></div>
                <div><dt>Next {next.kind.toLowerCase()} water</dt><dd>{hhmm(next.t)} · {next.h.toFixed(1)} m</dd></div>
                <div><dt>Shallowest in channel</dt><dd>{limiting.toFixed(1)} m</dd></div>
                <div><dt>You need</dt><dd>{danger.toFixed(1)} m ({draft.toFixed(1)} + {CLEARANCE} clearance)</dd></div>
              </dl>
              <p className={`verdict ${safe ? 'ok' : 'no'}`} role="status">
                {safe ? '✓ Enough water to enter the channel at this time.' : '✕ Not enough water at this time. Wait for the tide, or reduce draft.'}
              </p>
            </div>
          </div>
        </section>

        <section className="table-sec" id="table" aria-labelledby="h2t">
          <h2 id="h2t">Tide table, today</h2>
          <table>
            <caption className="sr-only">High and low waters</caption>
            <thead><tr><th scope="col">Time</th><th scope="col">Water</th><th scope="col" className="n">Height</th></tr></thead>
            <tbody>
              {ex.map((e) => (
                <tr key={e.t}>
                  <th scope="row">{hhmm(e.t)}</th>
                  <td>{e.kind === 'High' ? '▲ High water' : '▼ Low water'}</td>
                  <td className="n">{e.h.toFixed(1)} m</td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>

        <section className="pilot" id="pilot" aria-labelledby="h2b">
          <h2 id="h2b">Request a pilot</h2>
          <p>Pilotage is compulsory for vessels over 60 m. Send your details at least four hours ahead.</p>
          <form
            noValidate
            onSubmit={(e) => {
              e.preventDefault()
              setSent(vessel.trim().length > 1 && /^\d{1,2}:\d{2}$/.test(eta) ? 'ok' : 'bad')
            }}
          >
            <label htmlFor="vn">Vessel name</label>
            <input id="vn" value={vessel} onChange={(e) => { setVessel(e.target.value); setSent('idle') }} aria-invalid={sent === 'bad' && vessel.trim().length < 2} aria-describedby="pm" autoComplete="off" />
            <label htmlFor="eta">Estimated arrival (HH:MM)</label>
            <input id="eta" value={eta} onChange={(e) => { setEta(e.target.value); setSent('idle') }} placeholder="14:30" inputMode="numeric" aria-invalid={sent === 'bad' && !/^\d{1,2}:\d{2}$/.test(eta)} aria-describedby="pm" autoComplete="off" />
            <button>Send request</button>
            <p id="pm" role={sent === 'bad' ? 'alert' : 'status'}>{sent === 'bad' ? 'Enter the vessel name and an arrival time like 14:30.' : sent === 'ok' ? `Request noted for ${vessel.trim()}. A pilot will call you on channel 12.` : ' '}</p>
          </form>
        </section>

        <section className="notices" id="notices" aria-labelledby="h2n">
          <h2 id="h2n">Notices to mariners</h2>
          <ul>
            <li><b>Dredging</b> Channel buoys 3 and 4 moved 40 m east until the end of the month. Keep to the magenta line on the chart.</li>
            <li><b>Shoaling</b> The bar south of the breakwater has built up. Allow an extra half metre for deep-draft vessels.</li>
            <li><b>Speed</b> Five knots inside the breakwater at all states of the tide.</li>
          </ul>
        </section>
      </main>
      <footer className="foot">Harrow Sound is a fictional harbour. The chart and tide model are generated and must never be used for navigation.</footer>
    </div>
  )
}


// ===== src/patterns/sites/tidewater/chart.ts =====
/*
 * A generated harbour: a smooth depth field, a semi-diurnal tide model and the geometry for contours.
 * All of it is computed, nothing is a map tile. Depth is metres below chart datum.
 */

export const N = 48
export const W = 560
export const H = 360

export function seabed(): number[] {
  const f: number[] = []
  for (let y = 0; y < N; y++)
    for (let x = 0; x < N; x++) {
      const u = x / (N - 1)
      const v = y / (N - 1)
      // an open sea in the south-east, a drying headland in the north-west, two shoals, a dredged channel
      let d = 13 + 8 * Math.sin(u * 5.1 + 0.6) * Math.cos(v * 4.3) + 3.6 * Math.sin(u * 11 + v * 7)
      d -= 17 * Math.max(0, 1 - Math.hypot(u - 0.26, v - 0.3) * 3.1)
      d -= 11 * Math.exp(-Math.hypot(u - 0.78, v - 0.72) * 6)
      d -= 7 * Math.exp(-Math.hypot(u - 0.55, v - 0.45) * 7)
      const ch = Math.abs(v - (0.42 + 0.26 * u)) // channel runs from the harbour mouth to the open sea
      d += 6 * Math.exp(-ch * ch * 90)
      // a sill (the bar) across the channel mouth: the reason the tide matters
      const w = Math.exp(-((u - 0.62) ** 2) / 0.003) * Math.exp(-ch * ch * 40)
      d = d * (1 - w) + 3.2 * w
      f.push(d)
    }
  return f
}

/** Tide height in metres above chart datum at hour h (0 to 24). */
export function tideAt(h: number): number {
  return 2.55 + 1.95 * Math.cos(((h - 3.4) / 12.42) * Math.PI * 2)
}

export function extremes(): { t: number; h: number; kind: 'High' | 'Low' }[] {
  const out: { t: number; h: number; kind: 'High' | 'Low' }[] = []
  for (let t = 0.25; t < 24; t += 0.05) {
    const a = tideAt(t - 0.05)
    const b = tideAt(t)
    const c = tideAt(t + 0.05)
    if (b > a && b >= c) out.push({ t, h: b, kind: 'High' })
    if (b < a && b <= c) out.push({ t, h: b, kind: 'Low' })
  }
  return out
}

export const hhmm = (t: number) => {
  const m = Math.round(t * 60)
  return `${String(Math.floor(m / 60) % 24).padStart(2, '0')}:${String(m % 60).padStart(2, '0')}`
}

/** Bilinear sample of the field at grid coordinates. */
export function sample(f: number[], gx: number, gy: number): number {
  const x = Math.min(N - 1.001, Math.max(0, gx))
  const y = Math.min(N - 1.001, Math.max(0, gy))
  const x0 = Math.floor(x)
  const y0 = Math.floor(y)
  const fx = x - x0
  const fy = y - y0
  const a = f[y0 * N + x0]
  const b = f[y0 * N + x0 + 1]
  const c = f[(y0 + 1) * N + x0]
  const d = f[(y0 + 1) * N + x0 + 1]
  return a * (1 - fx) * (1 - fy) + b * fx * (1 - fy) + c * (1 - fx) * fy + d * fx * fy
}

/** Marching squares: one SVG path for the contour at `level`. */
export function contour(f: number[], level: number): string {
  const sx = W / (N - 1)
  const sy = H / (N - 1)
  const v = (x: number, y: number) => f[y * N + x]
  const lerp = (a: number, b: number) => (level - a) / (b - a)
  let d = ''
  for (let y = 0; y < N - 1; y++)
    for (let x = 0; x < N - 1; x++) {
      const tl = v(x, y)
      const tr = v(x + 1, y)
      const br = v(x + 1, y + 1)
      const bl = v(x, y + 1)
      const idx = (tl > level ? 8 : 0) | (tr > level ? 4 : 0) | (br > level ? 2 : 0) | (bl > level ? 1 : 0)
      if (idx === 0 || idx === 15) continue
      const p: Record<string, number[]> = {
        t: [x + lerp(tl, tr), y],
        r: [x + 1, y + lerp(tr, br)],
        b: [x + lerp(bl, br), y + 1],
        l: [x, y + lerp(tl, bl)],
      }
      const segs = (
        {
          1: [['l', 'b']], 2: [['b', 'r']], 3: [['l', 'r']], 4: [['t', 'r']], 5: [['l', 't'], ['b', 'r']], 6: [['t', 'b']], 7: [['l', 't']],
          8: [['l', 't']], 9: [['t', 'b']], 10: [['l', 'b'], ['t', 'r']], 11: [['t', 'r']], 12: [['l', 'r']], 13: [['b', 'r']], 14: [['l', 'b']],
        } as Record<number, [string, string][]>
      )[idx]
      for (const [a, b] of segs) d += `M${(p[a][0] * sx).toFixed(1)} ${(p[a][1] * sy).toFixed(1)}L${(p[b][0] * sx).toFixed(1)} ${(p[b][1] * sy).toFixed(1)}`
    }
  return d
}


// ===== src/patterns/sites/tidewater/styles.css =====
.site-tidewater { position: relative; min-height: 100svh; overflow-x: clip; }
.site-tidewater {
  --paper: #eef1e7;
  --ink: #11303a;
  --muted: #4b6670;
  --brass: #8a6320;
  --mag: #a22b63;
  --rule: #11303a;
  --serif: 'Newsreader Variable', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
.site-tidewater * { box-sizing: border-box; margin: 0; padding: 0; }
.site-tidewater, .site-tidewater { background: var(--paper); color: var(--ink); font-family: var(--serif); -webkit-font-smoothing: antialiased; }
.site-tidewater a { color: inherit; }
.site-tidewater button, .site-tidewater input, .site-tidewater select { font: inherit; color: inherit; }
.site-tidewater button { cursor: pointer; }
.site-tidewater :focus-visible { outline: 3px solid var(--mag); outline-offset: 3px; }
.site-tidewater .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-tidewater h1, .site-tidewater h2 { font-weight: 600; line-height: 1.02; letter-spacing: -0.015em; }
.site-tidewater .top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px clamp(16px, 4vw, 56px); border-bottom: 2px solid var(--rule); position: sticky; top: 0; z-index: 30; background: var(--paper); }
.site-tidewater .logo { font-size: 22px; font-style: italic; font-weight: 600; text-decoration: none; }
.site-tidewater .logo span { margin-left: 10px; font: 500 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-style: normal; }
.site-tidewater .top nav { display: flex; gap: 2px; font: 500 12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.site-tidewater .top nav a { display: grid; place-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; }
.site-tidewater .top nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.site-tidewater .hero { padding: clamp(48px, 9vw, 120px) clamp(16px, 4vw, 56px) clamp(32px, 5vw, 64px); max-width: 1100px; }
.site-tidewater .kicker { font: 500 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); }
.site-tidewater .hero h1 { margin-top: 16px; font-size: clamp(44px, 8vw, 112px); max-width: 14ch; }
.site-tidewater .lede { margin-top: 24px; max-width: 46ch; font-size: 21px; line-height: 1.5; color: #284955; }
.site-tidewater .cta { display: inline-grid; place-items: center; min-height: 52px; margin-top: 28px; padding: 0 28px; background: var(--ink); color: var(--paper); font: 500 13px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; }
.site-tidewater .cta:hover { background: var(--mag); }
.site-tidewater .planner { padding: clamp(32px, 5vw, 64px) clamp(16px, 4vw, 56px); border-top: 2px solid var(--rule); background: #e3ebdd; }
.site-tidewater .planner h2, .site-tidewater .table-sec h2, .site-tidewater .pilot h2, .site-tidewater .notices h2 { font-size: clamp(30px, 4vw, 52px); }
.site-tidewater .plan-grid { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.site-tidewater .chart-box { position: relative; aspect-ratio: 560 / 360; border: 2px solid var(--rule); background: #cfe7e2; }
.site-tidewater .chart-box canvas, .site-tidewater .chart-box svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.site-tidewater .snd { fill: #11303a; font-family: var(--mono); }
.site-tidewater .chart figcaption { margin-top: 10px; font: 400 12px/1.5 var(--mono); color: var(--muted); max-width: 60ch; }
.site-tidewater .controls fieldset { border: 0; }
.site-tidewater .controls legend, .site-tidewater .time { font: 500 12px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.site-tidewater .drafts { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.site-tidewater .drafts button { min-width: 72px; min-height: 44px; padding: 0 12px; background: transparent; border: 1.5px solid var(--ink); font: 500 14px var(--mono); }
.site-tidewater .drafts button.on { background: var(--ink); color: var(--paper); }
.site-tidewater .time { display: flex; justify-content: space-between; margin-top: 22px; }
.site-tidewater .time b { color: var(--ink); font-size: 18px; }
.site-tidewater .controls input[type='range'] { width: 100%; height: 44px; accent-color: var(--mag); }
.site-tidewater .ticks { display: flex; justify-content: space-between; font: 400 11px var(--mono); color: var(--muted); }
.site-tidewater .read { margin-top: 20px; display: grid; gap: 0; }
.site-tidewater .read div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(17, 48, 58, 0.35); font-size: 16px; }
.site-tidewater .read dt { font: 500 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); align-self: center; }
.site-tidewater .read dd { text-align: right; font-variant-numeric: tabular-nums; }
.site-tidewater .verdict { margin-top: 18px; padding: 14px 16px; font-size: 19px; line-height: 1.35; font-weight: 600; border: 2px solid; }
.site-tidewater .verdict.ok { border-color: #1f6f4a; background: #d9eadd; }
.site-tidewater .verdict.no { border-color: var(--mag); background: #f1d8e3; }
.site-tidewater .table-sec, .site-tidewater .pilot, .site-tidewater .notices { padding: clamp(32px, 5vw, 64px) clamp(16px, 4vw, 56px); border-top: 2px solid var(--rule); }
.site-tidewater .table-sec table { margin-top: 20px; width: min(100%, 640px); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.site-tidewater .table-sec th, .site-tidewater .table-sec td { padding: 11px 10px; text-align: left; border-bottom: 1px solid rgba(17, 48, 58, 0.35); font-size: 18px; }
.site-tidewater .table-sec thead th { font: 500 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.site-tidewater .table-sec th[scope='row'] { font-family: var(--mono); font-weight: 500; }
.site-tidewater .table-sec .n { text-align: right; }
.site-tidewater .pilot p:not(#pm) { margin-top: 12px; max-width: 52ch; font-size: 19px; line-height: 1.5; color: #284955; }
.site-tidewater .pilot form { margin-top: 22px; display: grid; gap: 8px; max-width: 460px; }
.site-tidewater .pilot label { font: 500 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.site-tidewater .pilot input { min-height: 48px; padding: 0 12px; background: #fff; border: 1.5px solid var(--ink); font-size: 18px; }
.site-tidewater .pilot input[aria-invalid='true'] { border-color: var(--mag); border-width: 3px; }
.site-tidewater .pilot button { margin-top: 12px; min-height: 52px; background: var(--ink); color: var(--paper); border: 0; font: 500 13px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.site-tidewater .pilot button:hover { background: var(--mag); }
.site-tidewater .pilot #pm { min-height: 1.6em; margin-top: 6px; font-size: 16px; }
.site-tidewater .notices ul { margin-top: 20px; list-style: none; display: grid; gap: 0; max-width: 760px; }
.site-tidewater .notices li { padding: 16px 0; border-top: 1px solid rgba(17, 48, 58, 0.4); font-size: 19px; line-height: 1.5; }
.site-tidewater .notices b { display: block; font: 500 12px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); margin-bottom: 4px; }
.site-tidewater .foot { padding: 28px clamp(16px, 4vw, 56px) 48px; border-top: 2px solid var(--rule); font: 400 12px/1.6 var(--mono); color: var(--muted); }
@media (max-width: 860px) {
.site-tidewater .plan-grid { grid-template-columns: minmax(0, 1fr); }
.site-tidewater .logo span { display: none; }
.site-tidewater .top nav a { padding: 0 8px; font-size: 11px; white-space: nowrap; }
.site-tidewater .top nav a:nth-child(2) { display: none; }
}
.site-tidewater [id] { scroll-margin-top: 72px; }
```


## Helper it imports: `src/patterns/sites/_shared.ts`

```ts
import { useEffect, type RefObject } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import Lenis from 'lenis'

/* Helpers shared by the whole-site demos in this folder. They are full pages, so they scroll the window,
   and they must coexist with UI Lab's own hash router and clean up completely when you leave. */

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/**
 * Smooth scroll (Lenis, driven by GSAP's ticker so ScrollTrigger stays in sync) plus in-page anchor links.
 * Anchor clicks are handled here instead of by the browser: UI Lab's router lives in the URL hash,
 * so a real `#section` navigation would be read as a route change.
 * Everything is torn down on unmount.
 */
export function useSiteScroll(root: RefObject<HTMLElement | null>, { smooth = true, lerp = 0.1 } = {}) {
  useEffect(() => {
    const el = root.current
    if (!el) return
    let lenis: Lenis | null = null
    let tick: ((t: number) => void) | null = null
    if (smooth && !reducedMotion()) {
      lenis = new Lenis({ lerp })
      lenis.on('scroll', ScrollTrigger.update)
      tick = (t: number) => lenis!.raf(t * 1000)
      gsap.ticker.add(tick)
      gsap.ticker.lagSmoothing(0)
    }
    const onClick = (e: MouseEvent) => {
      const a = (e.target as HTMLElement).closest<HTMLAnchorElement>('a[href^="#"]')
      if (!a || !el.contains(a)) return
      const id = a.getAttribute('href')!.slice(1)
      if (id.startsWith('/')) return // a UI Lab route, let it through
      e.preventDefault()
      const target = id ? el.querySelector<HTMLElement>(`#${CSS.escape(id)}`) : null
      if (!target) return
      if (lenis) lenis.scrollTo(target)
      else target.scrollIntoView({ behavior: 'smooth' })
    }
    el.addEventListener('click', onClick)
    return () => {
      el.removeEventListener('click', onClick)
      if (tick) gsap.ticker.remove(tick)
      gsap.ticker.lagSmoothing(500, 33) // GSAP's default
      lenis?.destroy()
      ScrollTrigger.getAll().forEach((t) => t.kill())
    }
  }, [root, smooth, lerp])
}
```

# Site: THE SALT ROAD (museum exhibition)
> An exhibition site where the object leads: six drawn artefacts, each with a proper wall placard, a Large print switch that scales every label, and an audio-guide keypad that jumps to a stop, shows its transcript and plays a soft tone.
- **Category:** Sites
- **Slug:** site-salt-road
- **Tags:** site, full page, niche world, museum, placard, exhibition, audio guide, large print, svg, experience
- **Dependencies:** @fontsource-variable/newsreader, @fontsource-variable/libre-franklin, sites/_shared.ts
- **Live demo:** https://ui-lab-weld.vercel.app/#/site-salt-road
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sites/salt-road/index.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sites/salt-road/index.tsx
- **Raw files:** https://ui-lab-weld.vercel.app/raw/sites/salt-road/index.tsx, https://ui-lab-weld.vercel.app/raw/sites/salt-road/objects.tsx, https://ui-lab-weld.vercel.app/raw/sites/salt-road/styles.css

## When to use
- Museums, galleries, heritage sites and any page that is mostly objects with captions
- Reference for a label hierarchy set like a curator would, a text-size switch via one CSS variable, and a keypad that drives scrolling and a floor plan

## Accessibility

Each object is an article with an accessible name and an SVG with a description; Large print is a switch that scales all label text; the keypad is real buttons with aria-pressed and a labelled number field; the transcript is a role=status region; sound plays only after a key press, briefly and quietly.


## Source
Files: `src/patterns/sites/salt-road/index.tsx`, `src/patterns/sites/salt-road/objects.tsx`, `src/patterns/sites/salt-road/styles.css`
```tsx
// ===== src/patterns/sites/salt-road/index.tsx =====
import { useEffect, useRef, useState } from 'react'
import '@fontsource-variable/newsreader'
import '@fontsource-variable/newsreader/wght-italic.css'
import '@fontsource-variable/libre-franklin'
import './styles.css'
import { useSiteScroll } from '../_shared'
import { ITEMS } from './objects'

/*
 * THE SALT ROAD: an exhibition site. World 14 (Museum Placard), the Experience-mode proof.
 * Signature: the object leads and the label is a real label. Each of six objects gets a wall placard with the full
 * hierarchy a curator would set. A Large print switch scales every placard; an audio-guide keypad jumps to a stop,
 * shows its transcript and plays a short chime (WebAudio, only after you press a key, at a low level).
 */

function chime() {
  try {
    const ac = new AudioContext()
    const g = ac.createGain()
    g.gain.value = 0.0001
    g.connect(ac.destination)
    const o = ac.createOscillator()
    o.type = 'sine'
    o.frequency.value = 660
    o.connect(g)
    g.gain.exponentialRampToValueAtTime(0.06, ac.currentTime + 0.02)
    g.gain.exponentialRampToValueAtTime(0.0001, ac.currentTime + 0.7)
    o.start()
    o.stop(ac.currentTime + 0.75)
    setTimeout(() => void ac.close(), 1000)
  } catch {
    /* audio is optional */
  }
}

export default function SaltRoadSite() {
  const root = useRef<HTMLDivElement>(null)
  const [large, setLarge] = useState(false)
  const [stop, setStop] = useState<number | null>(null)
  const [typed, setTyped] = useState('')
  const [msg, setMsg] = useState('')

  useSiteScroll(root, { smooth: false })

  const go = (n: number) => {
    if (n < 1 || n > ITEMS.length) {
      setMsg(`There is no stop ${n}. Choose 1 to ${ITEMS.length}.`)
      return
    }
    setStop(n)
    setMsg('')
    chime()
    const el = root.current?.querySelector<HTMLElement>(`#stop-${n}`)
    el?.scrollIntoView({ behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth', block: 'center' })
  }

  useEffect(() => {
    const els = ITEMS.map((i) => root.current?.querySelector<HTMLElement>(`#stop-${i.n}`)).filter(Boolean) as HTMLElement[]
    const io = new IntersectionObserver(
      (es) => {
        const best = es.filter((e) => e.isIntersecting).sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0]
        if (best) setStop(Number(best.target.id.replace('stop-', '')))
      },
      { threshold: [0.4, 0.7] },
    )
    els.forEach((e) => io.observe(e))
    return () => io.disconnect()
  }, [])

  const cur = ITEMS.find((i) => i.n === stop)

  return (
    <div className="site-salt-road" ref={root} style={{ ['--scale' as string]: large ? 1.28 : 1 }}>
      <header className="top">
        <a href="#top" className="logo">The Salt Road</a>
        <nav aria-label="Sections">
          <a href="#objects">Objects</a>
          <a href="#guide">Audio guide</a>
          <a href="#visit">Visit</a>
        </nav>
        <button className="size" role="switch" aria-checked={large} onClick={() => setLarge((l) => !l)}>
          <span aria-hidden>Aa</span> Large print <b>{large ? 'On' : 'Off'}</b>
        </button>
      </header>

      <main id="top">
        <section className="intro" aria-labelledby="h1">
          <p className="meta">Exhibition · Gallery 3 · Until spring</p>
          <h1 id="h1">The Salt Road</h1>
          <p className="lede">Six objects that travelled the coast with the thing everyone needed. Walk the room in order, or use the audio guide to jump to any stop.</p>
          <a href="#objects" className="go">Begin with object 1</a>
        </section>

        <section id="objects" aria-labelledby="h2o">
          <h2 id="h2o" className="sr-only">The objects</h2>
          {ITEMS.map((it) => (
            <article key={it.n} id={`stop-${it.n}`} className={`obj ${stop === it.n ? 'on' : ''}`} aria-labelledby={`t-${it.n}`}>
              <div className="stage">{it.draw()}<span className="no" aria-hidden>{it.n}</span></div>
              <div className="placard">
                <p className="pn">{it.n} of {ITEMS.length}</p>
                <h3 id={`t-${it.n}`}>{it.title}</h3>
                <p className="who">{it.maker}, {it.dates}</p>
                <p className="mat">{it.medium}</p>
                <p className="dim">{it.size}</p>
                <p className="txt">{it.text}</p>
                <p className="cr">{it.credit}. {it.acc}</p>
              </div>
            </article>
          ))}
        </section>

        <section className="guide" id="guide" aria-labelledby="h2g">
          <h2 id="h2g">Audio guide</h2>
          <p>Type a stop number, or press a key. A short tone plays and the transcript appears below.</p>
          <form
            className="pad"
            onSubmit={(e) => {
              e.preventDefault()
              const n = Number(typed)
              if (!Number.isInteger(n) || typed === '') setMsg('Enter a number from 1 to 6.')
              else go(n)
              setTyped('')
            }}
          >
            <label htmlFor="stopno">Stop number</label>
            <div className="row">
              <input id="stopno" inputMode="numeric" autoComplete="off" value={typed} onChange={(e) => setTyped(e.target.value.replace(/\D/g, '').slice(0, 2))} aria-describedby="gmsg" />
              <button>Go</button>
            </div>
          </form>
          <div className="keys" role="group" aria-label="Stop keys">
            {ITEMS.map((i) => (
              <button key={i.n} onClick={() => go(i.n)} aria-pressed={stop === i.n} aria-label={`Stop ${i.n}: ${i.title}`}>{i.n}</button>
            ))}
          </div>
          <p id="gmsg" className="gmsg" role="status">{msg || (cur ? cur.guide : 'Waiting for a stop number.')}</p>
          <figure className="plan" aria-label="Floor plan">
            <svg viewBox="0 0 300 110" role="img" aria-label={cur ? `Floor plan: you are at stop ${cur.n}` : 'Floor plan of the gallery with six stops'}>
              <rect x="2" y="2" width="296" height="106" fill="none" stroke="currentColor" strokeWidth="1.5" />
              {ITEMS.map((i) => (
                <g key={i.n}>
                  <rect x={14 + (i.n - 1) * 46} y={i.n % 2 ? 18 : 62} width="36" height="30" fill={stop === i.n ? '#7a2e2a' : 'none'} stroke="currentColor" />
                  <text x={32 + (i.n - 1) * 46} y={(i.n % 2 ? 18 : 62) + 20} textAnchor="middle" fontSize="13" fill={stop === i.n ? '#fff' : 'currentColor'}>{i.n}</text>
                </g>
              ))}
            </svg>
          </figure>
        </section>

        <section className="visit" id="visit" aria-labelledby="h2v">
          <h2 id="h2v">Visiting</h2>
          <dl>
            <div><dt>Open</dt><dd>Tuesday to Sunday, 10:00 to 17:00. Late opening Thursday until 20:00.</dd></div>
            <div><dt>Access</dt><dd>Step-free throughout. Seating in every gallery. Large-print labels and a tactile copy of object 3 at the desk.</dd></div>
            <div><dt>Admission</dt><dd>Free. A donation helps us keep it that way.</dd></div>
          </dl>
        </section>
      </main>
      <footer className="foot">The Salt Road is a fictional exhibition. The objects are drawings, not photographs.</footer>
    </div>
  )
}


// ===== src/patterns/sites/salt-road/objects.tsx =====
import type { ReactElement } from 'react'

/* Six objects drawn as SVG silhouettes with a little shading. Nothing here is a photograph; they stand in for one. */

export type Item = {
  n: number
  title: string
  maker: string
  dates: string
  medium: string
  size: string
  acc: string
  text: string
  guide: string
  credit: string
  draw: () => ReactElement
}

const shade = (id: string, a: string, b: string) => (
  <linearGradient id={id} x1="0" x2="1">
    <stop offset="0" stopColor={a} />
    <stop offset="0.55" stopColor={b} />
    <stop offset="1" stopColor={a} />
  </linearGradient>
)

export const ITEMS: Item[] = [
  {
    n: 1,
    title: 'Amphora with pointed foot',
    maker: 'Workshop on the south coast, unrecorded',
    dates: 'about 140 to 90 BCE',
    medium: 'Fired clay, traces of pitch lining',
    size: 'Height 71 cm',
    acc: 'SR.1984.12',
    text: 'Wine and fish sauce travelled in jars like this one, stacked in the holds of coastal ships. The pointed foot is not an error: it let the jar be wedged upright in sand or in a bed of other jars.',
    guide: 'Stop one. Run a thumb down the neck of this jar, in your mind. The two handles were made to be gripped with wet hands.',
    credit: 'Purchased with the help of the Friends of the Collection',
    draw: () => (
      <svg viewBox="0 0 240 320" role="img" aria-label="Tall clay jar with two handles and a pointed base">
        <defs>{shade('g1', '#a8693e', '#d09a68')}</defs>
        <path d="M95 30 h50 l-4 26 c38 12 58 52 50 100 c-8 48 -40 82 -71 130 c-31 -48 -63 -82 -71 -130 c-8 -48 12 -88 50 -100 z" fill="url(#g1)" stroke="#5c3a22" strokeWidth="2" />
        <path d="M92 38 c-30 4 -34 36 -10 48 M148 38 c30 4 34 36 10 48" fill="none" stroke="#5c3a22" strokeWidth="9" strokeLinecap="round" />
        <ellipse cx="120" cy="30" rx="26" ry="7" fill="#7b4a2b" stroke="#5c3a22" strokeWidth="2" />
        <path d="M70 130 c30 8 70 8 100 0 M64 160 c36 10 76 10 112 0" fill="none" stroke="#5c3a22" strokeWidth="1.5" opacity="0.6" />
      </svg>
    ),
  },
  {
    n: 2,
    title: 'Pair of balance-pan weights',
    maker: 'Merchants of the river ports',
    dates: 'about 1200 to 1300',
    medium: 'Cast bronze with stamped marks',
    size: 'Largest 4.1 cm across',
    acc: 'SR.1991.3 a-f',
    text: 'A set of nested weights: place the smaller inside the larger and the whole fits in a pouch. Each carries a stamp that guaranteed its mass, because a trader who cheated on weight lost the right to trade.',
    guide: 'Stop two. Weights are the most honest objects in the collection. Each stamp is a promise.',
    credit: 'Bequest of a family of river merchants',
    draw: () => (
      <svg viewBox="0 0 240 320" role="img" aria-label="Three nested bronze weights">
        <defs>{shade('g2', '#6b5320', '#c9a24a')}</defs>
        {[0, 1, 2].map((i) => (
          <g key={i} transform={`translate(${42 + i * 56} ${200 - i * 36})`}>
            <path d="M0 80 h56 l-8 -50 h-40 z" fill="url(#g2)" stroke="#3d2f0f" strokeWidth="2" transform={`scale(${1 - i * 0.12})`} />
            <ellipse cx="28" cy="30" rx={16 - i * 2} ry="6" fill="#3d2f0f" opacity="0.45" transform={`scale(${1 - i * 0.12})`} />
          </g>
        ))}
        <circle cx="70" cy="168" r="3" fill="#3d2f0f" />
      </svg>
    ),
  },
  {
    n: 3,
    title: 'Oil lamp with a pierced handle',
    maker: 'Unrecorded',
    dates: 'about 300 to 400',
    medium: 'Moulded clay, soot on the nozzle',
    size: 'Length 11 cm',
    acc: 'SR.1976.88',
    text: 'The soot on the nozzle is the most useful thing on this lamp. It shows that it was lit, and where: the burn pattern leans left, towards a door that was probably open.',
    guide: 'Stop three. The pierced handle is a loop for a finger, or for a cord to hang it from the beam of a ship.',
    credit: 'Gift of an anonymous donor',
    draw: () => (
      <svg viewBox="0 0 240 320" role="img" aria-label="Small clay oil lamp with a handle ring">
        <defs>{shade('g3', '#8a5a36', '#c9936a')}</defs>
        <path d="M40 190 c0 -34 40 -50 90 -50 c40 0 66 12 80 30 l-14 12 c-10 -8 -22 -10 -34 -10 c-20 30 -70 52 -122 18 z" fill="url(#g3)" stroke="#4a2d17" strokeWidth="2" />
        <circle cx="200" cy="166" r="13" fill="none" stroke="#4a2d17" strokeWidth="6" />
        <ellipse cx="120" cy="158" rx="22" ry="6" fill="#4a2d17" opacity="0.55" />
        <path d="M44 184 l-16 -10" stroke="#2a2a28" strokeWidth="7" strokeLinecap="round" opacity="0.7" />
      </svg>
    ),
  },
  {
    n: 4,
    title: 'Comb of boxwood',
    maker: 'Unrecorded',
    dates: 'about 1450',
    medium: 'Carved boxwood',
    size: 'Width 9.4 cm',
    acc: 'SR.2003.41',
    text: 'Two sets of teeth: coarse on one side, fine on the other. Worn smooth at the spine by a thumb, and chipped at one end where it was dropped on a stone floor and kept anyway.',
    guide: 'Stop four. This comb was repaired, not replaced. That tells you what it was worth to its owner.',
    credit: 'Acquired with the support of the Heritage Fund',
    draw: () => (
      <svg viewBox="0 0 240 320" role="img" aria-label="Boxwood comb with two rows of teeth">
        <defs>{shade('g4', '#b58b4e', '#e1c18a')}</defs>
        <rect x="40" y="130" width="160" height="38" rx="8" fill="url(#g4)" stroke="#6b4a1d" strokeWidth="2" />
        {Array.from({ length: 16 }, (_, i) => <rect key={'a' + i} x={46 + i * 9.6} y="168" width="5" height={34 - (i % 3)} rx="2" fill="url(#g4)" stroke="#6b4a1d" strokeWidth="1" />)}
        {Array.from({ length: 22 }, (_, i) => <rect key={'b' + i} x={46 + i * 6.9} y="104" width="3" height="28" rx="1.5" fill="url(#g4)" stroke="#6b4a1d" strokeWidth="0.8" />)}
        <circle cx="120" cy="149" r="6" fill="none" stroke="#6b4a1d" strokeWidth="2" />
      </svg>
    ),
  },
  {
    n: 5,
    title: 'Chest key with a bit of three wards',
    maker: 'Locksmith of the port guild',
    dates: 'about 1580',
    medium: 'Wrought iron',
    size: 'Length 14.2 cm',
    acc: 'SR.1968.7',
    text: 'The key to a merchant’s chest, found in a drain below the quay. It opens a lock that no longer exists. The three notches in the bit are the only part of the lock still in the world.',
    guide: 'Stop five. Look at the bow, the loop at the top. It is worn on one side, where a thumb pressed every day.',
    credit: 'Found during dredging, donated by the harbour company',
    draw: () => (
      <svg viewBox="0 0 240 320" role="img" aria-label="Iron key with a round bow and a toothed bit">
        <defs>{shade('g5', '#2f3338', '#6a7077')}</defs>
        <circle cx="120" cy="82" r="30" fill="none" stroke="url(#g5)" strokeWidth="14" />
        <rect x="112" y="108" width="16" height="140" rx="4" fill="url(#g5)" stroke="#17191c" strokeWidth="2" />
        <path d="M128 214 h30 v14 h-12 v10 h12 v14 h-30 z" fill="url(#g5)" stroke="#17191c" strokeWidth="2" />
        <rect x="104" y="136" width="32" height="8" rx="3" fill="url(#g5)" stroke="#17191c" strokeWidth="1.5" />
      </svg>
    ),
  },
  {
    n: 6,
    title: 'Salt cellar of green glaze',
    maker: 'Potters of the northern coast',
    dates: 'about 1650',
    medium: 'Glazed earthenware',
    size: 'Height 8.7 cm',
    acc: 'SR.2011.19',
    text: 'The exhibition ends with the thing it began with. Salt was the reason for the road, and this small green dish is where it ended up, on a table, in a hand, in a meal.',
    guide: 'Stop six. Last stop. The glaze has crazed into a net of fine lines. Salt does that to anything it touches for long enough.',
    credit: 'Gift in memory of a fishing family',
    draw: () => (
      <svg viewBox="0 0 240 320" role="img" aria-label="Small green glazed dish on a short foot">
        <defs>{shade('g6', '#2f6b4f', '#5ea683')}</defs>
        <path d="M50 170 c0 60 40 70 70 70 s70 -10 70 -70 z" fill="url(#g6)" stroke="#173a2a" strokeWidth="2" />
        <ellipse cx="120" cy="170" rx="70" ry="14" fill="#173a2a" opacity="0.6" />
        <ellipse cx="120" cy="170" rx="58" ry="9" fill="#e8e4d8" />
        <rect x="92" y="236" width="56" height="12" rx="4" fill="url(#g6)" stroke="#173a2a" strokeWidth="2" />
        <path d="M70 190 l16 20 M150 186 l-10 24 M110 196 l4 26" stroke="#173a2a" strokeWidth="1" opacity="0.4" />
      </svg>
    ),
  },
]


// ===== src/patterns/sites/salt-road/styles.css =====
.site-salt-road { position: relative; min-height: 100svh; overflow-x: clip; }
.site-salt-road {
  --wall: #f6f4ee;
  --ink: #1f1d1a;
  --muted: #5a554c;
  --ox: #7a2e2a;
  --rule: #cfc9bb;
  --serif: 'Newsreader Variable', Georgia, serif;
  --sans: 'Libre Franklin Variable', system-ui, sans-serif;
  --scale: 1;
}
.site-salt-road * { box-sizing: border-box; margin: 0; padding: 0; }
.site-salt-road, .site-salt-road { background: var(--wall); color: var(--ink); font-family: var(--serif); -webkit-font-smoothing: antialiased; }
.site-salt-road a { color: inherit; }
.site-salt-road button, .site-salt-road input { font: inherit; color: inherit; }
.site-salt-road button { cursor: pointer; }
.site-salt-road :focus-visible { outline: 3px solid var(--ox); outline-offset: 3px; }
.site-salt-road .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-salt-road .top { display: flex; align-items: center; gap: 24px; padding: 12px clamp(16px, 4vw, 56px); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 30; background: var(--wall); }
.site-salt-road .logo { font-size: 22px; font-weight: 600; font-style: italic; text-decoration: none; }
.site-salt-road .top nav { display: flex; gap: 2px; margin-left: auto; font: 500 13px var(--sans); letter-spacing: 0.04em; }
.site-salt-road .top nav a { display: grid; place-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; }
.site-salt-road .top nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.site-salt-road .size { min-height: 44px; padding: 0 14px; display: flex; align-items: center; gap: 10px; background: transparent; border: 1.5px solid var(--ink); font: 500 13px var(--sans); }
.site-salt-road .size[aria-checked='true'] { background: var(--ink); color: var(--wall); }
.site-salt-road .size span { font-family: var(--serif); font-size: 17px; font-style: italic; }
.site-salt-road .intro { padding: clamp(56px, 10vw, 140px) clamp(16px, 4vw, 56px) clamp(32px, 5vw, 64px); max-width: 980px; }
.site-salt-road .meta { font: 500 12px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ox); }
.site-salt-road .intro h1 { margin-top: 14px; font-size: clamp(56px, 11vw, 150px); line-height: 0.92; font-weight: 500; letter-spacing: -0.02em; font-style: italic; }
.site-salt-road .lede { margin-top: 26px; max-width: 46ch; font-size: calc(21px * var(--scale)); line-height: 1.5; color: #3b372f; }
.site-salt-road .go { display: inline-grid; place-items: center; min-height: 52px; margin-top: 28px; padding: 0 26px; background: var(--ink); color: var(--wall); font: 500 13px var(--sans); letter-spacing: 0.06em; text-decoration: none; }
.site-salt-road .go:hover { background: var(--ox); }
.site-salt-road .obj { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr); gap: clamp(20px, 4vw, 64px); align-items: center; padding: clamp(32px, 6vw, 96px) clamp(16px, 4vw, 56px); border-top: 1px solid var(--rule); min-height: 90svh; }
.site-salt-road .obj:nth-child(even) .stage { order: 2; }
.site-salt-road .stage { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 4.2; max-height: 70svh; background: #ebe7dc; }
.site-salt-road .stage svg { width: min(68%, 360px); height: auto; }
.site-salt-road .stage .no { position: absolute; top: 14px; left: 18px; font: 500 13px var(--sans); color: var(--muted); }
.site-salt-road .obj .stage { transition: background-color 0.5s ease; }
.site-salt-road .obj.on .stage { background: #e2ddcf; }
.site-salt-road .placard { max-width: 38ch; padding: 22px 0 0 0; border-top: 3px solid var(--ox); }
.site-salt-road .placard .pn { font: 500 12px var(--sans); letter-spacing: 0.08em; color: var(--muted); }
.site-salt-road .placard h3 { margin-top: 10px; font-size: calc(30px * var(--scale)); line-height: 1.1; font-weight: 600; letter-spacing: -0.01em; }
.site-salt-road .placard .who { margin-top: 10px; font-size: calc(18px * var(--scale)); font-style: italic; }
.site-salt-road .placard .mat, .site-salt-road .placard .dim { font: 400 calc(14px * var(--scale)) var(--sans); color: #3b372f; margin-top: 4px; }
.site-salt-road .placard .txt { margin-top: 18px; font-size: calc(18px * var(--scale)); line-height: 1.55; }
.site-salt-road .placard .cr { margin-top: 18px; font: 400 calc(12.5px * var(--scale)) var(--sans); color: var(--muted); }
.site-salt-road .guide { padding: clamp(40px, 6vw, 96px) clamp(16px, 4vw, 56px); background: #1f1d1a; color: var(--wall); }
.site-salt-road .guide h2, .site-salt-road .visit h2 { font-size: clamp(34px, 5vw, 64px); font-weight: 500; font-style: italic; letter-spacing: -0.01em; }
.site-salt-road .guide > p { margin-top: 12px; max-width: 52ch; font-size: calc(19px * var(--scale)); line-height: 1.5; color: #d8d2c3; }
.site-salt-road .pad { margin-top: 24px; max-width: 360px; }
.site-salt-road .pad label { font: 500 12px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: #cfc9bb; }
.site-salt-road .pad .row { display: flex; gap: 8px; margin-top: 8px; }
.site-salt-road .pad input { flex: 1; min-height: 52px; padding: 0 14px; background: var(--wall); color: var(--ink); border: 0; font-size: 22px; font-family: var(--sans); }
.site-salt-road .pad button { min-height: 52px; padding: 0 22px; background: var(--ox); color: #fff; border: 0; font: 600 14px var(--sans); }
.site-salt-road .keys { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.site-salt-road .keys button { width: 56px; height: 56px; border-radius: 50%; background: transparent; border: 1.5px solid #cfc9bb; color: var(--wall); font: 500 20px var(--sans); }
.site-salt-road .keys button[aria-pressed='true'] { background: var(--wall); color: var(--ink); border-color: var(--wall); }
.site-salt-road .gmsg { margin-top: 22px; max-width: 56ch; min-height: 3.4em; font-size: calc(20px * var(--scale)); line-height: 1.5; font-style: italic; color: #f0eadb; }
.site-salt-road .plan { margin-top: 18px; max-width: 460px; color: #cfc9bb; }
.site-salt-road .plan text { font-family: var(--sans); }
.site-salt-road .visit { padding: clamp(40px, 6vw, 96px) clamp(16px, 4vw, 56px); }
.site-salt-road .visit dl { margin-top: 22px; max-width: 720px; }
.site-salt-road .visit dl div { display: grid; grid-template-columns: 9rem 1fr; gap: 20px; padding: 16px 0; border-top: 1px solid var(--rule); font-size: calc(19px * var(--scale)); line-height: 1.5; }
.site-salt-road .visit dt { font: 500 12px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ox); padding-top: 5px; }
.site-salt-road .foot { padding: 26px clamp(16px, 4vw, 56px) 48px; border-top: 1px solid var(--rule); font: 400 12.5px/1.6 var(--sans); color: var(--muted); }
@media (max-width: 860px) {
.site-salt-road .obj { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.site-salt-road .obj:nth-child(even) .stage { order: 0; }
.site-salt-road .stage { max-height: 52svh; }
.site-salt-road .top nav { display: none; }
.site-salt-road .size { margin-left: auto; }
.site-salt-road .visit dl div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
.site-salt-road .obj .stage { transition: none; }
}
```


## Helper it imports: `src/patterns/sites/_shared.ts`

```ts
import { useEffect, type RefObject } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import Lenis from 'lenis'

/* Helpers shared by the whole-site demos in this folder. They are full pages, so they scroll the window,
   and they must coexist with UI Lab's own hash router and clean up completely when you leave. */

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/**
 * Smooth scroll (Lenis, driven by GSAP's ticker so ScrollTrigger stays in sync) plus in-page anchor links.
 * Anchor clicks are handled here instead of by the browser: UI Lab's router lives in the URL hash,
 * so a real `#section` navigation would be read as a route change.
 * Everything is torn down on unmount.
 */
export function useSiteScroll(root: RefObject<HTMLElement | null>, { smooth = true, lerp = 0.1 } = {}) {
  useEffect(() => {
    const el = root.current
    if (!el) return
    let lenis: Lenis | null = null
    let tick: ((t: number) => void) | null = null
    if (smooth && !reducedMotion()) {
      lenis = new Lenis({ lerp })
      lenis.on('scroll', ScrollTrigger.update)
      tick = (t: number) => lenis!.raf(t * 1000)
      gsap.ticker.add(tick)
      gsap.ticker.lagSmoothing(0)
    }
    const onClick = (e: MouseEvent) => {
      const a = (e.target as HTMLElement).closest<HTMLAnchorElement>('a[href^="#"]')
      if (!a || !el.contains(a)) return
      const id = a.getAttribute('href')!.slice(1)
      if (id.startsWith('/')) return // a UI Lab route, let it through
      e.preventDefault()
      const target = id ? el.querySelector<HTMLElement>(`#${CSS.escape(id)}`) : null
      if (!target) return
      if (lenis) lenis.scrollTo(target)
      else target.scrollIntoView({ behavior: 'smooth' })
    }
    el.addEventListener('click', onClick)
    return () => {
      el.removeEventListener('click', onClick)
      if (tick) gsap.ticker.remove(tick)
      gsap.ticker.lagSmoothing(500, 33) // GSAP's default
      lenis?.destroy()
      ScrollTrigger.getAll().forEach((t) => t.kill())
    }
  }, [root, smooth, lerp])
}
```

# Site: PEBBLE (terminal portfolio)
> A systems engineer’s portfolio as a terminal that really works: help, ls, cat, projects, open, theme, history, tab completion and arrow-key recall, over real content. One button swaps it for an ordinary page with the same content.
- **Category:** Sites
- **Slug:** site-pebble
- **Tags:** site, full page, niche world, terminal, bbs, portfolio, keyboard, command line, theme, developer
- **Dependencies:** @fontsource/ibm-plex-mono, @fontsource-variable/newsreader, sites/_shared.ts
- **Live demo:** https://ui-lab-weld.vercel.app/#/site-pebble
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sites/pebble/index.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sites/pebble/index.tsx
- **Raw files:** https://ui-lab-weld.vercel.app/raw/sites/pebble/index.tsx, https://ui-lab-weld.vercel.app/raw/sites/pebble/content.ts, https://ui-lab-weld.vercel.app/raw/sites/pebble/styles.css

## When to use
- Developer and infrastructure portfolios that want a conversational interface without hiding the content
- Reference for a log-region terminal with a labelled input, command parsing, themes via CSS variables, and an accessible plain-page twin

## Accessibility

Output is a role=log region; the prompt is a real input with a visible label; suggested commands are buttons; the plain page shows identical content with ordinary headings and links, one switch away; no boot sequence, no flashing, and themes keep body contrast above 4.5:1.


## Source
Files: `src/patterns/sites/pebble/index.tsx`, `src/patterns/sites/pebble/content.ts`, `src/patterns/sites/pebble/styles.css`
```tsx
// ===== src/patterns/sites/pebble/index.tsx =====
import { useEffect, useRef, useState } from 'react'
import '@fontsource/ibm-plex-mono/400.css'
import '@fontsource/ibm-plex-mono/500.css'
import '@fontsource-variable/newsreader'
import './styles.css'
import { useSiteScroll } from '../_shared'
import { ABOUT, FILES, PERSON, PROJECTS, USES } from './content'

/*
 * PEBBLE: a systems engineer's portfolio as a terminal that actually works. World 16 (Terminal BBS).
 * Signature: it is a real prompt (help, ls, cat, theme, history, clear, tab completion, arrow-key history) over real
 * content, and the same content is always one switch away as an ordinary page. The terminal is a log region with a
 * labelled input; the plain view is the accessible default for anyone who does not want to type.
 */

type Line = { kind: 'in' | 'out' | 'err'; text: string }
const THEMES: Record<string, { fg: string; bg: string; dim: string; hi: string; err: string }> = {
  green: { fg: '#8dffb0', bg: '#08100b', dim: '#6fb98b', hi: '#d6ffe3', err: '#ff9a90' },
  amber: { fg: '#ffcb6b', bg: '#120d05', dim: '#c79a45', hi: '#ffe7b0', err: '#ff9a90' },
  paper: { fg: '#1d1b16', bg: '#f1ede1', dim: '#5c5748', hi: '#000000', err: '#a5281b' },
}
const COMMANDS = ['help', 'about', 'ls', 'cat', 'projects', 'open', 'contact', 'theme', 'history', 'clear', 'whoami']

const BANNER = [`${PERSON.name} · ${PERSON.role}`, 'Type help to see what this machine understands.', '']

export default function PebbleSite() {
  const root = useRef<HTMLDivElement>(null)
  const inputRef = useRef<HTMLInputElement>(null)
  const logRef = useRef<HTMLDivElement>(null)
  const [plain, setPlain] = useState(false)
  const [theme, setTheme] = useState('green')
  const [lines, setLines] = useState<Line[]>(BANNER.map((t) => ({ kind: 'out', text: t })))
  const [val, setVal] = useState('')
  const [hist, setHist] = useState<string[]>([])
  const [hi, setHi] = useState(-1)

  useSiteScroll(root, { smooth: false })

  useEffect(() => {
    logRef.current?.scrollTo({ top: logRef.current.scrollHeight })
  }, [lines])

  const run = (raw: string) => {
    const cmd = raw.trim()
    const out: Line[] = [{ kind: 'in', text: cmd }]
    const [c, ...args] = cmd.split(/\s+/)
    const say = (t: string) => t.split('\n').forEach((x) => out.push({ kind: 'out', text: x }))
    const err = (t: string) => out.push({ kind: 'err', text: t })
    switch (c.toLowerCase()) {
      case '':
        break
      case 'help':
        say('about            who I am\nls               list files\ncat <file>       read a file\nprojects         things I have built\nopen <project>   read about one\ncontact          how to reach me\ntheme <name>     green, amber or paper\nhistory          commands you have run\nclear            clear the screen')
        break
      case 'whoami':
        say(`${PERSON.name}, ${PERSON.role}, ${PERSON.place}`)
        break
      case 'about':
        say(ABOUT)
        break
      case 'ls':
        say([...Object.keys(FILES), ...PROJECTS.map((p) => `projects/${p.id}`)].join('\n'))
        break
      case 'cat': {
        const f = args[0]
        if (!f) err('cat: which file? Try ls.')
        else if (FILES[f]) say(FILES[f])
        else {
          const p = PROJECTS.find((x) => f === x.id || f === `projects/${x.id}`)
          if (p) say(`${p.name} (${p.year})\n${p.line}\n\n${p.detail}`)
          else err(`cat: ${f}: no such file`)
        }
        break
      }
      case 'projects':
        PROJECTS.forEach((p) => say(`${p.name.padEnd(10)} ${p.year}  ${p.line}`))
        say('\nopen <name> for more.')
        break
      case 'open': {
        const p = PROJECTS.find((x) => x.id === args[0])
        if (!p) err(`open: unknown project "${args[0] ?? ''}". Try projects.`)
        else say(`${p.name} (${p.year})\n${p.line}\n\n${p.detail}`)
        break
      }
      case 'contact':
        say(FILES['contact.txt'])
        break
      case 'theme': {
        const t = (args[0] ?? '').toLowerCase()
        if (THEMES[t]) {
          setTheme(t)
          say(`theme: ${t}`)
        } else err('theme: choose green, amber or paper')
        break
      }
      case 'history':
        if (!hist.length) say('nothing yet')
        else hist.forEach((h, i) => say(`${String(i + 1).padStart(3)}  ${h}`))
        break
      case 'clear':
        setLines([])
        if (cmd) setHist((h) => [...h, cmd])
        return
      case 'sudo':
        err('nice try.')
        break
      default:
        err(`${c}: command not found. Type help.`)
    }
    if (cmd) setHist((h) => [...h, cmd])
    setHi(-1)
    setLines((l) => [...l, ...out])
  }

  const onKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'ArrowUp') {
      e.preventDefault()
      const i = hi < 0 ? hist.length - 1 : Math.max(0, hi - 1)
      if (hist[i] !== undefined) {
        setHi(i)
        setVal(hist[i])
      }
    } else if (e.key === 'ArrowDown') {
      e.preventDefault()
      const i = hi + 1
      if (i >= hist.length) {
        setHi(-1)
        setVal('')
      } else {
        setHi(i)
        setVal(hist[i])
      }
    } else if (e.key === 'Tab') {
      e.preventDefault()
      const [c, ...rest] = val.split(/\s+/)
      if (!rest.length) {
        const m = COMMANDS.filter((x) => x.startsWith(c))
        if (m.length === 1) setVal(m[0] + ' ')
      } else if (['cat', 'open'].includes(c)) {
        const pool = c === 'cat' ? [...Object.keys(FILES), ...PROJECTS.map((p) => p.id)] : PROJECTS.map((p) => p.id)
        const m = pool.filter((x) => x.startsWith(rest[rest.length - 1]))
        if (m.length === 1) setVal(`${c} ${m[0]}`)
      }
    }
  }

  const t = THEMES[theme]
  return (
    <div
      className="site-pebble"
      ref={root}
      style={{ ['--fg' as string]: t.fg, ['--bg' as string]: t.bg, ['--dim' as string]: t.dim, ['--hi' as string]: t.hi, ['--err' as string]: t.err }}
    >
      <header className="bar">
        <span className="who">{PERSON.name}</span>
        <button className="mode" onClick={() => setPlain((p) => !p)} aria-pressed={plain}>
          {plain ? 'Show terminal' : 'Show plain page'}
        </button>
      </header>

      {!plain ? (
        <main className="term" id="top">
          <h1 className="sr-only">{PERSON.name}, {PERSON.role}: an interactive terminal</h1>
          <div className="screen" onClick={() => inputRef.current?.focus()}>
            <div ref={logRef} className="log" role="log" aria-live="polite" aria-label="Terminal output">
              {lines.map((l, i) => (
                <p key={i} className={l.kind}>
                  {l.kind === 'in' && <span className="ps">$ </span>}
                  {l.text || ' '}
                </p>
              ))}
            </div>
            <form
              className="prompt"
              onSubmit={(e) => {
                e.preventDefault()
                run(val)
                setVal('')
              }}
            >
              <label htmlFor="cmd" className="ps">$</label>
              <input id="cmd" ref={inputRef} value={val} onChange={(e) => setVal(e.target.value)} onKeyDown={onKey} autoComplete="off" autoCapitalize="off" spellCheck={false} aria-describedby="hint" />
            </form>
          </div>
          <p id="hint" className="hint">Try <button onClick={() => run('help')}>help</button> <button onClick={() => run('projects')}>projects</button> <button onClick={() => run('contact')}>contact</button>. Tab completes, up and down recall.</p>
        </main>
      ) : (
        <main className="plain" id="top">
          <h1>{PERSON.name}</h1>
          <p className="role">{PERSON.role}, {PERSON.place}</p>
          <p className="about">{ABOUT}</p>
          <h2>Projects</h2>
          <ul className="list">
            {PROJECTS.map((p) => (
              <li key={p.id}>
                <h3>{p.name} <span>{p.year}</span></h3>
                <p>{p.line}</p>
                <p className="d">{p.detail}</p>
              </li>
            ))}
          </ul>
          <h2>What I use</h2>
          <ul className="uses">{USES.map((u) => <li key={u}>{u}</li>)}</ul>
          <h2>Contact</h2>
          <p><a href={`mailto:${PERSON.email}`}>{PERSON.email}</a></p>
        </main>
      )}
      <footer className="foot">PEBBLE is a fictional portfolio. Everything in the terminal is also on the plain page.</footer>
    </div>
  )
}


// ===== src/patterns/sites/pebble/content.ts =====
/* The content of the portfolio, written once. The terminal and the plain page both read from it. */

export const PERSON = {
  name: 'Mira Okafor',
  role: 'Systems engineer',
  place: 'Leeds, UK',
  email: 'mira@pebble.example',
}

export type Project = { id: string; name: string; year: string; line: string; detail: string }

export const PROJECTS: Project[] = [
  {
    id: 'tidewatch',
    name: 'tidewatch',
    year: '2025',
    line: 'A small daemon that turns harbour sensor noise into a tide you can trust.',
    detail: 'Reads six sensors, rejects outliers with a rolling median, and publishes one number a minute. Runs on a Raspberry Pi in a bait shed and has missed two readings in a year.',
  },
  {
    id: 'ledgerd',
    name: 'ledgerd',
    year: '2024',
    line: 'An append-only journal with checksums, for people who lose power a lot.',
    detail: 'Every record carries a checksum of the record before it. After a crash the tail is verified and trimmed, never guessed. About 900 lines of Rust and a long README on why.',
  },
  {
    id: 'plainlog',
    name: 'plainlog',
    year: '2023',
    line: 'Structured logs you can read without a tool.',
    detail: 'A logging format that is both valid JSON lines and a legible sentence. Adopted by two teams who were tired of piping everything through a viewer.',
  },
]

export const ABOUT =
  'I build small, dull, reliable systems: things that run for years without being looked at. I like boring technology and loud documentation. Before this I wrote firmware for marine instruments.'

export const USES = ['Rust and a little Go', 'SQLite, always', 'A plain text editor', 'systemd, grudgingly']

export const FILES: Record<string, string> = {
  'about.txt': ABOUT,
  'uses.txt': USES.map((u) => `- ${u}`).join('\n'),
  'contact.txt': `Email: ${PERSON.email}\nBased in ${PERSON.place}. Replies within two working days.`,
}


// ===== src/patterns/sites/pebble/styles.css =====
.site-pebble { position: relative; min-height: 100svh; overflow-x: clip; }
.site-pebble {
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --serif: 'Newsreader Variable', Georgia, serif;
}
.site-pebble * { box-sizing: border-box; margin: 0; padding: 0; }
.site-pebble, .site-pebble { background: var(--bg); color: var(--fg); min-height: 100svh; font-family: var(--mono); }
.site-pebble button, .site-pebble input { font: inherit; color: inherit; }
.site-pebble button { cursor: pointer; }
.site-pebble :focus-visible { outline: 3px solid var(--hi); outline-offset: 3px; }
.site-pebble .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-pebble .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px clamp(16px, 4vw, 40px); font: 500 14px var(--mono); border-bottom: 1px solid var(--dim); }
.site-pebble .who { letter-spacing: 0.06em; }
.site-pebble .mode { min-height: 44px; padding: 0 16px; background: transparent; border: 1.5px solid var(--fg); font: 500 13px var(--mono); }
.site-pebble .mode:hover { background: var(--fg); color: var(--bg); }
.site-pebble .term { padding: clamp(16px, 3vw, 32px) clamp(16px, 4vw, 40px); }
.site-pebble .screen { max-width: 880px; min-height: 60svh; display: flex; flex-direction: column; font: 400 clamp(14px, 1.6vw, 17px) / 1.6 var(--mono); cursor: text; }
.site-pebble .log { flex: 1; max-height: 62svh; overflow-y: auto; padding-bottom: 6px; }
.site-pebble .log p { white-space: pre-wrap; word-break: break-word; }
.site-pebble .log .in { color: var(--hi); }
.site-pebble .log .err { color: var(--err); }
.site-pebble .ps { color: var(--dim); }
.site-pebble .prompt { display: flex; gap: 10px; align-items: center; }
.site-pebble .prompt input { flex: 1; min-height: 44px; background: transparent; border: 0; border-bottom: 1px solid var(--dim); font: inherit; color: var(--hi); caret-color: var(--fg); outline-offset: 2px; }
.site-pebble .hint { margin-top: 18px; max-width: 880px; font: 400 14px/1.8 var(--mono); color: var(--dim); }
.site-pebble .hint button { min-height: 32px; padding: 0 10px; background: transparent; border: 1px solid var(--dim); color: var(--fg); font: 500 13px var(--mono); }
.site-pebble .hint button:hover { background: var(--fg); color: var(--bg); }
.site-pebble .plain { max-width: 760px; padding: clamp(24px, 5vw, 64px) clamp(16px, 4vw, 40px); font-family: var(--serif); font-size: 20px; line-height: 1.6; }
.site-pebble .plain h1 { font-size: clamp(40px, 7vw, 76px); line-height: 1; font-weight: 600; letter-spacing: -0.02em; }
.site-pebble .plain .role { margin-top: 8px; font: 500 14px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.site-pebble .plain .about { margin-top: 24px; }
.site-pebble .plain h2 { margin-top: 44px; font: 500 13px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.site-pebble .plain .list { list-style: none; margin-top: 12px; }
.site-pebble .plain .list li { padding: 18px 0; border-top: 1px solid var(--dim); }
.site-pebble .plain h3 { font-size: 26px; font-weight: 600; }
.site-pebble .plain h3 span { font: 400 13px var(--mono); color: var(--dim); margin-left: 8px; }
.site-pebble .plain .d { margin-top: 6px; color: var(--dim); font-size: 18px; }
.site-pebble .plain .uses { margin-top: 10px; padding-left: 1.2em; }
.site-pebble .plain a { text-decoration: underline; text-underline-offset: 4px; }
.site-pebble .foot { padding: 20px clamp(16px, 4vw, 40px) 40px; font: 400 12.5px/1.6 var(--mono); color: var(--dim); }
@media (prefers-reduced-motion: no-preference) {
.site-pebble .prompt input { transition: border-color 0.2s ease; }
.site-pebble .prompt input:focus { border-bottom-color: var(--fg); }
}
@media (max-width: 640px) {
.site-pebble .who { font-size: 12px; }
}
```


## Helper it imports: `src/patterns/sites/_shared.ts`

```ts
import { useEffect, type RefObject } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import Lenis from 'lenis'

/* Helpers shared by the whole-site demos in this folder. They are full pages, so they scroll the window,
   and they must coexist with UI Lab's own hash router and clean up completely when you leave. */

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/**
 * Smooth scroll (Lenis, driven by GSAP's ticker so ScrollTrigger stays in sync) plus in-page anchor links.
 * Anchor clicks are handled here instead of by the browser: UI Lab's router lives in the URL hash,
 * so a real `#section` navigation would be read as a route change.
 * Everything is torn down on unmount.
 */
export function useSiteScroll(root: RefObject<HTMLElement | null>, { smooth = true, lerp = 0.1 } = {}) {
  useEffect(() => {
    const el = root.current
    if (!el) return
    let lenis: Lenis | null = null
    let tick: ((t: number) => void) | null = null
    if (smooth && !reducedMotion()) {
      lenis = new Lenis({ lerp })
      lenis.on('scroll', ScrollTrigger.update)
      tick = (t: number) => lenis!.raf(t * 1000)
      gsap.ticker.add(tick)
      gsap.ticker.lagSmoothing(0)
    }
    const onClick = (e: MouseEvent) => {
      const a = (e.target as HTMLElement).closest<HTMLAnchorElement>('a[href^="#"]')
      if (!a || !el.contains(a)) return
      const id = a.getAttribute('href')!.slice(1)
      if (id.startsWith('/')) return // a UI Lab route, let it through
      e.preventDefault()
      const target = id ? el.querySelector<HTMLElement>(`#${CSS.escape(id)}`) : null
      if (!target) return
      if (lenis) lenis.scrollTo(target)
      else target.scrollIntoView({ behavior: 'smooth' })
    }
    el.addEventListener('click', onClick)
    return () => {
      el.removeEventListener('click', onClick)
      if (tick) gsap.ticker.remove(tick)
      gsap.ticker.lagSmoothing(500, 33) // GSAP's default
      lenis?.destroy()
      ScrollTrigger.getAll().forEach((t) => t.kill())
    }
  }, [root, smooth, lerp])
}
```

# Site: LIGHTHOUSE FORECAST (plain-text weather)
> A weather page set as plain text: one monospace column, no images, charts drawn with characters. Every character chart has a real table beside it, so the density is honest and the page loads instantly.
- **Category:** Sites
- **Slug:** site-plain-forecast
- **Tags:** site, full page, niche world, plain text, ascii, weather, data, monospace, minimal, operate
- **Dependencies:** @fontsource/ibm-plex-mono, sites/_shared.ts
- **Live demo:** https://ui-lab-weld.vercel.app/#/site-plain-forecast
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sites/plain-forecast/index.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sites/plain-forecast/index.tsx
- **Raw files:** https://ui-lab-weld.vercel.app/raw/sites/plain-forecast/index.tsx, https://ui-lab-weld.vercel.app/raw/sites/plain-forecast/data.ts, https://ui-lab-weld.vercel.app/raw/sites/plain-forecast/styles.css

## When to use
- Data-dense pages for status, schedules, scores, prices and forecasts where speed and scanability beat decoration
- Reference for text-mode charts with accessible twins, text-only controls that are real buttons, and light and dark from the system setting

## Accessibility

ASCII charts are hidden from assistive technology and each has a real table or sentence with the same numbers; day, unit and place controls are native buttons and a select; the current hour is marked in the table, not by colour alone; light and dark follow the system, with 4.5:1 text contrast in both.


## Source
Files: `src/patterns/sites/plain-forecast/index.tsx`, `src/patterns/sites/plain-forecast/data.ts`, `src/patterns/sites/plain-forecast/styles.css`
```tsx
// ===== src/patterns/sites/plain-forecast/index.tsx =====
import { useMemo, useRef, useState } from 'react'
import '@fontsource/ibm-plex-mono/400.css'
import '@fontsource/ibm-plex-mono/500.css'
import './styles.css'
import { useSiteScroll } from '../_shared'
import { PLACES, day, shade, tempChart, toF, type Place } from './data'

/*
 * LIGHTHOUSE FORECAST: a weather page set as plain text. World 21 (Plain Text Sheet), the Operate-mode proof.
 * Signature: density and honesty. One column, no images, charts drawn with characters. Because a character chart is
 * invisible to a screen reader, every chart has a real table beside it and the art is hidden from assistive tech.
 * Links are text, state is in the URL-sized words ("change place", "show earlier hours"), and it loads instantly.
 */

const NOW = 14

export default function PlainForecastSite() {
  const root = useRef<HTMLDivElement>(null)
  const [place, setPlace] = useState<Place>('Margate')
  const [off, setOff] = useState(0)
  const [unit, setUnit] = useState<'C' | 'F'>('C')
  const [early, setEarly] = useState(false)

  useSiteScroll(root, { smooth: false })

  const d = useMemo(() => day(place, off), [place, off])
  const week = useMemo(() => Array.from({ length: 7 }, (_, i) => day(place, i)), [place])
  const u = (c: number) => (unit === 'C' ? `${c.toFixed(0)}°C` : `${toF(c)}°F`)
  const now = off === 0 ? d.hours[NOW] : null
  const shown = d.hours.filter((h) => (early ? true : off !== 0 || h.h >= NOW - 2))
  const chart = useMemo(() => tempChart(d.hours, off === 0 ? NOW : null, unit), [d, off, unit])

  return (
    <div className="site-plain-forecast" ref={root}>
      <header className="top">
        <p className="brand"><a href="#top">☂ lighthouse.forecast</a></p>
        <p className="meta">
          <button className="lnk" onClick={() => setUnit(unit === 'C' ? 'F' : 'C')} aria-label={`Switch units, now ${unit === 'C' ? 'Celsius' : 'Fahrenheit'}`}>°{unit === 'C' ? 'F' : 'C'}</button>
        </p>
      </header>

      <main id="top">
        <h1>{place} · {d.label}</h1>
        <p className="place">
          <label htmlFor="pl">change place: </label>
          <select id="pl" value={place} onChange={(e) => { setPlace(e.target.value as Place); setEarly(false) }}>
            {PLACES.map((p) => <option key={p}>{p}</option>)}
          </select>
        </p>
        <p className="days" role="group" aria-label="Day">
          <button className="lnk" disabled={off === 0} onClick={() => setOff(off - 1)}>&lt; earlier</button>
          {' '}
          <span aria-current="true">[{d.label}]</span>
          {' '}
          <button className="lnk" disabled={off === 6} onClick={() => setOff(off + 1)}>later &gt;</button>
        </p>

        <section aria-labelledby="hn" className="sec">
          <h2 id="hn">NOW</h2>
          <pre className="pre" aria-hidden>{'='.repeat(60)}</pre>
          {now ? (
            <dl className="kv">
              <div><dt>Conditions</dt><dd>{now.cond}</dd></div>
              <div><dt>Temperature</dt><dd>{u(now.t)} (feels {u(now.feels)})</dd></div>
              <div><dt>Wind</dt><dd>{now.wind} km/h {now.dir}</dd></div>
              <div><dt>Rain chance</dt><dd>{Math.round(now.rain * 100)}%</dd></div>
            </dl>
          ) : (
            <p>Forecast for {d.label}: {d.cond}, {u(d.lo)} to {u(d.hi)}, wind about {d.windAvg} km/h.</p>
          )}
        </section>

        <section aria-labelledby="hh" className="sec">
          <h2 id="hh">HOURLY</h2>
          <pre className="pre" aria-hidden>{'='.repeat(60)}</pre>
          <table>
            <caption className="sr-only">Hourly forecast for {place}, {d.label}</caption>
            <thead><tr><th scope="col">Hour</th><th scope="col">Sky</th><th scope="col" className="n">Temp</th><th scope="col" className="n">Rain</th><th scope="col" className="n">Wind</th></tr></thead>
            <tbody>
              {shown.map((h) => (
                <tr key={h.h} className={off === 0 && h.h === NOW ? 'now' : ''}>
                  <th scope="row">{String(h.h).padStart(2, '0')}:00</th>
                  <td>{h.cond}</td>
                  <td className="n">{u(h.t)}</td>
                  <td className="n">{Math.round(h.rain * 100)}%</td>
                  <td className="n">{h.wind} {h.dir}</td>
                </tr>
              ))}
            </tbody>
          </table>
          <p><button className="lnk" onClick={() => setEarly((e) => !e)} aria-expanded={early}>{early ? 'show fewer hours' : 'show earlier hours'}</button></p>
        </section>

        <section aria-labelledby="hc" className="sec">
          <h2 id="hc">CHARTS</h2>
          <pre className="pre" aria-hidden>{'='.repeat(60)}</pre>
          <p className="cap">Temperature, 24 hours (°{unit}). The table above has the same numbers.</p>
          <pre className="art" aria-hidden>{chart.join('\n')}</pre>
          <p className="cap">Chance of rain by hour. Key: · under 8%, ░ light, ▒ moderate, ▓ heavy, █ very likely.</p>
          <pre className="art" aria-hidden>{d.hours.map((h) => shade(h.rain).repeat(2)).join('')}{'\n'}{d.hours.map((h) => (h.h % 3 === 0 ? String(h.h).padStart(2, '0') : '  ')).join('')}</pre>
          <p className="sr-only">Rain is most likely at {String(d.hours.reduce((a, h) => (h.rain > a.rain ? h : a)).h).padStart(2, '0')}:00, at {Math.round(d.rainMax * 100)}%.</p>
        </section>

        <section aria-labelledby="hw" className="sec">
          <h2 id="hw">THIS WEEK</h2>
          <pre className="pre" aria-hidden>{'='.repeat(60)}</pre>
          <table>
            <caption className="sr-only">Seven-day forecast for {place}</caption>
            <thead><tr><th scope="col">Day</th><th scope="col">Sky</th><th scope="col" className="n">Low</th><th scope="col" className="n">High</th><th scope="col" className="n">Wind</th></tr></thead>
            <tbody>
              {week.map((w, i) => (
                <tr key={i} className={i === off ? 'now' : ''}>
                  <th scope="row"><button className="lnk" onClick={() => setOff(i)} aria-current={i === off ? 'true' : undefined}>{w.label}</button></th>
                  <td>{w.cond}</td>
                  <td className="n">{u(w.lo)}</td>
                  <td className="n">{u(w.hi)}</td>
                  <td className="n">{w.windAvg} km/h</td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>
      </main>
      <footer className="foot">
        <p>This forecast is generated and fictional. It is not real weather.</p>
        <p>Pages like this load in one request and work without scripts for reading: that is the point.</p>
      </footer>
    </div>
  )
}


// ===== src/patterns/sites/plain-forecast/data.ts =====
/* A deterministic fake forecast: the same place and day always give the same numbers. Nothing here is real weather. */

export const PLACES = ['Margate', 'Aberdeen', 'Penzance', 'Leeds'] as const
export type Place = (typeof PLACES)[number]

const BASE: Record<Place, { t: number; wet: number; wind: number }> = {
  Margate: { t: 14, wet: 0.35, wind: 16 },
  Aberdeen: { t: 10, wet: 0.5, wind: 22 },
  Penzance: { t: 13, wet: 0.55, wind: 24 },
  Leeds: { t: 12, wet: 0.45, wind: 12 },
}

function rng(seed: number) {
  let s = seed >>> 0
  return () => {
    s = (s * 1664525 + 1013904223) >>> 0
    return s / 4294967296
  }
}

export type Hour = { h: number; t: number; feels: number; rain: number; wind: number; dir: string; cond: string }
export type Day = { label: string; hours: Hour[]; lo: number; hi: number; rainMax: number; windAvg: number; cond: string }

const DIRS = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW']
const NAMES = ['Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue']

export function day(place: Place, offset: number): Day {
  const b = BASE[place]
  const r = rng(place.length * 977 + offset * 131 + place.charCodeAt(0))
  const mood = r() // a front passes through on some days
  const hours: Hour[] = []
  const front = 6 + Math.floor(r() * 12)
  const dayBias = (r() - 0.5) * 5
  for (let h = 0; h < 24; h++) {
    const t = b.t + dayBias + 4.5 * Math.sin(((h - 9) / 24) * Math.PI * 2) + (r() - 0.5) * 0.8
    const near = Math.max(0, 1 - Math.abs(h - front) / 5)
    const rain = Math.min(1, Math.max(0, near * (0.4 + mood * 0.6) * b.wet * 2 + (r() - 0.5) * 0.08))
    const wind = Math.max(3, b.wind * (0.7 + near * 0.6 + r() * 0.2))
    const cond = rain > 0.55 ? 'Rain' : rain > 0.25 ? 'Showers' : t > b.t + dayBias + 2 ? 'Sunny' : 'Cloudy'
    hours.push({ h, t: Math.round(t * 10) / 10, feels: Math.round((t - wind / 12) * 10) / 10, rain: Math.round(rain * 100) / 100, wind: Math.round(wind), dir: DIRS[(offset * 3 + Math.floor(h / 6) + place.length) % 8], cond })
  }
  const lo = Math.min(...hours.map((x) => x.t))
  const hi = Math.max(...hours.map((x) => x.t))
  const rainMax = Math.max(...hours.map((x) => x.rain))
  return {
    label: offset === 0 ? 'Today' : NAMES[(offset + 2) % 7],
    hours,
    lo,
    hi,
    rainMax,
    windAvg: Math.round(hours.reduce((a, x) => a + x.wind, 0) / 24),
    cond: rainMax > 0.55 ? 'Rain' : rainMax > 0.25 ? 'Showers' : hi > b.t + 2 ? 'Sunny' : 'Cloudy',
  }
}

export const toF = (c: number) => Math.round((c * 9) / 5 + 32)
export const shade = (p: number) => (p > 0.75 ? '█' : p > 0.5 ? '▓' : p > 0.25 ? '▒' : p > 0.08 ? '░' : '·')

/** A character chart of temperature across 24 hours. Returns lines of text. */
export function tempChart(hours: Hour[], nowHour: number | null, unit: 'C' | 'F'): string[] {
  const rows = 9
  const temps = hours.map((h) => h.t)
  const lo = Math.floor(Math.min(...temps))
  const hi = Math.ceil(Math.max(...temps))
  const span = Math.max(1, hi - lo)
  const grid = Array.from({ length: rows }, () => Array(48).fill(' '))
  hours.forEach((h, i) => {
    const row = rows - 1 - Math.round(((h.t - lo) / span) * (rows - 1))
    grid[row][i * 2] = '*'
  })
  const lines = grid.map((cells, i) => {
    const v = hi - (span * i) / (rows - 1)
    const label = String(Math.round(unit === 'C' ? v : toF(v))).padStart(3)
    return `${label} |${cells.join('')}`
  })
  lines.push('    +' + '-'.repeat(48))
  let axis = '     '
  for (let h = 0; h < 24; h += 3) axis += String(h).padStart(2, '0') + '    '
  lines.push(axis)
  if (nowHour !== null) lines.push(' '.repeat(5 + nowHour * 2) + '^ now')
  return lines
}


// ===== src/patterns/sites/plain-forecast/styles.css =====
.site-plain-forecast { position: relative; min-height: 100svh; overflow-x: clip; }
.site-plain-forecast {
  --paper: #fbfaf4;
  --ink: #141412;
  --dim: #55534b;
  --link: #0b3fb0;
  --hi: #fff2b8;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', monospace;
}
@media (prefers-color-scheme: dark) {
.site-plain-forecast { --paper: #121311; --ink: #e9e8e0; --dim: #a6a498; --link: #8fb4ff; --hi: #3a3412; }
}
.site-plain-forecast * { box-sizing: border-box; margin: 0; padding: 0; }
.site-plain-forecast, .site-plain-forecast { background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 16px; line-height: 1.55; min-height: 100svh; }
.site-plain-forecast :focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.site-plain-forecast .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-plain-forecast button, .site-plain-forecast select { font: inherit; color: inherit; }
.site-plain-forecast .lnk { background: none; border: 0; padding: 0 2px; min-height: 28px; color: var(--link); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.site-plain-forecast .lnk:disabled { color: var(--dim); text-decoration: none; cursor: default; }
.site-plain-forecast a { color: var(--link); }
.site-plain-forecast .top { display: flex; justify-content: space-between; max-width: 72ch; margin: 0 auto; padding: 18px 16px 0; }
.site-plain-forecast main, .site-plain-forecast .foot { max-width: 72ch; margin: 0 auto; padding: 0 16px; }
.site-plain-forecast main { padding-bottom: 32px; }
.site-plain-forecast h1 { margin-top: 28px; font-size: 24px; font-weight: 500; }
.site-plain-forecast h2 { margin-top: 28px; font-size: 16px; font-weight: 500; letter-spacing: 0.1em; }
.site-plain-forecast .place, .site-plain-forecast .days { margin-top: 10px; }
.site-plain-forecast .place select { min-height: 36px; padding: 0 8px; background: var(--paper); border: 1px solid var(--ink); }
.site-plain-forecast .pre { margin: 2px 0 8px; white-space: pre; overflow: hidden; color: var(--dim); font-size: 14px; }
.site-plain-forecast .kv { display: grid; gap: 0; }
.site-plain-forecast .kv div { display: grid; grid-template-columns: 14ch 1fr; gap: 8px; }
.site-plain-forecast .kv dt { color: var(--dim); }
.site-plain-forecast table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 15px; }
.site-plain-forecast th, .site-plain-forecast td { padding: 4px 10px 4px 0; text-align: left; font-weight: 400; border-bottom: 1px dotted var(--dim); }
.site-plain-forecast thead th { color: var(--dim); font-size: 13px; }
.site-plain-forecast .n { text-align: right; }
.site-plain-forecast tr.now { background: var(--hi); }
.site-plain-forecast .cap { margin-top: 12px; color: var(--dim); font-size: 14px; }
.site-plain-forecast .art { margin: 8px 0 12px; white-space: pre; overflow-x: auto; font-size: 14px; line-height: 1.25; letter-spacing: 0; padding-bottom: 6px; }
.site-plain-forecast .foot { padding-top: 20px; padding-bottom: 48px; border-top: 1px dotted var(--dim); color: var(--dim); font-size: 14px; }
.site-plain-forecast .foot p + p { margin-top: 6px; }
@media (max-width: 520px) {
.site-plain-forecast { font-size: 15px; }
.site-plain-forecast .kv div { grid-template-columns: 11ch 1fr; }
.site-plain-forecast .pre { font-size: 12px; }
}.site-plain-forecast .brand a { display: inline-flex; align-items: center; min-height: 44px; }
.site-plain-forecast .top .lnk { min-width: 44px; min-height: 44px; }
```


## Helper it imports: `src/patterns/sites/_shared.ts`

```ts
import { useEffect, type RefObject } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import Lenis from 'lenis'

/* Helpers shared by the whole-site demos in this folder. They are full pages, so they scroll the window,
   and they must coexist with UI Lab's own hash router and clean up completely when you leave. */

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/**
 * Smooth scroll (Lenis, driven by GSAP's ticker so ScrollTrigger stays in sync) plus in-page anchor links.
 * Anchor clicks are handled here instead of by the browser: UI Lab's router lives in the URL hash,
 * so a real `#section` navigation would be read as a route change.
 * Everything is torn down on unmount.
 */
export function useSiteScroll(root: RefObject<HTMLElement | null>, { smooth = true, lerp = 0.1 } = {}) {
  useEffect(() => {
    const el = root.current
    if (!el) return
    let lenis: Lenis | null = null
    let tick: ((t: number) => void) | null = null
    if (smooth && !reducedMotion()) {
      lenis = new Lenis({ lerp })
      lenis.on('scroll', ScrollTrigger.update)
      tick = (t: number) => lenis!.raf(t * 1000)
      gsap.ticker.add(tick)
      gsap.ticker.lagSmoothing(0)
    }
    const onClick = (e: MouseEvent) => {
      const a = (e.target as HTMLElement).closest<HTMLAnchorElement>('a[href^="#"]')
      if (!a || !el.contains(a)) return
      const id = a.getAttribute('href')!.slice(1)
      if (id.startsWith('/')) return // a UI Lab route, let it through
      e.preventDefault()
      const target = id ? el.querySelector<HTMLElement>(`#${CSS.escape(id)}`) : null
      if (!target) return
      if (lenis) lenis.scrollTo(target)
      else target.scrollIntoView({ behavior: 'smooth' })
    }
    el.addEventListener('click', onClick)
    return () => {
      el.removeEventListener('click', onClick)
      if (tick) gsap.ticker.remove(tick)
      gsap.ticker.lagSmoothing(500, 33) // GSAP's default
      lenis?.destroy()
      ScrollTrigger.getAll().forEach((t) => t.kill())
    }
  }, [root, smooth, lerp])
}
```

# Site: PIP (tiny-habits app)
> A friendly app landing page in the Soft Playful world: a mascot whose eyes follow you and who changes mood as you tick habits in a live demo, pastel fields with two hot pops, big rounded shapes and springy easing.
- **Category:** Sites
- **Slug:** site-pip
- **Tags:** site, full page, soft playful, mascot, app landing, consumer, rounded, spring, pastel, persuade
- **Dependencies:** @fontsource-variable/bricolage-grotesque, sites/_shared.ts
- **Live demo:** https://ui-lab-weld.vercel.app/#/site-pip
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sites/pip/index.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sites/pip/index.tsx
- **Raw files:** https://ui-lab-weld.vercel.app/raw/sites/pip/index.tsx, https://ui-lab-weld.vercel.app/raw/sites/pip/Mascot.tsx, https://ui-lab-weld.vercel.app/raw/sites/pip/styles.css

## When to use
- Consumer apps, kids and education, wellness with humour, community products
- Reference for a reactive character (pointer-tracked eyes, squash on press), overshoot easing as a CSS curve, and cheerful design that still meets contrast and touch-target rules

## Accessibility

The mascot has a text description that changes with its mood; the demo checklist uses real checkboxes with visible focus and a status sentence; type is large with checked contrast; 48 to 60px targets; springy motion, floating scores and the squash are off under reduced motion.


## Source
Files: `src/patterns/sites/pip/index.tsx`, `src/patterns/sites/pip/Mascot.tsx`, `src/patterns/sites/pip/styles.css`
```tsx
// ===== src/patterns/sites/pip/index.tsx =====
import { useRef, useState } from 'react'
import '@fontsource-variable/bricolage-grotesque'
import './styles.css'
import { useSiteScroll } from '../_shared'
import Mascot, { type Mood } from './Mascot'

/*
 * PIP: a tiny-habits app landing page. World 6 (Soft Playful).
 * Signature: a character that reacts. Pip's eyes follow you, it squashes when pressed, and it changes mood as you tick
 * habits in the live demo. Big rounded shapes, pastel fields with two hot pops, springy easing (an overshoot curve),
 * and a friendly ink instead of black. Everything cheerful is also readable: type is large and contrast is checked.
 */

const HABITS = ['Drink a glass of water', 'Stretch for two minutes', 'Write one line in a journal', 'Step outside for five minutes']

export default function PipSite() {
  const root = useRef<HTMLDivElement>(null)
  const [done, setDone] = useState<boolean[]>(HABITS.map(() => false))
  const [email, setEmail] = useState('')
  const [state, setState] = useState<'idle' | 'bad' | 'ok'>('idle')
  const [pops, setPops] = useState<{ id: number; x: number }[]>([])

  useSiteScroll(root, { smooth: false })

  const n = done.filter(Boolean).length
  const mood: Mood = n === 0 ? 'calm' : n === HABITS.length ? 'cheer' : 'happy'
  const toggle = (i: number) => {
    const next = done.map((v, j) => (j === i ? !v : v))
    setDone(next)
    if (next[i]) {
      const id = Date.now() + i
      setPops((p) => [...p, { id, x: 20 + Math.random() * 60 }])
      setTimeout(() => setPops((p) => p.filter((q) => q.id !== id)), 900)
    }
  }

  return (
    <div className="site-pip" ref={root}>
      <header className="top">
        <a href="#top" className="logo"><span aria-hidden>●</span> pip</a>
        <nav aria-label="Sections">
          <a href="#try">Try it</a>
          <a href="#why">Why it works</a>
          <a href="#join" className="pill">Get Pip</a>
        </nav>
      </header>

      <main id="top">
        <section className="hero" aria-labelledby="h1">
          <div className="copy">
            <h1 id="h1">Tiny habits, with a tiny friend.</h1>
            <p className="lede">Pip nudges you toward one small thing at a time. No streak shaming, no guilt trips, and nobody sees your list but you.</p>
            <a className="cta" href="#join">Get early access</a>
            <p className="note">Free on iPhone and Android. No account needed.</p>
          </div>
          <div className="stage">
            <Mascot mood="calm" size={300} />
          </div>
        </section>

        <section className="try" id="try" aria-labelledby="h2t">
          <h2 id="h2t">Try today&rsquo;s list</h2>
          <p className="sub">Tick one and watch Pip.</p>
          <div className="try-grid">
            <ul className="habits">
              {HABITS.map((h, i) => (
                <li key={h}>
                  <label>
                    <input type="checkbox" checked={done[i]} onChange={() => toggle(i)} />
                    <span className="box" aria-hidden>{done[i] ? '✓' : ''}</span>
                    <span className="text">{h}</span>
                  </label>
                </li>
              ))}
            </ul>
            <div className="friend">
              <Mascot mood={mood} size={200} />
              <div className="pops" aria-hidden>
                {pops.map((p) => <span key={p.id} style={{ left: `${p.x}%` }}>+1</span>)}
              </div>
              <p className="say" role="status">{n === 0 ? 'Hi! Pick one small thing.' : n === HABITS.length ? 'All four. You are on a roll!' : `${n} of ${HABITS.length}. Nice and easy.`}</p>
            </div>
          </div>
        </section>

        <section className="why" id="why" aria-labelledby="h2w">
          <h2 id="h2w">Why small works</h2>
          <div className="why-grid">
            <article className="big a"><h3>Two minutes, not two hours.</h3><p>A habit you can finish while the kettle boils is a habit you keep. Pip starts there and grows only when you ask.</p></article>
            <article className="b"><h3>Kind reminders</h3><p>One nudge a day, at the time you pick. Miss a day and Pip just says hello again.</p></article>
            <article className="c"><h3>Private by default</h3><p>Your list stays on your phone.</p></article>
          </div>
        </section>

        <section className="join" id="join" aria-labelledby="h2j">
          <h2 id="h2j">Be first to meet Pip</h2>
          <form
            noValidate
            onSubmit={(e) => {
              e.preventDefault()
              setState(/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email) ? 'ok' : 'bad')
            }}
          >
            <label htmlFor="pe">Your email</label>
            <div className="row">
              <input id="pe" type="email" autoComplete="email" value={email} onChange={(e) => { setEmail(e.target.value); setState('idle') }} aria-invalid={state === 'bad'} aria-describedby="pm" />
              <button>Count me in</button>
            </div>
            <p id="pm" role={state === 'bad' ? 'alert' : 'status'}>{state === 'bad' ? 'Hmm, that email looks off. Try name@example.com.' : state === 'ok' ? 'You are on the list. Pip is excited.' : ' '}</p>
          </form>
        </section>
      </main>
      <footer className="foot">Pip is a fictional app. The habits here are examples, and nothing you tick is saved.</footer>
    </div>
  )
}


// ===== src/patterns/sites/pip/Mascot.tsx =====
import { useEffect, useRef } from 'react'

/*
 * Pip, the mascot: a soft blob with two eyes that follow the pointer, a mouth that changes with mood, and a squash on
 * press. Eyes and body move with transforms set from one pointer handler (no React state per move). Under reduced
 * motion the eyes look straight ahead and the squash is off; the mood still changes.
 */

export type Mood = 'calm' | 'happy' | 'cheer'

export default function Mascot({ mood, size = 220 }: { mood: Mood; size?: number }) {
  const svg = useRef<SVGSVGElement>(null)
  const eyeL = useRef<SVGGElement>(null)
  const eyeR = useRef<SVGGElement>(null)

  useEffect(() => {
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return
    const move = (e: PointerEvent) => {
      const el = svg.current
      if (!el) return
      const r = el.getBoundingClientRect()
      const cx = r.left + r.width / 2
      const cy = r.top + r.height * 0.42
      const dx = e.clientX - cx
      const dy = e.clientY - cy
      const d = Math.hypot(dx, dy) || 1
      const k = Math.min(1, d / 260) * 7
      const x = (dx / d) * k
      const y = (dy / d) * k
      const t = `translate(${x.toFixed(1)}px, ${y.toFixed(1)}px)`
      if (eyeL.current) eyeL.current.style.transform = t
      if (eyeR.current) eyeR.current.style.transform = t
    }
    addEventListener('pointermove', move, { passive: true })
    return () => removeEventListener('pointermove', move)
  }, [])

  const mouth = mood === 'calm' ? 'M88 132 q22 14 44 0' : mood === 'happy' ? 'M84 128 q26 28 52 0' : 'M82 124 q28 40 56 0 z'
  return (
    <svg
      ref={svg}
      viewBox="0 0 220 220"
      width={size}
      height={size}
      role="img"
      aria-label={`Pip the mascot, looking ${mood === 'calm' ? 'calm' : mood === 'happy' ? 'happy' : 'delighted'}`}
      className="pip-mascot"
      onPointerDown={(e) => e.currentTarget.classList.add('squash')}
      onPointerUp={(e) => e.currentTarget.classList.remove('squash')}
      onPointerLeave={(e) => e.currentTarget.classList.remove('squash')}
    >
      <ellipse cx="110" cy="204" rx="62" ry="9" fill="#2a2438" opacity="0.12" />
      <path d="M110 22 C170 22 200 70 196 124 C192 176 156 200 110 200 C64 200 28 176 24 124 C20 70 50 22 110 22 Z" fill="#ff8f6b" stroke="#2a2438" strokeWidth="5" strokeLinejoin="round" />
      <path d="M62 70 C74 50 96 42 112 42" fill="none" stroke="#fff" strokeWidth="9" strokeLinecap="round" opacity="0.45" />
      <path d="M96 22 C94 8 104 2 112 6 C108 14 110 18 116 22" fill="#7bc47f" stroke="#2a2438" strokeWidth="4" strokeLinejoin="round" />
      <g ref={eyeL} style={{ transition: 'transform 90ms ease-out' }}>
        <ellipse cx="82" cy="104" rx="15" ry="18" fill="#fff" stroke="#2a2438" strokeWidth="4" />
        <circle cx="82" cy="106" r="7.5" fill="#2a2438" />
        <circle cx="85" cy="102" r="2.4" fill="#fff" />
      </g>
      <g ref={eyeR} style={{ transition: 'transform 90ms ease-out' }}>
        <ellipse cx="138" cy="104" rx="15" ry="18" fill="#fff" stroke="#2a2438" strokeWidth="4" />
        <circle cx="138" cy="106" r="7.5" fill="#2a2438" />
        <circle cx="141" cy="102" r="2.4" fill="#fff" />
      </g>
      <path d={mouth} fill={mood === 'cheer' ? '#7a1f35' : 'none'} stroke="#2a2438" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" />
      <circle cx="58" cy="136" r="9" fill="#ff5a36" opacity="0.35" />
      <circle cx="162" cy="136" r="9" fill="#ff5a36" opacity="0.35" />
    </svg>
  )
}


// ===== src/patterns/sites/pip/styles.css =====
.site-pip { position: relative; min-height: 100svh; overflow-x: clip; }
.site-pip {
  --peach: #ffe6d8;
  --mint: #d3f3df;
  --lilac: #e4dcff;
  --pop: #ff5a36;
  --pop-ink: #b8310f;
  --ink: #2a2438;
  --muted: #5a5470;
  --font: 'Bricolage Grotesque Variable', system-ui, sans-serif;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
.site-pip * { box-sizing: border-box; margin: 0; padding: 0; }
.site-pip, .site-pip { background: #fff7f1; color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
.site-pip a { color: inherit; }
.site-pip button, .site-pip input { font: inherit; color: inherit; }
.site-pip button { cursor: pointer; }
.site-pip :focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; border-radius: 12px; }
.site-pip .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-pip h1, .site-pip h2, .site-pip h3 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; }
.site-pip .pip-mascot { display: block; cursor: grab; transition: transform 0.35s var(--spring); }
.site-pip .pip-mascot.squash { transform: scale(1.08, 0.88); }
.site-pip .top { display: flex; align-items: center; justify-content: space-between; padding: 14px clamp(16px, 4vw, 48px); position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, #fff7f1 92%, transparent); }
.site-pip .logo { font-size: 30px; font-weight: 800; text-decoration: none; letter-spacing: -0.03em; }
.site-pip .logo span { color: var(--pop); font-size: 20px; margin-right: 6px; }
.site-pip .top nav { display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 17px; }
.site-pip .top nav a { display: grid; place-items: center; min-height: 48px; padding: 0 16px; text-decoration: none; border-radius: 999px; }
.site-pip .top nav a:hover { background: var(--peach); }
.site-pip .top nav .pill { background: var(--ink); color: #fff; }
.site-pip .top nav .pill:hover { background: var(--pop-ink); }
.site-pip .hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 24px; align-items: center; padding: clamp(24px, 5vw, 72px) clamp(16px, 4vw, 48px); }
.site-pip .hero h1 { font-size: clamp(48px, 8vw, 104px); }
.site-pip .lede { margin-top: 22px; max-width: 30ch; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.4; color: var(--muted); }
.site-pip .cta { display: inline-grid; place-items: center; min-height: 60px; margin-top: 28px; padding: 0 34px; background: var(--pop); color: #fff; font-size: 20px; font-weight: 700; text-decoration: none; border-radius: 999px; border: 3px solid var(--ink); transition: transform 0.3s var(--spring); }
.site-pip .cta:hover { transform: translateY(-3px) rotate(-1.5deg); }
.site-pip .cta:active { transform: scale(0.96); }
.site-pip .note { margin-top: 14px; font-size: 16px; color: var(--muted); }
.site-pip .stage { display: grid; place-items: center; min-height: 340px; border-radius: 48px; background: var(--lilac); border: 3px solid var(--ink); }
.site-pip .try { margin: 0 clamp(16px, 4vw, 48px); padding: clamp(28px, 5vw, 64px); border-radius: 48px; background: var(--mint); border: 3px solid var(--ink); }
.site-pip .try h2, .site-pip .why h2, .site-pip .join h2 { font-size: clamp(36px, 5vw, 64px); }
.site-pip .sub { margin-top: 8px; font-size: 20px; color: var(--muted); }
.site-pip .try-grid { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 28px; align-items: center; }
.site-pip .habits { list-style: none; display: grid; gap: 12px; }
.site-pip .habits label { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 10px 20px; background: #fff; border: 3px solid var(--ink); border-radius: 24px; font-size: 20px; font-weight: 600; cursor: pointer; transition: transform 0.3s var(--spring); }
.site-pip .habits label:hover { transform: translateX(6px); }
.site-pip .habits input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.site-pip .habits input:focus-visible + .box { outline: 4px solid var(--ink); outline-offset: 3px; }
.site-pip .box { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; font-size: 22px; font-weight: 800; color: #fff; transition: background 0.25s ease, transform 0.35s var(--spring); }
.site-pip .habits input:checked + .box { background: var(--pop); transform: scale(1.12) rotate(-6deg); }
.site-pip .habits input:checked ~ .text { text-decoration: line-through; text-decoration-thickness: 3px; color: var(--muted); }
.site-pip .friend { position: relative; display: grid; place-items: center; gap: 8px; }
.site-pip .say { font-size: 20px; font-weight: 700; text-align: center; min-height: 2.4em; }
.site-pip .pops span { position: absolute; top: 40%; font-size: 28px; font-weight: 800; color: var(--pop-ink); animation: pip-pip-pop 0.9s ease-out forwards; }
@keyframes pip-pip-pop { from { transform: translateY(0) scale(0.8); opacity: 1; } to { transform: translateY(-80px) scale(1.4); opacity: 0; } }
.site-pip .why { padding: clamp(40px, 6vw, 96px) clamp(16px, 4vw, 48px); }
.site-pip .why-grid { margin-top: 28px; display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; gap: 20px; }
.site-pip .why-grid article { padding: 28px; border-radius: 36px; border: 3px solid var(--ink); }
.site-pip .why-grid h3 { font-size: 28px; }
.site-pip .why-grid p { margin-top: 10px; font-size: 19px; line-height: 1.45; color: var(--ink); }
.site-pip .why-grid .a { grid-row: span 2; background: var(--peach); display: grid; align-content: center; }
.site-pip .why-grid .a h3 { font-size: clamp(34px, 4vw, 52px); }
.site-pip .why-grid .b { background: var(--lilac); transform: rotate(1.2deg); }
.site-pip .why-grid .c { background: var(--mint); transform: rotate(-1.4deg); }
.site-pip .join { margin: 0 clamp(16px, 4vw, 48px) 0; padding: clamp(32px, 5vw, 72px); border-radius: 48px; background: var(--ink); color: #fff; }
.site-pip .join form { margin-top: 22px; max-width: 520px; }
.site-pip .join label { font-size: 17px; font-weight: 600; }
.site-pip .row { display: flex; gap: 10px; margin-top: 8px; }
.site-pip .row input { flex: 1; min-height: 60px; padding: 0 22px; border-radius: 999px; border: 3px solid #fff; background: #fff; color: var(--ink); font-size: 20px; }
.site-pip .row input[aria-invalid='true'] { border-color: var(--pop); }
.site-pip .row button { min-height: 60px; padding: 0 28px; border-radius: 999px; border: 3px solid #fff; background: var(--pop); color: #fff; font-size: 19px; font-weight: 700; transition: transform 0.3s var(--spring); }
.site-pip .row button:hover { transform: scale(1.05) rotate(-1.5deg); }
.site-pip .join #pm { min-height: 1.6em; margin-top: 12px; font-size: 18px; font-weight: 600; }
.site-pip .foot { padding: 28px clamp(16px, 4vw, 48px) 48px; font-size: 15px; color: var(--muted); }
@media (max-width: 860px) {
.site-pip .hero, .site-pip .try-grid, .site-pip .why-grid { grid-template-columns: minmax(0, 1fr); }
.site-pip .why-grid .a { grid-row: auto; }
.site-pip .top nav a:first-child { display: none; }
.site-pip .row { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
.site-pip .pip-mascot, .site-pip .cta, .site-pip .habits label, .site-pip .box, .site-pip .row button { transition: none; }
.site-pip .pops span { animation: none; opacity: 0; }
.site-pip .habits label:hover, .site-pip .cta:hover { transform: none; }
}
.site-pip [id] { scroll-margin-top: 84px; }
```


## Helper it imports: `src/patterns/sites/_shared.ts`

```ts
import { useEffect, type RefObject } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import Lenis from 'lenis'

/* Helpers shared by the whole-site demos in this folder. They are full pages, so they scroll the window,
   and they must coexist with UI Lab's own hash router and clean up completely when you leave. */

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/**
 * Smooth scroll (Lenis, driven by GSAP's ticker so ScrollTrigger stays in sync) plus in-page anchor links.
 * Anchor clicks are handled here instead of by the browser: UI Lab's router lives in the URL hash,
 * so a real `#section` navigation would be read as a route change.
 * Everything is torn down on unmount.
 */
export function useSiteScroll(root: RefObject<HTMLElement | null>, { smooth = true, lerp = 0.1 } = {}) {
  useEffect(() => {
    const el = root.current
    if (!el) return
    let lenis: Lenis | null = null
    let tick: ((t: number) => void) | null = null
    if (smooth && !reducedMotion()) {
      lenis = new Lenis({ lerp })
      lenis.on('scroll', ScrollTrigger.update)
      tick = (t: number) => lenis!.raf(t * 1000)
      gsap.ticker.add(tick)
      gsap.ticker.lagSmoothing(0)
    }
    const onClick = (e: MouseEvent) => {
      const a = (e.target as HTMLElement).closest<HTMLAnchorElement>('a[href^="#"]')
      if (!a || !el.contains(a)) return
      const id = a.getAttribute('href')!.slice(1)
      if (id.startsWith('/')) return // a UI Lab route, let it through
      e.preventDefault()
      const target = id ? el.querySelector<HTMLElement>(`#${CSS.escape(id)}`) : null
      if (!target) return
      if (lenis) lenis.scrollTo(target)
      else target.scrollIntoView({ behavior: 'smooth' })
    }
    el.addEventListener('click', onClick)
    return () => {
      el.removeEventListener('click', onClick)
      if (tick) gsap.ticker.remove(tick)
      gsap.ticker.lagSmoothing(500, 33) // GSAP's default
      lenis?.destroy()
      ScrollTrigger.getAll().forEach((t) => t.kill())
    }
  }, [root, smooth, lerp])
}
```

# Site: THE COMMUTE REPORT (data poster)
> An annual report set as a Swiss data poster: a toggleable twelve-column grid, one earned giant statistic, charts labelled directly, three type sizes, tabular figures and a single red. A line chart draws on, bars grow, and every chart has its data as a real table.
- **Category:** Sites
- **Slug:** site-commute-report
- **Tags:** site, full page, swiss grid, data poster, report, chart, svg, tabular figures, grid overlay, read
- **Dependencies:** @fontsource-variable/hanken-grotesk, sites/_shared.ts
- **Live demo:** https://ui-lab-weld.vercel.app/#/site-commute-report
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sites/commute-report/index.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sites/commute-report/index.tsx
- **Raw files:** https://ui-lab-weld.vercel.app/raw/sites/commute-report/index.tsx, https://ui-lab-weld.vercel.app/raw/sites/commute-report/styles.css

## When to use
- Reports, data stories, institutions and products whose pitch is clarity
- Reference for direct labelling instead of legends, a data table twin for each chart, and motion limited to a counter, a drawing line and growing bars

## Accessibility

Each chart has a text description and a real data table in a disclosure; the giant number has a spoken sentence equivalent; the grid toggle is a switch; direct labels carry the series names so colour is not the only key; reveal motion is off under reduced motion.


## Source
Files: `src/patterns/sites/commute-report/index.tsx`, `src/patterns/sites/commute-report/styles.css`
```tsx
// ===== src/patterns/sites/commute-report/index.tsx =====
import { useEffect, useRef, useState } from 'react'
import '@fontsource-variable/hanken-grotesk'
import './styles.css'
import { reducedMotion, useSiteScroll } from '../_shared'

/*
 * THE COMMUTE REPORT: an annual data report set as a poster. World 7 (Swiss Grid / Data Poster).
 * Signature: the grid is visible (toggle it), one earned statistic is the page's argument, and the charts are labelled
 * directly instead of through a legend. Three type sizes, tabular figures, one red. Motion is limited to a counter, a
 * line that draws and rules that extend as sections enter; every chart also has its data as a real table.
 */

const YEARS = [2016, 2018, 2020, 2022, 2024, 2026]
const SERIES: { name: string; color: string; values: number[] }[] = [
  { name: 'Car', color: '#111', values: [64, 62, 49, 54, 52, 49] },
  { name: 'Bus and train', color: '#7a7a7a', values: [22, 22, 14, 18, 19, 20] },
  { name: 'Walking', color: '#b4b4b4', values: [9, 9, 17, 14, 14, 13] },
  { name: 'Cycling', color: '#e4002b', values: [3, 4, 9, 9, 11, 14] },
]
const DISTRICTS = [
  ['City centre', 58],
  ['Headingley', 47],
  ['Chapel Allerton', 39],
  ['Horsforth', 31],
  ['Morley', 24],
  ['Otley', 17],
] as const

const W = 640
const H = 300
const X = (i: number) => 40 + (i / (YEARS.length - 1)) * (W - 160)
const Y = (v: number) => H - 30 - (v / 70) * (H - 60)

/** Label positions, nudged apart so direct labels never overlap. */
const LABEL_Y = (() => {
  const ys = SERIES.map((s) => ({ name: s.name, y: Y(s.values[s.values.length - 1]) })).sort((a, b) => a.y - b.y)
  for (let i = 1; i < ys.length; i++) if (ys[i].y - ys[i - 1].y < 16) ys[i].y = ys[i - 1].y + 16
  return Object.fromEntries(ys.map((o) => [o.name, o.y]))
})()

function useIn<T extends Element>() {
  const ref = useRef<T>(null)
  const [on, setOn] = useState(false)
  useEffect(() => {
    if (reducedMotion()) return setOn(true)
    const io = new IntersectionObserver(([e]) => e.isIntersecting && setOn(true), { threshold: 0.25 })
    if (ref.current) io.observe(ref.current)
    return () => io.disconnect()
  }, [])
  return [ref, on] as const
}

export default function CommuteReportSite() {
  const root = useRef<HTMLDivElement>(null)
  const [grid, setGrid] = useState(false)
  const [n, setN] = useState(0)
  const [chartRef, chartOn] = useIn<SVGSVGElement>()
  const [barsRef, barsOn] = useIn<HTMLDivElement>()

  useSiteScroll(root, { smooth: false })

  useEffect(() => {
    const target = 51
    if (reducedMotion()) return setN(target)
    const t0 = performance.now()
    let raf = 0
    const tick = (t: number) => {
      const p = Math.min(1, (t - t0) / 1400)
      setN(Math.round((1 - Math.pow(1 - p, 3)) * target))
      if (p < 1) raf = requestAnimationFrame(tick)
    }
    raf = requestAnimationFrame(tick)
    return () => cancelAnimationFrame(raf)
  }, [])

  return (
    <div className="site-commute" ref={root}>
      <div className="grid-overlay" aria-hidden style={{ opacity: grid ? 1 : 0 }}>{Array.from({ length: 12 }, (_, i) => <i key={i} />)}</div>

      <header className="bar">
        <p>Leeds Transport Observatory · Annual report 2026</p>
        <button className="gridbtn" role="switch" aria-checked={grid} onClick={() => setGrid((g) => !g)}>
          Show the grid <b>{grid ? 'On' : 'Off'}</b>
        </button>
      </header>

      <main id="top">
        <section className="lead" aria-labelledby="h1">
          <h1 id="h1" className="sr-only">How Leeds travels to work, 2026</h1>
          <p className="num" aria-hidden>{n}%</p>
          <div className="lead-text">
            <p className="claim">of Leeds commuters now get to work without driving alone.</p>
            <p className="small">Up from 36% in 2016. Source: the 2026 travel-to-work survey of 11,400 residents.</p>
            <p className="sr-only">51 percent of Leeds commuters now get to work without driving alone, up from 36 percent in 2016.</p>
          </div>
        </section>

        <section className="sec" aria-labelledby="h2a">
          <p className="idx">01</p>
          <div className="body">
            <h2 id="h2a">Cycling has grown more than fourfold in ten years.</h2>
            <svg ref={chartRef} viewBox={`0 0 ${W} ${H}`} className={`chart ${chartOn ? 'in' : ''}`} role="img" aria-label="Line chart of how people travel to work in Leeds from 2016 to 2026. Car fell from 64 to 49 percent. Cycling rose from 3 to 14 percent.">
              {[0, 20, 40, 60].map((v) => (
                <g key={v}>
                  <line x1="40" x2={W - 120} y1={Y(v)} y2={Y(v)} className="gl" />
                  <text x="30" y={Y(v) + 4} textAnchor="end" className="ax">{v}%</text>
                </g>
              ))}
              {YEARS.map((y, i) => <text key={y} x={X(i)} y={H - 8} textAnchor="middle" className="ax">{y}</text>)}
              {SERIES.map((s) => (
                <g key={s.name}>
                  <polyline
                    points={s.values.map((v, i) => `${X(i)},${Y(v)}`).join(' ')}
                    fill="none"
                    stroke={s.color}
                    strokeWidth={s.name === 'Cycling' ? 3.5 : 2}
                    pathLength={1}
                    className="ln"
                  />
                  <text x={X(YEARS.length - 1) + 10} y={LABEL_Y[s.name] + 4} className="lbl" fill={s.name === 'Cycling' ? '#e4002b' : '#111'}>{s.name} {s.values[s.values.length - 1]}%</text>
                </g>
              ))}
            </svg>
            <details className="data">
              <summary>Show the data as a table</summary>
              <table>
                <caption className="sr-only">Share of commuters by mode, percent</caption>
                <thead><tr><th scope="col">Year</th>{SERIES.map((s) => <th key={s.name} scope="col" className="n">{s.name}</th>)}</tr></thead>
                <tbody>{YEARS.map((y, i) => <tr key={y}><th scope="row">{y}</th>{SERIES.map((s) => <td key={s.name} className="n">{s.values[i]}</td>)}</tr>)}</tbody>
              </table>
            </details>
          </div>
        </section>

        <section className="sec" aria-labelledby="h2b">
          <p className="idx">02</p>
          <div className="body">
            <h2 id="h2b">The centre leads. The edge still drives.</h2>
            <p className="small">Share of residents who commute without a car, by district.</p>
            <div ref={barsRef} className={`bars ${barsOn ? 'in' : ''}`}>
              {DISTRICTS.map(([name, v], i) => (
                <div className="bar-row" key={name}>
                  <span className="bn">{name}</span>
                  <span className="track"><span className="fill" style={{ width: `${v}%`, transitionDelay: `${i * 80}ms` }} /></span>
                  <span className="bv">{v}%</span>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section className="sec" aria-labelledby="h2c">
          <p className="idx">03</p>
          <div className="body">
            <h2 id="h2c">What we recommend</h2>
            <ol className="recs">
              <li><b>Finish the cycle network.</b> Three gaps account for most of the journeys that still go by car.</li>
              <li><b>Fix the bus before the road.</b> Reliability matters more to commuters than fares.</li>
              <li><b>Measure every year.</b> The trend is the evidence; a single number is not.</li>
            </ol>
          </div>
        </section>

        <section className="sec" aria-labelledby="h2d">
          <p className="idx">04</p>
          <div className="body">
            <h2 id="h2d">Method</h2>
            <p className="small meth">Responses were weighted by age, district and household size. Margin of error is plus or minus 1.2 points for the whole sample and plus or minus 4 points for any single district. Figures are fictional and for demonstration.</p>
          </div>
        </section>
      </main>
      <footer className="foot">Leeds Transport Observatory is fictional. The data are invented.</footer>
    </div>
  )
}


// ===== src/patterns/sites/commute-report/styles.css =====
.site-commute { position: relative; min-height: 100svh; overflow-x: clip; }
.site-commute {
  --paper: #ffffff;
  --ink: #111111;
  --mid: #5a5a5a;
  --red: #e4002b;
  --red-ink: #b30022;
  --rule: #111111;
  --font: 'Hanken Grotesk Variable', 'Helvetica Neue', Arial, sans-serif;
}
.site-commute * { box-sizing: border-box; margin: 0; padding: 0; }
.site-commute, .site-commute { background: var(--paper); color: var(--ink); font-family: var(--font); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
.site-commute button { font: inherit; color: inherit; cursor: pointer; }
.site-commute :focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.site-commute .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-commute .grid-overlay { position: fixed; inset: 0; z-index: 40; display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; padding: 0 clamp(16px, 4vw, 48px); pointer-events: none; opacity: 0; transition: opacity 0.3s ease; }
.site-commute .grid-overlay i { background: rgba(228, 0, 43, 0.09); border-left: 1px solid rgba(228, 0, 43, 0.4); border-right: 1px solid rgba(228, 0, 43, 0.4); }
.site-commute .bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px clamp(16px, 4vw, 48px); border-bottom: 3px solid var(--rule); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; }
.site-commute .gridbtn { min-height: 44px; padding: 0 14px; background: transparent; border: 2px solid var(--ink); font-size: 14px; font-weight: 600; }
.site-commute .gridbtn b { margin-left: 6px; color: var(--red-ink); }
.site-commute .gridbtn[aria-checked='true'] { background: var(--ink); color: #fff; }
.site-commute .gridbtn[aria-checked='true'] b { color: #fff; }
.site-commute .lead { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; padding: clamp(32px, 6vw, 88px) clamp(16px, 4vw, 48px) clamp(32px, 5vw, 64px); align-items: end; border-bottom: 3px solid var(--rule); }
.site-commute .num { grid-column: 1 / span 8; font-size: clamp(120px, 26vw, 360px); line-height: 0.82; font-weight: 800; letter-spacing: -0.05em; color: var(--red); }
.site-commute .lead-text { grid-column: 9 / span 4; padding-bottom: 12px; }
.site-commute .claim { font-size: 24px; line-height: 1.2; font-weight: 700; }
.site-commute .small { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--mid); max-width: 52ch; }
.site-commute .sec { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; padding: clamp(28px, 4vw, 56px) clamp(16px, 4vw, 48px); border-top: 3px solid var(--rule); }
.site-commute .sec:first-of-type { border-top: 0; }
.site-commute .idx { grid-column: 1 / span 1; font-size: 14px; font-weight: 700; color: var(--red-ink); }
.site-commute .body { grid-column: 2 / span 9; }
.site-commute .body h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; max-width: 20ch; }
.site-commute .chart { margin-top: 24px; width: 100%; height: auto; max-width: 760px; display: block; }
.site-commute .gl { stroke: #d6d6d6; stroke-width: 1; }
.site-commute .ax { font-size: 12px; fill: var(--mid); }
.site-commute .lbl { font-size: 13px; font-weight: 700; }
.site-commute .ln { stroke-dasharray: 1; stroke-dashoffset: 1; }
.site-commute .chart.in .ln { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.site-commute .data { margin-top: 16px; }
.site-commute .data summary { display: inline-grid; min-height: 44px; align-items: center; cursor: pointer; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.site-commute .data table { margin-top: 8px; border-collapse: collapse; font-size: 14px; }
.site-commute .data th, .site-commute .data td { padding: 8px 14px 8px 0; text-align: left; border-bottom: 1px solid #ddd; font-weight: 500; }
.site-commute .data .n { text-align: right; }
.site-commute .data thead th { color: var(--mid); font-weight: 600; }
.site-commute .bars { margin-top: 20px; display: grid; gap: 10px; max-width: 760px; }
.site-commute .bar-row { display: grid; grid-template-columns: 11rem 1fr 3.5rem; gap: 12px; align-items: center; font-size: 16px; }
.site-commute .bn { font-weight: 600; }
.site-commute .track { display: block; height: 20px; background: #eee; }
.site-commute .fill { display: block; height: 100%; background: var(--ink); width: 0; }
.site-commute .bars.in .fill { transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.site-commute .bv { text-align: right; font-weight: 700; }
.site-commute .bars:not(.in) .fill { transform: scaleX(0); }
.site-commute .bars .fill { transform-origin: left; }
.site-commute .bars.in .fill { transform: scaleX(1); }
.site-commute .bar-row:first-child .fill { background: var(--red); }
.site-commute .recs { margin-top: 20px; max-width: 62ch; padding-left: 0; list-style: none; counter-reset: r; display: grid; gap: 0; }
.site-commute .recs li { counter-increment: r; padding: 16px 0 16px 48px; position: relative; border-top: 1px solid var(--ink); font-size: 20px; line-height: 1.35; }
.site-commute .recs li::before { content: counter(r); position: absolute; left: 0; top: 16px; font-weight: 800; color: var(--red-ink); }
.site-commute .meth { font-size: 16px; }
.site-commute .foot { padding: 28px clamp(16px, 4vw, 48px) 48px; border-top: 3px solid var(--rule); font-size: 14px; color: var(--mid); }
@media (max-width: 860px) {
.site-commute .num { grid-column: 1 / -1; }
.site-commute .lead-text { grid-column: 1 / -1; }
.site-commute .idx { grid-column: 1 / -1; }
.site-commute .body { grid-column: 1 / -1; }
.site-commute .bar-row { grid-template-columns: 7.5rem 1fr 3rem; font-size: 14px; }
.site-commute .grid-overlay { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
.site-commute .grid-overlay, .site-commute .chart.in .ln, .site-commute .bars.in .fill { transition: none; }
}
```


## Helper it imports: `src/patterns/sites/_shared.ts`

```ts
import { useEffect, type RefObject } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import Lenis from 'lenis'

/* Helpers shared by the whole-site demos in this folder. They are full pages, so they scroll the window,
   and they must coexist with UI Lab's own hash router and clean up completely when you leave. */

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/**
 * Smooth scroll (Lenis, driven by GSAP's ticker so ScrollTrigger stays in sync) plus in-page anchor links.
 * Anchor clicks are handled here instead of by the browser: UI Lab's router lives in the URL hash,
 * so a real `#section` navigation would be read as a route change.
 * Everything is torn down on unmount.
 */
export function useSiteScroll(root: RefObject<HTMLElement | null>, { smooth = true, lerp = 0.1 } = {}) {
  useEffect(() => {
    const el = root.current
    if (!el) return
    let lenis: Lenis | null = null
    let tick: ((t: number) => void) | null = null
    if (smooth && !reducedMotion()) {
      lenis = new Lenis({ lerp })
      lenis.on('scroll', ScrollTrigger.update)
      tick = (t: number) => lenis!.raf(t * 1000)
      gsap.ticker.add(tick)
      gsap.ticker.lagSmoothing(0)
    }
    const onClick = (e: MouseEvent) => {
      const a = (e.target as HTMLElement).closest<HTMLAnchorElement>('a[href^="#"]')
      if (!a || !el.contains(a)) return
      const id = a.getAttribute('href')!.slice(1)
      if (id.startsWith('/')) return // a UI Lab route, let it through
      e.preventDefault()
      const target = id ? el.querySelector<HTMLElement>(`#${CSS.escape(id)}`) : null
      if (!target) return
      if (lenis) lenis.scrollTo(target)
      else target.scrollIntoView({ behavior: 'smooth' })
    }
    el.addEventListener('click', onClick)
    return () => {
      el.removeEventListener('click', onClick)
      if (tick) gsap.ticker.remove(tick)
      gsap.ticker.lagSmoothing(500, 33) // GSAP's default
      lenis?.destroy()
      ScrollTrigger.getAll().forEach((t) => t.kill())
    }
  }, [root, smooth, lerp])
}
```

# Site: CRUMB & CO. (neighbourhood bakery)
> A local bakery in the Warm Organic world: hand-drawn bakes in arch frames on grainy oat paper, a stamp, and a line that draws under the headline. It also works: bakes show ready, sold out or not yet baked at a chosen hour, the order form totals live, and open-now comes from the real hours.
- **Category:** Sites
- **Slug:** site-crumb
- **Tags:** site, full page, warm organic, bakery, local business, grain, arch, hand-drawn, order form, food
- **Dependencies:** @fontsource-variable/fraunces, @fontsource-variable/hanken-grotesk, sites/_shared.ts
- **Live demo:** https://ui-lab-weld.vercel.app/#/site-crumb
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sites/crumb/index.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sites/crumb/index.tsx
- **Raw files:** https://ui-lab-weld.vercel.app/raw/sites/crumb/index.tsx, https://ui-lab-weld.vercel.app/raw/sites/crumb/bakes.tsx, https://ui-lab-weld.vercel.app/raw/sites/crumb/styles.css

## When to use
- Food, wellness, craft, sustainability and any local business
- Reference for SVG noise grain, arch cropping with border-radius, a drawn underline via pathLength, and a small order form with live totals and honest availability

## Accessibility

Each drawing has a text description; availability is stated in words and symbols; quantity steppers are labelled buttons with a live total; the order form has labels, aria-invalid and an alert; hours are a real table; the floating arch and the drawn underline are static under reduced motion.


## Source
Files: `src/patterns/sites/crumb/index.tsx`, `src/patterns/sites/crumb/bakes.tsx`, `src/patterns/sites/crumb/styles.css`
```tsx
// ===== src/patterns/sites/crumb/index.tsx =====
import { useMemo, useRef, useState } from 'react'
import '@fontsource-variable/fraunces/full.css'
import '@fontsource-variable/hanken-grotesk'
import './styles.css'
import { useSiteScroll } from '../_shared'
import { BAKES } from './bakes'

/*
 * CRUMB & CO: a neighbourhood bakery. World 8 (Warm Organic).
 * Signature: made by hand, and useful. Arch-cropped hand-drawn bakes on grainy oat paper, a stamp, and a line that
 * draws itself under the headline. Beneath the charm it works: each bake shows whether it is ready, sold out or not yet
 * baked at the time you choose, the order form totals live, and "open now" is computed from the real hours.
 */

const HOURS: [string, number, number][] = [
  ['Tuesday to Friday', 7, 16],
  ['Saturday', 7, 15],
  ['Sunday', 8, 13],
]
const money = (n: number) => `£${n.toFixed(2)}`
const hh = (h: number) => `${String(h).padStart(2, '0')}:00`

export default function CrumbSite() {
  const root = useRef<HTMLDivElement>(null)
  const [hour, setHour] = useState(new Date().getHours() >= 7 && new Date().getHours() <= 16 ? new Date().getHours() : 9)
  const [qty, setQty] = useState<Record<string, number>>({})
  const [name, setName] = useState('')
  const [slot, setSlot] = useState('')
  const [state, setState] = useState<'idle' | 'bad' | 'ok'>('idle')

  useSiteScroll(root, { smooth: false })

  const status = (b: (typeof BAKES)[number]) => (hour < b.ready ? 'Out of the oven at ' + hh(b.ready) : hour >= b.out ? 'Sold out for today' : 'Ready now')
  const avail = (b: (typeof BAKES)[number]) => hour >= b.ready && hour < b.out
  const total = useMemo(() => BAKES.reduce((n, b) => n + (qty[b.id] ?? 0) * b.price, 0), [qty])
  const count = Object.values(qty).reduce((a, b) => a + b, 0)
  const open = hour >= 7 && hour < 16

  return (
    <div className="site-crumb" ref={root}>
      <header className="top">
        <a href="#top" className="logo">Crumb <span>&amp;</span> Co.</a>
        <nav aria-label="Sections">
          <a href="#bakes">Today&rsquo;s bakes</a>
          <a href="#order">Order ahead</a>
          <a href="#find">Find us</a>
        </nav>
      </header>

      <main id="top">
        <section className="hero" aria-labelledby="h1">
          <div className="copy">
            <p className="stamp" aria-hidden><span>Baked</span><b>5 am</b></p>
            <h1 id="h1">
              Baked at five.
              <br />
              <span className="gone">Gone by noon.</span>
              <svg className="uline" viewBox="0 0 320 22" aria-hidden><path d="M4 14 C60 4 110 22 170 10 C220 2 270 18 316 8" pathLength={1} /></svg>
            </h1>
            <p className="lede">A small bakery on Spring Lane. Long-fermented bread, a handful of buns, and not much else. When it is gone, it is gone.</p>
            <a href="#order" className="cta">Order ahead</a>
          </div>
          <div className="arch" aria-hidden>
            <div className="arch-in">{BAKES[0].draw()}</div>
          </div>
        </section>

        <section className="bakes" id="bakes" aria-labelledby="h2b">
          <div className="head">
            <h2 id="h2b">Today&rsquo;s bakes</h2>
            <label className="clock" htmlFor="hr">
              Showing
              <select id="hr" value={hour} onChange={(e) => setHour(Number(e.target.value))}>
                {Array.from({ length: 10 }, (_, i) => 7 + i).map((h) => <option key={h} value={h}>{hh(h)}</option>)}
              </select>
            </label>
          </div>
          <ul className="list">
            {BAKES.map((b) => (
              <li key={b.id} className={avail(b) ? '' : 'off'}>
                <div className="pic" aria-hidden>{b.draw()}</div>
                <div className="info">
                  <h3>{b.name} <span>{money(b.price)}</span></h3>
                  <p>{b.note}</p>
                  <p className={`st ${avail(b) ? 'ok' : ''}`}>{avail(b) ? '● ' : '○ '}{status(b)}</p>
                </div>
              </li>
            ))}
          </ul>
        </section>

        <section className="order" id="order" aria-labelledby="h2o">
          <h2 id="h2o">Order ahead</h2>
          <p className="sub">Reserve a box and collect it at the counter. Pay when you pick up.</p>
          <form
            noValidate
            onSubmit={(e) => {
              e.preventDefault()
              setState(name.trim().length > 1 && slot && count > 0 ? 'ok' : 'bad')
            }}
          >
            <fieldset>
              <legend>What would you like?</legend>
              {BAKES.map((b) => (
                <div className="line" key={b.id}>
                  <span>{b.name}</span>
                  <span className="step">
                    <button type="button" aria-label={`One fewer ${b.name}`} onClick={() => setQty({ ...qty, [b.id]: Math.max(0, (qty[b.id] ?? 0) - 1) })}>−</button>
                    <output aria-label={`${b.name} quantity`}>{qty[b.id] ?? 0}</output>
                    <button type="button" aria-label={`One more ${b.name}`} onClick={() => setQty({ ...qty, [b.id]: (qty[b.id] ?? 0) + 1 })}>+</button>
                  </span>
                </div>
              ))}
            </fieldset>
            <label htmlFor="nm">Name for the bag</label>
            <input id="nm" value={name} onChange={(e) => { setName(e.target.value); setState('idle') }} autoComplete="given-name" aria-invalid={state === 'bad' && name.trim().length < 2} aria-describedby="om" />
            <label htmlFor="sl">Collection time</label>
            <select id="sl" value={slot} onChange={(e) => { setSlot(e.target.value); setState('idle') }} aria-invalid={state === 'bad' && !slot} aria-describedby="om">
              <option value="">Choose a time</option>
              {['08:00', '09:00', '10:00', '11:00', '12:00'].map((t) => <option key={t}>{t}</option>)}
            </select>
            <p className="tot" role="status">{count} item{count === 1 ? '' : 's'} · <b>{money(total)}</b></p>
            <button className="send">Reserve my box</button>
            <p id="om" role={state === 'bad' ? 'alert' : 'status'}>{state === 'bad' ? 'Please add something to the box, your name and a collection time.' : state === 'ok' ? `Thank you, ${name.trim()}. Your box will be ready at ${slot}.` : ' '}</p>
          </form>
        </section>

        <section className="find" id="find" aria-labelledby="h2f">
          <h2 id="h2f">Find us</h2>
          <p className={`now ${open ? 'on' : ''}`}>{open ? '● Open now until 16:00' : '○ Closed at this time'} <small>(for {hh(hour)} in the selector above)</small></p>
          <table>
            <caption className="sr-only">Opening hours</caption>
            <tbody>{HOURS.map(([d, a, b]) => <tr key={d}><th scope="row">{d}</th><td>{hh(a)} to {hh(b)}</td></tr>)}<tr><th scope="row">Monday</th><td>Closed</td></tr></tbody>
          </table>
          <p className="addr">12 Spring Lane, Leeds LS6 1AB. Step-free entrance, one low counter, and a bench outside.</p>
        </section>
      </main>
      <footer className="foot">Crumb &amp; Co. is a fictional bakery. The drawings are ours; the bread is imaginary.</footer>
    </div>
  )
}


// ===== src/patterns/sites/crumb/bakes.tsx =====
import type { ReactElement } from 'react'

/* Hand-drawn bakes as SVG: simple shapes with a wobble, so they read as drawn rather than rendered. */

export type Bake = { id: string; name: string; price: number; note: string; ready: number; out: number; draw: () => ReactElement }

const ink = '#3a2a20'
const wob = { strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const }

export const BAKES: Bake[] = [
  {
    id: 'sour', name: 'Sourdough loaf', price: 4.8, note: 'Long-fermented, crisp crust, open crumb.', ready: 7, out: 13,
    draw: () => (
      <svg viewBox="0 0 160 110" role="img" aria-label="Drawing of a round sourdough loaf with slashes">
        <path d="M18 70 C14 34 54 14 82 14 C116 14 148 34 142 70 C140 90 118 98 80 98 C44 98 20 90 18 70 Z" fill="#d9a066" stroke={ink} strokeWidth="3" {...wob} />
        <path d="M52 40 C60 52 64 58 66 70 M80 34 C88 48 92 58 92 72 M108 40 C112 52 114 60 112 70" fill="none" stroke="#f3dcb8" strokeWidth="5" {...wob} />
        <path d="M30 80 C60 92 108 92 132 80" fill="none" stroke={ink} strokeWidth="2" opacity="0.4" {...wob} />
      </svg>
    ),
  },
  {
    id: 'cardamom', name: 'Cardamom bun', price: 3.2, note: 'Twisted, sugared, a little too good.', ready: 7, out: 11,
    draw: () => (
      <svg viewBox="0 0 160 110" role="img" aria-label="Drawing of a twisted cardamom bun">
        <path d="M80 12 C118 12 140 36 136 62 C132 88 106 100 80 100 C54 100 28 88 24 62 C20 36 42 12 80 12 Z" fill="#cf8a4f" stroke={ink} strokeWidth="3" {...wob} />
        <path d="M80 28 C104 28 118 44 112 60 C106 76 82 74 76 62 C70 50 86 46 92 56" fill="none" stroke="#f3dcb8" strokeWidth="6" {...wob} />
        {[[50, 40], [114, 36], [124, 72], [44, 76], [82, 90]].map(([x, y]) => <circle key={x + y} cx={x} cy={y} r="2.6" fill="#fff6e6" />)}
      </svg>
    ),
  },
  {
    id: 'rye', name: 'Seeded rye', price: 5.2, note: 'Dense, sweet, full of seeds.', ready: 8, out: 14,
    draw: () => (
      <svg viewBox="0 0 160 110" role="img" aria-label="Drawing of a rectangular seeded rye loaf">
        <path d="M22 44 C22 24 44 18 80 18 C116 18 138 24 138 44 L136 84 C136 94 118 98 80 98 C42 98 24 94 24 84 Z" fill="#a8704a" stroke={ink} strokeWidth="3" {...wob} />
        {Array.from({ length: 16 }, (_, i) => <ellipse key={i} cx={36 + (i % 8) * 12.5} cy={36 + Math.floor(i / 8) * 22 + (i % 3) * 3} rx="2.6" ry="1.6" fill="#f3dcb8" transform={`rotate(${i * 23} ${36 + (i % 8) * 12.5} ${36 + Math.floor(i / 8) * 22})`} />)}
      </svg>
    ),
  },
  {
    id: 'focaccia', name: 'Rosemary focaccia', price: 4.4, note: 'Olive oil, sea salt, dimples you can feel.', ready: 9, out: 15,
    draw: () => (
      <svg viewBox="0 0 160 110" role="img" aria-label="Drawing of a flat focaccia with dimples and rosemary">
        <rect x="14" y="22" width="132" height="70" rx="14" fill="#e3b872" stroke={ink} strokeWidth="3" {...wob} />
        {Array.from({ length: 18 }, (_, i) => <ellipse key={i} cx={32 + (i % 6) * 19} cy={40 + Math.floor(i / 6) * 20} rx="5" ry="3.4" fill="#c8924a" opacity="0.8" />)}
        <path d="M40 34 l14 -8 M98 70 l16 -6 M60 76 l10 -10" stroke="#4d6b3a" strokeWidth="3" {...wob} />
      </svg>
    ),
  },
]


// ===== src/patterns/sites/crumb/styles.css =====
.site-crumb { position: relative; min-height: 100svh; overflow-x: clip; }
.site-crumb {
  --oat: #f2e8d5;
  --oat-2: #eadcc2;
  --brown: #3a2a20;
  --muted: #6a5646;
  --clay: #a8472b;
  --sage: #8a9a78;
  --sage-ink: #3f5232;
  --serif: 'Fraunces Variable', Georgia, serif;
  --sans: 'Hanken Grotesk Variable', system-ui, sans-serif;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.23  0 0 0 0 0.16  0 0 0 0 0.12  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
}
.site-crumb * { box-sizing: border-box; margin: 0; padding: 0; }
.site-crumb, .site-crumb { background: var(--oat); color: var(--brown); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
.site-crumb a { color: inherit; }
.site-crumb button, .site-crumb input, .site-crumb select { font: inherit; color: inherit; }
.site-crumb button { cursor: pointer; }
.site-crumb :focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }
.site-crumb .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-crumb h1, .site-crumb h2, .site-crumb h3 { font-family: var(--serif); font-variation-settings: 'SOFT' 100, 'WONK' 1; font-weight: 600; letter-spacing: -0.015em; }
.site-crumb .top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px clamp(16px, 4vw, 56px); position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--oat) 94%, transparent); }
.site-crumb .logo { font-family: var(--serif); font-size: 26px; font-weight: 600; font-style: italic; text-decoration: none; font-variation-settings: 'SOFT' 100, 'WONK' 1; }
.site-crumb .logo span { color: var(--clay); }
.site-crumb .top nav { display: flex; gap: 4px; font-weight: 600; font-size: 16px; }
.site-crumb .top nav a { display: grid; place-items: center; min-height: 44px; padding: 0 14px; text-decoration: none; border-radius: 999px; }
.site-crumb .top nav a:hover { background: var(--oat-2); }
.site-crumb .hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(24px, 5vw, 72px) clamp(16px, 4vw, 56px); position: relative; }
.site-crumb .hero::before { content: ''; position: absolute; inset: 0; background: var(--grain); opacity: 0.35; pointer-events: none; mix-blend-mode: multiply; }
.site-crumb .copy { position: relative; }
.site-crumb .stamp { position: absolute; top: -52px; right: 0; width: 92px; height: 92px; display: grid; place-content: center; text-align: center; border: 3px dashed var(--clay); border-radius: 50%; color: var(--clay); transform: rotate(12deg); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.site-crumb .stamp b { font-family: var(--serif); font-size: 26px; letter-spacing: 0; text-transform: none; }
.site-crumb .hero h1 { position: relative; font-size: clamp(48px, 8vw, 104px); line-height: 0.98; }
.site-crumb .gone { color: var(--clay); font-style: italic; }
.site-crumb .uline { position: absolute; left: 0; bottom: -22px; width: min(78%, 420px); height: auto; overflow: visible; }
.site-crumb .uline path { fill: none; stroke: var(--clay); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.site-crumb .lede { margin-top: 48px; max-width: 38ch; font-size: 21px; line-height: 1.5; color: #4d3b2e; }
.site-crumb .cta { display: inline-grid; place-items: center; min-height: 54px; margin-top: 26px; padding: 0 30px; background: var(--clay); color: #fff8ee; font-weight: 700; font-size: 17px; text-decoration: none; border-radius: 999px; }
.site-crumb .cta:hover { background: var(--brown); }
.site-crumb .arch { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 24px 24px; background: var(--sage); display: grid; place-items: end center; overflow: hidden; border: 3px solid var(--brown); }
.site-crumb .arch-in { width: 86%; padding-bottom: 8%; }
.site-crumb .arch-in svg { width: 100%; height: auto; display: block; }
.site-crumb .bakes, .site-crumb .order, .site-crumb .find { padding: clamp(36px, 6vw, 88px) clamp(16px, 4vw, 56px); }
.site-crumb .bakes { background: var(--oat-2); border-radius: 48px 48px 0 0; }
.site-crumb .head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-crumb .bakes h2, .site-crumb .order h2, .site-crumb .find h2 { font-size: clamp(34px, 5vw, 60px); line-height: 1; }
.site-crumb .clock { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; }
.site-crumb .clock select { min-height: 44px; padding: 0 12px; border: 2px solid var(--brown); border-radius: 12px; background: var(--oat); }
.site-crumb .list { margin-top: 26px; list-style: none; display: grid; gap: 14px; max-width: 900px; }
.site-crumb .list li { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; padding: 14px 20px 14px 14px; background: var(--oat); border: 2px solid var(--brown); border-radius: 28px 28px 28px 8px; }
.site-crumb .list li.off { opacity: 0.72; }
.site-crumb .pic svg { width: 100%; height: auto; display: block; }
.site-crumb .info h3 { font-size: 26px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.site-crumb .info h3 span { font-family: var(--sans); font-size: 18px; font-weight: 700; color: var(--clay); font-variation-settings: normal; }
.site-crumb .info p { margin-top: 4px; font-size: 17px; line-height: 1.45; color: #4d3b2e; }
.site-crumb .info .st { margin-top: 8px; font-weight: 700; font-size: 15px; color: var(--muted); }
.site-crumb .info .st.ok { color: var(--sage-ink); }
.site-crumb .sub { margin-top: 10px; max-width: 46ch; font-size: 19px; line-height: 1.5; color: #4d3b2e; }
.site-crumb .order form { margin-top: 24px; display: grid; gap: 8px; max-width: 520px; }
.site-crumb .order fieldset { border: 2px solid var(--brown); border-radius: 24px; padding: 8px 18px 12px; }
.site-crumb .order legend { padding: 0 8px; font-weight: 700; }
.site-crumb .line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; font-size: 17px; }
.site-crumb .step { display: flex; align-items: center; gap: 6px; }
.site-crumb .step button { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--brown); background: var(--oat); font-size: 20px; font-weight: 700; }
.site-crumb .step button:hover { background: var(--brown); color: var(--oat); }
.site-crumb .step output { min-width: 2ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.site-crumb .order label { margin-top: 8px; font-weight: 700; font-size: 15px; }
.site-crumb .order input, .site-crumb .order select { min-height: 50px; padding: 0 14px; border: 2px solid var(--brown); border-radius: 14px; background: #fffaf0; font-size: 17px; }
.site-crumb .order [aria-invalid='true'] { border-color: var(--clay); border-width: 3px; }
.site-crumb .tot { margin-top: 10px; font-size: 19px; }
.site-crumb .send { margin-top: 6px; min-height: 56px; border: 0; border-radius: 999px; background: var(--brown); color: var(--oat); font-weight: 700; font-size: 17px; }
.site-crumb .send:hover { background: var(--clay); }
.site-crumb .order #om { min-height: 1.6em; margin-top: 6px; font-size: 16px; font-weight: 600; }
.site-crumb .find { background: var(--sage); color: #1c2616; border-radius: 48px 48px 0 0; }
.site-crumb .now { margin-top: 14px; font-weight: 700; font-size: 20px; }
.site-crumb .now small { font-weight: 500; font-size: 14px; }
.site-crumb .find table { margin-top: 14px; border-collapse: collapse; font-size: 19px; }
.site-crumb .find th, .site-crumb .find td { padding: 8px 28px 8px 0; text-align: left; border-bottom: 1px dashed #1c2616; font-weight: 500; }
.site-crumb .find th { font-weight: 700; }
.site-crumb .addr { margin-top: 18px; max-width: 46ch; font-size: 19px; line-height: 1.5; }
.site-crumb .foot { padding: 26px clamp(16px, 4vw, 56px) 44px; background: var(--sage); color: #1c2616; font-size: 14px; }
@media (prefers-reduced-motion: no-preference) {
.site-crumb .uline path { animation: crumb-crumb-draw 1.4s 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.site-crumb .arch-in { animation: crumb-crumb-float 7s ease-in-out infinite; }
}
@keyframes crumb-crumb-draw { to { stroke-dashoffset: 0; } }
@keyframes crumb-crumb-float { 50% { transform: translateY(-8px) rotate(-1deg); } }
@media (prefers-reduced-motion: reduce) {
.site-crumb .uline path { stroke-dashoffset: 0; }
}
@media (max-width: 860px) {
.site-crumb .hero { grid-template-columns: minmax(0, 1fr); }
.site-crumb .arch { max-width: 360px; }
.site-crumb .stamp { top: -22px; right: 0; width: 76px; height: 76px; }
.site-crumb .list li { grid-template-columns: 96px 1fr; }
.site-crumb .top nav a:first-child { display: none; }
}@media (max-width: 860px) {
.site-crumb .stamp { position: relative; top: 0; right: 0; margin: 0 0 14px; width: 72px; height: 72px; }
.site-crumb .top nav a { white-space: nowrap; font-size: 14px; padding: 0 10px; }
.site-crumb .logo { font-size: 22px; white-space: nowrap; }
.site-crumb [id] { scroll-margin-top: 70px; }
}
```


## Helper it imports: `src/patterns/sites/_shared.ts`

```ts
import { useEffect, type RefObject } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import Lenis from 'lenis'

/* Helpers shared by the whole-site demos in this folder. They are full pages, so they scroll the window,
   and they must coexist with UI Lab's own hash router and clean up completely when you leave. */

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/**
 * Smooth scroll (Lenis, driven by GSAP's ticker so ScrollTrigger stays in sync) plus in-page anchor links.
 * Anchor clicks are handled here instead of by the browser: UI Lab's router lives in the URL hash,
 * so a real `#section` navigation would be read as a route change.
 * Everything is torn down on unmount.
 */
export function useSiteScroll(root: RefObject<HTMLElement | null>, { smooth = true, lerp = 0.1 } = {}) {
  useEffect(() => {
    const el = root.current
    if (!el) return
    let lenis: Lenis | null = null
    let tick: ((t: number) => void) | null = null
    if (smooth && !reducedMotion()) {
      lenis = new Lenis({ lerp })
      lenis.on('scroll', ScrollTrigger.update)
      tick = (t: number) => lenis!.raf(t * 1000)
      gsap.ticker.add(tick)
      gsap.ticker.lagSmoothing(0)
    }
    const onClick = (e: MouseEvent) => {
      const a = (e.target as HTMLElement).closest<HTMLAnchorElement>('a[href^="#"]')
      if (!a || !el.contains(a)) return
      const id = a.getAttribute('href')!.slice(1)
      if (id.startsWith('/')) return // a UI Lab route, let it through
      e.preventDefault()
      const target = id ? el.querySelector<HTMLElement>(`#${CSS.escape(id)}`) : null
      if (!target) return
      if (lenis) lenis.scrollTo(target)
      else target.scrollIntoView({ behavior: 'smooth' })
    }
    el.addEventListener('click', onClick)
    return () => {
      el.removeEventListener('click', onClick)
      if (tick) gsap.ticker.remove(tick)
      gsap.ticker.lagSmoothing(500, 33) // GSAP's default
      lenis?.destroy()
      ScrollTrigger.getAll().forEach((t) => t.kill())
    }
  }, [root, smooth, lerp])
}
```

# Site: FENWICK & ODE (blueprint engineering)
> A structural engineering practice set as a drawing sheet: title block, grid paper, dimension lines, a truss that draws itself, and a working quick beam check whose diagram bends as you change span, load and material. Sums are the textbook ones, labelled indicative.
- **Category:** Sites
- **Slug:** site-blueprint
- **Tags:** site, full page, niche world, blueprint, engineering, drawing, svg, calculator, grid paper, operate
- **Dependencies:** @fontsource/barlow-condensed, @fontsource/ibm-plex-mono, sites/_shared.ts
- **Live demo:** https://ui-lab-weld.vercel.app/#/site-blueprint
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sites/blueprint/index.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sites/blueprint/index.tsx
- **Raw files:** https://ui-lab-weld.vercel.app/raw/sites/blueprint/index.tsx, https://ui-lab-weld.vercel.app/raw/sites/blueprint/styles.css

## When to use
- Engineering, architecture, construction, surveying and any trade whose product is a drawing or a calculation
- Reference for SVG line-drawing on load, an interactive diagram driven by real formulas, and a dark paper palette that keeps text above 4.5:1

## Accessibility

Both drawings have text descriptions and the beam diagram description updates with the inputs; results are in a status region with units written out; sliders are native ranges with spoken values; the form has labels, aria-invalid and an alert; the line drawing is skipped under reduced motion.


## Source
Files: `src/patterns/sites/blueprint/index.tsx`, `src/patterns/sites/blueprint/styles.css`
```tsx
// ===== src/patterns/sites/blueprint/index.tsx =====
import { useEffect, useMemo, useRef, useState } from 'react'
import '@fontsource/barlow-condensed/500.css'
import '@fontsource/barlow-condensed/700.css'
import '@fontsource/ibm-plex-mono/400.css'
import '@fontsource/ibm-plex-mono/500.css'
import './styles.css'
import { reducedMotion, useSiteScroll } from '../_shared'

/*
 * FENWICK & ODE: a structural engineering practice, set as a drawing sheet. World 22 (Blueprint).
 * Signature: the page is an instrument. A title block, dimension lines and a grid behind everything; a truss that draws
 * itself on arrival; and a working "quick beam check" whose diagram bends as you change the span, load and material.
 * The sums are the textbook ones for a simply supported beam and are labelled indicative.
 */

const MATERIALS = [
  { id: 'timber', name: 'Timber', ratio: 15, e: 11, note: 'span / 15' },
  { id: 'steel', name: 'Steel', ratio: 20, e: 210, note: 'span / 20' },
  { id: 'concrete', name: 'Concrete', ratio: 18, e: 30, note: 'span / 18' },
] as const

const SHEETS = [
  ['S-101', 'Foundations and ground', 'Piles, rafts and retaining walls'],
  ['S-201', 'Frames', 'Steel, timber and concrete structures'],
  ['S-301', 'Refurbishment', 'Surveys, openings and strengthening'],
  ['S-401', 'Temporary works', 'Propping, scaffold and crane bases'],
] as const

const JOBS = [
  ['2025', 'Millbank Warehouse conversion', 'Leeds', 'Six storeys, retained cast-iron columns'],
  ['2024', 'Harrow Sound footbridge', 'Kent', '42 m span, weathering steel'],
  ['2023', 'St Anne’s school hall', 'York', 'Glulam portal frames'],
  ['2022', 'Quayside housing, block C', 'Hull', 'Precast concrete, 112 flats'],
] as const

export default function BlueprintSite() {
  const root = useRef<HTMLDivElement>(null)
  const [span, setSpan] = useState(6)
  const [load, setLoad] = useState(8)
  const [mat, setMat] = useState<(typeof MATERIALS)[number]['id']>('steel')
  const [name, setName] = useState('')
  const [msg, setMsg] = useState('')
  const [state, setState] = useState<'idle' | 'bad' | 'ok'>('idle')
  const paths = useRef<(SVGPathElement | null)[]>([])

  useSiteScroll(root, { smooth: false })

  useEffect(() => {
    const ps = paths.current.filter(Boolean) as SVGPathElement[]
    if (reducedMotion()) return
    ps.forEach((p, i) => {
      const len = p.getTotalLength()
      p.style.transition = 'none'
      p.style.strokeDasharray = String(len)
      p.style.strokeDashoffset = String(len)
      requestAnimationFrame(() => requestAnimationFrame(() => {
        p.style.transition = `stroke-dashoffset 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) ${i * 90}ms`
        p.style.strokeDashoffset = '0'
      }))
    })
  }, [])

  const m = MATERIALS.find((x) => x.id === mat)!
  const calc = useMemo(() => {
    const moment = (load * span * span) / 8 // kN.m
    const depth = Math.ceil((span * 1000) / m.ratio / 10) * 10 // mm
    // Indicative mid-span deflection for a rectangular section of that depth and 1/3 width, w L^4 5 / (384 E I)
    const b = depth / 3
    const I = (b * depth ** 3) / 12 // mm^4
    const E = m.e * 1000 // N/mm2
    const delta = (5 * load * (span * 1000) ** 4) / (384 * E * I) // mm (1 kN/m = 1 N/mm)
    return { moment, depth, delta }
  }, [span, load, m])

  const bend = Math.min(26, Math.max(2, calc.delta * 0.9))
  const beamD = `M60 130 Q 270 ${130 + bend} 480 130`

  return (
    <div className="site-blueprint" ref={root}>
      <div className="frame" aria-hidden />
      <header className="tb">
        <a href="#top" className="firm">FENWICK <span>&amp;</span> ODE</a>
        <dl>
          <div><dt>Drawing</dt><dd>S-000</dd></div>
          <div><dt>Scale</dt><dd>1:50</dd></div>
          <div><dt>Rev</dt><dd>C</dd></div>
        </dl>
        <nav aria-label="Sections">
          <a href="#check">Beam check</a>
          <a href="#sheets">Services</a>
          <a href="#rfi">Contact</a>
        </nav>
      </header>

      <main id="top">
        <section className="hero" aria-labelledby="h1">
          <div className="copy">
            <p className="note">Structural engineers, Leeds. Est. 1998.</p>
            <h1 id="h1">We design the parts of buildings you never see.</h1>
            <p className="lede">Frames, foundations and fixes for projects that have to stand up and stay standing. Small team, plain answers, drawings you can read.</p>
            <a className="cta" href="#check">Try the beam check</a>
          </div>
          <figure className="sheet">
            <svg viewBox="0 0 520 260" role="img" aria-label="Elevation drawing of a steel truss bridge with dimension lines">
              <g fill="none" stroke="#e9f4ff" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                <path ref={(n) => { paths.current[0] = n }} d="M30 190 H490" />
                <path ref={(n) => { paths.current[1] = n }} d="M30 190 L90 110 H430 L490 190" />
                <path ref={(n) => { paths.current[2] = n }} d="M90 110 L150 190 L210 110 L270 190 L330 110 L390 190 L430 110" />
                <path ref={(n) => { paths.current[3] = n }} d="M150 190 V110 M270 190 V110 M390 190 V110" opacity="0.6" />
              </g>
              <g stroke="#7fd4ff" strokeWidth="1" fill="none">
                <path d="M30 222 H490 M30 214 V230 M490 214 V230" />
                <path d="M520 110 V190 M512 110 H528 M512 190 H528" />
              </g>
              <text x="260" y="244" textAnchor="middle" className="dim">46 000</text>
              <text x="506" y="154" className="dim" transform="rotate(90 506 154)" textAnchor="middle">8 000</text>
              <text x="30" y="30" className="dim">ELEVATION A-A · WARREN TRUSS</text>
            </svg>
            <figcaption>Elevation A-A. Dimensions in millimetres.</figcaption>
          </figure>
        </section>

        <section className="check" id="check" aria-labelledby="h2c">
          <h2 id="h2c">Quick beam check</h2>
          <p className="sub">A simply supported beam under an even load. Indicative only: it tells you the scale of the problem, not the answer.</p>
          <div className="check-grid">
            <div className="ctl">
              <label htmlFor="sp">Span <b>{span.toFixed(1)} m</b></label>
              <input id="sp" type="range" min={2} max={14} step={0.5} value={span} onChange={(e) => setSpan(Number(e.target.value))} aria-valuetext={`${span} metres`} />
              <label htmlFor="ld">Load <b>{load} kN/m</b></label>
              <input id="ld" type="range" min={1} max={30} step={1} value={load} onChange={(e) => setLoad(Number(e.target.value))} aria-valuetext={`${load} kilonewtons per metre`} />
              <fieldset>
                <legend>Material</legend>
                <div className="mats" role="radiogroup" aria-label="Material">
                  {MATERIALS.map((x) => <button key={x.id} role="radio" aria-checked={mat === x.id} className={mat === x.id ? 'on' : ''} onClick={() => setMat(x.id)}>{x.name}</button>)}
                </div>
              </fieldset>
            </div>
            <div className="out">
              <svg viewBox="0 0 540 190" role="img" aria-label={`Beam diagram: span ${span} metres, load ${load} kilonewtons per metre, deflection about ${calc.delta.toFixed(1)} millimetres`}>
                <g stroke="#7fd4ff" strokeWidth="1.4" fill="none">
                  {Array.from({ length: 9 }, (_, i) => <path key={i} d={`M${80 + i * 50} 52 V ${110}`} markerEnd="url(#a)" />)}
                  <path d="M60 52 H480" />
                </g>
                <defs><marker id="a" markerWidth="8" markerHeight="8" refX="4" refY="7" orient="auto"><path d="M0 0 L4 8 L8 0" fill="none" stroke="#7fd4ff" /></marker></defs>
                <path d={beamD} fill="none" stroke="#e9f4ff" strokeWidth="5" strokeLinecap="round" />
                <path d="M60 130 L40 160 H80 Z M480 130 L460 160 H500 Z" fill="none" stroke="#e9f4ff" strokeWidth="1.6" />
                <text x="270" y="40" textAnchor="middle" className="dim">{load} kN/m</text>
                <text x="270" y="182" textAnchor="middle" className="dim">{span.toFixed(1)} m</text>
              </svg>
              <div role="status"><dl className="res">
                <div><dt>Max moment</dt><dd>{calc.moment.toFixed(1)} kN·m</dd></div>
                <div><dt>Indicative depth</dt><dd>{calc.depth} mm <small>({m.note})</small></dd></div>
                <div><dt>Mid-span sag</dt><dd>{calc.delta.toFixed(1)} mm <small>({calc.delta > (span * 1000) / 250 ? 'too much: deepen it' : 'within span / 250'})</small></dd></div>
              </dl></div>
            </div>
          </div>
        </section>

        <section className="sheets" id="sheets" aria-labelledby="h2s">
          <h2 id="h2s">Drawing list</h2>
          <table>
            <caption className="sr-only">What we do, as a drawing list</caption>
            <thead><tr><th scope="col">Sheet</th><th scope="col">Title</th><th scope="col">Covers</th></tr></thead>
            <tbody>{SHEETS.map(([n, t, d]) => <tr key={n}><th scope="row">{n}</th><td>{t}</td><td>{d}</td></tr>)}</tbody>
          </table>
          <h3>Recent work</h3>
          <ul className="jobs">{JOBS.map(([y, t, p, d]) => <li key={t}><span>{y}</span><b>{t}</b><i>{p}</i><em>{d}</em></li>)}</ul>
        </section>

        <section className="rfi" id="rfi" aria-labelledby="h2r">
          <h2 id="h2r">Request for information</h2>
          <p className="sub">Tell us what you are building. A named engineer replies within two working days.</p>
          <form
            noValidate
            onSubmit={(e) => {
              e.preventDefault()
              setState(name.trim().length > 1 && msg.trim().length > 9 ? 'ok' : 'bad')
            }}
          >
            <label htmlFor="rn">Your name</label>
            <input id="rn" value={name} onChange={(e) => { setName(e.target.value); setState('idle') }} aria-invalid={state === 'bad' && name.trim().length < 2} aria-describedby="rm" autoComplete="name" />
            <label htmlFor="rq">What are you building?</label>
            <textarea id="rq" rows={4} value={msg} onChange={(e) => { setMsg(e.target.value); setState('idle') }} aria-invalid={state === 'bad' && msg.trim().length < 10} aria-describedby="rm" />
            <button>Send RFI</button>
            <p id="rm" role={state === 'bad' ? 'alert' : 'status'}>{state === 'bad' ? 'Please give your name and a sentence or two about the project.' : state === 'ok' ? `Thank you, ${name.trim()}. RFI logged: you will hear from us by Thursday.` : ' '}</p>
          </form>
        </section>
      </main>
      <footer className="foot">Fenwick &amp; Ode is a fictional practice. The beam check is a teaching aid and must not be used for design.</footer>
    </div>
  )
}


// ===== src/patterns/sites/blueprint/styles.css =====
.site-blueprint { position: relative; min-height: 100svh; overflow-x: clip; }
.site-blueprint {
  --paper: #0d2b52;
  --paper-2: #10335f;
  --line: #e9f4ff;
  --cyan: #7fd4ff;
  --amber: #ffd37a;
  --muted: #a9c4e0;
  --head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
.site-blueprint * { box-sizing: border-box; margin: 0; padding: 0; }
.site-blueprint, .site-blueprint { background-color: var(--paper); color: var(--line); font-family: var(--mono); -webkit-font-smoothing: antialiased; background-image: linear-gradient(rgba(127, 212, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(127, 212, 255, 0.07) 1px, transparent 1px); background-size: 24px 24px; min-height: 100svh; line-height: 1.55; }
.site-blueprint a { color: inherit; }
.site-blueprint button, .site-blueprint input, .site-blueprint textarea { font: inherit; color: inherit; }
.site-blueprint button { cursor: pointer; }
.site-blueprint :focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.site-blueprint .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-blueprint h1, .site-blueprint h2, .site-blueprint h3 { font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 0.98; }
.site-blueprint .dim { fill: var(--cyan); font: 500 11px var(--mono); letter-spacing: 0.06em; }
.site-blueprint .frame { position: fixed; inset: 10px; border: 1.5px solid var(--line); pointer-events: none; z-index: 5; }
.site-blueprint .tb { display: flex; align-items: stretch; gap: 0; margin: 22px clamp(22px, 4vw, 56px) 0; border: 1.5px solid var(--line); background: var(--paper); position: sticky; top: 14px; z-index: 20; }
.site-blueprint .tb > * { padding: 10px 16px; border-right: 1.5px solid var(--line); }
.site-blueprint .tb > :last-child { border-right: 0; margin-left: auto; }
.site-blueprint .firm { display: flex; gap: 0.3em; align-items: center; font: 700 26px var(--head); letter-spacing: 0.1em; text-decoration: none; }
.site-blueprint .firm span { color: var(--amber); }
.site-blueprint .tb dl { display: flex; gap: 22px; align-items: center; }
.site-blueprint .tb dl div { display: grid; }
.site-blueprint .tb dt { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.site-blueprint .tb dd { font-size: 14px; font-weight: 500; }
.site-blueprint .tb nav { display: flex; align-items: center; gap: 2px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; padding: 0 8px; }
.site-blueprint .tb nav a { display: grid; place-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; }
.site-blueprint .tb nav a:hover { color: var(--amber); }
.site-blueprint main { padding: 0 clamp(22px, 4vw, 56px); }
.site-blueprint .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(36px, 6vw, 88px) 0; }
.site-blueprint .note { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); }
.site-blueprint .hero h1 { margin-top: 16px; font-size: clamp(46px, 7vw, 98px); }
.site-blueprint .lede { margin-top: 22px; max-width: 44ch; font-size: 17px; color: #cfe3f7; }
.site-blueprint .cta { display: inline-grid; place-items: center; min-height: 52px; margin-top: 26px; padding: 0 26px; background: var(--amber); color: #1a2a12; font: 700 20px var(--head); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }
.site-blueprint .cta:hover { background: #fff0c8; }
.site-blueprint .sheet svg { width: 100%; height: auto; display: block; border: 1.5px solid var(--line); background: rgba(0, 0, 0, 0.12); padding: 6px; }
.site-blueprint .sheet figcaption { margin-top: 8px; font-size: 12px; color: var(--muted); }
.site-blueprint .check, .site-blueprint .sheets, .site-blueprint .rfi { padding: clamp(32px, 5vw, 72px) 0; border-top: 1.5px solid var(--line); }
.site-blueprint .check h2, .site-blueprint .sheets h2, .site-blueprint .rfi h2 { font-size: clamp(34px, 5vw, 60px); }
.site-blueprint .sub { margin-top: 10px; max-width: 58ch; font-size: 15px; color: #cfe3f7; }
.site-blueprint .check-grid { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.site-blueprint .ctl label { display: flex; justify-content: space-between; margin-top: 16px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.site-blueprint .ctl label b { color: var(--line); font-size: 15px; }
.site-blueprint .ctl input[type='range'] { width: 100%; height: 44px; accent-color: var(--amber); }
.site-blueprint .ctl fieldset { border: 0; margin-top: 18px; }
.site-blueprint .ctl legend { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.site-blueprint .mats { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.site-blueprint .mats button { min-height: 44px; padding: 0 16px; background: transparent; border: 1.5px solid var(--line); font-size: 14px; }
.site-blueprint .mats button.on { background: var(--line); color: var(--paper); }
.site-blueprint .out svg { width: 100%; height: auto; display: block; border: 1.5px solid var(--line); background: rgba(0, 0, 0, 0.12); }
.site-blueprint .res { margin-top: 14px; display: grid; }
.site-blueprint .res div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--cyan); font-size: 16px; }
.site-blueprint .res dt { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); align-self: center; }
.site-blueprint .res small { color: var(--muted); font-size: 12px; }
.site-blueprint .sheets table { margin-top: 20px; width: 100%; max-width: 820px; border-collapse: collapse; font-size: 15px; }
.site-blueprint .sheets th, .site-blueprint .sheets td { padding: 12px 14px 12px 0; text-align: left; border-bottom: 1px solid var(--cyan); font-weight: 400; }
.site-blueprint .sheets thead th { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.site-blueprint .sheets tbody th { font-weight: 500; color: var(--amber); }
.site-blueprint .sheets h3 { margin-top: 40px; font-size: 28px; }
.site-blueprint .jobs { margin-top: 12px; list-style: none; max-width: 820px; }
.site-blueprint .jobs li { display: grid; grid-template-columns: 4rem 1fr 6rem; gap: 4px 18px; padding: 12px 0; border-bottom: 1px dashed var(--cyan); font-size: 15px; }
.site-blueprint .jobs li span { color: var(--amber); }
.site-blueprint .jobs li i { font-style: normal; color: var(--muted); text-align: right; }
.site-blueprint .jobs li em { grid-column: 2 / -1; font-style: normal; color: #cfe3f7; font-size: 14px; }
.site-blueprint .rfi form { margin-top: 20px; display: grid; gap: 8px; max-width: 560px; }
.site-blueprint .rfi label { margin-top: 8px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.site-blueprint .rfi input, .site-blueprint .rfi textarea { padding: 12px 14px; background: rgba(0, 0, 0, 0.18); border: 1.5px solid var(--line); border-radius: 0; font-size: 16px; }
.site-blueprint .rfi input { min-height: 48px; }
.site-blueprint .rfi [aria-invalid='true'] { border-color: var(--amber); border-width: 3px; }
.site-blueprint .rfi button { margin-top: 12px; min-height: 52px; background: var(--line); color: var(--paper); border: 0; font: 700 20px var(--head); letter-spacing: 0.1em; text-transform: uppercase; }
.site-blueprint .rfi button:hover { background: var(--amber); }
.site-blueprint .rfi #rm { min-height: 1.6em; margin-top: 8px; font-size: 14px; color: var(--amber); }
.site-blueprint .foot { margin: 0 clamp(22px, 4vw, 56px); padding: 22px 0 56px; border-top: 1.5px solid var(--line); font-size: 12px; color: var(--muted); }
@media (max-width: 860px) {
.site-blueprint .hero, .site-blueprint .check-grid { grid-template-columns: minmax(0, 1fr); }
.site-blueprint .tb { flex-wrap: wrap; }
.site-blueprint .tb dl { display: none; }
.site-blueprint .tb nav { margin-left: auto; padding: 0 4px; }
.site-blueprint .tb nav a { padding: 0 8px; font-size: 12px; }
.site-blueprint .firm { font-size: 22px; }
.site-blueprint .jobs li { grid-template-columns: 3rem 1fr; }
.site-blueprint .jobs li i { text-align: left; grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
.site-blueprint .sheet path { transition: none !important; }
}.site-blueprint .firm { white-space: nowrap; }
.site-blueprint [id] { scroll-margin-top: 110px; }
```


## Helper it imports: `src/patterns/sites/_shared.ts`

```ts
import { useEffect, type RefObject } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import Lenis from 'lenis'

/* Helpers shared by the whole-site demos in this folder. They are full pages, so they scroll the window,
   and they must coexist with UI Lab's own hash router and clean up completely when you leave. */

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/**
 * Smooth scroll (Lenis, driven by GSAP's ticker so ScrollTrigger stays in sync) plus in-page anchor links.
 * Anchor clicks are handled here instead of by the browser: UI Lab's router lives in the URL hash,
 * so a real `#section` navigation would be read as a route change.
 * Everything is torn down on unmount.
 */
export function useSiteScroll(root: RefObject<HTMLElement | null>, { smooth = true, lerp = 0.1 } = {}) {
  useEffect(() => {
    const el = root.current
    if (!el) return
    let lenis: Lenis | null = null
    let tick: ((t: number) => void) | null = null
    if (smooth && !reducedMotion()) {
      lenis = new Lenis({ lerp })
      lenis.on('scroll', ScrollTrigger.update)
      tick = (t: number) => lenis!.raf(t * 1000)
      gsap.ticker.add(tick)
      gsap.ticker.lagSmoothing(0)
    }
    const onClick = (e: MouseEvent) => {
      const a = (e.target as HTMLElement).closest<HTMLAnchorElement>('a[href^="#"]')
      if (!a || !el.contains(a)) return
      const id = a.getAttribute('href')!.slice(1)
      if (id.startsWith('/')) return // a UI Lab route, let it through
      e.preventDefault()
      const target = id ? el.querySelector<HTMLElement>(`#${CSS.escape(id)}`) : null
      if (!target) return
      if (lenis) lenis.scrollTo(target)
      else target.scrollIntoView({ behavior: 'smooth' })
    }
    el.addEventListener('click', onClick)
    return () => {
      el.removeEventListener('click', onClick)
      if (tick) gsap.ticker.remove(tick)
      gsap.ticker.lagSmoothing(500, 33) // GSAP's default
      lenis?.destroy()
      ScrollTrigger.getAll().forEach((t) => t.kill())
    }
  }, [root, smooth, lerp])
}
```

# Site: TILL ROLL (receipt-style order page)
> A coffee roaster whose order page is a till receipt: choose beans and the roll prints a line for each, with dotted leaders, a running total, a tip selector and a barcode generated from the order. Torn edges are a CSS mask.
- **Category:** Sites
- **Slug:** site-till-roll
- **Tags:** site, full page, niche world, receipt, thermal, shop, order form, monospace, barcode, persuade
- **Dependencies:** @fontsource/space-mono, sites/_shared.ts
- **Live demo:** https://ui-lab-weld.vercel.app/#/site-till-roll
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sites/till-roll/index.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sites/till-roll/index.tsx
- **Raw files:** https://ui-lab-weld.vercel.app/raw/sites/till-roll/index.tsx, https://ui-lab-weld.vercel.app/raw/sites/till-roll/styles.css

## When to use
- Order, checkout, ticket and confirmation pages; shops that want their price list to feel honest
- Reference for a receipt layout in CSS (dotted leaders, torn edge mask), a deterministic barcode in SVG, and a live total that is also a form

## Accessibility

Quantity steppers are labelled buttons; the receipt total is a status region; the tip is a radio group; the barcode has a text label and the order is also written out as words; the form has a label, aria-invalid and an alert; the print-feed animation is off under reduced motion.


## Source
Files: `src/patterns/sites/till-roll/index.tsx`, `src/patterns/sites/till-roll/styles.css`
```tsx
// ===== src/patterns/sites/till-roll/index.tsx =====
import { useMemo, useRef, useState } from 'react'
import '@fontsource/space-mono/400.css'
import '@fontsource/space-mono/700.css'
import './styles.css'
import { useSiteScroll } from '../_shared'

/*
 * TILL ROLL: a coffee roaster whose order page is a till receipt. World 23 (Thermal Receipt).
 * Signature: the receipt is the interface. Choose beans on the left and the roll prints a line for each on the right,
 * with dotted leaders, a running total, a tip selector and a barcode generated from the order. The torn edges are a CSS
 * mask. It stays honest as a form: real buttons, a live total, and a printed summary that is also plain text.
 */

const BEANS = [
  { id: 'ethiopia', name: 'Yirgacheffe', note: 'Blueberry, jasmine', price: 9.5 },
  { id: 'colombia', name: 'Huila', note: 'Red apple, caramel', price: 8.5 },
  { id: 'brazil', name: 'Santos', note: 'Hazelnut, cocoa', price: 7.5 },
  { id: 'kenya', name: 'Nyeri AA', note: 'Blackcurrant, citrus', price: 10.5 },
] as const
const TIPS = [0, 5, 10]
const money = (n: number) => n.toFixed(2).padStart(7)

function bars(seed: string) {
  let h = 7
  for (const c of seed) h = (h * 31 + c.charCodeAt(0)) >>> 0
  const out: number[] = []
  for (let i = 0; i < 46; i++) {
    h = (h * 1103515245 + 12345) >>> 0
    out.push(1 + ((h >> 16) % 3))
  }
  return out
}

export default function TillRollSite() {
  const root = useRef<HTMLDivElement>(null)
  const [qty, setQty] = useState<Record<string, number>>({ ethiopia: 1 })
  const [tip, setTip] = useState(5)
  const [name, setName] = useState('')
  const [state, setState] = useState<'idle' | 'bad' | 'ok'>('idle')

  useSiteScroll(root, { smooth: false })

  const lines = BEANS.filter((b) => qty[b.id])
  const sub = lines.reduce((n, b) => n + b.price * qty[b.id], 0)
  const tipAmt = (sub * tip) / 100
  const total = sub + tipAmt
  const code = useMemo(() => lines.map((b) => `${b.id}${qty[b.id]}`).join('-') + tip, [lines, qty, tip])
  const set = (id: string, q: number) => setQty((c) => { const n = { ...c }; if (q <= 0) delete n[id]; else n[id] = q; return n })
  const order = state === 'ok'

  return (
    <div className="site-till" ref={root}>
      <header className="top">
        <a href="#top" className="logo">TILL ROLL<span> coffee</span></a>
        <nav aria-label="Sections"><a href="#beans">Beans</a><a href="#receipt">Your receipt</a></nav>
      </header>

      <main id="top">
        <section className="hero" aria-labelledby="h1">
          <p className="tag">Roasted Tuesdays · Posted Wednesdays</p>
          <h1 id="h1">Fresh coffee.<br />Itemised.</h1>
          <p className="lede">Four beans, one roaster, no subscription. Pick what you want and watch the receipt print. What you see is exactly what you pay.</p>
        </section>

        <div className="work">
          <section className="beans" id="beans" aria-labelledby="h2b">
            <h2 id="h2b">Beans</h2>
            <ul>
              {BEANS.map((b) => (
                <li key={b.id}>
                  <div>
                    <b>{b.name}</b>
                    <span>{b.note}</span>
                    <i>£{b.price.toFixed(2)} / 250 g</i>
                  </div>
                  <div className="step">
                    <button aria-label={`One fewer ${b.name}`} onClick={() => set(b.id, (qty[b.id] ?? 0) - 1)} disabled={!qty[b.id]}>−</button>
                    <output aria-label={`${b.name} bags`}>{qty[b.id] ?? 0}</output>
                    <button aria-label={`One more ${b.name}`} onClick={() => set(b.id, (qty[b.id] ?? 0) + 1)}>+</button>
                  </div>
                </li>
              ))}
            </ul>
            <fieldset>
              <legend>Tip the roaster</legend>
              <div role="radiogroup" aria-label="Tip" className="tips">
                {TIPS.map((t) => <button key={t} role="radio" aria-checked={tip === t} className={tip === t ? 'on' : ''} onClick={() => setTip(t)}>{t}%</button>)}
              </div>
            </fieldset>
          </section>

          <section className="paper-wrap" id="receipt" aria-labelledby="h2r">
            <h2 id="h2r" className="sr-only">Your receipt</h2>
            <article className="paper">
              <p className="c b">TILL ROLL COFFEE</p>
              <p className="c">14 Dock Street, Leeds</p>
              <p className="rule" aria-hidden>{'- '.repeat(18)}</p>
              {lines.length === 0 ? (
                <p className="c">Nothing on the roll yet.<br />Add some beans.</p>
              ) : (
                <ul className="items">
                  {lines.map((b) => (
                    <li key={b.id}>
                      <span>{qty[b.id]} × {b.name}</span>
                      <span className="lead" aria-hidden />
                      <span>{money(b.price * qty[b.id])}</span>
                    </li>
                  ))}
                </ul>
              )}
              <p className="rule" aria-hidden>{'- '.repeat(18)}</p>
              <div role="status"><dl className="tot">
                <div><dt>SUBTOTAL</dt><dd>{money(sub)}</dd></div>
                <div><dt>TIP {tip}%</dt><dd>{money(tipAmt)}</dd></div>
                <div className="big"><dt>TOTAL GBP</dt><dd>{money(total)}</dd></div>
              </dl></div>
              <p className="rule" aria-hidden>{'- '.repeat(18)}</p>
              <svg viewBox="0 0 184 46" className="bars" role="img" aria-label={`Barcode for order ${code}`}>
                {(() => {
                  let x = 4
                  return bars(code).map((w, i) => {
                    const r = i % 2 === 0 ? <rect key={i} x={x} y="2" width={w} height="42" fill="#1c1b19" /> : null
                    x += w + 1.2
                    return r
                  })
                })()}
              </svg>
              <p className="c small">{order ? `ORDER FOR ${name.trim().toUpperCase()}` : `ORDER ${code.toUpperCase().slice(0, 18)}`}</p>
              {order && <p className="stamp" role="status">PAID WHEN COLLECTED</p>}
              <p className="c">THANK YOU</p>
            </article>

            <form
              noValidate
              onSubmit={(e) => {
                e.preventDefault()
                setState(name.trim().length > 1 && lines.length > 0 ? 'ok' : 'bad')
              }}
            >
              <label htmlFor="tn">Name on the order</label>
              <input id="tn" value={name} onChange={(e) => { setName(e.target.value); setState('idle') }} autoComplete="given-name" aria-invalid={state === 'bad' && name.trim().length < 2} aria-describedby="tm" />
              <button>Place order</button>
              <p id="tm" role={state === 'bad' ? 'alert' : 'status'}>{state === 'bad' ? 'Add at least one bag and your name first.' : state === 'ok' ? 'Order placed. We will email a copy of this receipt.' : ' '}</p>
            </form>
          </section>
        </div>
      </main>
      <footer className="foot">Till Roll is a fictional roaster. No order is placed.</footer>
    </div>
  )
}


// ===== src/patterns/sites/till-roll/styles.css =====
.site-till { position: relative; min-height: 100svh; overflow-x: clip; }
.site-till {
  --bg: #1c1b19;
  --paper: #f7f4ea;
  --ink: #1c1b19;
  --warm: #e8e2d0;
  --red: #c4311d;
  --muted: #b8b19d;
  --mono: 'Space Mono', ui-monospace, monospace;
}
.site-till * { box-sizing: border-box; margin: 0; padding: 0; }
.site-till, .site-till { background: var(--bg); color: var(--warm); font-family: var(--mono); -webkit-font-smoothing: antialiased; min-height: 100svh; line-height: 1.55; }
.site-till a { color: inherit; }
.site-till button, .site-till input { font: inherit; color: inherit; }
.site-till button { cursor: pointer; }
.site-till :focus-visible { outline: 3px solid #ffd166; outline-offset: 3px; }
.site-till .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-till .top { display: flex; align-items: center; justify-content: space-between; padding: 14px clamp(16px, 4vw, 48px); border-bottom: 1px dashed #56524a; position: sticky; top: 0; z-index: 20; background: var(--bg); }
.site-till .logo { font-weight: 700; font-size: 20px; letter-spacing: 0.1em; text-decoration: none; }
.site-till .logo span { font-weight: 400; color: var(--muted); letter-spacing: 0; }
.site-till .top nav { display: flex; gap: 4px; font-size: 14px; }
.site-till .top nav a { display: grid; place-items: center; min-height: 44px; padding: 0 14px; text-decoration: none; }
.site-till .top nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-till .hero { padding: clamp(36px, 6vw, 88px) clamp(16px, 4vw, 48px) clamp(20px, 3vw, 40px); max-width: 980px; }
.site-till .tag { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #ffd166; }
.site-till .hero h1 { margin-top: 14px; font-size: clamp(44px, 8vw, 96px); line-height: 0.98; font-weight: 700; letter-spacing: -0.03em; }
.site-till .lede { margin-top: 20px; max-width: 46ch; font-size: 17px; color: #d6cfbb; }
.site-till .work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(24px, 5vw, 72px); padding: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 48px) clamp(48px, 6vw, 96px); align-items: start; }
.site-till .beans h2 { font-size: 22px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.site-till .beans ul { margin-top: 14px; list-style: none; display: grid; gap: 0; }
.site-till .beans li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px dashed #56524a; }
.site-till .beans li:last-child { border-bottom: 1px dashed #56524a; }
.site-till .beans li > div:first-child { display: grid; gap: 2px; }
.site-till .beans b { font-size: 19px; }
.site-till .beans span { font-size: 14px; color: var(--muted); }
.site-till .beans i { font-style: normal; font-size: 14px; color: #ffd166; }
.site-till .step { display: flex; align-items: center; gap: 8px; }
.site-till .step button { width: 44px; height: 44px; background: transparent; border: 1.5px solid var(--warm); font-size: 20px; font-weight: 700; }
.site-till .step button:hover:not(:disabled) { background: var(--warm); color: var(--bg); }
.site-till .step button:disabled { opacity: 0.35; cursor: default; }
.site-till .step output { min-width: 2ch; text-align: center; font-weight: 700; font-size: 18px; }
.site-till .beans fieldset { margin-top: 26px; border: 0; }
.site-till .beans legend { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.site-till .tips { margin-top: 8px; display: flex; gap: 8px; }
.site-till .tips button { min-width: 64px; min-height: 44px; background: transparent; border: 1.5px solid var(--warm); font-weight: 700; }
.site-till .tips button.on { background: var(--warm); color: var(--bg); }
.site-till .paper-wrap { position: sticky; top: 76px; }
.site-till .paper { position: relative; padding: 26px 24px 34px; background: var(--paper); color: var(--ink); font-size: 15px; line-height: 1.5; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45); -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; padding-bottom: 40px; }
.site-till .paper .c { text-align: center; }
.site-till .paper .b { font-weight: 700; font-size: 18px; letter-spacing: 0.1em; }
.site-till .paper .small { font-size: 12px; letter-spacing: 0.08em; }
.site-till .paper .rule { color: #5a5648; white-space: nowrap; overflow: hidden; text-align: center; margin: 6px 0; font-size: 14px; }
.site-till .items { list-style: none; display: grid; gap: 4px; }
.site-till .items li { display: flex; gap: 6px; align-items: baseline; }
.site-till .items .lead { flex: 1; border-bottom: 2px dotted #8a8472; transform: translateY(-4px); }
.site-till .items li { animation: till-till-feed 0.4s steps(6, end); }
.site-till .tot div { display: flex; justify-content: space-between; white-space: pre; }
.site-till .tot .big { font-weight: 700; font-size: 18px; margin-top: 4px; }
.site-till .tot dt, .site-till .tot dd { margin: 0; }
.site-till .bars { display: block; width: 100%; height: 46px; margin-top: 8px; }
.site-till .stamp { margin: 10px auto 4px; width: max-content; padding: 4px 12px; border: 3px solid var(--red); color: var(--red); font-weight: 700; letter-spacing: 0.1em; transform: rotate(-5deg); font-size: 15px; }
.site-till .paper-wrap form { margin-top: 18px; display: grid; gap: 8px; }
.site-till .paper-wrap label { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.site-till .paper-wrap input { min-height: 48px; padding: 0 14px; background: var(--paper); color: var(--ink); border: 0; font-size: 17px; }
.site-till .paper-wrap input[aria-invalid='true'] { outline: 3px solid #ff8a6b; }
.site-till .paper-wrap form button { min-height: 52px; background: #ffd166; color: var(--ink); border: 0; font-weight: 700; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; }
.site-till .paper-wrap form button:hover { background: #ffe29a; }
.site-till .paper-wrap #tm { min-height: 1.6em; font-size: 14px; color: #ffd166; }
.site-till .foot { padding: 24px clamp(16px, 4vw, 48px) 48px; font-size: 12px; color: var(--muted); border-top: 1px dashed #56524a; }
@keyframes till-till-feed { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 860px) {
.site-till .work { grid-template-columns: minmax(0, 1fr); }
.site-till .paper-wrap { position: static; }
.site-till .top nav a:first-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.site-till .items li { animation: none; }
}
```


## Helper it imports: `src/patterns/sites/_shared.ts`

```ts
import { useEffect, type RefObject } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import Lenis from 'lenis'

/* Helpers shared by the whole-site demos in this folder. They are full pages, so they scroll the window,
   and they must coexist with UI Lab's own hash router and clean up completely when you leave. */

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/**
 * Smooth scroll (Lenis, driven by GSAP's ticker so ScrollTrigger stays in sync) plus in-page anchor links.
 * Anchor clicks are handled here instead of by the browser: UI Lab's router lives in the URL hash,
 * so a real `#section` navigation would be read as a route change.
 * Everything is torn down on unmount.
 */
export function useSiteScroll(root: RefObject<HTMLElement | null>, { smooth = true, lerp = 0.1 } = {}) {
  useEffect(() => {
    const el = root.current
    if (!el) return
    let lenis: Lenis | null = null
    let tick: ((t: number) => void) | null = null
    if (smooth && !reducedMotion()) {
      lenis = new Lenis({ lerp })
      lenis.on('scroll', ScrollTrigger.update)
      tick = (t: number) => lenis!.raf(t * 1000)
      gsap.ticker.add(tick)
      gsap.ticker.lagSmoothing(0)
    }
    const onClick = (e: MouseEvent) => {
      const a = (e.target as HTMLElement).closest<HTMLAnchorElement>('a[href^="#"]')
      if (!a || !el.contains(a)) return
      const id = a.getAttribute('href')!.slice(1)
      if (id.startsWith('/')) return // a UI Lab route, let it through
      e.preventDefault()
      const target = id ? el.querySelector<HTMLElement>(`#${CSS.escape(id)}`) : null
      if (!target) return
      if (lenis) lenis.scrollTo(target)
      else target.scrollIntoView({ behavior: 'smooth' })
    }
    el.addEventListener('click', onClick)
    return () => {
      el.removeEventListener('click', onClick)
      if (tick) gsap.ticker.remove(tick)
      gsap.ticker.lagSmoothing(500, 33) // GSAP's default
      lenis?.destroy()
      ScrollTrigger.getAll().forEach((t) => t.kill())
    }
  }, [root, smooth, lerp])
}
```

# Site: A GENTLE GUIDE TO CURVES (explorable explainer)
> An explorable guide that builds a Bezier curve in four steps (line, quadratic, cubic, easing). Each passage sits beside a figure you can drag, nudge with the arrow keys and scrub with a slider, and the formula, SVG path and CSS easing update as you move.
- **Category:** Sites
- **Slug:** site-curves
- **Tags:** site, full page, niche world, explorable, explainer, bezier, svg, drag, easing, read
- **Dependencies:** @fontsource-variable/hanken-grotesk, @fontsource-variable/newsreader, @fontsource/ibm-plex-mono, sites/_shared.ts
- **Live demo:** https://ui-lab-weld.vercel.app/#/site-curves
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sites/curves/index.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sites/curves/index.tsx
- **Raw files:** https://ui-lab-weld.vercel.app/raw/sites/curves/index.tsx, https://ui-lab-weld.vercel.app/raw/sites/curves/Figure.tsx, https://ui-lab-weld.vercel.app/raw/sites/curves/styles.css

## When to use
- Teaching, documentation and any page that explains how something works
- Reference for keyboard-accessible draggable SVG points, live readouts of the maths, and an easing editor that animates with container-query units

## Accessibility

Every control point is a focusable button with a spoken position that moves with the arrow keys (Shift for bigger steps); sliders have spoken values; each figure has a caption; readouts are status regions and the code is focusable; the easing animation is replaced by its end state under reduced motion.


## Source
Files: `src/patterns/sites/curves/index.tsx`, `src/patterns/sites/curves/Figure.tsx`, `src/patterns/sites/curves/styles.css`
```tsx
// ===== src/patterns/sites/curves/index.tsx =====
import { useRef, useState } from 'react'
import '@fontsource-variable/hanken-grotesk'
import '@fontsource-variable/newsreader'
import '@fontsource/ibm-plex-mono/400.css'
import '@fontsource/ibm-plex-mono/500.css'
import './styles.css'
import { reducedMotion, useSiteScroll } from '../_shared'
import Figure, { H, W, type Pt } from './Figure'

/*
 * A GENTLE GUIDE TO CURVES: an explorable explainer. World 24 (Explorable Explainer).
 * Signature: the figure is the argument. Each idea is a short passage beside a figure you can drag, nudge with the arrow
 * keys and scrub with a slider, and the numbers underneath (the formula, the SVG path, the CSS easing) update as you
 * move. It builds from a line to a quadratic to a cubic Bezier and ends on the easing curves used in CSS.
 */

const lerp = (a: Pt, b: Pt, t: number): Pt => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t]
const f = (n: number) => Math.round(n)
const seg = (a: Pt, b: Pt, cls: string) => <line x1={a[0]} y1={a[1]} x2={b[0]} y2={b[1]} className={cls} />

function T({ t, set, id }: { t: number; set: (n: number) => void; id: string }) {
  return (
    <div className="tctl">
      <label htmlFor={id}>t = <b>{t.toFixed(2)}</b></label>
      <input id={id} type="range" min={0} max={1} step={0.01} value={t} onChange={(e) => set(Number(e.target.value))} aria-valuetext={`t equals ${t.toFixed(2)}`} />
    </div>
  )
}

export default function CurvesSite() {
  const root = useRef<HTMLDivElement>(null)
  useSiteScroll(root, { smooth: false })

  const [l, setL] = useState<Pt[]>([[70, 220], [340, 80]])
  const [lt, setLt] = useState(0.4)
  const [q, setQ] = useState<Pt[]>([[60, 230], [200, 40], [360, 210]])
  const [qt, setQt] = useState(0.5)
  const [c, setC] = useState<Pt[]>([[50, 230], [120, 40], [300, 40], [370, 230]])
  const [ct, setCt] = useState(0.5)
  const [ex, setEx] = useState<[number, number, number, number]>([0.25, 0.1, 0.25, 1])
  const [run, setRun] = useState(0)
  const [copied, setCopied] = useState(false)

  const lp = lerp(l[0], l[1], lt)
  const q01 = lerp(q[0], q[1], qt), q12 = lerp(q[1], q[2], qt), qp = lerp(q01, q12, qt)
  const c01 = lerp(c[0], c[1], ct), c12 = lerp(c[1], c[2], ct), c23 = lerp(c[2], c[3], ct)
  const c012 = lerp(c01, c12, ct), c123 = lerp(c12, c23, ct), cp = lerp(c012, c123, ct)
  const cd = `M ${f(c[0][0])} ${f(c[0][1])} C ${f(c[1][0])} ${f(c[1][1])}, ${f(c[2][0])} ${f(c[2][1])}, ${f(c[3][0])} ${f(c[3][1])}`
  const ease = `cubic-bezier(${ex.map((n) => n.toFixed(2)).join(', ')})`

  // Easing editor: two handles in a unit square mapped to a 300x240 box.
  const BX = 60, BY = 30, BW = 300, BH = 240
  const ep = (x: number, y: number): Pt => [BX + x * BW, BY + (1 - y) * BH]
  const fromEp = ([px, py]: Pt) => [Math.max(0, Math.min(1, (px - BX) / BW)), Math.max(-0.5, Math.min(1.5, 1 - (py - BY) / BH))]
  const h1 = ep(ex[0], ex[1]), h2 = ep(ex[2], ex[3])
  const setEase = (p: Pt[]) => {
    const a = fromEp(p[0]), b = fromEp(p[1])
    setEx([a[0], a[1], b[0], b[1]])
  }
  const copy = async () => {
    try {
      await navigator.clipboard.writeText(ease)
    } catch {
      /* clipboard may be blocked */
    }
    setCopied(true)
    setTimeout(() => setCopied(false), 1400)
  }

  return (
    <div className="site-curves" ref={root}>
      <header className="top">
        <a href="#top" className="logo">Curves</a>
        <nav aria-label="Sections"><a href="#line">Line</a><a href="#quad">Quadratic</a><a href="#cubic">Cubic</a><a href="#ease">Easing</a></nav>
      </header>

      <main id="top">
        <section className="intro" aria-labelledby="h1">
          <p className="kicker">An explorable guide</p>
          <h1 id="h1">A gentle guide to curves</h1>
          <p className="lede">Every smooth shape on a screen, from a letter to a button’s animation, is made from one idea. You will build it in four steps, and you can drag everything. No maths needed to start.</p>
          <p className="tip">Drag the round points, or focus one and use the arrow keys (hold Shift for bigger steps).</p>
        </section>

        <section className="step" id="line" aria-labelledby="h2l">
          <div className="text">
            <p className="num">1</p>
            <h2 id="h2l">A line is a blend of two points</h2>
            <p>Take two points. Pick a number <i>t</i> between 0 and 1. At 0 you are on the first point; at 1 you are on the second; in between you are some fraction of the way along. That blend is called a <b>linear interpolation</b>.</p>
            <T t={lt} set={setLt} id="tl" />
            <p className="calc" role="status">P = (1 − {lt.toFixed(2)})·P0 + {lt.toFixed(2)}·P1 = ({f(lp[0])}, {f(lp[1])})</p>
          </div>
          <Figure pts={l} set={setL} labels={['Point 0', 'Point 1']} caption="Two draggable points and the blended point between them.">
            {seg(l[0], l[1], 'ln')}
            <circle cx={lp[0]} cy={lp[1]} r="7" className="mover" />
          </Figure>
        </section>

        <section className="step" id="quad" aria-labelledby="h2q">
          <div className="text">
            <p className="num">2</p>
            <h2 id="h2q">Add a third point and the line bends</h2>
            <p>Blend P0 with P1, and P1 with P2, at the same <i>t</i>. You now have two moving points. Blend <em>those</em> and you get a point that traces a smooth arc: a <b>quadratic Bézier curve</b>. The middle point pulls the curve towards itself without ever touching it.</p>
            <T t={qt} set={setQt} id="tq" />
            <p className="calc" role="status">Point on the curve at t = {qt.toFixed(2)}: ({f(qp[0])}, {f(qp[1])})</p>
          </div>
          <Figure pts={q} set={setQ} labels={['Point 0', 'Point 1', 'Point 2']} caption="A quadratic Bézier curve and the construction lines that make it.">
            {seg(q[0], q[1], 'guide')}
            {seg(q[1], q[2], 'guide')}
            {seg(q01, q12, 'ln2')}
            <path d={`M ${q[0][0]} ${q[0][1]} Q ${q[1][0]} ${q[1][1]} ${q[2][0]} ${q[2][1]}`} className="curve" fill="none" />
            <circle cx={q01[0]} cy={q01[1]} r="5" className="mid" />
            <circle cx={q12[0]} cy={q12[1]} r="5" className="mid" />
            <circle cx={qp[0]} cy={qp[1]} r="7" className="mover" />
          </Figure>
        </section>

        <section className="step" id="cubic" aria-labelledby="h2c">
          <div className="text">
            <p className="num">3</p>
            <h2 id="h2c">Four points make the curves you draw with</h2>
            <p>Repeat once more and you have a <b>cubic Bézier</b>: two end points and two handles. This is what the pen tool in a drawing program makes, and what fonts and logos are built from. In an SVG it is the letter <code>C</code>.</p>
            <T t={ct} set={setCt} id="tc" />
            <pre className="code" tabIndex={0} aria-label="SVG path for this curve">{`<path d="${cd}" />`}</pre>
          </div>
          <Figure pts={c} set={setC} labels={['Point 0', 'Handle 1', 'Handle 2', 'Point 3']} caption="A cubic Bézier curve with two handles.">
            {seg(c[0], c[1], 'guide')}
            {seg(c[2], c[3], 'guide')}
            {seg(c[1], c[2], 'guide faint')}
            {seg(c012, c123, 'ln2')}
            <path d={cd} className="curve" fill="none" />
            {[c01, c12, c23, c012, c123].map((p, i) => <circle key={i} cx={p[0]} cy={p[1]} r="4.5" className="mid" />)}
            <circle cx={cp[0]} cy={cp[1]} r="7" className="mover" />
          </Figure>
        </section>

        <section className="step" id="ease" aria-labelledby="h2e">
          <div className="text">
            <p className="num">4</p>
            <h2 id="h2e">Time can bend too</h2>
            <p>CSS uses the same curve to describe speed. Put time on the horizontal axis and progress on the vertical one. A steep part means fast; a flat part means slow. Drag the two handles, then press Play.</p>
            <div className="presets" role="group" aria-label="Presets">
              {([['ease', [0.25, 0.1, 0.25, 1]], ['ease-in-out', [0.42, 0, 0.58, 1]], ['overshoot', [0.34, 1.56, 0.64, 1]], ['linear', [0, 0, 1, 1]]] as const).map(([n, v]) => <button key={n} onClick={() => { setEx([...v] as [number, number, number, number]); setRun((r) => r + 1) }}>{n}</button>)}
            </div>
            <pre className="code" tabIndex={0} aria-label="CSS easing">{`transition-timing-function: ${ease};`}</pre>
            <div className="row">
              <button className="play" onClick={() => setRun((r) => r + 1)}>Play</button>
              <button className="copy" onClick={copy}>{copied ? 'Copied' : 'Copy the CSS'}</button>
            </div>
            <div className="track" aria-hidden>
              <span key={run} className="ball" style={{ animation: reducedMotion() || run === 0 ? 'none' : `cv-curves-go 1.2s ${ease} forwards`, translate: reducedMotion() ? 'calc(100cqw - 22px) 0' : undefined }} />
            </div>
            <p className="calc" role="status">{reducedMotion() ? 'Reduced motion is on: the dot jumps to the end, but the curve still shows the speed.' : 'The dot follows this easing for 1.2 seconds.'}</p>
          </div>
          <Figure pts={[h1, h2]} set={setEase} labels={['Handle 1', 'Handle 2']} caption="An easing curve: time across, progress up. Handles may go beyond the box to overshoot.">
            <rect x={BX} y={BY} width={BW} height={BH} className="unit" />
            <line x1={BX} y1={BY + BH} x2={h1[0]} y2={h1[1]} className="guide" />
            <line x1={BX + BW} y1={BY} x2={h2[0]} y2={h2[1]} className="guide" />
            <path d={`M ${BX} ${BY + BH} C ${h1[0]} ${h1[1]}, ${h2[0]} ${h2[1]}, ${BX + BW} ${BY}`} className="curve" fill="none" />
            <text x={BX} y={H - 8} className="plabel" aria-hidden>time →</text>
            <text x="8" y={BY + 10} className="plabel" aria-hidden>progress</text>
            <text x={W - 10} y={H - 8} className="plabel" textAnchor="end" aria-hidden>{ease}</text>
          </Figure>
        </section>
      </main>
      <footer className="foot">
        <p>A fictional explorable guide, written for UI Lab. The same curve draws your handwriting font, your logo and the way a menu slides open.</p>
      </footer>
    </div>
  )
}


// ===== src/patterns/sites/curves/Figure.tsx =====
import { useRef, useState } from 'react'

/*
 * One interactive figure: a set of draggable control points on an SVG canvas. Points move with the pointer (captured, so a
 * drag keeps working outside the figure) and with the arrow keys (4 px, or 16 px with Shift). Each point is a focusable
 * button with a spoken position. The parent decides what to draw between the points via `children`.
 */

export type Pt = [number, number]
export const W = 420
export const H = 300

export function clampPt([x, y]: Pt): Pt {
  return [Math.max(10, Math.min(W - 10, x)), Math.max(10, Math.min(H - 10, y))]
}

export default function Figure({ pts, set, labels, children, caption }: { pts: Pt[]; set: (p: Pt[]) => void; labels: string[]; children: React.ReactNode; caption: string }) {
  const svg = useRef<SVGSVGElement>(null)
  const [drag, setDrag] = useState<number | null>(null)

  const to = (e: React.PointerEvent): Pt => {
    const r = svg.current!.getBoundingClientRect()
    return clampPt([((e.clientX - r.left) / r.width) * W, ((e.clientY - r.top) / r.height) * H])
  }
  const move = (i: number, p: Pt) => set(pts.map((q, j) => (j === i ? p : q)))

  return (
    <figure className="fig">
      <svg ref={svg} viewBox={`0 0 ${W} ${H}`} role="group" aria-label={caption} onPointerMove={(e) => drag !== null && move(drag, to(e))} onPointerUp={() => setDrag(null)} onPointerLeave={() => setDrag(null)}>
        <rect width={W} height={H} className="paper" />
        {Array.from({ length: 8 }, (_, i) => <line key={'v' + i} x1={(i + 1) * 52} x2={(i + 1) * 52} y1="0" y2={H} className="grid" />)}
        {Array.from({ length: 5 }, (_, i) => <line key={'h' + i} x1="0" x2={W} y1={(i + 1) * 50} y2={(i + 1) * 50} className="grid" />)}
        {children}
        {pts.map((p, i) => (
          <g key={i}>
            <circle cx={p[0]} cy={p[1]} r="24" className="hit" onPointerDown={(e) => { ;(e.target as Element).setPointerCapture(e.pointerId); setDrag(i) }} />
            <circle
              cx={p[0]}
              cy={p[1]}
              r="11"
              className={`pt ${drag === i ? 'on' : ''}`}
              tabIndex={0}
              role="button"
              aria-label={`${labels[i]}: ${Math.round(p[0])}, ${Math.round(p[1])}. Drag, or use the arrow keys.`}
              onPointerDown={(e) => {
                ;(e.target as Element).setPointerCapture(e.pointerId)
                setDrag(i)
              }}
              onKeyDown={(e) => {
                const s = e.shiftKey ? 16 : 4
                const d: Record<string, Pt> = { ArrowLeft: [-s, 0], ArrowRight: [s, 0], ArrowUp: [0, -s], ArrowDown: [0, s] }
                if (d[e.key]) {
                  e.preventDefault()
                  move(i, clampPt([p[0] + d[e.key][0], p[1] + d[e.key][1]]))
                }
              }}
            />
            <text x={p[0] + 16} y={p[1] - 12} className="plabel" aria-hidden>{labels[i].replace('Point ', 'P')}</text>
          </g>
        ))}
      </svg>
      <figcaption>{caption}</figcaption>
    </figure>
  )
}


// ===== src/patterns/sites/curves/styles.css =====
.site-curves { position: relative; min-height: 100svh; overflow-x: clip; }
.site-curves {
  --paper: #fbf8f1;
  --ink: #1a1a1f;
  --muted: #55535c;
  --blue: #2a5bd7;
  --amber: #97510a;
  --rule: #d9d3c4;
  --serif: 'Newsreader Variable', Georgia, serif;
  --sans: 'Hanken Grotesk Variable', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
.site-curves * { box-sizing: border-box; margin: 0; padding: 0; }
.site-curves, .site-curves { background: var(--paper); color: var(--ink); font-family: var(--serif); -webkit-font-smoothing: antialiased; line-height: 1.6; }
.site-curves a { color: inherit; }
.site-curves button, .site-curves input { font: inherit; color: inherit; }
.site-curves button { cursor: pointer; }
.site-curves :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.site-curves .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-curves h1, .site-curves h2 { font-family: var(--sans); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.site-curves code { font-family: var(--mono); font-size: 0.88em; background: #efe9d9; padding: 1px 6px; border-radius: 4px; }
.site-curves .top { display: flex; align-items: center; justify-content: space-between; padding: 12px clamp(16px, 4vw, 48px); position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 92%, transparent); border-bottom: 1px solid var(--rule); }
.site-curves .logo { font: 800 22px var(--sans); text-decoration: none; letter-spacing: -0.02em; }
.site-curves .top nav { display: flex; gap: 2px; font: 600 14px var(--sans); }
.site-curves .top nav a { display: grid; place-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; border-radius: 8px; }
.site-curves .top nav a:hover { background: #efe9d9; }
.site-curves .intro { padding: clamp(40px, 7vw, 100px) clamp(16px, 4vw, 48px) clamp(20px, 3vw, 40px); max-width: 860px; }
.site-curves .kicker { font: 700 13px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); }
.site-curves .intro h1 { margin-top: 12px; font-size: clamp(42px, 7vw, 88px); }
.site-curves .lede { margin-top: 20px; max-width: 54ch; font-size: 22px; line-height: 1.5; color: #35333b; }
.site-curves .tip { margin-top: 16px; font: 500 15px var(--sans); color: var(--blue); }
.site-curves .step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(20px, 4vw, 64px); padding: clamp(28px, 5vw, 72px) clamp(16px, 4vw, 48px); border-top: 1px solid var(--rule); align-items: start; }
.site-curves .step .text { max-width: 52ch; }
.site-curves .num { font: 800 15px var(--sans); color: var(--amber); }
.site-curves .step h2 { margin-top: 6px; font-size: clamp(28px, 3.6vw, 44px); }
.site-curves .step p { margin-top: 14px; font-size: 19px; }
.site-curves .step .num { margin-top: 0; }
.site-curves .step em, .site-curves .step i { font-style: italic; }
.site-curves .calc { font: 500 15px var(--mono) !important; background: #efe9d9; padding: 10px 14px; border-radius: 8px; }
.site-curves .tctl { margin-top: 18px; display: grid; gap: 4px; font: 600 15px var(--sans); }
.site-curves .tctl input { width: 100%; height: 44px; accent-color: var(--blue); }
.site-curves .code { margin-top: 14px; padding: 12px 14px; background: #1f1e24; color: #f2efe6; border-radius: 8px; overflow-x: auto; font: 500 13px/1.5 var(--mono); }
.site-curves .presets { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.site-curves .presets button { min-height: 44px; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; font: 600 14px var(--sans); }
.site-curves .presets button:hover { background: var(--ink); color: var(--paper); }
.site-curves .row { margin-top: 12px; display: flex; gap: 8px; }
.site-curves .play { min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--blue); color: #fff; font: 700 16px var(--sans); }
.site-curves .copy { min-height: 48px; padding: 0 18px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; font: 600 15px var(--sans); }
.site-curves .track { container-type: inline-size; position: relative; height: 22px; margin-top: 16px; background: #efe9d9; border-radius: 999px; }
.site-curves .ball { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--amber); }
.site-curves .fig { position: sticky; top: 76px; }
.site-curves .fig svg { width: 100%; height: auto; display: block; border: 1.5px solid var(--ink); border-radius: 12px; background: #fff; touch-action: none; }
.site-curves .fig figcaption { margin-top: 8px; font: 500 14px var(--sans); color: var(--muted); }
.site-curves .paper { fill: #fff; }
.site-curves .grid { stroke: #ece7d9; stroke-width: 1; }
.site-curves .unit { fill: none; stroke: #bdb6a3; stroke-width: 1.2; stroke-dasharray: 4 4; }
.site-curves .ln { stroke: var(--ink); stroke-width: 2.5; }
.site-curves .ln2 { stroke: var(--amber); stroke-width: 2; }
.site-curves .guide { stroke: #9b96a8; stroke-width: 1.5; stroke-dasharray: 5 4; }
.site-curves .guide.faint { opacity: 0.55; }
.site-curves .curve { stroke: var(--blue); stroke-width: 4; stroke-linecap: round; }
.site-curves .mid { fill: var(--amber); }
.site-curves .mover { fill: var(--blue); stroke: #fff; stroke-width: 2.5; }
.site-curves .pt { fill: #fff; stroke: var(--ink); stroke-width: 3; cursor: grab; }
.site-curves .pt.on { cursor: grabbing; fill: #fff4d6; }
.site-curves .pt:focus-visible { stroke: var(--blue); stroke-width: 4; outline: none; }
.site-curves .plabel { font: 600 12px var(--sans); fill: var(--muted); }
.site-curves .foot { padding: 28px clamp(16px, 4vw, 48px) 56px; border-top: 1px solid var(--rule); color: var(--muted); font: 500 15px/1.6 var(--sans); max-width: 70ch; }
@keyframes cv-curves-go { from { translate: 0 0; } to { translate: calc(100cqw - 22px) 0; } }
@media (max-width: 860px) {
.site-curves .step { grid-template-columns: minmax(0, 1fr); }
.site-curves .fig { position: static; }
.site-curves .top nav a:nth-child(n + 3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.site-curves .ball { animation: none !important; }
}
.site-curves .hit { fill: transparent; cursor: grab; }
```


## Helper it imports: `src/patterns/sites/_shared.ts`

```ts
import { useEffect, type RefObject } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import Lenis from 'lenis'

/* Helpers shared by the whole-site demos in this folder. They are full pages, so they scroll the window,
   and they must coexist with UI Lab's own hash router and clean up completely when you leave. */

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/**
 * Smooth scroll (Lenis, driven by GSAP's ticker so ScrollTrigger stays in sync) plus in-page anchor links.
 * Anchor clicks are handled here instead of by the browser: UI Lab's router lives in the URL hash,
 * so a real `#section` navigation would be read as a route change.
 * Everything is torn down on unmount.
 */
export function useSiteScroll(root: RefObject<HTMLElement | null>, { smooth = true, lerp = 0.1 } = {}) {
  useEffect(() => {
    const el = root.current
    if (!el) return
    let lenis: Lenis | null = null
    let tick: ((t: number) => void) | null = null
    if (smooth && !reducedMotion()) {
      lenis = new Lenis({ lerp })
      lenis.on('scroll', ScrollTrigger.update)
      tick = (t: number) => lenis!.raf(t * 1000)
      gsap.ticker.add(tick)
      gsap.ticker.lagSmoothing(0)
    }
    const onClick = (e: MouseEvent) => {
      const a = (e.target as HTMLElement).closest<HTMLAnchorElement>('a[href^="#"]')
      if (!a || !el.contains(a)) return
      const id = a.getAttribute('href')!.slice(1)
      if (id.startsWith('/')) return // a UI Lab route, let it through
      e.preventDefault()
      const target = id ? el.querySelector<HTMLElement>(`#${CSS.escape(id)}`) : null
      if (!target) return
      if (lenis) lenis.scrollTo(target)
      else target.scrollIntoView({ behavior: 'smooth' })
    }
    el.addEventListener('click', onClick)
    return () => {
      el.removeEventListener('click', onClick)
      if (tick) gsap.ticker.remove(tick)
      gsap.ticker.lagSmoothing(500, 33) // GSAP's default
      lenis?.destroy()
      ScrollTrigger.getAll().forEach((t) => t.kill())
    }
  }, [root, smooth, lerp])
}
```

# Site: SPECIMEN, FRAUNCES (type specimen)
> A type specimen for an open-source variable serif, where you drive the real axes: weight, optical size, softness and wonk reshape the letterforms live. Also a character set to inspect, a size ladder and a text tester for your own words.
- **Category:** Sites
- **Slug:** site-specimen
- **Tags:** site, full page, niche world, type specimen, variable font, typography, font-variation-settings, tool, read
- **Dependencies:** @fontsource-variable/fraunces, @fontsource-variable/hanken-grotesk, sites/_shared.ts
- **Live demo:** https://ui-lab-weld.vercel.app/#/site-specimen
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sites/specimen/index.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sites/specimen/index.tsx
- **Raw files:** https://ui-lab-weld.vercel.app/raw/sites/specimen/index.tsx, https://ui-lab-weld.vercel.app/raw/sites/specimen/styles.css

## When to use
- Type foundries, font libraries, design-system documentation and any page that sells or explains typography
- Reference for font-variation-settings driven from sliders, a glyph inspector, and CSS shown beside the control that produces it

## Accessibility

All axis controls are native ranges with spoken values and visible labels; Wonk and Italic are switches; each character button has a name; the CSS output is focusable; the large specimen glyph is decorative and the font name is real text.


## Source
Files: `src/patterns/sites/specimen/index.tsx`, `src/patterns/sites/specimen/styles.css`
```tsx
// ===== src/patterns/sites/specimen/index.tsx =====
import { useRef, useState } from 'react'
import '@fontsource-variable/fraunces/full.css'
import '@fontsource-variable/fraunces/full-italic.css'
import '@fontsource-variable/hanken-grotesk'
import './styles.css'
import { useSiteScroll } from '../_shared'

/*
 * SPECIMEN: FRAUNCES. A type specimen for an open-source variable font (Fraunces, by Undercase Type, SIL Open Font
 * License). World 19 (Type Specimen). Signature: you can drive the real axes. Weight, optical size, softness and "wonk"
 * change the actual letterforms through font-variation-settings; the page also gives a character set to inspect, a size
 * ladder and a text tester where you can type your own words. Nothing here is an image of type: it is the type.
 */

const SET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789&?!@%$£€(){}[]/\\;:,.’“”—'.split('')
const LADDER = [12, 16, 20, 28, 40, 56, 80]

export default function SpecimenSite() {
  const root = useRef<HTMLDivElement>(null)
  const [wght, setWght] = useState(560)
  const [opsz, setOpsz] = useState(72)
  const [soft, setSoft] = useState(50)
  const [wonk, setWonk] = useState(1)
  const [italic, setItalic] = useState(false)
  const [glyph, setGlyph] = useState('g')
  const [text, setText] = useState('Sphinx of black quartz, judge my vow.')
  const [size, setSize] = useState(34)
  const [lead, setLead] = useState(1.3)

  useSiteScroll(root, { smooth: false })

  const vs = `'wght' ${wght}, 'opsz' ${opsz}, 'SOFT' ${soft}, 'WONK' ${wonk}`
  const style = { fontVariationSettings: vs, fontStyle: italic ? 'italic' : 'normal' } as const

  return (
    <div className="site-specimen" ref={root}>
      <header className="top">
        <a href="#top" className="logo" style={{ fontVariationSettings: "'wght' 700, 'SOFT' 100, 'WONK' 1" }}>Fraunces</a>
        <nav aria-label="Sections"><a href="#axes">Axes</a><a href="#set">Characters</a><a href="#scale">Sizes</a><a href="#test">Try it</a></nav>
      </header>

      <main id="top">
        <section className="hero" aria-labelledby="h1">
          <p className="meta">Open-source variable serif · SIL Open Font License · by Undercase Type</p>
          <h1 id="h1" style={style} className="big">Fraunces</h1>
          <p className="blurb" style={{ fontVariationSettings: "'wght' 380, 'opsz' 18" }}>A display serif in the “Old Style soft-serif” tradition, with four axes you can set yourself: weight, optical size, softness and a little wonk.</p>
        </section>

        <section className="axes" id="axes" aria-labelledby="h2a">
          <div className="panel">
            <h2 id="h2a">Axes</h2>
            {[
              ['Weight', wght, setWght, 100, 900, 1, 'wght'],
              ['Optical size', opsz, setOpsz, 9, 144, 1, 'opsz'],
              ['Softness', soft, setSoft, 0, 100, 1, 'SOFT'],
            ].map(([l, v, set, min, max, step, tag]) => (
              <div className="ax" key={tag as string}>
                <label htmlFor={`ax-${tag}`}>{l as string} <code>{tag as string}</code> <b>{v as number}</b></label>
                <input id={`ax-${tag}`} type="range" min={min as number} max={max as number} step={step as number} value={v as number} onChange={(e) => (set as (n: number) => void)(Number(e.target.value))} aria-valuetext={`${l as string} ${v as number}`} />
              </div>
            ))}
            <div className="tog">
              <button role="switch" aria-checked={wonk === 1} onClick={() => setWonk(wonk ? 0 : 1)}>Wonk <b>{wonk ? 'On' : 'Off'}</b></button>
              <button role="switch" aria-checked={italic} onClick={() => setItalic(!italic)}>Italic <b>{italic ? 'On' : 'Off'}</b></button>
            </div>
            <pre className="css" tabIndex={0} aria-label="CSS for these settings">{`font-family: 'Fraunces Variable';\nfont-variation-settings: ${vs};${italic ? '\nfont-style: italic;' : ''}`}</pre>
          </div>
          <div className="stage" aria-live="off">
            <p className="glyph" style={style} aria-hidden>{glyph}</p>
            <p className="word" style={style}>Hamburgefonstiv</p>
          </div>
        </section>

        <section className="set" id="set" aria-labelledby="h2s">
          <h2 id="h2s">Characters</h2>
          <p className="hint">Choose one to see it large above. Letters, figures and the punctuation worth checking.</p>
          <div className="grid" role="group" aria-label="Characters">
            {SET.map((c, i) => (
              <button key={i} onClick={() => setGlyph(c)} aria-pressed={glyph === c} aria-label={`Show ${c}`} style={style}>{c}</button>
            ))}
          </div>
        </section>

        <section className="scale" id="scale" aria-labelledby="h2c">
          <h2 id="h2c">Sizes</h2>
          <p className="hint">Optical size adjusts automatically with the font size when <code>font-optical-sizing: auto</code>. Here it follows your slider instead, so you can see the difference.</p>
          <ul>
            {LADDER.map((s) => (
              <li key={s}>
                <span className="px">{s}px</span>
                <span style={{ ...style, fontSize: s, lineHeight: 1.1 }}>Quick brown foxes jump</span>
              </li>
            ))}
          </ul>
        </section>

        <section className="test" id="test" aria-labelledby="h2t">
          <h2 id="h2t">Try your own words</h2>
          <label htmlFor="tx" className="sr-only">Your text</label>
          <textarea id="tx" value={text} onChange={(e) => setText(e.target.value)} rows={3} style={{ ...style, fontSize: size, lineHeight: lead }} />
          <div className="ctl">
            <label htmlFor="sz">Size <b>{size}px</b></label>
            <input id="sz" type="range" min={14} max={96} value={size} onChange={(e) => setSize(Number(e.target.value))} />
            <label htmlFor="ld">Line height <b>{lead.toFixed(2)}</b></label>
            <input id="ld" type="range" min={1} max={2} step={0.05} value={lead} onChange={(e) => setLead(Number(e.target.value))} />
          </div>
        </section>
      </main>
      <footer className="foot">Fraunces is a free font under the SIL Open Font License. This page is an independent specimen made for UI Lab; the typeface belongs to its designers.</footer>
    </div>
  )
}


// ===== src/patterns/sites/specimen/styles.css =====
.site-specimen { position: relative; min-height: 100svh; overflow-x: clip; }
.site-specimen {
  --paper: #fcfbf7;
  --ink: #17140f;
  --muted: #5c564a;
  --red: #c8371b;
  --rule: #d9d3c2;
  --serif: 'Fraunces Variable', Georgia, serif;
  --sans: 'Hanken Grotesk Variable', system-ui, sans-serif;
}
.site-specimen * { box-sizing: border-box; margin: 0; padding: 0; }
.site-specimen, .site-specimen { background: var(--paper); color: var(--ink); font-family: var(--serif); -webkit-font-smoothing: antialiased; line-height: 1.5; }
.site-specimen a { color: inherit; }
.site-specimen button, .site-specimen input, .site-specimen textarea { font: inherit; color: inherit; }
.site-specimen button { cursor: pointer; }
.site-specimen :focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.site-specimen .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-specimen code { font: 500 0.85em ui-monospace, Consolas, monospace; background: #efeadb; padding: 1px 6px; border-radius: 4px; }
.site-specimen h2 { font: 700 13px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); }
.site-specimen .top { display: flex; align-items: center; justify-content: space-between; padding: 12px clamp(16px, 4vw, 48px); position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 94%, transparent); border-bottom: 1px solid var(--rule); }
.site-specimen .logo { font-size: 26px; text-decoration: none; }
.site-specimen .top nav { display: flex; gap: 2px; font: 600 14px var(--sans); }
.site-specimen .top nav a { display: grid; place-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; border-radius: 8px; }
.site-specimen .top nav a:hover { background: #efeadb; }
.site-specimen .hero { padding: clamp(32px, 6vw, 88px) clamp(16px, 4vw, 48px) clamp(20px, 3vw, 40px); }
.site-specimen .meta { font: 600 13px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.site-specimen .big { margin-top: 10px; font-size: clamp(88px, 21vw, 300px); line-height: 0.9; letter-spacing: -0.03em; font-weight: 400; }
.site-specimen .blurb { margin-top: 20px; max-width: 44ch; font-size: 22px; line-height: 1.45; color: #3b372e; }
.site-specimen .axes { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 64px); padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 48px); border-top: 1px solid var(--rule); align-items: start; }
.site-specimen .panel { position: sticky; top: 76px; }
.site-specimen .ax { margin-top: 14px; }
.site-specimen .ax label, .site-specimen .ctl label { display: flex; justify-content: space-between; gap: 8px; font: 600 14px var(--sans); }
.site-specimen .ax input, .site-specimen .ctl input { width: 100%; height: 44px; accent-color: var(--red); }
.site-specimen .tog { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.site-specimen .tog button { min-height: 44px; padding: 0 16px; background: transparent; border: 1.5px solid var(--ink); border-radius: 999px; font: 600 14px var(--sans); }
.site-specimen .tog button[aria-checked='true'] { background: var(--ink); color: var(--paper); }
.site-specimen .css { margin-top: 16px; padding: 12px 14px; background: #1c1a15; color: #f3efe2; border-radius: 8px; overflow-x: auto; font: 500 12.5px/1.55 ui-monospace, Consolas, monospace; white-space: pre-wrap; }
.site-specimen .stage { display: grid; gap: 8px; align-content: start; }
.site-specimen .glyph { font-size: clamp(160px, 28vw, 420px); line-height: 1.2; text-align: center; border: 1.5px solid var(--ink); border-radius: 12px; padding: 16px 0 28px; background: #fff; overflow: hidden; }
.site-specimen .word { font-size: clamp(34px, 6vw, 72px); line-height: 1.1; overflow-wrap: anywhere; }
.site-specimen .set, .site-specimen .scale, .site-specimen .test { padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 48px); border-top: 1px solid var(--rule); }
.site-specimen .hint { margin-top: 8px; max-width: 62ch; font: 500 16px/1.5 var(--sans); color: var(--muted); }
.site-specimen .grid { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.site-specimen .grid button { aspect-ratio: 1; min-height: 52px; background: #fff; border: 1.5px solid var(--rule); border-radius: 8px; font-size: 30px; line-height: 1; }
.site-specimen .grid button:hover { border-color: var(--ink); }
.site-specimen .grid button[aria-pressed='true'] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.site-specimen .scale ul { margin-top: 18px; list-style: none; }
.site-specimen .scale li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.site-specimen .scale .px { font: 600 13px var(--sans); color: var(--muted); }
.site-specimen .scale li span:last-child { overflow-wrap: anywhere; }
.site-specimen .test textarea { margin-top: 14px; width: 100%; padding: 14px 16px; background: #fff; border: 1.5px solid var(--ink); border-radius: 12px; resize: vertical; min-height: 6em; }
.site-specimen .ctl { margin-top: 14px; display: grid; gap: 4px; max-width: 520px; }
.site-specimen .foot { padding: 28px clamp(16px, 4vw, 48px) 56px; border-top: 1px solid var(--rule); font: 500 14px/1.6 var(--sans); color: var(--muted); max-width: 80ch; }
@media (max-width: 860px) {
.site-specimen .axes { grid-template-columns: minmax(0, 1fr); }
.site-specimen .panel { position: static; }
.site-specimen .top nav a:nth-child(n + 3) { display: none; }
}
```


## Helper it imports: `src/patterns/sites/_shared.ts`

```ts
import { useEffect, type RefObject } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import Lenis from 'lenis'

/* Helpers shared by the whole-site demos in this folder. They are full pages, so they scroll the window,
   and they must coexist with UI Lab's own hash router and clean up completely when you leave. */

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/**
 * Smooth scroll (Lenis, driven by GSAP's ticker so ScrollTrigger stays in sync) plus in-page anchor links.
 * Anchor clicks are handled here instead of by the browser: UI Lab's router lives in the URL hash,
 * so a real `#section` navigation would be read as a route change.
 * Everything is torn down on unmount.
 */
export function useSiteScroll(root: RefObject<HTMLElement | null>, { smooth = true, lerp = 0.1 } = {}) {
  useEffect(() => {
    const el = root.current
    if (!el) return
    let lenis: Lenis | null = null
    let tick: ((t: number) => void) | null = null
    if (smooth && !reducedMotion()) {
      lenis = new Lenis({ lerp })
      lenis.on('scroll', ScrollTrigger.update)
      tick = (t: number) => lenis!.raf(t * 1000)
      gsap.ticker.add(tick)
      gsap.ticker.lagSmoothing(0)
    }
    const onClick = (e: MouseEvent) => {
      const a = (e.target as HTMLElement).closest<HTMLAnchorElement>('a[href^="#"]')
      if (!a || !el.contains(a)) return
      const id = a.getAttribute('href')!.slice(1)
      if (id.startsWith('/')) return // a UI Lab route, let it through
      e.preventDefault()
      const target = id ? el.querySelector<HTMLElement>(`#${CSS.escape(id)}`) : null
      if (!target) return
      if (lenis) lenis.scrollTo(target)
      else target.scrollIntoView({ behavior: 'smooth' })
    }
    el.addEventListener('click', onClick)
    return () => {
      el.removeEventListener('click', onClick)
      if (tick) gsap.ticker.remove(tick)
      gsap.ticker.lagSmoothing(500, 33) // GSAP's default
      lenis?.destroy()
      ScrollTrigger.getAll().forEach((t) => t.kill())
    }
  }, [root, smooth, lerp])
}
```

# Site: PHOSPHOR ARCADE (CRT cabinet with a playable game)
> A CRT arcade cabinet in the browser with a game you can really play: a canvas Snake on a fixed timestep with arrow keys, WASD and on-screen buttons, under phosphor glow, scanlines and a gentle flicker. The effect is cosmetic; scores and instructions are plain text.
- **Category:** Sites
- **Slug:** site-arcade
- **Tags:** site, full page, niche world, crt, retro, arcade, canvas, game, snake, scanlines, experience
- **Dependencies:** @fontsource/vt323, @fontsource/ibm-plex-mono, sites/_shared.ts
- **Live demo:** https://ui-lab-weld.vercel.app/#/site-arcade
- **Raw source:** https://ui-lab-weld.vercel.app/raw/sites/arcade/index.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/sites/arcade/index.tsx
- **Raw files:** https://ui-lab-weld.vercel.app/raw/sites/arcade/index.tsx, https://ui-lab-weld.vercel.app/raw/sites/arcade/snake.ts, https://ui-lab-weld.vercel.app/raw/sites/arcade/styles.css

## When to use
- Games, retro and developer brands that want the CRT look without making content unreadable
- Reference for a pure game-engine module with tests, a canvas loop, scanlines and flicker in CSS, and a leaderboard form

## Accessibility

The game is optional and announced as such; controls work with arrow keys, WASD and on-screen buttons with 64px targets; score and game-over are text and a status message; the leaderboard is a real table; flicker is off under reduced motion and the screen effect never covers text with low contrast.


## Source
Files: `src/patterns/sites/arcade/index.tsx`, `src/patterns/sites/arcade/snake.ts`, `src/patterns/sites/arcade/styles.css`
```tsx
// ===== src/patterns/sites/arcade/index.tsx =====
import { useCallback, useEffect, useRef, useState } from 'react'
import '@fontsource/vt323/400.css'
import '@fontsource/ibm-plex-mono/400.css'
import '@fontsource/ibm-plex-mono/500.css'
import './styles.css'
import { useSiteScroll } from '../_shared'
import { COLS, ROWS, newGame, step, turn, type Dir, type State } from './snake'

/*
 * PHOSPHOR ARCADE: a cabinet in the browser with a game you can really play. World 13 (CRT Terminal).
 * Signature: the screen is alive. A canvas Snake runs on a fixed timestep with arrow keys, WASD or on-screen buttons,
 * under a phosphor glow, scanlines and a gentle flicker (all CSS, all off for reduced motion). The effect is cosmetic: the
 * instructions, the score and the leaderboard are plain text, and the game is optional.
 */

const CELL = 24
const SCORES: [string, number][] = [['MIRA', 420], ['DEV', 310], ['ANI', 250], ['KOFI', 180], ['SAM', 90]]

export default function ArcadeSite() {
  const root = useRef<HTMLDivElement>(null)
  const cv = useRef<HTMLCanvasElement>(null)
  const game = useRef<State>(newGame())
  const dir = useRef<Dir>('right')
  const last = useRef<Dir>('right')
  const [score, setScore] = useState(0)
  const [status, setStatus] = useState<'idle' | 'playing' | 'over'>('idle')
  const [best, setBest] = useState(0)
  const [name, setName] = useState('')
  const [saved, setSaved] = useState(false)
  const [board, setBoard] = useState(SCORES)

  useSiteScroll(root, { smooth: false })

  const draw = useCallback(() => {
    const c = cv.current
    if (!c) return
    const g = c.getContext('2d')!
    const s = game.current
    g.fillStyle = '#04100a'
    g.fillRect(0, 0, c.width, c.height)
    g.strokeStyle = 'rgba(80,255,150,0.06)'
    for (let x = 0; x <= COLS; x++) { g.beginPath(); g.moveTo(x * CELL, 0); g.lineTo(x * CELL, ROWS * CELL); g.stroke() }
    for (let y = 0; y <= ROWS; y++) { g.beginPath(); g.moveTo(0, y * CELL); g.lineTo(COLS * CELL, y * CELL); g.stroke() }
    g.fillStyle = '#ffcf5a'
    g.fillRect(s.food[0] * CELL + 6, s.food[1] * CELL + 6, CELL - 12, CELL - 12)
    s.snake.forEach(([x, y], i) => {
      g.fillStyle = i === 0 ? '#c7ffd8' : '#4dff91'
      g.fillRect(x * CELL + 2, y * CELL + 2, CELL - 4, CELL - 4)
    })
  }, [])

  const start = useCallback(() => {
    game.current = newGame()
    dir.current = 'right'
    last.current = 'right'
    setScore(0)
    setSaved(false)
    setStatus('playing')
    draw()
  }, [draw])

  const want = useCallback((d: Dir) => {
    dir.current = turn(game.current, d, last.current)
  }, [])

  useEffect(() => {
    draw()
  }, [draw])

  useEffect(() => {
    if (status !== 'playing') return
    const speed = () => Math.max(70, 150 - game.current.score * 0.8)
    let t: number
    const tick = () => {
      const next = step(game.current, dir.current)
      last.current = dir.current
      game.current = next
      setScore(next.score)
      draw()
      if (!next.alive) {
        setStatus('over')
        setBest((b) => Math.max(b, next.score))
        return
      }
      t = window.setTimeout(tick, speed())
    }
    t = window.setTimeout(tick, speed())
    return () => window.clearTimeout(t)
  }, [status, draw])

  useEffect(() => {
    const keys: Record<string, Dir> = { ArrowUp: 'up', ArrowDown: 'down', ArrowLeft: 'left', ArrowRight: 'right', w: 'up', s: 'down', a: 'left', d: 'right' }
    const key = (e: KeyboardEvent) => {
      const d = keys[e.key]
      if (!d || status !== 'playing') return
      e.preventDefault()
      want(d)
    }
    addEventListener('keydown', key)
    return () => removeEventListener('keydown', key)
  }, [status, want])

  const qualifies = status === 'over' && score > 0 && (board.length < 5 || score > board[board.length - 1][1])

  return (
    <div className="site-arcade" ref={root}>
      <header className="top">
        <a href="#top" className="logo">PHOSPHOR ARCADE</a>
        <nav aria-label="Sections"><a href="#play">Play</a><a href="#scores">High scores</a><a href="#about">About</a></nav>
      </header>

      <main id="top">
        <section className="hero" aria-labelledby="h1">
          <p className="tag">Insert coin</p>
          <h1 id="h1">One cabinet.<br />One game.<br />Still the best.</h1>
          <p className="lede">A tiny arcade in your browser. Eat the amber squares, avoid the walls and yourself. The glow is for atmosphere; every number on this page is also plain text.</p>
          <a className="cta" href="#play">Play now</a>
        </section>

        <section className="cab" id="play" aria-labelledby="h2p">
          <h2 id="h2p" className="sr-only">Play Snake</h2>
          <div className="bezel">
            <div className="screen">
              <canvas ref={cv} width={COLS * CELL} height={ROWS * CELL} role="img" aria-label={`Snake game. Score ${score}. ${status === 'playing' ? 'Playing.' : status === 'over' ? 'Game over.' : 'Press Start.'}`} />
              <div className="hud" aria-hidden><span>SCORE {String(score).padStart(4, '0')}</span><span>BEST {String(best).padStart(4, '0')}</span></div>
              {status !== 'playing' && (
                <div className="overlay">
                  <p>{status === 'over' ? 'GAME OVER' : 'READY'}</p>
                  <button onClick={start}>{status === 'over' ? 'Play again' : 'Start'}</button>
                </div>
              )}
              <div className="scan" aria-hidden />
            </div>
          </div>
          <div className="pad" role="group" aria-label="Direction buttons">
            <button aria-label="Up" onClick={() => want('up')} className="u">▲</button>
            <button aria-label="Left" onClick={() => want('left')} className="l">◀</button>
            <button aria-label="Right" onClick={() => want('right')} className="r">▶</button>
            <button aria-label="Down" onClick={() => want('down')} className="d">▼</button>
          </div>
          <p className="keys">Keys: arrow keys or W A S D. Score is {score}. {status === 'over' ? 'Game over.' : ''}</p>
          <p className="sr-only" role="status">{status === 'over' ? `Game over. Final score ${score}.` : ''}</p>
          {qualifies && !saved && (
            <form
              className="entry"
              onSubmit={(e) => {
                e.preventDefault()
                if (name.trim().length < 1) return
                setBoard([...board, [name.trim().toUpperCase().slice(0, 6), score] as [string, number]].sort((a, b) => b[1] - a[1]).slice(0, 5))
                setSaved(true)
              }}
            >
              <label htmlFor="nm">New high score! Your initials</label>
              <div className="row">
                <input id="nm" value={name} maxLength={6} onChange={(e) => setName(e.target.value)} autoComplete="off" />
                <button>Save</button>
              </div>
            </form>
          )}
        </section>

        <section className="scores" id="scores" aria-labelledby="h2s">
          <h2 id="h2s">High scores</h2>
          <table>
            <caption className="sr-only">Top five scores</caption>
            <thead><tr><th scope="col">Rank</th><th scope="col">Player</th><th scope="col" className="n">Score</th></tr></thead>
            <tbody>{board.map(([n, s], i) => <tr key={n + s + i}><td>{i + 1}</td><th scope="row">{n}</th><td className="n">{s}</td></tr>)}</tbody>
          </table>
        </section>

        <section className="about" id="about" aria-labelledby="h2a">
          <h2 id="h2a">About the screen</h2>
          <p>The look is made of three cheap effects: a glow around bright pixels, a fine pattern of scanlines, and a slow flicker. All three are CSS. If your system asks for reduced motion the flicker is switched off, and the scanlines stay because they do not move.</p>
          <p>This is a fictional arcade. Nothing is saved to a server; the leaderboard resets when you reload.</p>
        </section>
      </main>
      <footer className="foot">Phosphor Arcade is a demonstration for UI Lab.</footer>
    </div>
  )
}


// ===== src/patterns/sites/arcade/snake.ts =====
/* A tiny, testable Snake: pure state and a step function. The canvas drawing lives in the component. */

export const COLS = 20
export const ROWS = 15

export type Dir = 'up' | 'down' | 'left' | 'right'
export type Cell = [number, number]
export type State = { snake: Cell[]; dir: Dir; food: Cell; alive: boolean; score: number }

const DELTA: Record<Dir, Cell> = { up: [0, -1], down: [0, 1], left: [-1, 0], right: [1, 0] }
const OPPOSITE: Record<Dir, Dir> = { up: 'down', down: 'up', left: 'right', right: 'left' }

export function newGame(rand: () => number = Math.random): State {
  const snake: Cell[] = [[6, 7], [5, 7], [4, 7]]
  return { snake, dir: 'right', food: place(snake, rand), alive: true, score: 0 }
}

function place(snake: Cell[], rand: () => number): Cell {
  for (let i = 0; i < 200; i++) {
    const c: Cell = [Math.floor(rand() * COLS), Math.floor(rand() * ROWS)]
    if (!snake.some(([x, y]) => x === c[0] && y === c[1])) return c
  }
  return [0, 0]
}

export function turn(s: State, want: Dir, last: Dir): Dir {
  // Never reverse into yourself, judged against the direction actually moved last step.
  return OPPOSITE[want] === last ? s.dir : want
}

export function step(s: State, dir: Dir, rand: () => number = Math.random): State {
  if (!s.alive) return s
  const [dx, dy] = DELTA[dir]
  const head: Cell = [s.snake[0][0] + dx, s.snake[0][1] + dy]
  const hitWall = head[0] < 0 || head[0] >= COLS || head[1] < 0 || head[1] >= ROWS
  const eats = head[0] === s.food[0] && head[1] === s.food[1]
  const body = eats ? s.snake : s.snake.slice(0, -1)
  const hitSelf = body.some(([x, y]) => x === head[0] && y === head[1])
  if (hitWall || hitSelf) return { ...s, dir, alive: false }
  const snake = [head, ...body]
  return { snake, dir, food: eats ? place(snake, rand) : s.food, alive: true, score: s.score + (eats ? 10 : 0) }
}


// ===== src/patterns/sites/arcade/styles.css =====
.site-arcade { position: relative; min-height: 100svh; overflow-x: clip; }
.site-arcade {
  --bg: #07100b;
  --green: #4dff91;
  --amber: #ffcf5a;
  --dim: #6fb98a;
  --ink: #d6ffe4;
  --crt: 'VT323', 'IBM Plex Mono', monospace;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
.site-arcade * { box-sizing: border-box; margin: 0; padding: 0; }
.site-arcade, .site-arcade { background: var(--bg); color: var(--ink); font-family: var(--mono); -webkit-font-smoothing: antialiased; line-height: 1.55; min-height: 100svh; }
.site-arcade a { color: inherit; }
.site-arcade button, .site-arcade input { font: inherit; color: inherit; }
.site-arcade button { cursor: pointer; }
.site-arcade :focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.site-arcade .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-arcade .top { display: flex; align-items: center; justify-content: space-between; padding: 12px clamp(16px, 4vw, 48px); position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid #1d3a2a; }
.site-arcade .logo { font: 400 28px var(--crt); letter-spacing: 0.08em; text-decoration: none; color: var(--green); text-shadow: 0 0 10px rgba(77, 255, 145, 0.5); }
.site-arcade .top nav { display: flex; gap: 2px; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; }
.site-arcade .top nav a { display: grid; place-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; }
.site-arcade .top nav a:hover { color: var(--amber); }
.site-arcade .hero { padding: clamp(36px, 7vw, 100px) clamp(16px, 4vw, 48px) clamp(20px, 3vw, 40px); max-width: 900px; }
.site-arcade .tag { font: 400 22px var(--crt); letter-spacing: 0.2em; color: var(--amber); text-transform: uppercase; }
.site-arcade .hero h1 { margin-top: 12px; font: 400 clamp(54px, 10vw, 128px) / 0.92 var(--crt); color: var(--green); text-shadow: 0 0 18px rgba(77, 255, 145, 0.45); letter-spacing: 0.02em; }
.site-arcade .lede { margin-top: 22px; max-width: 48ch; font-size: 16px; color: #b9e6ca; }
.site-arcade .cta { display: inline-grid; place-items: center; min-height: 52px; margin-top: 24px; padding: 0 28px; background: var(--amber); color: #1a1405; font: 400 26px var(--crt); letter-spacing: 0.12em; text-decoration: none; text-transform: uppercase; }
.site-arcade .cta:hover { background: #ffe39a; }
.site-arcade .cab { padding: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 48px); display: grid; justify-items: center; gap: 16px; }
.site-arcade .bezel { width: min(100%, 560px); padding: 18px; border-radius: 28px; background: linear-gradient(180deg, #25282a, #121415); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.08); }
.site-arcade .screen { position: relative; overflow: hidden; border-radius: 18px / 22px; background: #04100a; box-shadow: inset 0 0 60px rgba(77, 255, 145, 0.18), 0 0 40px rgba(77, 255, 145, 0.15); }
.site-arcade .screen canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; filter: drop-shadow(0 0 4px rgba(77, 255, 145, 0.7)); }
.site-arcade .hud { position: absolute; top: 6px; left: 10px; right: 10px; display: flex; justify-content: space-between; font: 400 20px var(--crt); letter-spacing: 0.1em; color: var(--green); text-shadow: 0 0 8px rgba(77, 255, 145, 0.7); }
.site-arcade .overlay { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; background: rgba(4, 16, 10, 0.78); }
.site-arcade .overlay p { font: 400 54px var(--crt); letter-spacing: 0.12em; color: var(--amber); text-shadow: 0 0 14px rgba(255, 207, 90, 0.6); }
.site-arcade .overlay button { min-height: 52px; padding: 0 28px; background: transparent; border: 2px solid var(--green); color: var(--green); font: 400 26px var(--crt); letter-spacing: 0.12em; text-transform: uppercase; }
.site-arcade .overlay button:hover { background: var(--green); color: #04100a; }
.site-arcade .scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.45) 100%); mix-blend-mode: multiply; }
.site-arcade .pad { display: grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(2, 64px); gap: 6px; }
.site-arcade .pad button { background: #1b2a21; border: 2px solid #2f4b3a; border-radius: 12px; font-size: 22px; color: var(--green); }
.site-arcade .pad button:active { background: var(--green); color: #04100a; }
.site-arcade .pad .u { grid-column: 2; grid-row: 1; }
.site-arcade .pad .l { grid-column: 1; grid-row: 2; }
.site-arcade .pad .d { grid-column: 2; grid-row: 2; }
.site-arcade .pad .r { grid-column: 3; grid-row: 2; }
.site-arcade .keys { font-size: 14px; color: var(--dim); }
.site-arcade .entry { width: min(100%, 360px); display: grid; gap: 6px; }
.site-arcade .entry label { font-size: 14px; color: var(--amber); }
.site-arcade .row { display: flex; gap: 8px; }
.site-arcade .row input { flex: 1; min-height: 48px; padding: 0 12px; background: #04100a; border: 2px solid var(--green); font: 400 26px var(--crt); letter-spacing: 0.2em; text-transform: uppercase; }
.site-arcade .row button { min-height: 48px; padding: 0 20px; background: var(--green); color: #04100a; border: 0; font: 400 24px var(--crt); letter-spacing: 0.1em; }
.site-arcade .scores, .site-arcade .about { padding: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 48px); border-top: 1px solid #1d3a2a; max-width: 760px; }
.site-arcade .scores h2, .site-arcade .about h2 { font: 400 40px var(--crt); letter-spacing: 0.08em; color: var(--amber); }
.site-arcade .scores table { margin-top: 10px; width: 100%; border-collapse: collapse; font-size: 18px; font-variant-numeric: tabular-nums; }
.site-arcade .scores th, .site-arcade .scores td { padding: 8px 12px 8px 0; text-align: left; border-bottom: 1px dashed #2f4b3a; font-weight: 400; }
.site-arcade .scores thead th { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.site-arcade .scores .n { text-align: right; }
.site-arcade .about p { margin-top: 12px; font-size: 16px; color: #b9e6ca; }
.site-arcade .foot { padding: 24px clamp(16px, 4vw, 48px) 48px; border-top: 1px solid #1d3a2a; font-size: 13px; color: var(--dim); }
@media (prefers-reduced-motion: no-preference) {
.site-arcade .screen { animation: arc-arc-flicker 5s steps(1, end) infinite; }
}
@keyframes arc-arc-flicker { 0%, 100% { opacity: 1; } 91% { opacity: 0.96; } 93% { opacity: 1; } 96% { opacity: 0.97; } }
@media (max-width: 640px) {
.site-arcade .top nav a:first-child { display: none; }
.site-arcade .pad { grid-template-columns: repeat(3, 72px); grid-template-rows: repeat(2, 72px); }
}
```


## Helper it imports: `src/patterns/sites/_shared.ts`

```ts
import { useEffect, type RefObject } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import Lenis from 'lenis'

/* Helpers shared by the whole-site demos in this folder. They are full pages, so they scroll the window,
   and they must coexist with UI Lab's own hash router and clean up completely when you leave. */

export const reducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

/**
 * Smooth scroll (Lenis, driven by GSAP's ticker so ScrollTrigger stays in sync) plus in-page anchor links.
 * Anchor clicks are handled here instead of by the browser: UI Lab's router lives in the URL hash,
 * so a real `#section` navigation would be read as a route change.
 * Everything is torn down on unmount.
 */
export function useSiteScroll(root: RefObject<HTMLElement | null>, { smooth = true, lerp = 0.1 } = {}) {
  useEffect(() => {
    const el = root.current
    if (!el) return
    let lenis: Lenis | null = null
    let tick: ((t: number) => void) | null = null
    if (smooth && !reducedMotion()) {
      lenis = new Lenis({ lerp })
      lenis.on('scroll', ScrollTrigger.update)
      tick = (t: number) => lenis!.raf(t * 1000)
      gsap.ticker.add(tick)
      gsap.ticker.lagSmoothing(0)
    }
    const onClick = (e: MouseEvent) => {
      const a = (e.target as HTMLElement).closest<HTMLAnchorElement>('a[href^="#"]')
      if (!a || !el.contains(a)) return
      const id = a.getAttribute('href')!.slice(1)
      if (id.startsWith('/')) return // a UI Lab route, let it through
      e.preventDefault()
      const target = id ? el.querySelector<HTMLElement>(`#${CSS.escape(id)}`) : null
      if (!target) return
      if (lenis) lenis.scrollTo(target)
      else target.scrollIntoView({ behavior: 'smooth' })
    }
    el.addEventListener('click', onClick)
    return () => {
      el.removeEventListener('click', onClick)
      if (tick) gsap.ticker.remove(tick)
      gsap.ticker.lagSmoothing(500, 33) // GSAP's default
      lenis?.destroy()
      ScrollTrigger.getAll().forEach((t) => t.kill())
    }
  }, [root, smooth, lerp])
}
```

# Drive-the-site world
> Navigation as play: a top-down car you drive with the keys (or by holding the pointer) around zones that open sections.
- **Category:** Signature moves
- **Slug:** move-drive-world
- **Tags:** signature move, game, canvas, keyboard, physics, portfolio, navigation
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-drive-world
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/DriveWorld.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/DriveWorld.tsx
- **Reference:** [Studied: Bruno Simon](https://bruno-simon.com)

## When to use
- A portfolio or studio site where exploring is the point
- Teaching how a game loop, input and collision fit in one canvas

## Accessibility

Focusable application region with an aria-label that explains the controls; pointer steering is an alternative to the keyboard; the zone name is announced in a live region. Not a replacement for real navigation.


## Source
`src/patterns/moves/DriveWorld.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'

/*
 * Signature move (Bruno Simon): navigation as play. A top-down car you drive with the arrow keys or WASD
 * (or by holding the pointer down: it steers toward the pointer). Crates can be pushed around; driving
 * onto a zone "opens" that section. 2D canvas, no libraries. Logical world is 1000 x 560, scaled to fit.
 */

const W = 1000
const H = 560
type Crate = { x: number; y: number; vx: number; vy: number }
const ZONES = [
  { label: 'Work', x: 200, y: 160 },
  { label: 'About', x: 780, y: 170 },
  { label: 'Contact', x: 500, y: 440 },
]

export default function DriveWorld() {
  const cv = useRef<HTMLCanvasElement>(null)
  const [zone, setZone] = useState<string | null>(null)

  useEffect(() => {
    const canvas = cv.current!
    const ctx = canvas.getContext('2d')!
    const css = getComputedStyle(canvas)
    const color = (v: string, fb: string) => css.getPropertyValue(v).trim() || fb
    const fg = color('--fg', '#eee'), accent = color('--accent', '#f90'), border = color('--border', '#444'), surface = color('--surface', '#111')

    const keys = new Set<string>()
    const car = { x: 500, y: 300, a: -Math.PI / 2, v: 0 }
    const crates: Crate[] = Array.from({ length: 9 }, (_, i) => ({ x: 120 + ((i * 97) % 760), y: 90 + ((i * 163) % 380), vx: 0, vy: 0 }))
    let pointer: { x: number; y: number } | null = null
    let current: string | null = null
    let last = performance.now()
    let raf = 0

    const fit = () => {
      const dpr = Math.min(window.devicePixelRatio || 1, 2)
      const w = canvas.clientWidth
      canvas.width = Math.round(w * dpr)
      canvas.height = Math.round((w * H * dpr) / W)
    }
    const ro = new ResizeObserver(fit)
    ro.observe(canvas)
    fit()

    const toWorld = (e: PointerEvent) => {
      const r = canvas.getBoundingClientRect()
      return { x: ((e.clientX - r.left) / r.width) * W, y: ((e.clientY - r.top) / r.height) * H }
    }
    const down = (e: PointerEvent) => {
      pointer = toWorld(e)
      canvas.setPointerCapture(e.pointerId)
    }
    const move = (e: PointerEvent) => {
      if (pointer) pointer = toWorld(e)
    }
    const up = () => (pointer = null)
    canvas.addEventListener('pointerdown', down)
    canvas.addEventListener('pointermove', move)
    canvas.addEventListener('pointerup', up)
    canvas.addEventListener('pointercancel', up)

    const step = (now: number) => {
      const dt = Math.min(0.033, (now - last) / 1000)
      last = now
      let steer = (keys.has('arrowright') || keys.has('d') ? 1 : 0) - (keys.has('arrowleft') || keys.has('a') ? 1 : 0)
      let gas = (keys.has('arrowup') || keys.has('w') ? 1 : 0) - (keys.has('arrowdown') || keys.has('s') ? 0.6 : 0)
      if (pointer) {
        const want = Math.atan2(pointer.y - car.y, pointer.x - car.x)
        let diff = want - car.a
        diff = Math.atan2(Math.sin(diff), Math.cos(diff))
        steer = Math.max(-1, Math.min(1, diff * 2))
        gas = Math.hypot(pointer.x - car.x, pointer.y - car.y) > 30 ? 1 : 0
      }
      car.v += gas * 520 * dt
      car.v *= Math.pow(0.35, dt)
      car.a += steer * 2.8 * dt * Math.min(1, Math.abs(car.v) / 120) * Math.sign(car.v || 1)
      car.x += Math.cos(car.a) * car.v * dt
      car.y += Math.sin(car.a) * car.v * dt
      if (car.x < 20 || car.x > W - 20) { car.x = Math.max(20, Math.min(W - 20, car.x)); car.v *= -0.3 }
      if (car.y < 20 || car.y > H - 20) { car.y = Math.max(20, Math.min(H - 20, car.y)); car.v *= -0.3 }

      for (const c of crates) {
        const dx = c.x - car.x, dy = c.y - car.y, d = Math.hypot(dx, dy)
        if (d < 34 && d > 0) {
          const push = (34 - d) * 9
          c.vx += (dx / d) * push + Math.cos(car.a) * car.v * 0.4
          c.vy += (dy / d) * push + Math.sin(car.a) * car.v * 0.4
        }
        c.x += c.vx * dt
        c.y += c.vy * dt
        c.vx *= Math.pow(0.05, dt)
        c.vy *= Math.pow(0.05, dt)
        c.x = Math.max(14, Math.min(W - 14, c.x))
        c.y = Math.max(14, Math.min(H - 14, c.y))
      }

      const inside = ZONES.find((z) => Math.hypot(z.x - car.x, z.y - car.y) < 70)?.label ?? null
      if (inside !== current) {
        current = inside
        setZone(inside)
      }

      const s = canvas.width / W
      ctx.setTransform(s, 0, 0, s, 0, 0)
      ctx.clearRect(0, 0, W, H)
      ctx.fillStyle = surface
      ctx.fillRect(0, 0, W, H)
      ctx.fillStyle = border
      for (let x = 20; x < W; x += 40) for (let y = 20; y < H; y += 40) ctx.fillRect(x, y, 2, 2)
      ctx.textAlign = 'center'
      ctx.font = '600 20px system-ui, sans-serif'
      for (const z of ZONES) {
        const on = z.label === current
        ctx.beginPath()
        ctx.arc(z.x, z.y, 70, 0, Math.PI * 2)
        ctx.fillStyle = on ? accent : 'transparent'
        ctx.globalAlpha = on ? 0.22 : 1
        ctx.fill()
        ctx.globalAlpha = 1
        ctx.strokeStyle = on ? accent : border
        ctx.lineWidth = 2
        ctx.setLineDash([6, 8])
        ctx.stroke()
        ctx.setLineDash([])
        ctx.fillStyle = on ? accent : fg
        ctx.fillText(z.label, z.x, z.y + 7)
      }
      ctx.fillStyle = fg
      ctx.globalAlpha = 0.55
      for (const c of crates) ctx.fillRect(c.x - 13, c.y - 13, 26, 26)
      ctx.globalAlpha = 1
      ctx.save()
      ctx.translate(car.x, car.y)
      ctx.rotate(car.a)
      ctx.fillStyle = accent
      ctx.beginPath()
      ctx.roundRect(-20, -11, 40, 22, 6)
      ctx.fill()
      ctx.fillStyle = surface
      ctx.fillRect(4, -8, 9, 16)
      ctx.restore()
      raf = requestAnimationFrame(step)
    }
    raf = requestAnimationFrame(step)

    const kd = (e: KeyboardEvent) => {
      const k = e.key.toLowerCase()
      if (['arrowup', 'arrowdown', 'arrowleft', 'arrowright', ' '].includes(k)) e.preventDefault()
      keys.add(k)
    }
    const ku = (e: KeyboardEvent) => keys.delete(e.key.toLowerCase())
    const wrap = canvas.parentElement!
    wrap.addEventListener('keydown', kd)
    wrap.addEventListener('keyup', ku)
    wrap.addEventListener('blur', () => keys.clear())
    return () => {
      cancelAnimationFrame(raf)
      ro.disconnect()
      wrap.removeEventListener('keydown', kd)
      wrap.removeEventListener('keyup', ku)
    }
  }, [])

  return (
    <div
      tabIndex={0}
      role="application"
      aria-label="Drive the car with the arrow keys or WASD, or hold the pointer down to steer toward it. Drive onto a circle to open a section."
      className="relative mx-auto w-full max-w-3xl overflow-hidden rounded-xl border border-border outline-offset-4"
    >
      <canvas ref={cv} className="block w-full touch-none" style={{ aspectRatio: `${W} / ${H}` }} />
      <p className="pointer-events-none absolute top-3 left-3 rounded-md bg-bg/70 px-2 py-1 font-mono text-[11px] text-fg-muted" aria-live="polite">
        {zone ? `Entered: ${zone}` : 'Arrow keys / WASD, or hold the pointer'}
      </p>
    </div>
  )
}
```

# Particle field that leans to the cursor
> Hundreds of depth-sorted particles that spring toward the pointer and settle back.
- **Category:** Signature moves
- **Slug:** move-particle-attractor
- **Tags:** signature move, particles, canvas, cursor, parallax, immersive
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-particle-attractor
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/ParticleAttractor.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/ParticleAttractor.tsx
- **Reference:** [Studied: Active Theory](https://activetheory.net)

## When to use
- Hero backgrounds that respond to the visitor
- An immersive intro that needs no assets

## Accessibility

Canvas is decorative (aria-hidden); the effect is purely pointer-driven and is a still frame under prefers-reduced-motion.


## Source
`src/patterns/moves/ParticleAttractor.tsx`
```tsx
import { useEffect, useRef } from 'react'

/*
 * Signature move (Active Theory): a field of particles with depth that leans toward the cursor and settles
 * back. Each particle has a home, a depth (z) that scales its size, alpha and parallax, and a spring.
 * 2D canvas, no libraries. Reduced motion: one still frame.
 */

export default function ParticleAttractor() {
  const ref = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    const canvas = ref.current!
    const ctx = canvas.getContext('2d')!
    const css = getComputedStyle(canvas)
    const accent = css.getPropertyValue('--accent').trim() || '#f90'
    const fg = css.getPropertyValue('--fg').trim() || '#eee'
    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
    const N = 700
    type P = { hx: number; hy: number; x: number; y: number; vx: number; vy: number; z: number }
    let ps: P[] = []
    let w = 0
    let h = 0
    const mouse = { x: -9999, y: -9999, active: false }
    let raf = 0

    const seed = () => {
      ps = Array.from({ length: N }, () => {
        const hx = Math.random() * w
        const hy = Math.random() * h
        return { hx, hy, x: hx, y: hy, vx: 0, vy: 0, z: Math.random() }
      })
    }
    const fit = () => {
      const dpr = Math.min(devicePixelRatio || 1, 2)
      w = canvas.clientWidth
      h = canvas.clientHeight
      canvas.width = w * dpr
      canvas.height = h * dpr
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
      seed()
    }
    const ro = new ResizeObserver(fit)
    ro.observe(canvas)
    fit()

    const draw = () => {
      ctx.clearRect(0, 0, w, h)
      for (const p of ps) {
        const par = (p.z - 0.5) * 18
        const tx = p.hx + (mouse.active ? ((mouse.x - w / 2) / w) * par * -1 : 0)
        const ty = p.hy + (mouse.active ? ((mouse.y - h / 2) / h) * par * -1 : 0)
        const dx = mouse.x - p.x
        const dy = mouse.y - p.y
        const d = Math.hypot(dx, dy)
        let ax = (tx - p.x) * 0.04
        let ay = (ty - p.y) * 0.04
        if (mouse.active && d < 170) {
          const pull = (1 - d / 170) * (0.6 + p.z)
          ax += (dx / (d || 1)) * pull * 1.4
          ay += (dy / (d || 1)) * pull * 1.4
        }
        p.vx = (p.vx + ax) * 0.86
        p.vy = (p.vy + ay) * 0.86
        p.x += p.vx
        p.y += p.vy
        ctx.globalAlpha = 0.25 + p.z * 0.7
        ctx.fillStyle = p.z > 0.8 ? accent : fg
        ctx.beginPath()
        ctx.arc(p.x, p.y, 0.6 + p.z * 1.9, 0, Math.PI * 2)
        ctx.fill()
      }
    }
    const loop = () => {
      draw()
      raf = requestAnimationFrame(loop)
    }
    if (reduced) draw()
    else raf = requestAnimationFrame(loop)

    const move = (e: PointerEvent) => {
      const r = canvas.getBoundingClientRect()
      mouse.x = e.clientX - r.left
      mouse.y = e.clientY - r.top
      mouse.active = true
    }
    const leave = () => {
      mouse.active = false
      mouse.x = mouse.y = -9999
    }
    canvas.addEventListener('pointermove', move)
    canvas.addEventListener('pointerleave', leave)
    return () => {
      cancelAnimationFrame(raf)
      ro.disconnect()
      canvas.removeEventListener('pointermove', move)
      canvas.removeEventListener('pointerleave', leave)
    }
  }, [])

  return (
    <div className="relative h-80 overflow-hidden rounded-xl border border-border bg-surface">
      <canvas ref={ref} className="absolute inset-0 h-full w-full" aria-hidden />
      <p className="pointer-events-none absolute bottom-3 left-4 font-mono text-[11px] text-fg-muted">Move the pointer through the field</p>
    </div>
  )
}
```

# Physics balls
> Verlet circles that fall, pile up and get shoved by the cursor; click to drop more.
- **Category:** Signature moves
- **Slug:** move-physics-balls
- **Tags:** signature move, physics, verlet, canvas, playful, cursor
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-physics-balls
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/PhysicsBalls.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/PhysicsBalls.tsx
- **Reference:** [Studied: Lusion](https://lusion.co)

## When to use
- Playful studio or product pages
- Showing a physics idea without a library

## Accessibility

Decorative canvas (aria-hidden); the pile is solved once and drawn still under reduced motion.


## Source
`src/patterns/moves/PhysicsBalls.tsx`
```tsx
import { useEffect, useRef } from 'react'

/*
 * Signature move (Lusion-style playful 3D studio): objects that fall, pile up and get shoved around by the
 * cursor. Verlet circles with gravity, wall and circle-circle constraints; click to drop another one.
 * 2D canvas, no physics library. Reduced motion: the pile is solved once and drawn still.
 */

type Ball = { x: number; y: number; px: number; py: number; r: number; hue: number }

export default function PhysicsBalls() {
  const ref = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    const canvas = ref.current!
    const ctx = canvas.getContext('2d')!
    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
    const accent = getComputedStyle(canvas).getPropertyValue('--accent').trim() || '#f90'
    let w = 0
    let h = 0
    const balls: Ball[] = []
    const mouse = { x: -999, y: -999, on: false }
    let raf = 0

    const add = (x: number, y: number) => {
      if (balls.length > 90) balls.shift()
      const r = 14 + Math.random() * 20
      balls.push({ x, y, px: x - (Math.random() - 0.5) * 4, py: y, r, hue: Math.random() })
    }
    const fit = () => {
      const dpr = Math.min(devicePixelRatio || 1, 2)
      w = canvas.clientWidth
      h = canvas.clientHeight
      canvas.width = w * dpr
      canvas.height = h * dpr
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
    }
    const ro = new ResizeObserver(fit)
    ro.observe(canvas)
    fit()
    for (let i = 0; i < 28; i++) add(w * 0.2 + Math.random() * w * 0.6, -Math.random() * 400)

    const simulate = (dt: number) => {
      for (const b of balls) {
        const vx = (b.x - b.px) * 0.995
        const vy = (b.y - b.py) * 0.995
        b.px = b.x
        b.py = b.y
        b.x += vx
        b.y += vy + 1400 * dt * dt
        if (mouse.on) {
          const dx = b.x - mouse.x, dy = b.y - mouse.y, d = Math.hypot(dx, dy)
          if (d < b.r + 46 && d > 0) {
            const f = (b.r + 46 - d) * 0.12
            b.x += (dx / d) * f
            b.y += (dy / d) * f
          }
        }
      }
      for (let it = 0; it < 3; it++) {
        for (const b of balls) {
          b.x = Math.max(b.r, Math.min(w - b.r, b.x))
          if (b.y > h - b.r) b.y = h - b.r
        }
        for (let i = 0; i < balls.length; i++)
          for (let j = i + 1; j < balls.length; j++) {
            const a = balls[i], b = balls[j]
            const dx = b.x - a.x, dy = b.y - a.y, d = Math.hypot(dx, dy), min = a.r + b.r
            if (d < min && d > 0) {
              const push = (min - d) / 2
              a.x -= (dx / d) * push
              a.y -= (dy / d) * push
              b.x += (dx / d) * push
              b.y += (dy / d) * push
            }
          }
      }
    }
    const draw = () => {
      ctx.clearRect(0, 0, w, h)
      for (const b of balls) {
        const g = ctx.createRadialGradient(b.x - b.r * 0.35, b.y - b.r * 0.4, 1, b.x, b.y, b.r)
        g.addColorStop(0, b.hue > 0.7 ? '#fff' : accent)
        g.addColorStop(1, b.hue > 0.7 ? '#9aa' : `hsl(${20 + b.hue * 30} 80% 38%)`)
        ctx.fillStyle = g
        ctx.beginPath()
        ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2)
        ctx.fill()
      }
    }
    if (reduced) {
      for (let i = 0; i < 240; i++) simulate(1 / 60)
      draw()
    } else {
      const loop = () => {
        simulate(1 / 60)
        draw()
        raf = requestAnimationFrame(loop)
      }
      raf = requestAnimationFrame(loop)
    }
    const move = (e: PointerEvent) => {
      const r = canvas.getBoundingClientRect()
      mouse.x = e.clientX - r.left
      mouse.y = e.clientY - r.top
      mouse.on = true
    }
    const leave = () => (mouse.on = false)
    const click = (e: PointerEvent) => {
      const r = canvas.getBoundingClientRect()
      add(e.clientX - r.left, e.clientY - r.top)
    }
    canvas.addEventListener('pointermove', move)
    canvas.addEventListener('pointerleave', leave)
    canvas.addEventListener('pointerdown', click)
    return () => {
      cancelAnimationFrame(raf)
      ro.disconnect()
      canvas.removeEventListener('pointermove', move)
      canvas.removeEventListener('pointerleave', leave)
      canvas.removeEventListener('pointerdown', click)
    }
  }, [])

  return (
    <div className="relative h-96 overflow-hidden rounded-xl border border-border bg-surface">
      <canvas ref={ref} className="absolute inset-0 h-full w-full touch-none" aria-hidden />
      <p className="pointer-events-none absolute top-3 left-4 font-mono text-[11px] text-fg-muted">Push them with the pointer. Click to drop one.</p>
    </div>
  )
}
```

# Scroll tunnel (scroll as camera)
> Frames stacked along the Z axis; scrolling flies the camera through them. Pure CSS 3D with one CSS variable per scroll.
- **Category:** Signature moves
- **Slug:** move-scroll-tunnel
- **Tags:** signature move, scroll, 3d, css, perspective, camera
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-scroll-tunnel
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/ScrollTunnel.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/ScrollTunnel.tsx
- **Reference:** [Studied: Igloo Inc.](https://igloo.inc)

## When to use
- Storytelling where progress is depth
- Replacing a list of sections with a path

## Accessibility

The scroller is focusable with a label; content is real text; the camera does not move under reduced motion.


## Source
`src/patterns/moves/ScrollTunnel.tsx`
```tsx
import { useEffect, useRef } from 'react'

/*
 * Signature move (Igloo): scroll is the camera. A stack of frames sits along the Z axis and scrolling flies
 * through them: the page is a path, not a list of sections. Pure CSS 3D (perspective + translateZ); one CSS
 * variable is written per scroll event, no React state. Reduced motion: the camera does not move.
 */

const FRAMES = ['Surface', 'Shelf', 'Crevasse', 'Cavern', 'Core', 'Depth', 'Trench']

export default function ScrollTunnel() {
  const scroller = useRef<HTMLDivElement>(null)
  const stage = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const sc = scroller.current!
    const st = stage.current!
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return
    let raf = 0
    const update = () => {
      raf = 0
      const p = sc.scrollTop / Math.max(1, sc.scrollHeight - sc.clientHeight)
      st.style.setProperty('--cam', String(p * (FRAMES.length - 1) * 360))
    }
    const onScroll = () => {
      if (!raf) raf = requestAnimationFrame(update)
    }
    sc.addEventListener('scroll', onScroll, { passive: true })
    update()
    return () => {
      sc.removeEventListener('scroll', onScroll)
      cancelAnimationFrame(raf)
    }
  }, [])

  return (
    <div ref={scroller} className="relative h-96 overflow-y-auto rounded-xl border border-border bg-surface" tabIndex={0} aria-label="Scroll to fly through the tunnel">
      <div className="h-[900px]">
        <div ref={stage} className="sticky top-0 h-96 overflow-hidden" style={{ perspective: '700px', perspectiveOrigin: '50% 45%', ['--cam' as string]: 0 }}>
          <div className="absolute inset-0" style={{ transformStyle: 'preserve-3d' }}>
            {FRAMES.map((label, i) => (
              <div
                key={label}
                className="absolute top-1/2 left-1/2 grid h-56 w-80 place-items-center rounded-lg border border-border bg-bg/70 font-display text-3xl text-fg italic"
                style={{
                  transform: `translate(-50%, -50%) translateZ(calc(${-i * 360}px + var(--cam) * 1px))`,
                  opacity: `clamp(0, calc(1 - (var(--cam) - ${i * 360}) / 420), 1)`,
                }}
              >
                {label}
              </div>
            ))}
          </div>
          <p className="absolute bottom-3 left-4 font-mono text-[11px] text-fg-muted">Scroll</p>
        </div>
      </div>
    </div>
  )
}
```

# Liquid hover (SVG displacement)
> An element that warps under the pointer using an SVG feTurbulence + feDisplacementMap filter. No WebGL.
- **Category:** Signature moves
- **Slug:** move-liquid-hover
- **Tags:** signature move, svg filter, displacement, hover, distortion, css
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-liquid-hover
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/LiquidHover.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/LiquidHover.tsx
- **Reference:** [Studied: Immersive Garden](https://immersive-g.com)

## When to use
- Image or card hover with a premium feel
- Distortion on text, video or images without shaders

## Accessibility

Filter only changes appearance; the element keeps its role and label; skipped under reduced motion.


## Source
`src/patterns/moves/LiquidHover.tsx`
```tsx
import { useEffect, useId, useRef } from 'react'

/*
 * Signature move (Immersive Garden): an image that warps under the pointer. Instead of a WebGL shader, an SVG
 * filter (feTurbulence feeding feDisplacementMap) distorts any DOM element; the displacement scale eases up on
 * hover and back down on leave. Works on real images, video and text. Reduced motion: the effect is skipped.
 */

export default function LiquidHover() {
  const id = 'liq-' + useId().replace(/:/g, '')
  const disp = useRef<SVGFEDisplacementMapElement>(null)
  const turb = useRef<SVGFETurbulenceElement>(null)
  const target = useRef(0)

  useEffect(() => {
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return
    let cur = 0
    let t = 0
    let raf = 0
    const loop = () => {
      cur += (target.current - cur) * 0.08
      t += 0.004
      disp.current?.setAttribute('scale', cur.toFixed(2))
      turb.current?.setAttribute('baseFrequency', `${0.012 + Math.sin(t) * 0.004} ${0.02 + Math.cos(t * 1.3) * 0.006}`)
      raf = requestAnimationFrame(loop)
    }
    raf = requestAnimationFrame(loop)
    return () => cancelAnimationFrame(raf)
  }, [])

  return (
    <div className="mx-auto max-w-xl">
      <svg width="0" height="0" aria-hidden className="absolute">
        <filter id={id} x="-10%" y="-10%" width="120%" height="120%">
          <feTurbulence ref={turb} type="fractalNoise" baseFrequency="0.012 0.02" numOctaves="2" seed="4" result="n" />
          <feDisplacementMap ref={disp} in="SourceGraphic" in2="n" scale="0" xChannelSelector="R" yChannelSelector="G" />
        </filter>
      </svg>
      <div
        className="grid aspect-[4/3] cursor-crosshair place-items-center overflow-hidden rounded-xl border border-border"
        style={{ filter: `url(#${id})`, background: 'conic-gradient(from 210deg at 30% 60%, var(--accent), #1b1f4a, #e8d9c4, var(--accent))' }}
        onPointerEnter={() => (target.current = 70)}
        onPointerLeave={() => (target.current = 0)}
        role="img"
        aria-label="A colour field that ripples under the pointer"
      >
        <span className="font-display text-6xl text-white mix-blend-difference italic">Ripple</span>
      </div>
      <p className="mt-3 text-center font-mono text-[11px] text-fg-muted">Hover the card: the filter is plain SVG, no WebGL</p>
    </div>
  )
}
```

# Glyph trail
> The cursor drops the letters of a word along its path, each rising and fading. DOM nodes spawned by distance.
- **Category:** Signature moves
- **Slug:** move-glyph-trail
- **Tags:** signature move, cursor, trail, text, playful, dom
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-glyph-trail
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/GlyphTrail.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/GlyphTrail.tsx
- **Reference:** [Studied: Resn](https://resn.co.nz)

## When to use
- Playful landing pages and 404s
- A cursor effect that carries brand copy

## Accessibility

Spawned glyphs are pointer-events none and not announced; nothing is spawned under reduced motion.


## Source
`src/patterns/moves/GlyphTrail.tsx`
```tsx
import { useRef } from 'react'

/*
 * Signature move (Resn): the cursor leaves things behind. Here it drops the letters of a word along its path,
 * each one rising and fading. Elements are created and removed straight in the DOM (no React state), spaced by
 * distance, not time, so slow movement stays calm. Reduced motion: nothing is spawned.
 */

const WORD = 'PLAYFUL'

export default function GlyphTrail() {
  const box = useRef<HTMLDivElement>(null)
  const last = useRef({ x: 0, y: 0, i: 0 })

  const onMove = (e: React.PointerEvent) => {
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return
    const el = box.current!
    const r = el.getBoundingClientRect()
    const x = e.clientX - r.left
    const y = e.clientY - r.top
    if (Math.hypot(x - last.current.x, y - last.current.y) < 38) return
    last.current = { x, y, i: last.current.i + 1 }
    const s = document.createElement('span')
    s.textContent = WORD[last.current.i % WORD.length]
    s.className = 'gt-glyph'
    s.style.left = `${x}px`
    s.style.top = `${y}px`
    s.style.setProperty('--rot', `${(Math.random() - 0.5) * 50}deg`)
    el.appendChild(s)
    s.addEventListener('animationend', () => s.remove())
    while (el.querySelectorAll('.gt-glyph').length > 40) el.querySelector('.gt-glyph')?.remove()
  }

  return (
    <div ref={box} onPointerMove={onMove} className="relative h-80 cursor-none overflow-hidden rounded-xl border border-border bg-surface">
      <style>{`
        .gt-glyph { position: absolute; transform: translate(-50%, -50%); font: 600 34px var(--font-display, serif); color: var(--accent); pointer-events: none; animation: gt-rise 1.1s var(--ease-out-expo, ease-out) forwards; }
        @keyframes gt-rise { from { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot)) scale(1); } to { opacity: 0; transform: translate(-50%, -190%) rotate(var(--rot)) scale(0.6); } }
      `}</style>
      <p className="pointer-events-none absolute inset-0 grid place-items-center font-mono text-[11px] text-fg-muted">Move the pointer across the card</p>
    </div>
  )
}
```

# Scroll-scrubbed frame sequence
> A pinned canvas whose frame number is the scroll progress, the technique behind product-page scroll films. Frames are drawn procedurally so the demo needs no assets.
- **Category:** Signature moves
- **Slug:** move-frame-scrub
- **Tags:** signature move, scroll, canvas, frame sequence, pinned, product, apple
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-frame-scrub
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/FrameScrub.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/FrameScrub.tsx
- **Reference:** [Studied: Apple: AirPods Pro](https://www.apple.com/airpods-pro/)

## When to use
- Product pages where scroll should control a rotation or reveal
- Prototyping a frame-sequence section before the assets exist

## Accessibility

Canvas has a text alternative; the scroller is focusable; shows a single frame under reduced motion.


## Source
`src/patterns/moves/FrameScrub.tsx`
```tsx
import { useEffect, useRef } from 'react'

/*
 * Signature move (Apple product pages): scroll position, not time, drives the picture. A pinned canvas shows
 * frame N of a sequence where N = scroll progress. Real pages decode images or video; to stay asset-free this
 * demo draws each frame procedurally (a ring of beads that opens like a petal), so any scrub behaviour you
 * see is exactly what a frame sequence would do. Reduced motion: the middle frame is shown, no scrubbing.
 */

const FRAMES = 120

function drawFrame(ctx: CanvasRenderingContext2D, w: number, h: number, t: number, accent: string, fg: string) {
  ctx.clearRect(0, 0, w, h)
  const cx = w / 2
  const cy = h / 2
  const R = Math.min(w, h) * 0.3
  const open = Math.sin(t * Math.PI) // 0 -> 1 -> 0
  for (let ring = 0; ring < 5; ring++) {
    const n = 18 + ring * 6
    const rr = R * (0.35 + ring * 0.17) * (0.6 + 0.8 * open)
    for (let i = 0; i < n; i++) {
      const a = (i / n) * Math.PI * 2 + t * (ring % 2 ? 2.2 : -2.2) * Math.PI * 0.5
      const z = Math.sin(a * 2 + t * 6)
      ctx.globalAlpha = 0.35 + 0.65 * (z * 0.5 + 0.5)
      ctx.fillStyle = ring === 4 ? accent : fg
      ctx.beginPath()
      ctx.arc(cx + Math.cos(a) * rr, cy + Math.sin(a) * rr * (0.55 + 0.45 * open), 2 + (z * 0.5 + 0.5) * 3.2, 0, Math.PI * 2)
      ctx.fill()
    }
  }
  ctx.globalAlpha = 1
}

export default function FrameScrub() {
  const scroller = useRef<HTMLDivElement>(null)
  const canvas = useRef<HTMLCanvasElement>(null)
  const readout = useRef<HTMLSpanElement>(null)

  useEffect(() => {
    const sc = scroller.current!
    const cv = canvas.current!
    const ctx = cv.getContext('2d')!
    const css = getComputedStyle(cv)
    const accent = css.getPropertyValue('--accent').trim() || '#f90'
    const fg = css.getPropertyValue('--fg').trim() || '#eee'
    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
    let w = 0
    let h = 0
    let shown = -1
    const render = () => {
      const p = reduced ? 0.5 : sc.scrollTop / Math.max(1, sc.scrollHeight - sc.clientHeight)
      const f = Math.round(p * (FRAMES - 1))
      if (f === shown) return
      shown = f
      drawFrame(ctx, w, h, f / (FRAMES - 1), accent, fg)
      if (readout.current) readout.current.textContent = `frame ${String(f + 1).padStart(3, '0')} / ${FRAMES}`
    }
    const fit = () => {
      const dpr = Math.min(devicePixelRatio || 1, 2)
      w = cv.clientWidth
      h = cv.clientHeight
      cv.width = w * dpr
      cv.height = h * dpr
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
      shown = -1
      render()
    }
    const ro = new ResizeObserver(fit)
    ro.observe(cv)
    let raf = 0
    const onScroll = () => {
      if (!raf)
        raf = requestAnimationFrame(() => {
          raf = 0
          render()
        })
    }
    sc.addEventListener('scroll', onScroll, { passive: true })
    return () => {
      ro.disconnect()
      sc.removeEventListener('scroll', onScroll)
      cancelAnimationFrame(raf)
    }
  }, [])

  return (
    <div ref={scroller} className="relative h-96 overflow-y-auto rounded-xl border border-border bg-surface" tabIndex={0} aria-label="Scroll to scrub the animation">
      <div className="h-[1400px]">
        <div className="sticky top-0 h-96">
          <canvas ref={canvas} className="absolute inset-0 h-full w-full" role="img" aria-label="An animation of rings of beads that opens and closes as you scroll" />
          <span ref={readout} className="absolute bottom-3 left-4 font-mono text-[11px] text-fg-muted" />
          <span className="absolute top-3 right-4 font-mono text-[11px] text-fg-muted">Scroll to scrub</span>
        </div>
      </div>
    </div>
  )
}
```

# Living mesh-gradient hero
> Soft colour blobs drifting on sine paths over a base colour, drawn at tiny resolution and scaled up, behind a light large headline.
- **Category:** Signature moves
- **Slug:** move-mesh-gradient
- **Tags:** signature move, gradient, mesh, canvas, hero, fintech
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-mesh-gradient
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/MeshHero.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/MeshHero.tsx
- **Reference:** [Studied: Stripe](https://stripe.com)

## When to use
- SaaS and fintech heroes that need life without video
- A cheap, resolution-independent animated gradient

## Accessibility

Canvas is aria-hidden; headline is real text with white-on-dark contrast; still frame under reduced motion.


## Source
`src/patterns/moves/MeshHero.tsx`
```tsx
import { useEffect, useRef } from 'react'

/*
 * Signature move (Stripe): a living gradient behind a light, large headline. Several soft colour blobs drift on
 * slow sine paths over a base colour, drawn on a tiny offscreen canvas and scaled up so the blur is free; a
 * skewed clip gives the diagonal edge. Reduced motion: one still frame. The headline is real text on top.
 */

const BLOBS = [
  { c: '#ff8a3d', fx: 0.21, fy: 0.17, px: 0, py: 1 },
  { c: '#7a5cff', fx: 0.15, fy: 0.23, px: 2, py: 0 },
  { c: '#27c6b8', fx: 0.19, fy: 0.13, px: 4, py: 3 },
  { c: '#ff4f8b', fx: 0.11, fy: 0.19, px: 1, py: 5 },
]

export default function MeshHero() {
  const ref = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    const cv = ref.current!
    const ctx = cv.getContext('2d')!
    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
    cv.width = 96
    cv.height = 54
    let raf = 0
    const paint = (t: number) => {
      ctx.globalCompositeOperation = 'source-over'
      ctx.fillStyle = '#0d1020'
      ctx.fillRect(0, 0, 96, 54)
      ctx.globalCompositeOperation = 'lighter'
      for (const b of BLOBS) {
        const x = 48 + Math.sin(t * b.fx + b.px) * 34
        const y = 27 + Math.cos(t * b.fy + b.py) * 18
        const g = ctx.createRadialGradient(x, y, 0, x, y, 34)
        g.addColorStop(0, b.c + 'dd')
        g.addColorStop(1, b.c + '00')
        ctx.fillStyle = g
        ctx.fillRect(0, 0, 96, 54)
      }
    }
    if (reduced) paint(3)
    else {
      const loop = (ms: number) => {
        paint(ms / 1000)
        raf = requestAnimationFrame(loop)
      }
      raf = requestAnimationFrame(loop)
    }
    return () => cancelAnimationFrame(raf)
  }, [])

  return (
    <div className="relative isolate overflow-hidden rounded-xl border border-border">
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full scale-110 blur-[2px]" style={{ imageRendering: 'auto' }} aria-hidden />
      <div className="absolute inset-x-0 bottom-0 -z-10 h-16 origin-bottom-left -skew-y-6 bg-bg" aria-hidden />
      <div className="px-8 pt-16 pb-28 sm:px-14">
        <h2 className="max-w-lg text-4xl leading-[1.05] font-light tracking-tight text-white sm:text-5xl">Infrastructure that moves like it knows where it is going.</h2>
        <p className="mt-4 max-w-md text-white/70">A light weight at a large size, over colour that is always slowly changing.</p>
      </div>
    </div>
  )
}
```

# Spotlight grid (shared pointer glow)
> Card borders glow toward the pointer, and the light travels across the gaps between cards because it is tracked once on the grid.
- **Category:** Signature moves
- **Slug:** move-spotlight-grid
- **Tags:** signature move, spotlight, glow, grid, cards, pointer, dark
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-spotlight-grid
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/SpotlightGrid.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/SpotlightGrid.tsx
- **Reference:** [Studied: Linear](https://linear.app)

## When to use
- Feature grids on dark product pages
- Anywhere one pointer should light several elements

## Accessibility

Purely visual; cards remain static content; the glow is direct manipulation so it also works under reduced motion.


## Source
`src/patterns/moves/SpotlightGrid.tsx`
```tsx
import { useRef } from 'react'

/*
 * Signature move (Linear): one pointer, many cards. The glow on each card's border is positioned from the
 * pointer's position relative to that card, but the pointer is tracked once on the grid, so the light seems to
 * travel across the gaps from card to card. Two CSS variables per card, set on pointermove; no React state.
 * Reduced motion: the glow still follows (it is direct manipulation, not an animation).
 */

const CARDS = [
  ['Triage', 'Inbox for work that needs a decision'],
  ['Cycles', 'Time-boxed sprints that close themselves'],
  ['Roadmaps', 'Plans that stay linked to the work'],
  ['Insights', 'Cycle time without the spreadsheet'],
  ['Agents', 'Delegate the boring half'],
  ['Integrations', 'Meets your tools where they live'],
]

export default function SpotlightGrid() {
  const grid = useRef<HTMLDivElement>(null)

  const onMove = (e: React.PointerEvent) => {
    for (const el of grid.current!.children) {
      const r = (el as HTMLElement).getBoundingClientRect()
      ;(el as HTMLElement).style.setProperty('--mx', `${e.clientX - r.left}px`)
      ;(el as HTMLElement).style.setProperty('--my', `${e.clientY - r.top}px`)
    }
  }

  return (
    <div ref={grid} onPointerMove={onMove} className="grid gap-3 sm:grid-cols-3">
      <style>{`
        .sg-card { position: relative; border-radius: 14px; padding: 1px; background: var(--border); }
        .sg-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(220px circle at var(--mx, -999px) var(--my, -999px), var(--accent), transparent 70%); opacity: 0; transition: opacity 0.3s; }
        .sg-card::after { content: ''; position: absolute; inset: 1px; border-radius: 13px; background: radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), color-mix(in oklab, var(--accent) 12%, var(--surface)), var(--surface) 70%); }
        div:hover > .sg-card::before { opacity: 1; }
        .sg-body { position: relative; z-index: 1; padding: 20px; min-height: 120px; }
      `}</style>
      {CARDS.map(([title, body]) => (
        <div key={title} className="sg-card">
          <div className="sg-body">
            <h3 className="font-medium">{title}</h3>
            <p className="mt-1 text-sm text-fg-muted">{body}</p>
          </div>
        </div>
      ))}
    </div>
  )
}
```

# Grid with travelling beams
> A quiet grid with short gradient beams that travel along random lines and fade out. One canvas.
- **Category:** Signature moves
- **Slug:** move-grid-beams
- **Tags:** signature move, grid, beams, canvas, dark, background
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-grid-beams
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/GridBeams.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/GridBeams.tsx
- **Reference:** [Studied: Vercel](https://vercel.com)

## When to use
- Developer and infrastructure heroes
- A restrained animated background

## Accessibility

Decorative canvas (aria-hidden); grid only, no beams under reduced motion; headline stays real text.


## Source
`src/patterns/moves/GridBeams.tsx`
```tsx
import { useEffect, useRef } from 'react'

/*
 * Signature move (Vercel): a quiet black grid with light that travels along its lines. Beams are short
 * gradient segments that move along random grid rows and columns and fade out; a single canvas draws the
 * grid once and the beams every frame. Reduced motion: the grid only, no beams.
 */

export default function GridBeams() {
  const ref = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    const cv = ref.current!
    const ctx = cv.getContext('2d')!
    const css = getComputedStyle(cv)
    const accent = css.getPropertyValue('--accent').trim() || '#f90'
    const line = css.getPropertyValue('--border').trim() || '#333'
    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
    const CELL = 48
    let w = 0
    let h = 0
    let raf = 0
    type Beam = { horizontal: boolean; line: number; pos: number; speed: number; len: number }
    const beams: Beam[] = []

    const grid = () => {
      ctx.strokeStyle = line
      ctx.lineWidth = 1
      ctx.globalAlpha = 0.6
      ctx.beginPath()
      for (let x = 0; x <= w; x += CELL) { ctx.moveTo(x + 0.5, 0); ctx.lineTo(x + 0.5, h) }
      for (let y = 0; y <= h; y += CELL) { ctx.moveTo(0, y + 0.5); ctx.lineTo(w, y + 0.5) }
      ctx.stroke()
      ctx.globalAlpha = 1
    }
    const spawn = () => {
      const horizontal = Math.random() > 0.5
      beams.push({
        horizontal,
        line: Math.floor(Math.random() * ((horizontal ? h : w) / CELL)) * CELL + 0.5,
        pos: -80,
        speed: 140 + Math.random() * 260,
        len: 60 + Math.random() * 90,
      })
    }
    const fit = () => {
      const dpr = Math.min(devicePixelRatio || 1, 2)
      w = cv.clientWidth
      h = cv.clientHeight
      cv.width = w * dpr
      cv.height = h * dpr
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
      ctx.clearRect(0, 0, w, h)
      grid()
    }
    const ro = new ResizeObserver(fit)
    ro.observe(cv)
    fit()

    let last = performance.now()
    let acc = 0
    const loop = (now: number) => {
      const dt = Math.min(0.05, (now - last) / 1000)
      last = now
      acc += dt
      if (acc > 0.35 && beams.length < 10) {
        acc = 0
        spawn()
      }
      ctx.clearRect(0, 0, w, h)
      grid()
      for (let i = beams.length - 1; i >= 0; i--) {
        const b = beams[i]
        b.pos += b.speed * dt
        const max = b.horizontal ? w : h
        if (b.pos - b.len > max) { beams.splice(i, 1); continue }
        const x0 = b.horizontal ? b.pos - b.len : b.line
        const y0 = b.horizontal ? b.line : b.pos - b.len
        const x1 = b.horizontal ? b.pos : b.line
        const y1 = b.horizontal ? b.line : b.pos
        const g = ctx.createLinearGradient(x0, y0, x1, y1)
        g.addColorStop(0, 'transparent')
        g.addColorStop(1, accent)
        ctx.strokeStyle = g
        ctx.lineWidth = 2
        ctx.beginPath()
        ctx.moveTo(x0, y0)
        ctx.lineTo(x1, y1)
        ctx.stroke()
      }
      raf = requestAnimationFrame(loop)
    }
    if (!reduced) raf = requestAnimationFrame(loop)
    return () => {
      cancelAnimationFrame(raf)
      ro.disconnect()
    }
  }, [])

  return (
    <div className="relative h-72 overflow-hidden rounded-xl border border-border bg-bg">
      <canvas ref={ref} className="absolute inset-0 h-full w-full" aria-hidden />
      <div className="absolute inset-0 grid place-items-center bg-[radial-gradient(circle,var(--bg)_0%,transparent_55%)] px-6 text-center">
        <h2 className="text-4xl font-semibold tracking-tight">Develop. Preview. Ship.</h2>
      </div>
    </div>
  )
}
```

# Self-typing command launcher
> A command palette that types a query on its own, then answers to real input: filter, arrow keys, Enter.
- **Category:** Signature moves
- **Slug:** move-command-demo
- **Tags:** signature move, command palette, keyboard, combobox, search, launcher
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-command-demo
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/CommandDemo.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/CommandDemo.tsx
- **Reference:** [Studied: Raycast](https://raycast.com)

## When to use
- Keyboard-first product pages
- Demonstrating a launcher without a video

## Accessibility

Combobox/listbox pattern with aria-activedescendant; auto-typing stops on focus or any key and is skipped under reduced motion; results announced via a live count.


## Source
`src/patterns/moves/CommandDemo.tsx`
```tsx
import { useEffect, useMemo, useRef, useState } from 'react'

/*
 * Signature move (Raycast): when the product is keyboard-first, the page should be too. A launcher that
 * types a query by itself until you touch it, then answers to real input: type to filter, Up/Down to move,
 * Enter to "run". Auto-typing stops on any key or focus; reduced motion skips it and shows a finished query.
 */

const ITEMS = [
  { name: 'Search Files', hint: 'Command' },
  { name: 'Clipboard History', hint: 'Command' },
  { name: 'Snippets: Create', hint: 'Extension' },
  { name: 'Window: Left Half', hint: 'Window' },
  { name: 'Window: Right Half', hint: 'Window' },
  { name: 'Calculator', hint: 'Command' },
  { name: 'Emoji Picker', hint: 'Extension' },
]

export default function CommandDemo() {
  const [q, setQ] = useState('')
  const [sel, setSel] = useState(0)
  const [ran, setRan] = useState<string | null>(null)
  const touched = useRef(false)
  const input = useRef<HTMLInputElement>(null)

  useEffect(() => {
    const script = 'wind'
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
      setQ(script)
      return
    }
    let i = 0
    const id = window.setInterval(() => {
      if (touched.current || i >= script.length) return window.clearInterval(id)
      i += 1
      setQ(script.slice(0, i))
    }, 380)
    return () => window.clearInterval(id)
  }, [])

  const results = useMemo(() => ITEMS.filter((it) => it.name.toLowerCase().includes(q.toLowerCase())), [q])
  const active = Math.min(sel, Math.max(0, results.length - 1))

  return (
    <div className="mx-auto max-w-xl overflow-hidden rounded-xl border border-border bg-surface shadow-lg">
      <label className="sr-only" htmlFor="cmd-demo-q">Search commands</label>
      <input
        id="cmd-demo-q"
        ref={input}
        value={q}
        placeholder="Search for apps and commands…"
        onFocus={() => (touched.current = true)}
        onChange={(e) => {
          touched.current = true
          setQ(e.target.value)
          setSel(0)
          setRan(null)
        }}
        onKeyDown={(e) => {
          touched.current = true
          if (e.key === 'ArrowDown') { e.preventDefault(); setSel((s) => Math.min(results.length - 1, s + 1)) }
          if (e.key === 'ArrowUp') { e.preventDefault(); setSel((s) => Math.max(0, s - 1)) }
          if (e.key === 'Enter' && results[active]) setRan(results[active].name)
        }}
        className="w-full border-b border-border bg-transparent px-4 py-3.5 text-lg outline-none"
        role="combobox"
        aria-expanded
        aria-controls="cmd-demo-list"
        aria-activedescendant={results[active] ? `cmd-demo-${active}` : undefined}
      />
      <ul id="cmd-demo-list" role="listbox" className="max-h-72 overflow-auto p-2">
        {results.map((it, i) => (
          <li
            key={it.name}
            id={`cmd-demo-${i}`}
            role="option"
            aria-selected={i === active}
            onMouseMove={() => setSel(i)}
            onClick={() => setRan(it.name)}
            className={`flex min-h-11 cursor-pointer items-center justify-between rounded-lg px-3 text-sm ${i === active ? 'bg-accent-soft text-fg' : 'text-fg-muted'}`}
          >
            {it.name}
            <span className="font-mono text-[11px]">{it.hint}</span>
          </li>
        ))}
        {results.length === 0 && <li className="px-3 py-6 text-center text-sm text-fg-muted">No results</li>}
      </ul>
      <p className="flex justify-between border-t border-border px-4 py-2 font-mono text-[11px] text-fg-muted" aria-live="polite">
        <span>{ran ? `Ran: ${ran}` : '↑ ↓ to move, Enter to run'}</span>
        <span>{results.length} results</span>
      </p>
    </div>
  )
}
```

# Tilted marquee rows
> Rows of cards drifting in opposite directions inside a 3D perspective tilt, pausing on hover or focus.
- **Category:** Signature moves
- **Slug:** move-tilt-marquee
- **Tags:** signature move, marquee, 3d tilt, gallery, css, perspective
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-tilt-marquee
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/TiltMarquee.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/TiltMarquee.tsx
- **Reference:** [Studied: Framer](https://www.framer.com)

## When to use
- Template or gallery strips
- A lively showcase band

## Accessibility

Duplicated cards are aria-hidden and unfocusable; rows pause on hover/focus-within and stop under reduced motion.


## Source
`src/patterns/moves/TiltMarquee.tsx`
```tsx
const ROWS = [
  ['Aurora', 'Lumen', 'Mosaic', 'Pulse', 'Relay', 'Tidal'],
  ['Foundry', 'Glyph', 'Harbor', 'Ledger', 'Nova', 'Orbit'],
]
const HUES = [24, 200, 280, 150, 330, 60]

/*
 * Signature move (Framer): rows of template cards drifting past, each tilted in 3D. Two rows run in opposite
 * directions; the whole stack sits in a perspective so the rows lean away, and a row pauses when hovered
 * or focused so cards can be read and clicked. Pure CSS animation. Reduced motion: rows stand still.
 */

export default function TiltMarquee() {
  return (
    <div className="overflow-hidden rounded-xl border border-border bg-surface py-8" style={{ perspective: '900px' }}>
      <style>{`
        @keyframes tm-left { to { transform: translateX(-50%); } }
        @keyframes tm-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
        .tm-row { display: flex; width: max-content; gap: 16px; animation: tm-left 36s linear infinite; }
        .tm-row.rev { animation-name: tm-right; animation-duration: 44s; }
        .tm-wrap:hover .tm-row, .tm-wrap:focus-within .tm-row { animation-play-state: paused; }
        @media (prefers-reduced-motion: reduce) { .tm-row { animation: none; } }
      `}</style>
      <div className="tm-wrap space-y-4" style={{ transform: 'rotateX(14deg) rotateZ(-4deg)', transformStyle: 'preserve-3d' }}>
        {ROWS.map((row, r) => (
          <div key={r} className="overflow-hidden">
            <div className={`tm-row ${r % 2 ? 'rev' : ''}`}>
              {[...row, ...row].map((name, i) => (
                <a
                  key={i}
                  href="#/move-tilt-marquee"
                  aria-hidden={i >= row.length}
                  tabIndex={i >= row.length ? -1 : 0}
                  className="block h-32 w-52 shrink-0 rounded-lg border border-border p-3 text-sm font-medium transition-transform hover:-translate-y-1"
                  style={{ background: `linear-gradient(160deg, hsl(${HUES[i % 6]} 70% 55% / 0.55), var(--surface-2))` }}
                >
                  {name}
                </a>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
```

# Morphing tab pill
> A tab bar whose highlight is one shape that slides and recolours between tabs. Roving tabindex and arrow keys.
- **Category:** Signature moves
- **Slug:** move-morph-tabs
- **Tags:** signature move, tabs, pill, morph, tablist, color, spring
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-morph-tabs
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/MorphTabs.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/MorphTabs.tsx
- **Reference:** [Studied: Arc](https://arc.net)

## When to use
- Feature tabs, segmented controls
- Any navigation where the highlight should travel

## Accessibility

Full tablist semantics: roving tabindex, arrow/Home/End keys, aria-selected/controls; pill jumps under reduced motion.


## Source
`src/patterns/moves/MorphTabs.tsx`
```tsx
import { useLayoutEffect, useRef, useState } from 'react'

/*
 * Signature move (Arc): a tab bar whose highlight is one shape that moves and changes colour, not a class
 * that toggles. The pill covers the whole bar and a clip-path window (measured from the active tab) is what
 * slides, so only paint changes, never layout; each tab carries a colour the pill takes on. Proper tablist semantics with arrow-key navigation (roving tabindex).
 * Reduced motion: the pill jumps.
 */

const TABS = [
  { id: 'space', label: 'Spaces', color: '#4d57ff', body: 'Group tabs by context so work and life never share a row.' },
  { id: 'split', label: 'Split view', color: '#ff7a59', body: 'Two pages side by side, without a second window.' },
  { id: 'easel', label: 'Easels', color: '#1fb589', body: 'A canvas to collect pages, notes and images.' },
  { id: 'boost', label: 'Boosts', color: '#c453ff', body: 'Restyle any site with your own colours and fonts.' },
]

export default function MorphTabs() {
  const [active, setActive] = useState(0)
  const refs = useRef<(HTMLButtonElement | null)[]>([])
  const list = useRef<HTMLDivElement>(null)
  const [clip, setClip] = useState('inset(4px 100% 4px 0 round 9999px)')

  useLayoutEffect(() => {
    const el = refs.current[active]
    const box = list.current
    if (el && box) setClip(`inset(4px ${box.clientWidth - el.offsetLeft - el.offsetWidth}px 4px ${el.offsetLeft}px round 9999px)`)
  }, [active])

  const onKey = (e: React.KeyboardEvent, i: number) => {
    const n = e.key === 'ArrowRight' ? (i + 1) % TABS.length : e.key === 'ArrowLeft' ? (i - 1 + TABS.length) % TABS.length : e.key === 'Home' ? 0 : e.key === 'End' ? TABS.length - 1 : -1
    if (n < 0) return
    e.preventDefault()
    setActive(n)
    refs.current[n]?.focus()
  }

  return (
    <div className="mx-auto max-w-xl">
      <div ref={list} role="tablist" aria-label="Arc features" className="relative flex gap-1 rounded-full border border-border bg-surface p-1">
        <span
          aria-hidden
          className="absolute inset-0 motion-reduce:transition-none"
          style={{ clipPath: clip, background: TABS[active].color, transition: 'clip-path 380ms var(--ease-out-expo), background 380ms' }}
        />
        {TABS.map((t, i) => (
          <button
            key={t.id}
            ref={(el) => { refs.current[i] = el }}
            role="tab"
            id={`mt-tab-${t.id}`}
            aria-selected={i === active}
            aria-controls={`mt-panel-${t.id}`}
            tabIndex={i === active ? 0 : -1}
            onClick={() => setActive(i)}
            onKeyDown={(e) => onKey(e, i)}
            className={`relative z-10 min-h-11 flex-1 rounded-full px-3 text-sm font-medium transition-colors ${i === active ? 'text-white' : 'text-fg-muted hover:text-fg'}`}
          >
            {t.label}
          </button>
        ))}
      </div>
      <div role="tabpanel" id={`mt-panel-${TABS[active].id}`} aria-labelledby={`mt-tab-${TABS[active].id}`} className="mt-4 rounded-xl border border-border bg-surface p-5 text-fg-muted">
        {TABS[active].body}
      </div>
    </div>
  )
}
```

# Rotary knob with detents
> A hardware-style knob turned by dragging, scrolling or arrow keys, with 12 detents and a mono readout.
- **Category:** Signature moves
- **Slug:** move-rotary-knob
- **Tags:** signature move, knob, slider, hardware, drag, detent, audio
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-rotary-knob
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/RotaryKnob.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/RotaryKnob.tsx
- **Reference:** [Studied: teenage engineering](https://teenage.engineering)

## When to use
- Audio, settings and control panels
- Giving a slider tactile character

## Accessibility

role=slider with aria-valuenow/min/max, keyboard Arrow/Home/End, wheel; indicator snaps under reduced motion.


## Source
`src/patterns/moves/RotaryKnob.tsx`
```tsx
import { useRef, useState } from 'react'

/*
 * Signature move (teenage engineering): tactile hardware on a screen. A knob you turn by dragging (up/down or
 * around it), by mouse wheel, or with the arrow keys; it has 12 detents, a lit indicator and a numeric
 * readout in a mono face. Exposed as a slider for assistive tech (role=slider, aria-valuenow). Reduced
 * motion: no easing on the indicator, it snaps.
 */

const MIN = 0
const MAX = 11
const SWEEP = 270 // degrees

export default function RotaryKnob() {
  const [v, setV] = useState(4)
  const drag = useRef<{ y: number; v: number } | null>(null)
  const angle = -SWEEP / 2 + (v / (MAX - MIN)) * SWEEP
  const clamp = (n: number) => Math.max(MIN, Math.min(MAX, Math.round(n)))

  return (
    <div className="flex flex-col items-center gap-6 rounded-xl border border-border bg-surface py-10">
      <div className="relative grid place-items-center">
        {Array.from({ length: MAX + 1 }, (_, i) => {
          const a = -SWEEP / 2 + (i / MAX) * SWEEP
          return (
            <span
              key={i}
              aria-hidden
              className="absolute h-2 w-0.5 origin-bottom rounded-full"
              style={{ transform: `rotate(${a}deg) translateY(-84px)`, background: i <= v ? 'var(--accent)' : 'var(--border)' }}
            />
          )
        })}
        <div
          role="slider"
          tabIndex={0}
          aria-label="Volume"
          aria-valuemin={MIN}
          aria-valuemax={MAX}
          aria-valuenow={v}
          onPointerDown={(e) => {
            ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
            drag.current = { y: e.clientY, v }
          }}
          onPointerMove={(e) => {
            if (drag.current) setV(clamp(drag.current.v + (drag.current.y - e.clientY) / 14))
          }}
          onPointerUp={() => (drag.current = null)}
          onWheel={(e) => setV((x) => clamp(x - Math.sign(e.deltaY)))}
          onKeyDown={(e) => {
            if (e.key === 'ArrowUp' || e.key === 'ArrowRight') { e.preventDefault(); setV((x) => clamp(x + 1)) }
            if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') { e.preventDefault(); setV((x) => clamp(x - 1)) }
            if (e.key === 'Home') setV(MIN)
            if (e.key === 'End') setV(MAX)
          }}
          className="relative size-32 cursor-ns-resize touch-none rounded-full border border-border shadow-md outline-offset-4"
          style={{ background: 'radial-gradient(circle at 35% 30%, var(--surface-2), var(--bg))' }}
        >
          <span
            aria-hidden
            className="absolute top-1/2 left-1/2 h-1/2 w-1 origin-top -translate-x-1/2 motion-reduce:transition-none"
            style={{ transform: `translateX(-50%) rotate(${angle + 180}deg)`, transition: 'transform 120ms var(--ease-out-expo)' }}
          >
            <span className="mt-9 block h-6 w-1 rounded-full bg-accent" />
          </span>
        </div>
      </div>
      <p className="font-mono text-3xl tabular-nums" aria-live="polite">{String(v).padStart(2, '0')}</p>
      <p className="font-mono text-[11px] text-fg-muted">Drag up and down, scroll, or use the arrow keys</p>
    </div>
  )
}
```

# Dot-matrix type
> Text drawn as a grid of dots that swell and light up near the pointer, like an LED matrix.
- **Category:** Signature moves
- **Slug:** move-dot-matrix
- **Tags:** signature move, dot matrix, canvas, type, led, hover
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-dot-matrix
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/DotMatrix.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/DotMatrix.tsx
- **Reference:** [Studied: Nothing](https://nothing.tech)

## When to use
- Brands with a technical or hardware voice
- Big display type that rewards hover

## Accessibility

Canvas has role=img with the text as aria-label; still dots under reduced motion.


## Source
`src/patterns/moves/DotMatrix.tsx`
```tsx
import { useEffect, useRef } from 'react'

/*
 * Signature move (Nothing): type as a grid of dots. The word is drawn once to an offscreen canvas, sampled on a
 * regular grid, and each lit sample becomes a dot that swells and lights up near the pointer, like a ripple
 * through an LED matrix. Real text is provided to assistive tech via aria-label. Reduced motion: static dots.
 */

export default function DotMatrix({ text = 'NOTHING' }: { text?: string }) {
  const ref = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    const cv = ref.current!
    const ctx = cv.getContext('2d')!
    const accent = getComputedStyle(cv).getPropertyValue('--accent').trim() || '#f90'
    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
    const STEP = 9
    let dots: { x: number; y: number }[] = []
    let w = 0
    let h = 0
    const mouse = { x: -999, y: -999 }
    let raf = 0

    const build = () => {
      const off = document.createElement('canvas')
      off.width = w
      off.height = h
      const o = off.getContext('2d')!
      o.fillStyle = '#000'
      o.font = `900 ${Math.min(h * 0.62, w / (text.length * 0.8))}px system-ui, sans-serif`
      o.textAlign = 'center'
      o.textBaseline = 'middle'
      o.fillText(text, w / 2, h / 2)
      const data = o.getImageData(0, 0, w, h).data
      dots = []
      for (let y = STEP / 2; y < h; y += STEP)
        for (let x = STEP / 2; x < w; x += STEP) if (data[((y | 0) * w + (x | 0)) * 4 + 3] > 128) dots.push({ x, y })
    }
    const draw = () => {
      ctx.clearRect(0, 0, w, h)
      const fg = getComputedStyle(cv).color
      for (const d of dots) {
        const dist = Math.hypot(d.x - mouse.x, d.y - mouse.y)
        const k = Math.max(0, 1 - dist / 90)
        ctx.fillStyle = k > 0.05 ? accent : fg
        ctx.beginPath()
        ctx.arc(d.x, d.y, 1.6 + k * 2.6, 0, Math.PI * 2)
        ctx.fill()
      }
    }
    const fit = () => {
      const dpr = 1 // sampling grid is in CSS pixels; dots stay crisp enough at STEP spacing
      w = cv.clientWidth
      h = cv.clientHeight
      cv.width = w * dpr
      cv.height = h * dpr
      build()
      draw()
    }
    const ro = new ResizeObserver(fit)
    ro.observe(cv)
    const move = (e: PointerEvent) => {
      const r = cv.getBoundingClientRect()
      mouse.x = e.clientX - r.left
      mouse.y = e.clientY - r.top
      if (!reduced && !raf)
        raf = requestAnimationFrame(() => {
          raf = 0
          draw()
        })
    }
    const leave = () => {
      mouse.x = mouse.y = -999
      draw()
    }
    cv.addEventListener('pointermove', move)
    cv.addEventListener('pointerleave', leave)
    return () => {
      ro.disconnect()
      cancelAnimationFrame(raf)
      cv.removeEventListener('pointermove', move)
      cv.removeEventListener('pointerleave', leave)
    }
  }, [text])

  return (
    <div className="rounded-xl border border-border bg-surface p-4">
      <canvas ref={ref} className="h-56 w-full text-fg" role="img" aria-label={text} />
      <p className="mt-2 text-center font-mono text-[11px] text-fg-muted">Move the pointer over the dots</p>
    </div>
  )
}
```

# Odometer numbers
> Digits that roll like a mechanical odometer: each is a 0-9 strip that slides, so only changed digits move.
- **Category:** Signature moves
- **Slug:** move-odometer
- **Tags:** signature move, number, counter, odometer, tabular, fintech
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-odometer
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/Odometer.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/Odometer.tsx
- **Reference:** [Studied: Mercury](https://mercury.com)

## When to use
- Balances, counters and live metrics
- Making a number change feel earned

## Accessibility

The whole value is exposed once as an aria-label; individual digit strips are aria-hidden; digits switch instantly under reduced motion.


## Source
`src/patterns/moves/Odometer.tsx`
```tsx
import { useEffect, useState } from 'react'

/*
 * Signature move (Mercury): numbers that roll. Each digit is a vertical strip of 0-9 that slides to the right
 * digit with a transform, so only the digits that change move (like a mechanical odometer). Tabular figures
 * keep widths stable; the whole value is also exposed as plain text for assistive tech. Reduced motion: digits
 * switch instantly.
 */

function Digit({ d }: { d: number }) {
  return (
    <span className="relative inline-block h-[1.1em] w-[0.62em] overflow-hidden align-bottom" aria-hidden>
      <span
        className="absolute inset-x-0 top-0 flex flex-col motion-reduce:transition-none"
        style={{ transform: `translateY(${-d * 1.1}em)`, transition: 'transform 900ms var(--ease-out-expo)' }}
      >
        {Array.from({ length: 10 }, (_, i) => (
          <span key={i} className="h-[1.1em] text-center leading-[1.1]">{i}</span>
        ))}
      </span>
    </span>
  )
}

export function Odometer({ value, prefix = '$' }: { value: number; prefix?: string }) {
  const digits = String(Math.max(0, Math.floor(value))).padStart(7, '0')
  const chars = digits.split('')
  return (
    <span className="inline-flex items-baseline font-display text-6xl tabular-nums" role="text" aria-label={`${prefix}${value.toLocaleString('en-US')}`}>
      <span aria-hidden>{prefix}</span>
      {chars.map((c, i) => {
        const fromRight = chars.length - 1 - i
        const comma = fromRight > 0 && fromRight % 3 === 0
        const leadingZero = chars.slice(0, i + 1).every((x) => x === '0') && fromRight > 0
        return (
          <span key={i} className={`inline-flex ${leadingZero ? 'opacity-0' : ''}`} aria-hidden>
            <Digit d={Number(c)} />
            {comma && <span>,</span>}
          </span>
        )
      })}
    </span>
  )
}

export default function OdometerDemo() {
  const [v, setV] = useState(1284930)
  useEffect(() => {
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return
    const id = window.setInterval(() => setV((x) => x + Math.floor(Math.random() * 90000) + 10000), 2600)
    return () => window.clearInterval(id)
  }, [])
  return (
    <div className="flex flex-col items-center gap-4 rounded-xl border border-border bg-surface py-12">
      <p className="text-sm text-fg-muted">Balance across accounts</p>
      <Odometer value={v} />
      <button onClick={() => setV((x) => x + 25000)} className="min-h-11 rounded-md border border-border px-4 text-sm text-fg-muted hover:text-fg">
        Deposit $25,000
      </button>
    </div>
  )
}
```

# Code to preview toggle
> A segmented control that cross-fades a code window into the thing the code produces.
- **Category:** Signature moves
- **Slug:** move-code-to-preview
- **Tags:** signature move, code, preview, tabs, developer, cross-fade
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-code-to-preview
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/CodeToPreview.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/CodeToPreview.tsx
- **Reference:** [Studied: Resend](https://resend.com)

## When to use
- Developer-tool heroes
- Explaining an API by its result

## Accessibility

Tab semantics with arrow keys; the hidden pane is aria-hidden and non-interactive; transitions removed under reduced motion.


## Source
`src/patterns/moves/CodeToPreview.tsx`
```tsx
import { useState } from 'react'

/*
 * Signature move (Resend): the code and the thing it makes, one tap apart. A segmented control swaps a code
 * window for the rendered result with a short cross-fade and a lift, so the product's promise ("this is what
 * you write, this is what they get") is felt, not explained. Tab semantics with arrow keys.
 */

const CODE = `import { Resend } from 'resend'

const resend = new Resend(process.env.KEY)

await resend.emails.send({
  from: 'Acme <hi@acme.dev>',
  to: ['you@example.com'],
  subject: 'Welcome aboard',
  html: '<strong>It works.</strong>',
})`

export default function CodeToPreview() {
  const [view, setView] = useState<'code' | 'preview'>('code')
  const tabs = ['code', 'preview'] as const
  return (
    <div className="mx-auto max-w-xl">
      <div role="tablist" aria-label="View" className="mb-3 inline-flex rounded-full border border-border p-1">
        {tabs.map((t) => (
          <button
            key={t}
            role="tab"
            aria-selected={view === t}
            tabIndex={view === t ? 0 : -1}
            onClick={() => setView(t)}
            onKeyDown={(e) => {
              if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
                e.preventDefault()
                setView(t === 'code' ? 'preview' : 'code')
              }
            }}
            className={`min-h-9 rounded-full px-4 text-sm capitalize transition-colors ${view === t ? 'bg-fg text-bg' : 'text-fg-muted hover:text-fg'}`}
          >
            {t}
          </button>
        ))}
      </div>
      <div className="relative h-72 overflow-hidden rounded-xl border border-border bg-surface">
        <pre
          aria-hidden={view !== 'code'}
          className="absolute inset-0 overflow-auto p-5 font-mono text-[13px] leading-6 transition-all duration-500 motion-reduce:transition-none"
          style={{ opacity: view === 'code' ? 1 : 0, transform: view === 'code' ? 'none' : 'translateY(-12px) scale(0.98)', pointerEvents: view === 'code' ? 'auto' : 'none' }}
        >
          <code>{CODE}</code>
        </pre>
        <div
          aria-hidden={view !== 'preview'}
          className="absolute inset-0 grid place-items-center p-6 transition-all duration-500 motion-reduce:transition-none"
          style={{ opacity: view === 'preview' ? 1 : 0, transform: view === 'preview' ? 'none' : 'translateY(12px) scale(0.98)', pointerEvents: view === 'preview' ? 'auto' : 'none' }}
        >
          <div className="w-full max-w-xs rounded-lg bg-white p-5 text-left text-neutral-900 shadow-xl">
            <p className="text-xs text-neutral-500">From: Acme &lt;hi@acme.dev&gt;</p>
            <p className="mt-1 text-sm font-medium">Welcome aboard</p>
            <hr className="my-3 border-neutral-200" />
            <p className="text-sm"><strong>It works.</strong></p>
          </div>
        </div>
      </div>
    </div>
  )
}
```

# Keyboard-run inbox
> A mini inbox operated entirely from the keyboard: j/k move, e archive, s star, u undo, with visible buttons.
- **Category:** Signature moves
- **Slug:** move-shortcut-inbox
- **Tags:** signature move, keyboard, inbox, shortcuts, listbox, speed
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-shortcut-inbox
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/ShortcutInbox.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/ShortcutInbox.tsx
- **Reference:** [Studied: Superhuman](https://superhuman.com)

## When to use
- Showing a speed-first product
- Teaching shortcuts by showing them beside the action

## Accessibility

Listbox with aria-activedescendant; every action also has a visible button, so nothing is keyboard-only.


## Source
`src/patterns/moves/ShortcutInbox.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'

/*
 * Signature move (Superhuman): speed you can feel. A mini inbox you run entirely from the keyboard:
 * j / k (or the arrows) move, e archives, s stars, u undoes the last archive. The shortcut shows up as a hint
 * beside each action, which is how the product teaches itself. Focus the list to start; every action also
 * has a visible button, so nothing is keyboard-only.
 */

type Mail = { id: number; from: string; subject: string; starred?: boolean }
const START: Mail[] = [
  { id: 1, from: 'Priya', subject: 'Launch checklist for Friday' },
  { id: 2, from: 'GitHub', subject: '[ui-lab] 3 new stars' },
  { id: 3, from: 'Marcus', subject: 'Re: invoice 2041' },
  { id: 4, from: 'Calendar', subject: 'Standup moved to 10:30' },
  { id: 5, from: 'Dana', subject: 'Photos from the offsite' },
]

export default function ShortcutInbox() {
  const [mail, setMail] = useState(START)
  const [sel, setSel] = useState(0)
  const [undo, setUndo] = useState<{ m: Mail; at: number }[]>([])
  const box = useRef<HTMLDivElement>(null)

  // Plain state updates (no side effects inside updater functions, which StrictMode runs twice).
  const archive = () => {
    if (!mail[sel]) return
    const next = mail.filter((_, i) => i !== sel)
    setUndo([...undo, { m: mail[sel], at: sel }])
    setMail(next)
    setSel(Math.min(sel, Math.max(0, next.length - 1)))
  }
  const star = () => setMail(mail.map((m, i) => (i === sel ? { ...m, starred: !m.starred } : m)))
  const restore = () => {
    const last = undo.at(-1)
    if (!last) return
    setUndo(undo.slice(0, -1))
    setMail([...mail.slice(0, last.at), last.m, ...mail.slice(last.at)])
    setSel(last.at)
  }

  useEffect(() => {
    const el = box.current!
    const key = (e: KeyboardEvent) => {
      if (e.key === 'j' || e.key === 'ArrowDown') { e.preventDefault(); setSel((s) => Math.min(mail.length - 1, s + 1)) }
      else if (e.key === 'k' || e.key === 'ArrowUp') { e.preventDefault(); setSel((s) => Math.max(0, s - 1)) }
      else if (e.key === 'e') archive()
      else if (e.key === 's') star()
      else if (e.key === 'u') restore()
    }
    el.addEventListener('keydown', key)
    return () => el.removeEventListener('keydown', key)
  })

  return (
    <div ref={box} className="mx-auto max-w-xl rounded-xl border border-border bg-surface outline-offset-4">
      <ul tabIndex={0} role="listbox" aria-label="Inbox. j and k move, e archives, s stars, u undoes." aria-activedescendant={mail[sel] ? `si-${mail[sel].id}` : undefined} className="outline-offset-4">
        {mail.map((m, i) => (
          <li
            key={m.id}
            id={`si-${m.id}`}
            role="option"
            aria-selected={i === sel}
            onClick={() => setSel(i)}
            className={`flex min-h-12 items-center gap-3 border-b border-border px-4 last:border-0 ${i === sel ? 'bg-accent-soft' : ''}`}
          >
            <span className={m.starred ? 'text-warning' : 'text-fg-muted/40'} aria-label={m.starred ? 'Starred' : 'Not starred'}>★</span>
            <span className="w-20 shrink-0 truncate text-sm font-medium">{m.from}</span>
            <span className="truncate text-sm text-fg-muted">{m.subject}</span>
          </li>
        ))}
      </ul>
      {mail.length === 0 && <p className="px-4 py-10 text-center text-sm text-fg-muted">Inbox zero. Press u to bring one back.</p>}
      <div className="flex flex-wrap gap-2 border-t border-border p-2">
        {[
          ['Archive', 'e', archive],
          ['Star', 's', star],
          ['Undo', 'u', restore],
        ].map(([label, k, fn]) => (
          <button key={label as string} onClick={fn as () => void} className="inline-flex min-h-9 items-center gap-2 rounded-md px-3 text-sm text-fg-muted hover:bg-surface-2 hover:text-fg">
            {label as string}
            <kbd className="rounded border border-border px-1.5 font-mono text-[11px]">{k as string}</kbd>
          </button>
        ))}
        <span className="ml-auto self-center pr-2 font-mono text-[11px] text-fg-muted">j / k to move</span>
      </div>
    </div>
  )
}
```

# Desktop-as-homepage
> A page built as an OS desktop: icons open draggable windows that come to the front when clicked.
- **Category:** Signature moves
- **Slug:** move-desktop-home
- **Tags:** signature move, desktop, windows, drag, metaphor, playful, os
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-desktop-home
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/DesktopHome.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/DesktopHome.tsx
- **Reference:** [Studied: PostHog](https://posthog.com)

## When to use
- Brands that can commit to one metaphor
- Playful product marketing

## Accessibility

Icons are buttons, windows are labelled sections with close buttons, Escape closes the focused window; dragging is pointer-only but never required.


## Source
`src/patterns/moves/DesktopHome.tsx`
```tsx
import { useRef, useState } from 'react'

/*
 * Signature move (PostHog): commit to one metaphor. The homepage is a desktop: icons along the edges open
 * windows, windows drag by their title bar, the last one clicked comes to the front. Windows are real
 * sections with real content; the title bar has a close button and the icons are buttons, so it is fully
 * keyboard operable (Enter/Space opens, Escape closes the focused window). Reduced motion: no open animation.
 */

const APPS = [
  { id: 'home', icon: '⌂', label: 'Home', body: 'Your product’s context layer. Ask anything about what users do.' },
  { id: 'pricing', icon: '$', label: 'Pricing', body: 'Free to start. Pay only for what you send, with a hard cap you set.' },
  { id: 'docs', icon: '¶', label: 'Docs', body: 'Guides, references and a changelog written by the people who built it.' },
  { id: 'about', icon: '☺', label: 'About us', body: 'A remote team that ships in public and answers its own support tickets.' },
]

export default function DesktopHome() {
  const [open, setOpen] = useState<string[]>(['home'])
  const [pos, setPos] = useState<Record<string, { x: number; y: number }>>({ home: { x: 90, y: 24 } })
  const drag = useRef<{ id: string; dx: number; dy: number } | null>(null)

  const front = (id: string) => setOpen((o) => [...o.filter((x) => x !== id), id])
  const launch = (id: string) => {
    setPos((p) => (p[id] ? p : { ...p, [id]: { x: 70 + open.length * 36, y: 40 + open.length * 30 } }))
    front(id)
  }

  return (
    <div
      className="relative h-[26rem] overflow-hidden rounded-xl border border-border"
      style={{ background: 'linear-gradient(180deg, color-mix(in oklab, var(--success) 22%, var(--bg)), color-mix(in oklab, var(--success) 8%, var(--bg)))' }}
      onPointerMove={(e) => {
        if (!drag.current) return
        const r = e.currentTarget.getBoundingClientRect()
        const { id, dx, dy } = drag.current
        setPos((p) => ({ ...p, [id]: { x: Math.max(0, Math.min(r.width - 120, e.clientX - r.left - dx)), y: Math.max(0, Math.min(r.height - 40, e.clientY - r.top - dy)) } }))
      }}
      onPointerUp={() => (drag.current = null)}
    >
      <nav aria-label="Desktop icons" className="absolute top-3 left-3 flex flex-col gap-1">
        {APPS.map((a) => (
          <button key={a.id} onClick={() => launch(a.id)} className="grid min-h-14 w-16 place-items-center rounded-md text-xs text-fg hover:bg-bg/50">
            <span className="text-2xl leading-none" aria-hidden>{a.icon}</span>
            {a.label}
          </button>
        ))}
      </nav>
      {open.map((id, z) => {
        const a = APPS.find((x) => x.id === id)!
        const p = pos[id] ?? { x: 90, y: 30 }
        return (
          <section
            key={id}
            aria-label={a.label}
            onPointerDown={() => front(id)}
            onKeyDown={(e) => e.key === 'Escape' && setOpen((o) => o.filter((x) => x !== id))}
            className="absolute w-72 overflow-hidden rounded-lg border border-border bg-surface shadow-xl"
            style={{ left: p.x, top: p.y, zIndex: z + 1 }}
          >
            <div
              className="flex cursor-grab touch-none items-center justify-between border-b border-border bg-surface-2 px-3 py-1.5 select-none active:cursor-grabbing"
              onPointerDown={(e) => {
                const r = e.currentTarget.parentElement!.getBoundingClientRect()
                drag.current = { id, dx: e.clientX - r.left, dy: e.clientY - r.top }
              }}
            >
              <span className="text-sm font-medium">{a.label}</span>
              <button aria-label={`Close ${a.label}`} onPointerDown={(e) => e.stopPropagation()} onClick={() => setOpen((o) => o.filter((x) => x !== id))} className="grid size-7 place-items-center rounded text-fg-muted hover:bg-bg hover:text-fg">×</button>
            </div>
            <p className="p-4 text-sm text-fg-muted">{a.body}</p>
          </section>
        )
      })}
    </div>
  )
}
```

# State-machine button
> A button that is always in exactly one of idle, hover, press, loading or success, each with its own pose.
- **Category:** Signature moves
- **Slug:** move-state-button
- **Tags:** signature move, state machine, button, loading, success, interaction
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-state-button
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/StateButton.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/StateButton.tsx
- **Reference:** [Studied: Rive](https://rive.app)

## When to use
- Any interactive control with more than hover and active
- Explaining state machines to a team

## Accessibility

Native button; busy states disable it; the label is a polite live region; transitions are instant under reduced motion.


## Source
`src/patterns/moves/StateButton.tsx`
```tsx
import { useRef, useState } from 'react'

/*
 * Signature move (Rive): interaction as a state machine. The button is always in exactly one of
 * idle / hover / press / loading / success, and each state has its own drawn pose (the glyph, the fill and
 * the ring), with transitions only along defined edges. Writing the states down first is what stops
 * interactive UI from feeling like a pile of CSS :hover rules. Reduced motion: transitions are instant.
 */

type S = 'idle' | 'hover' | 'press' | 'loading' | 'success'

const LOOK: Record<S, { fill: string; label: string; scale: number }> = {
  idle: { fill: 'var(--surface-2)', label: 'Send', scale: 1 },
  hover: { fill: 'var(--accent-soft)', label: 'Send', scale: 1.04 },
  press: { fill: 'var(--accent)', label: 'Send', scale: 0.96 },
  loading: { fill: 'var(--accent)', label: 'Sending', scale: 1 },
  success: { fill: 'var(--success)', label: 'Sent', scale: 1.06 },
}

export default function StateButton() {
  const [s, setS] = useState<S>('idle')
  const timer = useRef<number>(0)
  const busy = s === 'loading' || s === 'success'

  const run = () => {
    setS('loading')
    window.clearTimeout(timer.current)
    timer.current = window.setTimeout(() => {
      setS('success')
      timer.current = window.setTimeout(() => setS('idle'), 1400)
    }, 1100)
  }
  const look = LOOK[s]

  return (
    <div className="flex flex-col items-center gap-4 rounded-xl border border-border bg-surface py-14">
      <button
        disabled={busy}
        onPointerEnter={() => !busy && setS('hover')}
        onPointerLeave={() => !busy && setS('idle')}
        onPointerDown={() => !busy && setS('press')}
        onPointerUp={() => !busy && setS('hover')}
        onFocus={() => !busy && setS('hover')}
        onBlur={() => !busy && setS('idle')}
        onClick={run}
        className="relative inline-flex min-h-14 min-w-44 items-center justify-center gap-3 rounded-full border border-border px-8 text-base font-medium text-fg transition-[transform,background-color] duration-300 motion-reduce:transition-none"
        style={{ background: look.fill, transform: `scale(${look.scale})`, color: s === 'press' || s === 'loading' || s === 'success' ? 'var(--accent-fg)' : undefined }}
      >
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden>
          {s === 'loading' ? (
            <circle cx="10" cy="10" r="7" stroke="currentColor" strokeWidth="2" strokeDasharray="32" strokeLinecap="round" className="origin-center motion-safe:animate-spin" />
          ) : s === 'success' ? (
            <path d="M4 10.5l4 4 8-9" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
          ) : (
            <path d="M3 10h13M11 4l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ transform: s === 'hover' ? 'translateX(2px)' : 'none', transition: 'transform 200ms' }} />
          )}
        </svg>
        <span aria-live="polite">{look.label}</span>
      </button>
      <p className="font-mono text-[11px] text-fg-muted">state: {s}</p>
    </div>
  )
}
```

# Monumental type
> One word set so large (62cqw) that its container clips it, with small calm text for contrast. No JavaScript.
- **Category:** Signature moves
- **Slug:** move-monument-type
- **Tags:** signature move, typography, giant type, container query, portfolio, cqw
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-monument-type
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/MonumentType.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/MonumentType.tsx
- **Reference:** [Studied: Rauno Freiberg](https://rauno.me)

## When to use
- Portfolio and studio heroes
- Using type as structure

## Accessibility

The word is real, selectable heading text; size follows the container, not the viewport.


## Source
`src/patterns/moves/MonumentType.tsx`
```tsx
/*
 * Signature move (Rauno Freiberg): type at architectural scale. A single word is set so large that the
 * viewport clips it; small, calm text sits against it for contrast. The size is a function of the container
 * width (cqw units), so it scales with the layout, not the screen, and the word is real, selectable text.
 * No JavaScript. Reduced motion: nothing animates.
 */

export default function MonumentType() {
  return (
    <div className="overflow-hidden rounded-xl border border-border bg-fg text-bg" style={{ containerType: 'inline-size' }}>
      <section className="relative h-[22rem]">
        <h2 className="absolute -bottom-[0.18em] -left-[0.04em] font-sans leading-none font-bold tracking-tighter select-text" style={{ fontSize: '62cqw' }}>
          Craft
        </h2>
        <div className="absolute top-6 right-6 left-6 flex justify-between text-sm">
          <p className="max-w-[16rem] opacity-80">Details that make a thing feel finished, one interaction at a time.</p>
          <p className="font-mono text-xs opacity-70">01 / 04</p>
        </div>
      </section>
    </div>
  )
}
```

# Stacking toasts
> Toasts that stack like cards and fan out on hover or focus so each can be read and dismissed.
- **Category:** Signature moves
- **Slug:** move-toast-stack
- **Tags:** signature move, toast, stack, notification, spring, sonner
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-toast-stack
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/ToastStack.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/ToastStack.tsx
- **Reference:** [Studied: Emil Kowalski](https://emilkowal.ski)

## When to use
- Notifications that should not bury the page
- Learning how index-driven transforms animate

## Accessibility

Polite live region; the stack expands on focus as well as hover; every toast has a labelled dismiss button.


## Source
`src/patterns/moves/ToastStack.tsx`
```tsx
import { useRef, useState } from 'react'

/*
 * Signature move (Emil Kowalski / Sonner): toasts that stack like cards. New toasts push older ones back
 * (smaller, lower, dimmer); hovering or focusing the stack fans it out so every toast can be read and
 * dismissed. Positions are computed from index, so adding and removing animates for free with CSS transitions.
 * The region is a polite live region. Reduced motion: transitions are removed.
 */

type T = { id: number; text: string }
const LINES = ['Saved to drafts', 'Link copied', 'Invite sent to 3 people', 'Deployment ready', 'Payment received']

export default function ToastStack() {
  const [toasts, setToasts] = useState<T[]>([])
  const [fanned, setFanned] = useState(false)
  const n = useRef(0)

  const add = () => setToasts((t) => [...t.slice(-4), { id: ++n.current, text: LINES[n.current % LINES.length] }])
  const remove = (id: number) => setToasts((t) => t.filter((x) => x.id !== id))

  return (
    <div className="relative h-80 overflow-hidden rounded-xl border border-border bg-surface">
      <button onClick={add} className="absolute top-4 left-4 min-h-11 rounded-md bg-fg px-4 text-sm font-medium text-bg">Show toast</button>
      <div
        role="status"
        aria-live="polite"
        className="absolute right-4 bottom-4 h-16 w-72"
        onPointerEnter={() => setFanned(true)}
        onPointerLeave={() => setFanned(false)}
        onFocus={() => setFanned(true)}
        onBlur={() => setFanned(false)}
      >
        {toasts.map((t, i) => {
          const depth = toasts.length - 1 - i // 0 = newest
          const y = fanned ? -depth * 72 : -depth * 10
          const scale = fanned ? 1 : 1 - depth * 0.05
          return (
            <div
              key={t.id}
              className="absolute inset-x-0 bottom-0 flex min-h-14 items-center justify-between gap-2 rounded-xl border border-border bg-surface-2 px-4 text-sm shadow-lg transition-all duration-300 motion-reduce:transition-none"
              style={{ transform: `translateY(${y}px) scale(${scale})`, opacity: fanned ? 1 : Math.max(0, 1 - depth * 0.28), zIndex: i, transformOrigin: 'bottom center' }}
            >
              {t.text}
              <button onClick={() => remove(t.id)} aria-label={`Dismiss: ${t.text}`} className="grid size-9 place-items-center rounded-md text-fg-muted hover:bg-bg hover:text-fg">×</button>
            </div>
          )
        })}
      </div>
      {toasts.length === 0 && <p className="absolute right-4 bottom-6 font-mono text-[11px] text-fg-muted">Press the button a few times</p>}
    </div>
  )
}
```

# Live CSS explainer
> Sliders drive a live element and the CSS that produces it, side by side, from one state.
- **Category:** Signature moves
- **Slug:** move-live-css
- **Tags:** signature move, explorable, sliders, css, education, docs
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-live-css
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/LiveCss.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/LiveCss.tsx
- **Reference:** [Studied: Josh W. Comeau](https://www.joshwcomeau.com)

## When to use
- Docs, tutorials and course pages
- Explaining a property by letting people break it

## Accessibility

Native range inputs with visible labels and values; preview and code share state so they cannot disagree.


## Source
`src/patterns/moves/LiveCss.tsx`
```tsx
import { useState } from 'react'

/*
 * Signature move (Josh W. Comeau): explain by letting people break it. Sliders change a live element and the
 * CSS that produces it, side by side, so the rule and its effect are one gesture apart. Each control is a real
 * range input with a visible label and value; the preview and the code are the same state, so they cannot
 * disagree. No libraries.
 */

export default function LiveCss() {
  const [radius, setRadius] = useState(16)
  const [blur, setBlur] = useState(24)
  const [rotate, setRotate] = useState(-6)
  const [hue, setHue] = useState(24)

  const css = `.card {
  border-radius: ${radius}px;
  box-shadow: 0 ${Math.round(blur / 2)}px ${blur}px hsl(${hue} 80% 40% / 0.45);
  transform: rotate(${rotate}deg);
  background: hsl(${hue} 85% 60%);
}`

  const controls: [string, number, (n: number) => void, number, number][] = [
    ['border-radius', radius, setRadius, 0, 64],
    ['blur', blur, setBlur, 0, 60],
    ['rotate', rotate, setRotate, -30, 30],
    ['hue', hue, setHue, 0, 360],
  ]

  return (
    <div className="grid gap-4 rounded-xl border border-border bg-surface p-5 md:grid-cols-2">
      <div className="grid min-h-56 place-items-center rounded-lg bg-bg">
        <div
          className="grid size-28 place-items-center text-sm font-semibold text-black/80 transition-[border-radius,box-shadow,transform] duration-150 motion-reduce:transition-none"
          style={{ borderRadius: radius, boxShadow: `0 ${Math.round(blur / 2)}px ${blur}px hsl(${hue} 80% 40% / 0.45)`, transform: `rotate(${rotate}deg)`, background: `hsl(${hue} 85% 60%)` }}
        >
          .card
        </div>
      </div>
      <div className="space-y-4">
        {controls.map(([name, val, set, min, max]) => (
          <label key={name} className="block">
            <span className="flex justify-between font-mono text-xs text-fg-muted">
              <span>{name}</span>
              <span className="tabular-nums">{val}</span>
            </span>
            <input type="range" min={min} max={max} value={val} onChange={(e) => set(Number(e.target.value))} className="mt-1 h-8 w-full accent-[var(--accent)]" />
          </label>
        ))}
        <pre tabIndex={0} role="region" aria-label="Generated CSS" className="overflow-auto rounded-lg bg-bg p-3 font-mono text-[12px] leading-5"><code>{css}</code></pre>
      </div>
    </div>
  )
}
```

# Inertial scroll with rail
> Wheel input eased by a lerp (what smooth-scroll libraries do), with a progress rail and live velocity readout.
- **Category:** Signature moves
- **Slug:** move-scroll-rail
- **Tags:** signature move, smooth scroll, lerp, lenis, velocity, progress
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-scroll-rail
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/ScrollRail.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/ScrollRail.tsx
- **Reference:** [Studied: Lenis (Darkroom)](https://lenis.darkroom.engineering)

## When to use
- Showcase pages that want a premium scroll feel
- Learning what Lenis-style smoothing really is

## Accessibility

Only the wheel is intercepted; keyboard, scrollbar and touch scrolling stay native; no interception under reduced motion.


## Source
`src/patterns/moves/ScrollRail.tsx`
```tsx
import { useEffect, useRef } from 'react'

/*
 * Signature move (Lenis / Darkroom): scrolling with inertia. The container's scroll target is eased toward
 * the wheel input with a lerp each frame (that is all smooth-scroll libraries really do), and the same loop
 * drives a progress rail and a live velocity readout. Keyboard, scrollbar and touch scrolling keep working
 * because we only intercept the wheel and fall back to native scroll for everything else. Reduced motion:
 * the wheel is not intercepted at all.
 */

export default function ScrollRail() {
  const box = useRef<HTMLDivElement>(null)
  const bar = useRef<HTMLDivElement>(null)
  const vel = useRef<HTMLSpanElement>(null)

  useEffect(() => {
    const el = box.current!
    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
    let target = el.scrollTop
    let raf = 0
    let last = el.scrollTop
    let lastSet = el.scrollTop // the value this loop last wrote, to tell our scrolls from native ones
    const max = () => el.scrollHeight - el.clientHeight

    const loop = () => {
      const next = el.scrollTop + (target - el.scrollTop) * 0.1
      el.scrollTop = Math.abs(target - next) < 0.3 ? target : next
      lastSet = el.scrollTop
      const v = el.scrollTop - last
      last = el.scrollTop
      if (bar.current) bar.current.style.transform = `scaleY(${el.scrollTop / Math.max(1, max())})`
      if (vel.current) vel.current.textContent = `${Math.abs(v).toFixed(1).padStart(5, '0')} px/frame`
      raf = requestAnimationFrame(loop)
    }
    const onWheel = (e: WheelEvent) => {
      if (reduced) return
      e.preventDefault()
      target = Math.max(0, Math.min(max(), target + e.deltaY))
    }
    const onNative = () => {
      // Keyboard, scrollbar drags and touch move scrollTop directly: adopt it as the new target.
      if (Math.abs(el.scrollTop - lastSet) > 1.5) {
        target = el.scrollTop
        lastSet = el.scrollTop
      }
    }
    el.addEventListener('wheel', onWheel, { passive: false })
    el.addEventListener('scroll', onNative, { passive: true })
    raf = requestAnimationFrame(loop)
    return () => {
      cancelAnimationFrame(raf)
      el.removeEventListener('wheel', onWheel)
      el.removeEventListener('scroll', onNative)
    }
  }, [])

  return (
    <div className="relative rounded-xl border border-border bg-surface">
      <div ref={box} tabIndex={0} aria-label="Smooth scrolling demo" className="h-80 overflow-y-auto px-8 py-6 pr-12">
        {Array.from({ length: 14 }, (_, i) => (
          <p key={i} className="mb-6 font-display text-3xl text-fg/90 italic">
            {['Inertia', 'Easing', 'Lerp', 'Momentum', 'Velocity', 'Friction', 'Glide'][i % 7]} {i + 1}
          </p>
        ))}
      </div>
      <div className="pointer-events-none absolute top-4 right-4 bottom-4 w-0.5 rounded bg-border" aria-hidden>
        <div ref={bar} className="h-full origin-top rounded bg-accent" style={{ transform: 'scaleY(0)' }} />
      </div>
      <span ref={vel} className="absolute bottom-2 left-4 font-mono text-[11px] text-fg-muted" aria-hidden />
    </div>
  )
}
```

# Solid/outline marquee
> Giant words scrolling in opposite rows, alternating filled and stroked, inverting on hover. Pure CSS.
- **Category:** Signature moves
- **Slug:** move-outline-marquee
- **Tags:** signature move, marquee, outline text, type, css, studio
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-outline-marquee
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/OutlineMarquee.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/OutlineMarquee.tsx
- **Reference:** [Studied: basement.studio](https://basement.studio)

## When to use
- Studio and agency bands
- A bold divider between sections

## Accessibility

Duplicated copy is aria-hidden; rows stop under reduced motion.


## Source
`src/patterns/moves/OutlineMarquee.tsx`
```tsx
/*
 * Signature move (basement.studio): type that flips between solid and outline. Two rows of huge words scroll in
 * opposite directions; alternate words are filled or stroked (-webkit-text-stroke), and hovering the band
 * inverts them, so the same line reads two ways. Pure CSS. The words are real text (duplicated copy is
 * aria-hidden). Reduced motion: the rows stop.
 */

const WORDS = ['Brand', 'Web', 'Motion', 'Type', 'Systems', '3D']

function Row({ reverse }: { reverse?: boolean }) {
  return (
    <div className="om-row" style={{ animationDirection: reverse ? 'reverse' : 'normal' }}>
      {[0, 1].map((copy) => (
        <span key={copy} className="flex shrink-0 gap-8 pr-8" aria-hidden={copy === 1}>
          {WORDS.map((w, i) => (
            <span key={w} className={(i + (reverse ? 1 : 0)) % 2 ? 'om-solid' : 'om-line'}>{w}</span>
          ))}
        </span>
      ))}
    </div>
  )
}

export default function OutlineMarquee() {
  return (
    <div className="om overflow-hidden rounded-xl border border-border bg-bg py-6">
      <style>{`
        .om-row { display: flex; width: max-content; animation: om-go 30s linear infinite; font: 800 clamp(3.5rem, 12vw, 7.5rem)/1 var(--font-sans); letter-spacing: -0.04em; text-transform: uppercase; }
        .om-line { color: transparent; -webkit-text-stroke: 2px var(--fg); transition: color 0.3s, -webkit-text-stroke-color 0.3s; }
        .om-solid { color: var(--fg); transition: color 0.3s, -webkit-text-stroke-color 0.3s; -webkit-text-stroke: 2px transparent; }
        .om:hover .om-line { color: var(--accent); -webkit-text-stroke-color: var(--accent); }
        .om:hover .om-solid { color: transparent; -webkit-text-stroke-color: var(--fg); }
        @keyframes om-go { to { transform: translateX(-50%); } }
        @media (prefers-reduced-motion: reduce) { .om-row { animation: none; } }
      `}</style>
      <Row />
      <Row reverse />
    </div>
  )
}
```

# Labelled cursor
> A lagging dot that grows into a labelled pill ('View', 'Play') over elements marked data-cursor.
- **Category:** Signature moves
- **Slug:** move-label-cursor
- **Tags:** signature move, cursor, custom cursor, label, portfolio, lerp
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-label-cursor
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/LabelCursor.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/LabelCursor.tsx
- **Reference:** [Studied: Cuberto](https://cuberto.com)

## When to use
- Portfolio grids
- Telling people what a click will do

## Accessibility

The native cursor stays visible; the effect is skipped on touch and under reduced motion; links remain normal links.


## Source
`src/patterns/moves/LabelCursor.tsx`
```tsx
import { useEffect, useRef } from 'react'

/*
 * Signature move (Cuberto): a cursor that knows what it is over. A small dot follows the pointer with lag;
 * crossing an element with data-cursor="View" grows it into a labelled pill, and leaving shrinks it back.
 * One fixed element moved with transforms (no React state). The native cursor stays visible, so nothing
 * depends on this; it is skipped on touch and under reduced motion.
 */

const WORK = [
  ['Atlas', 'View'],
  ['Meridian', 'Play'],
  ['Foundry', 'Read'],
  ['Parallel', 'View'],
] as const

export default function LabelCursor() {
  const area = useRef<HTMLDivElement>(null)
  const dot = useRef<HTMLDivElement>(null)
  const label = useRef<HTMLSpanElement>(null)

  useEffect(() => {
    const el = area.current!
    const d = dot.current!
    if (matchMedia('(prefers-reduced-motion: reduce), (pointer: coarse)').matches) return
    let x = 0, y = 0, tx = 0, ty = 0
    let size = 14
    let targetSize = 14
    let raf = 0
    const loop = () => {
      x += (tx - x) * 0.18
      y += (ty - y) * 0.18
      size += (targetSize - size) * 0.2
      d.style.transform = `translate(${x - size / 2}px, ${y - size / 2}px)`
      d.style.width = d.style.height = `${size}px`
      raf = requestAnimationFrame(loop)
    }
    const move = (e: PointerEvent) => {
      const r = el.getBoundingClientRect()
      tx = e.clientX - r.left
      ty = e.clientY - r.top
      const t = (e.target as HTMLElement).closest<HTMLElement>('[data-cursor]')
      if (t) {
        label.current!.textContent = t.dataset.cursor!
        targetSize = 84
        d.dataset.on = '1'
      } else {
        targetSize = 14
        delete d.dataset.on
      }
    }
    const enter = () => (d.style.opacity = '1')
    const leave = () => (d.style.opacity = '0')
    el.addEventListener('pointermove', move)
    el.addEventListener('pointerenter', enter)
    el.addEventListener('pointerleave', leave)
    raf = requestAnimationFrame(loop)
    return () => {
      cancelAnimationFrame(raf)
      el.removeEventListener('pointermove', move)
      el.removeEventListener('pointerenter', enter)
      el.removeEventListener('pointerleave', leave)
    }
  }, [])

  return (
    <div ref={area} className="relative overflow-hidden rounded-xl border border-border bg-surface p-5">
      <style>{`
        .lc-dot { position: absolute; top: 0; left: 0; z-index: 5; border-radius: 999px; background: var(--accent); pointer-events: none; opacity: 0; display: grid; place-items: center; color: var(--accent-fg); font: 600 13px var(--font-sans); mix-blend-mode: normal; transition: opacity 0.2s; }
        .lc-dot span { opacity: 0; transition: opacity 0.2s; }
        .lc-dot[data-on='1'] span { opacity: 1; }
      `}</style>
      <div className="grid gap-3 sm:grid-cols-2">
        {WORK.map(([name, verb], i) => (
          <a key={name} href="#/move-label-cursor" data-cursor={verb} className="block aspect-[16/9] rounded-lg p-4 text-lg font-medium" style={{ background: `linear-gradient(135deg, hsl(${[24, 210, 150, 320][i]} 60% 45% / 0.6), var(--surface-2))` }}>
            {name}
          </a>
        ))}
      </div>
      <div ref={dot} className="lc-dot" aria-hidden>
        <span ref={label} />
      </div>
    </div>
  )
}
```

# Scrollytelling chart
> Text steps scroll past a sticky SVG chart; the step nearest the middle sets the chart's state.
- **Category:** Signature moves
- **Slug:** move-scrollytelling
- **Tags:** signature move, scrollytelling, chart, svg, intersection observer, editorial
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-scrollytelling
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/Scrollytelling.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/Scrollytelling.tsx
- **Reference:** [Studied: The Pudding](https://pudding.cool)

## When to use
- Data stories and explainers
- Anywhere a graphic should change as you read

## Accessibility

The chart has a text summary per step via aria-label; steps are plain paragraphs; chart eases only without reduced motion.


## Source
`src/patterns/moves/Scrollytelling.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'

/*
 * Signature move (The Pudding): the chart is the article. Text steps scroll past a sticky graphic; the step
 * nearest the middle of the viewport sets the graphic's state, and the graphic animates between states.
 * Steps are found with one IntersectionObserver (no scroll handler). The chart is SVG with a text summary
 * per step, so the story reads without it. Reduced motion: the chart changes without easing.
 */

const STEPS = [
  { text: 'In 2000, most people watched on a TV. Streaming was a rounding error.', bars: [88, 8, 4] },
  { text: 'By 2010, broadband changed the habit. Downloads and DVDs started to shrink.', bars: [62, 22, 16] },
  { text: 'In 2020, streaming overtook everything else in a single pandemic year.', bars: [30, 20, 50] },
  { text: 'Today, three out of four evenings begin with a thumbnail, not a schedule.', bars: [14, 10, 76] },
]
const LABELS = ['Broadcast', 'Disc', 'Streaming']

export default function Scrollytelling() {
  const [active, setActive] = useState(0)
  const root = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const steps = root.current!.querySelectorAll<HTMLElement>('[data-step]')
    const io = new IntersectionObserver(
      (entries) => {
        for (const e of entries) if (e.isIntersecting) setActive(Number((e.target as HTMLElement).dataset.step))
      },
      { root: root.current, rootMargin: '-45% 0px -45% 0px', threshold: 0 },
    )
    steps.forEach((s) => io.observe(s))
    return () => io.disconnect()
  }, [])

  const bars = STEPS[active].bars
  return (
    <div ref={root} className="relative h-96 overflow-y-auto rounded-xl border border-border bg-surface" tabIndex={0} aria-label="Scroll the story">
      <div className="sticky top-0 z-10 h-44 border-b border-border bg-surface/95 px-6 pt-4">
        <svg viewBox="0 0 300 120" className="h-full w-full" role="img" aria-label={`Share of viewing: ${LABELS.map((l, i) => `${l} ${bars[i]} percent`).join(', ')}`}>
          {bars.map((b, i) => (
            <g key={i}>
              <rect
                x={20 + i * 95}
                y="0"
                width="70"
                height="100"
                rx="4"
                fill={i === 2 ? 'var(--accent)' : 'var(--border)'}
                style={{ transformBox: 'fill-box', transformOrigin: 'bottom', transform: `scaleY(${b / 100})`, transition: 'transform 700ms var(--ease-out-expo)' }}
              />
              <text x={55 + i * 95} y="114" textAnchor="middle" fontSize="9" fill="var(--fg-muted)">{LABELS[i]}</text>
              <text x={55 + i * 95} y="94" textAnchor="middle" fontSize="11" fill="var(--fg)" fontFamily="var(--font-mono)" style={{ transform: `translateY(${-b}px)`, transition: 'transform 700ms var(--ease-out-expo)' }}>
                {b}%
              </text>
            </g>
          ))}
        </svg>
      </div>
      <div className="px-8">
        {STEPS.map((s, i) => (
          <p key={i} data-step={i} className={`flex min-h-64 items-center text-xl leading-snug transition-opacity duration-500 ${i === active ? 'opacity-100' : 'opacity-35'}`}>
            {s.text}
          </p>
        ))}
      </div>
    </div>
  )
}
```

# Book stack menu
> A pile of covers where the one you point at or focus slides out of the stack and the others make room.
- **Category:** Signature moves
- **Slug:** move-book-stack
- **Tags:** signature move, stack, books, hover, catalogue, serif
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-book-stack
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/BookStack.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/BookStack.tsx
- **Reference:** [Studied: Stripe Press](https://press.stripe.com)

## When to use
- Catalogues and libraries
- A menu that is also a shelf

## Accessibility

Covers are buttons in a list; focus does what hover does; the slide is removed under reduced motion.


## Source
`src/patterns/moves/BookStack.tsx`
```tsx
import { useState } from 'react'

/*
 * Signature move (Stripe Press): the shelf is the menu. Covers are stacked like a pile of books; the one you
 * point at (or focus) slides out of the stack and the rest make room, so each title is read at full size
 * without leaving the page. Covers are real buttons in a list. Reduced motion: no slide, only a highlight.
 */

const BOOKS = [
  { title: 'High Growth Handbook', by: 'Elad Gil', color: '#2d4a6b', w: 92 },
  { title: 'Maintenance', by: 'Stewart Brand', color: '#8a6320', w: 100 },
  { title: 'The Dream Machine', by: 'M. Mitchell Waldrop', color: '#7a2e3a', w: 88 },
  { title: 'Scaling People', by: 'Claire Hughes Johnson', color: '#3a6b52', w: 96 },
  { title: 'Poor Charlie’s Almanack', by: 'Charles T. Munger', color: '#1f2a44', w: 100 },
]

export default function BookStack() {
  const [out, setOut] = useState<number | null>(null)
  return (
    <div className="mx-auto flex max-w-md flex-col items-stretch rounded-xl border border-border bg-[#201819] p-6" onPointerLeave={() => setOut(null)}>
      <ul className="flex flex-col items-center gap-1">
        {BOOKS.map((b, i) => {
          const isOut = out === i
          return (
            <li key={b.title} style={{ transform: isOut ? 'translateX(36px) rotate(-1.5deg)' : 'none', transition: 'transform 420ms var(--ease-out-expo)', width: `${b.w}%` }} className="motion-reduce:!transition-none">
              <button
                onPointerEnter={() => setOut(i)}
                onFocus={() => setOut(i)}
                onBlur={() => setOut(null)}
                className="flex min-h-14 w-full items-center justify-between rounded-sm px-4 text-left text-sm text-white/90 shadow-md outline-offset-2 focus-visible:outline-2"
                style={{ background: b.color, boxShadow: isOut ? '0 12px 24px rgb(0 0 0 / 0.5)' : '0 2px 4px rgb(0 0 0 / 0.4)' }}
              >
                <span className="font-display text-base italic">{b.title}</span>
                <span className="font-mono text-[10px]">{b.by}</span>
              </button>
            </li>
          )
        })}
      </ul>
    </div>
  )
}
```

# Draggable block grid
> A grid of mixed blocks you rearrange by dragging, in one type size; Alt+Arrow keys move a focused block.
- **Category:** Signature moves
- **Slug:** move-block-grid
- **Tags:** signature move, drag, grid, reorder, curation, keyboard
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-block-grid
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/BlockGrid.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/BlockGrid.tsx
- **Reference:** [Studied: Are.na](https://www.are.na)

## When to use
- Moodboards, collections and curation tools
- Drag-to-reorder without a library

## Accessibility

Each block is focusable with an aria-label describing position; Alt+Arrow keys reorder; nothing requires the pointer.


## Source
`src/patterns/moves/BlockGrid.tsx`
```tsx
import { useRef, useState } from 'react'

/*
 * Signature move (Are.na): a calm grid of mixed blocks you arrange by hand, in one type size. Blocks are
 * dragged with pointer events: the dragged block follows the pointer and the grid reorders live as it crosses
 * other blocks. Keyboard: focus a block, then Alt+Arrow Left/Right to move it. One font size everywhere is
 * the point: hierarchy comes from the blocks, not from the type scale.
 */

type Block = { id: number; kind: 'text' | 'image' | 'link'; body: string }
const START: Block[] = [
  { id: 1, kind: 'text', body: 'Notes on how ordinary things are arranged.' },
  { id: 2, kind: 'image', body: '' },
  { id: 3, kind: 'link', body: 'are.na/about' },
  { id: 4, kind: 'text', body: 'A channel is a place to put things you want to keep near each other.' },
  { id: 5, kind: 'image', body: '' },
  { id: 6, kind: 'link', body: 'archive.org/details/library' },
]

export default function BlockGrid() {
  const [blocks, setBlocks] = useState(START)
  const [drag, setDrag] = useState<number | null>(null)
  const refs = useRef<Record<number, HTMLElement | null>>({})

  const move = (id: number, to: number) =>
    setBlocks((b) => {
      const from = b.findIndex((x) => x.id === id)
      if (from < 0 || to < 0 || to >= b.length || from === to) return b
      const next = b.slice()
      const [it] = next.splice(from, 1)
      next.splice(to, 0, it)
      return next
    })

  const overIndex = (x: number, y: number) =>
    blocks.findIndex((b) => {
      const r = refs.current[b.id]?.getBoundingClientRect()
      return r ? x >= r.left && x <= r.right && y >= r.top && y <= r.bottom : false
    })

  return (
    <ul
      className="grid gap-3 rounded-xl border border-border bg-surface p-4 text-[15px] sm:grid-cols-3"
      onPointerMove={(e) => {
        if (drag === null) return
        const i = overIndex(e.clientX, e.clientY)
        if (i >= 0) move(drag, i)
      }}
      onPointerUp={() => setDrag(null)}
      onPointerLeave={() => setDrag(null)}
    >
      {blocks.map((b, i) => (
        <li
          key={b.id}
          ref={(el) => { refs.current[b.id] = el }}
          tabIndex={0}
          aria-label={`${b.kind} block ${i + 1} of ${blocks.length}. Alt plus arrow keys to move.`}
          onPointerDown={() => setDrag(b.id)}
          onKeyDown={(e) => {
            if (e.altKey && e.key === 'ArrowLeft') { e.preventDefault(); move(b.id, i - 1) }
            if (e.altKey && e.key === 'ArrowRight') { e.preventDefault(); move(b.id, i + 1) }
          }}
          className={`min-h-32 cursor-grab touch-none rounded-md border p-3 transition-[transform,box-shadow,border-color] duration-200 select-none motion-reduce:transition-none ${drag === b.id ? 'scale-[1.03] border-accent shadow-lg' : 'border-border'}`}
        >
          {b.kind === 'image' ? (
            <div className="h-24 rounded-sm" style={{ background: `linear-gradient(${120 + b.id * 40}deg, hsl(${b.id * 55} 40% 55%), hsl(${b.id * 55 + 60} 35% 30%))` }} aria-hidden />
          ) : b.kind === 'link' ? (
            <p className="text-accent underline underline-offset-4">{b.body}</p>
          ) : (
            <p>{b.body}</p>
          )}
        </li>
      ))}
    </ul>
  )
}
```

# Scrollspy table of contents
> A sticky contents list that highlights the section nearest the top of the reading area, via one IntersectionObserver.
- **Category:** Signature moves
- **Slug:** move-scrollspy
- **Tags:** signature move, scrollspy, toc, docs, intersection observer, navigation
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-scrollspy
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/Scrollspy.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/Scrollspy.tsx
- **Reference:** [Studied: Tailwind CSS](https://tailwindcss.com)

## When to use
- Docs and long articles
- Orientation without a scroll handler

## Accessibility

Active link uses aria-current=location; smooth scroll is skipped under reduced motion; the nav is a labelled landmark.


## Source
`src/patterns/moves/Scrollspy.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'

/*
 * Signature move (Tailwind docs): a table of contents that follows you. An IntersectionObserver marks the
 * heading nearest the top of the reading area as current; the link for it is highlighted and exposed with
 * aria-current. Clicking a link scrolls its section into view inside the container (smooth, unless reduced
 * motion). No scroll handler, no layout reads in a loop.
 */

const SECTIONS = [
  ['install', 'Installation'],
  ['utility', 'Utility-first'],
  ['responsive', 'Responsive design'],
  ['dark', 'Dark mode'],
  ['custom', 'Customisation'],
]

export default function Scrollspy() {
  const [active, setActive] = useState('install')
  const pane = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const heads = pane.current!.querySelectorAll<HTMLElement>('h3[id]')
    const io = new IntersectionObserver(
      (entries) => {
        const hit = entries.filter((e) => e.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)[0]
        if (hit) setActive(hit.target.id.replace('sp-', ''))
      },
      { root: pane.current, rootMargin: '0px 0px -75% 0px', threshold: 0 },
    )
    heads.forEach((h) => io.observe(h))
    return () => io.disconnect()
  }, [])

  const go = (id: string) => {
    const smooth = !matchMedia('(prefers-reduced-motion: reduce)').matches
    pane.current!.querySelector(`#sp-${id}`)?.scrollIntoView({ behavior: smooth ? 'smooth' : 'auto', block: 'start' })
  }

  return (
    <div className="grid h-96 grid-cols-[11rem_1fr] overflow-hidden rounded-xl border border-border bg-surface">
      <nav aria-label="On this page" className="border-r border-border p-4">
        <p className="mb-2 font-mono text-[11px] tracking-wider text-fg-muted uppercase">On this page</p>
        <ul className="space-y-0.5">
          {SECTIONS.map(([id, label]) => (
            <li key={id}>
              <button
                onClick={() => go(id)}
                aria-current={active === id ? 'location' : undefined}
                className={`min-h-9 w-full rounded-md px-2 text-left text-sm transition-colors ${active === id ? 'bg-accent-soft font-medium text-accent' : 'text-fg-muted hover:text-fg'}`}
              >
                {label}
              </button>
            </li>
          ))}
        </ul>
      </nav>
      <div ref={pane} className="overflow-y-auto p-6" tabIndex={0} aria-label="Documentation">
        {SECTIONS.map(([id, label]) => (
          <section key={id} className="mb-10">
            <h3 id={`sp-${id}`} className="scroll-mt-2 text-xl font-semibold">{label}</h3>
            <p className="mt-2 text-sm leading-6 text-fg-muted">
              Documentation reads best when you always know where you are. As this section crosses the top of the page the link on the left lights up, and the
              rest wait their turn. Scroll the page and watch the contents follow, then click a link to jump.
            </p>
            <p className="mt-2 text-sm leading-6 text-fg-muted">A second paragraph gives the section some height so the active link can change at a believable pace.</p>
          </section>
        ))}
      </div>
    </div>
  )
}
```

# SVG-mask hero (v0)
> Type as a window onto moving colour: an SVG mask shows a gradient only where the letters are.
- **Category:** Signature moves
- **Slug:** move-v0-mask-hero
- **Tags:** signature move, svg mask, hero, type, gradient, v0
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-v0-mask-hero
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/V0MaskHero.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/V0MaskHero.tsx
- **Reference:** [Studied: v0: An unusual hero](https://v0.app/templates/VZ9EEGUUq9M)

## When to use
- Hero headlines that want motion without video
- Learning SVG masks

## Accessibility

Word is SVG text inside role=img with an aria-label; gradient is still under reduced motion; keep contrast in mind for body text.


## Source
`src/patterns/moves/V0MaskHero.tsx`
```tsx
import { useEffect, useId, useRef } from 'react'

/*
 * Vibe-coded move ("An unusual hero", v0): type as a window onto motion. An SVG <mask> made from the word
 * lets a moving gradient show through only where the letters are. The word stays real SVG <text> (selectable,
 * readable by assistive tech through the role/aria-label), and the gradient is driven by one rAF loop that
 * writes a gradientTransform. Reduced motion: the gradient is still.
 */

export default function V0MaskHero({ word = 'MOTION' }: { word?: string }) {
  const uid = useId().replace(/:/g, '')
  const grad = useRef<SVGLinearGradientElement>(null)

  useEffect(() => {
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return
    let raf = 0
    const loop = (ms: number) => {
      const t = ms / 1000
      grad.current?.setAttribute('gradientTransform', `translate(${Math.sin(t * 0.5) * 0.35} 0) rotate(${20 + Math.sin(t * 0.3) * 25} 0.5 0.5)`)
      raf = requestAnimationFrame(loop)
    }
    raf = requestAnimationFrame(loop)
    return () => cancelAnimationFrame(raf)
  }, [])

  return (
    <div className="overflow-hidden rounded-xl border border-border bg-black">
      <svg viewBox="0 0 800 300" className="block w-full" role="img" aria-label={word}>
        <defs>
          <linearGradient id={`g${uid}`} ref={grad} x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stopColor="#ff8a3d" />
            <stop offset="0.35" stopColor="#ff3d81" />
            <stop offset="0.65" stopColor="#6a5cff" />
            <stop offset="1" stopColor="#2ad4c8" />
          </linearGradient>
          <mask id={`m${uid}`}>
            <rect width="800" height="300" fill="black" />
            <text x="400" y="215" textAnchor="middle" fontSize="210" fontWeight="900" fill="white" style={{ fontFamily: 'var(--font-sans)', letterSpacing: '-8px' }}>
              {word}
            </text>
          </mask>
        </defs>
        <rect width="800" height="300" fill={`url(#g${uid})`} mask={`url(#m${uid})`} />
      </svg>
    </div>
  )
}
```

# Globe to map morph (v0)
> Blends orthographic and equirectangular projections so a globe unrolls into a flat map. No D3.
- **Category:** Signature moves
- **Slug:** move-v0-globe-to-map
- **Tags:** signature move, globe, map, projection, canvas, dataviz, v0
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-v0-globe-to-map
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/V0GlobeToMap.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/V0GlobeToMap.tsx
- **Reference:** [Studied: v0: Globe To Map Transform](https://v0.app/templates/99MAOQptgL3)

## When to use
- Data visualisation openers
- Teaching projections

## Accessibility

Canvas has a text alternative that changes with state; the toggle is a real button with aria-pressed; no auto-rotation under reduced motion.


## Source
`src/patterns/moves/V0GlobeToMap.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'

/*
 * Vibe-coded move ("Globe To Map Transform", v0): morph between two map projections. Every point of the
 * graticule (and a few cities) is projected twice, orthographic (a globe) and equirectangular (a flat map),
 * and drawn at the linear blend of the two. Back-hemisphere points fade out as the globe unrolls. No D3, no
 * data files. Reduced motion: no auto-rotation; the morph still runs on the button but jumps.
 */

const CITIES: [string, number, number][] = [
  ['Mumbai', 19.1, 72.9],
  ['London', 51.5, -0.1],
  ['New York', 40.7, -74],
  ['Tokyo', 35.7, 139.7],
  ['Sydney', -33.9, 151.2],
  ['São Paulo', -23.5, -46.6],
]
const RAD = Math.PI / 180

export default function V0GlobeToMap() {
  const ref = useRef<HTMLCanvasElement>(null)
  const [flat, setFlat] = useState(false)
  const flatRef = useRef(false)
  flatRef.current = flat

  useEffect(() => {
    const cv = ref.current!
    const ctx = cv.getContext('2d')!
    const css = getComputedStyle(cv)
    const accent = css.getPropertyValue('--accent').trim() || '#f90'
    const line = css.getPropertyValue('--fg-muted').trim() || '#999'
    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
    let t = 0
    let spin = 0
    let raf = 0
    let w = 0
    let h = 0

    const fit = () => {
      const dpr = Math.min(devicePixelRatio || 1, 2)
      w = cv.clientWidth
      h = cv.clientHeight
      cv.width = w * dpr
      cv.height = h * dpr
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
    }
    const ro = new ResizeObserver(fit)
    ro.observe(cv)
    fit()

    const project = (lat: number, lon: number) => {
      const phi = lat * RAD
      const lam = (lon - spin) * RAD
      const R = Math.min(h / 2 - 12, w / 4)
      const cx = w / 2
      const cy = h / 2
      // orthographic
      const ox = cx + R * Math.cos(phi) * Math.sin(lam)
      const oy = cy - R * Math.sin(phi)
      const visible = Math.cos(phi) * Math.cos(lam) > 0
      // equirectangular (width of the map = 2 * pi * R, clipped to the canvas)
      const mapW = Math.min(w - 24, Math.PI * 2 * R)
      const ex = cx + ((((lon + 180) % 360) - 180) / 180) * (mapW / 2)
      const ey = cy - (lat / 90) * (mapW / 4)
      return { x: ox + (ex - ox) * t, y: oy + (ey - oy) * t, a: visible ? 1 : 1 - t }
    }

    const draw = () => {
      ctx.clearRect(0, 0, w, h)
      ctx.lineWidth = 1
      ctx.strokeStyle = line
      for (let lat = -75; lat <= 75; lat += 15) {
        ctx.beginPath()
        let pen = false
        for (let lon = -180; lon <= 180; lon += 6) {
          const p = project(lat, lon)
          if (p.a < 0.05) { pen = false; continue }
          ctx.globalAlpha = 0.5 * p.a
          pen ? ctx.lineTo(p.x, p.y) : ctx.moveTo(p.x, p.y)
          pen = true
        }
        ctx.stroke()
      }
      for (let lon = -180; lon < 180; lon += 15) {
        ctx.beginPath()
        let pen = false
        for (let lat = -90; lat <= 90; lat += 6) {
          const p = project(lat, lon)
          if (p.a < 0.05) { pen = false; continue }
          ctx.globalAlpha = 0.5 * p.a
          pen ? ctx.lineTo(p.x, p.y) : ctx.moveTo(p.x, p.y)
          pen = true
        }
        ctx.stroke()
      }
      ctx.globalAlpha = 1
      ctx.fillStyle = accent
      ctx.font = '11px var(--font-mono, monospace)'
      for (const [name, lat, lon] of CITIES) {
        const p = project(lat, lon)
        if (p.a < 0.5) continue
        ctx.beginPath()
        ctx.arc(p.x, p.y, 3.5, 0, Math.PI * 2)
        ctx.fill()
        ctx.fillText(name, p.x + 7, p.y + 4)
      }
    }

    const loop = () => {
      const goal = flatRef.current ? 1 : 0
      t = reduced ? goal : t + (goal - t) * 0.07
      if (Math.abs(goal - t) < 0.002) t = goal
      if (!reduced && t < 0.99) spin += 0.25
      draw()
      raf = requestAnimationFrame(loop)
    }
    raf = requestAnimationFrame(loop)
    return () => {
      cancelAnimationFrame(raf)
      ro.disconnect()
    }
  }, [])

  return (
    <div className="relative rounded-xl border border-border bg-surface">
      <canvas ref={ref} className="block h-80 w-full" role="img" aria-label={flat ? 'A flat world map with six cities marked' : 'A rotating globe with six cities marked'} />
      <button onClick={() => setFlat((f) => !f)} aria-pressed={flat} className="absolute top-3 right-3 min-h-11 rounded-md border border-border bg-bg/80 px-4 text-sm hover:text-accent">
        {flat ? 'Roll into a globe' : 'Unroll into a map'}
      </button>
    </div>
  )
}
```

# Frame grid that trades space (v0)
> Hover or focus a frame and it grows while its row grows in the grid, so layout reflows around attention.
- **Category:** Signature moves
- **Slug:** move-v0-frame-grid
- **Tags:** signature move, layout, grid, flex, hover, v0
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-v0-frame-grid
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/V0FrameGrid.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/V0FrameGrid.tsx
- **Reference:** [Studied: v0: DynamicFrameLayout](https://v0.app/templates/v1tIli3svjV)

## When to use
- Portfolio and gallery tiles
- Flexbox transitions

## Accessibility

Frames are buttons; focus behaves like hover; layout changes are instant under reduced motion.


## Source
`src/patterns/moves/V0FrameGrid.tsx`
```tsx
import { useState } from 'react'

/*
 * Vibe-coded move ("DynamicFrameLayout", v0): frames that trade space. The pointed-at frame grows (flex-grow)
 * in its row and its row grows in the grid, so the whole layout reflows around your attention. Layout is plain
 * flexbox with transitioned flex-grow; focus does the same as hover so keyboard users get it too. Reduced
 * motion: the layout still changes, but instantly.
 */

const ROWS = [
  ['Field', 'Signal', 'Drift'],
  ['Relay', 'Lattice', 'Ember'],
]
const HUES = [24, 200, 280, 150, 330, 60]

export default function V0FrameGrid() {
  const [hot, setHot] = useState<[number, number] | null>(null)
  return (
    <div className="flex h-80 flex-col gap-2 rounded-xl border border-border bg-surface p-2" onPointerLeave={() => setHot(null)}>
      {ROWS.map((row, r) => (
        <div key={r} className="flex min-h-0 gap-2 transition-[flex-grow] duration-500 motion-reduce:transition-none" style={{ flexGrow: hot?.[0] === r ? 2.4 : 1, flexBasis: 0 }}>
          {row.map((name, c) => {
            const on = hot?.[0] === r && hot?.[1] === c
            return (
              <button
                key={name}
                onPointerEnter={() => setHot([r, c])}
                onFocus={() => setHot([r, c])}
                onBlur={() => setHot(null)}
                className="grid min-w-0 place-items-center rounded-lg text-sm font-medium text-black/80 transition-[flex-grow] duration-500 motion-reduce:transition-none"
                style={{ flexGrow: on ? 3 : 1, flexBasis: 0, background: `hsl(${HUES[r * 3 + c]} 70% 62%)` }}
              >
                {name}
              </button>
            )
          })}
        </div>
      ))}
    </div>
  )
}
```

# Email capture with every state (v0)
> Idle, invalid-after-blur, submitting, success and server-error states for a waitlist or newsletter form.
- **Category:** Signature moves
- **Slug:** move-v0-email-capture
- **Tags:** signature move, form, email, validation, waitlist, states, v0
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-v0-email-capture
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/V0EmailCapture.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/V0EmailCapture.tsx
- **Reference:** [Studied: v0: Waitlist and Newsletter templates](https://v0.app/templates/VGs1Sc5BbGi)

## When to use
- Waitlists and newsletter signups
- A reference for honest form validation

## Accessibility

aria-invalid and aria-describedby tie errors to the field; errors announce with role=alert; the success state is a status region.


## Source
`src/patterns/moves/V0EmailCapture.tsx`
```tsx
import { useState } from 'react'

/*
 * Vibe-coded move (Waitlist and Newsletter templates, v0): design every state of an email form, not just the
 * happy path. Idle, invalid (shown after the field is left, not while typing), submitting, success and
 * server error each have their own copy and look. Errors are tied to the input with aria-describedby and
 * announced politely; the button is disabled only while submitting. Type "fail@x.com" to see the error state.
 */

type S = 'idle' | 'submitting' | 'success' | 'error'
const valid = (v: string) => /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(v)

export default function V0EmailCapture() {
  const [email, setEmail] = useState('')
  const [touched, setTouched] = useState(false)
  const [state, setState] = useState<S>('idle')
  const invalid = touched && !valid(email)

  const submit = (e: React.FormEvent) => {
    e.preventDefault()
    setTouched(true)
    if (!valid(email)) return
    setState('submitting')
    window.setTimeout(() => setState(email.startsWith('fail@') ? 'error' : 'success'), 900)
  }

  if (state === 'success')
    return (
      <div className="mx-auto max-w-md rounded-xl border border-border bg-surface p-8 text-center" role="status">
        <svg viewBox="0 0 24 24" width="40" height="40" className="mx-auto text-success" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
          <path d="M5 12.5l4.5 4.5L19 7.5" style={{ strokeDasharray: 24, strokeDashoffset: 0, animation: 'v0ec-draw 500ms ease-out' }} />
        </svg>
        <style>{`@keyframes v0ec-draw { from { stroke-dashoffset: 24; } } @media (prefers-reduced-motion: reduce) { path { animation: none !important; } }`}</style>
        <h3 className="mt-3 text-lg font-semibold">You are on the list</h3>
        <p className="mt-1 text-sm text-fg-muted">We will write to {email} when your spot opens.</p>
        <button onClick={() => { setState('idle'); setEmail(''); setTouched(false) }} className="mt-4 min-h-11 text-sm text-accent hover:underline">Add another</button>
      </div>
    )

  return (
    <form onSubmit={submit} noValidate className="mx-auto max-w-md space-y-3 rounded-xl border border-border bg-surface p-6">
      <label htmlFor="v0ec-email" className="block text-sm font-medium">Join the waitlist</label>
      <div className="flex gap-2">
        <input
          id="v0ec-email"
          type="email"
          inputMode="email"
          autoComplete="email"
          value={email}
          onChange={(e) => { setEmail(e.target.value); if (state === 'error') setState('idle') }}
          onBlur={() => setTouched(true)}
          aria-invalid={invalid}
          aria-describedby="v0ec-msg"
          placeholder="you@company.com"
          className={`min-h-11 min-w-0 flex-1 rounded-md border bg-bg px-3 text-sm outline-none focus:border-accent ${invalid ? 'border-danger' : 'border-border'}`}
        />
        <button disabled={state === 'submitting'} className="min-h-11 rounded-md bg-accent px-4 text-sm font-medium text-accent-fg disabled:opacity-60">
          {state === 'submitting' ? 'Joining…' : 'Join'}
        </button>
      </div>
      <p id="v0ec-msg" role={invalid || state === 'error' ? 'alert' : undefined} className={`min-h-5 text-sm ${invalid || state === 'error' ? 'text-danger' : 'text-fg-muted'}`}>
        {invalid ? 'Enter a valid email address, like name@company.com.' : state === 'error' ? 'We could not add you just now. Try again in a moment.' : 'One email when it opens. No spam.'}
      </p>
    </form>
  )
}
```

# Progressive blur edge (v0)
> Stacked, masked backdrop-filter layers that ramp the blur toward the edge so content dissolves instead of being cut off.
- **Category:** Signature moves
- **Slug:** move-v0-blur-edge
- **Tags:** signature move, gradient blur, backdrop-filter, mask, scroll, v0
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-v0-blur-edge
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/V0BlurEdge.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/V0BlurEdge.tsx
- **Reference:** [Studied: v0: KATACHI](https://v0.app/templates/6rnQUvOhgnB)

## When to use
- Scrolling content under fixed headers or footers
- Premium soft edges

## Accessibility

Layers are decorative and pointer-events none; text beneath is fully readable when scrolled to.


## Source
`src/patterns/moves/V0BlurEdge.tsx`
```tsx
/*
 * Vibe-coded move (KATACHI, "gradient blur", v0): content that dissolves at the edge instead of being
 * cut off. Several stacked layers apply increasing backdrop-filter blur, each masked to a narrower band, so the
 * blur ramps up smoothly toward the edge (a single blur plus a fade looks like a smear). The layers are
 * decorative (aria-hidden, pointer-events none); the text underneath stays fully readable when scrolled to.
 */

const LAYERS = [
  { blur: 1, from: 0, to: 40 },
  { blur: 2, from: 15, to: 55 },
  { blur: 4, from: 30, to: 70 },
  { blur: 8, from: 50, to: 85 },
  { blur: 14, from: 70, to: 100 },
]

function Edge({ side }: { side: 'top' | 'bottom' }) {
  const dir = side === 'top' ? 'to bottom' : 'to top'
  return (
    <div aria-hidden className={`pointer-events-none absolute inset-x-0 h-16 ${side === 'top' ? 'top-0' : 'bottom-0'}`}>
      {LAYERS.map((l, i) => {
        // darkest blur sits at the very edge: reverse so the strongest layer is nearest the border
        const mask = `linear-gradient(${dir}, black ${100 - l.to}%, transparent ${100 - l.from}%)`
        return (
          <div
            key={i}
            className="absolute inset-0"
            style={{ backdropFilter: `blur(${l.blur}px)`, WebkitBackdropFilter: `blur(${l.blur}px)`, maskImage: mask, WebkitMaskImage: mask }}
          />
        )
      })}
    </div>
  )
}

export default function V0BlurEdge() {
  return (
    <div className="relative h-80 overflow-hidden rounded-xl border border-border bg-surface">
      <div className="h-full overflow-y-auto px-8 py-16" tabIndex={0} aria-label="Scrollable article">
        {Array.from({ length: 8 }, (_, i) => (
          <p key={i} className="mb-5 text-lg leading-8">
            Handmade furniture is slow on purpose. Each joint is cut, fitted and fitted again until it closes without glue, and the grain is chosen to run the same way
            across a whole table. {i === 0 ? 'Scroll to watch the text melt at the edges.' : ''}
          </p>
        ))}
      </div>
      <Edge side="top" />
      <Edge side="bottom" />
    </div>
  )
}
```

# Isometric room with pathfinding (v0)
> Click a tile and an avatar walks there by breadth-first search around furniture; arrow keys step it.
- **Category:** Signature moves
- **Slug:** move-v0-isometric-room
- **Tags:** signature move, isometric, pathfinding, bfs, canvas, game, v0
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-v0-isometric-room
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/V0IsometricRoom.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/V0IsometricRoom.tsx
- **Reference:** [Studied: v0: Habbo Hotel like Multiplayer Chatroom](https://v0.app/templates/EYN85i0FdYV)

## When to use
- Games, social spaces, interactive maps
- Learning grid pathfinding

## Accessibility

Application region with arrow-key control as the keyboard alternative; status announced in a live region; the avatar teleports under reduced motion.


## Source
`src/patterns/moves/V0IsometricRoom.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'

/*
 * Vibe-coded move (Habbo Hotel chatroom, v0): an isometric room where you click a tile and the avatar walks
 * there. Tiles are drawn as diamonds on a canvas; a breadth-first search finds the shortest 4-direction path
 * around furniture; the avatar eases from tile to tile. Keyboard: arrow keys step the avatar one tile, so the
 * room is playable without a pointer. No libraries. Reduced motion: the avatar teleports instead of walking.
 */

const N = 9
const BLOCKED = new Set(['3,3', '3,4', '4,3', '6,6', '6,5', '1,6', '2,6'])
const key = (x: number, y: number) => `${x},${y}`

function bfs(from: [number, number], to: [number, number]): [number, number][] {
  if (BLOCKED.has(key(...to))) return []
  const prev = new Map<string, string | null>([[key(...from), null]])
  const q: [number, number][] = [from]
  while (q.length) {
    const [x, y] = q.shift()!
    if (x === to[0] && y === to[1]) break
    for (const [dx, dy] of [[1, 0], [-1, 0], [0, 1], [0, -1]]) {
      const nx = x + dx, ny = y + dy
      if (nx < 0 || ny < 0 || nx >= N || ny >= N || BLOCKED.has(key(nx, ny)) || prev.has(key(nx, ny))) continue
      prev.set(key(nx, ny), key(x, y))
      q.push([nx, ny])
    }
  }
  if (!prev.has(key(...to))) return []
  const path: [number, number][] = []
  for (let k: string | null = key(...to); k; k = prev.get(k) ?? null) path.unshift(k.split(',').map(Number) as [number, number])
  return path.slice(1)
}

export default function V0IsometricRoom() {
  const ref = useRef<HTMLCanvasElement>(null)
  const state = useRef({ tile: [1, 1] as [number, number], pos: [1, 1] as [number, number], path: [] as [number, number][] })
  const [said, setSaid] = useState('Click a tile, or use the arrow keys')

  useEffect(() => {
    const cv = ref.current!
    const ctx = cv.getContext('2d')!
    const css = getComputedStyle(cv)
    const accent = css.getPropertyValue('--accent').trim() || '#f90'
    const border = css.getPropertyValue('--border').trim() || '#444'
    const surface2 = css.getPropertyValue('--surface-2').trim() || '#222'
    const fg = css.getPropertyValue('--fg').trim() || '#eee'
    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
    let w = 0, h = 0, raf = 0
    const TW = 54, TH = 27

    const fit = () => {
      const dpr = Math.min(devicePixelRatio || 1, 2)
      w = cv.clientWidth; h = cv.clientHeight
      cv.width = w * dpr; cv.height = h * dpr
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
    }
    const ro = new ResizeObserver(fit); ro.observe(cv); fit()

    const origin = () => ({ ox: w / 2, oy: h / 2 - (N * TH) / 2 + 8 })
    const toScreen = (x: number, y: number) => { const { ox, oy } = origin(); return { x: ox + ((x - y) * TW) / 2, y: oy + ((x + y) * TH) / 2 } }
    const toTile = (px: number, py: number): [number, number] | null => {
      const { ox, oy } = origin()
      const a = (px - ox) / (TW / 2), b = (py - oy) / (TH / 2)
      const x = Math.floor((a + b) / 2 + 0.5), y = Math.floor((b - a) / 2 + 0.5)
      return x >= 0 && y >= 0 && x < N && y < N ? [x, y] : null
    }

    const diamond = (x: number, y: number, fill: string, stroke = border) => {
      const c = toScreen(x, y)
      ctx.beginPath()
      ctx.moveTo(c.x, c.y - TH / 2); ctx.lineTo(c.x + TW / 2, c.y); ctx.lineTo(c.x, c.y + TH / 2); ctx.lineTo(c.x - TW / 2, c.y)
      ctx.closePath()
      ctx.fillStyle = fill; ctx.fill(); ctx.strokeStyle = stroke; ctx.stroke()
    }
    const box = (x: number, y: number) => {
      const c = toScreen(x, y)
      const hgt = 22
      ctx.fillStyle = fg; ctx.globalAlpha = 0.35
      ctx.beginPath(); ctx.moveTo(c.x - TW / 2, c.y); ctx.lineTo(c.x, c.y + TH / 2); ctx.lineTo(c.x, c.y + TH / 2 - hgt); ctx.lineTo(c.x - TW / 2, c.y - hgt); ctx.fill()
      ctx.globalAlpha = 0.2
      ctx.beginPath(); ctx.moveTo(c.x + TW / 2, c.y); ctx.lineTo(c.x, c.y + TH / 2); ctx.lineTo(c.x, c.y + TH / 2 - hgt); ctx.lineTo(c.x + TW / 2, c.y - hgt); ctx.fill()
      ctx.globalAlpha = 0.5
      ctx.beginPath(); ctx.moveTo(c.x, c.y - TH / 2 - hgt); ctx.lineTo(c.x + TW / 2, c.y - hgt); ctx.lineTo(c.x, c.y + TH / 2 - hgt); ctx.lineTo(c.x - TW / 2, c.y - hgt); ctx.fill()
      ctx.globalAlpha = 1
    }

    const draw = () => {
      ctx.clearRect(0, 0, w, h)
      for (let s = 0; s < N * 2; s++)
        for (let x = 0; x < N; x++) {
          const y = s - x
          if (y < 0 || y >= N) continue
          diamond(x, y, (x + y) % 2 ? surface2 : 'transparent')
          if (BLOCKED.has(key(x, y))) box(x, y)
        }
      const p = state.current.pos
      const c = toScreen(p[0], p[1])
      ctx.fillStyle = 'rgb(0 0 0 / 0.3)'
      ctx.beginPath(); ctx.ellipse(c.x, c.y + 4, 11, 5, 0, 0, Math.PI * 2); ctx.fill()
      ctx.fillStyle = accent
      ctx.beginPath(); ctx.roundRect(c.x - 8, c.y - 30, 16, 28, 5); ctx.fill()
      ctx.fillStyle = fg
      ctx.beginPath(); ctx.arc(c.x, c.y - 36, 8, 0, Math.PI * 2); ctx.fill()
    }

    const loop = () => {
      const s = state.current
      if (s.path.length) {
        const [tx, ty] = s.path[0]
        if (reduced) { s.pos = [tx, ty]; s.path.shift() }
        else {
          const dx = tx - s.pos[0], dy = ty - s.pos[1], d = Math.hypot(dx, dy)
          if (d < 0.08) { s.pos = [tx, ty]; s.path.shift() }
          else s.pos = [s.pos[0] + (dx / d) * 0.07, s.pos[1] + (dy / d) * 0.07]
        }
      }
      draw()
      raf = requestAnimationFrame(loop)
    }
    raf = requestAnimationFrame(loop)

    const walkTo = (t: [number, number]) => {
      const from: [number, number] = [Math.round(state.current.pos[0]), Math.round(state.current.pos[1])]
      const path = bfs(from, t)
      if (!path.length) return setSaid(BLOCKED.has(key(...t)) ? 'Something is in the way' : 'Already here')
      state.current.pos = from
      state.current.path = path
      setSaid(`Walking to ${t[0]},${t[1]}`)
    }
    const click = (e: PointerEvent) => {
      const r = cv.getBoundingClientRect()
      const t = toTile(e.clientX - r.left, e.clientY - r.top)
      if (t) walkTo(t)
    }
    const kd = (e: KeyboardEvent) => {
      const d: Record<string, [number, number]> = { ArrowRight: [1, 0], ArrowLeft: [-1, 0], ArrowDown: [0, 1], ArrowUp: [0, -1] }
      const v = d[e.key]
      if (!v) return
      e.preventDefault()
      const p = state.current.path.length ? state.current.path[state.current.path.length - 1] : [Math.round(state.current.pos[0]), Math.round(state.current.pos[1])]
      const t: [number, number] = [p[0] + v[0], p[1] + v[1]]
      if (t[0] >= 0 && t[1] >= 0 && t[0] < N && t[1] < N && !BLOCKED.has(key(...t))) { state.current.path.push(t); setSaid(`Walking to ${t[0]},${t[1]}`) }
    }
    cv.addEventListener('pointerdown', click)
    cv.addEventListener('keydown', kd)
    return () => { cancelAnimationFrame(raf); ro.disconnect(); cv.removeEventListener('pointerdown', click); cv.removeEventListener('keydown', kd) }
  }, [])

  return (
    <div className="relative rounded-xl border border-border bg-surface">
      <canvas ref={ref} tabIndex={0} role="application" aria-label="Isometric room. Click a tile to walk there, or use the arrow keys to step." className="block h-96 w-full cursor-pointer touch-none outline-offset-4" />
      <p className="pointer-events-none absolute bottom-3 left-4 rounded bg-bg/70 px-2 py-1 font-mono text-[11px] text-fg-muted" aria-live="polite">{said}</p>
    </div>
  )
}
```

# Particle logo (v0)
> A logo made of particles that scatter from the pointer and spring back. A 2D canvas replaces GLSL.
- **Category:** Signature moves
- **Slug:** move-v0-particle-logo
- **Tags:** signature move, particles, logo, canvas, spring, v0
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-v0-particle-logo
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/V0ParticleLogo.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/V0ParticleLogo.tsx
- **Reference:** [Studied: v0: v0 icon](https://v0.app/templates/qK8iWfx4VMX)

## When to use
- Brand moments on dark pages
- Logo reveals

## Accessibility

Canvas has a text alternative; the logo is drawn still under reduced motion.


## Source
`src/patterns/moves/V0ParticleLogo.tsx`
```tsx
import { useEffect, useRef } from 'react'

/*
 * Vibe-coded move (v0 icon particles, v0): a logo made of particles that scatter from the pointer and re-form.
 * The shape (a triangle here; swap in any path) is drawn once offscreen and sampled on a grid; each lit sample is
 * a particle with a home position and a spring. 2D canvas, no GLSL or three.js. Reduced motion: the logo is
 * drawn once, still. The canvas has a text alternative.
 */

export default function V0ParticleLogo() {
  const ref = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    const cv = ref.current!
    const ctx = cv.getContext('2d')!
    const fg = getComputedStyle(cv).getPropertyValue('--fg').trim() || '#fff'
    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
    type P = { hx: number; hy: number; x: number; y: number; vx: number; vy: number }
    let ps: P[] = []
    let w = 0, h = 0, raf = 0
    const mouse = { x: -999, y: -999 }

    const build = () => {
      const off = document.createElement('canvas')
      off.width = w; off.height = h
      const o = off.getContext('2d')!
      const s = Math.min(w, h) * 0.55
      o.fillStyle = '#000'
      o.beginPath()
      o.moveTo(w / 2, h / 2 - s / 2)
      o.lineTo(w / 2 + s * 0.58, h / 2 + s / 2)
      o.lineTo(w / 2 - s * 0.58, h / 2 + s / 2)
      o.closePath(); o.fill()
      const data = o.getImageData(0, 0, w, h).data
      ps = []
      for (let y = 3; y < h; y += 5) for (let x = 3; x < w; x += 5) if (data[((y | 0) * w + (x | 0)) * 4 + 3] > 128) ps.push({ hx: x, hy: y, x: Math.random() * w, y: Math.random() * h, vx: 0, vy: 0 })
    }
    const fit = () => {
      const dpr = Math.min(devicePixelRatio || 1, 2)
      w = cv.clientWidth; h = cv.clientHeight
      cv.width = w * dpr; cv.height = h * dpr
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
      build()
      if (reduced) for (const p of ps) { p.x = p.hx; p.y = p.hy }
    }
    const ro = new ResizeObserver(fit); ro.observe(cv); fit()

    const loop = () => {
      ctx.clearRect(0, 0, w, h)
      ctx.fillStyle = fg
      for (const p of ps) {
        if (!reduced) {
          const dx = p.x - mouse.x, dy = p.y - mouse.y, d = Math.hypot(dx, dy)
          let ax = (p.hx - p.x) * 0.045, ay = (p.hy - p.y) * 0.045
          if (d < 80 && d > 0) { const f = (1 - d / 80) * 5; ax += (dx / d) * f; ay += (dy / d) * f }
          p.vx = (p.vx + ax) * 0.86; p.vy = (p.vy + ay) * 0.86
          p.x += p.vx; p.y += p.vy
        }
        ctx.fillRect(p.x, p.y, 2.2, 2.2)
      }
      raf = requestAnimationFrame(loop)
    }
    raf = requestAnimationFrame(loop)
    const move = (e: PointerEvent) => { const r = cv.getBoundingClientRect(); mouse.x = e.clientX - r.left; mouse.y = e.clientY - r.top }
    const leave = () => { mouse.x = mouse.y = -999 }
    cv.addEventListener('pointermove', move); cv.addEventListener('pointerleave', leave)
    return () => { cancelAnimationFrame(raf); ro.disconnect(); cv.removeEventListener('pointermove', move); cv.removeEventListener('pointerleave', leave) }
  }, [])

  return (
    <div className="rounded-xl border border-border bg-bg">
      <canvas ref={ref} className="block h-80 w-full text-fg" role="img" aria-label="A triangle logo made of particles that scatter from the pointer" />
    </div>
  )
}
```

# Sticky footer reveal (v0)
> The page lifts like a curtain to reveal a footer pinned underneath. Pure CSS.
- **Category:** Signature moves
- **Slug:** move-v0-sticky-footer
- **Tags:** signature move, sticky, footer, reveal, parallax, css, v0
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-v0-sticky-footer
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/V0StickyFooter.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/V0StickyFooter.tsx
- **Reference:** [Studied: v0: Simple Parallax Sticky Footer Landing](https://v0.app/templates/wWvJxkk3ra7)

## When to use
- Closing sections with a big call to action
- A reveal with no scroll handlers

## Accessibility

No motion-dependent content; the footer remains reachable and readable at the end of the scroll.


## Source
`src/patterns/moves/V0StickyFooter.tsx`
```tsx
/*
 * Vibe-coded move (Simple Parallax Sticky Footer Landing, v0): the page lifts like a curtain to reveal the
 * footer. The content sits above the footer (higher z-index, with a bottom margin equal to the footer's
 * height), and the footer is position: sticky; bottom: 0, so it stays put underneath while the content
 * scrolls away. Pure CSS, no scroll handlers. Scroll the box to see it. Works with real page scroll the same way.
 */

export default function V0StickyFooter() {
  return (
    <div className="h-96 overflow-y-auto rounded-xl border border-border" tabIndex={0} aria-label="Scroll to reveal the footer">
      <div className="relative z-10 mb-56 bg-bg">
        {['Ship faster', 'Sleep better', 'Charge more'].map((t, i) => (
          <section key={t} className="grid h-60 place-items-center border-b border-border" style={{ background: i % 2 ? 'var(--surface)' : 'var(--bg)' }}>
            <h3 className="font-display text-5xl italic">{t}</h3>
          </section>
        ))}
      </div>
      <footer className="sticky bottom-0 z-0 grid h-56 place-items-center bg-accent text-accent-fg">
        <p className="font-display text-6xl italic">Let’s talk.</p>
      </footer>
    </div>
  )
}
```

# Collapsible dashboard shell (v0)
> An app shell with a collapsible sidebar, view tabs and a slide-in chat panel.
- **Category:** Signature moves
- **Slug:** move-v0-dashboard-shell
- **Tags:** signature move, dashboard, sidebar, app shell, tabs, chat, v0
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-v0-dashboard-shell
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/V0DashboardShell.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/V0DashboardShell.tsx
- **Reference:** [Studied: v0: Dashboard M.O.N.K.Y](https://v0.app/templates/b7GDYVxuoGC)

## When to use
- Internal tools and dashboards
- Sidebars that keep accessible names when collapsed

## Accessibility

Collapse is a button with aria-expanded; nav links keep aria-labels when collapsed; the hidden chat panel is inert; widths snap under reduced motion.


## Source
`src/patterns/moves/V0DashboardShell.tsx`
```tsx
import { useState } from 'react'

/*
 * Vibe-coded move (Dashboard M.O.N.K.Y, v0): an app shell that makes room. A collapsible sidebar (labels and
 * icons <-> icons only), a top bar with view tabs, and a slide-in chat panel. Collapse state is a button with
 * aria-expanded; the nav keeps accessible names when collapsed (labels move to aria-label); tabs use real
 * tablist semantics. Widths animate; under reduced motion they snap.
 */

const NAV = [
  ['◧', 'Overview'],
  ['↗', 'Traffic'],
  ['◎', 'Goals'],
  ['☰', 'Reports'],
]

export default function V0DashboardShell() {
  const [collapsed, setCollapsed] = useState(false)
  const [chat, setChat] = useState(false)
  const [view, setView] = useState<'Overview' | 'Activity'>('Overview')

  return (
    <div className="flex h-96 overflow-hidden rounded-xl border border-border bg-surface">
      <nav aria-label="Sidebar" className="flex shrink-0 flex-col border-r border-border bg-bg/40 p-2 transition-[width] duration-300 motion-reduce:transition-none" style={{ width: collapsed ? 56 : 176 }}>
        <button onClick={() => setCollapsed((c) => !c)} aria-expanded={!collapsed} aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'} className="mb-2 grid min-h-11 w-full place-items-center rounded-md text-fg-muted hover:bg-surface-2 hover:text-fg">
          {collapsed ? '»' : '«'}
        </button>
        <ul className="space-y-1">
          {NAV.map(([icon, label], i) => (
            <li key={label}>
              <a href="#/move-v0-dashboard-shell" aria-label={label} aria-current={i === 0 ? 'page' : undefined} className={`flex min-h-11 items-center gap-3 rounded-md px-3 text-sm ${i === 0 ? 'bg-accent-soft text-accent' : 'text-fg-muted hover:bg-surface-2 hover:text-fg'}`}>
                <span aria-hidden className="w-4 shrink-0 text-center">{icon}</span>
                {!collapsed && <span>{label}</span>}
              </a>
            </li>
          ))}
        </ul>
      </nav>
      <div className="flex min-w-0 flex-1 flex-col">
        <header className="flex min-h-12 items-center justify-between border-b border-border px-4">
          <div role="tablist" aria-label="View" className="flex gap-1">
            {(['Overview', 'Activity'] as const).map((v) => (
              <button key={v} role="tab" aria-selected={view === v} onClick={() => setView(v)} className={`min-h-9 rounded-md px-3 text-sm ${view === v ? 'bg-surface-2 text-fg' : 'text-fg-muted hover:text-fg'}`}>{v}</button>
            ))}
          </div>
          <button onClick={() => setChat((c) => !c)} aria-expanded={chat} className="min-h-9 rounded-md border border-border px-3 text-sm text-fg-muted hover:text-fg">Chat</button>
        </header>
        <div className="relative flex-1 overflow-hidden p-4">
          <div className="grid grid-cols-3 gap-3">
            {(view === 'Overview' ? [['Visits', '12.4k'], ['Signups', '842'], ['Revenue', '$9.1k']] : [['Today', '311'], ['Week', '2.0k'], ['Month', '8.7k']]).map(([k, v]) => (
              <div key={k} className="rounded-lg border border-border bg-bg/40 p-3">
                <p className="text-xs text-fg-muted">{k}</p>
                <p className="font-mono text-xl tabular-nums">{v}</p>
              </div>
            ))}
          </div>
          <aside aria-label="Chat" aria-hidden={!chat} inert={!chat} className="absolute inset-y-0 right-0 w-64 border-l border-border bg-surface-2 p-3 text-sm transition-transform duration-300 motion-reduce:transition-none" style={{ transform: chat ? 'none' : 'translateX(100%)' }}>
            <p className="text-fg-muted">Ask about this dashboard…</p>
          </aside>
        </div>
      </div>
    </div>
  )
}
```

# Perforated cover tear (Neutomni)
> A poster-sized wordmark with a dashed cut line. Scrolling slides the top half up and the bottom half down to reveal what was underneath.
- **Category:** Signature moves
- **Slug:** move-perforated-reveal
- **Tags:** signature move, hero, scroll, clip, reveal, wordmark, awwwards
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-perforated-reveal
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/PerforatedReveal.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/PerforatedReveal.tsx
- **Reference:** [Studied: Neutomni (Awwwards Site of the Day)](https://neutomni.com)

## When to use
- A bold opening that should feel physical
- Revealing content without moving or reflowing it

## Accessibility

The scroll box is focusable with an accessible name; the revealed content is always in the DOM; under reduced motion the tear is a single jump.


## Source
`src/patterns/moves/PerforatedReveal.tsx`
```tsx
import { useEffect, useRef } from 'react'

/*
 * Signature move (Neutomni, Awwwards SOTD): a poster-sized wordmark with a dashed "cut along line" through it.
 * Scrolling tears the sheet along the line: the top half slides up, the bottom half slides down, and the content
 * that was underneath is revealed. Two clipped copies of one hero, moved with transforms only.
 * Reduced motion: the tear is a single jump at the halfway point, no travelling.
 */

const H = 340

function Hero() {
  return (
    <div className="absolute inset-x-0 bg-[#cf1830] text-white" style={{ height: H }} aria-hidden>
      <p className="px-3 pt-3 font-display text-[clamp(64px,14vw,150px)] leading-[0.9] tracking-tight uppercase">Slit open</p>
      <p className="absolute right-4 bottom-4 font-mono text-[11px] tracking-widest uppercase">scroll to tear</p>
    </div>
  )
}

export default function PerforatedReveal() {
  const box = useRef<HTMLDivElement>(null)
  const top = useRef<HTMLDivElement>(null)
  const bot = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const el = box.current!
    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
    let raf = 0
    const apply = () => {
      raf = 0
      const max = el.scrollHeight - el.clientHeight
      let p = max > 0 ? Math.min(1, el.scrollTop / (max * 0.7)) : 0
      if (reduced) p = p > 0.5 ? 1 : 0
      if (top.current) top.current.style.transform = `translateY(${-p * 100}%)`
      if (bot.current) bot.current.style.transform = `translateY(${p * 100}%)`
    }
    const on = () => {
      if (!raf) raf = requestAnimationFrame(apply)
    }
    el.addEventListener('scroll', on, { passive: true })
    apply()
    return () => {
      el.removeEventListener('scroll', on)
      cancelAnimationFrame(raf)
    }
  }, [])

  return (
    <div className="overflow-hidden rounded-xl border border-border">
      <div ref={box} tabIndex={0} role="region" aria-label="Scroll to tear the sheet open" className="relative overflow-y-auto" style={{ height: H }}>
        <div style={{ height: H * 3 }}>
          <div className="sticky top-0 overflow-hidden" style={{ height: H }}>
            <div className="absolute inset-0 grid place-content-center bg-[#f4efe6] px-8 text-center text-[#17120f]">
              <p className="font-display text-3xl italic sm:text-4xl">What was underneath</p>
              <p className="mx-auto mt-2 max-w-sm text-sm">The content sits still. Only the cover moves, so nothing has to reflow while it opens.</p>
            </div>
            <div ref={top} className="absolute inset-x-0 top-0 overflow-hidden will-change-transform" style={{ height: H * 0.55 }}>
              <Hero />
            </div>
            <div ref={bot} className="absolute inset-x-0 bottom-0 overflow-hidden will-change-transform" style={{ height: H * 0.45 }}>
              <div className="absolute inset-x-0 bottom-0" style={{ height: H }}>
                <Hero />
              </div>
            </div>
            <div className="pointer-events-none absolute inset-x-0 border-t-2 border-dashed border-white/80" style={{ top: H * 0.55 }} aria-hidden />
          </div>
        </div>
      </div>
    </div>
  )
}
```

# Drafting sheet drawing (Heron AI)
> Fine red rules close in on a pencil elevation that draws itself line by line as you scroll. SVG stroke offsets and transforms only.
- **Category:** Signature moves
- **Slug:** move-drafting-rules
- **Tags:** signature move, svg, drawing, blueprint, paper, scroll, awwwards
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-drafting-rules
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/DraftingRules.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/DraftingRules.tsx
- **Reference:** [Studied: Heron AI (Awwwards Site of the Day)](https://heronaiapp.com)

## When to use
- Architecture, engineering, design-tool and craft brands
- A page that should feel like an instrument rather than a brochure

## Accessibility

The drawing is an img with a descriptive label; under reduced motion it is complete from the start.


## Source
`src/patterns/moves/DraftingRules.tsx`
```tsx
import { useEffect, useRef } from 'react'

/*
 * Signature move (Heron AI, Awwwards SOTD): a drafting-sheet page. Fine red rules cross the paper like construction
 * lines, a pencil elevation draws itself as you scroll, and the rules close in around it. All of it is SVG stroke
 * offsets and transforms driven by one progress number. Reduced motion: the drawing is complete and the rules rest.
 */

const LINES = [
  'M20 200 H220', // ground
  'M30 200 V90 H110 V200', // left block
  'M110 200 V60 H190 V200', // right block
  'M110 60 L150 30 L190 60', // roof
  'M45 120 H95 M45 150 H95 M125 100 H175 M125 130 H175 M125 160 H175', // windows
  'M20 200 L10 215 M220 200 L230 215', // footings
]

export default function DraftingRules() {
  const box = useRef<HTMLDivElement>(null)
  const paths = useRef<(SVGPathElement | null)[]>([])
  const ruleA = useRef<HTMLDivElement>(null)
  const ruleB = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const el = box.current!
    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
    let raf = 0
    const lens = paths.current.map((p) => p?.getTotalLength() ?? 0)
    const apply = () => {
      raf = 0
      const max = el.scrollHeight - el.clientHeight
      const p = reduced ? 1 : max > 0 ? Math.min(1, el.scrollTop / max) : 0
      paths.current.forEach((path, i) => {
        if (!path) return
        const start = i / LINES.length
        const local = Math.min(1, Math.max(0, (p - start * 0.7) / 0.45))
        path.style.strokeDashoffset = String(lens[i] * (1 - local))
      })
      if (ruleA.current) ruleA.current.style.transform = `translateY(${p * 70}px)`
      if (ruleB.current) ruleB.current.style.transform = `translateY(${-p * 70}px)`
    }
    const on = () => {
      if (!raf) raf = requestAnimationFrame(apply)
    }
    el.addEventListener('scroll', on, { passive: true })
    apply()
    return () => {
      el.removeEventListener('scroll', on)
      cancelAnimationFrame(raf)
    }
  }, [])

  return (
    <div className="overflow-hidden rounded-xl border border-border">
      <div ref={box} tabIndex={0} role="region" aria-label="Scroll to draw the elevation" className="overflow-y-auto" style={{ height: 360 }}>
        <div style={{ height: 960 }}>
          <div className="sticky top-0 grid place-items-center overflow-hidden bg-[#f1eee6] text-[#2a2622]" style={{ height: 360 }}>
            <div ref={ruleA} className="absolute inset-x-0 top-[4%] h-px bg-[#b3391f]/70" aria-hidden />
            <div ref={ruleB} className="absolute inset-x-0 bottom-[4%] h-px bg-[#b3391f]/70" aria-hidden />
            <p className="absolute top-3 right-4 font-mono text-[10px] tracking-widest text-[#b3391f] uppercase">Sheet 02 / Elevation</p>
            <svg viewBox="0 0 240 230" className="h-[78%]" role="img" aria-label="Pencil elevation of a two-block house, drawn as you scroll">
              {LINES.map((d, i) => (
                <path
                  key={i}
                  ref={(n) => { paths.current[i] = n }}
                  d={d}
                  fill="none"
                  stroke="#2a2622"
                  strokeWidth="1.2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  style={{ strokeDasharray: 1000, strokeDashoffset: 1000 }}
                />
              ))}
              <circle cx="150" cy="30" r="2.5" fill="#b3391f" />
            </svg>
          </div>
        </div>
      </div>
    </div>
  )
}
```

# Inverting header (twks)
> A sticky header in white with mix-blend-mode difference, so it stays readable over any light or dark band. No JavaScript.
- **Category:** Signature moves
- **Slug:** move-difference-nav
- **Tags:** signature move, header, navigation, blend mode, css, awwwards
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-difference-nav
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/DifferenceNav.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/DifferenceNav.tsx
- **Reference:** [Studied: twks (Awwwards Site of the Day)](https://twks.ch/en)

## When to use
- Pages that alternate light and dark sections
- Removing per-section header colour logic

## Accessibility

Links stay ordinary links; the blend is paint only. Check contrast: mid-greys behind the header produce poor contrast.


## Source
`src/patterns/moves/DifferenceNav.tsx`
```tsx
/*
 * Signature move (twks, Awwwards SOTD): a header whose text is always readable because it inverts against whatever
 * scrolls under it (mix-blend-mode: difference on white text). No JavaScript, no per-section colour logic.
 * Keep the nav links as ordinary links; the blend is only paint. Caveat: on mid-greys the inverted text has low
 * contrast, so keep the content behind it either clearly light or clearly dark.
 */

const BANDS = [
  ['#f2efe8', 'Light paper'],
  ['#0f0f12', 'Near black'],
  ['#e5532d', 'Signal orange'],
  ['#fafafa', 'White'],
]

export default function DifferenceNav() {
  return (
    <div className="overflow-hidden rounded-xl border border-border">
      <div tabIndex={0} role="region" aria-label="Scroll: the header inverts against each band" className="relative isolate overflow-y-auto" style={{ height: 340 }}>
        <header className="sticky top-0 z-10 flex items-center justify-between px-5 py-4 text-white mix-blend-difference">
          <a href="#diff" onClick={(e) => e.preventDefault()} className="text-lg font-semibold tracking-tight">studio</a>
          <nav aria-label="Demo" className="flex gap-5 text-sm">
            {['work', 'agency', 'journal', 'contact'].map((l) => (
              <a key={l} href="#diff" onClick={(e) => e.preventDefault()} className="underline-offset-4 hover:underline">
                {l}
              </a>
            ))}
          </nav>
        </header>
        <div className="-mt-[56px]">
          {BANDS.map(([bg, name]) => (
            <section key={name} className="grid place-content-center px-6 text-center" style={{ background: bg, height: 240 }}>
              <p className="font-display text-4xl italic" style={{ color: bg === '#0f0f12' || bg === '#e5532d' ? '#fff' : '#111' }}>
                {name}
              </p>
            </section>
          ))}
        </div>
      </div>
    </div>
  )
}
```

# Word-by-word focus pull (Butter)
> A statement that sharpens one word at a time as you scroll, while rounded icon chips drift across it. Blur and opacity only.
- **Category:** Signature moves
- **Slug:** move-focus-words
- **Tags:** signature move, text, blur, scroll, saas, awwwards
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-focus-words
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/FocusWords.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/FocusWords.tsx
- **Reference:** [Studied: Butter (Awwwards Site of the Day)](https://www.butter.video)

## When to use
- An opening claim that should be read, not skimmed
- SaaS and creative-tool landing pages

## Accessibility

The whole sentence is in the DOM from the start; chips are decorative and hidden from assistive tech; under reduced motion every word is sharp.


## Source
`src/patterns/moves/FocusWords.tsx`
```tsx
import { useEffect, useRef } from 'react'

/*
 * Signature move (Butter, Awwwards SOTD): a statement that comes into focus word by word as you scroll, while small
 * chips drift past. Each word's blur and opacity are set from one scroll-progress number; blur and opacity do not
 * trigger layout. The full sentence is in the DOM from the start, so screen readers and search read it whole.
 * Reduced motion: every word is sharp immediately.
 */

const TEXT = 'A video editor where creatives can finally work the way they think, without leaving the browser.'.split(' ')
const CHIPS = [
  ['#f26b3a', 'Cut'],
  ['#3a6bf2', 'Type'],
  ['#1f1f24', 'Mix'],
  ['#e23a6a', 'Grade'],
]

export default function FocusWords() {
  const box = useRef<HTMLDivElement>(null)
  const words = useRef<(HTMLSpanElement | null)[]>([])
  const chips = useRef<(HTMLSpanElement | null)[]>([])

  useEffect(() => {
    const el = box.current!
    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
    let raf = 0
    const apply = () => {
      raf = 0
      const max = el.scrollHeight - el.clientHeight
      const p = reduced ? 1 : max > 0 ? Math.min(1, el.scrollTop / max) : 0
      words.current.forEach((w, i) => {
        if (!w) return
        const k = Math.min(1, Math.max(0, p * 1.25 * TEXT.length - i) / 2.5)
        w.style.filter = `blur(${(1 - k) * 9}px)`
        w.style.opacity = String(0.25 + k * 0.75)
      })
      chips.current.forEach((c, i) => {
        if (!c) return
        c.style.transform = `translate(${(i * 70 - 120) * (1 - p) + p * (i % 2 ? 50 : -50)}px, ${(i % 2 ? 1 : -1) * 36 * (1 - p)}px) rotate(${(i - 1.5) * 8 * (1 - p)}deg)`
      })
    }
    const on = () => {
      if (!raf) raf = requestAnimationFrame(apply)
    }
    el.addEventListener('scroll', on, { passive: true })
    apply()
    return () => {
      el.removeEventListener('scroll', on)
      cancelAnimationFrame(raf)
    }
  }, [])

  return (
    <div className="overflow-hidden rounded-xl border border-border">
      <div ref={box} tabIndex={0} role="region" aria-label="Scroll to bring the sentence into focus" className="overflow-y-auto" style={{ height: 340 }}>
        <div style={{ height: 900 }}>
          <div className="sticky top-0 grid place-items-center overflow-hidden bg-[#f6f6f4] px-8 text-[#15151a]" style={{ height: 340 }}>
            <p className="relative max-w-xl text-center text-2xl leading-snug font-medium sm:text-3xl">
              {TEXT.map((w, i) => (
                <span key={i}>
                  <span ref={(n) => { words.current[i] = n }} className="inline-block will-change-[filter]">{w}</span>{' '}
                </span>
              ))}
            </p>
            <div className="pointer-events-none absolute inset-x-0 bottom-6 flex justify-center gap-3" aria-hidden>
              {CHIPS.map(([bg, t], i) => (
                <span
                  key={t}
                  ref={(n) => { chips.current[i] = n }}
                  className="rounded-xl px-3 py-1.5 text-xs font-semibold text-white shadow-lg"
                  style={{ background: bg }}
                >
                  {t}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
```

# System status modules (Pensatori Irrazionali)
> Numbered monospace modules with IDs, a column of status lines and a turning globe. The module in view becomes active and the lights come on in order.
- **Category:** Signature moves
- **Slug:** move-status-modules
- **Tags:** signature move, monospace, status, scroll, documentation, awwwards
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-status-modules
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/StatusModules.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/StatusModules.tsx
- **Reference:** [Studied: Pensatori Irrazionali (Awwwards Site of the Day)](https://pensatori-irrazionali.com)

## When to use
- Studios, infrastructure and research brands that want an instrument-panel feel
- One piece of state driving two columns

## Accessibility

The active module is marked with aria-current; the scroll region is focusable and labelled; the globe is decorative and stops under reduced motion; status is also written in words.


## Source
`src/patterns/moves/StatusModules.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'

/*
 * Signature move (Pensatori Irrazionali, Awwwards SOTD): a studio page set like system documentation. Numbered
 * modules in monospace on the left, a column of status lines on the right, and a turning globe in the middle. As you
 * scroll, the module in the middle of the box becomes the active one, the others dim, and the status lights come on in
 * order. State is the active index only; the dimming is opacity. Reduced motion: the globe stops turning.
 */

const MODULES = [
  ['IDENTITY', 'STUDIO-ID-A01', 'A container for intention. Form emerges before explanation.'],
  ['SYSTEMS', 'SYS-CORE-B07', 'Systems are not designed. They are discovered through constraints.'],
  ['INTERFACE', 'UI-THRESHOLD-C22', 'An interface is a negotiation between machine logic and human instinct.'],
  ['NARRATIVE', 'NAR-SEQ-D09', 'Narrative is not linear. It folds, repeats and leaks across media.'],
  ['FORM', 'FORM-FIELD-E03', 'Form is a consequence, not a decision. Shape follows pressure.'],
] as const

export default function StatusModules() {
  const box = useRef<HTMLDivElement>(null)
  const [active, setActive] = useState(0)

  useEffect(() => {
    const el = box.current!
    const on = () => {
      const max = el.scrollHeight - el.clientHeight
      const p = max > 0 ? el.scrollTop / max : 0
      setActive(Math.min(MODULES.length - 1, Math.round(p * (MODULES.length - 1))))
    }
    el.addEventListener('scroll', on, { passive: true })
    return () => el.removeEventListener('scroll', on)
  }, [])

  return (
    <div className="overflow-hidden rounded-xl border border-border bg-[#0d0d0f] text-[#e8e8e8]">
      <div ref={box} tabIndex={0} role="region" aria-label="Scroll through the modules" className="overflow-y-auto" style={{ height: 340 }}>
        <div style={{ height: 760 }}>
          <div className="sticky top-0 grid grid-cols-[1fr_auto_1fr] items-center gap-4 overflow-hidden px-5 font-mono text-[11px] leading-5" style={{ height: 340 }}>
            <ol className="space-y-3">
              {MODULES.map(([name, id, text], i) => (
                <li key={name} className="transition-opacity duration-300 motion-reduce:transition-none" style={{ opacity: i === active ? 1 : 0.8 }} aria-current={i === active ? 'true' : undefined}>
                  <p>
                    {name} / MODULE {String(i + 1).padStart(2, '0')}
                  </p>
                  <p className="text-[#b4b4bd]">ID: {id}</p>
                  {i === active && <p className="mt-1 max-w-[22ch] text-[#e8e8e8]">{text}</p>}
                </li>
              ))}
            </ol>
            <div aria-hidden className="relative grid size-28 place-items-center">
              <div className="absolute inset-0 rounded-full border border-[#555] motion-safe:animate-[spin_24s_linear_infinite]" style={{ borderStyle: 'dashed' }} />
              <div className="absolute inset-3 rounded-full border border-[#888]" />
              <div className="size-14 rounded-full bg-gradient-to-br from-white to-[#777]" />
            </div>
            <ul className="space-y-1 text-right">
              {Array.from({ length: 7 }, (_, i) => (
                <li key={i} className="flex items-center justify-end gap-2" style={{ opacity: i <= active + 1 ? 1 : 0.35 }}>
                  0{i + 1} STATUS / {i <= active + 1 ? 'ACTIVE' : 'IDLE'}
                  <span className="size-2 rounded-full" style={{ background: i <= active + 1 ? '#4ade80' : '#555' }} aria-hidden />
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  )
}
```

# Scatter and grid layout toggle (Gil Huybrecht)
> The same tiles in a tidy grid or scattered like prints on a table; a toggle moves them with transforms only.
- **Category:** Signature moves
- **Slug:** move-scatter-grid
- **Tags:** signature move, portfolio, gallery, grid, layout toggle, awwwards
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-scatter-grid
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/ScatterGrid.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/ScatterGrid.tsx
- **Reference:** [Studied: Gil Huybrecht (Awwwards Site of the Day)](https://gilhuybrecht.com)

## When to use
- Portfolios and indexes with a small set of visual items
- Two layouts for one list without remounting

## Accessibility

Tiles are a plain list in both layouts; the toggle is a pressed-state button group with 44px targets; movement is instant under reduced motion.


## Source
`src/patterns/moves/ScatterGrid.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'

/*
 * Signature move (Gil Huybrecht, Awwwards SOTD): a portfolio index you can lay out two ways. The same tiles sit in
 * a tidy grid or are scattered across the page like prints on a table; a toggle moves them between the two. Only
 * transforms change, so the switch is cheap. Tiles are a plain list in both modes. Reduced motion: they jump.
 */

const WORKS = [
  ['Studio OADO', '#a8402b'],
  ['The Lookback', '#2f5d62'],
  ['Partners in Creation', '#e0b25b'],
  ['Recent Projects', '#6d597a'],
  ['Form Follows Feeling', '#3d5a80'],
  ['Index 2026', '#8d8741'],
] as const

// Fixed scatter positions as fractions of the free space, plus a small tilt, so the scatter is deterministic.
const SCATTER = [
  [0.02, 0.05, -4],
  [0.42, 0.0, 3],
  [0.78, 0.12, -2],
  [0.12, 0.58, 5],
  [0.5, 0.52, -3],
  [0.84, 0.62, 2],
] as const

export default function ScatterGrid() {
  const area = useRef<HTMLUListElement>(null)
  const [w, setW] = useState(600)
  const [mode, setMode] = useState<'grid' | 'scatter'>('scatter')

  useEffect(() => {
    const el = area.current!
    const ro = new ResizeObserver(([e]) => setW(e.contentRect.width))
    ro.observe(el)
    return () => ro.disconnect()
  }, [])

  const cols = w < 420 ? 2 : 3
  const gap = 12
  const cw = Math.min(190, (w - gap * (cols - 1)) / cols)
  const ch = cw * 0.68
  const rows = Math.ceil(WORKS.length / cols)
  const H = Math.max(rows * (ch + gap) - gap, ch * 2.7)

  return (
    <div className="rounded-xl border border-border bg-[#0b0b0b] p-4 text-white">
      <div className="mb-3 flex justify-end gap-1 text-xs" role="group" aria-label="Layout">
        {(['grid', 'scatter'] as const).map((m) => (
          <button key={m} aria-pressed={mode === m} onClick={() => setMode(m)} className={`min-h-11 rounded-md px-4 capitalize ${mode === m ? 'bg-white text-black' : 'text-white/70 hover:text-white'}`}>
            {m}
          </button>
        ))}
      </div>
      <ul ref={area} aria-label="Selected work" className="relative" style={{ height: H }}>
        {WORKS.map(([name, color], i) => {
          const r = Math.floor(i / cols)
          const c = i % cols
          const [fx, fy, rot] = SCATTER[i]
          const x = mode === 'grid' ? c * (cw + gap) : fx * Math.max(0, w - cw)
          const y = mode === 'grid' ? r * (ch + gap) : fy * Math.max(0, H - ch)
          return (
            <li
              key={name}
              className="absolute top-0 left-0 flex flex-col justify-between rounded-sm p-2 text-[11px] font-medium text-white/95 transition-transform duration-700 ease-out-expo motion-reduce:transition-none"
              style={{ width: cw, height: ch, background: color, transform: `translate(${x}px, ${y}px) rotate(${mode === 'grid' ? 0 : rot}deg)` }}
            >
              <span className="font-mono text-[10px]">{String(i + 1).padStart(2, '0')}</span>
              {name}
            </li>
          )
        })}
      </ul>
    </div>
  )
}
```

# Counter into wordmark (Edolus)
> A percentage counts up in the dark, then the wordmark rises into place letter by letter. Replayable.
- **Category:** Signature moves
- **Slug:** move-counter-wordmark
- **Tags:** signature move, preloader, wordmark, counter, text, awwwards
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-counter-wordmark
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/CounterWordmark.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/CounterWordmark.tsx
- **Reference:** [Studied: EDOLUS (Awwwards Site of the Day)](https://edolus.com)

## When to use
- A short, branded intro that earns its time
- Hiding asset loading behind something intentional

## Accessibility

The wordmark has a text name for assistive technology; the counter is not live-announced; reduced motion shows the finished state at once.


## Source
`src/patterns/moves/CounterWordmark.tsx`
```tsx
import { useCallback, useEffect, useRef, useState } from 'react'

/*
 * Signature move (Edolus, Awwwards SOTD): a preloader that is part of the brand. A small percentage counts up in the
 * dark; when it reaches 100 the wordmark rises into place letter by letter and the counter steps aside. Letters move
 * with transform only. The wordmark is real text in the DOM from the start (visually hidden until revealed) so it is
 * announced and indexed. Reduced motion: the wordmark simply appears.
 */

const WORD = 'EDOLUS'.split('')

export default function CounterWordmark() {
  const [n, setN] = useState(0)
  const [run, setRun] = useState(0)
  const raf = useRef(0)
  const reduced = typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches

  const play = useCallback(() => setRun((r) => r + 1), [])

  useEffect(() => {
    if (reduced) {
      setN(100)
      return
    }
    setN(0)
    const t0 = performance.now()
    const tick = (t: number) => {
      const p = Math.min(1, (t - t0) / 2200)
      setN(Math.round((1 - Math.pow(1 - p, 2.4)) * 100))
      if (p < 1) raf.current = requestAnimationFrame(tick)
    }
    raf.current = requestAnimationFrame(tick)
    return () => cancelAnimationFrame(raf.current)
  }, [run, reduced])

  const done = n >= 100
  return (
    <div className="relative grid h-72 place-items-center overflow-hidden rounded-xl border border-border bg-black text-white">
      <h3 className="flex text-5xl font-light tracking-[0.2em] sm:text-6xl" aria-label="Edolus">
        {WORD.map((ch, i) => (
          <span key={i} className="overflow-hidden pr-[0.12em]" aria-hidden>
            <span
              className="inline-block transition-transform duration-700 ease-out-expo motion-reduce:transition-none"
              style={{ transform: done ? 'none' : 'translateY(110%)', transitionDelay: done ? `${i * 70}ms` : '0ms' }}
            >
              {ch}
            </span>
          </span>
        ))}
      </h3>
      <p
        className="absolute bottom-10 font-mono text-xs tracking-widest transition-opacity duration-500 motion-reduce:transition-none"
        style={{ opacity: done ? 0.35 : 1 }}
        role="status"
        aria-live="off"
      >
        {String(n).padStart(3, '0')}%
      </p>
      <button onClick={play} className="absolute top-3 right-3 min-h-11 rounded-md border border-white/25 px-3 text-xs text-white/80 hover:text-white">
        Replay
      </button>
    </div>
  )
}
```

# Sentence with inline picture chips (Noho)
> A statement where small pictures sit between the words at the size of a letter, each word and chip rising through its own mask as you scroll.
- **Category:** Signature moves
- **Slug:** move-inline-chips
- **Tags:** signature move, typography, inline images, reveal, scroll, awwwards
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-inline-chips
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/InlineChips.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/InlineChips.tsx
- **Reference:** [Studied: Noho (Awwwards Site of the Day)](https://noho.ink)

## When to use
- A single claim that should be read slowly
- Brands with a materials or ingredients story

## Accessibility

The sentence is plain text in the DOM; chips are decorative and hidden from assistive tech; the scroll region is labelled; everything is in place under reduced motion.


## Source
`src/patterns/moves/InlineChips.tsx`
```tsx
import { useEffect, useRef } from 'react'

/*
 * Signature move (Noho, Awwwards SOTD): a statement where small picture chips sit inside the sentence, between the
 * words, at the size of a letter. Here the pictures are drawn swatches so there is no asset to ship. Each word and
 * chip rises through its own mask as you scroll, staggered by position. Transforms only. The sentence is plain text in
 * the DOM; chips are decorative. Reduced motion: everything is in place immediately.
 */

type Tok = string | { chip: string; label: string }
const TOKENS: Tok[] = [
  'Our', 'furniture', 'is', 'made', 'from', { chip: '#7aa05b', label: 'leaf' }, 'sustainable', 'ingredients', 'like', { chip: '#c9a24a', label: 'bean' }, 'castor', 'beans,',
  'old', 'carpets', { chip: '#6d597a', label: 'weave' }, 'and', 'recycled', 'fishing', { chip: '#3d5a80', label: 'net' }, 'nets.',
]

export default function InlineChips() {
  const box = useRef<HTMLDivElement>(null)
  const items = useRef<(HTMLSpanElement | null)[]>([])

  useEffect(() => {
    const el = box.current!
    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
    let raf = 0
    const apply = () => {
      raf = 0
      const max = el.scrollHeight - el.clientHeight
      const p = reduced ? 1 : max > 0 ? Math.min(1, el.scrollTop / max) : 0
      items.current.forEach((n, i) => {
        if (!n) return
        const k = Math.min(1, Math.max(0, p * 1.5 * TOKENS.length - i) / 3)
        n.style.transform = `translateY(${(1 - k) * 110}%)`
      })
    }
    const on = () => {
      if (!raf) raf = requestAnimationFrame(apply)
    }
    el.addEventListener('scroll', on, { passive: true })
    apply()
    return () => {
      el.removeEventListener('scroll', on)
      cancelAnimationFrame(raf)
    }
  }, [])

  return (
    <div className="overflow-hidden rounded-xl border border-border">
      <div ref={box} tabIndex={0} role="region" aria-label="Scroll to reveal the sentence" className="overflow-y-auto" style={{ height: 340 }}>
        <div style={{ height: 860 }}>
          <div className="sticky top-0 grid place-items-center bg-[#f1ede6] px-8 text-[#1d1b18]" style={{ height: 340 }}>
            <p className="max-w-xl text-center text-3xl leading-[1.35] font-medium tracking-tight sm:text-4xl">
              {TOKENS.map((t, i) =>
                typeof t === 'string' ? (
                  <span key={i} className="inline-block overflow-hidden align-bottom">
                    <span ref={(n) => { items.current[i] = n }} className="inline-block">{t}&nbsp;</span>
                  </span>
                ) : (
                  <span key={i} className="mx-1 inline-block h-[0.9em] w-[1.5em] overflow-hidden rounded-md align-[-0.12em]" aria-hidden>
                    <span ref={(n) => { items.current[i] = n }} className="block h-full w-full" style={{ background: `repeating-linear-gradient(45deg, ${t.chip}, ${t.chip} 5px, color-mix(in srgb, ${t.chip} 70%, #fff) 5px, color-mix(in srgb, ${t.chip} 70%, #fff) 9px)` }} />
                  </span>
                ),
              )}
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}
```

# One script word in a bold headline (LxL Creative)
> A heavy caps headline with a single hand-written word in the brand accent, tilted and overlapping the lines. Type your own word to test it.
- **Category:** Signature moves
- **Slug:** move-script-accent
- **Tags:** signature move, typography, script, headline, accent, awwwards
- **Dependencies:** @fontsource/caveat
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-script-accent
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/ScriptAccent.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/ScriptAccent.tsx
- **Reference:** [Studied: LxL Creative (Awwwards Site of the Day)](https://www.lxlcreative.co.uk)

## When to use
- Studios and creative services that want warmth without losing authority
- A rule of one accent per headline

## Accessibility

The script word is real text read in order; contrast of the accent on the dark ground is checked; the input has a visible label.


## Source
`src/patterns/moves/ScriptAccent.tsx`
```tsx
import { useState } from 'react'
import '@fontsource/caveat/600.css'

/*
 * Signature move (LxL Creative, Awwwards SOTD): a bold, tightly set headline with one word in a hand-written script,
 * in the brand's single warm accent, tilted and overlapping the lines around it. One accent per headline is the whole
 * rule. Type your own word to see how it holds. Pure CSS; the script word is real text, so it is read in order.
 */

export default function ScriptAccent() {
  const [word, setWord] = useState('Real people.')
  const safe = word.slice(0, 22)
  return (
    <div className="rounded-xl border border-border bg-[#2a211d] p-6 text-[#f6ead4] sm:p-10">
      <h3 className="mx-auto max-w-md text-center text-4xl leading-[0.95] font-extrabold tracking-tight uppercase sm:text-5xl">
        Real craft.
        <span className="relative z-10 -my-1 block py-1 text-[1.35em] normal-case" style={{ fontFamily: "'Caveat', cursive", fontWeight: 600, color: '#ff7a45', transform: 'rotate(-4deg)', lineHeight: 0.9 }}>
          {safe || ' '}
        </span>
        Real results.
      </h3>
      <label className="mx-auto mt-8 block max-w-xs text-sm">
        <span className="mb-1 block text-[#d9c9ad]">Try your own accent word</span>
        <input value={word} onChange={(e) => setWord(e.target.value)} maxLength={22} className="min-h-11 w-full rounded-md border border-[#6d5a4c] bg-transparent px-3 text-[#f6ead4]" />
      </label>
    </div>
  )
}
```

# CSS halftone split screen (Aspen Search)
> Flat black and grey panels with halftone dot imagery made in CSS from a tone gradient and a dot grid, and huge type. The dots follow the pointer.
- **Category:** Signature moves
- **Slug:** move-halftone-split
- **Tags:** signature move, halftone, css, split screen, poster, awwwards
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-halftone-split
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/HalftoneSplit.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/HalftoneSplit.tsx
- **Reference:** [Studied: Aspen Search (Awwwards Site of the Day)](https://www.aspensearch.com)

## When to use
- Poster-like landing pages in black and grey
- Imagery without any image files

## Accessibility

The halftone panels are decorative and hidden from assistive tech; the words carry the message; there is no motion without the pointer.


## Source
`src/patterns/moves/HalftoneSplit.tsx`
```tsx
import { useRef } from 'react'

/*
 * Signature move (Aspen Search, Awwwards SOTD): a split-screen of flat black and grey panels with halftone imagery and
 * oversized type. The halftone is made in CSS: a soft tone gradient multiplied by a dot grid, then pushed through a
 * high-contrast filter, so dark areas grow into big dots and light areas shrink to nothing. Move the pointer and the
 * highlight (and the dots) follow. Paint only: no layout work, no image. Reduced motion: the tone stays still.
 */

export default function HalftoneSplit() {
  const box = useRef<HTMLDivElement>(null)
  const move = (e: React.PointerEvent) => {
    const r = box.current!.getBoundingClientRect()
    box.current!.style.setProperty('--x', `${((e.clientX - r.left) / r.width) * 100}%`)
    box.current!.style.setProperty('--y', `${((e.clientY - r.top) / r.height) * 100}%`)
  }
  const tone = 'radial-gradient(circle at var(--x, 35%) var(--y, 40%), #fff 0%, #bbb 22%, #444 52%, #000 85%)'
  const dots = 'radial-gradient(circle, #000 0 38%, #fff 62%) 0 0 / 9px 9px'

  const Halftone = ({ flip }: { flip?: boolean }) => (
    <div className="relative overflow-hidden bg-white" style={{ filter: 'contrast(28)', isolation: 'isolate', transform: flip ? 'scaleX(-1)' : undefined }} aria-hidden>
      <div className="absolute inset-0" style={{ background: tone, filter: 'blur(14px)' }} />
      <div className="absolute inset-0" style={{ background: dots, mixBlendMode: 'multiply' }} />
    </div>
  )

  return (
    <div ref={box} onPointerMove={move} className="grid h-80 grid-cols-2 grid-rows-2 overflow-hidden rounded-xl border border-border bg-[#1c1c1c] font-sans">
      <Halftone />
      <div className="grid place-items-center bg-[#d6d6d6] px-3 text-[#111]">
        <p className="text-4xl font-semibold tracking-tight sm:text-6xl">Search</p>
      </div>
      <div className="grid place-items-center bg-[#1c1c1c] px-3 text-white">
        <p className="text-2xl leading-[0.95] font-extrabold tracking-tight uppercase sm:text-4xl">Placing<br />winners.</p>
      </div>
      <Halftone flip />
    </div>
  )
}
```

# Scroll-reactive accent band (Boc.Studio)
> One flat accent band across a rich image, carrying the logo and a line of facts on repeat. It drifts slowly and speeds up and reverses with your scrolling.
- **Category:** Signature moves
- **Slug:** move-band-ticker
- **Tags:** signature move, marquee, ticker, scroll velocity, band, awwwards
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-band-ticker
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/BandTicker.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/BandTicker.tsx
- **Reference:** [Studied: Boc.Studio (Awwwards Site of the Day)](https://boc.studio)

## When to use
- Studios and brands with one strong colour
- A marquee that responds to the visitor instead of looping blindly

## Accessibility

The band is decorative and hidden from assistive tech, with the same facts given as text; the scroll region is labelled; the band stands still under reduced motion.


## Source
`src/patterns/moves/BandTicker.tsx`
```tsx
import { useEffect, useRef } from 'react'

/*
 * Signature move (Boc.Studio, Awwwards SOTD): one flat accent band running across a rich image. It carries the logo
 * and a line of small facts (a place, coordinates, what the studio does) on repeat, drifts slowly, and speeds up and
 * turns round with your scrolling. Scroll the panel to feel it. One element moves, by transform only; the band is
 * decorative, so the same facts must also exist as normal text elsewhere. Reduced motion: the band stands still.
 */

const ITEM = 'Boc.Studio  ·  Creative brand studio  ·  41.40° N, 2.15° E  ·  Barcelona  ·  '

export default function BandTicker() {
  const box = useRef<HTMLDivElement>(null)
  const track = useRef<HTMLDivElement>(null)
  const first = useRef<HTMLSpanElement>(null)

  useEffect(() => {
    const el = box.current!
    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
    if (reduced) return
    let x = 0
    let dir = -1
    let boost = 0
    let last = el.scrollTop
    let raf = 0
    const tick = () => {
      const v = el.scrollTop - last
      last = el.scrollTop
      if (Math.abs(v) > 0.5) {
        dir = v > 0 ? -1 : 1
        boost = Math.min(30, boost + Math.abs(v) * 0.5)
      }
      boost *= 0.92
      const w = first.current?.offsetWidth || 600
      x += dir * (0.6 + boost)
      if (x <= -w) x += w
      if (x > 0) x -= w
      if (track.current) track.current.style.transform = `translateX(${x}px)`
      raf = requestAnimationFrame(tick)
    }
    raf = requestAnimationFrame(tick)
    return () => cancelAnimationFrame(raf)
  }, [])

  return (
    <div className="overflow-hidden rounded-xl border border-border">
      <div ref={box} tabIndex={0} role="region" aria-label="Scroll to speed up the band" className="relative overflow-y-auto" style={{ height: 320 }}>
        <div style={{ height: 760 }}>
          <div className="sticky top-0 grid place-items-center overflow-hidden" style={{ height: 320, background: 'radial-gradient(circle at 25% 30%, #9fd39a 0, transparent 38%), radial-gradient(circle at 70% 70%, #5f9b6a 0, transparent 40%), linear-gradient(160deg, #aeb7bf, #7e8993)' }}>
            <div className="absolute inset-x-0 overflow-hidden bg-[#d63a10] py-3 text-white" aria-hidden>
              <div ref={track} className="flex w-max whitespace-pre text-sm font-medium will-change-transform">
                <span ref={first}>{ITEM.repeat(4)}</span>
                <span>{ITEM.repeat(4)}</span>
                <span>{ITEM.repeat(4)}</span>
              </div>
            </div>
            <p className="sr-only">Boc.Studio, a creative brand studio in Barcelona.</p>
          </div>
        </div>
      </div>
    </div>
  )
}
```

# A creature that follows the cursor (Leo Parpeix)
> A small bee eases toward the pointer, tilts as it travels and beats its wings. Click to drop a crumb and it goes for it.
- **Category:** Signature moves
- **Slug:** move-feed-the-bee
- **Tags:** signature move, cursor, playful, creature, svg, awwwards
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-feed-the-bee
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/FeedTheBee.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/FeedTheBee.tsx
- **Reference:** [Studied: Leo Parpeix (Awwwards Site of the Day)](https://www.leoparpeix.com)

## When to use
- Portfolios and playful brands that can afford one harmless toy
- Teaching spring-like following with one rAF loop

## Accessibility

Nothing depends on the toy; a real Feed button does the same without a pointer; the count is announced; under reduced motion the bee stays still.


## Source
`src/patterns/moves/FeedTheBee.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'

/*
 * Signature move (Leo Parpeix, Awwwards SOTD): a small creature that follows the cursor and can be fed. The bee eases
 * toward the pointer with a lag, tilts into its direction of travel, and its wings beat. Click or press Enter to drop
 * a crumb; the bee goes for it. It is a toy: nothing depends on it. Position is set with transform from one rAF loop.
 * Reduced motion: no following; the bee sits still and the button just counts crumbs.
 */

export default function FeedTheBee() {
  const stage = useRef<HTMLDivElement>(null)
  const bee = useRef<HTMLDivElement>(null)
  const wing = useRef<SVGGElement>(null)
  const target = useRef({ x: 160, y: 120 })
  const crumb = useRef<{ x: number; y: number } | null>(null)
  const [fed, setFed] = useState(0)
  const [crumbPos, setCrumbPos] = useState<{ x: number; y: number } | null>(null)

  useEffect(() => {
    const el = stage.current!
    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
    let x = 160
    let y = 120
    let raf = 0
    let t = 0
    const loop = () => {
      t += 1
      const goal = crumb.current ?? target.current
      const dx = goal.x - x
      const dy = goal.y - y
      x += dx * 0.06
      y += dy * 0.06
      if (crumb.current && Math.hypot(dx, dy) < 14) {
        crumb.current = null
        setCrumbPos(null)
        setFed((n) => n + 1)
      }
      const bob = Math.sin(t * 0.12) * 3
      if (bee.current) bee.current.style.transform = `translate(${x - 18}px, ${y - 14 + bob}px) rotate(${Math.max(-25, Math.min(25, dx * 0.12))}deg)`
      if (wing.current) wing.current.style.transform = `scaleY(${0.5 + Math.abs(Math.sin(t * 0.7)) * 0.7})`
      raf = requestAnimationFrame(loop)
    }
    const move = (e: PointerEvent) => {
      const r = el.getBoundingClientRect()
      target.current = { x: e.clientX - r.left, y: e.clientY - r.top }
    }
    if (!reduced) {
      el.addEventListener('pointermove', move)
      raf = requestAnimationFrame(loop)
    } else if (bee.current) bee.current.style.transform = 'translate(142px, 106px)'
    return () => {
      el.removeEventListener('pointermove', move)
      cancelAnimationFrame(raf)
    }
  }, [])

  const drop = (x: number, y: number) => {
    crumb.current = { x, y }
    setCrumbPos({ x, y })
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
      crumb.current = null
      setCrumbPos(null)
      setFed((n) => n + 1)
    }
  }

  return (
    <div className="rounded-xl border border-border bg-[#f4f1ea] p-3 text-[#16302a]">
      <div
        ref={stage}
        onClick={(e) => {
          const r = e.currentTarget.getBoundingClientRect()
          drop(e.clientX - r.left, e.clientY - r.top)
        }}
        className="relative h-56 cursor-crosshair overflow-hidden rounded-lg bg-[#e8e4d8]"
      >
        <p className="pointer-events-none absolute inset-0 grid place-items-center text-6xl font-semibold tracking-tight text-[#16302a]/80 select-none sm:text-8xl" aria-hidden>FRENCH</p>
        {crumbPos && <span className="absolute size-3 rounded-full bg-[#c98a1b]" style={{ left: crumbPos.x - 6, top: crumbPos.y - 6 }} aria-hidden />}
        <div ref={bee} className="pointer-events-none absolute top-0 left-0" aria-hidden style={{ transform: 'translate(142px, 106px)' }}>
          <svg width="40" height="30" viewBox="0 0 40 30">
            <g ref={wing} style={{ transformOrigin: '20px 10px' }}>
              <ellipse cx="14" cy="6" rx="7" ry="5" fill="#cfe3ee" stroke="#6a8ea1" opacity="0.9" />
              <ellipse cx="26" cy="6" rx="7" ry="5" fill="#cfe3ee" stroke="#6a8ea1" opacity="0.9" />
            </g>
            <ellipse cx="20" cy="17" rx="14" ry="9" fill="#f3c316" stroke="#2a2a1a" strokeWidth="1.5" />
            <path d="M14 9 v16 M22 8 v18 M29 11 v12" stroke="#2a2a1a" strokeWidth="3" />
            <circle cx="32" cy="15" r="1.6" fill="#2a2a1a" />
          </svg>
        </div>
      </div>
      <div className="mt-3 flex items-center justify-between gap-3 text-sm">
        <span>Click the panel to drop a crumb. Fed: <b className="tabular-nums">{fed}</b></span>
        <button onClick={() => drop(60 + Math.random() * 200, 40 + Math.random() * 120)} className="min-h-11 rounded-md border border-[#16302a]/40 px-4 font-medium hover:bg-[#16302a] hover:text-[#f4f1ea]">
          Feed the bee
        </button>
      </div>
      <p className="sr-only" role="status">{fed} crumbs eaten.</p>
    </div>
  )
}
```

# Outlined name with a script alias (Tim Van Damme)
> A stroke-only display name, a marker-script alias in one warm colour, and hand-drawn doodles over a CSS halftone portrait. Toggle the doodles.
- **Category:** Signature moves
- **Slug:** move-outline-lockup
- **Tags:** signature move, typography, outline text, script, halftone, doodles, portfolio
- **Dependencies:** @fontsource/caveat
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-outline-lockup
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/OutlineLockup.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/OutlineLockup.tsx
- **Reference:** [Studied: Tim Van Damme (via One Page Love)](https://timvandamme.com)

## When to use
- Personal sites and studios with a zine feel
- A name lockup that has three voices but one accent

## Accessibility

The name is real text with a spoken alias; doodles and halftone are decorative and hidden from assistive tech; the toggle is a labelled checkbox; stroke-only type is used only at very large sizes.


## Source
`src/patterns/moves/OutlineLockup.tsx`
```tsx
import { useState } from 'react'
import '@fontsource/caveat/600.css'

/*
 * Signature move (Tim Van Damme, One Page Love): a name lockup that mixes three voices on a dark ground. A big outlined
 * display line (stroke only, so the dark shows through), a marker-script alias in one warm colour set right under it, and
 * a loose layer of hand-drawn doodles over a halftone portrait. Pure CSS and SVG. The outline uses text-stroke with a
 * transparent fill, so keep the stroke at least 1.5px and the type very large, or it will not read. Toggle the doodles.
 */

export default function OutlineLockup() {
  const [doodles, setDoodles] = useState(true)
  return (
    <div className="overflow-hidden rounded-xl border border-border bg-[#141414] p-6 text-white sm:p-8">
      <div className="relative mx-auto h-40 w-full max-w-md overflow-hidden rounded-lg bg-white" aria-hidden>
        <div className="absolute inset-0" style={{ filter: 'contrast(14)', isolation: 'isolate' }}>
          <div className="absolute inset-0" style={{ background: 'radial-gradient(circle at 50% 40%, #fff 0, #aaa 28%, #333 72%)', filter: 'blur(10px)' }} />
          <div className="absolute inset-0" style={{ background: 'radial-gradient(circle, #000 0 34%, #fff 64%) 0 0 / 7px 7px', mixBlendMode: 'multiply' }} />
        </div>
        {doodles && (
          <svg viewBox="0 0 320 160" className="absolute inset-0 h-full w-full" fill="none" stroke="#ff7a66" strokeWidth="3" strokeLinecap="round">
            <path d="M120 40 C112 14 130 6 140 22 M200 40 C208 14 190 6 180 22" />
            <path d="M140 118 C150 132 170 132 180 118 C170 110 150 110 140 118 Z" />
            <path d="M60 30 l-14 -10 M70 50 l-18 -2 M262 34 l14 -10 M256 56 l18 -2" />
            <path d="M270 120 q22 -6 28 14" />
          </svg>
        )}
      </div>
      <h3 className="mt-5 text-center leading-[0.95] font-extrabold tracking-tight uppercase" style={{ fontSize: 'clamp(40px, 9vw, 76px)', color: 'transparent', WebkitTextStroke: '2px #f2f2f2' }}>
        Tim Van Damme
      </h3>
      <p className="-mt-1 text-center" style={{ fontFamily: "'Caveat', cursive", fontWeight: 600, fontSize: 'clamp(40px, 9vw, 72px)', color: '#ff7a66', transform: 'rotate(-3deg)', lineHeight: 0.9 }}>
        Max Voltar
      </p>
      <p className="sr-only">Tim Van Damme, also known as Max Voltar.</p>
      <label className="mx-auto mt-6 flex w-max items-center gap-3 text-sm text-[#d9d9d9]">
        <input type="checkbox" checked={doodles} onChange={(e) => setDoodles(e.target.checked)} className="size-5" />
        Show the doodles
      </label>
    </div>
  )
}
```

# Contact-sheet project index (Office Commun)
> Projects as a label line above one horizontal strip of variable-width tiles, with snap scrolling and keyboard and button controls. No cards.
- **Category:** Signature moves
- **Slug:** move-contact-sheet
- **Tags:** signature move, index, strips, portfolio, scroll snap, minimal
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-contact-sheet
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/ContactSheet.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/ContactSheet.tsx
- **Reference:** [Studied: Office Commun (via One Page Love)](https://officecommun.com)

## When to use
- Studio and portfolio indexes with several projects each
- A quiet alternative to a grid of cards

## Accessibility

Each strip is a labelled section and a focusable list that scrolls with the arrow keys; back and forward buttons appear on hover and focus; tiles here are decorative stand-ins.


## Source
`src/patterns/moves/ContactSheet.tsx`
```tsx
import { useRef } from 'react'

/*
 * Signature move (Office Commun, One Page Love): a studio index set like a contact sheet. Each project is a label line
 * ("Name · what it is") above a single horizontal strip of tiles of different widths, in the manner of a film strip.
 * Strips scroll sideways with touch, trackpad, arrow keys or the buttons, and snap to a tile. Nothing is boxed in
 * cards; the labels and the strips carry the whole page. Tiles here are drawn blocks standing in for screens.
 */

const ROWS = [
  ['Figure', 'AI shopping assistant', '#e6dccf'],
  ['Public', 'Contemporary art auction platform', '#d3dbe0'],
  ['Workspaces', 'Media for modern creators', '#dcd3e3'],
  ['Premune', 'Threat intelligence before the breach', '#1d1a3a'],
] as const
const WIDTHS = [150, 96, 210, 120, 180, 100, 160]

function Strip({ name, what, tone }: { name: string; what: string; tone: string }) {
  const el = useRef<HTMLUListElement>(null)
  const by = (d: number) => el.current?.scrollBy({ left: d * 260, behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' })
  const dark = tone === '#1d1a3a'
  return (
    <section aria-label={`${name}: ${what}`} className="group">
      <div className="flex items-center justify-between gap-3">
        <h3 className="text-sm"><b className="font-semibold">{name}</b> <span className="text-fg-muted">· {what}</span></h3>
        <span className="flex gap-1 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100">
          <button onClick={() => by(-1)} aria-label={`${name}: scroll back`} className="grid size-9 place-items-center rounded-md border border-border text-sm">‹</button>
          <button onClick={() => by(1)} aria-label={`${name}: scroll forward`} className="grid size-9 place-items-center rounded-md border border-border text-sm">›</button>
        </span>
      </div>
      <ul ref={el} tabIndex={0} aria-label={`${name} screens, scroll sideways`} className="mt-2 flex snap-x gap-2 overflow-x-auto pb-1 [scrollbar-width:none]">
        {WIDTHS.map((w, i) => (
          <li key={i} className="h-28 shrink-0 snap-start rounded-sm" style={{ width: w, background: i % 3 === 0 || dark ? tone : `color-mix(in srgb, ${tone} 70%, #fff)` }}>
            {i % 3 === 0 && <span aria-hidden className={`m-2 block h-1.5 w-8 rounded ${dark ? 'bg-white/40' : 'bg-black/20'}`} />}
          </li>
        ))}
      </ul>
    </section>
  )
}

export default function ContactSheet() {
  return (
    <div className="space-y-6 rounded-xl border border-border bg-bg p-5">
      <p className="max-w-md text-sm text-fg-muted">Independent design studio working across research, identity and production. Between projects we build our own tools.</p>
      {ROWS.map(([n, w, t]) => <Strip key={n} name={n} what={w} tone={t} />)}
    </div>
  )
}
```

# The sky as a gradient (sky.dlazaro.ca)
> The sun's height above the horizon is computed from the time, the date and the latitude, and that one number picks a vertical sky gradient. Scrub the day and change the place.
- **Category:** Signature moves
- **Slug:** move-sky-gradient
- **Tags:** signature move, gradient, time of day, generative, sun, background
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/move-sky-gradient
- **Raw source:** https://ui-lab-weld.vercel.app/raw/moves/SkyGradient.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/moves/SkyGradient.tsx
- **Reference:** [Studied: The current sky as a CSS gradient (Show HN)](https://sky.dlazaro.ca)

## When to use
- Weather, travel, calendar and ambient pages that should feel like the real time of day
- Generative backgrounds from one computed value

## Accessibility

The sky has a text description and a status line giving the phase and the sun's height; the sun marker is decorative; the controls are a native range and select; text over the sky switches colour to stay above 4.5:1.


## Source
`src/patterns/moves/SkyGradient.tsx`
```tsx
import { useMemo, useState } from 'react'

/*
 * Signature move (sky.dlazaro.ca, Show HN): the whole page is the sky where you are. The sun's height above the horizon
 * is computed from the time of day, the date and the latitude (the standard declination and hour-angle sums), and that
 * one number picks a vertical gradient by interpolating between a few colour stops. No image, no API. Here you choose a
 * place and scrub the day. The clock time is used as solar time, so it is indicative, not an almanac. A text line says
 * the same thing in words, so the sky is never the only carrier of information.
 */

const PLACES: [string, number][] = [['Pune', 18.5], ['Reykjavik', 64.1], ['Singapore', 1.3], ['Sydney', -33.9], ['Leeds', 53.8]]

// elevation (deg), top, middle, horizon
const STOPS: [number, string, string, string][] = [
  [-18, '#05060f', '#0a0c1c', '#12122a'],
  [-12, '#0a1030', '#1c1f4a', '#3a2c55'],
  [-6, '#1b2a5e', '#5a4a86', '#d98a6c'],
  [0, '#3d5fa8', '#e8a07a', '#ffd29a'],
  [6, '#5b8fd6', '#a9c4e8', '#ffe6c0'],
  [20, '#3f86e0', '#78b2ee', '#cfe6fa'],
  [60, '#2a78e0', '#5aa0ee', '#b6d8fa'],
]

const hex = (c: string) => [1, 3, 5].map((i) => parseInt(c.slice(i, i + 2), 16))
const mix = (a: string, b: string, t: number) => {
  const x = hex(a)
  const y = hex(b)
  return `rgb(${x.map((v, i) => Math.round(v + (y[i] - v) * t)).join(',')})`
}

function elevation(hour: number, lat: number, dayOfYear: number) {
  const rad = Math.PI / 180
  const decl = 23.44 * Math.sin(((360 / 365) * (dayOfYear - 81)) * rad)
  const H = 15 * (hour - 12)
  const e = Math.asin(Math.sin(lat * rad) * Math.sin(decl * rad) + Math.cos(lat * rad) * Math.cos(decl * rad) * Math.cos(H * rad))
  return e / rad
}

function sky(e: number) {
  const c = Math.max(STOPS[0][0], Math.min(STOPS[STOPS.length - 1][0], e))
  let i = 0
  while (i < STOPS.length - 2 && c > STOPS[i + 1][0]) i++
  const [e0, ...a] = STOPS[i]
  const [e1, ...b] = STOPS[i + 1]
  const t = (c - e0) / (e1 - e0)
  return [mix(a[0], b[0], t), mix(a[1], b[1], t), mix(a[2], b[2], t)]
}

const phase = (e: number) => (e < -18 ? 'Night' : e < -12 ? 'Astronomical twilight' : e < -6 ? 'Nautical twilight' : e < 0 ? 'Civil twilight' : e < 10 ? 'Golden hour' : 'Day')

export default function SkyGradient() {
  const [hour, setHour] = useState(18.25)
  const [pi, setPi] = useState(0)
  const doy = useMemo(() => Math.floor((Date.now() - new Date(new Date().getFullYear(), 0, 0).getTime()) / 86400000), [])
  const [, lat] = PLACES[pi]
  const e = elevation(hour, lat, doy)
  const [top, mid, hor] = sky(e)
  const h = Math.floor(hour)
  const clock = `${String(h).padStart(2, '0')}:${String(Math.round((hour - h) * 60)).padStart(2, '0')}`
  const sunY = 78 - Math.max(-10, Math.min(70, e)) * 1.0
  const sunX = 10 + (hour / 24) * 80
  const dark = e < 0

  return (
    <div className="overflow-hidden rounded-xl border border-border">
      <div className="relative h-60" style={{ background: `linear-gradient(180deg, ${top} 0%, ${mid} 55%, ${hor} 100%)` }} role="img" aria-label={`The sky in ${PLACES[pi][0]} at ${clock}: ${phase(e)}, the sun is ${Math.abs(e).toFixed(0)} degrees ${e >= 0 ? 'above' : 'below'} the horizon`}>
        <span aria-hidden className="absolute size-8 rounded-full" style={{ left: `${sunX}%`, top: `${sunY}%`, background: e > -4 ? '#fff4c9' : 'transparent', boxShadow: e > -4 ? '0 0 40px 12px rgba(255, 230, 160, 0.55)' : 'none', transform: 'translate(-50%, -50%)' }} />
        <p className="absolute bottom-3 left-4 text-sm font-medium" style={{ color: dark ? '#e8ecff' : '#16243d' }}>{PLACES[pi][0]} · {clock} · {phase(e)}</p>
      </div>
      <div className="grid gap-3 p-4 sm:grid-cols-[1fr_auto] sm:items-end">
        <label className="block text-sm">
          <span className="font-medium">Time of day: {clock}</span>
          <input type="range" min={0} max={24} step={0.25} value={hour} onChange={(e2) => setHour(Number(e2.target.value))} aria-valuetext={`${clock}, ${phase(e)}`} className="mt-1 block h-11 w-full" />
        </label>
        <label className="text-sm">
          <span className="block font-medium">Place</span>
          <select value={pi} onChange={(e2) => setPi(Number(e2.target.value))} className="mt-1 min-h-11 rounded-md border border-border bg-surface px-3">
            {PLACES.map(([n, l], i) => <option key={n} value={i}>{n} ({l}°)</option>)}
          </select>
        </label>
      </div>
      <p className="px-4 pb-4 text-sm text-fg-muted" role="status">The sun is {Math.abs(e).toFixed(0)}° {e >= 0 ? 'above' : 'below'} the horizon. {phase(e)}.</p>
    </div>
  )
}
```

# Split-flap departures board
> A mechanical-style board where each cell cycles forward through the alphabet to its target, with a falling flap per step. A hidden table mirrors the content.
- **Category:** Niche worlds
- **Slug:** niche-split-flap
- **Tags:** niche world, split flap, departures, board, transit, timetable, niche
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/niche-split-flap
- **Raw source:** https://ui-lab-weld.vercel.app/raw/niche/SplitFlapBoard.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/niche/SplitFlapBoard.tsx

## When to use
- Transit, travel, events and schedule brands
- A signature hero that is also useful information

## Accessibility

The board is role=img with a visually hidden table of the same data; cells jump straight to their target under reduced motion. Part of World 9: Departures Board.


## Source
`src/patterns/niche/SplitFlapBoard.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'

/*
 * Niche world: Departures Board. A split-flap display like a station or airport board. Each cell cycles
 * forward through the character set (like the real mechanism, it can only go forward) until it shows the
 * target; every step is a flap that falls. Rows are real text in the accessibility tree (a visually hidden
 * table mirrors the board), and "Shuffle" gives the board something to do. Reduced motion: cells jump
 * straight to the target with no flipping.
 */

const SET = ' ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789:.-'
const COLS = [5, 12, 3, 8] // time, destination, platform, status

type Row = [string, string, string, string]
const DATA: Row[][] = [
  [
    ['21:40', 'BERLIN', '4', 'ON TIME'],
    ['22:05', 'VIENNA', '7', 'BOARDING'],
    ['22:30', 'ROME', '2', 'DELAYED'],
    ['23:15', 'PRAGUE', '5', 'ON TIME'],
    ['23:50', 'WARSAW', '9', 'ON TIME'],
  ],
  [
    ['21:55', 'MUNICH', '3', 'ON TIME'],
    ['22:20', 'BUDAPEST', '6', 'CANCELLED'],
    ['22:45', 'ZURICH', '1', 'BOARDING'],
    ['23:30', 'OSLO', '8', 'DELAYED'],
    ['00:10', 'LISBON', '4', 'ON TIME'],
  ],
]

const pad = (s: string, n: number) => s.toUpperCase().padEnd(n, ' ').slice(0, n)

function Cell({ ch, prev, tick }: { ch: string; prev: string; tick: number }) {
  return (
    <span className="sf-cell" aria-hidden>
      <span className="sf-top"><b>{ch}</b></span>
      <span className="sf-bot"><b>{prev}</b></span>
      <span key={tick} className="sf-fall sf-top"><b>{prev}</b></span>
      <span key={`b${tick}`} className="sf-rise sf-bot"><b>{ch}</b></span>
    </span>
  )
}

export default function SplitFlapBoard() {
  const [set, setSet] = useState(0)
  const target = DATA[set].flatMap((r) => r.map((c, i) => pad(c, COLS[i]))).join('')
  const reduced = useRef(false)
  const [cur, setCur] = useState(() => ' '.repeat(target.length))
  const [prev, setPrev] = useState(() => ' '.repeat(target.length))
  const [ticks, setTicks] = useState<number[]>(() => Array(target.length).fill(0))

  const curRef = useRef(cur)

  useEffect(() => {
    reduced.current = matchMedia('(prefers-reduced-motion: reduce)').matches
    if (reduced.current) {
      curRef.current = target
      setCur(target)
      setPrev(target)
      return
    }
    // Plain state updates computed from a ref: no side effects inside updater functions (StrictMode runs those twice).
    const id = window.setInterval(() => {
      const c = curRef.current
      const next = c.split('').map((ch, i) => (ch === target[i] ? ch : SET[(SET.indexOf(ch) + 1) % SET.length])).join('')
      if (next === c) return window.clearInterval(id)
      setPrev(c)
      setTicks((t) => t.map((n, i) => (c[i] === target[i] ? n : n + 1)))
      curRef.current = next
      setCur(next)
    }, 75)
    return () => window.clearInterval(id)
  }, [target])

  let k = 0
  return (
    <div className="rounded-xl border border-border bg-[#14120f] p-4 sm:p-6" style={{ containerType: 'inline-size' }}>
      <style>{`
        .sf-row { display: flex; gap: 14px; margin-bottom: 6px; }
        .sf-grp { display: flex; gap: 2px; }
        .sf-cell { position: relative; display: inline-block; width: 1.05em; height: 1.55em; font: 600 clamp(9px, 2.5cqw, 26px)/1.55 var(--font-mono, monospace); color: #f4e9c8; perspective: 300px; }
        .sf-top, .sf-bot { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: #1f1c17; border-radius: 3px; text-align: center; }
        .sf-top { top: 0; transform-origin: bottom; border-bottom: 1px solid #000; }
        .sf-bot { bottom: 0; transform-origin: top; }
        .sf-top b, .sf-bot b { display: block; font-weight: 600; }
        .sf-bot b { transform: translateY(-50%); }
        .sf-fall { animation: sf-fall 75ms ease-in forwards; z-index: 2; }
        .sf-rise { animation: sf-rise 75ms ease-out 75ms both; z-index: 1; }
        @keyframes sf-fall { to { transform: rotateX(-90deg); } }
        @keyframes sf-rise { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
        @media (prefers-reduced-motion: reduce) { .sf-fall, .sf-rise { animation: none; } }
      `}</style>
      <div role="img" aria-label="Departures board">
        {DATA[set].map((_, r) => (
          <div className="sf-row" key={r}>
            {COLS.map((n, c) => (
              <span className="sf-grp" key={c}>
                {Array.from({ length: n }, () => {
                  const i = k++
                  return <Cell key={i} ch={cur[i]} prev={prev[i]} tick={ticks[i]} />
                })}
              </span>
            ))}
          </div>
        ))}
      </div>
      <table className="sr-only">
        <caption>Departures</caption>
        <thead><tr><th>Time</th><th>Destination</th><th>Platform</th><th>Status</th></tr></thead>
        <tbody>{DATA[set].map((r) => <tr key={r[1]}>{r.map((c, i) => <td key={i}>{c}</td>)}</tr>)}</tbody>
      </table>
      <button onClick={() => setSet((s) => (s + 1) % DATA.length)} className="mt-4 min-h-11 rounded-md border border-white/20 px-4 text-sm text-[#f4e9c8] hover:bg-white/10">
        Update board
      </button>
    </div>
  )
}
```

# Botanical plate with callouts
> A hand-built SVG botanical plate with numbered callouts; pointing at a number lights the part and shows a handwritten field note.
- **Category:** Niche worlds
- **Slug:** niche-plate-callouts
- **Tags:** niche world, botanical, plate, annotation, callout, svg, herbarium, niche
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/niche-plate-callouts
- **Raw source:** https://ui-lab-weld.vercel.app/raw/niche/PlateCallouts.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/niche/PlateCallouts.tsx

## When to use
- Naturalist, herbal, archive and museum content
- Annotated diagrams that need to be accessible

## Accessibility

Callouts and the list are real buttons that respond to hover and focus; the list is the text version of the picture; line-draw is off under reduced motion. Part of World 10: Herbarium / Field Notebook.


## Source
`src/patterns/niche/PlateCallouts.tsx`
```tsx
import { useState } from 'react'

/*
 * Niche world: Field Notebook / Herbarium. A botanical plate with numbered callouts. Hovering or focusing a
 * number (or its entry in the list) lights the matching part of the drawing and shows its note in a handwritten
 * caption. The plate is a hand-built SVG (so it scales and can be restyled); callouts are real buttons; the
 * list is the accessible version of the picture. Reduced motion: no line-draw on load.
 */

const PARTS = [
  { id: 1, name: 'Corolla', note: 'Five fused petals, opening at dusk and closing by noon.', x: 210, y: 92, d: 'M210 92c-28-22-58-6-52 22 6 28 38 30 52 12 14 18 46 16 52-12 6-28-24-44-52-22Z' },
  { id: 2, name: 'Stamen', note: 'Anthers dusted with a pale yellow pollen that rubs off on the finger.', x: 238, y: 150, d: 'M210 120c6 10 6 22 2 34M214 118c10 8 16 18 18 30' },
  { id: 3, name: 'Leaf', note: 'Lanceolate, veined in a pinnate pattern, edge finely serrate.', x: 120, y: 250, d: 'M210 200c-40-8-86 6-106 52 40 14 90 2 106-52Z M210 200c-30 6-60 24-86 48' },
  { id: 4, name: 'Stem', note: 'Hollow and ribbed, hairless below the first node.', x: 214, y: 330, d: 'M210 120c-10 70 6 150-4 240' },
  { id: 5, name: 'Root', note: 'A slender taproot with a few fibrous laterals.', x: 244, y: 392, d: 'M206 360c-14 18-26 30-34 42M206 360c8 22 22 34 40 40M206 360c0 16-2 30-8 42' },
]

export default function PlateCallouts() {
  const [on, setOn] = useState<number | null>(null)
  const part = PARTS.find((p) => p.id === on)

  return (
    <div className="grid gap-6 rounded-xl border border-[#c9b98f] bg-[#f3ead2] p-5 text-[#2b2418] md:grid-cols-[1fr_16rem]">
      <style>{`
        .pc-line { fill: none; stroke: #2b2418; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.25s, stroke-width 0.25s; stroke-dasharray: 700; stroke-dashoffset: 0; animation: pc-draw 1.6s ease-out both; }
        .pc-on { stroke: #a8402a; stroke-width: 3; }
        @keyframes pc-draw { from { stroke-dashoffset: 700; } }
        @media (prefers-reduced-motion: reduce) { .pc-line { animation: none; } }
      `}</style>
      <figure>
        <svg viewBox="0 0 420 430" className="mx-auto w-full max-w-md" role="group" aria-label="Botanical plate of a flowering plant with five numbered parts">
          <rect x="6" y="6" width="408" height="418" rx="2" fill="none" stroke="#2b2418" strokeWidth="1" />
          <rect x="14" y="14" width="392" height="402" rx="1" fill="none" stroke="#2b2418" strokeWidth="0.5" />
          {PARTS.map((p) => (
            <path key={p.id} d={p.d} className={`pc-line ${on === p.id ? 'pc-on' : ''}`} />
          ))}
          {PARTS.map((p) => (
            <g key={p.id}>
              <line x1={p.x} y1={p.y} x2={p.x + (p.x > 210 ? 70 : -70)} y2={p.y - 10} stroke="#2b2418" strokeWidth="0.7" />
              <foreignObject x={p.x + (p.x > 210 ? 62 : -102)} y={p.y - 30} width="40" height="40">
                <button
                  onPointerEnter={() => setOn(p.id)}
                  onPointerLeave={() => setOn(null)}
                  onFocus={() => setOn(p.id)}
                  onBlur={() => setOn(null)}
                  aria-label={`${p.id}. ${p.name}`}
                  className={`grid size-10 place-items-center rounded-full border text-sm font-semibold ${on === p.id ? 'border-[#a8402a] bg-[#a8402a] text-white' : 'border-[#2b2418] bg-[#f3ead2]'}`}
                >
                  {p.id}
                </button>
              </foreignObject>
            </g>
          ))}
          <text x="210" y="418" textAnchor="middle" fontSize="10" fontStyle="italic" fill="#2b2418" style={{ fontFamily: 'var(--font-display)' }}>
            Plate XIV. Campanula, from a hedgerow near the river
          </text>
        </svg>
      </figure>
      <div>
        <ol className="space-y-1">
          {PARTS.map((p) => (
            <li key={p.id}>
              <button
                onPointerEnter={() => setOn(p.id)}
                onPointerLeave={() => setOn(null)}
                onFocus={() => setOn(p.id)}
                onBlur={() => setOn(null)}
                className={`min-h-11 w-full rounded px-2 text-left text-sm ${on === p.id ? 'bg-[#2b2418] text-[#f3ead2]' : 'hover:bg-black/5'}`}
              >
                <span className="font-semibold">{p.id}.</span> {p.name}
              </button>
            </li>
          ))}
        </ol>
        <p className="mt-4 min-h-24 border-t border-[#c9b98f] pt-3 text-xl leading-snug text-[#7a3523]" style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic' }} aria-live="polite">
          {part ? part.note : 'Point at a number to read the field note.'}
        </p>
      </div>
    </div>
  )
}
```

# Hi-fi deck with real VU meters
> Analogue-style VU meters whose needles read a WebAudio AnalyserNode while a generated arpeggio plays, plus transport and level controls.
- **Category:** Niche worlds
- **Slug:** niche-vu-deck
- **Tags:** niche world, audio, vu meter, webaudio, hardware, hi-fi, niche
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/niche-vu-deck
- **Raw source:** https://ui-lab-weld.vercel.app/raw/niche/VuDeck.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/niche/VuDeck.tsx

## When to use
- Audio hardware, music and podcast brands
- Interfaces where the needle should be honest

## Accessibility

Meters are role=meter with aria-valuenow; sound starts only on a click and is quiet by default; Stop closes the audio context. Part of World 11: Hi-Fi Deck.


## Source
`src/patterns/niche/VuDeck.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'

/*
 * Niche world: Hi-Fi Deck. Analogue audio hardware on a screen: two VU meters with ballistic needles, a transport
 * with a real (generated) sound, a rotary level knob. Sound is a small WebAudio arpeggio created only after you press
 * play (browsers require a gesture) at a low default level; the meters read the real signal through an
 * AnalyserNode, so the needles are honest. Stop silences and closes the audio. Reduced motion: needles still
 * move (they are data), but nothing else animates.
 */

const NOTES = [220, 277.2, 329.6, 440, 329.6, 277.2, 246.9, 311.1]

function Needle({ value, label }: { value: number; label: string }) {
  const angle = -50 + value * 100
  return (
    <figure className="relative h-28 w-44 overflow-hidden rounded-md border border-black/40 bg-[#e8d9a6]" role="meter" aria-label={label} aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(value * 100)}>
      <svg viewBox="0 0 176 112" className="absolute inset-0 h-full w-full" aria-hidden>
        {Array.from({ length: 11 }, (_, i) => {
          const a = ((-50 + i * 10) * Math.PI) / 180
          const r1 = 78, r2 = i > 7 ? 62 : 68
          return <line key={i} x1={88 + Math.sin(a) * r1} y1={104 - Math.cos(a) * r1} x2={88 + Math.sin(a) * r2} y2={104 - Math.cos(a) * r2} stroke={i > 7 ? '#a8402a' : '#2a2418'} strokeWidth="2" />
        })}
        <text x="14" y="26" fontSize="11" fill="#2a2418" style={{ fontFamily: 'var(--font-mono)' }}>VU</text>
        <g style={{ transform: `rotate(${angle}deg)`, transformOrigin: '88px 104px', transition: 'transform 90ms linear' }}>
          <line x1="88" y1="104" x2="88" y2="30" stroke="#a8402a" strokeWidth="2" />
        </g>
        <circle cx="88" cy="104" r="6" fill="#2a2418" />
      </svg>
    </figure>
  )
}

export default function VuDeck() {
  const [playing, setPlaying] = useState(false)
  const [level, setLevel] = useState([0, 0])
  const [vol, setVol] = useState(4)
  const ctx = useRef<AudioContext | null>(null)
  const gain = useRef<GainNode | null>(null)
  const raf = useRef(0)
  const step = useRef(0)
  const timer = useRef(0)

  const stop = () => {
    window.clearInterval(timer.current)
    cancelAnimationFrame(raf.current)
    ctx.current?.close()
    ctx.current = null
    setPlaying(false)
    setLevel([0, 0])
  }
  useEffect(() => () => stop(), [])
  useEffect(() => {
    if (gain.current) gain.current.gain.value = (vol / 10) * 0.18
  }, [vol])

  const play = () => {
    const ac = new AudioContext()
    ctx.current = ac
    const g = ac.createGain()
    g.gain.value = (vol / 10) * 0.18
    gain.current = g
    const an = ac.createAnalyser()
    an.fftSize = 512
    g.connect(an)
    an.connect(ac.destination)
    const buf = new Uint8Array(an.fftSize)
    const tone = () => {
      const o = ac.createOscillator()
      const e = ac.createGain()
      o.type = 'triangle'
      o.frequency.value = NOTES[step.current++ % NOTES.length]
      e.gain.setValueAtTime(0.0001, ac.currentTime)
      e.gain.exponentialRampToValueAtTime(1, ac.currentTime + 0.02)
      e.gain.exponentialRampToValueAtTime(0.0001, ac.currentTime + 0.42)
      o.connect(e)
      e.connect(g)
      o.start()
      o.stop(ac.currentTime + 0.45)
    }
    tone()
    timer.current = window.setInterval(tone, 280)
    let smooth = 0
    const read = () => {
      an.getByteTimeDomainData(buf)
      let peak = 0
      for (const v of buf) peak = Math.max(peak, Math.abs(v - 128) / 128)
      smooth = Math.max(peak * 4.2, smooth * 0.9)
      const v = Math.min(1, smooth)
      setLevel([v, Math.min(1, v * (0.9 + Math.random() * 0.15))])
      raf.current = requestAnimationFrame(read)
    }
    read()
    setPlaying(true)
  }

  return (
    <div className="mx-auto max-w-2xl rounded-xl border border-black/50 p-5 text-[#e8d9a6]" style={{ background: 'linear-gradient(180deg, #34312b, #1d1b17)' }}>
      <div className="flex flex-wrap items-center justify-center gap-4">
        <Needle value={level[0]} label="Left channel level" />
        <Needle value={level[1]} label="Right channel level" />
      </div>
      <div className="mt-5 flex flex-wrap items-center justify-between gap-4">
        <div className="flex gap-2">
          <button onClick={playing ? stop : play} aria-pressed={playing} className={`min-h-11 min-w-24 rounded border-b-4 px-4 font-mono text-sm tracking-wider ${playing ? 'translate-y-0.5 border-b-0 bg-[#a8402a] text-white' : 'border-black/60 bg-[#e8d9a6] text-[#2a2418]'}`}>
            {playing ? '■ STOP' : '▶ PLAY'}
          </button>
        </div>
        <label className="flex items-center gap-3 font-mono text-xs tracking-wider">
          LEVEL
          <input type="range" min={0} max={10} value={vol} onChange={(e) => setVol(Number(e.target.value))} className="h-8 w-40 accent-[#a8402a]" aria-valuetext={`${vol} of 10`} />
          <span className="w-5 tabular-nums">{vol}</span>
        </label>
      </div>
      <p className="mt-3 text-center font-mono text-[11px] opacity-60">Press play: a generated arpeggio, kept quiet by default</p>
    </div>
  )
}
```

# Broadsheet columns and ticker
> Newspaper typography in pure CSS: double-rule masthead, justified hyphenated columns with a drop cap, a spanning pull quote and a market ticker.
- **Category:** Niche worlds
- **Slug:** niche-broadsheet
- **Tags:** niche world, newspaper, columns, drop cap, editorial, ticker, css, niche
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/niche-broadsheet
- **Raw source:** https://ui-lab-weld.vercel.app/raw/niche/BroadsheetColumns.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/niche/BroadsheetColumns.tsx

## When to use
- Newsletters, finance and long-form publications
- Proving a Read-mode layout can have character

## Accessibility

One continuous, selectable article; duplicated ticker copy is aria-hidden; the ticker stops under reduced motion. Part of World 12: Broadsheet / The Ledger.


## Source
`src/patterns/niche/BroadsheetColumns.tsx`
```tsx
/*
 * Niche world: Broadsheet / The Ledger. Newspaper typography in pure CSS: a masthead with double rules, a
 * justified, hyphenated multi-column article with a drop cap and column rules, a pull quote that spans
 * columns, and a market ticker. Columns reflow with the container (column-width, not breakpoints), and the
 * text stays one continuous, selectable article. No JavaScript. Reduced motion: the ticker stops.
 */

const TICKER = ['NIFTY 24,812 ▲0.4%', 'SENSEX 81,340 ▲0.3%', 'GOLD 74,120 ▼0.1%', 'BRENT 81.4 ▲1.2%', 'USD/INR 83.6 ▼0.0%', '10Y 7.02 ▼0.02']

const BODY = [
  'The rupee has spent most of the year doing very little, which is itself the story. Traders who expected a swing in either direction found a currency that moved the way a tide does, slowly, and with a predictable return.',
  'Behind the calm sits a central bank that has been quietly buying dollars on every dip, building a cushion that few outside the market appreciate. The cost is real, and it is paid in the form of reserves that cannot be spent twice.',
  'Economists disagree about how long the arrangement can last. Some argue that a stable currency is worth almost any price; others point out that stability purchased with reserves is borrowed against the next shock.',
  'What both camps accept is that the margin for error is shrinking. A single bad quarter of exports, or one oil spike that lasts a month rather than a week, would test the cushion in ways the last two years have not.',
  'For households the lesson is more modest. A steady rupee has made imported goods predictable, and the habit of planning around it has spread. The risk is that planning becomes assumption.',
]

export default function BroadsheetColumns() {
  return (
    <div className="overflow-hidden rounded-xl border border-[#b9ad92] bg-[#f4efe2] text-[#1a1712]" style={{ containerType: 'inline-size' }}>
      <style>{`
        @keyframes bs-tick { to { transform: translateX(-50%); } }
        .bs-tick { display: flex; width: max-content; animation: bs-tick 40s linear infinite; }
        @media (prefers-reduced-motion: reduce) { .bs-tick { animation: none; } }
        .bs-body { column-width: 15rem; column-gap: 2rem; column-rule: 1px solid #1a1712; text-align: justify; hyphens: auto; font-size: 0.98rem; line-height: 1.6; }
        .bs-body p + p { text-indent: 1.4em; }
        .bs-body p:first-child::first-letter { float: left; font: 700 4.6em/0.8 var(--font-display, serif); padding: 0.06em 0.1em 0 0; }
      `}</style>
      <header className="px-6 pt-5 text-center">
        <p className="flex justify-between font-mono text-[11px] tracking-wider uppercase"><span>Vol. XII · No. 214</span><span>Mumbai · Tuesday</span><span>Price ₹10</span></p>
        <h2 className="mt-2 border-y-4 border-double border-[#1a1712] py-2 font-display text-5xl font-bold tracking-tight sm:text-6xl" style={{ fontFamily: 'var(--font-display, serif)' }}>The Ledger</h2>
      </header>
      <div className="mt-3 overflow-hidden border-b border-[#1a1712] bg-[#1a1712] py-1.5 text-[#f4efe2]" aria-label="Market ticker">
        <div className="bs-tick font-mono text-xs">
          {[0, 1].map((k) => (
            <span key={k} className="flex shrink-0 gap-8 pr-8" aria-hidden={k === 1}>
              {TICKER.map((t) => <span key={t}>{t}</span>)}
            </span>
          ))}
        </div>
      </div>
      <article className="px-6 py-6">
        <h3 className="max-w-2xl font-display text-3xl leading-tight font-bold sm:text-4xl" style={{ fontFamily: 'var(--font-display, serif)' }}>A currency that refuses to move, and the price of that stillness</h3>
        <p className="mt-2 font-mono text-[11px] tracking-wider uppercase">By the Economics Desk · 6 min read</p>
        <div className="bs-body mt-4">
          {BODY.slice(0, 3).map((t) => <p key={t}>{t}</p>)}
          <blockquote className="my-3 border-y-2 border-[#1a1712] py-3 text-center font-display text-2xl leading-snug italic" style={{ columnSpan: 'all', fontFamily: 'var(--font-display, serif)' }}>
            “Stability bought with reserves is borrowed against the next shock.”
          </blockquote>
          {BODY.slice(3).map((t) => <p key={t}>{t}</p>)}
        </div>
      </article>
    </div>
  )
}
```

# CRT scanlines and phosphor
> The phosphor look in CSS only: scanlines, vignette, glow and curvature, with a flicker, and a keyboard-operable menu.
- **Category:** Niche worlds
- **Slug:** niche-crt
- **Tags:** niche world, crt, scanlines, retro, arcade, phosphor, css, niche
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/niche-crt
- **Raw source:** https://ui-lab-weld.vercel.app/raw/niche/CrtScanlines.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/niche/CrtScanlines.tsx

## When to use
- Indie games, retro tools, arcade and synth brands
- A toggleable effect over normal accessible text

## Accessibility

Overlay is aria-hidden and pointer-events none so text stays normal; the menu is a listbox with arrow keys; the effect is toggleable and the flicker stops under reduced motion. Part of World 13: CRT Arcade.


## Source
`src/patterns/niche/CrtScanlines.tsx`
```tsx
import { useState } from 'react'

/*
 * Niche world: CRT Arcade. The phosphor look in CSS only: scanlines (a repeating gradient overlay), a soft
 * vignette, text glow, slight screen curvature from border-radius and an inset shadow, and an optional flicker.
 * The overlay is pointer-events none and aria-hidden, so the content underneath stays normal accessible text
 * and the effect can be toggled. Reduced motion: no flicker (the static scanlines remain).
 */

export default function CrtScanlines() {
  const [crt, setCrt] = useState(true)
  const [pick, setPick] = useState(0)
  const items = ['START GAME', 'HIGH SCORES', 'OPTIONS', 'INSERT COIN']

  return (
    <div>
      <style>{`
        .crt-screen { position: relative; background: #07130a; color: #5dff7a; font: 500 18px/1.6 var(--font-mono, monospace); border-radius: 26px / 20px; overflow: hidden; box-shadow: inset 0 0 90px rgba(0,0,0,0.85), 0 0 0 10px #222, 0 0 0 12px #111; }
        .crt-on .crt-text { text-shadow: 0 0 6px rgba(93,255,122,0.8), 0 0 18px rgba(93,255,122,0.35); }
        .crt-fx { pointer-events: none; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.28) 0, rgba(0,0,0,0.28) 1px, transparent 1px, transparent 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%); animation: crt-flick 4s steps(2) infinite; }
        @keyframes crt-flick { 0%, 94%, 100% { opacity: 1; } 96% { opacity: 0.86; } }
        @media (prefers-reduced-motion: reduce) { .crt-fx { animation: none; } }
      `}</style>
      <div className={`crt-screen mx-auto max-w-xl p-8 ${crt ? 'crt-on' : ''}`}>
        <p className="crt-text text-3xl tracking-[0.2em]">ARCADE 84</p>
        <ul className="crt-text mt-6 space-y-1" role="listbox" aria-label="Main menu" tabIndex={0} onKeyDown={(e) => {
          if (e.key === 'ArrowDown') { e.preventDefault(); setPick((p) => Math.min(items.length - 1, p + 1)) }
          if (e.key === 'ArrowUp') { e.preventDefault(); setPick((p) => Math.max(0, p - 1)) }
        }} aria-activedescendant={`crt-${pick}`}>
          {items.map((t, i) => (
            <li key={t} id={`crt-${i}`} role="option" aria-selected={i === pick} onClick={() => setPick(i)} className="min-h-9 cursor-pointer">
              {i === pick ? '> ' : '  '}{t}
            </li>
          ))}
        </ul>
        <p className="crt-text mt-6 text-sm opacity-70">HI-SCORE 048210 · CREDITS 02</p>
        {crt && <div className="crt-fx" aria-hidden />}
      </div>
      <button onClick={() => setCrt((c) => !c)} aria-pressed={crt} className="mx-auto mt-5 block min-h-11 rounded-md border border-border px-4 text-sm text-fg-muted hover:text-fg">
        CRT effect: {crt ? 'on' : 'off'}
      </button>
    </div>
  )
}
```

# Museum wall label with audio guide
> A gallery placard set in proper hierarchy with an audio-guide keypad and a large-print toggle that scales the whole label.
- **Category:** Niche worlds
- **Slug:** niche-museum-placard
- **Tags:** niche world, museum, placard, label, audio guide, accessibility, niche
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/niche-museum-placard
- **Raw source:** https://ui-lab-weld.vercel.app/raw/niche/MuseumPlacard.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/niche/MuseumPlacard.tsx

## When to use
- Galleries, archives, exhibitions and cultural institutions
- Showing object information with dignity

## Accessibility

Large-print toggle is a pressed button; the keypad is a labelled input; the transcript is a polite live region and nothing autoplays. Part of World 14: Museum Wall Label.


## Source
`src/patterns/niche/MuseumPlacard.tsx`
```tsx
import { useState } from 'react'

/*
 * Niche world: Museum Wall Label. The object is the star and the label is set like a gallery placard: title in
 * italics, artist and dates, medium, dimensions, accession number, a short wall text, and an audio-guide
 * keypad where typing the number "plays" that entry's transcript. A "Large print" toggle scales the whole
 * label up (not just the text), because gallery labels have to be readable at arm's length. Audio is simulated
 * (transcript text), so nothing autoplays.
 */

const GUIDE: Record<string, string> = {
  '14': 'Fourteen. The potter pressed the clay in six strokes and left the thumbprint on purpose.',
  '15': 'Fifteen. The glaze pooled in the base during firing; the flaw became the signature.',
  '16': 'Sixteen. Found in a house clearance in 1962 and donated by the family the same year.',
}

export default function MuseumPlacard() {
  const [big, setBig] = useState(false)
  const [code, setCode] = useState('')
  const play = GUIDE[code]

  return (
    <div className="grid gap-6 rounded-xl border border-border bg-[#ece8df] p-6 text-[#1b1a17] md:grid-cols-2">
      <div className="grid min-h-60 place-items-center rounded bg-[#d6cfc0]" role="img" aria-label="A small round-bellied ceramic vessel with a pooled blue glaze">
        <div className="size-32 rounded-[45%_45%_40%_40%] shadow-xl" style={{ background: 'radial-gradient(circle at 35% 30%, #5b86a8, #1f3c58 70%)' }} />
      </div>
      <div className="space-y-3" style={{ fontSize: big ? '1.18rem' : '0.95rem', transition: 'font-size 0.2s' }}>
        <h3 className="font-display text-[1.6em] italic" style={{ fontFamily: 'var(--font-display, serif)' }}>Vessel with pooled glaze</h3>
        <p><strong>Attributed to Hana Okuda</strong> (born 1931), made 1958</p>
        <p className="text-[0.9em]">Stoneware with cobalt-iron glaze<br />H. 21 cm × Diam. 18 cm</p>
        <p className="font-mono text-[0.8em] opacity-70">Accession 1962.14.1 · Gift of the family</p>
        <p className="border-t border-black/20 pt-3 leading-relaxed">Okuda fired this piece in a kiln she built herself. The glaze gathered at the foot and ran in a single line, a defect she kept.</p>
        <div className="border-t border-black/20 pt-3">
          <label className="flex items-center gap-3 text-[0.9em]" htmlFor="mp-code">Audio guide
            <input id="mp-code" inputMode="numeric" maxLength={2} value={code} onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))} placeholder="14" className="w-16 rounded border border-black/40 bg-white/60 px-2 py-1.5 text-center font-mono" />
          </label>
          <p className="mt-2 min-h-12 text-[0.9em] italic" aria-live="polite">{play ?? (code.length === 2 ? 'No entry with that number.' : 'Enter a number from the label: 14, 15 or 16.')}</p>
        </div>
        <button onClick={() => setBig((b) => !b)} aria-pressed={big} className="min-h-11 rounded border border-black/40 px-4 text-[0.85em] hover:bg-black/5">Large print</button>
      </div>
    </div>
  )
}
```

# Seed packet with planting calendar
> An illustrated packet that tilts to the pointer and tears open along a perforation, revealing a planting calendar table.
- **Category:** Niche worlds
- **Slug:** niche-seed-packet
- **Tags:** niche world, seed packet, packaging, calendar, 3d tilt, organic, niche
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/niche-seed-packet
- **Raw source:** https://ui-lab-weld.vercel.app/raw/niche/SeedPacket.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/niche/SeedPacket.tsx

## When to use
- Food, garden, farm and craft brands
- Product packaging as a web component

## Accessibility

The calendar is a real table with row and column headers and marks that do not rely on colour alone; tilt is disabled under reduced motion. Part of World 15: Seed Packet / Garden Catalogue.


## Source
`src/patterns/niche/SeedPacket.tsx`
```tsx
import { useRef, useState } from 'react'

/*
 * Niche world: Seed Packet / Garden Catalogue. An illustrated packet that tilts toward the pointer (CSS 3D,
 * two variables), tears open along a perforated top when you press the button, and reveals the planting
 * calendar. The calendar is a real table: sow, grow and harvest months are marked with text, not colour alone.
 * Reduced motion: no tilt and the tear is an instant swap.
 */

const MONTHS = ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D']
const SOW = [2, 3, 4]
const GROW = [4, 5, 6, 7]
const HARVEST = [6, 7, 8, 9]

export default function SeedPacket() {
  const [open, setOpen] = useState(false)
  const pk = useRef<HTMLDivElement>(null)

  const tilt = (e: React.PointerEvent) => {
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return
    const r = e.currentTarget.getBoundingClientRect()
    const x = (e.clientX - r.left) / r.width - 0.5
    const y = (e.clientY - r.top) / r.height - 0.5
    pk.current!.style.transform = `rotateY(${x * 18}deg) rotateX(${-y * 14}deg)`
  }

  return (
    <div className="grid gap-6 rounded-xl border border-border bg-[#e9dcc0] p-6 text-[#2c3a1f] md:grid-cols-[18rem_1fr]">
      <div className="[perspective:900px]" onPointerMove={tilt} onPointerLeave={() => (pk.current!.style.transform = '')}>
        <div ref={pk} className="relative mx-auto w-60 transition-transform duration-200 [transform-style:preserve-3d] motion-reduce:transition-none">
          <div
            className="relative h-80 overflow-hidden rounded-sm border-2 border-[#2c3a1f] bg-[#f6efd8] shadow-xl"
            style={{ clipPath: open ? 'polygon(0 14%, 8% 10%, 18% 15%, 30% 9%, 42% 14%, 55% 8%, 68% 13%, 80% 9%, 92% 14%, 100% 11%, 100% 100%, 0 100%)' : undefined, transition: 'clip-path 0.4s' }}
          >
            <div className="absolute inset-x-0 top-0 h-3 bg-[repeating-linear-gradient(90deg,#2c3a1f_0_6px,transparent_6px_12px)]" aria-hidden />
            <p className="mt-6 text-center font-mono text-[10px] tracking-[0.3em]">HEIRLOOM SEEDS</p>
            <h3 className="mt-2 text-center font-display text-4xl leading-none italic" style={{ fontFamily: 'var(--font-display, serif)' }}>Sweet<br />Pea</h3>
            <svg viewBox="0 0 120 120" className="mx-auto mt-3 h-32 w-32" aria-hidden>
              <path d="M60 110C60 80 58 60 60 30" stroke="#2c3a1f" strokeWidth="2" fill="none" />
              {[-1, 1].map((d) => (
                <g key={d}>
                  <path d={`M60 70c${d * 30} -6 ${d * 44} -26 ${d * 40} -44c${d * -26} 4 ${d * -40} 20 ${d * -40} 44Z`} fill="#c8586b" stroke="#2c3a1f" strokeWidth="1.5" />
                  <path d={`M60 90c${d * 22} 2 ${d * 36} -8 ${d * 36} -24`} stroke="#2c3a1f" strokeWidth="1" fill="none" />
                </g>
              ))}
              <circle cx="60" cy="28" r="6" fill="#e9b33d" stroke="#2c3a1f" strokeWidth="1.5" />
            </svg>
            <p className="mt-2 text-center font-mono text-[10px]">Lathyrus odoratus · Net wt. 40 seeds</p>
          </div>
        </div>
      </div>
      <div>
        <button onClick={() => setOpen((o) => !o)} aria-expanded={open} className="min-h-11 rounded border-2 border-[#2c3a1f] bg-[#2c3a1f] px-5 font-mono text-sm tracking-wider text-[#f6efd8] hover:bg-[#3d4f2b]">
          {open ? 'Close packet' : 'Tear open'}
        </button>
        <h4 className="mt-5 font-display text-2xl italic" style={{ fontFamily: 'var(--font-display, serif)' }}>Planting calendar</h4>
        <div className="overflow-x-auto">
          <table className="mt-2 w-full min-w-80 border-collapse text-center font-mono text-xs" aria-label="Planting calendar by month">
            <thead>
              <tr><th scope="col" className="text-left font-normal"><span className="sr-only">Crop</span></th>{MONTHS.map((m, i) => <th key={i} scope="col" className="w-7 py-1 font-normal">{m}</th>)}</tr>
            </thead>
            <tbody>
              {([['Sow', SOW], ['Grow', GROW], ['Harvest', HARVEST]] as const).map(([row, on]) => (
                <tr key={row} className="border-t border-[#2c3a1f]/30">
                  <th scope="row" className="py-2 text-left font-normal">{row}</th>
                  {MONTHS.map((_, i) => (
                    <td key={i} className="p-0.5">
                      <span className={`grid h-6 place-items-center rounded-sm ${on.includes(i) ? 'bg-[#2c3a1f] text-[#f6efd8]' : 'bg-black/5 text-transparent'}`}>{on.includes(i) ? '●' : '.'}</span>
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}
```

# Text-mode terminal with real prompt
> A boot sequence that prints line by line, then a working prompt with help, ls, cat, theme and clear commands.
- **Category:** Niche worlds
- **Slug:** niche-terminal-bbs
- **Tags:** niche world, terminal, bbs, ansi, command line, text mode, niche
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/niche-terminal-bbs
- **Raw source:** https://ui-lab-weld.vercel.app/raw/niche/TerminalBoot.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/niche/TerminalBoot.tsx

## When to use
- Developer-adjacent and hacker-culture brands
- Text-first sites and 404 pages

## Accessibility

A real form field inside an aria-live log; fully keyboard-native; the boot log appears at once under reduced motion. Part of World 16: Terminal BBS.


## Source
`src/patterns/niche/TerminalBoot.tsx`
```tsx
import { useEffect, useRef, useState } from 'react'

/*
 * Niche world: Terminal BBS. A text-mode page: a boot sequence prints line by line, then a real prompt accepts
 * commands (help, about, ls, theme, clear). The page is an actual form field in a log region, so it is
 * keyboard-native and readable by screen readers (the log is aria-live polite). Reduced motion: the boot log
 * appears at once.
 */

const BOOT = ['BIOS v2.84 ........ ok', 'MEMORY 640K ........ ok', 'MOUNTING /home ........ ok', 'NET 28.8 kbps ........ connected', '', 'Welcome to HARBOUR BBS. Type help.']
const FILES = ['about.txt', 'rates.txt', 'letters/', 'guestbook.cgi']

export default function TerminalBoot() {
  const [lines, setLines] = useState<string[]>([])
  const [ready, setReady] = useState(false)
  const [amber, setAmber] = useState(false)
  const [input, setInput] = useState('')
  const log = useRef<HTMLDivElement>(null)
  const field = useRef<HTMLInputElement>(null)

  useEffect(() => {
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
      setLines(BOOT)
      setReady(true)
      return
    }
    let i = 0
    const id = window.setInterval(() => {
      setLines((l) => [...l, BOOT[i]])
      i += 1
      if (i >= BOOT.length) {
        window.clearInterval(id)
        setReady(true)
      }
    }, 320)
    return () => window.clearInterval(id)
  }, [])
  useEffect(() => {
    log.current?.scrollTo({ top: 1e6 })
  }, [lines])

  const run = (cmd: string) => {
    const [c, ...rest] = cmd.trim().split(/\s+/)
    const out: string[] = [`guest@harbour:~$ ${cmd}`]
    if (c === 'help') out.push('commands: help  about  ls  cat <file>  theme  clear')
    else if (c === 'about') out.push('A text-mode corner of the web since 1994. Be kind.')
    else if (c === 'ls') out.push(FILES.join('   '))
    else if (c === 'cat') out.push(FILES.includes(rest[0]) ? `(${rest[0]}) nothing to see yet` : `cat: ${rest[0] ?? ''}: no such file`)
    else if (c === 'theme') { setAmber((a) => !a); out.push('theme toggled') }
    else if (c === 'clear') return setLines([])
    else if (c) out.push(`${c}: command not found`)
    setLines((l) => [...l, ...out])
  }

  return (
    <div
      className="overflow-hidden rounded-lg border-2 font-mono text-sm"
      style={{ background: '#0a0c08', color: amber ? '#ffb000' : '#7dff8a', borderColor: amber ? '#5a3d00' : '#1f4d26' }}
      onClick={() => field.current?.focus()}
    >
      <div ref={log} role="log" aria-live="polite" aria-label="Terminal output" className="h-64 overflow-y-auto p-4 whitespace-pre-wrap">
        {lines.map((l, i) => <div key={i}>{l || ' '}</div>)}
      </div>
      {ready && (
        <form onSubmit={(e) => { e.preventDefault(); run(input); setInput('') }} className="flex items-center gap-2 border-t border-current/30 px-4 py-2">
          <label htmlFor="tb-in" className="shrink-0">guest@harbour:~$</label>
          <input id="tb-in" ref={field} value={input} onChange={(e) => setInput(e.target.value)} autoComplete="off" spellCheck={false} autoCapitalize="none" className="min-h-9 flex-1 bg-transparent outline-none" />
        </form>
      )}
    </div>
  )
}
```

# Tarot cards that turn over
> Three illustrated cards on a velvet table that flip in 3D to reveal a glyph and a reading; reshuffle deals a new draw.
- **Category:** Niche worlds
- **Slug:** niche-tarot
- **Tags:** niche world, tarot, cards, flip, 3d, mystic, niche
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/niche-tarot
- **Raw source:** https://ui-lab-weld.vercel.app/raw/niche/TarotFlip.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/niche/TarotFlip.tsx

## When to use
- Mystic, wellness, storytelling and game brands
- A reveal interaction with built-in suspense

## Accessibility

Each card is a button with a descriptive label that includes the reading once turned; the flip is replaced by a swap under reduced motion. Part of World 17: Tarot Deck.


## Source
`src/patterns/niche/TarotFlip.tsx`
```tsx
import { useState } from 'react'

/*
 * Niche world: Tarot Deck. Three illustrated cards on a velvet table. Each is a button: press (or Enter/Space)
 * to turn it over in 3D, revealing a glyph and its reading; the back shows a patterned cover. The reading is
 * real text, present in the DOM whether or not the card is turned (hidden from assistive tech until turned),
 * and a "Reshuffle" button deals a new draw. Reduced motion: the card swaps faces without turning.
 */

const DECK = [
  { name: 'The Lantern', glyph: <path d="M60 20v14M44 40h32l-4 44H48zM50 84v8M70 84v8M52 56h16" />, text: 'A small light is enough. Move toward it before the path is clear.' },
  { name: 'The Tide', glyph: <path d="M16 70c14-16 28 16 44 0s30 16 44 0M16 50c14-16 28 16 44 0s30 16 44 0M16 90c14-16 28 16 44 0s30 16 44 0" />, text: 'What returns was never gone. Wait for the water to decide.' },
  { name: 'The Key', glyph: <path d="M60 24a14 14 0 1 1 0 28 14 14 0 0 1 0-28ZM60 52v44M60 78h14M60 92h10" />, text: 'You already hold the thing you are asking for. Try the door.' },
  { name: 'The Orchard', glyph: <path d="M60 96V58M60 58c-22 0-30-26-8-34 6-12 28-12 32 4 14 8 8 30-24 30ZM44 34l2 0M72 40l2 0" />, text: 'Slow work, tended daily, comes to fruit without announcement.' },
  { name: 'The Bridge', glyph: <path d="M10 80h100M20 80c0-34 80-34 80 0M36 56v24M60 48v32M84 56v24" />, text: 'Between two certainties there is a crossing that asks only that you walk.' },
]

function draw() {
  return [...DECK].sort(() => Math.random() - 0.5).slice(0, 3)
}

export default function TarotFlip() {
  const [hand, setHand] = useState(() => draw())
  const [turned, setTurned] = useState<Set<string>>(new Set())

  return (
    <div className="rounded-xl border border-[#3a1f2e] p-6" style={{ background: 'radial-gradient(circle at 50% 30%, #4a1f3a, #1e0f1a)' }}>
      <div className="grid grid-cols-3 gap-3 sm:gap-5">
        {hand.map((c) => {
          const on = turned.has(c.name)
          return (
            <button
              key={c.name}
              aria-pressed={on}
              aria-label={on ? `${c.name}: ${c.text}` : 'Face-down card. Press to turn over.'}
              onClick={() => setTurned((t) => new Set(t).add(c.name))}
              className="group [perspective:900px]"
            >
              <span className="relative block aspect-[2/3] w-full transition-transform duration-700 [transform-style:preserve-3d] motion-reduce:transition-none" style={{ transform: on ? 'rotateY(180deg)' : 'none' }}>
                <span className="absolute inset-0 grid place-items-center rounded-lg border-2 border-[#d9b66a] [backface-visibility:hidden]" style={{ background: 'repeating-conic-gradient(from 0deg, #3a1530 0 15deg, #4d1d40 15deg 30deg)' }} aria-hidden>
                  <span className="size-10 rotate-45 border-2 border-[#d9b66a]" />
                </span>
                <span className="absolute inset-0 flex flex-col items-center justify-between rounded-lg border-2 border-[#d9b66a] bg-[#f1e4c4] p-2 text-[#2b1530] [backface-visibility:hidden] [transform:rotateY(180deg)]">
                  <span className="font-display text-sm italic sm:text-base" style={{ fontFamily: 'var(--font-display, serif)' }}>{c.name}</span>
                  <svg viewBox="0 0 120 110" className="w-3/4" fill="none" stroke="#2b1530" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" aria-hidden>{c.glyph}</svg>
                  <span className="hidden text-center text-[10px] leading-snug sm:block">{c.text}</span>
                </span>
              </span>
            </button>
          )
        })}
      </div>
      <button onClick={() => { setHand(draw()); setTurned(new Set()) }} className="mx-auto mt-6 block min-h-11 rounded border border-[#d9b66a] px-5 text-sm text-[#f1e4c4] hover:bg-white/10">Reshuffle</button>
    </div>
  )
}
```

# Clinical medicine label
> A pharmacy label designed for clarity under risk: strict hierarchy, large tabular doses, a boxed warning with icon and word, and a tickable daily schedule.
- **Category:** Niche worlds
- **Slug:** niche-clinical-label
- **Tags:** niche world, clinical, medicine, label, health, clarity, niche
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/niche-clinical-label
- **Raw source:** https://ui-lab-weld.vercel.app/raw/niche/ClinicalLabel.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/niche/ClinicalLabel.tsx

## When to use
- Health, pharmacy and safety-critical content
- Anywhere a misread number could hurt someone

## Accessibility

Warnings use an icon plus the word Warning, never colour alone; schedule items are checkbox buttons with state in text; marked as a demo, not medical advice. Part of World 18: Pharmacy / Clinical Label.


## Source
`src/patterns/niche/ClinicalLabel.tsx`
```tsx
import { useState } from 'react'

/*
 * Niche world: Pharmacy / Clinical Label. When the content can hurt someone if misread, design is clarity under
 * rules: one typeface, a strict hierarchy (what, how much, when, warnings), large tabular numerals for doses,
 * boxed warnings with a redundant icon and the word "Warning" (never colour alone), and a daily schedule you can
 * tick. State is saved in the page only; this is a demo, not medical advice. Reduced motion is irrelevant (no motion).
 */

const DOSES = ['Morning', 'Midday', 'Evening', 'Bedtime']

export default function ClinicalLabel() {
  const [taken, setTaken] = useState<boolean[]>([true, false, false, false])
  const next = DOSES.find((_, i) => !taken[i])

  return (
    <div className="mx-auto max-w-xl rounded-md border-2 border-black bg-white p-5 text-black" style={{ fontFamily: 'var(--font-sans)' }}>
      <header className="flex items-start justify-between gap-4 border-b-4 border-black pb-3">
        <div>
          <p className="text-xs font-semibold tracking-wider uppercase">Patient: A. Mehta · Rx 0048213</p>
          <h3 className="mt-1 text-2xl font-bold">Amoxicillin 500 mg</h3>
          <p className="text-sm">Capsule · Antibiotic</p>
        </div>
        <div className="text-right" aria-label="Quantity: 21 capsules">
          <p className="text-4xl font-bold tabular-nums">21</p>
          <p className="text-xs uppercase">capsules</p>
        </div>
      </header>
      <section className="mt-4" aria-labelledby="cl-how">
        <h4 id="cl-how" className="text-xs font-semibold tracking-wider uppercase">How to take</h4>
        <p className="mt-1 text-xl font-semibold">Take <span className="tabular-nums">1</span> capsule <span className="tabular-nums">3</span> times a day, with food.</p>
        <p className="text-sm">Finish all 21 capsules, even if you feel better.</p>
      </section>
      <section className="mt-4 border-2 border-black p-3" aria-labelledby="cl-warn">
        <h4 id="cl-warn" className="flex items-center gap-2 text-sm font-bold uppercase"><span aria-hidden className="grid size-6 place-items-center bg-black text-white">!</span> Warning</h4>
        <ul className="mt-1 list-disc pl-5 text-sm">
          <li>Do not take if you are allergic to penicillin.</li>
          <li>Stop and call your doctor if you get a rash or trouble breathing.</li>
        </ul>
      </section>
      <section className="mt-4" aria-labelledby="cl-today">
        <h4 id="cl-today" className="text-xs font-semibold tracking-wider uppercase">Today</h4>
        <ul className="mt-2 grid grid-cols-2 gap-2 sm:grid-cols-4">
          {DOSES.map((d, i) => (
            <li key={d}>
              <button
                role="checkbox"
                aria-checked={taken[i]}
                onClick={() => setTaken((t) => t.map((v, j) => (j === i ? !v : v)))}
                className={`min-h-14 w-full border-2 border-black px-2 text-left text-sm font-semibold ${taken[i] ? 'bg-black text-white' : 'bg-white'}`}
              >
                <span aria-hidden>{taken[i] ? '✔ ' : '☐ '}</span>{d}
                <span className="block text-xs font-normal">{taken[i] ? 'Taken' : 'Due'}</span>
              </button>
            </li>
          ))}
        </ul>
        <p className="mt-2 text-sm" aria-live="polite">{next ? `Next dose: ${next}.` : 'All doses taken for today.'}</p>
      </section>
      <p className="mt-4 border-t border-black pt-2 text-[11px]">Demo label. Not medical advice.</p>
    </div>
  )
}
```

# Type specimen with live axes
> How a type foundry sells a typeface: a giant glyph, a character set, a size ladder and sliders for the variable axes (weight, optical size, softness, wonk).
- **Category:** Niche worlds
- **Slug:** niche-specimen
- **Tags:** niche world, type specimen, variable font, axes, typography, fraunces, niche
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/niche-specimen
- **Raw source:** https://ui-lab-weld.vercel.app/raw/niche/SpecimenSheet.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/niche/SpecimenSheet.tsx

## When to use
- Type foundries, brand typography pages
- Teaching variable fonts by letting people move the axes

## Accessibility

Native range inputs with visible labels and values; the giant glyph has a text alternative. Part of World 19: Type Specimen.


## Source
`src/patterns/niche/SpecimenSheet.tsx`
```tsx
import { useState } from 'react'
import '@fontsource-variable/fraunces/full.css'

/*
 * Niche world: Type Specimen Sheet. How a type foundry sells a typeface: a huge glyph, the character set, a size
 * ladder and live controls for the variable axes (weight, optical size, softness, wonk). The axes drive
 * font-variation-settings on one element, so you see what the design space does. Sliders are native range inputs
 * with visible values. Needs a variable font with those axes (Fraunces here, via Fontsource).
 */

const ALPHA = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789&?!@#%'

export default function SpecimenSheet() {
  const [wght, setWght] = useState(500)
  const [opsz, setOpsz] = useState(72)
  const [soft, setSoft] = useState(0)
  const [wonk, setWonk] = useState(0)
  const style = { fontFamily: "'Fraunces Variable', serif", fontVariationSettings: `'wght' ${wght}, 'opsz' ${opsz}, 'SOFT' ${soft}, 'WONK' ${wonk}` } as const

  const axes: [string, number, (n: number) => void, number, number][] = [
    ['Weight', wght, setWght, 100, 900],
    ['Optical size', opsz, setOpsz, 9, 144],
    ['Softness', soft, setSoft, 0, 100],
    ['Wonk', wonk, setWonk, 0, 1],
  ]

  return (
    <div className="rounded-xl border border-[#cfc6b4] bg-[#f6f1e6] p-6 text-[#1b1813]">
      <div className="grid gap-6 md:grid-cols-[1fr_15rem]">
        <div>
          <p className="font-mono text-[11px] tracking-wider uppercase">Fraunces · Variable · 4 axes</p>
          <p className="mt-2 leading-none" style={{ ...style, fontSize: 'clamp(7rem, 22vw, 13rem)' }} aria-label="Ag">Ag</p>
          <p className="mt-2 break-all leading-snug" style={{ ...style, fontSize: '1.7rem' }}>{ALPHA}</p>
        </div>
        <form className="space-y-4" onSubmit={(e) => e.preventDefault()} aria-label="Variable axes">
          {axes.map(([name, val, set, min, max]) => (
            <label key={name} className="block">
              <span className="flex justify-between font-mono text-xs"><span>{name}</span><span className="tabular-nums">{val}</span></span>
              <input type="range" min={min} max={max} step={max === 1 ? 1 : 1} value={val} onChange={(e) => set(Number(e.target.value))} className="h-8 w-full accent-[#a8402a]" />
            </label>
          ))}
        </form>
      </div>
      <div className="mt-6 space-y-1 border-t border-[#1b1813]/30 pt-4">
        {[48, 32, 22, 16, 12].map((px) => (
          <p key={px} className="flex items-baseline gap-4" style={style}>
            <span className="w-10 shrink-0 font-mono text-[11px]" style={{ fontFamily: 'var(--font-mono)' }}>{px}</span>
            <span style={{ fontSize: px }}>Sphinx of black quartz, judge my vow</span>
          </p>
        ))}
      </div>
    </div>
  )
}
```

# Nautical chart with tide slider
> Depth contours generated with marching squares, printed soundings and a tide slider that moves the water line.
- **Category:** Niche worlds
- **Slug:** niche-nautical-chart
- **Tags:** niche world, nautical, chart, contours, marching squares, map, svg, niche
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/niche-nautical-chart
- **Raw source:** https://ui-lab-weld.vercel.app/raw/niche/ChartContours.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/niche/ChartContours.tsx

## When to use
- Marine, outdoor, maps and survey brands
- Generative geometry that stays honest data

## Accessibility

The chart has an aria-label with the water level and shallowest sounding; the slider has an aria-valuetext in metres. Part of World 20: Nautical Chart.


## Source
`src/patterns/niche/ChartContours.tsx`
```tsx
import { useMemo, useState } from 'react'

/*
 * Niche world: Nautical Chart. Contour lines drawn from a depth field with marching squares: a smooth
 * pseudo-random seabed, isobaths every few metres, soundings printed at grid points, and a tide slider that
 * raises the water line so the shallows turn to land. The chart is generated, but it is real geometry: move the
 * slider and the filled shallows change. A text readout gives the water level and the shallowest sounding.
 */

const N = 48
const W = 480
const H = 320

function field(): number[] {
  const f: number[] = []
  for (let y = 0; y < N; y++)
    for (let x = 0; x < N; x++) {
      const u = x / N, v = y / N
      const d = 12 + 9 * Math.sin(u * 5.1 + 0.6) * Math.cos(v * 4.3) + 6 * Math.sin(u * 11 + v * 7) * 0.6 + 14 * Math.max(0, 1 - Math.hypot(u - 0.3, v - 0.35) * 3.2) * -1 + 10 * Math.exp(-Math.hypot(u - 0.75, v - 0.7) * 5) * -1
      f.push(d)
    }
  return f
}

function contour(f: number[], level: number): string {
  const sx = W / (N - 1), sy = H / (N - 1)
  const v = (x: number, y: number) => f[y * N + x]
  const lerp = (a: number, b: number) => (level - a) / (b - a)
  let d = ''
  for (let y = 0; y < N - 1; y++)
    for (let x = 0; x < N - 1; x++) {
      const tl = v(x, y), tr = v(x + 1, y), br = v(x + 1, y + 1), bl = v(x, y + 1)
      const idx = (tl > level ? 8 : 0) | (tr > level ? 4 : 0) | (br > level ? 2 : 0) | (bl > level ? 1 : 0)
      if (idx === 0 || idx === 15) continue
      const pts = {
        t: [x + lerp(tl, tr), y], r: [x + 1, y + lerp(tr, br)], b: [x + lerp(bl, br), y + 1], l: [x, y + lerp(tl, bl)],
      } as Record<string, number[]>
      const segs: [string, string][] = {
        1: [['l', 'b']], 2: [['b', 'r']], 3: [['l', 'r']], 4: [['t', 'r']], 5: [['l', 't'], ['b', 'r']], 6: [['t', 'b']], 7: [['l', 't']],
        8: [['l', 't']], 9: [['t', 'b']], 10: [['l', 'b'], ['t', 'r']], 11: [['t', 'r']], 12: [['l', 'r']], 13: [['b', 'r']], 14: [['l', 'b']],
      }[idx] as [string, string][]
      for (const [a, b] of segs) d += `M${(pts[a][0] * sx).toFixed(1)} ${(pts[a][1] * sy).toFixed(1)}L${(pts[b][0] * sx).toFixed(1)} ${(pts[b][1] * sy).toFixed(1)}`
    }
  return d
}

export default function ChartContours() {
  const f = useMemo(field, [])
  const levels = [4, 8, 12, 16, 20, 24]
  const paths = useMemo(() => levels.map((l) => [l, contour(f, l)] as const), [f])
  const [tide, setTide] = useState(8)
  const soundings = useMemo(() => Array.from({ length: 14 }, (_, i) => {
    const gx = 4 + ((i * 7) % 40), gy = 4 + ((i * 11) % 40)
    return { x: (gx / (N - 1)) * W, y: (gy / (N - 1)) * H, d: Math.max(0, f[gy * N + gx]).toFixed(1) }
  }), [f])
  const shallowest = Math.min(...f)

  return (
    <div className="rounded-xl border border-[#9fb3b3] bg-[#e7f0ec] p-4 text-[#17313a]">
      <svg viewBox={`0 0 ${W} ${H}`} className="w-full rounded bg-[#d4e6e2]" role="img" aria-label={`Nautical chart with depth contours. Water level ${tide} metres; shallowest sounding ${shallowest.toFixed(1)} metres.`}>
        <rect width={W} height={H} fill="#d4e6e2" />
        {paths.map(([l, d]) => (
          <path key={l} d={d} fill="none" stroke={l <= tide ? '#b88a3b' : '#4b7d8c'} strokeWidth={l === tide ? 2.2 : 0.9} opacity={l <= tide ? 0.95 : 0.8} />
        ))}
        {soundings.map((s, i) => (
          <text key={i} x={s.x} y={s.y} fontSize="8" fill="#17313a" textAnchor="middle" style={{ fontFamily: 'var(--font-mono)' }}>{s.d}</text>
        ))}
        <g stroke="#17313a" strokeWidth="1" fill="none"><rect x="3" y="3" width={W - 6} height={H - 6} /></g>
      </svg>
      <label className="mt-3 flex items-center gap-4 text-sm">
        Water level
        <input type="range" min={4} max={24} step={4} value={tide} onChange={(e) => setTide(Number(e.target.value))} className="h-8 flex-1 accent-[#b88a3b]" aria-valuetext={`${tide} metres`} />
        <span className="w-14 text-right font-mono tabular-nums">{tide} m</span>
      </label>
    </div>
  )
}
```

# Scroll-driven reveal, no JavaScript
> Cards animate as they enter the scroll box using animation-timeline: view(), wrapped in @supports so unsupported browsers just show the cards.
- **Category:** Modern CSS
- **Slug:** css-scroll-reveal
- **Tags:** modern css, scroll-driven, view timeline, animation, no javascript
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/css-scroll-reveal
- **Raw source:** https://ui-lab-weld.vercel.app/raw/css/ScrollRevealCss.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/css/ScrollRevealCss.tsx

## When to use
- Scroll-in effects with zero JS
- Replacing IntersectionObserver reveal code

## Accessibility

Nothing is hidden if the feature is unsupported; the animation is removed under reduced motion; the scroll box is focusable and labelled.


## Source
`src/patterns/css/ScrollRevealCss.tsx`
```tsx
/*
 * Modern CSS: scroll-driven reveal with no JavaScript. `animation-timeline: view()` ties each card's animation to its
 * own position in the scroll box. Wrapped in @supports so browsers without it (Firefox stable at the time of writing)
 * simply show the cards; nothing is ever hidden by an unsupported feature. Reduced motion removes the animation.
 */

const CSS = `
.sdr-box { height: 340px; overflow-y: auto; padding: 1rem; display: grid; gap: 1rem; align-content: start; }
.sdr-card { padding: 1.25rem; border-radius: 0.75rem; border: 1px solid var(--color-border); background: var(--color-surface); }
.sdr-card h3 { font-weight: 600; }
.sdr-card p { margin-top: .25rem; font-size: .875rem; color: var(--color-fg-muted); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sdr-card { animation: sdr-in linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    @keyframes sdr-in { from { opacity: 0; transform: translateY(36px) scale(.96); } to { opacity: 1; transform: none; } }
  }
}
`

export default function ScrollRevealCss() {
  return (
    <div className="overflow-hidden rounded-xl border border-border">
      <style>{CSS}</style>
      <div className="sdr-box" tabIndex={0} role="region" aria-label="Scrollable list, cards reveal as they enter">
        {['One', 'Two', 'Three', 'Four', 'Five', 'Six'].map((n) => (
          <article key={n} className="sdr-card">
            <h3>Card {n}</h3>
            <p>Animated by the browser on the compositor, with no scroll listener and no IntersectionObserver.</p>
          </article>
        ))}
      </div>
    </div>
  )
}
```

# Native popover menu with entry animation
> A menu using the Popover API and @starting-style: the browser handles open, close, light dismiss, top layer and focus return; CSS animates it.
- **Category:** Modern CSS
- **Slug:** css-popover-starting
- **Tags:** modern css, popover, starting-style, menu, top layer
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/css-popover-starting
- **Raw source:** https://ui-lab-weld.vercel.app/raw/css/PopoverStarting.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/css/PopoverStarting.tsx

## When to use
- Menus, tooltips and small dialogs without a positioning library
- Animating display none to visible

## Accessibility

Popover gives Esc to close, light dismiss and focus return natively; the trigger is a real button; animation is removed under reduced motion.


## Source
`src/patterns/css/PopoverStarting.tsx`
```tsx
import { useId, useRef, type SyntheticEvent } from 'react'

/*
 * Modern CSS: a menu with the native Popover API and @starting-style. The browser handles open and close, light
 * dismiss (click outside, Esc), top-layer stacking and focus return; CSS animates entry and exit, including
 * display:none via `transition-behavior: allow-discrete`. Where popover is unsupported the button does nothing
 * visible, so ship a non-popover fallback if you target older browsers.
 */

const CSS = `
.pop-menu { margin: 0; inset: unset; padding: .35rem; min-width: 12rem; border-radius: .75rem; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-fg); box-shadow: 0 12px 40px rgb(0 0 0 / .25); }
.pop-menu a { display: block; padding: .5rem .75rem; border-radius: .5rem; font-size: .875rem; }
.pop-menu a:hover, .pop-menu a:focus-visible { background: var(--color-surface-2); }
@media (prefers-reduced-motion: no-preference) {
  .pop-menu { transition: opacity .18s ease, transform .18s ease, display .18s allow-discrete, overlay .18s allow-discrete; opacity: 0; transform: translateY(-6px) scale(.98); }
  .pop-menu:popover-open { opacity: 1; transform: none; }
  @starting-style { .pop-menu:popover-open { opacity: 0; transform: translateY(-6px) scale(.98); } }
}
`

export default function PopoverStarting() {
  const id = useId().replace(/:/g, '')
  const btn = useRef<HTMLButtonElement>(null)
  // The popover lives in the top layer, so place it from the trigger's rect each time it opens.
  const place = (e: SyntheticEvent<HTMLDivElement>) => {
    if ((e.nativeEvent as unknown as { newState?: string }).newState !== 'open' || !btn.current) return
    const r = btn.current.getBoundingClientRect()
    e.currentTarget.style.top = `${r.bottom + 6}px`
    e.currentTarget.style.left = `${r.left}px`
  }
  return (
    <div className="flex min-h-56 items-start justify-center p-6">
      <style>{CSS}</style>
      <button ref={btn} popoverTarget={id} className="rounded-md border border-border bg-surface px-4 py-2 text-sm font-medium hover:bg-surface-2">
        Open menu
      </button>
      <div id={id} popover="auto" className="pop-menu" onToggle={place} style={{ position: 'fixed' }}>
        <a href="#pop" onClick={(e) => e.preventDefault()}>Rename</a>
        <a href="#pop" onClick={(e) => e.preventDefault()}>Duplicate</a>
        <a href="#pop" onClick={(e) => e.preventDefault()}>Archive</a>
      </div>
    </div>
  )
}
```

# Anchor-positioned tooltip
> A tooltip tied to its trigger with anchor positioning; the browser flips it to the other side when there is no room.
- **Category:** Modern CSS
- **Slug:** css-anchor-tooltip
- **Tags:** modern css, anchor positioning, tooltip, position-area
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/css-anchor-tooltip
- **Raw source:** https://ui-lab-weld.vercel.app/raw/css/AnchorTooltip.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/css/AnchorTooltip.tsx

## When to use
- Tooltips and popovers that must stay on screen
- Dropping measure-and-place JavaScript

## Accessibility

The tooltip is linked with aria-describedby, appears on hover and keyboard focus, and falls back to a plain visible note without support.


## Source
`src/patterns/css/AnchorTooltip.tsx`
```tsx
import { useId } from 'react'

/*
 * Modern CSS: anchor positioning. A tooltip is tied to its trigger with `anchor-name` / `position-anchor` /
 * `position-area`, and flips to the other side by itself when it would leave the viewport (`position-try-fallbacks`).
 * No measuring code. Without support the tooltip is simply shown under the button as normal flow text.
 */

const CSS = `
.anc-wrap { display: inline-block; }
.anc-tip { margin-top: .5rem; padding: .4rem .65rem; border-radius: .5rem; background: var(--color-fg); color: var(--color-bg); font-size: .75rem; max-width: 16rem; }
@supports (anchor-name: --a) {
  .anc-btn { anchor-name: --anc; }
  .anc-tip { margin: 0; position: fixed; position-anchor: --anc; position-area: top; position-try-fallbacks: flip-block; margin-block: .5rem; inset: auto; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
  .anc-wrap:hover .anc-tip, .anc-btn:focus-visible + .anc-tip { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .anc-tip { transition: none; } }
`

export default function AnchorTooltip() {
  const id = useId()
  return (
    <div className="grid min-h-56 place-items-center p-6">
      <style>{CSS}</style>
      <span className="anc-wrap">
        <button className="anc-btn rounded-md border border-border bg-surface px-4 py-2 text-sm font-medium hover:bg-surface-2" aria-describedby={id}>
          Hover or focus me
        </button>
        <span id={id} role="tooltip" className="anc-tip">Placed by the browser next to its anchor, and flipped if there is no room.</span>
      </span>
    </div>
  )
}
```

# Balanced text, growing textarea, :has()
> text-wrap balance and pretty, a textarea that grows with field-sizing: content, and a field group styled from its input by :has().
- **Category:** Modern CSS
- **Slug:** css-type-niceties
- **Tags:** modern css, text-wrap, field-sizing, has selector, typography
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/css-type-niceties
- **Raw source:** https://ui-lab-weld.vercel.app/raw/css/TypographyNiceties.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/css/TypographyNiceties.tsx

## When to use
- Headlines with even lines
- Auto-growing inputs without a script

## Accessibility

Pure presentation changes; labels stay real labels; all of it degrades to normal browser behaviour.


## Source
`src/patterns/css/TypographyNiceties.tsx`
```tsx
/*
 * Modern CSS: four small features that remove JavaScript or hacks. `text-wrap: balance` evens out headline lines;
 * `text-wrap: pretty` avoids one-word last lines; `field-sizing: content` makes a textarea grow with its text;
 * `:has()` styles a field group from the state of its input. All degrade to normal behaviour if unsupported.
 */

const CSS = `
.tn h3 { text-wrap: balance; font-size: 1.5rem; line-height: 1.15; font-weight: 600; }
.tn p { text-wrap: pretty; color: var(--color-fg-muted); }
.tn textarea { field-sizing: content; min-height: 3rem; max-height: 10rem; width: 100%; padding: .6rem .75rem; border-radius: .5rem; border: 1px solid var(--color-border); background: var(--color-surface); resize: none; }
.tn .grp { padding: .5rem; border-radius: .75rem; border: 1px solid var(--color-border); }
.tn .grp:has(textarea:focus-visible) { border-color: var(--color-accent); }
.tn .grp:has(textarea:not(:placeholder-shown)) .hint { opacity: .4; }
.tn .hint { font-size: .75rem; transition: opacity .2s ease; }
@media (prefers-reduced-motion: reduce) { .tn .hint { transition: none; } }
`

export default function TypographyNiceties() {
  return (
    <div className="tn grid gap-5 p-6 sm:grid-cols-2">
      <style>{CSS}</style>
      <div>
        <h3>A headline that breaks into even lines instead of leaving a lonely word</h3>
        <p className="mt-3">Body copy uses pretty wrapping so the final line is never a single orphaned word sitting alone on the line.</p>
      </div>
      <label className="grp block">
        <span className="mb-1 block text-sm font-medium">Your note</span>
        <textarea placeholder="Type, and the box grows. No resize script." rows={1} />
        <span className="hint mt-1 block">The hint dims when there is text, using :has().</span>
      </label>
    </div>
  )
}
```

# Blur-up placeholder from six colours
> A soft placeholder built in CSS from six colours (eighteen bytes) that sits behind a photograph while it loads, then the image fades in. The idea behind blurhash, with no decoder.
- **Category:** Modern CSS
- **Slug:** css-blur-up-placeholder
- **Tags:** modern css, placeholder, lqip, blur, images, performance
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/css-blur-up-placeholder
- **Raw source:** https://ui-lab-weld.vercel.app/raw/css/BlurUpPlaceholder.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/css/BlurUpPlaceholder.tsx
- **Reference:** [Inspired by: Minimal CSS-only blurry image placeholders (Show HN)](https://leanrada.com/notes/css-only-lqip/)

## When to use
- Photographs and hero images that load slowly
- Avoiding layout shift and blank boxes

## Accessibility

The placeholder is decorative and hidden from assistive tech; the real image keeps its alt text; the fade is removed under reduced motion; the button has a 44px target.


## Source
`src/patterns/css/BlurUpPlaceholder.tsx`
```tsx
import { useState } from 'react'

/*
 * A tiny blurred placeholder made in CSS from just six colours (three by two cells, eighteen bytes of hex). The cells are
 * scaled up and blurred so they read as a soft impression of the picture while the real image loads, then the image fades
 * in over it. It is the idea behind blurhash and LQIP, with no decoder and no canvas. Trade-off: six colours cannot show
 * detail, so use it for photographs, not diagrams. Always keep the image's alt text; the placeholder is decorative.
 */

const CELLS = ['#c9d6e8', '#e9cfa6', '#9bb7d4', '#5f7c96', '#8aa58a', '#c98b5f']
// A tiny scene drawn as an SVG data URI: stands in for a photograph so the demo needs no network.
const SCENE = `data:image/svg+xml;utf8,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'><defs><linearGradient id='s' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='#bcd3ea'/><stop offset='1' stop-color='#f1dcb6'/></linearGradient></defs><rect width='300' height='200' fill='url(#s)'/><circle cx='220' cy='60' r='26' fill='#fff2c4'/><path d='M0 140 L70 90 L130 130 L190 80 L300 150 V200 H0Z' fill='#5f7c96'/><path d='M0 170 Q80 130 160 165 T300 160 V200 H0Z' fill='#8aa58a'/></svg>`)}`

export default function BlurUpPlaceholder() {
  const [loaded, setLoaded] = useState(false)
  const [key, setKey] = useState(0)
  return (
    <div className="mx-auto max-w-sm">
      <div className="relative aspect-[3/2] overflow-hidden rounded-xl border border-border bg-surface-2">
        <div aria-hidden className="absolute inset-0 grid scale-125 grid-cols-3 grid-rows-2 blur-2xl">
          {CELLS.map((c) => <span key={c} style={{ background: c }} />)}
        </div>
        {loaded && <img key={key} src={SCENE} alt="A pale mountain range at dusk with a small sun" className="absolute inset-0 h-full w-full animate-[fadein_.6s_ease_both] object-cover motion-reduce:animate-none" />}
        <style>{'@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }'}</style>
      </div>
      <div className="mt-3 flex items-center justify-between gap-3 text-sm">
        <p className="text-fg-muted">{loaded ? 'Loaded. The placeholder sits behind it.' : 'Six colours, blurred. Press load.'}</p>
        <button onClick={() => { setLoaded((l) => !l); setKey((k) => k + 1) }} className="min-h-11 shrink-0 rounded-md border border-border px-4 font-medium hover:bg-surface">{loaded ? 'Reset' : 'Load image'}</button>
      </div>
      <pre tabIndex={0} aria-label="The six colours" className="mt-3 overflow-x-auto rounded-lg bg-surface-2 p-3 font-mono text-xs">{CELLS.join(' ')}</pre>
    </div>
  )
}
```

# Multi-stroke text (concentric outlines)
> A headline with two concentric outlines in different colours, made from rings of text-shadow, with sliders and colour pickers. Stays real text.
- **Category:** Modern CSS
- **Slug:** css-multi-stroke-text
- **Tags:** modern css, text, stroke, outline, text-shadow, typography
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/css-multi-stroke-text
- **Raw source:** https://ui-lab-weld.vercel.app/raw/css/MultiStrokeText.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/css/MultiStrokeText.tsx
- **Reference:** [Inspired by: Multi-stroke text effect in CSS (Show HN)](https://yuanchuan.dev/multi-stroke-text-effect-in-css)

## When to use
- Poster-like headlines and logos in pure CSS
- Sticker and comic lettering

## Accessibility

The word is real, selectable text; use only at very large sizes where the strokes do not close the letter counters; sliders and colour inputs have visible labels.


## Source
`src/patterns/css/MultiStrokeText.tsx`
```tsx
import { useMemo, useState } from 'react'

/*
 * Multi-stroke text: a headline with two or three concentric outlines in different colours, made with text-shadow rings.
 * Each ring is a set of shadows at evenly spaced angles around the glyph, and the rings are stacked from the inside out.
 * It is pure CSS output (copy the generated rule). Keep the text large and short; at small sizes the strokes fill in the
 * counters and the word becomes a blob. The text itself stays real text, so it is read and selectable as normal.
 */

const ring = (r: number, c: string, steps = 24) =>
  Array.from({ length: steps }, (_, i) => {
    const a = (i / steps) * Math.PI * 2
    return `${(Math.cos(a) * r).toFixed(1)}px ${(Math.sin(a) * r).toFixed(1)}px 0 ${c}`
  }).join(', ')

export default function MultiStrokeText() {
  const [w1, setW1] = useState(3)
  const [w2, setW2] = useState(7)
  const [c1, setC1] = useState('#ffffff')
  const [c2, setC2] = useState('#d63a2a')
  const shadow = useMemo(() => [ring(w1, c1), ring(w1 + w2, c2)].join(', '), [w1, w2, c1, c2])
  return (
    <div className="mx-auto max-w-xl">
      <div className="grid min-h-44 place-items-center overflow-hidden rounded-xl bg-[#241f3a] p-6">
        <p className="text-center text-6xl font-black tracking-tight sm:text-7xl" style={{ color: '#241f3a', textShadow: shadow, letterSpacing: '0.02em' }}>STROKE</p>
      </div>
      <div className="mt-4 grid grid-cols-2 gap-4 text-sm">
        <label className="block">First ring: {w1}px
          <input type="range" min={1} max={8} value={w1} onChange={(e) => setW1(Number(e.target.value))} className="mt-1 block h-11 w-full" />
        </label>
        <label className="block">Second ring: {w2}px
          <input type="range" min={2} max={14} value={w2} onChange={(e) => setW2(Number(e.target.value))} className="mt-1 block h-11 w-full" />
        </label>
        <label className="flex items-center gap-3">First colour <input type="color" value={c1} onChange={(e) => setC1(e.target.value)} className="h-11 w-14 rounded border border-border bg-transparent" /></label>
        <label className="flex items-center gap-3">Second colour <input type="color" value={c2} onChange={(e) => setC2(e.target.value)} className="h-11 w-14 rounded border border-border bg-transparent" /></label>
      </div>
    </div>
  )
}
```

# Event timeline
> Vertical rail with aligned mono timestamps and confidence-coloured dots. Rows reveal on scroll.
- **Category:** Data viz
- **Slug:** timeline
- **Tags:** timeline, activity feed, history, events
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/timeline
- **Raw source:** https://ui-lab-weld.vercel.app/raw/dataviz/Timeline.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/dataviz/Timeline.tsx

## When to use
- Activity feeds, audit logs, reconstructed days (MemoryShards)
- Order and delivery tracking

## Accessibility

Semantic <ol> + <time>; confidence also conveyed by legend, not colour alone.


## Source
`src/patterns/dataviz/Timeline.tsx`
```tsx
/*
 * Vertical event timeline. A single rail line, dots coloured by
 * confidence, and time in a fixed-width mono column so rows align.
 * Items reveal on scroll via the same animation-timeline trick.
 */

type Event = { time: string; title: string; detail: string; confidence: 'high' | 'medium' | 'low' }

const DOT: Record<Event['confidence'], string> = {
  high: 'bg-success',
  medium: 'bg-warning',
  low: 'bg-danger',
}

export function Timeline({ events }: { events: Event[] }) {
  return (
    <ol className="relative ml-[4.5rem] border-l border-border">
      {events.map((e) => (
        <li key={e.time + e.title} className="reveal relative pb-8 pl-6 last:pb-0">
          <time className="absolute top-0.5 -left-[4.5rem] w-14 text-right font-mono text-xs text-fg-muted tabular-nums">
            {e.time}
          </time>
          <span className={`absolute top-1.5 -left-[5px] h-2.5 w-2.5 rounded-full ring-4 ring-bg ${DOT[e.confidence]}`} />
          <h3 className="font-medium">{e.title}</h3>
          <p className="mt-0.5 text-sm text-fg-muted">{e.detail}</p>
        </li>
      ))}
    </ol>
  )
}

const DAY: Event[] = [
  { time: '07:42', title: 'Left home', detail: 'Phone location + door sensor agree.', confidence: 'high' },
  { time: '08:15', title: 'Coffee, Bandra', detail: 'Card payment; photo EXIF 3 min later.', confidence: 'high' },
  { time: '11:30', title: 'Meeting', detail: 'Calendar entry, no location ping.', confidence: 'medium' },
  { time: '14:05', title: 'Unknown stop', detail: 'Single Wi-Fi fingerprint, needs review.', confidence: 'low' },
  { time: '19:20', title: 'Back home', detail: 'Location + smart-lock event.', confidence: 'high' },
]

export default function TimelineDemo() {
  return (
    <div>
      <div className="mb-6 flex gap-4 font-mono text-[11px] text-fg-muted">
        {(['high', 'medium', 'low'] as const).map((c) => (
          <span key={c} className="flex items-center gap-1.5">
            <span className={`h-2 w-2 rounded-full ${DOT[c]}`} /> {c}
          </span>
        ))}
      </div>
      <Timeline events={DAY} />
    </div>
  )
}
```

# SVG charts (line, heatmap, radar)
> Area chart with crosshair + keyboard, contribution heatmap and radar chart, all hand-drawn SVG.
- **Category:** Data viz
- **Slug:** charts
- **Tags:** chart, line chart, area chart, heatmap, radar, svg
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/charts
- **Raw source:** https://ui-lab-weld.vercel.app/raw/dataviz/Charts.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/dataviz/Charts.tsx

## When to use
- Dashboards without a chart library
- Profiles, analytics, comparisons

## Accessibility

role=img with summaries; line chart is keyboard navigable with values in aria-live.


## Source
`src/patterns/dataviz/Charts.tsx`
```tsx
import { useState } from 'react'

/*
 * Three hand-drawn SVG charts with no library:
 *  - Area/line chart with a hover crosshair + tooltip (keyboard: arrow keys)
 *  - GitHub-style contribution heatmap (53×7 grid, quantised colour scale)
 *  - Radar chart for comparing a few metrics
 * Each chart has role="img" + a text summary; the line chart also exposes
 * the focused value via aria-live.
 */

const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
const SERIES = [42, 48, 45, 60, 58, 72, 70, 85, 80, 96, 104, 118]

function LineChart() {
  const [i, setI] = useState<number | null>(null)
  const W = 560, H = 200, P = 24
  const max = Math.max(...SERIES) * 1.1
  const x = (k: number) => P + (k / (SERIES.length - 1)) * (W - P * 2)
  const y = (v: number) => H - P - (v / max) * (H - P * 2)
  const line = SERIES.map((v, k) => `${k ? 'L' : 'M'}${x(k)},${y(v)}`).join(' ')
  return (
    <div className="relative">
      <svg
        viewBox={`0 0 ${W} ${H}`}
        className="w-full"
        role="img"
        aria-label={`Monthly revenue rising from ${SERIES[0]}k in January to ${SERIES.at(-1)}k in December`}
        tabIndex={0}
        onKeyDown={(e) => {
          if (e.key === 'ArrowRight') setI((v) => Math.min((v ?? -1) + 1, SERIES.length - 1))
          if (e.key === 'ArrowLeft') setI((v) => Math.max((v ?? 1) - 1, 0))
        }}
        onPointerMove={(e) => {
          const r = e.currentTarget.getBoundingClientRect()
          const px = ((e.clientX - r.left) / r.width) * W
          setI(Math.round(((px - P) / (W - P * 2)) * (SERIES.length - 1)))
        }}
        onPointerLeave={() => setI(null)}
      >
        <defs>
          <linearGradient id="area" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="var(--accent)" stopOpacity=".35" />
            <stop offset="1" stopColor="var(--accent)" stopOpacity="0" />
          </linearGradient>
        </defs>
        {[0.25, 0.5, 0.75].map((g) => <line key={g} x1={P} x2={W - P} y1={P + g * (H - P * 2)} y2={P + g * (H - P * 2)} className="stroke-border" strokeDasharray="3 4" />)}
        <path d={`${line} L${x(SERIES.length - 1)},${H - P} L${x(0)},${H - P} Z`} fill="url(#area)" />
        <path d={line} fill="none" stroke="var(--accent)" strokeWidth="2.5" strokeLinejoin="round" />
        {MONTHS.map((m, k) => k % 2 === 0 && <text key={m} x={x(k)} y={H - 4} textAnchor="middle" className="fill-fg-muted text-[10px]">{m}</text>)}
        {i !== null && i >= 0 && i < SERIES.length && (
          <g>
            <line x1={x(i)} x2={x(i)} y1={P} y2={H - P} className="stroke-fg-muted" strokeDasharray="2 3" />
            <circle cx={x(i)} cy={y(SERIES[i])} r="5" fill="var(--bg)" stroke="var(--accent)" strokeWidth="2.5" />
          </g>
        )}
      </svg>
      <p aria-live="polite" className="absolute top-0 right-0 rounded-md border border-border bg-surface px-2 py-1 font-mono text-xs" hidden={i === null}>
        {i !== null && SERIES[i] !== undefined ? `${MONTHS[i]}: ₹${SERIES[i]}k` : ''}
      </p>
    </div>
  )
}

function Heatmap() {
  const days = Array.from({ length: 53 * 7 }, (_, k) => {
    const v = Math.sin(k * 0.37) + Math.sin(k * 0.11) + ((k * 7919) % 13) / 13
    return Math.max(0, Math.min(4, Math.floor(v * 1.4 + 1)))
  })
  const shade = ['var(--surface-2)', 'color-mix(in oklab, var(--success) 30%, var(--surface-2))', 'color-mix(in oklab, var(--success) 55%, var(--surface-2))', 'color-mix(in oklab, var(--success) 80%, var(--surface-2))', 'var(--success)']
  return (
    <div className="overflow-x-auto">
      <svg viewBox="0 0 690 96" className="min-w-[560px]" role="img" aria-label={`Contribution heatmap: ${days.filter(Boolean).length} active days in the last year`}>
        {days.map((v, k) => <rect key={k} x={Math.floor(k / 7) * 13} y={(k % 7) * 13} width="10" height="10" rx="2" fill={shade[v]} />)}
      </svg>
      <div className="mt-2 flex items-center justify-end gap-1 text-[10px] text-fg-muted">Less {shade.map((s, k) => <span key={k} className="h-2.5 w-2.5 rounded-sm" style={{ background: s }} />)} More</div>
    </div>
  )
}

function Radar() {
  const axes = ['Speed', 'Design', 'A11y', 'Size', 'DX', 'Docs']
  const a = [0.9, 0.8, 0.95, 0.7, 0.85, 0.75]
  const b = [0.6, 0.9, 0.5, 0.9, 0.6, 0.55]
  const R = 80, C = 100
  const pt = (k: number, r: number) => {
    const ang = (k / axes.length) * Math.PI * 2 - Math.PI / 2
    return [C + Math.cos(ang) * R * r, C + Math.sin(ang) * R * r]
  }
  const poly = (vals: number[]) => vals.map((v, k) => pt(k, v).join(',')).join(' ')
  return (
    <svg viewBox="0 0 200 200" className="mx-auto w-64" role="img" aria-label={`Radar comparing UI Lab (blue) and a typical library (pink) across ${axes.join(', ')}`}>
      {[0.25, 0.5, 0.75, 1].map((r) => <polygon key={r} points={poly(axes.map(() => r))} fill="none" className="stroke-border" />)}
      {axes.map((ax, k) => {
        const [x, y] = pt(k, 1.18)
        const [lx, ly] = pt(k, 1)
        return <g key={ax}><line x1={C} y1={C} x2={lx} y2={ly} className="stroke-border" /><text x={x} y={y} textAnchor="middle" dominantBaseline="middle" className="fill-fg-muted text-[9px]">{ax}</text></g>
      })}
      <polygon points={poly(b)} fill="#ec4899" fillOpacity=".2" stroke="#ec4899" strokeWidth="1.5" />
      <polygon points={poly(a)} fill="var(--accent)" fillOpacity=".25" stroke="var(--accent)" strokeWidth="1.5" />
    </svg>
  )
}

export default function Charts() {
  return (
    <div className="space-y-8">
      <div><p className="mb-2 text-sm font-medium">Area chart (hover / arrow keys)</p><LineChart /></div>
      <div><p className="mb-2 text-sm font-medium">Contribution heatmap</p><Heatmap /></div>
      <div><p className="mb-2 text-sm font-medium">Radar</p><Radar /></div>
    </div>
  )
}
```

# Infinite marquee
> Seamless looping strip with faded edges, pause on hover, any speed and direction.
- **Category:** Recipes
- **Slug:** marquee
- **Tags:** marquee, ticker, logo wall, infinite scroll, loop
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/marquee
- **Raw source:** https://ui-lab-weld.vercel.app/raw/recipes/Marquee.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/recipes/Marquee.tsx

## When to use
- Logo walls, tech stacks, testimonials
- Keep it decorative; nothing essential should scroll away

## Accessibility

Duplicate copy is aria-hidden; pauses on hover; static under reduced motion.


## Source
`src/patterns/recipes/Marquee.tsx`
```tsx
import type { ReactNode } from 'react'

/*
 * Infinite marquee. Content is rendered twice and the track slides by
 * exactly -50%, so the loop is seamless at any width. mask-image fades
 * the edges; hover pauses.
 */
export function Marquee({ children, speed = 30, reverse = false }: { children: ReactNode; speed?: number; reverse?: boolean }) {
  return (
    <div className="marquee group overflow-hidden [mask-image:linear-gradient(90deg,transparent,#000_10%,#000_90%,transparent)]">
      <style>{`
        @keyframes marquee { to { transform: translateX(-50%); } }
        .marquee-track { animation: marquee var(--speed) linear infinite; }
        .marquee:hover .marquee-track { animation-play-state: paused; }
        @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
      `}</style>
      <div
        className="marquee-track flex w-max"
        style={{ ['--speed' as string]: `${speed}s`, animationDirection: reverse ? 'reverse' : 'normal' }}
      >
        {[0, 1].map((copy) => (
          <div key={copy} className="flex shrink-0 items-center gap-10 pr-10" aria-hidden={copy === 1 || undefined}>
            {children}
          </div>
        ))}
      </div>
    </div>
  )
}

const STACK = ['React', 'Tailwind', 'GSAP', 'Motion', 'Vite', 'shadcn/ui', 'Radix', 'Three.js', 'Figma', 'Spline']

export default function MarqueeDemo() {
  return (
    <div className="space-y-6">
      <Marquee>
        {STACK.map((s) => (
          <span key={s} className="font-display text-4xl whitespace-nowrap italic">
            {s}
          </span>
        ))}
      </Marquee>
      <Marquee reverse speed={40}>
        {STACK.map((s) => (
          <span key={s} className="rounded-full border border-border px-4 py-1.5 font-mono text-xs whitespace-nowrap text-fg-muted">
            {s}
          </span>
        ))}
      </Marquee>
    </div>
  )
}
```

# Container-query card
> A card that rearranges itself by the width of its container, not the screen: stacked when narrow, picture beside text when wide.
- **Category:** Recipes
- **Slug:** container-query-card
- **Tags:** container queries, responsive, card, css
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/container-query-card
- **Raw source:** https://ui-lab-weld.vercel.app/raw/recipes/ContainerQueryCard.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/recipes/ContainerQueryCard.tsx

## When to use
- Components reused in sidebars and main columns
- Replacing viewport media queries inside components

## Accessibility

Content and reading order do not change between layouts; the width slider is a labelled native range.


## Source
`src/patterns/recipes/ContainerQueryCard.tsx`
```tsx
import { useState } from 'react'

/*
 * Container queries: a card that rearranges itself based on the width of the space it is in, not the screen. Drag the
 * slider to resize the container. Below about 28rem the card stacks; above it the picture moves beside the text. The same
 * component works in a narrow sidebar and a wide main column with no media queries. Unsupported browsers just get the
 * stacked layout.
 */

const CSS = `
.cq-wrap { container-type: inline-size; container-name: card; }
.cq-card { display: grid; gap: .75rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: .75rem; background: var(--color-surface); }
.cq-pic { aspect-ratio: 16 / 9; border-radius: .5rem; background: linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 40%, var(--color-surface-2))); }
.cq-card h3 { font-size: 1.125rem; font-weight: 600; }
.cq-card p { color: var(--color-fg-muted); font-size: .9rem; }
@container card (min-width: 28rem) {
  .cq-card { grid-template-columns: 10rem 1fr; align-items: center; }
  .cq-pic { aspect-ratio: 1; }
  .cq-card h3 { font-size: 1.375rem; }
}
`

export default function ContainerQueryCard() {
  const [w, setW] = useState(70)
  return (
    <div>
      <style>{CSS}</style>
      <label className="mb-4 flex items-center gap-3 text-sm">
        Container width: {w}%
        <input type="range" min={30} max={100} value={w} onChange={(e) => setW(Number(e.target.value))} className="h-11 w-56" />
      </label>
      <div className="cq-wrap" style={{ width: `${w}%` }}>
        <article className="cq-card">
          <div className="cq-pic" aria-hidden />
          <div>
            <h3>A card that adapts to its space</h3>
            <p>Resize the container, not the window. The layout changes when the card has room for it.</p>
          </div>
        </article>
      </div>
    </div>
  )
}
```

# Scroll-snap gallery
> A horizontal row that stops neatly on each slide using only scroll-snap, usable with touch, trackpad, scrollbar and arrow keys.
- **Category:** Recipes
- **Slug:** scroll-snap-gallery
- **Tags:** scroll snap, gallery, carousel, css
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/scroll-snap-gallery
- **Raw source:** https://ui-lab-weld.vercel.app/raw/recipes/ScrollSnapGallery.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/recipes/ScrollSnapGallery.tsx

## When to use
- Galleries and card rows
- A carousel feel without a carousel library

## Accessibility

The row is focusable and labelled so arrow keys scroll it; there is no auto-advance; add visible controls when the content matters.


## Source
`src/patterns/recipes/ScrollSnapGallery.tsx`
```tsx
/*
 * A scroll-snap gallery: a horizontal row that stops neatly on each slide, with no JavaScript. It scrolls with touch, a
 * trackpad, arrow keys (the row is focusable) and the scrollbar. `scroll-snap-type: x mandatory` and `scroll-snap-align`
 * do the work; `scroll-padding` keeps the first slide off the edge. Add visible controls if the content matters, because a
 * swipe is invisible to people who do not know to try it.
 */

const SLIDES = [['#f2c9a1', 'Morning'], ['#bfd8c6', 'Noon'], ['#c5cdea', 'Evening'], ['#e6c0d4', 'Night'], ['#e8dca9', 'Dawn']]

export default function ScrollSnapGallery() {
  return (
    <div>
      <ul tabIndex={0} aria-label="Gallery, scroll sideways" className="flex snap-x snap-mandatory gap-4 overflow-x-auto scroll-px-4 rounded-xl border border-border p-4 [scrollbar-width:thin]">
        {SLIDES.map(([bg, t]) => (
          <li key={t} className="grid h-44 w-64 shrink-0 snap-center place-content-center rounded-lg text-center text-[#1d1b18]" style={{ background: bg }}>
            <p className="text-2xl font-semibold">{t}</p>
          </li>
        ))}
      </ul>
      <p className="mt-2 text-sm text-fg-muted">Scroll, swipe, or focus the row and use the arrow keys.</p>
    </div>
  )
}
```

# Sticky table header and first column
> A table whose header and first column stay in view while the body scrolls both ways, using position sticky on cells.
- **Category:** Recipes
- **Slug:** sticky-table-header
- **Tags:** table, sticky, scroll, css, data
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/sticky-table-header
- **Raw source:** https://ui-lab-weld.vercel.app/raw/recipes/StickyTableHeader.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/recipes/StickyTableHeader.tsx

## When to use
- Wide, long data tables
- Keeping row and column labels visible

## Accessibility

A real table with scoped headers inside a focusable, labelled scroll region; sticky cells have opaque backgrounds so text never overlaps.


## Source
`src/patterns/recipes/StickyTableHeader.tsx`
```tsx
/*
 * A table whose header stays put while the body scrolls, and whose first column stays put while it scrolls sideways. Both
 * are `position: sticky` on cells, inside a scroll container that is focusable and labelled. Sticky cells need an opaque
 * background so rows do not show through. No JavaScript.
 */

const ROWS = Array.from({ length: 16 }, (_, i) => [`Item ${i + 1}`, 100 + i * 17, 20 + (i % 5) * 7, 4 + (i % 3), `Q${(i % 4) + 1}`, i % 2 ? 'Yes' : 'No', `£${(i * 13 + 20).toFixed(2)}`])
const HEAD = ['Name', 'Units', 'Stock', 'Rating', 'Quarter', 'Active', 'Price']

export default function StickyTableHeader() {
  return (
    <div tabIndex={0} role="region" aria-label="Product table, scrolls both ways" className="max-h-72 overflow-auto rounded-xl border border-border">
      <table className="min-w-[40rem] border-separate border-spacing-0 text-sm">
        <caption className="sr-only">Products by quarter</caption>
        <thead>
          <tr>
            {HEAD.map((h, i) => (
              <th key={h} scope="col" className={`sticky top-0 border-b border-border bg-surface-2 px-3 py-2 text-left font-medium ${i === 0 ? 'left-0 z-20' : 'z-10'}`}>{h}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {ROWS.map((r) => (
            <tr key={r[0]}>
              {r.map((c, i) => (i === 0 ? <th key={i} scope="row" className="sticky left-0 border-b border-border bg-surface px-3 py-2 text-left font-medium">{c}</th> : <td key={i} className="border-b border-border px-3 py-2 tabular-nums">{c}</td>))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}
```

# Truncate without losing text
> Line-clamp a paragraph to three lines with a Read more button, and ellipsis a single line, while keeping the full text in the page.
- **Category:** Recipes
- **Slug:** line-clamp
- **Tags:** line clamp, truncate, ellipsis, css, text
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/line-clamp
- **Raw source:** https://ui-lab-weld.vercel.app/raw/recipes/LineClamp.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/recipes/LineClamp.tsx

## When to use
- Cards and lists with variable-length text
- Previews that expand

## Accessibility

The full text stays in the DOM; the button uses aria-expanded and aria-controls; the truncated filename is focusable and labelled.


## Source
`src/patterns/recipes/LineClamp.tsx`
```tsx
import { useState } from 'react'

/*
 * Truncating text without losing it. `line-clamp` shortens a paragraph to N lines with an ellipsis; a "Read more" button
 * (aria-expanded) removes the clamp. The full text stays in the DOM for search and screen readers. Single-line truncation
 * uses `text-overflow: ellipsis` and a title is not enough on its own: give the full text a way to be reached.
 */

const TEXT = 'Good truncation is a promise that the rest is one click away. This paragraph is longer than the three lines it is allowed at first, so the browser cuts it with an ellipsis. Everything after the cut is still in the page: assistive technology reads it, search engines index it, and the button below restores it for everyone else.'

export default function LineClamp() {
  const [open, setOpen] = useState(false)
  return (
    <div className="mx-auto max-w-md space-y-6">
      <div>
        <p className={`text-[15px] leading-relaxed ${open ? '' : 'line-clamp-3'}`} id="lc-p">{TEXT}</p>
        <button onClick={() => setOpen(!open)} aria-expanded={open} aria-controls="lc-p" className="mt-1 min-h-11 text-sm font-medium text-accent underline underline-offset-2">{open ? 'Show less' : 'Read more'}</button>
      </div>
      <div className="rounded-lg border border-border p-3">
        <p className="truncate text-sm" tabIndex={0} aria-label="A long file name, focus to read it all">quarterly-report-final-FINAL-v7-reviewed-by-everyone-2026.pdf</p>
        <p className="mt-1 text-xs text-fg-muted">Single line with an ellipsis. Make the full name available some other way.</p>
      </div>
    </div>
  )
}
```

# Focus rings people can see
> Three focus-visible ring styles (offset outline, two-colour, gap and ring) that survive any background, with a dark-background example.
- **Category:** Recipes
- **Slug:** focus-rings
- **Tags:** focus, focus-visible, keyboard, accessibility, css
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/focus-rings
- **Raw source:** https://ui-lab-weld.vercel.app/raw/recipes/FocusRings.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/recipes/FocusRings.tsx

## When to use
- Any site, as the baseline for keyboard users
- Replacing removed outlines

## Accessibility

Rings use focus-visible so mouse clicks do not show them; each is at least 2px and checked for 3:1 contrast against its surroundings.


## Source
`src/patterns/recipes/FocusRings.tsx`
```tsx
/*
 * Focus rings that people can actually see. Use :focus-visible so the ring appears for keyboard users and not on every
 * mouse click; make it at least 2px, offset from the element, and give it 3:1 contrast against both the element and what
 * is behind it. A two-colour ring (light inside, dark outside) survives any background. Never remove the outline without a
 * replacement. Tab through the examples.
 */

const CSS = `
.fr a, .fr button, .fr input { font: inherit; }
.fr .a:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; border-radius: .5rem; }
.fr .b:focus-visible { outline: 2px solid #fff; outline-offset: 0; box-shadow: 0 0 0 5px #111; }
.fr .c:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 5px var(--color-accent); }
`

export default function FocusRings() {
  return (
    <div className="fr space-y-6">
      <style>{CSS}</style>
      <p className="text-sm text-fg-muted">Press Tab to move through these. Mouse clicks do not show the ring.</p>
      <div className="flex flex-wrap items-center gap-4">
        <a href="#fr" onClick={(e) => e.preventDefault()} className="a grid min-h-11 place-items-center px-3 text-accent underline underline-offset-2">Offset outline</a>
        <button className="b min-h-11 rounded-md bg-fg px-4 text-sm font-medium text-bg">Two-colour ring</button>
        <button className="c min-h-11 rounded-md border border-border bg-surface px-4 text-sm font-medium">Gap and ring</button>
        <input className="c min-h-11 rounded-md border border-border bg-surface px-3 text-sm" placeholder="Input" aria-label="Example input" />
      </div>
      <div className="rounded-lg bg-[#111] p-4">
        <button className="b min-h-11 rounded-md border border-white/40 px-4 text-sm font-medium text-white">On a dark background</button>
      </div>
    </div>
  )
}
```

# System, Light, Dark switch
> A three-way colour-scheme choice where System follows the operating setting live, scoped to its own box so it does not change the page.
- **Category:** Recipes
- **Slug:** color-scheme-toggle
- **Tags:** dark mode, theme, prefers-color-scheme, switch, settings
- **Dependencies:** none beyond React + Tailwind (tokens from src/tokens/tokens.css)
- **Live demo:** https://ui-lab-weld.vercel.app/#/color-scheme-toggle
- **Raw source:** https://ui-lab-weld.vercel.app/raw/recipes/ColorSchemeToggle.tsx
- **GitHub:** https://github.com/HarshSalunkhe2005/UI-LAB/blob/main/src/patterns/recipes/ColorSchemeToggle.tsx

## When to use
- Theme switches
- Respecting the system preference by default

## Accessibility

A radio group with visible text labels at 44px; the current scheme and why is stated in a status line; transitions are off under reduced motion.


## Source
`src/patterns/recipes/ColorSchemeToggle.tsx`
```tsx
import { useEffect, useState } from 'react'

/*
 * A colour-scheme switch done properly: three choices (System, Light, Dark) rather than a single flip, the choice stored
 * in a data attribute on the element you theme, and "System" following the operating setting live via the
 * prefers-color-scheme media query. This demo themes only its own box, so it will not change the page around it. In a
 * real site set the attribute on <html> and store the choice in localStorage inside try/catch.
 */

type Mode = 'system' | 'light' | 'dark'

export default function ColorSchemeToggle() {
  const [mode, setMode] = useState<Mode>('system')
  const [sysDark, setSysDark] = useState(typeof matchMedia !== 'undefined' && matchMedia('(prefers-color-scheme: dark)').matches)
  useEffect(() => {
    const mq = matchMedia('(prefers-color-scheme: dark)')
    const on = () => setSysDark(mq.matches)
    mq.addEventListener('change', on)
    return () => mq.removeEventListener('change', on)
  }, [])
  const dark = mode === 'dark' || (mode === 'system' && sysDark)
  return (
    <div className="rounded-xl border border-border p-5 transition-colors motion-reduce:transition-none" style={{ background: dark ? '#14141a' : '#fbfaf6', color: dark ? '#ececf1' : '#1b1b20' }}>
      <div role="radiogroup" aria-label="Colour scheme" className="inline-flex rounded-lg border p-1" style={{ borderColor: dark ? '#3a3a46' : '#d4d2c8' }}>
        {(['system', 'light', 'dark'] as const).map((m) => (
          <button key={m} role="radio" aria-checked={mode === m} onClick={() => setMode(m)} className="min-h-11 rounded-md px-4 text-sm font-medium capitalize" style={mode === m ? { background: dark ? '#ececf1' : '#1b1b20', color: dark ? '#14141a' : '#fbfaf6' } : undefined}>
            {m}
          </button>
        ))}
      </div>
      <p className="mt-4 text-sm" role="status">Showing the {dark ? 'dark' : 'light'} scheme{mode === 'system' ? ` because your system prefers ${sysDark ? 'dark' : 'light'}` : ''}.</p>
    </div>
  )
}
```