Interaction Lab
INTERACTION-002

Eighty-one ways to make it move.

The Thornbury effects room — react, don't admire Say the number. Keep / kill / bend.

The index

Eighty-one demos, three categories. 01–48 answer to a cursor: the first hang (01–20) plus a second sweep through the showcase galleries (21–48) — Awwwards’ own effects collections, Codrops, CSS Design Awards, and the 2026 trend reporting on kinetic type. T01–T20 answer to a finger instead — swipe, hold, drag, pinch, tagged against whether they carry over to a cursor. X01–X13 answer to nothing — pulled from outside the Thornbury shelf (21st.dev, Apple’s Liquid Glass, Codrops’ 3D work), no purpose stated. Every stage carries a source line and the small “TB” mark: built in-house, the source is where the idea started, never where the code came from. Square = second hang. Ring = touch room.

Feedback so far

Six verdicts are real, given against the first hang while the room was still twenty effects wide, and five of the six are already live on the actual site — this log exists so the call isn’t re-litigated by whoever opens this page next. Everything from the second hang on (21–81) is unreviewed.

05
Torchlight Liked, no home in mind at the time Shipped — home Pillars section, revealing the blueprint grid
07
Depth cards “Very 3D” — liked, but the work wall itself stays untouchable Shipped — Design chapter, replacing the flat SpreadPiece plates
12
Constellation Liked Shipped — home CTA, dim and IO-paused behind “Tell us what you’re building”
18
The deck “Interesting, unsure where” Parked — no honest home found on the real site. Do not force one.
19
Decoder “Love the concept” Shipped — services masthead, jargon→plain pairs per service
20
The ticker “Okay” — put it “somewhere light, people won’t intentionally go see” Shipped — 404 page, ink on yellow, the one loud object nobody visits on purpose

21–81 (everything past the first hang, including the whole touch room and Offcuts) have no verdict yet — say the number, keep / kill / bend.

↑ index
01Type scrub — headline rides the scrollbar
DESIGN · AUDIT · OPTIMIZE · SEO · 
Section pins; the line slides and swells with your scroll. Zero autoplay — you drive it.
02Pinned index — rows light as you pass
What a site has to survive
The second visit
A phone on the train
Someone else's developer
Two years of neglect
Being read aloud
Same pin trick, but the scroll steps a highlight through a list — a way to pace an argument.
03Sideways room — vertical scroll drives a horizontal track
001 — HOSPITALITYKiyo 清
002 — CULTUREMidwater
003 — COMMERCEForm/01
004 — PRACTICEMeridian
005 — EXPERIMENTALOscilla
The work wall as a corridor you walk down, not a grid you skim.
04Room tint — hover a row, the whole room takes its colour
001Hospitalitymenus · hours · bookings
002Commercefewer steps to owning
003Practicetrusted at first sight
004Culturecontent that keeps arriving
005Experimentalbuilt to test an idea
A stronger version of the tint the Templates archive already does at 4%. This one commits.
05Torchlight — the cursor is a hole in the dark
There is more here.
There is more here.
Move your cursor across the stage. Yellow exists only inside the beam.
06Magnetic controls — buttons lean toward the hand
Approach slowly — each button drifts toward the cursor and snaps home when you leave.
07Depth cards — layers separate under the cursor
Template 007 Neap — a tidal menu
Template 013 Oscilla — a playable synth
3D tilt with real depth — the title floats above the card, the swatch above the title.
08Ghost plate — a preview chases the cursor down the index
Rows you're not reading dim to 25%. The floating plate is where a real screenshot goes.
09Signal break — hold your cursor on the word
THORNBURY
RGB-split slices while hovered, whole again when released. Aggressive on purpose.
10Loose letters — a headline that won't sit still
never still
Each letter rides its own sine. Charm or noise — you call it.
11Weather — blurred colour fields drifting behind the type
the room has weather
Three blurred planes in the section inks, always slowly moving. Ambient — no interaction.
12Constellation — points connect near your cursor
everything is wired
Canvas particle field; lines form around the cursor. The classic — included so you can veto it.
13Film grain — living texture over flat ground
paper, not pixels
Animated SVG noise at low opacity — the cheapest way to make empty ground feel printed.
14Six doors — hover each tile for a different reveal shape
iris
sweep
curtain rise
diamond
page turn
column
The menu used to open with one rectangle. These are six other shapes a surface can arrive with.
15Soft body — a shape that breathes next to hard type
One organic object in a hard-edged room.
SVG path morphing on a loop. The single curved thing on an otherwise 0-radius site.
16Cascade — forty tiles arriving in reading order
The archive, arriving.
Tiles cascade in when the section enters view. Hover any tile — it takes the yellow.
17Live numbers — stats that count themselves up
0
Templates deployed
0
Lighthouse, median
0
Brief to live
0
Sites we rent back to you
Counts fire once when scrolled into view. The last one staying at zero is the joke.
18The deck — hover to fan five sheets
brief
audit
design
build
handover
Five stacked sheets fan out under the cursor — process shown as an object, not a numbered list.
19Decoder — text resolves out of noise
Cycles through three lines, each resolving from scrambled mono characters.
20The ticker — oversized, unmissable, always running
Ink on yellow, per the house rule. This is yellow as a moving object, at full volume.
21Press harder — the sentence gains weight as you read it

