← Theme Gallery  ·  SECRET CHARACTER — THE EFFECTS LIBRARY

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. Star the ones you want on your site.

203 effects · one page

Scroll

The page answers your scroll.

01 / releaseNight Signal
LP · 11 tracks
02 / liveTour dates
6 cities · oct
03 / merchSigil tee
limited run
04 / contactBook the room
reply in 24h
scroll inside ↓

Stacking deck

Sticky cards pile up. The card underneath shrinks and darkens as the next one covers it, so the page reads as a deck of sleeves.

We don't build pages that sit there. We build rooms that answer back: the scroll is a fader, every section lands on the beat you set, and the whole thing is heavy as a record sleeve and fast as a text.

ink 100% scroll inside ↓

Read-along ink

Words fill in as the reading line passes them, with a three-word soft edge. Good for a manifesto or a bio that people should actually read.

chapter iii

The window opens as you go.

NOCTURNE

open 100% scroll inside ↓

Aperture open

A card-sized window clips open to full bleed while the art inside settles from 125% to 100%. The title only lands once the frame is fully open.

scroll inside ↓

Counter-scroll columns

The centre column rises while the two flanks sink, all off one progress value. A photo wall for a gallery, a menu or a shoot.

cafe · est. 2019Ember & Oak
EMBER & OAK menuhours book
chapter 1 / 4 scroll inside ↓

Stuck-state header

Once the header sticks, it swaps the wordmark for a monogram and shows a Book button. Chromium does this with CSS scroll-state(stuck). Other browsers get a one-line sentinel check.

I · overture

The descent

One idea per screen. The scroll clicks into place.

II · the work

Three records

Each chapter is a full stop, not a feed.

III · live

The room

Markers on the right double as navigation.

IV · contact

Say hello

The last chapter releases you back to the page.

Snap chapters

Mandatory scroll snap with scroll-snap-stop, so each flick is one chapter. Diamond markers show where you are and jump on click. Under reduced motion it drops to proximity snap.

drift → scroll inside ↓↑

Direction marquee

Two tickers drift slowly by themselves. Scrolling pushes them faster, and reversing the scroll reverses the ticker. It only ticks while the tile is on screen.

assembled scroll inside ↓

Grid assemble

Nine scattered tiles fly into a grid over the first two-thirds of the scroll, then the centre tile takes over the frame. Inspired by the Codrops sticky-grid build, written here with no libraries.

UndertowSalt HymnGlassworkLow OrbitNight SignalTallowRelayAsh ChoirAfterglow
01 · 3:4102 · 4:0203 · 2:5804 · 3:3305 · 5:1006 · 3:0707 · 4:4408 · 3:1909 · 6:01
track 05 / 09 scroll inside ↓

Dual-wave tracklist

Titles and times ride opposing sine waves past a centre line, and the row on the line lights up. Inspired by the Codrops dual-wave write-up, rebuilt without GSAP.

  1. fri 03Low Tide Choir21:00
  2. sat 04Mara Vell22:30
  3. sun 05Brunch set: Okkerlund11:00
  4. thu 09Glass Harbor21:00
  5. fri 10The Copper Saints22:00
  6. sat 11Nightjar DJs23:00
  7. sun 12Open decks15:00
  8. wed 15Quiet Room session20:00
  9. thu 16Ivo Raskin trio21:00
  10. fri 17Hollow Pines22:00
  11. sat 18Static Orchard22:30
  12. sun 19Brunch set: June Ferro11:00
  13. thu 23Paper Lanterns21:00
  14. fri 24Emberline22:00
  15. sat 25Halloway b2b Kesh23:00
  16. sun 26Closing set18:00
zero js

Scroll shadows

An accent glow shows at the edge where there's more to scroll and disappears at the end. Four backgrounds with background-attachment: local vs scroll, no script. Good for menus, hours, gig lists and tracklists in a fixed box.

chapter logFour chapters
IOrigin
IIThe signal
IIIThe room
IVAftermath
detect: — scroll inside ↓

Chapter stamps

Each chapter slams its rune seal down the moment it reaches the middle of the frame — a discrete "unlock", not a scrub — and re-stamps when you scroll back to it.

lookbookNight Signal, in frames
scroll inside ↓

Parallax gallery + detail morph

Each frame drifts at its own speed as you scroll. Click one and it morphs into a detail view with the native View Transitions API — no GSAP Flip. Click outside or Esc closes.

native
lenis
  1. 01Signal check
  2. 02Carrier lock
  3. 03Uplink stable
  4. 04Relay warm
  5. 05Payload sync
  6. 06Handshake
  7. 07Beacon live
  8. 08Downlink open
  9. 09Night run
  10. 10Carrier drift
  11. 11Echo return
  12. 12Long wave
  13. 13Static bloom
  14. 14Last relay
  15. 15Quiet band
  16. 16Sign off
lenis: loading… scroll inside ↓

Lenis smooth-scroll layer

One wheel, trackpad or swipe drives both columns: the left goes exactly where plain scrolling would, the right is Lenis (18.7KB, lazy-loaded) gliding after it and leaning into the speed. Off under reduced motion, and scoped to this box only; it never touches the page.

pre-rendered

Scroll draws the sequence, frame by frame.

SIGNAL BLOOM

frame 1 / 12 scroll inside ↓

Canvas frame-sequence hero

A 12-frame sprite sheet (one image, no video) is drawn to a canvas by scroll progress — the ScrollCraft-style hero. The playhead eases toward the scroll and neighbouring frames crossfade, so it dissolves instead of stepping. Reuses the sprite sheet already shipped in this repo's media lab.

e 0% scroll inside ↓

Cover collapses to fixed header

The full cover card shrinks continuously into the compact header as you leave it — height, type scale and background all key off one range. Native animation-timeline: scroll() where it runs, a scroll-position readout everywhere else.

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.

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.

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, so your pitch gets read word by word instead of skimmed. Scroll back and it un-says itself.

