KR1SH9A

Motion

A playground to showcase my scroll animations. Built with Next.js, GSAP ScrollTrigger, Motion, Lenis, and a high-performance canvas image sequence renderer.

View ProjectsSource Code
Scroll for the demo
Scroll example

An example of a scroll animation I made

A pinned canvas plays back 162 WebP frames as you scroll — decoded once via createImageBitmap, redrawn with cover-fit math, coalesced through a single requestAnimationFrame.

Loading frames · 0/162
Animation details

The stack behind the scroll

Five technologies, one cohesive runtime — chosen for cinematic motion, predictable timing, and 60fps under load.

Next.js 16
App Router, React Server Components, Turbopack-by-default builds, and metadata baked in.
Engineered for fluid motion
GSAP ScrollTrigger
Frame-accurate pinning and scrub controls drive the hero canvas with sub-pixel precision.
Engineered for fluid motion
Motion
Spring-eased overlays, viewport-triggered reveals, and orchestrated section transitions.
Engineered for fluid motion
Lenis
Inertia-based smooth scrolling, synchronised with GSAP through a single shared ticker.
Engineered for fluid motion
Canvas Image Sequence
A single canvas renders 162 decoded WebP frames using cover-fit math and rAF coalescing.
Engineered for fluid motion
Performance

Built for buttery 60fps

Every decision optimises for smooth scroll, low memory, and a clean main thread.

Optimised frames

1920×1080 WebP, streamed lazily.

Target framerate

RAF-coalesced canvas writes.

Canvas rendered

Zero <img> nodes on screen.

Total payload

Below the fold; first paint instant.

Lighthouse score

Performance, A11y, Best Practices.

Showcase

More experiments incoming

A growing collection of scroll, pointer, and time-based motion studies.

Shipped01

Scroll-driven hero sequence

A pinned canvas plays back 162 WebP frames at 60fps as you scroll the page.

Coming soon02

WebGL parallax fields

Layered depth-of-field driven by pointer + scroll position, GPU-only.

Coming soon03

Type that breathes

Variable-font weight and tracking lerped to scroll progress with Lenis.

Coming soon04

Magnetic cursor & buttons

Pointer-following affordances with spring physics, motion/react driven.

Coming soon05

Section transitions

Crossfade + scale page chapters using React 19 View Transitions.

Coming soon06

Audio-reactive canvas

AnalyserNode amplitude piped into a custom 2D shader for ambient visuals.