We build it once, you own it forever, and nobody rents it back to you.

One variable font, two axes. Weight and optical size are wired to scroll, word by word — emphasis you earn rather than declare.
Source — kinetic type, the 2026 trend everyone reports: variable-font axes mapped to scroll position
22Dual wave — two columns running opposite sines
Scroll drives a sine through both columns, mirrored. What's lit is whatever crosses the centre line.
Source — Codrops, “Scroll-Driven Dual-Wave Text Animation”, Jan 2026
23The drum — type wrapped around a rotating cylinder
Real CSS 3D — each line sits at its own angle on a barrel, and scroll turns the barrel past you.
Source — Codrops, “3D Scroll-Driven Text Animations” (Cylinder / Circle / Tube), Nov 2025
24Blinds — a picture arriving one slat at a time
Nothing arrives all at once.
Twelve slats open on a stagger as the stage enters view. A reveal with a mechanism, not a fade.
Source — Codrops, scroll-driven SVG-mask transitions (grid and blind patterns)
25Foil — light travels across the letterform, not behind it
Hot-foil stamped
Move across the stage. A gradient clipped to the glyphs, dragged by the cursor — the closest a screen gets to foil catching a light.
Source — Awwwards “Filters and Effects” collection; the print-finish register the house voice already speaks
26The loupe — a square lens that magnifies what it passes over
move across the plate
A real magnification: the region under the cursor is re-sampled and re-drawn larger, with a hard edge and a chromatic fringe.
Source — Codrops, “Building a Mouse-Following Square Lens Effect with Three.js and GLSL” — rebuilt on 2D canvas
27Sticky cursor — the pointer snaps onto whatever it can act on
Read the charter See the archive
The ring lags behind the hand, then locks to the shape of anything clickable. Feedback before the click, not after.
Source — Awwwards, “Sticky cursor hover animation” (Plastic) and “magnetism” menu transitions
28Smear — the cursor leaves the room disturbed
you were here
Velocity-weighted strokes on a slowly clearing buffer. Fast movement smears, slow movement pools.
Source — Awwwards, “Cursor with Smoke Effect Distortion” and “Cursor Liquid Effect”
29Repel — letters get out of the cursor's way
don't touch the type
Each glyph is a spring. Push in, they scatter; leave, they come home — slightly late, which is the whole charm.
Source — Awwwards, “Interactive Cursor Effect with Type Distortion”
30Displacement — the surface ripples where you touch it
Liquid on hover Turbulence drives a displacement map over the plate, and the channels separate a little at the edges. The whole thing is one SVG filter — no WebGL, no library.
Hover the plate. The noise frequency and the displacement scale both ride your distance from the centre.
Source — Codrops WebGL/OGL fluid distortion hover demos — rebuilt as an SVG filter
31Relight — one flat image, lit from wherever you stand
The light is yours to move.
A depth field is generated alongside the picture; the cursor is a lamp, and the shading is recomputed against that depth every frame.
Source — Codrops, “Relighting Images with Depth Maps and Three.js”
32Halftone — a screen you can put your finger through
85 lpi · 15° screen · resolves under the cursor
The plate is printed as dots, except within a radius of your cursor, where the press resolves to continuous tone.
Source — the risograph / print-finish strand running through Awwwards’ filter collections; the house already says “paper, not pixels”
33The stack — cards that pile up instead of scrolling past
01 — BRIEF