bar 08 / 16

Waveform scrub

Scroll

Scroll = playhead, like dragging through a DAW timeline.

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.

Cards & hover

Hover it, tap it, drag it.

Focus triplet → swipe strip

componentsfreetouch: swipe focus

Desktop: hover one card, the other two blur and sink. Phone: the row becomes a snap strip and whichever card is centred takes focus.

best for service tiers · 3-step process · pricing rows

move over the carddrag the card · tap = sway

Holographic foil card

cursorcheaptouch: drag

Tilt plus a rainbow foil band and sparkle layer, all blended with color-dodge and steered by one pointer position. The foil slides across, the sparkle only shows under the light.

best for merch · release art · membership cards

hover or focustap to flip

Flip card

componentsfreetouch: tap

3D Y-axis flip with backface-hidden faces. It's a real button with aria-pressed. Reduced motion swaps the spin for a crossfade.

best for pricing · before/after · bio-to-booking

→Book
a call
Peel me.

Something's under the corner.

hover · or drag the cornerdrag the corner · tap = peel

Corner peel

componentsfreetouch: drag + tap

The top sheet is clipped along a fold line and the flap is its mirror triangle, both driven by one registered --peel length. Hover curls it; dragging from the corner sets it by hand.

best for hidden CTA · promo code · easter egg

hover the deck, then a cardtap to fan · tap a card to pull it

Deck fan-out

componentsfreetouch: tap

A squared stack fans on a shared low pivot; the hovered or focused card lifts out. Pure transform, one index variable per card, keyboard reachable.

best for tracklist · portfolio pick · tarot-style menus

enter from any sidetap a card

Direction-aware caption

cursorfreetouch: tap

The caption slides in from whichever edge the pointer crossed and leaves by the edge it exits. The edge comes from atan2 on entry. Touch and keyboard bring it up from the bottom.

best for portfolio grids · gig photos · release grids

the gate opens
hover · the gate follows youdrag to aim · tap to open

Diamond aperture zoom

cursorfreetouch: drag + tap

The image sits behind a clip-path diamond (the SC mark) that follows the pointer. On hover it grows past the corners while the image counter-zooms from 1.4× to 1.

best for hero image · album art · brand reveal

move across the carddrag across the card

Rune cipher reveal

cursorcheaptouch: drag

A field of mono glyphs and runes, gradient-clipped and masked to a circle at the pointer, reshuffling at ~14 fps only while you're on it. After the Aceternity "Evervault card".

best for dev/tech offer · secret page · members area

Vigil
▚ hover to dissolve ▞
hover in from anywheretap where you want it to start

Pixel dissolve

componentscheaptouch: tap

160 cover pixels drop out in a wave from wherever you entered and fill back in from wherever you left. Each cell gets a distance-based delay; no canvas.

best for gothic-pixel brand · game/music reveal · before/after

bring the cursor closedrag near it · tap = drip

Goo CTA

cursorcheaptouch: drag + tap

An SVG blur + alpha-contrast filter melts a cursor-following blob into the button. Hovering the button lets drips hang off it. The label sits outside the filter so the text stays sharp.

best for the one primary CTA · listen / buy buttons

01Mixing
02Mastering
03Artist sites
04Sound design
move between the cardsdrag across the grid

Proximity border glow

cursorfreetouch: drag

Unlike the spotlight card, this one lights up before you arrive. Each card's rim arc turns toward the pointer (conic from an atan2 angle) and fades in with distance, even from the gutter between cards.

best for feature grids · service menus · pricing tables

glide across the gridtap an item

Sliding hover highlight

componentsfreetouch: tap

Instead of each card lighting up separately, one shared highlight glides from item to item and resizes to fit. Keyboard focus moves it too. After the Aceternity "card hover effect".

best for nav menus · link grids · discography lists

move over the carddrag the card

Wobble card

componentsfreetouch: drag

The card leans a few px toward the pointer and scales up slightly; the content inside over-shifts the opposite way for a parallax pop, then springs back on release.

best for feature card · pricing hero · single spotlight tile

move over the artpress and drag

Lens magnifier

cursorcheaptouch: drag

A circular lens follows the pointer and clip-paths a scaled duplicate of the same art underneath it, so detail reads without a page navigation. On touch the lens sits above the finger, not under it.

best for merch detail · art print · album cover close-up

MasteringLoud where it counts, clean where it doesn't.
hover to reveal the fieldtap to reveal

Canvas reveal (dot matrix)

cursormoderatetouch: tap

A 2D-canvas dot field pops in as a wave from wherever you entered, settles into an ambient scatter, and the caption fades up once it's revealed. No WebGL needed.

best for feature backdrop · hero panel · hover state on a dark tile

hover to pause · click front card to advancetap to advance

Card swap (auto-cycle)

componentscheaptouch: tap

A depth-offset stack where the front card drops to the back on a timer or a click. Autoplay pauses on hover/focus and never runs under reduced motion — tap or click always still advances it by hand.

best for new releases · show dates · feature rotation

Night Shift EP3 tracks · stems included
hover the stacktap the stack

Stack motion hover

componentsfreetouch: tap

Hovering the front card reveals two accent-coloured cards fanning out from directly behind it, staggered a beat apart. Distinct from the deck fan-out: these under-cards imply "more inside" rather than a browsable set.

best for link stack · discography single · download bundle

move across the gridtap to pulse

Shader hover image grid

cursormoderatetouch: tap to pulse

A tiny inline WebGL fragment shader warps the grid and splits colour channels toward wherever the pointer sits, decaying with distance. No WebGL, or reduced motion: the plain image grid shows with no distortion, still lit per-cell on hover.

best for portfolio wall · release grid · agency work index

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.

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 displacement warp

Cursor tap + drag

Hover melts the artwork like heat over a stage light.

FIRELIGHT NIGHT SIGNAL LOW ORBIT

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.

Menus & transitions

How a visitor gets around your site.

