Helix
Exceptional
More sections
Explore the collection
- NewAliveA 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.
- 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.
- NewNovaA 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.
- 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.