← Theme Gallery  ·  SECRET CHARACTER — THE EFFECTS LAB

Every move we know. Live.

Every tile on this page is running real code, right now, in your browser — no videos, no mockups. Scroll them, hover them, poke them. See one you want on your site? Point at it and tell us — we build it into your world.

Scroll

The page answers your scroll — reveals, parallax, velocity-reactive everything.

rows 6 / 6

Reveal + tempo stagger

Scroll in the wild → Fire

Rows arrive as the scroll reaches them and leave again if you scroll back. Replay fires the timed burst — the tempo is what you're picking.

held at 30%

Scroll velocity as gain

Scroll in the wild → Fire

Scroll speed is the fader — flick the wheel and watch the meter.

far ×0.1 · mid ×0.45 · near ×1.1

Parallax depth stack

Scroll in the wild → Ice

Three plates, three speeds — depth from one scroll value.

4 / 4 lit · 100%

Signal path

Scroll in the wild → Nature

The line wires your page together — scrub it and each card lights as the signal reaches it, and goes dark if you back up.

page held · story moves 02 / 03

Pinned scrub chapters

Scroll

The little page never moves — same URL bar, same header, same scrollbar thumb — while its story swaps chapter by chapter under your scroll.

frame 040 / 119

Scrub morph / 360 turn

Scroll

One tile of travel = one full turn. Scroll up and it unwinds exactly.

word 7 / 7

Word pop

Scroll

One word at a time, punched in by the scroll itself — the fastest way to make a visitor read your whole pitch instead of skimming past it. Scroll back and it un-says itself.

bar 08 / 16 audio: opt-in later

Waveform scrub

Scroll

Scroll = playhead, like dragging through a DAW timeline. No audio in v1.

12:00:00

Odometer clock

Scroll

Six drums roll up from 00:00:00 to the real time, then the seconds keep ticking. Scrub the wheel to shove the clock off the hour — let go and it winds back to now.

dolly z 2.0

Depth dolly

Scroll

Scrub flies the camera through five plates — scale + opacity fake the z-axis, no 3D needed.

Cursor

Trails, magnets, spotlights — the pointer becomes part of the design.

tap + drag
VIEWDRAGLISTEN

the cursor becomes the label

Custom cursor + hover labels

Cursor tap + drag

The cursor stops being a pointer and starts being a label.

BOOK A WORLD

hover pulls the button toward your hand

Magnetic button / dock

Cursor tap + drag

Buttons that lean toward the hand — the click is easier than it looks.

Worlds corner-lit on purpose

the light follows your hand across the grid

Card spotlight / glow-follow

Cursor tap + drag

The card under the hand is always the lit one — browsing your catalog stops feeling like reading a list.

8 degrees reads premium — 20 reads cheap

3D tilt card + glare

Cursor tap + drag

Your cover art leans up to meet the hand — the difference between a jpeg and a record sleeve.

hover to liquefy

Hover displacement warp

Cursor tap + drag

Hover melts the artwork like heat over a stage light — the one trick visitors try twice.

FIRELIGHT NIGHT SIGNAL LOW ORBIT

hover a title — its cover follows the cursor

Portfolio list → image on hover

Cursor tap + drag

A plain tracklist until someone touches it — then every title carries its cover. Fast to read, rich to explore.

stills smear out behind the cursor

Image trail

Cursor tap + drag

Sweep across and your stills spill out behind the cursor — one photoshoot suddenly feels like a whole archive.

ᛟthe hidden sigil

Flashlight mask

Cursor tap + drag in the wild → Hell

The page keeps one secret and hands the visitor the flashlight — curiosity does the scrolling for you.

they watch the cursor

Eyes that track you

Cursor tap + drag in the wild → Monsters

Three little creatures watch the cursor go by — the cheapest way to make a page feel inhabited.

Type

Headlines that descramble, ignite, stretch, and breathe — words as the effect.

line wins — calm beats busy

Split-text choreography

Type

One headline, three splits — overflow masks and a single stagger variable.

no one-fade-fits-all

Entrance verbs

Type in the wild → Fire

The tile that kills "you'll just fade things in" — one paragraph, four arrivals.

wght 700

Variable font axis on scroll

Type

Sweep the pointer across it: weight 200 → 800, width 75 → 100, and the word grows as it gets heavier. Parked, it breathes on its own. One font file.

background-clip: text · loops while on screen

Gradient sweep + highlight

Type

A bright edge crosses, the words hold their glow for a beat, then it comes round again — and the marker bar underlines itself on cue.

tabular-nums · zero width jitter

Number ticker / odometer clock

Type

Plain count-up beside a real odometer clock — it rolls up from 00:00:00 to your local time, then keeps ticking.