Secret Character

Home

Circle-origin full-screen menu

freemobile okreduced-motion ok

A clip-path circle grows from the menu button's own position. The links rise out of masks one after another, and the burger turns into an X.

Enter open · Tab stays inside · Esc / click empty space closes · focus returns to the button

Scroll this box

The header shrinks as you go

The browser's scroll timeline drives it. Nothing runs on scroll events, and transform is the only thing that moves.

css timeline

Scroll-shrink sticky header

freemobile okreduced-motion ok

Over the first 90px of scroll, the big logo sits down into a compact bar and the backdrop solidifies. It runs on animation-timeline: scroll() with a registered --shrink property. Browsers without that get a rAF fallback.

Tab into the page · arrows / PgDn scroll it

Journal

Gets out of the way

Gallery

Tour photos

Gallery

Studio sessions

Headroom: hide on down, show on up

freemobile okreduced-motion ok

Made for gallery pages: the photos get the whole screen on the way down, and the nav is one flick away. The header reads your scroll direction, with an 8px dead zone so a shaky thumb doesn't make it flicker. A reading-progress hairline runs along its bottom edge, and it never hides while it holds keyboard focus.

Tab to a header link and it stays visible

Store

All products

Off-canvas drawer with drill-in + back

freemobile okreduced-motion ok

The page behind goes inert. A sub-menu slides in on a two-pane track and has its own Back button. Drag the drawer left past 35% of its width, or flick it, to close.

Esc backs out one level, then closes · click scrim closes · swipe left closes

Release

Night Shift EP

EP · 2026 · 7 tracks

Bottom sheet with detents

freemobile okreduced-motion ok

This is the phone-native pattern. The sheet snaps to half or full height depending on where you let go and how fast. The scrim follows the drag. The list scrolls on its own and can't drag the sheet by accident.

↑ / ↓ on the handle change height · Esc / scrim closes · drag it down to dismiss

Hover or tab

One panel, three shapes

There's one dropdown. It changes size to fit each section, and the content slides in from whichever side you came from.

Tour datesFall 2026 Past showsPhotos + setlists
Next upOct 11 · The Crypt, Denver

Morphing mega-menu

freemobile: tap onlyreduced-motion ok

One shared dropdown whose backdrop resizes between sections, with a caret that follows the trigger. Hover intent is 90ms in and 280ms out, so cutting diagonally toward a link doesn't snap the menu shut.

↓ opens + enters · ↑↓ links · ← → triggers · Esc / click outside / tab away closes

Section

Home

Icons swell as the pointer gets near. Keyboard focus swells them too. On touch it behaves as a normal tab bar.

Proximity dock

freemobile: plain tab barreduced-motion ok

Each icon scales with a cosine falloff based on pointer distance (radius 110px, 1.6× peak). Neighbours make room instead of overlapping. The current page gets an accent dot, and clicking an icon makes it hop.

← → move along the dock · Enter select

Directional tab content

freemobile okreduced-motion ok

The content slides the way you moved: pick a tab to the right and the panel comes in from the right. It's a scoped View Transition that only snapshots the panel, with a WAAPI fallback. It pairs with the existing sliding-pill tabs.

← → roving tabs · Home / End · Tab into panel

Page

Home

Latest release, next show, and a way to join the list.

last load: —

Route progress bar

freemobile okreduced-motion ok

The bar eases toward 90% on an asymptotic curve, so it never stalls and never lies about being finished. A double-click cancels the earlier load. Screen readers hear "loaded", and focus moves to the new heading.

Tab to a link · Enter navigates · focus lands on the new page title

Drill-down with shared title + back

freemobile okreduced-motion ok

The row's cover and title fly into place as the detail header. Back plays the same move in reverse and puts focus on the row you opened. The view-transition-name is only assigned for the duration of each transition.

Enter open · Esc / Back / breadcrumb returns · focus comes home

Booking

Live shows

Book a show

Pick a date

Modal stack with recede + drag-safe dismiss

freemobile okreduced-motion ok

Built on native <dialog>.showModal(), so focus trapping and the top layer come free. It animates in and out with @starting-style and allow-discrete. Click-outside only closes when the press both started and ended on the backdrop.

Esc closes top only · backdrop click closes · focus returns to the opener each level

real navigation

Cross-document view transitions

freemobile okreduced-motion ok

This frame holds two real pages. Picking a release actually navigates the frame, and the browser's own cross-document view transition morphs that cover and title into the next page, then back again. Where it isn't supported, the page just loads.

Tab into the frame · Enter a release · Catalog link returns

Anchored, not measured

No JS positioning math

The menu is tied to the button with anchor-name / position-anchor. It flips above the button automatically if the tile is short on room.

Anchor-positioned popover dropdown

freemobile okreduced-motion ok

popover="auto" gives top-layer, light-dismiss and Esc for free. anchor-name + position-anchor + position-try-fallbacks keep the menu pinned to the button and flipped on-screen, with no measuring script. A JS fallback positions it where anchor positioning isn't supported.

Enter open · Esc / click outside closes

Footer sitemap

Tour dates

height:auto submenu accordion

freemobile okreduced-motion ok

interpolate-size: allow-keywords lets a real height: auto transition run, so the panel measures itself instead of JS reading scrollHeight. Falls back to a measured max-height transition where that's missing.

Enter / Space toggles a row · rows are independent

Persistent-canvas page transition (WebGL)

expensivemobile: partialreduced-motion ok

One full-tile canvas outlives the "page change." A dissolve shader morphs the outgoing view into the incoming one while a snapshot of each page rides as a texture. No WebGL, or with reduced motion on, a plain DOM crossfade takes over.

Enter triggers the dissolve · Esc reverses

Home

Every link is intercepted

A curtain of columns wipes across while the next page swaps in underneath, the way Barba.js + GSAP would run it on a multi-page Astro site.

About

A second real "page"

Same trick works in every browser, including ones without cross-document view transitions.

