Kinetic Scenes

Kinetic Scenes

A scroll-driven narrative engine — six generative art scenes woven into one continuous story. As visitors scroll, each scene fades smoothly into the next, sharing the same restrained visual language.

It's not just a background. It's a framework for telling a story with motion.

How it works

Six scenes stack in a fixed, full-viewport container behind your content. Scroll progress maps to scene visibility — each fades in and out within its own range. A text wheel navigation lets visitors click any scene name to jump to it.

Every scene is a standalone Framer code component built on raw <canvas> — no WebGL, no libraries. Offscreen scenes pause via IntersectionObserver, so six scenes cost about the same as one.

What's included

Six interactive components:

- Flow Field Particles — Particles flowing along elliptical orbits, repelled by your cursor. Auto-morph and gradient colors supported.

- Living Network — Drifting nodes connected by proximity lines that stretch around your cursor.

- Spherical Arcs — 3D curves wrapping a sphere. Hovering triggers a light spreading from the contact point.

- Spatial Wireframe — 3D mesh with draggable vertices. Reshape the structure in real time.

- Microbial Growth — A branching tree that grows and retracts with scroll.

- Schooling Fish — Boids flocking simulation with cursor avoidance.

Plus:

- Text Wheel Selector — Infinite scroll navigation with click-to-jump.

- Full scroll story template — Complete page structure and scroll mapping, ready to remix.

Key Features

- Scroll-driven transitions — scenes fade with page progress

- Fully customizable — 12–20 exposed properties per scene

- Cursor interaction — repulsion, drag, and hover activation

- Gradient colors — single or dual-color across all scenes

- Performance-first — viewport-aware pausing

- Pure Canvas — no WebGL, no libraries

Best for

Brand landing pages, product launches, portfolio sites, and agency homepages. Each component also works standalone.