What is actually broken

Before anything is designed, the current site gets measured: what it loads, what it says, what it fails to say to a search engine reading it aloud.

02 — DESIGN

Drawn, not assembled

No template picked from a rack. The page is composed around your actual content, and the type is chosen for the words you really have.

03 — BUILD

Fast because it is small

Real markup, real semantics, images sized for the device that asked for them. The speed is structural, not a plugin.

04 — HANDOVER

The keys, all of them

Repo, domain, mailbox, analytics. You leave with everything, including the ability to leave us.

Each card sticks at the same height, so the next one arrives on top of it. Four steps become one object.
Source — the sticky-stack pattern across 2026 award galleries; scroll-snap + sticky, no library
34Contact sheet — three rows drifting at three speeds
An endless wall. Rows run opposite ways at different rates, so no two passes ever look the same.
Source — Codrops, infinitely scrolling image grid with parallax motion and staggered text
35Velocity ticker — the band answers to how fast you scroll
scroll velocity — 0 px/frame
Scroll down and it runs left; scroll up and it reverses. Scroll hard and it skews. Idle, it drifts.
Source — Awwwards, “Text Marquee effect” collection; the velocity-coupled variant now standard on award sites
36Departure board — mechanical characters, mechanical sound implied
Each cell riffles through the alphabet until it lands. Nothing else on a screen feels this physical.
Source — the split-flap revival across CSS Design Awards nominees; a mechanical answer to the decoder in 19
37Goo — separate bodies that merge when they meet
metaballs — one SVG filter, no shader
Blur, then crush the alpha channel back to a hard edge. Circles that touch become one shape with a real meniscus.
Source — Codrops, “Run Rob Run: Building a Music-Reactive Goo with Three.js and WebGPU”
38Flow field — ink finding the grain of the paper
Structure you can see, underneath.
Thousands of particles following a procedural vector field, drawing in ink on white. Ambient, and it never repeats.
Source — Codrops, “Exploring Procedural Geometry with Three.js and WebGPU”
39CRT — a terminal with a tube behind it
Curvature, scanlines, phosphor bloom and a slow vertical roll. The site already runs a terminal — this is what it could sit inside.
Source — Codrops, “Sixty Frames for the Record … a Wall of CRTs”; Monokai’s glitch-scroll on Awwwards
40Progressive blur — the page dissolves at its own edges
scroll inside this panel

A site is not a brochure that happens to glow.

It is the only member of staff that never sleeps, never calls in sick, and talks to everyone who ever heard your name.

Which is why we measure it before we decorate it.

And why you leave with the keys.

A stack of masked backdrop-filters, each blurrier than the last, so the falloff is smooth instead of a hard band.
Source — Awwwards, “Blur effect scroll navigation” (Jon Way), Filters and Effects collection
41Mirror — type standing on a wet floor
Thornbury
A masked, inverted copy plus a canvas of slow ripples over the reflection. Depth from two elements and no 3D at all.
Source — Awwwards, “Mirror effect” (Monks), Filters and Effects collection
42The control that answers — three states in one box

Hover for intent. Click for commitment. The box shrinks to a mark and draws the tick — the confirmation is the button, not a message somewhere else.

Click it. It resets after two seconds so you can do it again.
Source — Awwwards, “CTA Button Interaction” (basement studio); “Micro interaction” (STUDIOGUSTO)
43Elastic rule — the underline travels and stretches on the way
The bar widens while it moves and snaps back to width on arrival. Distance is expressed as tension.
Source — Awwwards, “magnetism — sticky cursor animation menu transition”
44Odometer — digits on a drum, not a counter that ticks
Templates in the archive
Lighthouse, median
Largest paint, worst case
Sites we hold hostage
Each digit is its own strip rolling to its number, and they don't all arrive together. Compare it to 17.
Source — the odometer/roller numeral now standard on fintech award sites (Jeton, Awwwards SOTD 2026)
45Page transition — the room changes behind a closed curtain
Service 01

Drawn for the words you actually have

Composition, type and colour chosen against your real content — not a layout you fill in afterwards and hope fits.

