Infinite Motion — Lemniscate Gallery
Overview
Infinite Motion is an interactive visual experience where 25 portrait images orbit continuously along a mathematically-defined lemniscate of Bernoulli — a figure-eight infinity curve. Scroll, swipe, or drag in any direction and the entire formation responds, each tile shifting in scale, opacity, and z-depth to simulate genuine three-dimensional movement across the curve. The depth of field emerges purely from parametric math: no canvas, no WebGL, only precisely calculated CSS transforms applied at 60fps. A staggered character-level headline animation greets the experience on load, each letter performing a 3D rotational flip with an overshoot ease before settling into place.
Tech Stack
- React 19
- Vite
- GSAP
- Lenis
- Tailwind CSS
Highlights
- Infinity curve built on the lemniscate of Bernoulli parametric equations, calculated per-tile every frame
- Depth simulation through cosine-derived scale [0.4–1.05] and opacity [0.35–1.0] mapping
- Dynamic z-index layering computed from the sine component of each tile's curve position
- Scroll, wheel, touch, and pointer input unified through a single GSAP Observer instance
- Scroll, wheel, touch, and pointer input unified through a single GSAP Observer instance gsap.quickTo drives a persistent progress tween, delivering smooth inertial deceleration on every input
- Per-character SplitText animation with rotationX: 180°, 3D transform origin, and back.out overshoot stagger
- Orbit radii recompute live on ResizeObserver events, keeping the curve proportional at every viewport size
- Lenis smooth scroll with cubic ease-out easing, manual RAF loop, and prefers-reduced-motion support
Formats
Github RepositoryGet Access to this Resource
Get instant access to your custom-built website, complete with stunning design and seamless functionality. Start showcasing your brand today!