Titanium phone, the frame sequence used in this demonstration

Open source. Built for the scroll.

Make the
web move.

From the first frame to the final detail.
A motion toolkit you can make your own.

Explore the examples Start building

One config. Your art direction.

120 frames · 3 widths · a budget that holds

Preparing the sequence

The toolkit

A frame engine.
A working page kit.

A reusable frame engine, an agent skill, and a collection of independently art-directed sites. Start with a working pipeline. Spend your time on the experience.

HTML · CSS · JavaScript
GSAP · Three.js · vgpu

Selected examples / 01—04

Four ways
to build with motion.

Explore the finished pages.
Inspect the source. Make one yours.

Harbor Oven website with a sculptural sourdough loaf

Harbor Oven

Neighbourhood bakery · WebGL
Vortex fitness ring website in blue and titanium

Vortex

Product study · WebGL
Halo studio website with a stone pillar and rings of light

Halo

Creative studio · WebGL
Fold's silver sculptural sheet

Fold

Material study · WebGPU

The frame pipeline

From a clip.
To a scroll.

Your footage, sampled and encoded into a responsive sequence. The visitor controls the pace.

Read the pipeline guide
01

Extract the movement

Sample 120 frames across your source clip. Keep the motion that tells the story.

extract_frames.py hero.mp4 --count 120
02

Encode the ladder

Encode 640, 960 and 1600px versions in AVIF and WebP. Each visitor downloads one sequence.

6409601600
03

Check the budget

The gate checks actual assets and fails on a breach. Cut frames, dimensions or quality before shipping.

8 MiB sequence ceiling / 1.5 MB for phone rungs

Considered defaults

Defaults you
can inspect.

The runtime follows motion preferences
and falls back to a real image.

Phones get the motion.

Phones fetch the 640 or 960 rung, held to 1.5 MB. Reduced motion, Save-Data and 2G get the real poster.

Memory has a boundary.

The bitmap cache works within 128 MiB, prioritizing the frame you need when you fling or reverse.

Your next site starts in config.

Copy the frame template. Change its copy, colors and section order in one file. Keep the engine intact.

Get started

Run it locally.
Make it yours.

The clone includes working demos and sample frames. Start the server below, then open localhost:8080. No build step or source clip is needed.

Choose your next step
Terminal
git clone https://github.com/dimeloper/motion-site-kit.git
cd motion-site-kit

python3 -m http.server 8080 --directory docs
# Open http://localhost:8080

Beyond the hero

Choose a complete
page composition.

Four page recipes and 34 section families. Preview a complete page at desktop or phone width, then copy its content brief.

Explore the page kit