Barba-style curtain page transition

moderatemobile okreduced-motion ok

Staggered columns wipe closed, the content swaps behind them, then they wipe back open — the visual Barba.js + GSAP would give an intercepted link on a multi-page Astro site. Works everywhere; no cross-document view transitions needed.

Tab the nav links · Enter swaps pages

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.

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.

Burst moment

Transitions

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

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.

Type

Words that move.

~/secret-character $ whoami

We build sites for bands, barbers, bakeries and night owls.

Typewriter with a real caret

Types, holds, backspaces, retypes. The caret stays solid while it types and only blinks when idle, the way a real terminal behaves.

  • time
  • js-light
  • terminal
  • sr: full sentence

Letter roll on hover

Each letter rolls up to reveal an accent twin, staggered 22ms apart. The twin is a text-shadow, so there's no duplicate DOM text. Works on keyboard focus too.

  • hover
  • focus
  • nav
  • css transform

Outline to filled

Stroked hollow letters flood with colour from the left on hover or focus. The fill is a clip-path wipe, so it runs on the compositor.

  • hover
  • focus
  • text-stroke
  • clip-path
Secret Character, sites for musicians.

Text on a path

A ribbon of type rides a bezier curve while a tiny line of type circles a triangle. Any SVG path works: curves, corners, closed shapes.

  • time
  • svg textPath
  • startOffset

SeenUnseen

Blend-mode type

The headline uses mix-blend-mode: difference, so it inverts whatever passes under it and stays readable on light and dark. Move your pointer to drag the violet disc.

  • pointer
  • blend
  • over imagery
Void window onto a live canvas

Knockout type window

A solid slab with the word cut out of it. You see a live canvas (rising embers) through the letters. Swap the canvas for a muted video and you get video-in-text.

  • svg mask
  • canvas
  • video-ready

Every word lands the moment you read it. The page keeps pace with your eyes, not a timer.

Scroll word fill

Words go from ghosted to lit as you scroll. Scroll back and they dim again. Suits bios and manifestos.

  • scroll
  • split words
  • css view() ready
we sound

We sound loud, strange, honest, alive.

Gooey word morph

One word melts into the next. Two layers cross-blur, then an SVG alpha-threshold filter snaps the blur into liquid edges.

  • timed
  • svg filter
  • word cycle
Secret Character

Rune proximity swap

Letters near the pointer turn into their Elder Futhark runes and turn back as it passes. When nobody's pointing, a slow ghost cursor sweeps across. Built for the gothic-pixel brand.

  • pointer
  • touch drag
  • Noto Sans Runic
Gravity

Proximity weight fisheye

Each letter's weight and width axes swell with pointer distance, a per-letter lens. This is different from the whole-word sweep already in the Effects Lab.

  • pointer
  • wght + wdth
  • per char
390px

Fluid type scale (clamp)

A Utopia-style scale: 16px at ×1.2 on a phone, 20px at ×1.333 on a desktop, with clamp() in between. Drag the slider to watch every step resize.

  • system
  • clamp()
  • container units

File 0927 / declassified

Subject SECRET CHARACTER was last seen building websites for musicians after midnight. Motive: the work sounds better than it looks. Status: still at large.

Redaction reveal

Black bars peel off the key phrases in sequence when the tile scrolls in. A declassified-file entrance for press kits, lore pages and tour announcements.

  • scroll in
  • scaleX
  • bars aria-hidden
Encore Encore

Stroke-draw type

Glyph outlines draw themselves with a stroke-dashoffset animation, then the fill floods in. A signature-style entrance for a band name or wordmark.

  • scroll in
  • svg stroke
  • logo
Scroll-driven. Zero JavaScript.
checking support…

Native scroll-driven type

The headline rises and fades purely off a CSS scroll timeline, so the browser scrubs it off the main thread. No support (Firefox)? A JS fallback reads the same scroll progress.

  • scroll
  • css only
  • scroll-timeline
  • js fallback

Clarity arrives in stages, not all at once.

Blur-in word reveal

Words settle in from a blur, staggered word by word, when the tile comes into view. A soft entrance for headlines and pull quotes.

  • scroll in
  • filter blur
  • split words
Secret Character

3D circle text

Letters ride a rotating 3D ring: a slow idle spin, and scrolling spins it further. Pure CSS transforms, no WebGL.

  • scroll
  • preserve-3d
  • css only
Secret Character

3D scroll-driven text stack

Repeated copies of a headline sit stacked in depth. Scrolling pulls the camera through them, tunnel-style, and each copy fades as it passes. Self-contained here; the full-page pinned version wants ScrollTrigger.

  • scroll
  • 3d transform stack
  • tunnel
text-wrap: wrap (default)

Every site ships with fluid type, balanced headings and orphan-free paragraphs.

text-wrap: balance

Every site ships with fluid type, balanced headings and orphan-free paragraphs.

220px

text-wrap: balance / pretty

One CSS line evens out ragged line lengths (balance) or kills orphaned last words (pretty). Drag the width to see the default fight for space while the second column stays tidy.

  • system
  • css only
  • no motion

Long-shadow extrude

A stack of offset shadows pulls the word off the page like retro-cart lettering. Hover, focus or tap deepens it — the whole stack is one CSS custom property transitioning, no JS per frame.

  • hover
  • @property
  • text-shadow
Secret Character

ASCII / dither type render

The wordmark is drawn to an offscreen canvas, sampled into a grid, and redrawn as mono glyphs — a flickering ASCII render. Move the pointer through it to brighten the grid nearby.

  • pointer
  • canvas
  • luminance sample
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.

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.

SIGNAL FOUND

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.

Forms & buttons

Inputs and buttons that answer back.

As it should read on the invoice.

Floating label, done right

free

A real <label> that lifts out of the way on focus or content. Hint text stays visible below (never hidden in a placeholder). The counter only speaks up near the limit.

#input #form #label #counter #booking #mobile

Inline validation choreography

