▍ Motion Lab — Tide & Grain
A working repository of motion.
Tide & Grain is our signature system — ocean cadence, photographic grain, the human coral thread running through the machine. Seven signature moves, plus three open buckets we keep adding to.
Signature — Tide & Grain
10 demos
Signature
The Coral Thread
A single coral SVG line draws itself on scroll and travels between sections — and across page changes via View Transitions.
/lab#coral-thread
Scroll past — the thread draws itself. The page-wide persistent thread on the right edge morphs across routes via View Transitions.
Signature
Tideline reveal
Seafoam → teal wash recedes to reveal staggered children. Water-like easing, used on major sections.
/lab#tideline-reveal
Tideline
A wash recedes; the line arrives.
Children rise as the seafoam → teal gradient pulls upward. Staggered, water-eased, used on major sections.
Signature
Develop
Images enter like photographs developing: grain + duotone, resolving to full color and sharpness on scroll.
/lab#develop
Scroll the image into and out of view to see it develop and undevelop.
Signature
Ink-bleed headings
Display headings wipe in behind an organic ink-bleed mask powered by SVG feTurbulence + displacement.
/lab#ink-bleed
Ink-bleed
SVG feTurbulence + feDisplacementMap become the mask that wipes the heading in.
Signature
Living mesh
A slow, breathing gradient mesh — seafoam, teal, coral, lavender — with faint mouse parallax.
/lab#living-mesh
Move your cursor — the mesh tilts.
Signature
Tactile micro-interactions
Magnetic buttons, a paper-press active state, and a faint coral cursor-trail on the hero only.
/lab#tactile
Signature
Tide-wipe page transitions
Route changes sweep a seafoam wash + cross-dissolve while the Coral Thread persists.
/lab#tide-wipe
Click any nav link. Route changes sweep a seafoam wash + cross-dissolve via the View Transitions API — and the persistent Coral Thread on the right morphs continuously rather than fading.
Browsers without VT support cross-fade gracefully. Reduced-motion: instant.
Signature
Signal Glitch
A brief, tasteful RGB channel-split + scanline flicker — a cyber wink inside the organic. On select section enters and when the Coral Thread jumps.
/lab#signal-glitch
Signal
A cyber wink.
RGB channel-split + a quick scanline. Plays once per enter, replays here for demo. Off under prefers-reduced-motion.
Signature
Living Vine
An animated SVG vine in seafoam and moss/sage that draws itself, with small leaves that unfurl and a gentle scroll-parallax sway.
/lab#living-vine
Living
Seafoam → sage → moss.
The vine draws itself, leaves unfurl, the whole thing sways with scroll. Off under reduced-motion.
Signature
Photo-real growth
Photographic ivy and branching coral, masked to grow on scroll. Real leaves, real polyps — the natural world wrapping the machine.
/lab#photo-growth
Ivy
Real leaves, masked growth.
Coral
Branching, polyp-real.
Scroll the page to see both grow from root to tip.
Cinematic
1 demo — add more
Cinematic
Pinned scrub
GSAP ScrollTrigger pins the stage; scroll position scrubs a coral arc from edge to edge.
/lab#pinned-scrub
Experimental
1 demo — add more
Experimental
Ink in water resolves into UI
Layered blobs settle from chaos into a legible interface — a metaphor for what we do.
/lab#ink-resolve
Refined
1 demo — add more
Refined
Soft physics & grain
Framer Motion spring on press, subtle grain, micro-interactions that respect attention.
/lab#soft-physics
Press + hover with soft physics.
Cursor attraction, damped return.
Per-letter stagger on view.
▍ Want this energy in your build?