Glass Materials
Base glass
blur 20px, white 7%
Heavy frost
blur 40px, saturate
Dark glass
modals/overlays
Accent glass
tinted by --accent
Signature Experiments
The wild ones — mined from 240 concepts, built live. Drag, scrub, spin, hover-hold. These are what get a site screenshotted + shared.
Scrub the Grime
cleaner/painter
drag to cleanTearaway Quote
pricingyour price
$149
◄ tear here for your price
Flashlight Reveal
electrician heroLicensed electrician
24/7 emergency
A Day Without Us
story
Fixed & protected
Day-Part Greeting
heroHello
We're here.
reads your local clock
Weather-Matched Hero
roofer/HVACchecking your sky…
Combination-Lock Nav
locksmith navServices
Pricing
Reviews
Book
Pour-to-Fill Trust
social proof0
5-star reviews · fills as they load
Walk Through the House
service spine
Kitchen
Disposal & faucet
Dwell Reveal
gallery
hover & hold to developSwipe-File Techniques
Distilled from 110 award-winning sites (Apple, Stripe, Lusion, Bruno Simon, A24, Off-White…). New live demos below + the full technique→site matrix.
Custom Cursor
Dogstudio · Lusion
Marquee Ticker
Nike · OFFF
Horizontal Scroll
Nike · Cohere
scrolls sideways ←→
Sticky Stat Callout
Polestar · Airbnb
9,400+
jobs, pinned over the photo
Image-Grid as UI
Midjourney · Pitchfork
Animated Terminal
Vercel · Cursor
Quotation Motif
Off-White
They fixed it in an hour and charged exactly what they quoted.
”Film-Still Hero
A24 · Criterion
ORR · a plumbing story
Globe Connections
Turso · Vercel
| Technique | Best examples | What to steal | Status |
|---|---|---|---|
| Glassmorphism navbar | Arc, Linear, Stripe | frosted backdrop-blur nav that recolors on scroll | ✓ built |
| Gradient mesh background | Stripe, Vercel | animated radial-blob mesh, frosted cards on top | ✓ built |
| Brutalist offset shadow | Off-White, Balenciaga, neobrutalism.dev | hard border + 6px offset shadow, zero radius | ✓ built |
| Kinetic typography | Synchronized.studio, Locomotive, OFFF | type as the experience — weight/spacing animates | ✓ built |
| Dark-mode premium | Vercel, Linear, Koenigsegg, SpaceX | near-black + single accent + glow blobs | ✓ built |
| Luxury restraint | Aesop, Loewe, Bottega, Celine | editorial whitespace, serif, the restraint IS the design | ✓ built |
| Bento grid | Apple, many SaaS | mixed-size CSS-grid module tiles | ✓ built |
| SVG/WebGL noise + dither | Blumhouse, KPR-verse, 2050.plus, Codrops | film-grain overlay, ordered dither, slider-controlled | ✓ built |
| Custom cursor | Dogstudio, Hello Enjoy, Lusion, Epic | replace the OS cursor with a brand dot that scales on interactive hits | live demo ↑ |
| Scroll-locked video sync | Apple Mac Pro, Tesla, MS Surface | scrub a video/frame-seq to scroll position (we already do this in the Orr hero) | live demo ↑ |
| Custom-cursor magnetic CTA | Lusion, Active Theory | primary CTA leans toward the cursor like a magnet | ✓ built |
| Marquee / infinite ticker | Nike, OFFF, agencies | edge-to-edge scrolling logo/word strip, pauses on hover | live demo ↑ |
| Horizontal scroll section | Nike, Webflow Made-In, Cohere | a band that scrolls sideways as you scroll down | live demo ↑ |
| Sticky stat callouts | Polestar, Airbnb Belonging | numbers pinned + revealed as you pass photography | live demo ↑ |
| Light/dark section recolor nav | Apple AirPods Pro | nav auto-inverts color as it crosses light vs dark sections | live demo ↑ |
| Image-grid as UI | Midjourney, Pitchfork | the imagery IS the chrome — full-bleed gallery navigation | live demo ↑ |
| Animated terminal / code window | Vercel, Railway, Cursor, Resend | type-on code/CLI window in the hero | live demo ↑ |
| Quotation-mark design element | Off-White | oversized “quotes” as a structural motif | live demo ↑ |
| Editorial film-still hero | A24, Criterion, Blumhouse | full-bleed still + typeface-as-voice + noise grade | live demo ↑ |
| Animated globe / connections | Turso, Vercel | arcing lines between points on a globe/map | live demo ↑ |
| Scroll-driven 3D world | Bruno Simon, Sebastien Lempens, Igloo Inc | drive/fly through a real WebGL scene — the $997 ceiling | 997 / ref |
| Fluid particle system | Lusion, Redis, Bruno Simon | GPU particle field reacting to cursor/scroll | 997 / ref |
| WebGPU cyberpunk world | Samsy.ninja, Weisdevice | 120fps neon city, GLSL shaders | 997 / ref |
| 3D product configurator | Porsche, Tesla, Rimowa | real-time rotate/recolor a 3D product | 997 / ref |
| Audio-reactive visuals | ToyFight, Arcade.fr, Haiku | visuals + micro-sound driven by audio (opt-in) | 997 / ref |
| Full scrollytelling narrative | SBS The Boat, NYT Snowfall, Spotify Wrapped | scroll IS the timeline of a complete story | 997 / ref |
Aggregators to mine: awwwards.com · thefwa.com · cssdesignawards.com · tympanus.net/codrops · cssnectar.com · godly.website · landing.love · hoverstat.es · lapa.ninja · minimal.gallery · orpetron.com · land-book.com · muz.li · maxibestof.one · savee.it
Cards & Layout
Bento hero
mixed-size CSS-grid tiles
Tile
Accent
Wide tile
Tilt 01
Cursor-reactive 3D + glare.
Tilt 02
Accent glow on hover.
Tilt 03
translateZ depth layer.
Brutalist / Neobrutalist
Raw output
Hard border, offset shadow, no radius.
CRT mode
Phosphor on black.
Forms & Inputs
Feedback
Success toast
Info banner
Accordion ▾
Expandable content.
Effects & Texture
Background / surface effects. The dither slider (top-right) drives the grain on every dither-overlay tile below.
Border beam
Dot grid
Spotlight (hover)
CRT scanlines
Blueprint grid
Motion & pattern vocabulary
The named effects we can build per site (from the design-taste reference). Hover the live ones.