cheap

Late to scold, quick to forgive: a field only complains after you leave it, and the error clears the moment you fix it. On send, a line counts what's left and the cursor jumps to the first problem. Errors land with a short glitch nudge, not a wobble.

#validation #user-invalid #aria-invalid #error #booking

  1. 1 · Event
  2. 2 · Size
  3. 3 · Contact

What's the occasion?

Multi-step inquiry with progress rail

cheap

One question per screen, a segmented rail that fills, direction-aware slide (forward slides left, back slides right). Focus lands on each step's heading and the step change is announced. A real Back button.

#booking #wizard #progress #aria-current #focus-management

Stateful submit morph

free

Idle, then loading, then sent (a tick draws itself) or failed (a glitch and a retry label). The button never changes width between states, and a nervous double-click can't send twice.

#button #loading #success #error #aria-busy #no-layout-shift

Press and hold for 1.5 seconds to confirm.

Hold to confirm

free

The fill is slow while you're deciding and snaps back fast when you let go. It replaces the "Are you sure?" popup for anything you can't undo. Holding a key works too.

#button #destructive #clip-path #press-and-hold #mobile

Set length

Switch, checkbox & radio with motion

free

The switch knob squashes as it travels. The checkbox tick draws itself in. The radio dot springs in with a ring. They are the browser's own controls underneath, with big tap targets, so screen readers and phones handle them properly.

#toggle #switch #checkbox #radio #native-first

Range slider with value bubble

cheap

A slider with its value riding along in a bubble. The bubble grows while you hold it and gives a small bump at each round thousand, which on a phone feels like a click stop. Screen readers hear the dollar amount.