The swap happens while the ink plane covers the frame, so you never see the content change — only the curtain.
Source — Awwwards, “Page Transition” (STUDIOGUSTO), Filters and Effects collection
46No script — the same motion, written entirely in CSS
zero javascript — scroll-driven css only
01The animation is attached to a view timeline
02The browser runs it off the main thread
03With no support, everything is simply already visible
04Which is the only reveal we are willing to ship
Every other scroll effect here is JavaScript. This one is not — and where the browser can't do it, the rows arrive already open rather than stuck at zero.
Source — CSS scroll-driven animations (Chrome 115+, Safari 26+); the house rule from the no-JS reveal bug
47Bento — the grid itself yields to what you're looking at
001Kiyo 清
002Aurel
003Vela
004Amicus
005Loam
006Oscilla
Hovering a cell widens its whole column and pushes the others narrow — the grid template animates, not the tiles.
Source — modular bento layouts, named in every 2026 trend survey; here made responsive to attention
48Ink bleed — letters that run into each other on wet stock
overprint
Click the word. Blur plus a hard alpha curve makes the glyphs bleed together as the tracking closes, then dry apart again.
Source — the same gooey-threshold filter as 37, applied to type; print-defect aesthetics across the 2026 galleries
Category — mobile

Twenty things a finger can do that a cursor can't.

Everything above answers to a cursor. This room answers to a thumb: swipe to act, hold to confirm, drag to arrange, pinch to look closer. Where the platform has a native gesture for it — swipe-to-remove, pull-to-reveal, snap highlighting — it's built that way, no gesture library, scroll-snap doing the physics. Where it doesn't, it's Pointer Events, which a mouse can also drive, so you can try every one of these from a desktop too.

Pointer Events + native scroll-snap — no gesture library
T01Swipe actions — archive right, delete leftSource — Modern Web Guidance, “Swipe to remove” — native scroll-snap, zero gesture JSDesktop — linked, same drag code, a mouse does it too
    Inbox — 4
  • New enquiry — Kiyo 清2 minutes ago
  • Invoice #114 paidthis morning
  • Domain renewal reminderyesterday
  • Preflight — backup completedyesterday

The scroll engine does the physics — momentum, snap, keyboard access, reduced-motion, all free. Swipe a row. Commit fires before the snap even settles.

T02Pull to reveal — the search bar hides above the foldSource — Modern Web Guidance, “Pull to Reveal” — scroll-initial-target, CSS onlyDesktop — linked, wheel-scroll reveals it identically
↑ pulled down — search sits here
The archive — 14 live
Kiyo 清ordering · mobile-first
Aurelluxury · horlogerie
Velaobservatory · computed sky
Amicuslegal · intake-first

Loads scrolled PAST the search bar on purpose. Pull down from the top. One CSS property, no scroll-into-view script.

T03Snap highlight — the centred card lifts on its ownSource — Modern Web Guidance, container scroll-state(snapped) queryDesktop — linked, shift+scroll or a trackpad snaps it
001Kiyo 清
002Aurel
003Vela
004Amicus

Swipe through the cards. No IntersectionObserver — the container itself knows which card is snapped and styles its own descendant.

T04Live dots — the indicator moves before you let goSource — Modern Web Guidance, scrollsnapchanging real-time feedbackDesktop — linked, same horizontal-scroll mechanism

A pending dot lights mid-drag, before the snap decides. Drag slowly and watch the dot ahead of you — release near the middle to see it change its mind.

T05Verdict stack — swipe the room's own callSource — Awwwards, swipe-card interactions; the room's own keep/kill/bend line, made literalDesktop — linked, already Pointer Events, mouse-draggable
← kill · keep → · bend ↑

Drag a card. Three directions, three verdicts — the exact call this whole room is asking for, now something you throw instead of type.

T06Bottom sheet — three resting heights, one dragSource — 2026 mobile UX reporting, “bottom-sheet architecture” as a named patternDesktop — swapped for a click-open dropdown, not a sheet
The audit

What's checked before anything ships — pull the sheet up for the list.

Checked on every deploy
Security headers✓
Lighthouse98/100
Broken links✓
Schema markupvalid
Image weight✓

Drag the handle. Release anywhere and it settles on the nearest of three heights — peek, half, full — by velocity, not just position.

T07Long-press — hold to open a menu that isn't a tap targetSource — 2026 mobile UX reporting, “long-press for reactions/context menu”Desktop — swapped for right-click / hover, no hold-timer needed
Kiyo 清

