# Motion

> Premium interactive web sections — physics-based, cursor-responsive, impossible to replicate. Each section ships as a detailed Markdown specification file, unlocked by a plan, that developers can use to recreate it exactly.

## What Motion is

Motion is a subscription library of premium animated web sections. Unlike template libraries, every section is a unique, hand-crafted, physics-based interactive scene. Sections respond to cursor movement using spring physics (not CSS transitions), feature wave propagation, click impulses, and other interactive effects that are intentionally hard to replicate.

Each section ships as a detailed `.md` specification file containing the full implementation: HTML structure, CSS, JavaScript with raw `requestAnimationFrame` physics, and entrance animations using GSAP. Plans unlock the complete creative asset for use in any project — including client and commercial work.

## Quality standard

Every section must pass this test: "Would I stop scrolling and try to figure out how this was made?"

Sections that look like generic AI output (particles, dot grids, gradient text, counting numbers) do not ship.

## Pricing

- Subscription library — every section unlocks under one plan; sections are not sold individually
- Monthly: $9/mo to unlock up to 3 new sections per billing month — unlocks are permanent while subscribed
- Lifetime: $99 once — unlimited access to every current and future section (founding rate; rises to $149 after June 30, 2026)
- Studio: $249 once — everything in Lifetime, licensed for a team of up to 10
- Every plan covers commercial and client work; Lifetime and Studio carry a 14-day money-back guarantee
- Cancel anytime; Lifetime and Studio never expire

## Tech stack used in sections

- Vanilla JavaScript (no framework dependency for the section itself)
- GSAP for entrance animations and ScrollTrigger
- Raw `requestAnimationFrame` for physics simulations
- Spring constants and damping (not CSS transitions)
- Canvas 2D for mesh and particle work

## Pages

- [Home](/) — value proposition and the full browsable collection of sections
- [Pricing](/pricing) — plans: $9/mo (3 permanent unlocks/month) or $99 lifetime
- [Sign in](/auth) — account access for plans and unlocks

## Available sections

