Iris
Exceptional
You can clone, edit, and host in modulify.ai
More sections
Explore the collection
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
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.