Kinetic scroll effects

View the live Kinetic demo to see the aperture image resolve as you scroll. The demo is an exported page; this walkthrough explains how to make your own.

Choose between Cubes and Kinetic

Cubes assembles an image from separate pieces scattered in depth. Choose it when you want the construction of the picture to be visible. Kinetic treats the image as a continuous surface: it suits a fluid reveal of photography, artwork or a product silhouette. Both use the same Studio and export options, and you can switch styles without losing their settings.

Choose an image with a clear payoff

Start with one subject and a shape you can recognise after distortion: a portrait against a simple background, a product outline, or artwork with bold boundaries. The aperture demo uses rings and blades so you can see the colour separation close around their edges.

Fine print and dense screenshots are harder to read during the reveal. If the image must carry instructions, keep those instructions in the page's text instead. Check the finished frame at phone width: the animation cannot recover detail that is missing from the original image or outside its crop. The image preparation guide covers source quality and file size.

Tune four controls

• Flow

  Bends and smears the image before it resolves. Start at the default of 1, lower it to keep the subject more recognisable, or raise it toward 2 for a stronger liquid reveal. At 0 the flow distortion disappears.

• Colour split

  Separates the red, green and blue channels. The default is 0.35. Lower it for cleaner edges or raise it toward 1 for an offset print effect. Try it on high-contrast boundaries, where the difference is easiest to see.

• Pointer drift

  Lets the finished picture follow the visitor's pointer, from 0 to 1 with a default of 0.5. Set it to 0 for a page that only moves when it is scrolled. Test the scroll on a phone too; the effect should make sense without a mouse.

• Momentum

  Stretches the picture along the scroll, deepens the smear and pulls the colours apart in proportion to how fast the visitor is moving, from 0 to 1 with a default of 0.5. A fast flick drags the image with it, and it settles the moment the scroll stops. Set it to 0 for a reveal that answers to how far the page has scrolled and not to how quickly.

Change one control at a time and scroll from the start to the finished image after each change. Flow and Colour split fade to zero as the reveal finishes, so they shape the journey without touching the payoff. Pointer drift and Momentum are the two terms that stay alive over the finished picture, which is what keeps a resolved page answering to the reader. Both read as zero in exports and reduced-motion stills, Pointer drift is zero until a pointer moves, and Momentum returns to zero the moment the scroll stops.

Make your first Kinetic reveal

1. Open Kinetic in the Studio. The button above selects Kinetic and keeps your other saved settings. Both styles remain available under Mosaic → Style.
2. Drop in an image. It is processed in your browser; nothing is uploaded and no account is needed. The demo image in the Studio is also a useful starting point.
3. Set the framing. Check where your subject sits in the preview before tuning Flow and Colour split. Use the phone preview to catch a crop that only works on a wide screen.
4. Scroll the preview. Look at the beginning, the transition and the final image. Keep important copy readable throughout, and use a lower Flow value if the subject becomes too difficult to follow.
5. Download the result. Open the downloaded page in a browser and check it at the size where you intend to use it.

Export a page or use the effect in an existing site

Download the effect as one HTML file, or choose page mode to build a landing page around it. Page mode derives the palette from your image and offers editorial, technical and poster voices. With Kinetic, the headline also settles as the image resolves. The landing page guide explains the page workflow.

For an existing website, copy the generated module and follow the embedding guide. Keep ordinary page text and links available independently of the animation. Exported pages contain no ads or analytics; three.js is their external runtime dependency.

Prefer the command line? This creates the same Kinetic effect:

node cli.mjs photo.jpg --style kinetic --flow 1 --split 0.35

The documentation lists all controls, ranges and export options. For a social feed, use the Studio's video export: a feed cannot run the scroll JavaScript inside an HTML download.

Check motion and the finished page

Visitors who request reduced motion see the resolved image. If WebGL or three.js is unavailable, the generated page falls back to a still image. Review that state as well as the animation: your headline, explanation and call to action should still work when the picture is already resolved.

Create with Kinetic

Want the image to assemble from individual pieces instead? Create with Cubes or see the Cubes reveal.