Nova
Exceptional
More sections
Explore the collection
- NewPixelsA full-viewport 'what we offer' values scroller staged on faint graph paper, shipping with Motion's own brand values as the demo copy. One big procedurally-generated pixel sprite (a ghost, a robot, a heart, a star — each drawn from disc/rect/heart-curve/star-polygon primitives and auto-outlined, no external assets) sits centred on the grid; a 5-link top nav and a 4-link footer frame it, each evenly divided. Scroll and ONE full-width line defines the whole change: it rises from just below the description, up through the icon, to just above the heading, and everything it passes flips from offering A to B. The sprite replaces itself ROW BY ROW across the line (glitch-torn right at it), and the heading and description are CUT by the same line — the old offering keeps the slice above it, the new one takes the slice below — so nothing overlaps the line and the copy moves in lockstep with it, the number, title and copy never desyncing. It reverses exactly on scroll-up. Everything is driven purely by scroll — nothing auto-plays, and the list does not loop (scroll down to the last offering, scroll up to return to the first); wheel/touch is captured only while the cursor is over the section (the page scrolls normally elsewhere), and it holds exactly where you leave it — even mid-change, with the sprite half-changed and the line parked in the middle. The graph-paper grid stays perfectly static; only the coloured pixels change on it. One rAF clock owns the canvas and every per-frame text transform under a pure-easing scrub driver; GSAP drives only the entrance fade. Hover the icon and the pixels float away from the cursor — each a little spring pushed out of its radius — then re-assemble when you leave; click and a soft decaying force breathes every pixel outward — slowly and smoothly — before the home-spring eases them back into place. Theme-aware (the sprite keyline flips light↔dark), pauses off-screen, honours prefers-reduced-motion.
- NewIsleThe Apple-grade liquid-glass island, rebuilt for the web with real optics. A glass capsule floats at the top of a cinematic photo scene — click it and it springs open into a music player with a genuine overshoot, while the displacement map behind its refraction is regenerated every frame at the in-between size, so light keeps bending correctly mid-morph. The glass is true lensing, not a flat CSS blur: a canvas-baked map (Snell's law through a convex squircle bevel, n = 1.5) drives an SVG feDisplacementMap via backdrop-filter, the backdrop magnifies at the rim, fringes with chromatic aberration exactly where light bends, and a specular rim light aims itself at the cursor. Press the glass and it energizes — illumination radiates from the touch point while the capsule dips like gel. A hand-held glass lens can be grabbed, dragged and flung; it fisheyes whatever passes beneath it and bounces off the viewport walls with a squish. Inside the player: a draggable scrubber and volume slider whose thumbs lift into brighter glass mid-drag, EQ bars that dance to the volume, and three tracks to skip through. A glass dock swaps three photographic backdrops, and the island samples the luminance behind itself to flip its content between light and dark like the real adaptive material. A glass console on the left hands visitors the optical model itself — refraction, rim width, frost, dispersion, saturation and rim light as live sliders; hold one and every piece of glass on screen (the panel included) re-bends under your thumb. The full effect ships on every main browser: desktop Chromium refracts natively, while Safari, every iPhone browser, Firefox and Android Chrome run a WebGL compositor that refracts the scene, the veils and the character-exact rasterised editorial type with the very same displacement maps — plain frost only where WebGL itself is missing. Honours prefers-reduced-motion.
- NewFluid GalleryA moody, cinematic image collection — prismatic eye close-ups, long-exposure silhouettes and reaching hands — grouped into three moods (Light, Drift and Reach) and chosen to glow in both light and dark mode (darker frames get a per-photo exposure lift so they never sink into the dark canvas). A clean canvas is washed with soft ambient shadows like sun through a window — a soft shadow up top, shadowed left and right edges, bright vertical light streaks between (warm white in light, deep slate in dark); the images float on it with no drop shadow of their own — the shadow lives in the background. Every card is a plane in a single WebGL scene (an orthographic pixel camera with a rounded-rect SDF mask, so there is no DOM per card — the canvas paints them and JS hit-tests the pointer). It opens with a clean entrance — the images scale up, un-blur and rise into place, staggered as each decodes, with no placeholder flash. Scrolling is captured — the wheel or a touch drag never moves the page on, it just cycles the gallery on a diagonal: the next image waits small and rotated in the bottom-right corner, glides to centre stage to become the main, then exits to the top-left corner as the one after it rises in — looping forever in both directions with no dead-end. Hover a card and a liquid blob ripples and refracts just under the cursor, in the hovered corner — the only fluid left in the scene. Click and the image swings open from its exact rect to full-bleed with a 3D perspective tilt — rotating in tilted, then flattening face-on — its rounded corners melting from a soft squircle to a sharp edge, and only once it lands does its plate fade in: the mood, the title, a one-line note, and the technique · year. Click anywhere or Esc to swing it back the same way (mirrored). Three.js owns the scene and image textures (streamed through a small concurrency pool so the open never janks); GSAP tweens each card's morph and the entrance; one rAF clock drives the shader time, the scroll switch, hover easing and the background drift. The loop pauses in hidden tabs, pixel-ratio is capped, and the GL context is fully disposed on unmount.
- NewDesk 95A pixel-perfect Windows 95 desktop reimagined as a portfolio hero. Boots through a brief BIOS sequence into a teal #008080 wallpaper with chunky 3-D bezels, navy title bars, MS-Sans-Serif-style typography, and the unmistakable dotted-outline window drag of Win 3.1/95 — only a 1-px-dashed marquee tracks the cursor; the window snaps to that position on release. Ten draggable project files (NOIR_LEATHER.EXE, KESTREL_FW.EXE…) sit along the desktop and open into a Win95-chrome project viewer with hero photo and a Challenge / Direction / Outcome brief. A system column on the right carries My Computer, Recycle Bin, Notepad (a working textarea with the designer's CV), Calculator (a real working standard-mode calc), and an Inbox icon. The bottom taskbar carries a Start button with a 16-px multicoloured flag, a click-through Start menu (Programs / Documents / Settings / Find / Help / Run / Shut Down…), one button per open window with pressed/raised states, and a live clock. Z-order, focus, and minimise all match the original. Mobile gracefully falls back to a static "Welcome to Desk 95" tile under 1024 px.