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 develop997 Ceiling · WebGL
The Three.js / WebGL top tier — the $997 ceiling. Real GPU demos, not stock components: an AI-reconstructed 3D world (AI image → Hunyuan3D mesh → live viewer), scroll-driven 3D worlds, fluid particle fields, shader cities, live product configurators, audio-reactive visuals, and full scrollytelling. Every one recolors from the theme (top-right), pauses off-screen, and respects reduced-motion. Drag, scroll, hover, talk to them.
★ AI-reconstructed 3D world — drag to explore ↓
Full scrollytelling — scroll through it ↓
Swipe-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
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 | live demo ↑ |
| Fluid particle system | Lusion, Redis, Bruno Simon | GPU particle field reacting to cursor/scroll | live demo ↑ |
| WebGPU cyberpunk world | Samsy.ninja, Weisdevice | 120fps neon city, GLSL shaders | live demo ↑ |
| 3D product configurator | Porsche, Tesla, Rimowa | real-time rotate/recolor a 3D product | live demo ↑ |
| Audio-reactive visuals | ToyFight, Arcade.fr, Haiku | visuals + micro-sound driven by audio (opt-in) | live demo ↑ |
| Full scrollytelling narrative | SBS The Boat, NYT Snowfall, Spotify Wrapped | scroll IS the timeline of a complete story | live demo ↑ |
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
Every named effect, live. Hover · tap · scroll · drag the tiles — all recolor with the theme (top-right).
Layout


Motion & type



Image & scroll
scroll zooms
hover to reveal






Navigation