#slider #range #aria-valuetext #detent #mobile

    File drop zone

    cheap

    The whole zone is a label for a real file input, so keyboard and tap still work. On drag-over it swells and the icon lifts. Each file gets a progress sliver, a size check and a 44 px remove button. Adds and removals are announced.

    #upload #drag-and-drop #file-input #progress #epk

    Enter the 6-digit code.

    One-time code, one real input

    cheap

    Six slots drawn over one real input, so text-message autofill, paste and screen readers all work (six separate boxes break all three). Slots pop as they fill, flip in sequence on success, and glitch and clear on a wrong code.

    #otp #one-time-code #autofill #paste #mobile

      Stacking toasts

      cheap

      Newest in front, older ones tuck in behind. A new note arriving mid-animation just slides into place. Errors are read out right away by screen readers, everything else waits its turn, and undo notes stay up longer.

      #toast #notification #aria-live #swipe-dismiss #undo

      Booking email

      [email protected]

      Deposit link

      https://pay.example.com/deposit/jh-0927

      Copy-to-clipboard feedback

      free

      The icon turns into a tick and a small "Copied" tag pops up, then both settle back. If the browser blocks copying, it selects the text and tells you to press Ctrl+C instead.

      #clipboard #icon-swap #aria-live #fallback

      Fri · The Cryptdoors 9pm · all ages

      Optimistic RSVP with honest rollback

      cheap

      The count rolls up the moment you tap, and a small pulse shows the save is in flight. If the server says no, the number rewinds in red and a status line offers a retry. The page never pretends a failed save worked.

      #optimistic-ui #rollback #aria-pressed #counter

      Press depth & tap pulse

      free

      Three kinds of physical feedback without buzzing the phone: a key that pushes down (fast press, slow return), a spring squish, and a ring that spreads from where your finger landed.

      #button #press #haptic-visual #spring #mobile

      Most bands ask for 25–50% up front. We hold it against the final invoice.

      The ? button explains this field.

      Free cancellation up to 14 days out. After that the deposit isn't refundable.

      e.g. "14 days"

      Field help, anchored

      free

      Each ? opens a small note pinned right next to it. Esc or a tap anywhere else closes it. Older browsers still get the note, just placed a little more simply.

      #popover #anchor-positioning #help #progressive-enhancement

      • 8+ characters
      • Upper & lower case
      • A number
      • A symbol

      Password strength meter

      cheap

      Four segments fill and ramp from red toward accent as you satisfy more of the criteria list below. The score is only spoken aloud (politely) when the band actually changes, not on every keystroke.

      #password #validation #strength #aria-live #client-portal

      No bookings yet — this is where they'll land once someone sends an inquiry.

      Empty state, with a next step

      cheap

      An empty list is a dead end unless it tells you what to do next. A small idling mascot, one honest sentence, one primary action — no chart with a single grey bar.

      #empty-state #cms #crm #mascot #next-action

      Character count ring

      free

      A ring that tracks length against the 150-character limit — nothing shows until you're close, then a number appears, then it pulses red at the wall. Same idea as the floating-label counter, scoped to a bio field.

      #counter #ring #svg #bio #cms

      Placeholders & vanish input

      moderate

      Rotating prompts while it's empty; on submit the typed text scatters into pixels on a canvas laid over the input, then clears. The real value is captured before anything visual happens, so nothing is lost with animation off.

      #input #canvas #particles #search #playful

      Auto-grow textarea

      free

      The message box grows with what you type, then stops at a set height and scrolls, so a long message never swallows the page.

      #textarea #field-sizing #progressive-enhancement #inquiry

      Photos & video

      Galleries, players and reveals.

      ᚱraido · 2023
      ᛋsowilo · 2024
      ᚨansuz · 2024
      ᛟothila · 2025
      ᚲkenaz · 2025
      ᛉalgiz · 2026
      1 / 6

      Crate-dig cover flow

      A discography you flick through sideways. Sleeves turn and dim with their distance from centre. The scroller snaps and the buttons step it, and the page itself never scrolls sideways.

      ᚱorigin
      ᛋsignal
      ᚨthe room
      ᛟaftermath
      ᚲreprise
      1 / 5

      Native carousel markers

      Dot navigation with zero JS: ::scroll-marker-group and :target-current generate and track the dots off the snap scroller itself (Chromium 135+). Elsewhere, buttons plus a JS readout step the same track.

      layout · columns

      Masonry with wipe reveal

      gallery

      Mixed tall and wide photos packed without gaps. Each one wipes up from the bottom as it scrolls in, and the photo settles a beat later than its frame.

      tap a picture

      Lightbox with shared-element zoom

      lightboxgallery

      The thumbnail you tap grows into the full view and shrinks back into the same spot. Arrow keys and the buttons move between pictures. Closes on Escape, on a click outside, or with the phone's back button. Browsers without View Transitions just open it instantly.

      poster only · 0 video bytes

      Hover-to-play video poster

      videomusic

      Just a still until someone shows interest. Rest the mouse on it for a moment and the clip plays; move away and it pauses and the poster fades back. On a phone you tap to play and tap to stop. The video file isn't downloaded until that first play.

      KaleidoDeck cover art, graded. flatgraded
      50%

      Before / after slider

      compare

      Drag anywhere on the picture to move the split. Behind it is a real slider, so arrow keys and screen readers work too. Good for colour grading, renovations, remasters. The "flat" side here is the same art with a filter on it, standing in for a raw export.

      1 / 8

      Drag strip with snap + depth

      gallerytouch

      Swipe it on a phone. On desktop, grab it with the mouse and throw it: it keeps rolling, then settles on the nearest card. Cards shrink and dim as they leave the middle, and each photo drifts a little inside its frame. The snapping is the browser's own, so it feels normal on every phone.

      Prism liquid-glass art.prism
      PRRana pattern art.prrana
      Vialysis texture art.vialysis
      0 / 3 decoded

      Blur-up loading

      loadingperf

      Before a photo arrives, its space already shows a soft blur of its own colours, so there is no grey box and no extra download. When the real photo is ready it sharpens into place and the page never jumps. "no placeholder" shows the grey boxes most sites have instead.

      Hero mesh art, dense detail.
      100%

      Pinch-zoom viewer

      touchzoom

      Pinch with two fingers, double-tap to punch in, drag to look around. It can't be dragged off the edge. When it's zoomed out, one finger still scrolls the page, so the viewer never traps your thumb. On desktop: double-click, ctrl + wheel, or the buttons.

      1 / 7

      3D coverflow

      3dmusic

      A discography you flip through like records in a crate. Drag or swipe sideways, use the arrow keys, or click a side cover to bring it forward. The covers are drawn by the page itself (a mirrored pixel sigil per release), so any artist's catalogue drops in.

      frame 01 / 12
      one 135 KB image · 12 frames

      Frame-scrub poster

      videopreview

      Run your mouse across the poster (or drag a thumb) and it flips through twelve moments from the clip, so people can see what's in a video before they press play. All twelve frames are one small image cut from the real Perthro clip, and no video loads at all.

      Hellmouth — cue view
      click a cue to jump · drag the region edges to loop

      Waveform hot cues + regions

      newaudiomusic

      Cue markers and a draggable loop region laid over the RGB waveform, so fans can jump straight to the drop or loop a bar to preview it. Click a cue to jump and play; drag either edge of the shaded region, then turn on "loop region" to hear it repeat.

      KaleidoDeck app art.kaleidodeck
      Hero mesh app art.hero mesh
      Pink lines app art.pink lines
      1 CSS custom property per image · 0/3 decoded

      CSS-only LQIP integer

      newloadingperf

      The blur-up idea, packed even smaller: each picture's soft colour preview is stored as one short number (top right of each card) and unpacked in the browser.

      Scroll-locked wiping row

      set 1 / 4

      Scroll-locked wiping gallery row

      I-1177scrollgallerymusic

      The row sticks under the menu while the page scrolls past it. Each slot wipes to the next picture in turn, left to right, so the row ripples instead of blinking. Scroll back and it rewinds. The set buttons jump the page to each set for keyboard users. With reduced motion there's no pin: the row sits still and the buttons swap sets.

      Audio & music

      Players and visuals for music. Tap play.

      0:00 / 0:00 · 112 bpm
      empty: tap to set · lit: tap to jump

      RGB waveform with hot cues

      audiowaveformcue

      Colour shows what's playing — bass, mids, highs — the Rekordbox convention. Click or drag to seek, arrow keys to jump, space to play. Tap an empty pad to drop a hot cue at the playhead; tap a lit pad to jump straight there.

      Prism cover art
      tap the cover

      Circular spectrum ring

      spectrumcover

      A ring of real frequency bars read live off the music: lows at the bottom, highs at the top. The ring turns slowly while it plays.

      idle

      Bar spectrum with peak hold

      spectrum

      A classic EQ bar display, straight off an AnalyserNode — each bar's loudest recent peak hangs for a moment, then drifts back down, the way a real meter does. Tap to play.

      tap to play

      Beat-pulsing cover art

      cover

      The cover breathes with the kick — a real onset detector watches the bass band and fires a snap pulse each time it finds a hit, not a fixed metronome guess. Reduced motion swaps the pulse for a plain beat counter.

      tap to play

      Kick-reactive background flash

      cover

      Same onset detector, aimed at the whole frame this time — a brief flash on every kick, capped well short of full brightness and hard-limited to 3 flashes a second no matter what. Reduced motion turns the flash into a static level bar.

      tap to play

      Vinyl platter — spin & scratch

      audiovinyltouch

      Tap the label to play, then grab the platter and drag — it scratches the loop for real, pitched to how fast you throw it, and springs back to normal speed the moment you let go. Arrow keys nudge it for keyboard users.

      3 stems
      low
      mid
      high

      Stem mixer

      audiomixer

      The loop is really split into low, mid and high bands, and each fader really changes that band's volume (not a fake animation), so you can drop the low end out entirely or push the highs to nothing while it plays.

      — —bpm

      BPM tap-tempo readout

      tempo

      Tap along with any song, live or in your head — after a couple of taps it reads out the BPM, averaged over your last few hits so one mistimed tap doesn't throw it off. Tap "preview" to hear a click at the tempo you just tapped.

      Tracklist with mini waveform scrub

      tracklistwaveform

      A real EP list — tap a row to play from that cue point, or tap directly on its little waveform to start partway in. The playing row lights up and its play glyph flips to a pause mark.

      session notes

      Line highlight synced to time

      sync

      Same idea as a karaoke lyric line, pointed at production notes instead — each cue lights up the moment the loop reaches it and the list follows along. Drop in real lyrics and it works the same way.

      example countdown

      00:00:00:00

      Release countdown, ticking on the beat

      countdown

      A days:hours:minutes:seconds countdown to your release date (this one is an example). Preview starts the dot ticking in time with the track, so people feel the tempo of what's dropping before it drops.

      Aftershock

      "Now playing" dock

      audiodock

      A mini player pinned to the bottom of its own tile — scroll the release grid above it and the dock stays put, the way a phone app keeps the transport bar on screen while you browse.

      DECK A
      DECK B
      A 100% · B 0%

      Crossfade dual-deck A/B

      audiomixerdj

      The same loop playing twice — deck B a bar behind and pitched up a touch, like a next track cued in. Drag the crossfader and the two blend with an equal-power curve, so the middle of the fade never dips quiet.

      key · tempo
      — —bpm (est.)
      — —key (est.)

      Live key + tempo detection

      audiotempoanalysis

      Nothing typed in by hand: it listens to the track, reads the tempo off the bass and the key off the notes, live in the browser. Both are estimates and labelled that way.

      Waveform as a share card

      audiowaveformshare

      The same RGB waveform, branded and rendered at real Instagram/Story dimensions, one tap to a PNG on your device. Nothing uploads anywhere — the file never leaves the browser.

      music bed · voiceover

      Sidechain ducking under a voiceover

      audiomixervoiceover

      A "voiceover" bursts in over the loop and the music automatically dips under it and springs back, the classic radio move. The line is the music's volume; the orange marks are the voice.

      See how loud the room is — nothing is ever recorded or sent anywhere, it's read locally and thrown away each frame.

      Mic input level meter

      audiomic

      Opt-in only — nothing is requested until you tap the button below, and denying it is handled gracefully. Good for a busking or live-set page that wants to show the room's real level.

      checking for MIDI…

      MIDI-synced visualizer switching

      audiomidispectrum

      Program-change messages from a MIDI controller or DAW swap which visual is live on stage. No device plugged in? The same four pads below do the exact same switching by hand.

      Booking & shop

      Calendars, carts and confirmations.

      October 2026

      Open Held Booked

      Availability calendar

      moderate

      A month grid with three real states — open, held, booked — and a click-click range select (start, then end) that highlights every night in between. Full keyboard grid navigation: arrow keys move by day/week, Enter picks, month nav has real disabled bounds.

      #calendar #range-select #grid-nav #aria-grid #venue

      Sat · Oct 17
      Guests (max 150)
      12

      Date + guest-count stepper

      cheap

      A compact "who and when": prev/next day arrows (disabled at the demo window's edges) plus a guest stepper that clamps at capacity, warns near the top, long-press-repeats, and has one-tap presets for the common party sizes.

      #stepper #long-press #clamp #booking #mobile

      Tasting times, Sat Oct 17

      Time-slot picker

      cheap

      A horizontally scrolling, snap-to strip of time chips. Full ones are struck through and disabled, near-full ones carry a small "2 left" flag. Arrow-key roving tabindex moves between slots without leaving the row.

      #listbox #scroll-snap #roving-tabindex #booking

      Package comparison cards

      cheap

      Three packages, features first, "Request a quote" by default — several clients keep pricing private until a conversation happens. One switch reveals real numbers with a blur-to-clear focus pull, no layout jump.

      #pricing #reveal #switch #private-pricing

      Add to the booking
      Selected 0 items · $0

      Add-on checklist with running summary

      cheap

      Checkboxes for extras (PA, string lights, extra tables, late checkout) that keep a live running total below the list — the number bumps on change and the count is announced without shouting every keystroke.

      #checklist #running-total #aria-live #rental

      Cart drawer

      moderate

      The cart slides in from the right edge and the page dims behind it. Esc or a tap outside closes it, and selecting text inside never slams it shut by accident.

      #drawer #focus-trap #drag-guard #cart

      Shure SM58 mic
      1
      6 in stock

      Quantity stepper with stock limit

      cheap

      Hard-clamped to real stock. The stock line turns amber with two left, the plus button disables at the ceiling instead of silently doing nothing, and a shake + status announcement tells you why.

      #stepper #stock-limit #shake #rental

      Total$2,500
      Due today$750
      Due Sep 20$1,750

      Deposit vs full-payment toggle

      cheap

      A two-way segmented control that rewrites the receipt below it: due-today amount, and a due-before-the-event line that disappears entirely when you pay in full instead of just zeroing out.

      #segmented-control #receipt #deposit #booking

      Booking confirmed

      Juniper Hollow

      Sat, Oct 17 2026 · 4:00 PM The Long Hall · 42 guests
      JH–48291

      Confirmation ticket

      cheap

      A paper-ticket look — punch-hole notches, a dashed tear line, a reference code — that reads right on screen and holds up printed. "Add to calendar" swaps to a real confirmed state instead of just toggling color.

      #ticket #print #confirmation #receipt

      Sold out

      Winter Drop Hoodie · M

      You're on the list — #4

      Waitlist / notify-me

      cheap

      Sold-out state that doesn't dead-end: tap through to an inline email capture, get an optimistic "you're #4" with an honest Undo instead of a fake spinner. Reduced motion swaps states instantly, no tick draw.

      #waitlist #optimistic #undo #merch

      Demo card form — no payment is taken. Not connected to Stripe.

      Demo complete — no charge was made.

      Card entry form (Payment Element pattern)

      moderate

      Card entry that spaces the number as you type, spots the card brand from the first digits, catches typos before you press pay, and shows errors right where they happen. Demo only: nothing is charged, sent, or stored.

      #payment #luhn #brand-detect #demo-only #checkout

      Tables you can hold
      5:00

      Real-time seat hold + countdown

      moderate

      A held table gets a five-minute countdown ring, and quietly reopens on its own if the hold runs out (or when you let it go).

      #countdown #hold #local-only #venue

      Town
        State
        ZIP

        Address entry with local autocomplete

        cheap

        Start typing a town and pick it from the list: town, state and ZIP all fill in together.

        #combobox #autocomplete #no-network #address

        Booking confirmed

        Juniper Hollow

        Sat, Oct 17 2026 · 4:00 PM The Long Hall · 42 guests
        SC-PASS-8841

        Wallet-style confirmation pass

        moderate

        A pass-shaped ticket with a real Code 39 barcode encoding the reference number, drawn on canvas by a tiny inline encoder — no library, no server. Download composites the whole pass to a PNG.

        #wallet-pass #barcode #canvas #download

        Backgrounds

        Atmosphere behind everything else.

        CRT scanlines + vignette

        Hairline scan rows from a repeating-linear-gradient, blended with overlay, plus a soft edge vignette and a once-in-a-while flicker. Zero JS.

        • css-only
        • repeating-gradient
        • vignette

        Film grain

        A static feTurbulence texture whose position steps between six offsets, so the same noise reads as flickering grain. One compositor layer, no canvas.

        • css-only
        • svg turbulence
        • steps()

        Slow aurora gradient mesh

        Three large blurred radial blobs in teal/violet/cyan, each on its own drift-and-scale loop, blended with screen so the overlaps glow rather than muddy.

        • css-only
        • blur
        • mix-blend-mode

        Starfield with parallax depth

        Three box-shadow star fields (far/mid/near), each translated by a different factor of the pointer offset, plus a slow ambient drift when nothing's touching it.

        • css-only
        • box-shadow stars
        • pointer
        • touch drag

        Ember / dust particles

        A small canvas particle field (capped at 60), drifting up with a light horizontal sway, additive glow in the accent palette. Pauses the moment the tile scrolls off.

        • canvas
        • capped count
        • additive

        Fog layers drifting

        Three low, wide, heavily blurred bands drift left/right at staggered speeds near the bottom of the stage, like ground fog rolling past.

        • css-only
        • blur
        • radial-gradient

        Grid-floor horizon

        A repeating grid tilted in 3D with perspective, its background-position looping by exactly one cell so the scroll reads as endless. A glowing horizon line and a sun disc sit above it.

        • css-only
        • perspective
        • bg-position loop
        Secret Character mark, revealed by an ink splat

        Ink-splat reveal

        An organic blob (a turbulence-distorted circle) spreads open in a solid slab to reveal a logo mark sitting behind it, like ink soaking through paper. Replays on demand.

        • svg mask
        • feTurbulence
        • logo

        Noise-dithered dark gradient

        A near-black gradient banding on cheap displays gets a ~5% blue-noise overlay blended with overlay mode, which breaks the bands up without visibly greying the background. Static — no animation, just a toggle to compare.

        • svg turbulence
        • static
        • anti-banding

        Pixel rain, house palette

        A digital-rain canvas using Elder Futhark glyphs instead of katakana, falling in the site's own cyan/violet/red rather than Matrix green. Capped columns, paused off-screen.

        • canvas
        • capped columns
        • brand palette

        CRT curvature + chromatic aberration

        A tiny fragment shader warps a fully procedural test pattern through a barrel-distortion UV remap, then samples red/green/blue at slightly different radii so colour visibly separates near the edges. No texture upload, no image. Falls back to a flat CSS scanline + vignette slab with zero WebGL.

        • webgl
        • fragment shader
        • chromatic aberration

        WebGL plasma / fluid shader background

        A classic sum-of-sines plasma field rendered in a single fragment shader, resolution capped and devicePixelRatio clamped so the GPU cost stays bounded. Colour ramp is three uniforms read straight off --accent-1/2/3. CSS gradient fallback, no image, when WebGL isn't there.

        • webgl
        • fragment shader
        • house palette

        CSS Paint Worklet organic gradient

        registerPaint() draws an animated blob-mesh gradient straight into background-image, driven by one @property-registered <number> custom property the browser itself interpolates and repaints on. Falls back to a static gradient (same family as the aurora tile at rest) where the Paint API isn't there (Firefox, some WebViews).

        • css-only
        • houdini paint api
        • @property

        canvas loop · no video file, always silent

        Muted ambient video loop

        Stands in for the Stripe/Apple-style hero video loop without downloading or generating any actual footage: a plain canvas 2D loop, phase-locked to a fixed period so it's seamless, labelled honestly as a canvas loop rather than passed off as real video. Real footage (studio B-roll, waveform renders) can swap in later behind the same badge-and-pause contract.

        • canvas
        • seamless loop
        • no video file

        Snow / ash drift

        A variant of the pixel-rain engine: soft round flakes instead of falling glyphs, gentle rotation, a real terminal-velocity fall, and an occasional horizontal gust pulse across a random subset of particles. Three depth layers (far/mid/near) vary size and speed.

        • canvas
        • capped particles
        • wind + depth

        Dot / grid / topography backgrounds

        Ambient

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

        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

        Building blocks

        Small pieces that make a page feel finished.

        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

        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.

        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.

        Skeleton → content morph

        Components

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

        Slice / shutter image reveal

        Components

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

        Infinite image rail

        Components

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

        Logo marquee

        Components in the wild → Brutalist

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

        Signal beam between nodes

        Components

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

        Toys & physics

        Things to throw around.

        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.

        Want any of these on yours?

        Every effect here gets rebuilt around your identity — your palette, your type, your world. Star the ones you like, then send the list.

        Browse the theme gallery →