Cinema Reel
Exceptional
More sections
Explore the collection
- 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.
- NewApertureA curated editorial scatter of photographs — frames at deliberately varied sizes (some large, some small) separated by airy, uneven negative space, with several deliberately bleeding past the left and right edges — laid out as a hand-placed tile that loops vertically (a single alternating, edge-bleeding column on mobile). It holds its horizontal position — nothing slides sideways; instead the whole view drifts slowly and continuously upward on its own, and you can scroll up or down (wheel or drag) on top of that, with the whole tile looping forever. As you scroll, the wall bows GENTLY around a horizontal focal line like a soft lens: scrolling DOWN bends it slightly convex (the centre eases toward you while the top and bottom frames tilt and recede), scrolling UP bends it concave (the rim leans toward you). The curve is driven by scroll velocity and smoothed so it ramps in and relaxes back to flat — it never folds into a hard barrel. On top of the bow, the whole wall balloons a touch larger as you scroll down — the gaps widening and the outer frames spilling further past the screen edges — and eases smaller as you scroll up. Click any frame, wherever it sits, and it zooms from its exact rectangle to fill the screen — its title, location and year, and the camera it was shot on (body, lens, focal length, aperture, shutter, ISO) fading in over a cinematic scrim; the close button, a click anywhere, or Escape shrinks it straight back into its exact place in the wall. A single raw requestAnimationFrame loop owns the wall — the auto-scroll, the velocity-eased curl, the looping vertical wrap, the cylinder projection and a live z-sorted click hit-test — while GSAP drives only the entrance bloom and the zoom. The section never pins the page; it captures the wheel itself. Theme-aware chrome, a flat reduced-motion fallback, and full teardown on unmount. Eighteen frames ship in from the in-house set with believable shot data; swap your own by editing photos.ts.
- NewFormationA 'Selected Works' portfolio wall built on one set of cards and four formations, switched from a header toggle: Flat — a scattered ellipse ring hugging the viewport with a clean centre; Tilt — a big horizontal row, every card turned the same way in 3D and bleeding off both edges; Ring — a descending diagonal S-wave from top-right to bottom-left, cards overlapping into depth; Gallery — a large coverflow filmstrip you drag through. Switching a toggle springs every card from its current pose to the new formation, so the change reads as one continuous morph rather than a cut. A single rAF loop owns the per-card springs, a cursor-following 3D lean of the whole wall, a drag offset to pan/scrub the linear formations, and a live hover hit-test that lifts whichever card the cursor is over and floats its title. Each card is a self-contained generated poster built from a per-work palette (real photography drops in by URL). Click any card and it grows from its exact on-screen rect into a centred detail panel with the brief; Esc or the backdrop closes it. GSAP owns the staggered entrance bloom and the open/close; reduced-motion snaps to the Flat formation; the loop pauses off-screen and in hidden tabs.
- NewRevolverSix two-sided premium debit cards ride an invisible, tilted 3D wheel — and somersault as they travel. Each card enters from the bottom of the scene close to the camera showing its BACK (holder name, number, tap-to-pay — all the personal data lives there), tumbles forward through a near-invisible edge-on sliver, lands FRONT face-on at the centre-stage hero pose — the clean design face, kept alive by cursor-tracked tilt and a moving specular sheen — then keeps rotating the same direction through edge-on again to show its back as it recedes into the top stack, smaller, dimmer, softer. Roughly 360° of continuous rotation per visible pass, never reversing, never snapping. One continuous position float drives every card through shared Catmull-Rom station splines, so the six cards move as one machine: consistent spacing, one shared somersault curve, atmospheric depth-of-field. Critically-damped spring physics — soft acceleration, soft deceleration, zero bounce. Wheel, drag, fling (clamped to ±2 slots), tap any visible card to call it to the stage, pips, arrow keys, and a patient auto-advance. Each finish is a tone-on-tone engraving: contour squiggles, a ghosted chip-grid, fine rules, a satin band, star specks, brushed metal.