Idea Bank · all 240 concepts
Every experimental UI/UX idea the two creative idea-gen agents produced — Agent A (physical / tactile / spatial) and Agent B (time / sound / generative / game / narrative). Filter by agent, theme, or status, search anything. Green = already built live on this site. Pick the ones to keep.
Tear a strip to reveal
2 flavorsDrag the dotted “tear here” strip off a paper estimate to reveal your real price.
Peel-the-Sticker Tags
ideaPeel each service sticker to expose what's included.
Carbon-Copy Invoice
ideaTyped details bleed through a triplicate work-order form.
Ripped Newspaper Reveal
ideaHero tears like newsprint to expose the real shop photo.
Origami Van
ideaA flat paper square folds into the service van on scroll.
Permit Stamp
ideaDrag a rubber APPROVED stamp onto your booking — thud + ink spread.
Tear/lift top sheet to cycle
2 flavorsTear the top sheet of a desk notepad to flip to the next FAQ.
Receipt Spool
ideaScroll spools out a long thermal receipt itemizing your project.
Pop-Up Book Home
ideaSections rise as die-cut pop-up spreads as you turn pages.
Tracing-Paper Overlay
ideaDrag a tracing sheet over a house photo to plan pipe/wire routes.
Paper Airplane Contact
ideaFold your message into a plane and throw it into the inbox.
Glass fills with liquid
2 flavorsA glass fills with water as reviews load — full = booked-worthy.
Drain Swirl Transition
ideaClicking a plumbing service swirls the section down a drain vortex.
Leak-Detector Drip
ideaA slow drip forms, falls, and splashes into the emergency button.
Honey-Slow Pour Menu
ideaServices pour down like thick honey and settle with surface tension.
Scroll before→after wipe
2 flavorsCleaners: a soapy squeegee wipes the dirty “before” clean on scroll.
Mercury Cursor
ideaA metallic liquid bead follows the cursor and “wets” buttons.
Scroll raises a line
2 flavorsScroll raises a water line; content floats as it submerges/emerges.
Drag a handle → reading
2 flavorsPull a dipstick; the oil level reveals your service interval.
Frozen-to-Thaw HVAC
ideaAn iced screen thaws + drips clear as you scroll into AC service.
Condensation Wipe
ideaWipe a fogged-glass overlay with your finger to read the offer.
Scroll steps through panels
3 flavorsScroll moves you room to room — each room a service category.
Peek-Through Keyhole
ideaLocksmith site viewed through a keyhole that widens as you “pick” it.
Layered-Parallax Yard
ideaLandscaper hero: foreground grass / mid hedges / back house at depth.
Room You Furnish
ideaDrag fixtures into an empty 3D room to design the service you want.
Garage Door Roll-Up
ideaA closed roll-up door rolls up on load to reveal the bay/crew.
Drone Flyover House
ideaSlow 3D orbit around a model house, hot-spotting roof/gutter/siding.
Cursor-tilt 3D rotate
2 flavorsHover a 3D part that rotates to show exactly what we fix.
Pop a cover open to reveal
3 flavorsPop a 3D car hood; parts glow with the services tied to each.
Floor-Plan Walk
ideaDrag a “you” dot room to room across a house plan to request work.
Magnetic Tools Snap
ideaScattered tool icons fly + snap to a magnetic strip on hover.
Fridge-Magnet Booking
ideaDrag magnetic letter tiles to spell your request — they clack.
Damped pendulum swing
2 flavorsA hanging pendulum tag swings to a stop on the recommended package.
Falling-Sand Hourglass
ideaAn hourglass drains “next slot in X”; flip to see another day.
Gravity drop + bounce
2 flavorsA ring of keys falls + jangles into a pile; pick the right one.
Bowling-Pin Objections
ideaWorries stand like pins; a “we handle that” ball knocks them down.
Weighted Scale of Value
ideaA balance scale tips: cheap-fix vs our-quality — our side sinks heavy.
Field warped by cursor
2 flavorsFaint iron-filing field lines warp around the cursor.
Curtain-Reveal Hero
✓ builtStage curtains part on load with cloth-jiggle physics.
Drape-Over Cover
ideaWhisk a dust sheet off the content to reveal the finished room.
Quilted Service Patches
ideaServices as stitched work-shirt patches that ruffle on hover.
Apron-String Tie
ideaThe contact form ties up with apron strings cinching on submit.
Pillow-Soft Buttons
ideaButtons depress like memory foam and slowly re-puff.
Yarn-Trace Connections
ideaTaut pinned yarn connects “problem → solution” on a corkboard.
Tablecloth Whip
ideaPull-the-tablecloth trick reveals the catering menu, dishes standing.
Cloth / banner sways
2 flavorsQuotes rest in a swaying hammock; nudge to read the next.
Slide a panel aside to reveal
3 flavorsSlide a frosted panel aside to reveal pricing, like a shower door.
Click cracks / shatters a pane
2 flavors“Broken solutions” shatter + shards fall to show your intact fix.
Light one tile, dim the rest
2 flavorsServices as stained-glass panels that light jewel-bright on hover.
Magnifying-Glass Inspect
✓ builtA draggable lens magnifies fine print / fine craftsmanship.
Cursor flashlight / spotlight reveal
4 flavorsThe site is dark; your cursor is a flashlight beam revealing content.
Light-Switch Toggle
★ keeperA physical wall switch flips the site dark↔lit with a click-clack.
Neon-Sign Flicker-On
ideaAn open/closed neon sign buzzes + flickers to life with live hours.
Lantern-Lit Path
ideaLandscapers: path lights pop on one by one as you scroll.
Shadow-Puppet Story
idea“How we work” plays as shadow-puppet silhouettes behind a lit screen.
Heat grid by cursor
2 flavorsHover the house; warm/cool zones glow to show system balance.
Eclipse Wipe
ideaA dark disc slides over to transition sections, corona flare at the edge.
Rotary dial selects an item
2 flavorsTurn a real combo dial to the right number to jump to a section.
Gear-Train Scroll
ideaVisible interlocking gears turn as you scroll, driving the machinery.
Accordion row expands
3 flavorsServices are breaker switches; flip one ON to expand it.
Loader fills to ready
3 flavorsA bolt tightens turn by turn as the page loads; torqued = ready.
Cash-Register Total
ideaPunch keys; the drawer dings open with your itemized total.
Drag knob → tier + gauge
2 flavorsDrag a Nest-like dial; the palette warms/cools with the comfort tier.
Rust-As-You-Scroll
ideaThe “neglected by others” section corrodes the further you scroll.
Scroll restores faded→vivid
2 flavorsA sun-bleached “before” photo; scroll restores it vivid.
Footprints-In-Sand
ideaScroll leaves footprints toward booking; the tide erases old steps.
Wipe-to-reveal (canvas)
4 flavorsThe screen is dust-smudged; swipe to reveal the spotless result.
Dog-Eared Pages
ideaFold a corner to bookmark a service; folded corners stack in a tray.
Paper-Lantern Reviews
ideaTestimonials on translucent paper lanterns that sway when nudged.
Sticky-Note Wall
ideaLeave a question on a Post-it that thumbtacks to a corkboard.
Folded Brochure Trifold
ideaThe about section is a literal trifold you open panel by panel.
Coffee-Ring Stains
ideaCoffee rings mark read sections; the page feels like a worktable.
Spilled-Coffee Disaster
ideaA coffee spill spreads, then the crew “cleans it”.
Ink-Bleed Headlines
ideaFountain-pen ink bleeds headlines into existence on dark paper.
Stacked Card Deck Depth
ideaServices are a 3D card stack you fan out + pull from with real z-offset.
Tunnel Bore
ideaScroll bores a tunnel forward through dirt toward “we dig deep”.
Needle rotates to a label
2 flavorsA draggable 3D compass points to + flies you to the nearest neighborhood.
Tossed-Coin Booking
ideaFlip a tumbling coin that lands “Heads = book now” face-up.
Cape-Swish Transition
ideaCloth swipes across between sections like a magician's reveal.
Folded-Laundry Stack
ideaCleaning services stack like fresh folded laundry, settle with a compress.
Highlight sweep across cards
2 flavorsButtons reflect a faint moving highlight like polished chrome.
Flip a card to next record
2 flavorsFlip a physical Rolodex to find the right department card.
Frost vignette by level
2 flavorsFrost creeps in from the edges in the AC section, retreats on “stay cool”.
Live-clock sky gradient
2 flavorsThe hero sky color-shifts to the homeowner's actual local time.
Live status badge
2 flavorsA live “we're awake” breathing indicator.
Rain over a darkened scene
4 flavorsRoofer darkens with live radar — drip + same-day-tarp CTA.
Rush-Hour Honesty
ideaAn “estimated wait” animates a car queue by time of day.
Season Skin
ideaLandscaper palette + plants auto-rotate by the real season.
Countdown + draining meter
2 flavorsFood-truck countdown + a melting-ice-cream meter.
Heat-Index Hustle
ideaHVAC headline rewrites itself: “It's 96° in [City] now.”
Live ticker / counter
2 flavorsAnonymized “booked a drain clear in [zip] 12 min ago.”
Closing-Time Dim
ideaGym dims room-by-room after hours; 24/7 keypad CTA.
Day-Part Greeting
✓ builtCopy + CTA reorder themselves by the time of day.
Percussive sound + ring
3 flavorsHandyman door-knock SFX on the CTA.
Clipper Beat
ideaBarber lo-fi clipper rhythm, beat-synced transitions.
Tune-Up Engine
ideaAuto idle hum smooths from a misfire to a V8 on scroll.
Snip Confirm
ideaSalon scissor-snip per field + falling-hair confetti.
Tone / chime on success
2 flavorsLocksmith 3-tone “unlocked” chime on success.
Quiet Mode First
✓ builtAll audio OFF by default — a tasteful opt-in pill.
Input draws a generative path
3 flavorsEnter an address; a generative line-art home draws itself.
Seeded generative art + reroll
4 flavorsA never-repeating generative garden every visit (shader).
Spark Field
✓ builtElectrician circuit traces light toward the cursor.
Rising bubbles, tap to pop
4 flavorsCleaning: poppable bubbles reveal testimonials.
Rings radiate from a pin
2 flavorsGenerative topo ripple from the business pin + geocode.
Rising particle emitter
3 flavorsBBQ volumetric smoke drifts with the cursor.
Scroll heals an SVG crack
2 flavorsAuto glass: a crack spreads, then scroll “heals” it.
Velocity Wind
ideaA fast cursor ruffles the landscaper's grass.
Press-hold ramps a value
2 flavorsHover-hold 1.2s “develops” a Polaroid job photo.
Two-Finger Stretch
ideaPinch-zoom a roof to auto-annotate the damage.
Shake to Mix
ideaPainter: shake the phone to mix two brand colors.
Scroll-Rhythm Detector
ideaFrantic scrolling triggers a spa “breathe” overlay.
Trace the Route
ideaDog-walker: draw a path and the pup walks it.
Find target among decoys
4 flavorsElectrician: find 3 code violations + tips.
Stack the Schedule
ideaCaterer Tetris event-builder pre-fills the quote.
Slider morphs an avatar
2 flavorsBarber fade-slider previews on an avatar → booking note.
Pipe Connect
ideaPlumber pipe-rotation puzzle → Book Now.
Clear scattered items
2 flavorsCleaning timed tidy-game vs “our team: 45 min”.
Advance a token to a goal
2 flavorsBooking as a board-game path you travel.
Tap items into a tray + total
2 flavorsFood-truck: drag-to-tray IS the cart.
A Day Without Us
✓ builtA scrolly house falls apart, then is restored.
Auto-advancing story panels
4 flavorsA yard transforms across four seasons.
Scroll through stage panels
3 flavorsCaterer farm-to-plate scrolly story.
Quiet Hour
ideaA 60s spa relaxation story before the services.
Repeat-visit banner swap
2 flavors“Welcome back — still thinking about that roof?”
Name-the-Quote
ideaPersonalizes headers after a name entry.
Comfort Memory
ideaHVAC remembers your ideal-temp slider.
Mood Palette
ideaMassage: one-tap mood re-themes + recommends.
Local Landmark Drop
ideaThe hero neighborhood includes a real local landmark.
Build-Your-Avatar Home
ideaPick roof/door/trim; it persists as “your” home.
Sequence-tap unlock
2 flavorsThe code rains golden plungers + a promo.
Tap mascot → react
2 flavorsThe mascot winks + drops a one-liner.
Footer drawer opens
2 flavorsA footer drawer of the founder's tools.
Confetti Address
ideaA correct address = a pin-drop celebration.
Live Co-Browse Quote
ideaScribble the problem on your own uploaded photo.
Voice Booking
ideaMic “tell us what's wrong” → fills the request field.
Spring-follow mascot
2 flavorsA spring-follow brand mascot that parks near the CTA.
Cursor-magnet CTA
2 flavorsBook-Now pulls toward the cursor + snaps back.
Job-Clock Hero
ideaA giant clock; each hour is a completed-job thumbnail.
Spin onto a result
2 flavorsUndecided? Spin → a matching service + quote.
Heartbeat Health Check
ideaAuto/HVAC live EKG, flatline-recover on hover.
Sun rakes shadows
2 flavorsRoofer hero with real-time sun angle raking shadows.
Tide Clock
ideaPool “swim window” UV + temp gauge.
Golden Hour Gallery
ideaPhotographer thumbs re-lit to the current outdoor light temp.
Moon Phase Massage
ideaSpa tracks the real moon phase with a lunar booking note.
Frost-to-Bloom Scrollbar
ideaThe scrollbar is a seasonal thermometer.
Rhythm Scroll
ideaYoga 4-7-8 breathing guides the scroll pace.
Tap water → ripple rings
2 flavorsPool tap-anywhere water-plop by position.
Strands bend to cursor
2 flavorsBarber generative hair combed by the cursor.
Petal Rain
ideaSalon never-identical petals, denser near the CTAs.
Mic drives a visual
3 flavorsGym athlete matches your clap tempo.
Tilt-Level Trust
ideaHandyman working bubble-level via device orientation.
Pool Temp Quest
ideaSliders to hit “perfect 84°” unlock an offer.
Tap on the beat
2 flavorsAuto rhythm-tap “tune the engine”.
Reverse-Scroll Reveal
ideaScroll up past the top = team bloopers.
Echo Testimonials
ideaHover a review, it speaks its first line (opt-in TTS).