SIGNAL FOUND
real text stays in the dom

Scramble decode + glyph ticker

Type in the wild → Glitch

Decodes once; the idle ticker never quite lets it lock. Feel the difference.

RGB channel split

Type in the wild → Glitch

Two duplicated layers and an offset — the whole effect is the slider.

hover pauses

Cards & Components

Buttons, cards, nav, lists — the working parts of a site, with real feel.

Border beam

Components pure css in the wild → Gothic

One light doing laps of the rim — the same primitive tuned three ways.

hover press idle idle+hover
all four click instantly — feedback never delays the press

Shimmer / sheen button

Components in the wild → Heaven

Four genuinely different CTA treatments — each label names its trigger, so the comparison teaches.

lift
nudge
save
tick
count
underline

Micro-interactions

Components the small stuff

The little responses: a card that lifts, an arrow that moves, a button that tells you it saved. You only notice them on the sites that don't have them.

Tracks, mixes, sound design.

Worlds, type and motion.

Hand-built pages, no site builders.

Animated tabs

Components

One pill slides between tabs — arrow keys work too, the line beneath cross-fades in 120ms.

highlight cycles on its own · hover raises · six cells, one frame budget

Animated bento board

Components in the wild → the theme gallery

One board, six things worth saying — the highlight walks it so the eye always has somewhere to go next.

layout shift: 0.00 — each element paints in exactly where the placeholder stood

Skeleton → content morph

Components

The wait never jumps — your release lands exactly where the placeholder stood.

one image · three slice geometries · transform-only

Slice / shutter image reveal

Components

Your artwork arrives like a shutter opening — an entrance people remember, not a load.

two speeds, opposite ways · duplicated track, masked edges · hover a card to spotlight it

Infinite image rail

Components

Four photos read like a deep catalog — the rail never runs out, and never repeats where you can see it.

scroll up — the rail reverses · hover the type to pause

Logo marquee

Components in the wild → Brutalist

Direction follows your scroll — the small detail people notice immediately.

idle drift · pulses fly the faster you scroll

Signal beam between nodes

Components

Pulses travel the wires, quickening with your scroll — a process explained without a paragraph.

Transitions

How one state becomes another — wipes, morphs, staggered entrances and exits.

document.startViewTransition · auto-cycles

View Transitions API

Transitions

Every release takes its turn as the focused view while the rest glide out of its way — a rotation that feels rehearsed, not reloaded.

measure → invert → play · transform-only

FLIP grid morph

Transitions

Reorder your tracklist and nothing blinks — every card slides to its new home.

Morphing dialog / expanding card

Transitions

The release card you click becomes the page it opens — no popup shock, and it always closes the way people expect.

~28 pooled shards · one keyframe · fires on the action only

Burst moment

Transitions

A small reward when they actually do the thing. Never just decoration.

one token set repaints every tile — scroll around after
clip-path: polygon() · 12 points

Monogram mask wipe

Transitions

The next scene arrives through the SC mark itself, blown up past the camera — the logo is the doorway, not a sticker.

Physics

Springs, gravity, collisions, inertia — motion that obeys something.

drag a sticker, fling it — it knocks the others aside

Drag + throw with spring

Physics works on touch too

Grab one, throw it — the others get knocked out of the way. Nothing on a page should feel dead.

a constellation, hand-placed

Orbiting elements

Physics pure css — zero js per frame

Everything you make, circling the name it belongs to — and the orbit costs the page nothing.

the field parts around your hand

Magnetic repel field

Physics tap + drag

The page politely gets out of your way — a field that parts around the hand and springs back the moment you leave.

drag the ribbon — momentum carries it

Inertial marquee

Physics works on touch too

Flick the headline and it rolls with your force before settling back into its drift — a thumb on a phone works just as well as a mouse.

Ambient

Backgrounds that live — particles, gradients, weather, slow constant motion.

dots swell to your hand · grid leans toward it · contours bulge toward it — elevation follows the hand

Dot / grid / topography backgrounds

Ambient

Three background systems on one switcher — texture that was always going to be a texture.

drag the small sun — light exists only where it strikes the stone · idle, it wanders

God rays

Ambient masked light in the wild → Heaven

Rays screen-blended onto an object mask — the beam is invisible until it lands, so all you read is the lit stone.

Film grain

Ambient

The smallest change on the page with the biggest change in mood.

FX CONDUCTORthe thing running this page
fps
—
live tiles
0 / —
budget
4 ticking
raf loop
held

off-screen or reduced motion — the conductor holds everything at zero

Want any of these on yours?

Every effect here gets rebuilt around your identity — your palette, your type, your world. Pick a theme in the gallery or just tell us which tiles you want.

Browse the theme gallery → Tell us which ones →