cututs

Flat colour figures that draw themselves and answer the pointer. For React and for anything with a DOM.

npm i cutoutsGitHubHow to use it

25 figures

Your system asks for reduced motion, so every figure here is complete and still.

orbit

The moons run round the ring to the pointer and gather where it touches. The disc leans after it.

bars

Each bar reaches for the pointer as it passes. The ball rides the middle one.

halves

The halves part as the pointer nears the seam, and the ball drops into the gap.

rings

The rings turn like dials as the pointer crosses, each at its own rate. The one under it swells.

quarters

The quarter the pointer is over pulls out of the disc, and the centre dot looks its way.

dashboard

The red dot scrubs the chart to the pointer and the line draws up to it. The card under the pointer lifts.

swap

The disc follows the pointer back to its empty ring in an arc, shrinking to fit, and the square tips as it leaves.

release

The box under the pointer lifts and its dot swells. Over the first box, the arrow steps back one more.

redline

The pointer scrubs the edit: to the left the strike is taken back and the blue passage closes up; to the right it is made again.

crates

The top crate slides along the two below to stay under the pointer. The ball hops when the pointer comes near.

phone

The phone tilts toward the pointer and its screen scrolls with the pointer’s height. The badge swells as the pointer nears it.

checks

Each row is a slider. The disc in the pointer’s row runs along its line to the pointer.

pair

The discs close over each other as the pointer nears the middle and part toward the edges. The red dot grows with the overlap.

compose

The caret jumps to the gap nearest the pointer and blinks there. The blocks beside it make room.

chat

The typing dots bounce in a wave while the pointer is there. The bubble nearer the pointer swells and the two slide apart.

look

The eye follows the pointer, the pupil a little ahead of the iris, and the brow tilts with it.

dial

The needle swings to point at the pointer, and the bar below fills to the same reading.

toggle

The switch follows the pointer’s side: left turns it off and dims the light, right turns it back on.

cradle

The cradle runs while the pointer is there: the end balls swing out in turn, further the nearer the pointer is to a side.

dawn

The sun rises and sets with the pointer’s height and drifts after it. Its reflection widens as it climbs, and the boat rocks.

dots

The dots swell under the pointer and lean away from it, like a lens passing over the grid.

select

The pointer drags the red handle and the frame stretches after it. Shapes it takes in lift a little.

keys

The key under the pointer sinks flat onto its shadow, and the keys beside it dip.

snip

The scissors travel along the line with the pointer, and snip as it moves.

fan

The hand turns toward the pointer and opens wider as the pointer rises. The card under it slides up out of the fan.

Use it

Anything with a DOM

import { mount, orbit } from 'cutouts';

const figure = mount(el, orbit, { play: true });

figure.update({ intensity: 0.8 });
figure.destroy();

React

import { Orbit } from 'cutouts/react';

export function Hero() {
  return <Orbit intensity={0.8} />;
}

On a server

import { orbit, svg } from 'cutouts';

// A plain string. No DOM, no script,
// and nothing shifts when the page loads.
const html = svg(orbit);

Theme

.figures {
  --cutouts-blue: #1d4ed8;
  --cutouts-red: #e11d48;
  --cutouts-paper: #fafaf9;
}

With shadcn

npx shadcn@latest add https://cutouts.loadingthelife.eu.org/r/cutouts.json