Cursor animation: a crew of cursors builds the page

Cursor Animation plays a build on a real page: a crew of cursors, each in its own color, puts together what the visitor sees, the way it is done in a design tool. A cursor presses on the top-left corner of a piece, turns into a crosshair and drags a selection frame to the opposite corner while the piece fills in inside it, with its size shown live and dotted guides running in from the edges of the screen. Headings and paragraphs are typed out a letter at a time instead. The first screen is built on load and the rest as it scrolls into view, and each cursor rests where it finished.

How it works

1. 01

   Pick a page

   Start on a landing page, a product workspace or a journal article, and scroll the preview to watch each part being built as it comes into view.

2. 02

   Tune the crew

   Choose what it builds (as you scroll, the first screen or the whole page), how text arrives and the pace. In the Crew list, give each cursor its own color, name and picture (a photo or your logo, on one cursor or on all), add or remove cursors, and pick the name tags' size and what the cursors do after the build.

3. 03

   Use it or export it