Copy Prompt → Ship it
Motionthatstopsthescroll.
- NewReverieA full-viewport, scroll-driven gallery of cinematic, dream-lit portraits. It opens on one full-bleed hero image — a red-and-teal split-light face — with a quiet manifesto laid across it as a loose word-grid. Scroll and that single image SHRINKS in place into one small card floating in a dusk void; the card proves to be a deck and RIFFLES into an upright diagonal staircase of portrait plates; the staircase PARTS into two corner stacks as the title 'Imagined Light' resolves in the clearing between them (a staged second beat); the stacks unfurl into two upright edge COLUMNS; and the columns MULTIPLY INWARD into a full, edge-to-edge mosaic wall. Once the wall forms, the cursor PANS across it and HOVERS a tile to spotlight it — lifting and tilting it toward the cursor in true 3D while the rest dim and a printed number and italic title fade in. CLICK any tile and it lifts off the wall as a full, uncropped 'print' on a soft matte with a gallery placard beneath it, the wall sinking into shadow behind. ONE requestAnimationFrame clock owns every card's transform, opacity and depth, scrubbed by a single progress scalar the wheel or a vertical touch-drag drives; a single tween handles only the load-in envelope. Theme-aware (an always-dusk void or a warm paper stage), keyboard-scrubbable, honours prefers-reduced-motion, pauses off-screen and in hidden tabs, DPR-capped, and verified in a 390-wide mobile portrait with its own large-tile layout. No HUD, no hint text.
- NewAssemblyA 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 a single 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 whole 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 prefers-reduced-motion, DPR-capped, and pauses when hidden or off-screen. Ships as a reusable component that takes any array of image cards as data.
- FathomAn 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.
- NewHelixA hero built from an endless descending spiral of portraits — a single winding strand, like a coil of DNA. Thirty cards are wound onto a helix around a vertical axis; each card's place comes from a single parameter that drives both its angle around the drum and its height, so every card rides one smooth spiral path — down and around at once. Scroll (or drag, or the arrow keys) and the whole spiral winds downward with heavy, critically-lerped momentum, fresh faces curving up to the front as spent ones sink away; a patient idle drift keeps it turning until you touch it. The loop is truly infinite: the card whose turn wraps past the bottom teleports back to the top, but its opacity is faded to zero at both extremes so the wrap always happens off-screen — the spiral never ends and never seams. Cards face outward along the strand, so the near side is large and sharp while the far side of the ribbon shows through, dimmed and recessed by depth — the strand crosses over itself like a coil of 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, not 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 so it sits in the dark stage — drop a folder of images and they cycle across the spiral; any card without an image falls back to a self-contained, procedurally-painted dream-plate, so it works with zero assets. Click a sharp front print and it opens into 'The Loupe on the Lightbox': the whole spiral racks out of focus and sinks into fog while the chosen print lifts flat off the spindle onto a warm lightbox, leaving a faint socket where it sat; a glass loupe glides in and, as you slide it across the print, magnifies a live crop re-sampled from the photo's full-resolution original — real grain the rest of the page never shows — while a caption (title, place, and a camera line for the genuine photographs) etches onto the dark room behind the print. Scroll, Esc, or tap away and the print walks back into its exact slot on the still-turning strand. Responsive to phone/tablet/desktop, keyboard-openable, and honours reduced motion. One requestAnimationFrame clock owns the live motion; GSAP owns only the entrance. Theme-aware (light paper or dark shadow stage), honours reduced motion, pauses when hidden or off-screen, and caps device-pixel-ratio.
- NewAliveA full-bleed agency manifesto — a heavy serif headline ("WE BELIEVE / BRANDS SHAPE THE / FUTURE") holding dead-centre over a warm off-white stage, framed by editorial chrome: a { Menu } / wordmark / { Work° } top bar and a bottom { Selected Projects } rail with a numbered counter and a shortlist of thumbnails. The moment the cursor moves, project photographs SURGE UP from below — each image is born under the pointer offset downward, blurred and small, and springs up on real spring physics to meet the cursor, then keeps drifting upward past it as it un-blurs, holds, and dissolves. Emission is distance-thresholded along the pointer path, so a slow drift leaves a sparse rising trail while a fast sweep flings a dense, overlapping collage that buries the headline — and flings it higher, each image leaning into the direction of travel with a velocity-seeded launch, sideways drift and tilt. Newest always stacks on top; the whole scene leans a few degrees toward the cursor for depth. Sixteen curated photographs (architecture, portrait, product, still-life, landscape) cycle through varied aspect ratios so the wall never repeats a size; every URL is buyer-swappable. A recycled DOM pool keeps it crisp with true rounded corners and cast shadows; one raw-rAF clock owns every spring and the scene tilt, GSAP drives only the letter-by-letter entrance. Theme-aware (warm greige ↔ near-black), pauses off-screen and in hidden tabs, and honours prefers-reduced-motion with a composed still collage.
- NewPixelsA full-viewport 'what we offer' values scroller staged on faint graph paper, shipping with Motion's own brand values as the demo copy. One big procedurally-generated pixel sprite (a ghost, a robot, a heart, a star — each drawn from disc/rect/heart-curve/star-polygon primitives and auto-outlined, no external assets) sits centred on the grid; a 5-link top nav and a 4-link footer frame it, 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. Everything 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 rAF 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.
- NewNovaA full-viewport 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 and the rest ride a continuous conveyor of tall cards on the right (region label on top, name on the bottom). Choose a card — or step with the arrows, the arrow keys, or a horizontal drag — and its photo grows out of the card's exact rect and swallows the whole viewport (a real pixel-based FLIP expand on easeInOutCubic), matching the background's zoom so the hand-off never pops; meanwhile 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. A patient auto-advance runs until you touch it, then yields. GSAP powers only the one-shot entrance — every other frame is raw requestAnimationFrame. Theme-aware, keyboard-navigable, drag-flingable, and it honours reduced motion.
- NewIsleThe Apple-grade liquid-glass island, rebuilt for the web with real optics. A glass capsule floats at the top of a cinematic photo scene — click it and it springs open into a music player with a genuine overshoot, while the displacement map behind its refraction is regenerated every frame at the in-between size, so light keeps bending correctly mid-morph. The glass is true lensing, not a flat CSS blur: a canvas-baked map (Snell's law through a convex squircle bevel, n = 1.5) drives an SVG feDisplacementMap via backdrop-filter, the backdrop magnifies at the rim, fringes with chromatic aberration exactly where light bends, and a specular rim light aims itself at the cursor. Press the glass and it energizes — illumination radiates from the touch point while the capsule dips like gel. A hand-held glass lens can be grabbed, dragged and flung; it fisheyes whatever passes beneath it and bounces off the viewport walls with a squish. Inside the player: a draggable scrubber and volume slider whose thumbs lift into brighter glass mid-drag, EQ bars that dance to the volume, and three tracks to skip through. A glass dock swaps three photographic backdrops, and the island samples the luminance behind itself to flip its content between light and dark like the real adaptive material. A glass console on the left hands visitors the optical model itself — refraction, rim width, frost, dispersion, saturation and rim light as live sliders; hold one and every piece of glass on screen (the panel included) re-bends under your thumb. The full effect ships on every main browser: desktop Chromium refracts natively, while Safari, every iPhone browser, Firefox and Android Chrome run a WebGL compositor that refracts the scene, the veils and the character-exact rasterised editorial type with the very same displacement maps — plain frost only where WebGL itself is missing. Honours prefers-reduced-motion.
- NewFluid GalleryA moody, cinematic image collection — prismatic eye close-ups, long-exposure silhouettes and reaching hands — grouped into three moods (Light, Drift and Reach) and chosen to glow in both light and dark mode (darker frames get a per-photo exposure lift so they never sink into the dark canvas). A clean canvas is washed with soft ambient shadows like sun through a window — a soft shadow up top, shadowed left and right edges, bright vertical light streaks between (warm white in light, deep slate in dark); the images float on it with no drop shadow of their own — the shadow lives in the background. 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 — the images scale up, un-blur and rise into place, staggered as each decodes, with no placeholder flash. Scrolling is captured — the wheel or a touch drag never moves the page on, it just 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 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 from a soft squircle to a sharp edge, and only once it lands does its plate fade in: the mood, the title, a one-line note, and the technique · year. Click anywhere or Esc to swing it back the same way (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. The loop pauses in hidden tabs, pixel-ratio is capped, and the GL context is fully disposed on unmount.
- NewDesk 95A pixel-perfect Windows 95 desktop reimagined as a portfolio hero. Boots through a brief BIOS sequence into a teal #008080 wallpaper with chunky 3-D bezels, navy title bars, 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…) sit along the desktop and open into a Win95-chrome project viewer with hero photo and a Challenge / Direction / Outcome brief. A system column on the right carries My Computer, Recycle Bin, Notepad (a working textarea with the designer's CV), Calculator (a real working standard-mode calc), and an Inbox icon. The bottom taskbar carries a Start button with a 16-px 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 to Desk 95" tile under 1024 px.
- NewPantheonA full-bleed gallery that turns. 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, their name set large in Playfair below with lifespan, movement, and the work on show. The rest of the cast curve away to the 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 cross-fades to their work, and the name re-sets with a soft blurred rise. Seven public-domain icons — David's Napoleon Crossing the Alps, the Mona Lisa, The Starry Night, The Great Wave, The Kiss, the Birth of Venus, the Night Watch — 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. A patient auto-advance pauses on interaction and resumes on idle; theme-aware museum staging (near-black in dark, warm white-cube in light); honours prefers-reduced-motion.
- NewBenchmarkAn Apple-Keynote performance slide turned into a living section, split roughly 38 / 62 horizontally — figure on the left, claims on the right. On the left, 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 (#010102) and large, every other claim a flat grey (#636365); size still falls off smoothly with distance, 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 rAF clock owns the per-row transforms and the gradient while a GSAP expo.inOut tween owns the stepped position; React only re-renders the one discrete bit — the focused claim, which the figure renders straight off, so number and claim can never drift apart. A fixed light palette (#F2F2F4), a screen-reader list of the real stats, a live tuning panel (timing, sizes, lens) on ?tune=1, and prefers-reduced-motion that holds each claim still while keeping manual stepping.
- NewApertureA 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 and continuously 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 — the gaps widening and the outer frames spilling further past the screen edges — and eases smaller as you scroll up. Click any frame, wherever it sits, and it zooms from its exact rectangle to fill the screen — its title, location and year, and the camera it was shot on (body, lens, focal length, aperture, shutter, ISO) fading in over a cinematic scrim; the close button, a click anywhere, or Escape shrinks it straight back into its exact place in the wall. A single raw requestAnimationFrame loop owns the wall — the auto-scroll, the velocity-eased curl, the looping vertical wrap, the cylinder projection and a live z-sorted click hit-test — while GSAP drives only the entrance bloom and the zoom. The section never pins the page; it captures the wheel itself. Theme-aware chrome, a flat reduced-motion fallback, and full teardown on unmount. Eighteen frames ship in from the in-house set with believable shot data; swap your own by editing photos.ts.
- NewFormationA 'Selected Works' portfolio wall built on one set of cards and four formations, switched from a header toggle: Flat — a scattered ellipse ring hugging the viewport with a clean centre; Tilt — a big horizontal row, every card turned the same way in 3D and bleeding off both edges; Ring — a descending diagonal S-wave from top-right to bottom-left, cards overlapping into depth; Gallery — a large coverflow filmstrip you drag through. 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 drag offset to pan/scrub the linear formations, and a live hover hit-test that lifts whichever card the cursor is over and floats its title. Each card is a self-contained generated poster built 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 the backdrop closes it. GSAP owns the staggered entrance bloom and the open/close; reduced-motion snaps to the Flat formation; the loop pauses off-screen and in hidden tabs.
- NewRevolverSix two-sided premium debit cards ride an invisible, tilted 3D wheel — and somersault as they travel. Each card enters from the bottom of the scene close to the camera showing its BACK (holder name, number, tap-to-pay — all the personal data lives there), tumbles forward through a near-invisible edge-on sliver, lands FRONT face-on at the centre-stage hero pose — the clean design face, kept alive by cursor-tracked tilt and a moving specular sheen — then keeps rotating the same direction through edge-on again to show its back as it recedes into the top stack, smaller, dimmer, softer. Roughly 360° of continuous rotation per visible pass, never reversing, never snapping. One continuous position float drives every card through shared Catmull-Rom station splines, so the six cards move as one machine: consistent spacing, one shared somersault curve, atmospheric depth-of-field. Critically-damped spring physics — soft acceleration, soft deceleration, zero bounce. Wheel, drag, fling (clamped to ±2 slots), tap any visible card to call it to the stage, pips, arrow keys, and a patient auto-advance. Each finish is a tone-on-tone engraving: contour squiggles, a ghosted chip-grid, fine rules, a satin band, star specks, brushed metal.
- NewRiffleA scroll-choreographed 3D card deck. Twenty-two square cover-art cards morph continuously through six formations as the section is scrubbed — a wide elliptical arch, a collapse into a single 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 describing the focused card. One hero card threads through all six as the constant the eye tracks. A single scroll-progress value drives a per-frame spring toward each card's 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 rather than a slideshow — and the whole sequence reverses exactly on scroll-up. GSAP ScrollTrigger feeds the progress; raw requestAnimationFrame owns the CSS-3D transforms and a subtle cursor-parallax tilt of the entire deck. Theme-aware near-black cinema stage with vignette and film grain; reduced-motion snaps to the captioned rest state.
- NewConsoleA vintage 1990s computer hero. A chunky CRT monitor with an amber-phosphor screen sits above a chiclet keyboard with cream caps and three colour-accented specials — ENTER in blue, SHIFT in violet, BACKSPACE in orange — plus an ESC clear and an OPT cap on the bottom row. The CRT shows a blinking caret and a 'Type something…' placeholder over a scanline pattern, glow, and a subtle screen vignette. Click any key on the screen and the cap presses down crisply while the character lands on the CRT (letters appear uppercase for the retro feel); type on your physical keyboard and the matching on-screen cap presses in sync — letters, digits, Space, Enter, Backspace, Shift, and Escape are all wired through. ESC clears the screen. The global keydown listener politely ignores events when a real form input is focused, and touch taps are guarded against the synthetic-mouse double-fire. GSAP plays a brief entrance on the computer; everything else is pure React state and CSS — no canvas, no physics simulation needed for this one. Honours prefers-reduced-motion.
- NewAuroraA 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. The centerline drifts and sways while the cross-section twists and curls; surface normals are computed analytically per-frame from the two surface tangents so the fibres and crease rake correctly as the ribbon writhes. Every visual parameter — composition (scale, offset, rotation, FOV, camera), motion (speed), shape (length, twist, width, curl, wave, sway) and surface (fibre frequency/contrast/blur, emphasis band, edge sharpness, crease, flow, opacity) — is driven live from a single config object. Premultiplied-alpha output sits cleanly over any background. Reduced-motion renders a single still frame; an IntersectionObserver and a visibility listener pause the loop off-screen or in a hidden tab; pixel ratio and frame-rate are capped; the WebGL context is fully disposed on unmount.
- NewOverworldA playable, top-down pixel portfolio. Visitors steer a four-direction character around two single-screen scenes instead of scrolling a page. The office is the professional story — walk to the laptop to open a Projects modal, the bookshelf for a reading list, the file cabinet for the CV and documents, and the coffee table for a small personality aside. Step through the door and the scene cross-fades to a garden — the personal story — with a mountain bike (a dialogue about resetting on the trails), a camera table (a photo album), and a playground (a quiet line about fatherhood). Real depth: the character passes in front of and behind furniture via per-frame Y-sorting, collides with walls and objects on an axis-separated AABB sweep, and can nudge the office chair at the desk within its range. A single requestAnimationFrame loop drives movement, the 4-frame walk cycle, and collision, all written straight to DOM transforms so React never re-renders mid-walk; only discrete state (scene, nearest tooltip, open modal) hits React. Pre-rendered info badges surface above the closest object, and only the closest one shows. WASD/arrows + E on desktop; an on-screen D-pad and interact button appear on touch. Every modal opens over the paused world and returns the visitor to the exact same spot. All content — projects, books, CV, photos, dialogue, and object placement — lives in one editable data file.
- NewRotundaA floating wheel of eighteen portfolio cards on a tilted 3D ring, the whole composition vertically centred on a near-black stage 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 soft warm halo, while its neighbours quietly scale away. Cards stay in full daylight colour — no dimming, no dark overlays — so the photography pops against the dark room. A preview panel in the 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: the surrounding cards disperse outward and fade, the upper-right brand chrome 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 — three low-opacity framed previews of other works with crisp monospace metadata (coords / camera / date) and a minimal text-only Back arrow above them. Closing reverses the same easing with a carefully orchestrated handoff: the wheel cards drift back from the centre before the overlay fades, so the morph is glitch-free. Cards are CSS 3D (rotateY + translateZ + tilt) with backface culling; every transform is rewritten per frame from raw rAF.
- NewRooster RushA full-bleed hero that doubles as a real 3D platformer. Editorial title and CTAs float over a sunrise sky; below, a RobotExpressive character runs, jumps, and grows on a procedurally-generated endless world of ground tiles, floating platforms, gaps, towers, walking enemies, gold coins, and mushroom power-ups. Spring-physics movement with coyote time, jump buffer, and variable jump height. Collisions are per-frame AABB sweep; stomping an enemy from above bounces the character, side contact shrinks them, and falling off the world resets to the nearest safe ground without losing score. A live score chip and best-of-session counter sit in the top right, persisted to sessionStorage. Touch pad controls appear on coarse-pointer screens; keyboard arrows + space drive desktop. The directional light tracks the camera so soft shadows render the whole way down the endless run.
- Most copiedAtelierA full-bleed macOS-inspired portfolio hero. Ten draggable project files scatter across a softly-blurred warm wallpaper; click any one to open a generous editorial modal with a brief block and a 3×3 case-study gallery. A floating glass dock at the bottom magnifies on hover and carries app icons that open Notes, Photos, CV (Apple Notes-style), short quip windows for Figma / Claude / ChatGPT, an Instagram link, a mailto, and a Trash bin one-liner. Three "do not open" folders quietly redirect to a Rick Astley video. GSAP entrance (per-tile scale + blur + y-translate), raw rAF for dock magnification, pointer-event drag with direct DOM transform during the gesture and a single state commit on release.
- NewMomentsA viewport-filling photography wall — every cell pushed aside by a cursor-following gravity void. The void is comfortable: it holds still while your cursor rests inside, and only slides toward you when you wander outside, on a smooth lerp, so you can drift through the whole wall without ever fighting the focal point. Cells near the void displace radially with a quadratic falloff and a soft fade at the center, leaving a clean circular clearing that reads the closest photo as the featured moment — title, category and a short field-note caption all surface in the void. Click the featured image 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. ESC or backdrop closes; the void resumes following the cursor exactly where it left off. Raw rAF for the void physics and per-cell displacement, GSAP timeline for the radial entrance reveal and hero copy cascade.
- NewSpringA bright, full-bleed subscribe hero set against a spring meadow video — blue sky, cherry blossom trees, green hills, and a small lake. Every title letter rides an invisible 4-face dice that rolls forward in two back-to-back 90° tilts with a soft `back.out` overshoot, so each character blooms into place from above instead of tumbling in. A small eyebrow chip above the title ("Dispatch №01 · Spring") sets a magazine-newsletter tone. Beneath the title: a glassmorphism subscribe pill with backdrop-blur and saturation boost, a cursor-tracked radial sheen, focus-within glow, and a submit button that morphs idle → loading (rotating arc) → success (stroke-drawn checkmark) while the input crossfades to a quiet confirmation. The whole title group tilts in 3D toward the cursor on a smoothed lerp. The video runs at native colour — no overlays — so the meadow palette stays bright. GSAP timeline for the entrance, raw rAF for cursor parallax and form sheen.
- CipherA scroll-driven ASCII trading terminal that disintegrates and re-coalesces between three full mobile screens — a BTC spot orderbook with live candlesticks and depth ladder, a gold options chain with greeks and a hockey-stick payoff curve, and a portfolio dashboard with allocation bars, holdings table, six-month sparkline and risk metrics. Every screen is built cell-by-cell out of monospace shading glyphs, box-drawing characters, Unicode bars and real ASCII letters, so the art reads as a real terminal, not as text-of-an-image. Between screens, every alive cell becomes a particle that flies along the wind axis, burns into a scorch glyph mid-flight, and resolves into its destination character — outgoing and incoming clouds overlap, the canvas flips palette from light to dark and back, and the text panel slides across to the opposite side. The simulation is fully deterministic and scroll-reversible: scrubbing up reverses the disintegration exactly.
- AsterA cinematic, full-bleed subscribe hero named after the star-flower it evokes — bioluminescent ribbons flow across a starlit meadow video while every title letter rides an invisible 4-face dice. Each cube rolls forward in three back-to-back 90° tilts: the current face hinges down into the bottom slot and the next identical-letter face drops in from above, three times in a row, with a tight cascade across the row. The letter never spins on its own axis — the dice rotates beneath it — so the title reads cleanly while still feeling kinetic. Beneath the title: a glassmorphism subscribe pill with backdrop-blur, a cursor-tracked radial sheen, focus-within glow, and a submit button that morphs idle → loading (rotating arc) → success (stroke-drawn checkmark) while the input crossfades to a quiet confirmation. A floating dev panel exposes every animation parameter as a live slider with a scrub timeline for fine-tuning. GSAP timeline for the entrance, raw rAF for cursor parallax and form sheen.
- BoutiqueA 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, and 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 around it; a side panel slides in with a big featured garment image, a three-thumb slider (jacket / jeans / shoes) with active and added-to-bag states, and two CTAs — Add individual piece, or Buy entire look. Click any other model mid-view to cross-fade to it without closing. ESC, the close button, or drag-to-pan all drop the selection.
- CremaA coffee-shop app hero with three phones flipping in fixed positions — each rotates around its own Y axis on a staggered cycle, swapping the 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 mug, beans) drift in slow sin/cos orbits between the phones. The title cascades letter-by-letter in Bagel Fat One — blur, scale, y-translate — and lands inside a second of the load. Built for coffee brands selling app downloads.
- HardbackA curated 3D bookshelf that opens. Twelve hand-modelled hardcover books fly in from off-screen and settle onto a shelf — neighbours stand spine-forward, the centre book pivots cover-forward as the slider passes through it, with continuous coverness interpolation (no snap).
- MarathonA real 3D iPhone tumbles vertically through three slides of a fictional running app — back at the bottom, screen face-on at the centre, back again at the top. At each apex the screen content erupts past the bezel into the world: a GPS route paints across the section, a heart-rate waveform becomes the horizon, weekly bars climb up out of the device. Drag, wheel, fling, or click a pip — three slides loop both directions on spring physics.
- FolioA scroll-jacked portfolio reel for agencies and creative studios. Two synchronized columns — a typographic title list on the left, a scaled image-and-video strip on the right.
- FreeCinema ReelA vertical film-portfolio slider with cinematic snap-physics. Drag, fling, or wheel past a tension threshold to advance — anything short and the slide springs back. Outgoing content overshoots the image in a parallax lead, incoming content stays hidden behind a blurred veil until the frame is half in. A custom SCROLL cursor morphs into a grab-hand with directional chevrons mid-drag.
- CardwallA dense stack of fourteen credit cards fanned across a serif title. Move the cursor along the row and each card springs to meet you — Gaussian-falloff lift, cursor-tracked tilt, live specular highlight, and a shadow that grows as each card leaves the surface.
- Most copiedPicasso EcommerceA scroll-driven paintings portfolio with ecommerce — cards rise and fan into a curved conveyor, showcasing original artwork with paint-brush badges, room preview, awards, and testimonials. Spring-physics transitions, detail view with framed art and add-to-cart.
- Portfolio PhotographerAn infinite portfolio reel for photographers — thumbnails parade across a strip, then break formation into a composed chaos explosion driven by Halton sequences. Magnifying-glass wireframe grid, lightbox with auto-play, 3D cursor tilt, and hero copy with letter-by-letter entrance.
- Stream ShowcaseA Netflix-inspired rotating card slider with spring-physics momentum, center-card spotlight, click-to-expand FLIP animation with vertical card flip, episode browser, and inline YouTube playback. Auto-advances, drag-flingable, hover-pausable.
- Momentum SliderAn infinite 3D perspective carousel with spring-physics momentum, drag interaction, and cinematic product modals. Edge-to-edge hero section with auto-play, snap-to-card, and depth-aware transforms.
- Drag GalleryA momentum-driven infinite product carousel with velocity-based card skew, inner image parallax, and spring-snap physics. Grab, fling, and watch cards lean into the motion — ecommerce browsing that feels like play.
- MembraneA living surface that responds to your presence — spring-physics mesh with wave propagation, cursor deformation, and click impulse. The membrane breathes, ripples, and glows.
- Shape TrailYour cursor paints the void — geometric shapes bloom behind every movement. Slow strokes leave delicate circles; fast swipes scatter diamonds, stars, and hexagons in warm earth tones. Click to burst. Physics-driven drift and fade.
- Liquid TypeTypography that behaves like liquid — each character inflates, displaces, and glows as your cursor passes through. Spring-physics variable font weight, click shockwaves, and an idle breathing wave that never stops.
Pricing
One library. Two ways in.
Subscribe for the occasional build, or pay once and own every section forever — including the ones we haven’t made yet.
Monthly
For the occasional build
$9/mo
Unlock 3 sections a month — yours to keep. Cancel anytime.
- Any 3 sections a month — full prompt + spec each
- Everything you unlock stays unlocked
- The whole gallery to pick from, new sections included
BEST VALUE
Lifetime
For regular builders
$99 once
Founding rate — $149 after Sunday, July 26
Cheaper than a year of monthly.
Every section, unlimited, forever.
- Yours forever — every section, nothing ever locks
- Every future gallery section included
- Use on client & commercial work
- No monthly cap, no renewal date
14-day money-back guarantee — full refund, no questions.
Studio — everything in Lifetime for up to 10 team seats. One purchase covers your whole studio. $249 once.
Get Studio — $249Not sure yet? $99 once is less than a year of monthly — and it never expires. Compare plans →
One partner, endless motion.
The pages you don't have time to build.
Premium landing pages and animations — designed, built, and delivered in days, not months. One request at a time. Pause whenever you're between projects.
Solo studio — only 3 active builds at a time. 1 spot open.
Motion Club
Pause or cancel anytimeFounding rate — limited
$3,995/mo$4,995
One request at a time — first preview in ~48h
Unlimited requests & revisions
Landing pages, animated sections & interactions
You keep all the code
Pause anytime — unused days roll over
Book a callSubscribeRequestReceive in days
Not loving it after the first week? 75% back, no questions.
FAQ
Questions, answered.
Each section comes as a detailed prompt + spec file. Copy it, paste it into your AI coding tool of choice, and you get the full, production-ready section — physics, interactions, and all.
On the Monthly plan you can open up to 3 new sections per billing month — and anything you unlock stays unlocked for as long as you're subscribed. The allowance refills on your renewal date.
Monthly ($9) is great for the occasional build. Lifetime ($99) pays for itself fast if you ship regularly — unlimited unlocks, every section, and every future one we add, forever.
Yes — every plan covers commercial and client work. Lifetime licenses you as an individual; Studio covers your whole team.
You keep access until the end of your current billing period, then it simply pauses — no further charges. Anything you've unlocked stays yours; resubscribing restores access to it, plus a fresh set of unlocks.
Always. New sections ship regularly, and every plan gets them as they land — Lifetime and Studio at no extra cost.
Stop settling for static
Your website deserves
sections that breathe.
Physics-based. Cursor-responsive. Impossible to replicate. Each one ships as a detailed spec, ready to build.
From $9/mo · cancel anytime · or own it forever for $99