Press and hold the tile. A ring measures the hold; the menu only opens once it completes, so a quick tap never triggers it by accident.

T08Double-tap — the second tap is the whole gestureSource — 2026 mobile UX reporting, compound gestures with a feedback layerDesktop — linked, double-click fires the same handler
Aurel ♡ 0

Double-tap the picture. One tap does nothing here — the second tap inside 320ms is what the gesture actually is.

T09Pinch & pan — two fingers, one photoSource — native photo-viewer gesture; the room's only phone-only demoDesktop — linked, wheel-to-zoom stands in for the pinch
1.0×

On a phone: pinch to zoom, drag to pan. On a desktop: this is the one true two-finger gesture in the room — a mouse can only fake it with a scroll-wheel, wired here as a stand-in.

T10Drag to close — the picture answers to how far you pullSource — native photo-viewer dismiss gesture (Instagram, Photos)Desktop — linked, same drag code, no touch required
closed

Drag the photo down. It shrinks and fades in proportion — release past the threshold and it closes; short of it, it springs back.

T11Drag to reorder — pick a row up, the rest step asideSource — native list-reorder pattern (Reminders, Home Screen)Desktop — linked, drag-to-reorder is native desktop UX
Home01
Services02
Templates03
Contact04

Drag a grip up or down. Rows reflow live under your thumb; the numbers renumber themselves on release.

T12Pull to refresh — resistance, then a spinner earns its keepSource — the canonical mobile pattern (Twitter/X, 2009 — still the standard)Desktop — swapped for a plain, visible refresh control
Lighthouse — 98/100checked 4h ago
Uptime — 100%30-day window
SSL — validrenews automatically

Drag down from the top and release. The pull resists like elastic, not a scroll — that resistance is the whole tell that something will happen.

T13Edge swipe — the previous screen lives just off the left edgeSource — iOS system back-swipe, rebuilt as page furnitureDesktop — swapped for a back button; edges aren't discoverable with a mouse
ServicesDrawn, not assembled.
TemplatesThe archive — 14 live.

Swipe in from the very left edge. Start anywhere else on the screen and nothing happens — the edge itself is the affordance.

T14Press to confirm — a fill that has to finish, not a tap that has to landSource — 2026 mobile UX reporting, hold-to-confirm as the destructive-action standardDesktop — linked, held mouse-down fills the same ring

Press and hold the button — about a second. Let go early and the fill empties back out; nothing an accidental tap can trigger.

T15Speed-dial — one button, three ways to reach usSource — Material Design's FAB speed-dial, the mobile answer to 42's morph buttonDesktop — swapped for a hover-reveal toolbar, no hiding needed
WhatsApp💬
Call☎
Email✉

Tap the button in the corner. Three ways to reach the studio arrive with a stagger; tap the darkened room, or the button again, to close.

T16Compare — drag the line between before and afterSource — the before/after slider, standard on redesign and audit case studiesDesktop — linked, same drag code, no change required
after
before
↔

Drag the handle left and right. The same move an audit case study would use to show a site before and after — here it's just the room's own palette against a ruled page.

T17Drag toggle — tap it, or throw the thumb across itSource — native switch control, both its gestures rebuiltDesktop — linked, click or drag, both already wired
Email updates
Reduced motion

Tap it, or drag the thumb past the midpoint and let go — both flip it, and the thumb overshoots slightly on release, like it has weight.

T18Ripple — the tap leaves a ring where it landedSource — Material Design's touch ripple, the material-honesty answer to hover statesDesktop — swapped for hover — a cursor already has a hover state
tap anywhere

Tap anywhere on the tile, more than once if you like — every tap spawns its own ring, exactly where your finger landed. There is no hover state to fall back on; this is the confirmation.

T19Give — the list has an edge, and the edge has some springSource — native rubber-band scrolling (iOS, since 2007) as a deliberate design elementDesktop — touch only, no fake bounce forced onto a scrollbar
that's everything
Brief
Audit
Design
Build
Handover

Drag past the top or bottom. The list resists and prints a small note before springing back — the edge announces itself instead of just stopping dead.

T20Haptic — a real buzz where the browser allows oneSource — the Vibration API; honestly gapped where Apple blocks itDesktop — touch only, there is no vibration motor to call
checking…

