Motionthatstopsthescroll.
- Featured
ApertureA 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. - Most copiedFeatured
MomentsA 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. - Featured
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.
BurstA cinematic, theme-aware curved video wall — three rows of landscape media cards laid on a convex cylinder: the centre column is head-on and closest, and each column steps around the cylinder, swinging out, receding, and rotating to stay tangent, so the sides angle inward and foreshorten. Because the spacing and each card compress together around the curve, the black gap between cards stays even the whole way around (a true cylinder, not a linear cover-flow that skews the edges and unevens the gaps). After any scroll the wall SNAPS onto the nearest slot — a card head-on at the centre — and rests still, so it never settles mid-angle. On load the wall arrives from the distance — the whole stage scales up from small while the cards light up ONE BY ONE, centre-out, each de-blurring from a soft blur (no spin) — and a thin top bar (wordmark + nav) resolves as a late beat. Every card carries its own title (category kicker over name). Under the hood the three rows are infinite rings: scroll, drag (1:1 grab with release momentum), or arrow-key and the rows ALTERNATE direction — row one travels right, row two left, row three right — each on spring-friction momentum with a whisper of idle drift, wrapping seamlessly around the back. Cards in motion smear with a fine motion blur written only to the leaf image (never a 3D ancestor, which would flatten the wall). There is no hover state — the cards simply sit, scroll, and snap to place. Click any card and it opens to a large centred full-frame view with its title, while the wall dollies up and dissolves behind it; Esc, the close button, or the backdrop reverses the move and returns it to its exact slot. ONE requestAnimationFrame clock owns every card's transform, opacity, z-index and motion blur; GSAP owns only the intro and the open/close zoom, on separate layers so the physics and the reveal never fight. Ships as a reusable component that takes any array of media (image, poster frame, or video) with a title and kicker. Theme-aware light and dark, keyboard-operable, honours prefers-reduced-motion with a still assembled wall, pointer-driven, and responsive — the curved wall holds down to a 390-wide mobile portrait.- New
Lens BloomA scroll-choreographed photoshoot reveal driven by a single timeline scalar. On load, a large two-word display-serif title fades in as a centred phrase, then the two words split apart while the photo cards appear one by one into a fanned row in the opening gap. Scroll or drag and the words fade out as the row gathers into one dominant, dead-centre hero card with the rest of the deck stacked behind and peeking at the top; a restrained editorial layer then rises in as a second beat — a roman-numeral name, a one-line description, and a fraction counter ringed by two concentric circles, joined by a hairline that draws itself from the name across to the number and softly lights the ring on contact. Keep scrolling and the deck advances vertically — the next photo descends from the top stack into the hero slot while the passed one drops away, each switch carrying a velocity-driven chromatic motion-streak; the name, description and counter cross-update. One requestAnimationFrame loop eases the timeline toward the scroll target and lays out every card, word and chrome element; a tween library owns only the one automatic load beat. Wheel, drag, arrow-key or swipe all drive it, and it lets the page scroll past at either end. A one-time bob after load and a persistent "Scroll or drag" cue teach the interaction. Below 768px it becomes an edge-to-edge full-bleed swipe gallery with a lift-to-reveal advance, a bottom-left caption over a scrim, and a thin progress bar. Theme-aware paper/dark stage, honours prefers-reduced-motion (composed, no auto-play), and pauses when the tab is hidden. Ships with a demo photo set — swap the files to use your own shoot. - New
CutoutA photographer's cutting mat, shot from directly overhead, that asks ONE question — how should your photos feel? — and answers it in paper. Five mood words lie on the mat, each cut from its own colour of card: BOLD on vermillion, SOFT on bone, RAW on near-black, DREAMY on pale blue, CINEMATIC on yellow, all at different sizes and angles, with a small tracked label under each one. The whole desk is real photography: the board is a self-healing cutting mat that takes nearly the whole frame — finely ruled, with a printed tick scale running the full length of all four edges and the shadow of leaves falling across it — so it is exact at any size on any display and repaints itself for the theme instead of wearing a wash, and the five objects lying on it are die-cut stickers of the photographer's own kit — a rangefinder camera, a lens, a roll of 35mm, a light meter, a stack of polaroids — small and pushed out to the margins so the middle stays clear for the words, with a coffee ring dried into the mat. NOTHING ON THE DESK MOVES: each object is placed once and never touched again, because a desk that reacts to the pointer competes with the one thing you want looked at, and a photographic object that slides around stops reading as an object. Everything that moves is the paper. IT LOADS BY LAYING ITSELF OUT: the board is set down first, scaling up a hair as it fades, then the kit lands on it object by object, then the question is written across the top, and only then are the five cards dealt onto a desk that already exists — every piece on its own scale-blur-and-rise rather than one flat image fading up. Hover a word and it lifts off the mat with a deepening shadow while a dashed marquee with corner handles snaps around it. CHOOSE ONE AND THE SCISSORS COME ACROSS IT: they run the length of the word on a dashed cut line, and each letter RELEASES the instant the blade passes its x — the stagger is not a stagger, it is the cut — leaving behind the card it was cut from with letter-shaped HOLES punched clean through it, inner rim and all, the mat showing through. The loose letters slide and spin to the centre of the desk on real springs — soft ones, so each takes its time crossing the mat and arrives with a single gentle overshoot rather than snapping into place — each carrying its own release angle and its own shadow, and re-form the word out of nine separate arrivals. Then a photograph DEVELOPS inside every letter: the glyph is the mask and the print comes up under it — the opaque card it was cut from dissolving away with a breath of cyan across the emulsion, and then the picture, clean, staggered letter by letter. Then the word UNPACKS: each letter's photograph grows out of the letterform into a full frame while the letters walk into a row along the foot of a PROJECT SHEET — one hero print at half the paper's width with its credit beside it (title, the project's own line, and one meta line reading place, year and project), the mood word and film stock heading the sheet and a counter reading 04 / 10. The whole section runs on TWO faces and, on the sheet, THREE type sizes — one heavy grotesque for the words that get cut out and the titles, one mono at a single size for everything else — because a page whose subject is a photograph cannot also be a page of competing labels. The letters become the FILMSTRIP — they carry their photographs down into the strip and settle there, and only once they have is the big print raised into the space above them, so you follow one thing at a time. Hover any cell and the hero cross-fades to that photograph and the counter follows, so ten prints are one hover apart and the strip always has a subject — the rest of the roll slides up to fill the cells the word was too short to carry, and a chinagraph ring is drawn on around the two keepers. RAW has three letters and CINEMATIC has nine, so the shorter the word the more of the roll arrives after it. Every mood is graded as one body of work — its own cast, grain, contrast and vignette baked into the print once — so ten unrelated photographs read as one shoot. There is no second view to open: the hero IS the print at size and the column beside it IS the credit, so selecting a cell — by hover, by tap, or with the arrow keys — does the whole job, with no modal, no scrim and no close button to find. "Click anywhere off the paper and the sheet is put down: the letters leave the strip and go back into the card they were cut from ONE BY ONE, left to right, in the same order the blade freed them — each travelling on its own eased path — a fixed half-second whatever the distance, so every letter lands with the same weight — keeping its photograph the whole way and fading only as it seats back in the card. "I want this look" opens an inquiry form laid on the desk with that mood already ringed in grease pencil, and sending it thuds a rubber stamp down on the paper. ONE canvas holds the desk, the type and the sheet; ONE requestAnimationFrame clock owns every spring on it; GSAP owns only the discrete beats. The trick that pays for the whole thing is that a glyph is used as both a clip and a brush — the photograph is composited into the letter once through source-in, and every developing veil after that is a fillText in the veil's colour at the same transform, so a letter mid-development costs two text draws a frame rather than a re-composite. Theme-aware (a working afternoon, or the same desk at 2am under one lamp), fully keyboard-operable with real focusable controls over the canvas, honours prefers-reduced-motion, DPR-capped, pauses off-screen and in hidden tabs, and re-solves the whole flat-lay for the board it is actually on: the collage has four arrangements chosen by the MAT'S ASPECT rather than by width — a column on a phone, a zig-zag down an upright tablet, a corner-pushed spread on a landscape phone, a scatter on a desk — and the sheet stands its hero beside the credit or above it on the same test, because a portrait tablet and a landscape phone are both eight hundred pixels across and want opposite layouts.
EmulsionA 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 hanging in the RIGHT half, and the headline FILLING THE BOTTOM of the frame — one word at half the viewport height, sitting on the floor with its descenders running off the edge, big enough that it stops being type you read and becomes the surface the photographs are pinned to. 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 to the left; and only once it has cleared does a note about the work RISE UP from under the fold. The PHOTOGRAPHS are the fast layer (1.4, one rate for every print) and the giant type is slow (0.70 and 0.90 per word, so the prints run 2x and 1.6x faster), so the pictures skate across in front of a word that sits almost still behind them like paint on the wall itself — scrolling feels like travelling past photographs rather than dragging a poster sideways. 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 geometry alone keeps each one out of the beat before its own — three at the opening, five at the statement, six at the archive — 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. Exactly ONE paragraph is on screen at a time — each clears the left edge before the next appears, which does more for the section than any of the motion in it. Only once all of that has arrived does the introduction let go and travel off to the left. Only then does the wall start travelling, five more prints going up at the statement and six at the archive, each new one pinned over the ones already hanging, before it ends on the contact card. Behind all of it a vermillion serif headline the height of the viewport drifts past at 62% of the camera's speed — it starts SITTING ON THE FLOOR of the section, descenders running off the bottom edge, and climbs as that first scroll lifts everything at once — TWO 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 — 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. THREE THINGS CARRY IT. First, every frame is a real PENDULUM: each print hangs from a pin somewhere along its top edge — never the centre, so it hangs crooked the way a real print does — and swings on θ'' = −(g/L)·sin(θ−θ₀) − c·θ'. Scrolling does not disturb it; the wall pans and the prints ride it dead still, and the camera is direct — one short smoothing lerp, no magnet and no momentum, so the wall stops exactly where the wheel stops. Only you move a print. Sweep the cursor through a cluster and they shove away from it; hover one and it lifts toward you, deepens its shadow and steadies, as if you'd put a finger on it; GRAB one and you swing it by hand — the angle tracks your pointer around the pin and letting go hands the release velocity straight back to the pendulum, so each rings down at its own rate because each carries its own arm length. Second, 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, so geometry does the whole job an arrival gate used to. 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. Film grain sits over the whole scene on a per-frame jitter, blended with overlay so it textures the wall without lifting the blacks out of a print. The wall ends on a vermillion contact board — a real form with underline fields, a send state and a footer. ONE raw requestAnimationFrame clock owns the camera, the pendulums, the development curves and the canvas paint; GSAP owns only the copy and chrome reveal — the photographs have NO load animation at all; the wall is simply already hung when the page opens, at full opacity, at rest and developed, because an entrance nobody asked for is a toll charged before the section can even be looked at. Theme-aware (a bone wall or a dark studio), keyboard-navigable (arrows, Home/End), wheel- and touch-driven, DPR-capped, pauses off-screen and in hidden tabs, honours prefers-reduced-motion with a still wall, and lays out its own narrower column on a phone.- New
FriezeA dark, theme-aware 3D cover-flow wall of cinematic frames. On load the panels streak in with heavy horizontal motion blur, straighten into a line, then zoom into a settled flat-plane wall where the centre frame sits head-on and the side frames rotate inward and read a little larger toward the corners. Scroll, drag (axis-locked), or arrow-key through the reel on spring momentum with a clean snap — no auto-drift, it rests composed. Frames in motion smear with a fine 18-level chromatic-aberration blur while the corner frames carry a permanent soft edge aberration, so the wall always has depth. A liquid-glass VIEW lens magnetically tracks the cursor over the wall — real refraction on Chromium, a frosted fallback elsewhere — and reads CLOSE while a frame is open. Click any frame and it flies to a centred medium hero with feathered corners as the rest of the wall tilts edge-on and recedes; a caption then resolves beneath it in a staged second beat — index, hairline rule, serif project name and a one-line description, each line rising and de-blurring in turn. Esc, the close button, or a click returns the frame to its exact slot. One requestAnimationFrame clock owns every transform, opacity and filter; GSAP tweens only the single open/close scalar and the name reveal, so the physics and the chrome never fight. Theme-aware light and dark, keyboard-operable, honours prefers-reduced-motion, DPR-capped, and verified in a 390-wide mobile portrait. Ships as a reusable component that takes any array of image frames with a name and description as data. - New
IrisA full-bleed photographic portfolio that moves like a camera lens. A large circle of focus holds each photograph — bright and sharp — over the same image blown full-bleed and gently dimmed so the two-line serif title (Playfair) reads, framed by three thin concentric rings with cardinal nodes. To travel between frames the picture doesn't cut or slide — a real camera-lens iris shuts over it: a dark round aperture closes inward to a shrinking hole until the frame is black, the photo swaps under cover of black, then the aperture opens again to reveal the new shot as the title lands a beat later. The prev/next buttons are Apple-style liquid-glass camera lenses that refract the photo behind them and blink on each shot. Wheel, drag/swipe, or arrow keys all drive it; slides mix colour and editorial black & white. A single requestAnimationFrame clock owns the aperture timeline; GSAP owns the title. Orientation-aware so the circle fills any screen; honours prefers-reduced-motion with a slow, gentle crossfade that never flashes to black. - New
AtlasAn interactive realistic Earth you explore country by country. On load the globe scales up from a point on a blue stage and the headline EXPLORE YOUR WORLD resolves with the globe sitting as the O. The Earth auto-rotates and you can drag to spin it with momentum; a day/night terminator, an ocean specular 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 driven by a country ID map rasterised at runtime from world boundary data (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. Eight countries ship richly built (China, Japan, France, Italy, Egypt, Brazil, Peru, USA) with an extensible, ISO-keyed data model so any of the rest can be fleshed out by dropping in content. One Three.js scene owns the Earth, the clouds, the atmosphere and the ID map; one requestAnimationFrame clock drives the spin, the momentum and the sun; GSAP owns the scale-in entrance and the open/close glide. Custom shaders handle the day/night lighting and the linear→sRGB grade, the globe rights itself after a vertical drag, DPR is capped, it pauses when hidden, and it disposes every texture, geometry and material on unmount. Ships as a reusable component that takes any array of country content as data. - New
ReverieA 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. - New
AssemblyA 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. - New
FilamentA 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 — background bloom and every thread — 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 is capped, it pauses off-screen and in hidden tabs, and honours prefers-reduced-motion with a composed still.
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.- New
HelixA 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. - New
AliveA 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. - New
PixelsA 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. - New
NovaA 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. - New
IsleThe 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. - New
Fluid 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. - New
Desk 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. - New
PantheonA 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.
BenchmarkAn 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.
FormationA '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.
RevolverSix 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.
RiffleA 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.
ConsoleA 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.
AuroraA 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.
OverworldA 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.
RotundaA 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.
Rooster 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 copied
AtelierA 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.
SpringA 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.
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.- Most copied
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. - Free
Cinema 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.
Picasso 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.
For the occasional build
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
For regular builders
Founding rate — $149 after Sunday, August 23
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
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 anytimeNot 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