Every piece finds its place.
Scree is an open-source engine that breaks any picture into pieces — and settles every piece where it belongs in the next. Real pixels. Exact frames. Right in the browser.
Scroll to descend02 Break
Every form has a fault line.
Screens, logos, photographs, words. Scree finds the seams in any picture and cuts it into pieces that remember exactly where they came from.
03 Fall
Then gravity takes it.
Pieces fall, tumble and heap up as scree. Twenty ways to come apart — and every one leaves from your real first frame.
04 Match
Nothing lands at random.
Every stone is paired, by place and by colour, with a spot in the next picture. The eye can follow the change instead of guessing at it.
05 Settle
Not a cut. Not a fade.
One continuous movement from what was to what is — exact on the first frame, exact on the last.
06 The library
Twenty ways to fall.
Hover or tap a name — the stage plays it.
07 For builders
Three lines to a landslide.
Vanilla or React, one dependency (three.js). Bring any image, pick an effect, scrub it with scroll or export a frame-exact MP4.
import { createScree, createImageTarget } from "scree-core";
const scree = createScree({ canvas, effect: "shatter" });
scree.addTarget("before", await createImageTarget("/v1.png"));
scree.addTarget("after", await createImageTarget("/v2.png"));
scree.transition({ from: "before", to: "after" });
// or: scroll-drive it, or scree.record() an MP4- Transitions
- 19
- Gzipped
- 39KB
- Runtime deps
- 1
- Frames
- Exact
Make something fall into place.