Every button plays the visual pulse. On Android Chrome, it also buzzes the phone — navigator.vibrate(). iOS Safari blocks the API outright; the status line says so rather than pretending.

Category — no purpose

Material kept because it's beautiful, not because a job needed it.

Everything above was built to answer a real question a page might ask. These weren't. Pulled from outside the Thornbury shelf on purpose — 21st.dev's component registry (Aceternity, Cult UI), Apple's own Liquid Glass language, Codrops' 3D and generative work — then rebuilt from nothing in this room's tokens. The source names a starting point, never a place code came from.

real 3D — perspective + rotateX/Y/Z + translateZ, no library
X01Aurora — ribbons of colour drifting behind the type
the room has a sky now
Three blurred ribbons on independent drift cycles, screened together. Ambient — nothing to touch.
Source — Aceternity UI's Aurora Background (21st.dev), rebuilt as pure CSS gradients
X02Sparkle dust — a field of points that never stops twinkling
glitter, not network
Static points, each on its own twinkle clock — no connecting lines, no drift. The opposite instinct from 12's constellation.
Source — Aceternity UI's Sparkles component (21st.dev)
X03The dock — icons that grow as your cursor nears them
🌊 ⏱ 🔭 ⚖ ☕ TB
Move along the row. Each icon's scale is a falloff curve from your cursor's distance — the macOS dock's whole trick, in about twenty lines.
Source — Aceternity UI's Floating Dock (21st.dev)
X04The ring — five cards on a real rotating cylinder
drag to turn it
True 3D — preserve-3d and five faces at fixed rotateY steps, not five flat cards faking depth with a shadow.
Source — Cult UI's 3D Carousel (21st.dev) — their most-bookmarked component
X05Liquid glass — Apple's own material, built without Apple's engine
Material studyBends the light behind it
Move across the panel. A blur plus a live SVG displacement map warps whatever sits behind the glass toward your cursor — reactive, not just translucent.
Source — Apple's Liquid Glass (iOS/macOS 26); rebuilt with backdrop-filter + feDisplacementMap
X06Too big to see — a word too large for its own room
THORNBURY
drag to pan across it
Set at a size no viewport holds at once. The word is still there, whole — you're just too close to read it.
Source — oversized/undersized type as its own genre across 21st.dev's hero blocks
X07The matchbox — a whole scene at postage-stamp scale
120px square. everything fits.
The smallest stage in the room on purpose — a real isometric scene, blocks and all, small enough to lose in a pocket.
Source — the diorama/miniature-world genre common on 21st.dev's 3D showcases
X08Depth diorama — four flat planes, real distance between them
the room has a floor plan
Move your cursor across the stage. The four planes tilt at different rates because they're genuinely different distances from you — translateZ, not a blur trick.
Source — Codrops' depth-parallax scroll galleries, collapsed into a cursor-driven still
X09Exploded view — the stack, taken apart in the air
HOSTING
BUILD
MARKUP
DESIGN
hover to take it apart
The exploded-parts diagram, done to the site's own stack instead of an engine — hover to separate every layer, leave to let it close back up.
Source — technical exploded-view diagrams, a recurring 21st.dev "product" motif
X10Isometric skyline — a tiny city built from cubes
Every block is three flat faces at a fixed angle — the classic isometric illusion, no camera, no library. A handful of windows keep their own light on.
Source — isometric-city genre, common across Codrops' generative-art tag
X11Orbit — small bodies, real orbital motion, no purpose stated
Five dots in genuine 3D orbits — combined rotateX/rotateY/translateZ, no canvas, no physics engine. It does nothing. That's the entry.
Source — orbital/solar-system motifs across 21st.dev's "pure" 3D component category
X12Droste — a frame holding a smaller copy of itself
click to fall one frame deeper
Six nested copies of the same plate, each a little further in. Click it and the whole stack steps inward — the sense of infinite depth costs six divs.
Source — the Droste effect (recursive self-containing image), a recurring generative-art device
X13Mobile — a kinetic sculpture that answers to the room's air
Thin bars on invisible arms, each swaying on its own sine — move your cursor through the stage and the nearest arms answer, like disturbed air.
Source — Alexander Calder's kinetic mobiles, by way of the generative-art web-art tradition