Fluid Gallery
Exceptional
More sections
Explore the collection
- NewIsleThe Apple-grade liquid-glass island, rebuilt for the web with real optics. A glass capsule floats at the top of a cinematic photo scene — click it and it springs open into a music player with a genuine overshoot, while the displacement map behind its refraction is regenerated every frame at the in-between size, so light keeps bending correctly mid-morph. The glass is true lensing, not a flat CSS blur: a canvas-baked map (Snell's law through a convex squircle bevel, n = 1.5) drives an SVG feDisplacementMap via backdrop-filter, the backdrop magnifies at the rim, fringes with chromatic aberration exactly where light bends, and a specular rim light aims itself at the cursor. Press the glass and it energizes — illumination radiates from the touch point while the capsule dips like gel. A hand-held glass lens can be grabbed, dragged and flung; it fisheyes whatever passes beneath it and bounces off the viewport walls with a squish. Inside the player: a draggable scrubber and volume slider whose thumbs lift into brighter glass mid-drag, EQ bars that dance to the volume, and three tracks to skip through. A glass dock swaps three photographic backdrops, and the island samples the luminance behind itself to flip its content between light and dark like the real adaptive material. A glass console on the left hands visitors the optical model itself — refraction, rim width, frost, dispersion, saturation and rim light as live sliders; hold one and every piece of glass on screen (the panel included) re-bends under your thumb. The full effect ships on every main browser: desktop Chromium refracts natively, while Safari, every iPhone browser, Firefox and Android Chrome run a WebGL compositor that refracts the scene, the veils and the character-exact rasterised editorial type with the very same displacement maps — plain frost only where WebGL itself is missing. Honours prefers-reduced-motion.
- NewDesk 95A pixel-perfect Windows 95 desktop reimagined as a portfolio hero. Boots through a brief BIOS sequence into a teal #008080 wallpaper with chunky 3-D bezels, navy title bars, MS-Sans-Serif-style typography, and the unmistakable dotted-outline window drag of Win 3.1/95 — only a 1-px-dashed marquee tracks the cursor; the window snaps to that position on release. Ten draggable project files (NOIR_LEATHER.EXE, KESTREL_FW.EXE…) sit along the desktop and open into a Win95-chrome project viewer with hero photo and a Challenge / Direction / Outcome brief. A system column on the right carries My Computer, Recycle Bin, Notepad (a working textarea with the designer's CV), Calculator (a real working standard-mode calc), and an Inbox icon. The bottom taskbar carries a Start button with a 16-px multicoloured flag, a click-through Start menu (Programs / Documents / Settings / Find / Help / Run / Shut Down…), one button per open window with pressed/raised states, and a live clock. Z-order, focus, and minimise all match the original. Mobile gracefully falls back to a static "Welcome to Desk 95" tile under 1024 px.
- NewPantheonA full-bleed gallery that turns. Each master floats at centre inside a circular liquid-glass medallion — a real Snell's-law lens that refracts their masterpiece behind it at the rim — ringed by a gilt laurel wreath, their name set large in Playfair below with lifespan, movement, and the work on show. The rest of the cast curve away to the sides, smaller and drained to monochrome. Wheel over the stage, drag, tap the chevrons or pips, press the arrow keys — or simply wait — and the ring revolves: the next master glides to centre and blooms back into colour, the laurel transfers to them, the painting cross-fades to their work, and the name re-sets with a soft blurred rise. Seven public-domain icons — David's Napoleon Crossing the Alps, the Mona Lisa, The Starry Night, The Great Wave, The Kiss, the Birth of Venus, the Night Watch — each shown with the artist's own portrait. One displacement map, baked once for the medallion box and shared by every lens via a single SVG filter, keeps the optics physically real on Chromium; Safari and Firefox fall back to a frosted rim. A patient auto-advance pauses on interaction and resumes on idle; theme-aware museum staging (near-black in dark, warm white-cube in light); honours prefers-reduced-motion.
- NewBenchmarkAn Apple-Keynote performance slide turned into a living section, split roughly 38 / 62 horizontally — figure on the left, claims on the right. On the left, a giant Poppins figure (80%, 5×, 2.4M, 99.9%) each number carries its own static radial gradient — varied hues over one shared structure (a bright origin pushed below the glyphs so no hot dot shows) — clipped to the digits, under a small mono 'source' tag. On the right, a vertical column of one-line SaaS claims sits under a focus lens: only size and colour change with distance — only the single centred claim is dark (#010102) and large, every other claim a flat grey (#636365); size still falls off smoothly with distance, with no blur and a constant font weight. The list steps one claim at a time with an expo.inOut snap, dwelling while each claim sits aligned with the figure, then snapping to the next — an endless, snappy auto-cycle; whichever claim owns the centre drives the figure, which rebuilds with a scale + y snap (no blur, expo.out) as the number changes. A wheel notch or touch drag steps it manually and pauses the cycle; after a short idle the auto-cycle resumes — gated to when the cursor is over the section so the page scrolls normally elsewhere. One rAF clock owns the per-row transforms and the gradient while a GSAP expo.inOut tween owns the stepped position; React only re-renders the one discrete bit — the focused claim, which the figure renders straight off, so number and claim can never drift apart. A fixed light palette (#F2F2F4), a screen-reader list of the real stats, a live tuning panel (timing, sizes, lens) on ?tune=1, and prefers-reduced-motion that holds each claim still while keeping manual stepping.