- [Membrane](/gallery/membrane) — A living surface with spring-physics mesh, wave propagation, cursor deformation, and click impulse.
- [Shape Trail](/gallery/shape-trail) — Geometric shapes bloom behind cursor movement; circles, diamonds, stars, hexagons in earth tones with physics drift.
- [Liquid Type](/gallery/liquid-type) — Variable-weight typography that inflates and glows as the cursor passes; spring physics, click shockwaves, idle breathing wave.
- [Momentum Slider](/gallery/momentum-slider) — Infinite 3D perspective carousel with spring-physics momentum, drag interaction, and cinematic product modals.
- [Drag Gallery](/gallery/drag-gallery) — Momentum-driven infinite product carousel with velocity-based skew, parallax, and spring-snap physics.
- [Portfolio Photographer](/gallery/portfolio-photographer) — Endless portfolio reel where strip thumbnails break formation into chaotic, scaled compositions in the center stage and snap back.
- [Cardwall](/gallery/cardwall) — A dense stack of fourteen credit cards over a serif title; each card springs toward the cursor with Gaussian-falloff lift, live tilt, and a specular highlight that intensifies as it leaves the surface.
- [Cinema Reel](/gallery/cinema-reel) — A vertical film-portfolio slider with snap-physics. Drag, fling, or wheel past a tension threshold to advance — anything short and the slide springs back. Outgoing content leads the image with parallax; incoming content stays blurred until the frame is half in. Custom SCROLL cursor with grab-hand drag state. FREE SAMPLE — sign in and copy the full spec, no plan needed.
- [Marathon](/gallery/marathon) — A real 3D iPhone tumbles through three running-app slides; back-at-bottom, face-on at centre, back-at-top. At each apex the screen content erupts past the bezel — GPS route paints across the section, heart-rate becomes the horizon, weekly bars climb out of the device. Drag, wheel, fling. Loops both directions on spring physics.
- [Folio](/gallery/folio) — A scroll-jacked two-column portfolio reel for agencies and creative studios. A typographic title list (clipped above the 50vh midline) and a portrait image-and-video strip (centred at 50vh) ride a single fractional position. Active title sits at the top of the visible list with its credits inline; active media plays a slow Ken-Burns drift while neighbours dim, scale down, and pause. Continuous variable-font weight, no popping.
- [Crema](/gallery/crema) — A coffee-shop app hero. Three phones flip in fixed positions on a staggered loop, each swapping its in-screen UI mid-flip between an order builder, a loyalty stars ring, and a social-proof feed. Floating coffee props (espresso cup, croissant, donut, latte, beans) drift in slow orbits between the phones. Title cascades letter-by-letter in Bagel Fat One — blur, scale, y-translate — and lands inside a second. Built for coffee brands selling app downloads.
- [Hardback](/gallery/hardback) — A curated 3D bookshelf that opens. Twelve hand-modelled hardcover business books fly in from off-screen, settle onto a shelf with neighbours spine-forward and the centred book pivoting cover-forward via continuous coverness interpolation (no snap). Drag, scroll, arrow-key, or click any spine to centre it; click the centre to OPEN — every other book falls out of frame in a stagger that radiates from your selection, the chosen book glides forward, tilts back, and its front cover hinges open ~144° around the spine to reveal the inside-cover frontispiece and the first inside page (printed with the book's excerpt). A buy panel slides in from the right with synopsis, retailer prices, and a CTA. All books — colours, titles, retailers, dimensions — live in a single editable data file; cover art swaps in by URL.
- [Boutique](/gallery/boutique) — A spherical lookbook shop. Seventy-two model cutouts (eighteen unique looks, distributed so duplicates never sit next to each other) curve across a navigable canvas with a soft fish-eye lens — cards near the viewport centre breathe out, edges shrink and pull in. Drag to pan, scroll to zoom; the sphere zooms with the grid. Click a model and the camera dollies forward until the chosen look fills the screen at 75 vh while neighbours stay visible; a side panel slides in with a big featured garment image, a three-thumb slider (jacket / jeans / shoes), and CTAs to add individual pieces or buy the entire look. Click any other model mid-view to cross-fade across without closing. ESC, the close button, or drag-to-pan all drop the selection.
- [Aster](/gallery/aster) — A cinematic subscribe hero, named after the star-flower it evokes. Every title letter rides an invisible 4-face dice; on entrance the cube rolls forward in three back-to-back 90° tilts, dropping the same letter in from above three times in a row, with a tight stagger across the row. The letter itself never spins — the dice rotates beneath it. Beneath the title: a glassmorphism subscribe pill with backdrop-blur, a cursor-tracked radial sheen, focus-within glow, and a submit that morphs idle → loading → success while the input crossfades to a confirmation. Cosmic flower-meadow video runs underneath.
- [Cipher](/gallery/cipher) — A scroll-driven ASCII trading terminal. Three full mobile screens — BTC spot orderbook with candlesticks and depth ladder, gold options chain with greeks and hockey-stick payoff, portfolio dashboard with allocation bars, holdings, six-month sparkline and risk metrics — built cell-by-cell out of monospace shading glyphs and box-drawing characters. Between screens, every cell becomes a particle that flies along the wind axis, burns into a scorch glyph mid-flight, and resolves into its destination character; the canvas flips palette from light to dark and back as the cloud crosses; the text panel slides to the opposite side. Deterministic and scroll-reversible — scrub up and the disintegration reverses exactly.
- [Atelier](/gallery/atelier) — A designer's portfolio dressed as a macOS desktop. Ten draggable project files scatter across a softly-blurred warm wallpaper; click any one to open a generous editorial modal with brief + 3×3 case-study gallery. A glass dock at the bottom magnifies on hover, carries app icons that open Notes, Photos, CV (Apple Notes-style), short quip modals for Figma / Claude / ChatGPT, an Instagram link, mailto, and a Trash one-liner. Three "do not open" folders quietly redirect. GSAP entrance, raw rAF dock magnification, pointer-event drag with direct DOM transform.
- [Desk 95](/gallery/desk-95) — A Windows-95-styled portfolio remix. Boots through a BIOS sequence into a teal #008080 desktop with chunky 3-D bezels, MS-Sans-Serif-style typography, and the unmistakable dotted-outline window drag of Win 3.1/95 — only a 1-px-dashed marquee tracks the cursor; the window snaps to that position on release. Ten draggable project files (NOIR_LEATHER.EXE, KESTREL_FW.EXE…) open into a Win95-chrome project viewer with hero photo + Challenge/Direction/Outcome brief. A system column on the right holds My Computer, Recycle Bin, Notepad (working textarea with the designer's CV), Calculator (real standard-mode calc) and Inbox. Bottom taskbar carries a Start button with multicoloured flag, a click-through Start menu (Programs / Documents / Settings / Find / Help / Run / Shut Down), one button per open window with pressed/raised states, and a live clock. Z-order, focus, and minimise all match the original. Mobile gracefully falls back to a static welcome tile under 1024 px.
- [Spring](/gallery/spring) — A bright subscribe hero set over a cherry-blossom meadow video. Every title letter rides an invisible 4-face dice that rolls forward in two back-to-back 90° tilts on a soft `back.out` overshoot, so each character blooms into place from above. A small eyebrow chip above the title ("Dispatch №01 · Spring") sets a magazine-newsletter tone. Beneath the title: a glassmorphism subscribe pill with cursor-tracked sheen, focus-within glow, and a submit that morphs idle → loading → success with a blossom-pink halo. The video runs at native colour — no overlays — so the meadow palette stays bright.
- [Moments](/gallery/moments) — A viewport-filling photography wall where a cursor-following gravity void parts the cells to reveal a featured photo. The void is comfortable: it holds still while the cursor stays inside, and only slides on a smooth lerp when the cursor wanders outside — so you drift through the whole wall without fighting the focal point. Cells displace radially with quadratic falloff and a soft fade at the center, leaving a clean circular clearing; the closest cell becomes the featured moment with title, category and field-note caption. Click and the void dilates — the photo grows, a glass detail panel slides in with the full description and an order CTA, and the wall reshapes around it.
- [Rotunda](/gallery/rotunda) — A dark-stage 3D wheel of eighteen portfolio cards, vertically centred so the curve sits in the precise middle of the canvas. Drag, fling, or trackpad-swipe and the wheel spins on its vertical axis with spring-physics momentum; the front-most card lifts toward the camera, pushes forward, and gets a warm halo, while its neighbours scale away (no dimming — cards stay in full daylight colour against the dark room). A preview panel upper-left mirrors the active card with its name and tagline, crossfading as the wheel turns. Click the front card and it FLIPs (power4.inOut) from its 3D position into an edge-to-edge immersive view: surrounding cards disperse outward and fade, the upper-right brand chrome (Motion · Gallery · portrait) restyles against a translucent dark gradient on the photo, a right-aligned editorial panel slides in (eyebrow, uppercase title, two-up tags, multi-line description, mono caption with date + coords), and a left-side vertical 'Adjacent index' fades in with three low-opacity framed previews of other works carrying crisp monospace metadata (coords / camera / date) above a minimal text-only ← Back arrow. Closing reverses with the same easing and a careful handoff — the wheel cards drift back from the centre before the overlay fades, so the morph is glitch-free.
- [Revolver](/gallery/revolver) — Six two-sided custom-finish debit cards (matte black, porcelain white, cobalt, acid lime, polished titanium, sunset pink — Motion-branded card renders for the faces) somersault up an invisible, tilted vertical 3D wheel. Each card enters from the bottom/front close to the camera showing its BACK (name, number, tap-to-pay — colour-matched to its face), tumbles forward through a near-invisible edge-on sliver into a face-on centre-stage hero pose — the design face, with cursor-tracked tilt + a moving specular sheen — then keeps rotating the same direction to show its back again as it recedes, smaller, dimmer, veiled. ~360° of continuous rotation per visible pass, never reversing. One position float drives all six cards through shared Catmull-Rom station splines on an expo-out glide: instant launch, long settle, zero bounce. Wheel, drag, clamped flings, tap-to-stage, pips, arrow keys, patient auto-advance.
- [Rooster Rush](/gallery/rooster-rush) — A full-bleed hero that doubles as a real 3D platformer. Editorial title floats over a sunrise sky while a chunky 3D rooster (Three.js, baked PBR + soft shadows) runs, jumps, grows on mushroom power-ups, and stomps walking enemies across a procedurally-generated endless world of ground tiles, gaps, towers, and floating platforms. Spring-physics movement with coyote time, jump buffer, and variable jump height. Score and best-of-session counter persist to sessionStorage. Keyboard + on-screen touch controls.
- [Overworld](/gallery/overworld) — A playable top-down pixel portfolio you walk through instead of scroll. Steer a 4-direction character around a single-screen office and garden, passing in front of and behind furniture (per-frame Y-sort depth, axis-separated AABB collision, a pushable office chair). Walk to the laptop, bookshelf, file cabinet, coffee table and door to open Work / Read / CV modals and small dialogues; step through the door for a cross-fade to a garden with a bike, a camera table (photo album), and a playground. One rAF loop drives movement, the 4-frame walk cycle, and collision straight to DOM transforms. WASD/arrows + E on desktop, on-screen D-pad + interact button on touch. Every modal returns the visitor to the exact same spot; all content and object placement live in one editable data file.
- [Riffle](/gallery/riffle) — A scroll-choreographed 3D deck of 22 square cover-art cards that morphs continuously through six formations as you scrub: a wide fanned arch, a collapse into one stacked card, a diagonal cascade receding into depth, a swirling pinwheel ring with a dark centre hole, a chaotic mid-air tumble where cards flip and scatter, and finally a sparse coverflow that settles with a live caption naming the focused track. One hero card threads through all six as the constant the eye tracks. A single scroll-progress value springs every card toward its target pose — blended between the two bracketing formations with a hold-morph-hold remap and a per-card stagger wave — so the deck reads as a living thing and reverses exactly on scroll-up. GSAP ScrollTrigger feeds the progress; raw requestAnimationFrame owns the CSS-3D transforms and a subtle cursor-parallax tilt. Theme-aware near-black cinema stage with vignette and film grain; reduced-motion snaps to the captioned rest state.
- [Aurora](/gallery/aurora) — A single flowing silk-ribbon mesh (one draw call, no textures, no post-processing) twisting and curling across the viewport on the GPU, coloured by a continuous blue → periwinkle → orchid → hot-pink → coral → orange → gold gradient across its width with fine flow-aligned silk fibres, a bright fresnel fold-crease highlight, and soft feathered selvedge edges. A parametric centerline drifts and sways while the cross-section twists and curls; surface normals are computed analytically per-frame so the fibres and crease rake correctly as the ribbon writhes. Every visual parameter — composition, motion, shape and surface — is driven live from a single config object. Premultiplied-alpha output over any background; reduced-motion renders a still frame; the loop pauses off-screen and in hidden tabs; DPR and FPS capped; WebGL fully disposed on unmount.
- [Console](/gallery/console) — A vintage 1990s beige CRT-and-keyboard hero. A chunky amber-phosphor monitor sits over a chiclet keyboard with three colour-accented specials (ENTER blue, SHIFT violet, BACKSPACE orange) and an ESC clear. Click any key on the screen and the cap presses down crisply while the character lands on the CRT; type on your physical keyboard and the matching on-screen cap presses in sync — letters, digits, Space, Enter, Backspace, Shift, Esc are all wired through. Blinking caret, scanlines, screen vignette.
- [Vitrine](/gallery/vitrine) — Images mounted to invisible rails inside a 3D black display cube — every tile feels physically attached to the architecture, riding the structure's faces. The glossy cube is upright and viewed in a wide two-point perspective from slightly above, so its top, front and a deep right face raking to a vanishing point all read — a clear 3D volume SITTING on the floor, grounded by a soft contact shadow + floor reflection — with a warm lit interior room behind the semi-transparent front glass. Light product tiles flow through three lists sharing one belt — a flat wall list clipped at the box's left edge, a front-face list in the face plane, and a right-face list on the other side — so a card crossing a boundary visibly wraps the corner; whichever tile reaches the centre becomes the HERO, marked only by its magazine overlay fading in over the full-bleed render. Past centre it folds onto the right face and sinks into the box, dimming. A belt scalar (pinned ScrollTrigger + slow idle drift, spring-eased) advances each card through wall → stick-on → hero → recede; a black slatted lounge chair sits in the lower-left foreground. Click the hero card to unfold a full-bleed case study. Honours prefers-reduced-motion.
- [Isle](/gallery/isle) — A Dynamic Island in real liquid glass. A glass capsule at the top of a cinematic photo scene springs open into a music player on click — and the displacement map behind its refraction regenerates every frame mid-morph, so the light keeps bending correctly while the spring flies. True lensing, not flat blur: canvas-baked Snell's-law displacement maps drive an SVG feDisplacementMap via backdrop-filter, with rim-only chromatic aberration and a specular rim light that aims at the cursor. Grab and fling a fisheye glass lens that bounces off the viewport walls; drag sliders whose thumbs lift into brighter glass; swap three photographic scenes from a glass dock while the island adapts its content tone to the backdrop luminance; and retune the optics yourself from a glass console — refraction, rim width, frost, dispersion, saturation and rim light as live sliders that re-bend every piece of glass on screen, the panel included. Full effect on every main browser: native SVG refraction on desktop Chromium, a WebGL compositor (same displacement maps, scene + veils + character-exact rasterised type) on Safari, iOS, Firefox and Android.
- [Benchmark](/gallery/benchmark) — An Apple-Keynote performance slide turned into a living section, split roughly 38 / 62 — figure left, claims right. A giant Poppins figure (80%, 5×, 2.4M, 99.9%) each number carries its own static radial gradient — varied hues over one shared structure (a bright origin pushed below the glyphs so no hot dot shows) — clipped to the digits, under a small mono "source" tag. On the right, a vertical column of one-line SaaS claims sits under a focus lens: only size and colour change with distance — only the single centred claim is dark and large, every other claim a flat grey; size still falls off smoothly, with no blur and a constant font weight. The list steps one claim at a time with an expo.inOut snap, dwelling while each claim sits aligned with the figure, then snapping to the next — an endless, snappy auto-cycle; whichever claim owns the centre drives the figure, which rebuilds with a scale + y snap (no blur, expo.out) as the number changes. A wheel notch or touch drag steps it manually and pauses the cycle; after a short idle the auto-cycle resumes — gated to when the cursor is over the section so the page scrolls normally elsewhere. One requestAnimationFrame clock owns the per-row transforms while a GSAP tween owns the stepped position (expo.inOut auto-cycle, front-loaded expo.out on manual scroll). Fixed light palette; a live tuning panel on ?tune=1; reduced-motion holds each claim still while keeping manual stepping.
- [Larry](/gallery/larry) — The Larry O'Brien NBA Finals trophy in real 3D gold: a procedurally-modelled chalice-net funnel and a smooth gold ball at the iconic ~13° lean, PBR reflections off a hand-built studio environment, ACES-filmic tonemapping, a slow turntable that leans toward the cursor. A ghosted serif "LARRY" sits behind it, all thirty franchises scatter across the stage as dim colour+tricode marks, and the two finalists rise at the top with the live best-of-seven score and per-game pips — the series leader emphasised (Knicks lead the Spurs 1–0). GSAP entrance; paused off-screen and in hidden tabs, DPR-capped, full WebGL teardown, reduced-motion still frame; matchup and score live in one editable data file.
- [Formation](/gallery/formation) — A "Selected Works" portfolio wall built on one set of cards and four formations, switched from a header toggle: Flat — an organic, scattered ellipse ring hugging the viewport edges with a clean centre; Tilt — a big horizontal band, every card individually tilted in 3D at varied heights and depths, bleeding off both edges; Ring — a 3D hoop tilted toward the viewer and rolled on the diagonal, front cards big and low cascading to small in the back; Gallery — a large coverflow filmstrip with one flat hero. Switching a toggle springs every card from its current pose to the new formation, so the change reads as one continuous morph rather than a cut. A single rAF loop owns the per-card springs, a cursor-following 3D lean of the whole wall, a scrub offset driven by drag or scroll, a live hover hit-test that lifts whichever card the cursor is over and floats its title, and one "collective" card that blooms open on hover into a rounded tray of avatar circles and a "＋". Each card is a self-contained generated poster from a per-work palette (real photography drops in by URL); click any card and it grows from its exact on-screen rect into a centred detail panel with the brief, Esc or backdrop to close. GSAP owns the staggered entrance bloom and the open/close; reduced-motion snaps to Flat; the loop pauses off-screen and in hidden tabs.
- [Aperture](/gallery/aperture) — A curated editorial scatter of photographs — frames at deliberately varied sizes (some large, some small) separated by airy, uneven negative space, with several deliberately bleeding past the left and right edges — laid out as a hand-placed tile that loops vertically (a single alternating, edge-bleeding column on mobile). It holds its horizontal position — nothing slides sideways; instead the whole view drifts slowly upward on its own, and you can scroll up or down (wheel or drag) on top of that, with the whole tile looping forever. As you scroll, the wall bows GENTLY around a horizontal focal line like a soft lens: scrolling DOWN bends it slightly convex (the centre eases toward you while the top and bottom frames tilt and recede), scrolling UP bends it concave (the rim leans toward you). The curve is driven by scroll velocity and smoothed so it ramps in and relaxes back to flat — it never folds into a hard barrel. On top of the bow, the whole wall balloons a touch larger as you scroll down (gaps widening, outer frames spilling further past the edges) and eases smaller as you scroll up. Click any frame, wherever it sits, and it zooms from its exact rectangle into a contained, ratio-preserving print on the right of an editorial split — it never fills the screen — while on the left, over the theme field, a bold condensed Bebas Neue title and tightly-kerned Geist Mono details (category, location · year, description, and the camera it was shot on: body, lens, focal length, aperture, shutter, ISO) reveal; the close button, a click anywhere, or Escape shrinks it straight back into its exact place in the wall. Opens with a self-running intro: a finite Bebas Neue word-drum ticks through its words on a 3D barrel, then lifts away like a shutter while the whole wall rises from below the viewport into place as one cohesive block. A single requestAnimationFrame loop owns the wall (auto-scroll, velocity-eased curl, looping vertical wrap, cylinder projection, z-sorted click hit-test); GSAP drives only the intro, the entrance rise and the zoom. Never pins the page — it captures the wheel itself. Theme-aware chrome, flat reduced-motion fallback.

- [Isle](/gallery/isle) — A Dynamic Island in real liquid glass. A glass capsule at the top of a cinematic photo scene springs open into a music player on click — and the displacement map behind its refraction regenerates every frame mid-morph, so the light keeps bending correctly while the spring flies. True lensing, not flat blur: canvas-baked Snell's-law displacement maps drive an SVG feDisplacementMap via backdrop-filter, with rim-only chromatic aberration and a specular rim light that aims at the cursor. Grab and fling a fisheye glass lens that bounces off the viewport walls; drag sliders whose thumbs lift into brighter glass; swap three photographic scenes from a glass dock while the island adapts its content tone to the backdrop luminance; and retune the optics yourself from a glass console — refraction, rim width, frost, dispersion, saturation and rim light as live sliders that re-bend every piece of glass on screen, the panel included. Full effect on every main browser: native SVG refraction on desktop Chromium, a WebGL compositor (same displacement maps, scene + veils + character-exact rasterised type) on Safari, iOS, Firefox and Android.
- [Benchmark](/gallery/benchmark) — An Apple-Keynote performance slide turned into a living section, split roughly 38 / 62 — figure left, claims right. A giant Poppins figure (80%, 5×, 2.4M, 99.9%) each number carries its own static radial gradient — varied hues over one shared structure (a bright origin pushed below the glyphs so no hot dot shows) — clipped to the digits, under a small mono "source" tag. On the right, a vertical column of one-line SaaS claims sits under a focus lens: only size and colour change with distance — only the single centred claim is dark and large, every other claim a flat grey; size still falls off smoothly, with no blur and a constant font weight. The list steps one claim at a time with an expo.inOut snap, dwelling while each claim sits aligned with the figure, then snapping to the next — an endless, snappy auto-cycle; whichever claim owns the centre drives the figure, which rebuilds with a scale + y snap (no blur, expo.out) as the number changes. A wheel notch or touch drag steps it manually and pauses the cycle; after a short idle the auto-cycle resumes — gated to when the cursor is over the section so the page scrolls normally elsewhere. One requestAnimationFrame clock owns the per-row transforms while a GSAP tween owns the stepped position (expo.inOut auto-cycle, front-loaded expo.out on manual scroll). Fixed light palette; a live tuning panel on ?tune=1; reduced-motion holds each claim still while keeping manual stepping.
- [Pantheon](/gallery/pantheon) — A full-bleed gallery that revolves through art history. Each master floats at centre inside a circular liquid-glass medallion — a real Snell's-law lens that refracts their masterpiece behind it at the rim — ringed by a gilt laurel wreath, name set large in Playfair with lifespan and movement. The rest of the cast curve away to both sides, smaller and drained to monochrome. Wheel over the stage, drag, tap the chevrons or pips, press the arrow keys — or simply wait — and the ring revolves: the next master glides to centre and blooms back into colour, the laurel transfers to them, the painting behind cross-fades to their masterpiece, and the name re-sets with a soft blurred rise. Nine public-domain icons (David's Napoleon Crossing the Alps, the Mona Lisa, Rubens' Daniel in the Lions' Den, The Starry Night, The Kiss, The Scream, the Night Watch, the Creation of Adam, the Fallen Angel), each shown with the artist's own portrait. One displacement map baked once for the medallion box and shared by every lens via a single SVG filter keeps the optics physically real on Chromium; Safari and Firefox fall back to a frosted rim. Patient auto-advance that pauses on interaction and resumes on idle; theme-aware museum staging (near-black dark, warm white-cube light); honours prefers-reduced-motion. $289
- [Counterpoint](/gallery/counterpoint) — A counter-scrolling portfolio hero where two layers pass through each other. A vertical roll of project titles slides downward in the background while a stack of overlapping, tilted thumbnails — scattered like prints — drifts upward in the foreground. Both ride a single continuous position off one project list, so the centred title and the front thumbnail can never drift apart. Each card's tilt follows a cosine of its distance from the front: the lead card rests tilted, its neighbours tilt the other way into an alternating fan, and every card sweeps through a flat 0° at the half-step — the exact moment the z-order reshuffles so the next project lands on top. Advance is one project per wheel notch or swipe with a back-eased bounce settle; left idle it auto-drifts and yields the instant you scroll. Click the front thumbnail and it FLIPs from its on-screen rect into an editorial detail panel with the brief and a CTA; Esc or the backdrop reverses it. A GSAP tween owns the stepped position, one rAF clock owns every per-frame transform; the loop pauses off-screen and honours reduced motion, with a ?tune=1 panel exposing every curve. $269
- [Fluid Gallery](/gallery/fluid-gallery) — A dream-like image collection as a WebGL switcher. Ten cinematic, emotional frames — prismatic eye close-ups, long-exposure silhouettes and reaching hands — grouped into three moods (Light — prism and macro, Drift — motion and haze, Reach — intimate and backlit), chosen to glow in both light and dark mode (darker frames get a per-photo exposure lift), each with a one-line note and a technique · year. A clean canvas is washed with soft ambient window-light shadows (a soft shadow up top, shadowed edges, bright vertical streaks between) — the shadow lives in the background, not on the images, which float on it. Every card is a plane in a single WebGL scene — an orthographic pixel camera with a rounded-rect SDF mask, so there is no DOM per card (the canvas paints them and JS hit-tests the pointer). It opens with a clean entrance (images scale up, un-blur and rise, staggered as each decodes — no placeholder flash), then SCROLL is captured (the page never moves on) and cycles the gallery on a diagonal: the next image waits small and rotated in the bottom-right corner, glides to centre stage to become the main, then exits to the top-left corner as the one after it rises in — looping forever (modular wrap) in both directions with no dead-end. Hover a card and a liquid blob ripples and refracts just under the cursor, in the hovered corner — the only fluid left in the scene; click and the image swings open from its exact rect to full-bleed with a 3D perspective tilt (rotating in tilted, then flattening face-on), its rounded corners melting to a sharp edge — and only once it lands does its plate fade in (mood, title, note, technique · year). Click anywhere or Esc to swing it back (mirrored). Three.js owns the scene and image textures (streamed through a small concurrency pool so the open never janks); GSAP tweens each card's morph and the entrance; one rAF clock drives the shader time, the scroll switch, hover easing and the background drift. Off-screen safe, DPR-capped, fully disposed on unmount. $299
- [Lucid](/gallery/lucid) — A browser-camera focus reveal you clear with your hands. The live webcam fills the frame as a frosted blue-glass editorial poster — duotone, halftone-textured, grained, with a slow refractive wobble and a soft vignette. MediaPipe hand-tracking watches for both hands; when it sees them, a rounded focus window springs open in the air between them — inside it the camera is razor-sharp and untouched, outside stays abstract glass. The window follows the hands, resizes with the distance between them, and a cool rim of light traces its boundary, so it reads as physically wiping the blur away; move your hands to pan it, spread them to zoom, drop a hand or fling them too far apart and it dissolves back to glass. Raw WebGL2 four-pass video pipeline (cover-fit + selfie mirror, a half-res separable Gaussian, then a composite that mixes the sharp feed against the stylized one through a rounded-rect SDF mask), one requestAnimationFrame clock spring-tracking the window and writing the corner handles, crosshair and FOCUS / CLARITY chrome straight to transforms. The feed never leaves the browser — nothing is recorded or uploaded; graceful permission / loading / denied states, degrades to a static glass poster where a camera or hand tracking isn't available, pauses off-screen, honours reduced motion, and a ?tune=1 panel exposes every curve. $299
- [Nova](/gallery/nova) — A cinematic mountain slider: ten of the world's great peaks (the Matterhorn, Ama Dablam, Fuji, Torres del Paine, Seceda, Kirkjufell, Aoraki, Tre Cime, the Lofoten spires, Huayna Picchu). The active summit is the full-bleed background; the rest ride a continuous conveyor of tall cards on the right (region label on top, name on the bottom). Pick a card — or use the arrows, the arrow keys, or a horizontal drag — and its photo grows out of the card's exact rect to swallow the whole screen as the new background (a real pixel-based FLIP expand on easeInOutCubic that matches the background's zoom so the hand-off never pops), while the conveyor slides one step in lockstep — a card glides off the left, a fresh one enters from the right. The photo holds at 1.08× with lerped cursor parallax; the cards spring-tilt toward the cursor on hover; a progress line fills to the current position; the big counter ticks on each commit. Patient auto-advance until you touch it. GSAP drives only the one-shot entrance; every other frame is raw requestAnimationFrame. Theme-aware, keyboard-navigable, drag-flingable, honours reduced motion. $249
- [Alive](/gallery/alive) — A full-bleed agency manifesto (a heavy serif "WE CREATE / BRANDS THAT / FEEL ALIVE" holding dead-centre and perfectly still over a clean white stage, framed by a single minimal { Menu } / wordmark / { Work° } top bar) that the cursor buries in photography. Every project frame rests 100% DOWN — fully below and hidden; the moment the mouse moves, frames RISE UP into place along the pointer's path, dwell at the top of their arc, then SINK BACK DOWN and dissolve — a continuous surface-and-submerge collage that buries the headline wherever you point. Emission is distance-thresholded along the path (a slow drift lifts a sparse few, a fast sweep floods the centre); each frame is a uniform 2:3 portrait at one fixed size, with a small scattered tilt, the newest always stacking on top. Seven curated product & beauty campaign stills cycle as you sweep. The whole up-then-down arc runs on a smootherstep life envelope, eased at both turns so nothing pops; a recycled DOM pool keeps it crisp with true rounded corners and cast shadows. One raw-rAF clock owns every frame's motion; GSAP drives only the letter-by-letter entrance. Theme-aware (white ↔ near-black), pauses off-screen and in hidden tabs, honours prefers-reduced-motion with a composed still collage. $269
- [Pixels](/gallery/pixels) — A full-viewport "what we offer" values scroller staged on faint graph paper, built on arcade pixel-art and shipping with Motion's own brand values as the demo copy. One big procedurally-generated 8-bit sprite (a ghost, a robot, a heart, a star — each drawn from disc/rect/heart-curve/star-polygon primitives and auto-outlined by an 8-neighbour keyline pass, no external assets) sits centred on the grid, framed by a 5-link top nav and a 4-link footer, each evenly divided. Scroll and ONE full-width line defines the whole change: it rises from just below the description, up through the icon, to just above the heading, and everything it passes flips from offering A to B. The sprite replaces itself ROW BY ROW across the line (glitch-torn right at it), and the heading and description are CUT by the same line — the old offering keeps the slice above it, the new one takes the slice below — so nothing overlaps the line and the copy moves in lockstep with it, the number, title and copy never desyncing. It reverses exactly on scroll-up. It is driven purely by scroll — nothing auto-plays, and the list does not loop (scroll down to the last offering, scroll up to return to the first); wheel/touch is captured only while the cursor is over the section (the page scrolls normally elsewhere), and it holds exactly where you leave it — even mid-change, with the sprite half-changed and the line parked in the middle. The graph-paper grid stays perfectly static; only the coloured pixels change on it. One requestAnimationFrame clock owns the canvas and every per-frame text transform under a pure-easing scrub driver; GSAP drives only the entrance fade. Hover the icon and the pixels float away from the cursor — each a little spring pushed out of its radius — then re-assemble when you leave; click and a soft decaying force breathes every pixel outward — slowly and smoothly — before the home-spring eases them back into place. Theme-aware (the sprite keyline flips light↔dark), pauses off-screen, honours prefers-reduced-motion.
- [Helix](/gallery/helix) — An infinite, endlessly descending spiral of portrait cards on a paper-white (or dark) stage. Thirty dreamy, procedurally-painted busts are wound onto a single winding strand — a helix around a vertical axis, like a coil of DNA — where one parameter drives each card's angle and height together, so it rides one smooth spiral path down and around at once. Scroll (or drag, or the arrow keys) and the whole coil winds downward with heavy, critically-lerped momentum; the card that wraps past the bottom teleports back to the top with its opacity faded to zero at both extremes, so the loop is seamless and never ends. Cards face outward along the strand — the near side large and sharp, the far side of the ribbon showing through dimmed and recessed, crossing over itself like DNA. The strand is bowed into a spindle: the front-facing cards ride a bright, sharp band across the vertical centre and bulge toward you, while the top and bottom curve away, dim and soften into the background — a wound DNA-spiral shape rather than a straight cylinder. A soft background blur keeps the centre-front cards sharp (full colour and contrast) while a card only gently softens as it turns away, or as it climbs toward the top and bottom, the far ones easing into the dark — a per-card blur rather than one filter on the whole scene. A page-load entrance rises them in from a soft blur, staggered down the strand. Each card shows a real photograph, cover-fit with a soft vignette; drop a folder of images and they cycle across the spiral, and any card without an image falls back to a self-contained painted dream-portrait — so it works with zero assets. Click a sharp front print and the room turns darkroom: the spiral racks out of focus and sinks into fog, an amber safelight blooms, and the chosen print lifts off the spindle and DEVELOPS in real time — dipping to a near-blank latent sheet, then blooming up through density (the darkest masses first, contrast steepening milk-flat to full, film grain resolving, the amber cast clearing to neutral, emerging blotchy like a print in a developer bath) before it dries and settles, leaving a faint socket where it sat — while a caption (title, place, and a camera line for the genuine photographs) etches onto the dark room behind it. Scroll, Esc, or tap away and the dry print walks back into its exact slot on the still-turning strand. A liquid-glass cursor — a real Snell-refracted lens that bends the scene through it with a whisper of chromatic fringing at the rim, swells over an openable print, and rides a buoyant spring — replaces the pointer throughout. Responsive to phone/tablet/desktop, keyboard-openable, and honours reduced motion. One rAF clock owns the motion; GSAP owns only the entrance. Theme-aware, honours reduced motion, pauses off-screen, caps DPR. $249
- [Fathom](/gallery/fathom) — An endless forward flight through a deep field of suspended photographs on a pure-black stage. The camera dollies through a 3D volume of images scattered without order — a screen-filling field of them: each fades in at its own scattered anchor somewhere across the frame — not from one central point — grows and sharpens in place as it nears, then continues out past the lens and recycles to a fresh spot in the deep, forever. Two-sided cards: the front is just the image — upright and square, at varied sizes that swell as they approach — and CLICK any card and it flips in true 3D to reveal a short note on its back, then keeps flying so you read the note as it moves (click again to flip back). The whole field lives in one CSS perspective + preserve-3d stage, so true foreshortening, depth sorting, occlusion and the flip are the browser's job; the camera is fixed — the field flies straight toward you and does not respond to the pointer. Cards ride a recycled DOM pool with a depth-of-field blur in the deepest band, moving through at a steady, constant pace, with opacity and blur on the two faces so the flip never flattens. The whole image set swaps by dropping files in one folder. One raw-rAF clock owns the dolly, the depth envelopes and the flip spring; GSAP owns only the field's fade-in. Pure black in every theme, pauses off-screen and in hidden tabs, honours prefers-reduced-motion with a composed still frozen mid-approach.
- [Filament](/gallery/filament) — A radiant field of glowing thread-lines — each a hairline stroke fading from a deep origin into a bright tip dot — laid over a living gradient, in the spirit of a Stripe stat hero. The four stat figures across the top are TABS: click one and the entire field springs into a new FORMATION while the gradient behind cross-fades to that tab's palette and every line re-colours itself off the new gradient (a deep→tip stroke sampled straight from the palette). Reach fans a corona up from a bottom-centre origin; Volume stands a traveling-wave equaliser along the baseline; Uptime turns a slowly rotating spoked ring with a clear centre; Scale radiates a full-frame supernova from the middle. Every filament is a spring — it eases its origin and tip toward the formation's target, so a tab switch reads as one continuous morph rather than a cut. Move the cursor and nearby filaments bend away (or, in Volume, crest up toward it) and spring back. The gradient is the single source of truth for colour, so the Tune panel's swatches and hue slider restyle the whole scene at once, alongside live density, reach, motion-speed and cursor-force controls. One raw-rAF clock owns the physics, the palette ease and the canvas paint; GSAP owns only the entrance fade. Theme-aware (a light wash or an additive dark glow), density adapts to the viewport, DPR-capped, pauses off-screen and in hidden tabs, honours prefers-reduced-motion with a composed still. $269
- [Cascade](/gallery/cascade) — A deck of bold, Swiss-editorial studio covers that runs one continuous, self-dealing reveal: the covers drop in one-by-one and land in a tight centred stack (coloured edges peeking like a real deck), then the stack blooms open into a diagonal 3D cascade that recedes up-left in true perspective. Once open, wheel, drag, or the arrow keys flip the deck — the front cover advances off toward you as the next rides forward, looping infinitely off one continuous position float with a critically-lerped glide, and idle input snaps a clean cover to the front. Click any cover and it FLIPs from its exact on-screen rect to a full-bleed, edge-to-edge takeover while the deck dims behind: photographic plates fill the whole screen, graphic covers fill it with their own colour field and intact art, and an editorial caption resolves the eyebrow, title, discipline and a one-line story over a gradient. Esc, the close button, or the dimmed backdrop folds it back into place. The whole deck leans on a subtle cursor parallax while it rests. Covers are drawn in CSS — heavy grotesk type, generative ASCII marks, giant type-specimen glyphs, running indexes, modular grids — and any card can carry a real photographic plate, so it works with or without image assets. One requestAnimationFrame clock writes every deck transform straight to the DOM; GSAP owns the two-stage deal→fan entrance and the full-screen open FLIP. Theme-aware warm-grey studio (near-black in dark), keyboard-navigable, honours reduced motion, pauses off-screen. $269
- [Assembly](/gallery/assembly) — A cinematic gallery that builds itself. On load a large, slowly-rotating globe of photographic squircle cards fills the screen — front cards big and bright, back cards small and dim, like a turning world of images — then the sphere spins down and the cards migrate off it, converging inward to lock into a tight, hand-arranged rounded-diamond bouquet that visibly SHARPENS as it forms: the depth-of-field tightens as the pieces gather, so you watch one composed object come into being rather than a pile stack up. At rest the cluster breathes on a per-card idle drift and parallaxes on the cursor, near cards swimming more than far ones, so the flat wall reveals real layered depth. Click any card and it dollies to the centre and full sharpness while every other card spreads into an even ring around it, and the room floods with a soft radial bloom in that card's own dominant colour, re-lighting for every card. Esc, the close button, or a click on the empty stage re-gathers the exact same bouquet. The demo deck is a set of warm, cinematic photographic plates; any card can instead fall back to a bold procedural plate, so it still works with zero assets. One requestAnimationFrame clock writes every transform, filter, opacity and depth grade straight to the DOM; a single depth number per card drives scale, blur and dimming through one shared lens equation, so the fly-in, the settle and the click rack-focus all fall out of the same maths. GSAP eases the entrance and the focus open-close (power3.inOut); the rAF loop still owns every card transform. Theme-aware, keyboard-operable, honours reduced motion, DPR-capped, pauses off-screen. $269
- [Threshold](/gallery/threshold) — A full-viewport black-stage 3D archive you cross into and then look around inside. It opens on a THRESHOLD gate — "click anywhere to turn on your sound" scattered on a diagonal over "enter without sound" — and crossing it begins the dive. SCROLL dollies a real perspective camera FORWARD through a deep volume of fifty-plus photographic cards: they rise out of the dark on distance fog, growing and brightening, while a centred title-card headline reveals itself word by word; the page never scrolls past. At the end the scene rests IMMERSED inside the cloud — the headline gives way to the studio title, an INDEX VIEW marker and the nav — and moving the MOUSE pans the camera in parallax so cards reveal themselves in every direction, the pan freezing the instant a card is hovered so it never swims out from under the cursor. HOVER a card and it lifts and brightens as "learn more" scatters along and trails the cursor. CLICK and the card RISES to centre and squares up into a framed still while the rest of the cloud recedes into the dark and blurs, a credit fading up beneath (discipline — medium, title, year); click anywhere or press Esc and it returns to its exact place. One Three.js scene owns the perspective camera and streams the image textures through a small concurrency pool, front-to-back; a single requestAnimationFrame clock drives the dolly, the parallax, hover easing and the fog, and GSAP owns the open/close morph and the headline entrance. Painter-sorted transparency, DPR-capped, distance-fogged into the stage colour, pauses in hidden tabs, and disposes every texture and buffer on unmount. Theme-aware (a black room in dark, a hair warmer in light). Ships as a reusable component that takes any array of image cards with their credits as data. $269
- [Atlas](/gallery/atlas) — A full-viewport interactive realistic Earth you explore country by country. A NASA-textured globe scales up from a point on a blue stage under the headline EXPLORE YOUR WORLD (the globe is the O), auto-rotates, and answers a drag with momentum — a day/night terminator, an ocean glint, a drifting cloud shell and a fresnel atmosphere make it feel alive. HOVER any of ~180 countries and it fills RED and names itself (pixel-accurate picking from a country ID map rasterised at runtime from world-boundary GeoJSON, so every country on Earth is selectable). CLICK a country and the globe glides aside as the name goes big and a panel of that country's cultural highlights slides in — landmarks with real photos and a line of story; open a highlight and it fills the screen as a cinematic full-bleed with COUNTRY · PLACE. ~172 countries carry real iconic landmarks (their top World Heritage Sites, auto-sourced from Wikidata and ordered by fame — India gets the Taj Mahal, Mexico gets Chichén Itzá), with 8 hand-curated showcase countries (China, Japan, France, Italy, Egypt, Brazil, Peru, USA) layered on top. One Three.js scene owns the Earth, clouds, atmosphere and ID map; one requestAnimationFrame clock drives the spin, momentum and sun; GSAP owns the entrance and open/close. Custom day/night + linear-to-sRGB shaders, DPR-capped, pauses when hidden, disposes every texture on unmount. Ships as a reusable component that takes any array of country content as data. $269
- [Reverie](/gallery/reverie) — A cinematic scroll-choreography built entirely from generative light — no photography, no assets. It opens on one full-bleed dream-scene: a living dawn whose anamorphic lens flare drifts and breathes under the cursor, chromatic prism fringing split into real red/green/blue passes exactly where the light bends, over a soft dune and a quiet manifesto laid across the frame as a loose word-grid ("nothing here was photographed — only remembered"). Scroll and the whole scene SHRINKS into a single small card floating in a black void; the card proves to be a deck and FANS into an upright diagonal staircase of a dozen large plates; the staircase GATHERS into two corner stacks as the title resolves in the clearing between them (a staged second beat); the stacks unfurl into two upright edge COLUMNS; and the columns fill inward into a full, edge-to-edge mosaic. In the grid the whole wall BARREL-CURLS around its centre line as you scroll — convex down, concave up, ballooning with speed and easing back to flat (the same scroll-lens as Aperture); hover a tile to spotlight it. Every scene is painted procedurally by one seeded renderer, so card 0's frozen plate shares the hero's seed and the shrink hands off pixel-true. One requestAnimationFrame clock owns every card's transform, opacity and depth, scrubbed by a single progress scalar the wheel or a touch drag drives; GSAP tweens only the load-in envelope. Theme-aware dusk stage, keyboard-scrubbable, honours reduced motion with a frozen hero, pauses off-screen, DPR-capped, mobile-verified. No HUD. $279
- [Emulsion](/gallery/emulsion) — A photography portfolio built as a WALL you pan across. Scrolling doesn't move a page — it dollies a camera sideways along a long bone-coloured wall where photographs hang from pins. The giant word runs ALL the way right on the first scroll — until its own origin sits on the frame edge and you read it from the beginning — then holds dead still while the about-paragraph rises in beneath it, and only afterwards travels left: right, still, left, three distinct movements rather than one drift. It opens with the introduction top-left, three photographs in the right half, and the headline FILLING THE BOTTOM of the frame at half the viewport height, sitting on the floor with its descenders off the edge. The first scroll is sequenced, not simultaneous: everything RECEDES — the headline climbs off the floor toward the centre, walks RIGHT against the pan and shrinks to two-thirds, the same three photographs re-hang themselves in toward the CENTRE and shrink with it, the introduction travels off left, and only once it has cleared does a note about the work RISE UP from under the fold. Exactly one paragraph is on screen at a time. The photographs are the FAST layer (one rate for every print) and the giant type is slow, so the pictures skate across in front of a word that sits almost still behind them. Each chapter's prints are HUNG as its own beat comes up — appearing already tilted off their rest angle and SWINGING down onto their pins on the same pendulum that answers your hand, each ringing down at its own rate — so a beat only ever shows its own photographs, and the contact board slides in from the right exactly as the last prints slide out to the left. Past the opening trio the photographs are ONE HORIZONTAL RUN — every print a bead on a single thread, positions solved so neighbours never touch, and because all prints share one parallax rate the gaps are frozen for the entire scroll, so no two can ever overlap. Only then does the introduction let go and travel off left. Only then does the wall start travelling and filling up, each new print pinned OVER the ones already hanging, ending on a vermillion contact board. Behind everything a giant vermillion serif headline drifts past at 62% of the camera's speed — starting on the FLOOR of the section and climbing as the first scroll lifts heading, prints and headline together — TWO giant words — photographer, at nearly two screen-widths, and work. There are TWO pins: a short one at the opening, where the trio comes to rest CENTRED and holds dead still for the whole life of the first word — long enough for it to travel right, hold, and slide completely out of frame from behind the still images, so the photographs become the fixed thing the word moves past — while the about-paragraph rises in beneath them — a hold that costs every downstream beat, since the held word's clock lags for the rest of the wall and everything after it has to be re-derived, and a long one where work holds one screen position for a whole stretch of the wall while NINE photographs are hung over it in three waves, left to right, until they fill the frame in two bands around the giant word — the word arrives first and alone, and its first three pictures travel in behind it and lock on at the exact frame it comes to rest, because a picture that parks itself before the word has arrived at nothing and a picture that leads the word announces it — before the entire frozen formation releases and slides off together, handing the frame straight to the contact board — which has no reveal of its own either; it is simply there, fully formed, when you reach it. Photographer is at nearly two screen-widths — its two anchors solved by measuring the real face glyph by glyph, so that 'grapher' fills the frame edge-to-edge on load and then — moving RIGHT as the photographs move left, and shrinking a little — sits WHOLLY inside it, starting flush on a complete letter rather than a sliced one; at that size a second giant word cannot fit on the wall without colliding, so word size and word count are the same decision. — each word owning its own stretch of wall and dissolving either side of it. Every frame is a real PENDULUM: it hangs from a pin somewhere along its top edge (never the centre, so it hangs crooked) and swings on a damped pendulum — but scrolling never disturbs it, the wall pans and the prints ride it dead still, and the camera is direct with no magnet and no momentum so it stops exactly where the wheel stops. Only you move a print. Sweep the cursor through a cluster and they shove away; hover one and it lifts, deepens its shadow and steadies; GRAB one and you swing it by hand, and letting go hands the release velocity straight back to the physics, each ringing down at its own rate. The photographs fade up 0 to 100% once, on PAGE LOAD, and that fade waits until the film has DECODED and the headline's typeface has loaded, so nothing measured or painted changes after you can see it, and after that nothing animates on scroll-in: no fade, no develop, no swing-on-arrival, no visibility gate. A photograph is simply on the wall, fully formed, and you travel past it — prints enter by TRAVELLING in from off-frame right, which the layout guarantees on its own. The giant words are drawn glyph-by-glyph on canvas but rendered RIGID — one flat baseline, no per-letter spring and no ripple, because at half the viewport height a wave is a wobble rather than a texture. Frames parallax away from their own chapter stop, so every composition lands exact while travel still separates the planes; film grain jitters over the whole scene on an overlay blend. One raw requestAnimationFrame clock owns the camera, the pendulums, the development curves and the paint; GSAP owns only the entrance, where the first prints drop onto their pins and swing. Theme-aware, keyboard-navigable, honours reduced motion, pauses off-screen, and lays out its own column on a phone. $279
- [Iris](/gallery/iris) — A full-bleed photography portfolio that moves like a camera iris. Every photograph rests edge-to-edge; to travel between them the picture doesn't cut or slide — it collapses inward through a circular diaphragm down to a small liquid-glass lens at dead centre, the next frame blinks in behind the glass, and the iris blooms back open to full-bleed. The lens is real Snell's-law optics (isle's engine, baked once, refracting the photo at the rim with a chromatic fringe) — active only while small, so the settled frame is a clean full-bleed image. On every transition faint concentric orbital rings breathe out of the lens, and a two-line serif title (Playfair) lands as a second beat once the frame has bloomed, its words rising with staggered scale-and-blur. Wheel to advance, drag left/right, arrow keys, or click the magnetic prev/next lenses — all drive the same iris. One requestAnimationFrame clock owns the iris timeline, ring bloom, cursor parallax and magnetic nav; GSAP owns only the title. Non-Chromium browsers fall back to a frosted rim; honours prefers-reduced-motion with a plain cross-cut. $279
- [Lens Bloom](/gallery/lens-bloom) — A scroll-choreographed photoshoot reveal driven by one timeline scalar. On load a large display-serif two-word title fades in, splits apart down the middle, and four photo cards bloom into the gap between the words. Start scrolling and the cards fan into a straight horizontal row while the two words push to the far left and right edges; scroll on and the row gathers into a centred cover-flow deck — front card large and dead-centre, the rest peeking behind — as an editorial layer resolves (corner wordmark, an uppercase description on each side, a roman-numeral card title over the frame, a tabular counter flanked by hairline rules, an Explore button). Keep scrolling and the deck flips forward, the front card sliding away as the next comes up, the roman title and counter updating in lockstep. One requestAnimationFrame loop eases the timeline toward the scroll target and lays out every card (position, scale, rotateY, depth, opacity) plus the words and chrome; GSAP owns only the auto load beat. Wheel, drag, arrow-key or swipe drive it, and it lets the page scroll past at either end. Theme-aware paper/dark stage, honours prefers-reduced-motion (composed, no auto-play), pauses when hidden; below 768px a plain captioned stack. $249
- [Cutout](/gallery/cutout) — A photographer's cutting mat seen from directly above. Five mood words lie on it, each cut from its own colour of card; hover one and a dashed marquee snaps around it, choose it and the SCISSORS run the length of the word on a dashed cut line, releasing each letter the instant the blade passes its x — leaving the card behind with letter-shaped HOLES punched through it. The loose letters slide and spin to the centre on springs, a photograph DEVELOPS inside each one (the glyph is the mask; the opaque card dissolves with a breath of cyan and the picture is underneath), and then the word UNPACKS into the FILMSTRIP of a project sheet — one hero print with its credit beside it, film stock, chinagraph rings on the keepers, a 04/10 counter — with the rest of the roll sliding up to fill the cells the word was too short to carry. Hover, tap or arrow to any cell and the hero cross-fades to it with its credit beside it — no modal, no second view; "I want this look" opens an inquiry with that mood already ringed in grease pencil. The board is a finely ruled self-healing cutting mat with a printed tick scale around all four edges and leaf shadows falling across it; and the five objects on it are die-cut stickers of the photographer's kit — camera, lens, film, light meter, polaroids — small, on the margins, placed once and never moved, so the only things in motion are the paper, the letters and the prints. $279

## Contact

This site is product-focused. For questions, use the contact form on the site.