Component library

Motion & interaction

Hand-written scroll and hover polish.

Reveal on Scroll

Fades and lifts content in the first time it enters the viewport.

Pro
Scroll this card out of view and back in: it fades, blurs, and lifts in on re-entry.

Logo Wall

A trusted-by grid with a circular wipe and a cursor-tracked photo spotlight.

Pro
Northline
Vasco Freight
Ridewell
Portlane
Trackwise
Solvera
Haloport
Fieldset
Ironvale
Marbletide
Driftline
Cursoria
Rustworks
Avelo
Anchorpoint
Mistlake
Fernbyte
Wayfare Transit
Duskrefine
Kindleworks
Northbound

Marquee

An infinitely looping horizontal scroller.

Pro
ReactTypeScriptTailwindFramer MotionNext.jsReactTypeScriptTailwindFramer MotionNext.js

Parallax

A hook and wrapper for scroll-linked layer depth.

Pro

Scroll to see the ridgelines drift

far ridge · 0.2×
mid ridge · 0.5×
near ridge · 1×

Each ridge reads the same scroll progress; only the multiplier changes.

Card Stack Scroll

Sticky cards that shrink and peek out behind each other as you scroll.

Pro

Scroll down to see the card stack

Field notes01

Field notes

Research · 12 shots

Wayfinding system02

Wayfinding system

Signage · 8 shots

Night market03

Night market

Street · 21 shots

Coastal survey04

Coastal survey

Landscape · 15 shots

Studio archive05

Studio archive

Product · 9 shots

Spotlight Card

A card with a radial glow that follows the cursor.

Pro

Move your cursor here

The glow and border follow the pointer, and the card tilts in 3D using spring-smoothed motion values.

Magnetic Button

A button that pulls toward the cursor, then snaps back.

Pro

Tooltip

A hover and focus tooltip that springs in and flips near an edge.

Pro

Infinite Moving Cards

Two pause-on-hover rows of testimonial cards scrolling opposite ways.

Pro

Cut our build time in half.

Priya K.

The nicest docs I've used all year.

Sam O.

Shipped our redesign in a week.

Wei T.

Support that actually replies.

Ana M.

Cut our build time in half.

Priya K.

The nicest docs I've used all year.

Sam O.

Shipped our redesign in a week.

Wei T.

Support that actually replies.

Ana M.

Cut our build time in half.

Priya K.

The nicest docs I've used all year.

Sam O.

Shipped our redesign in a week.

Wei T.

Support that actually replies.

Ana M.

Cut our build time in half.

Priya K.

The nicest docs I've used all year.

Sam O.

Shipped our redesign in a week.

Wei T.

Support that actually replies.

Ana M.

Text Generate Effect

Words sharpen from blur to focus one at a time on scroll.

Pro

Wordsappearoneatatime,sharpeningintofocusastheyarrive.

Resource Scheduler

A drag-and-resize scheduling calendar with day, week, and month views.

Pro