Explore the collection

Show all →

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.