# 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]