Mischief

Family

Scenes

Backdrops and moments where the drawing is the job, each one taking its colours from the theme it was installed into.

Components18

84Render Surface

The canvas the other scenes are drawn on. It stays the size of its box, sleeps when nobody is looking at it, and holds still when motion is reduced.

85Aurora Field

A drifting gradient backdrop for a hero or an empty state, built from the colours already in your theme rather than from a palette it brought with it.

86Grain Overlay

Film grain for any positioned box, which incidentally fixes the banding a wide gradient shows on a good monitor.

87Spotlight Card

A card that catches a light following the pointer, and can light every card in its grid from the same pointer at once.

88Constellation Field

Drifting points joined by lines when they come close, brightening and swelling around the pointer.

89Lattice Field

A grid of dots that parts around the pointer and falls apart when pressed, then climbs back into line.

90Burst

A short burst of pieces for the moment something finally completes. It draws nothing until it is fired and stops as soon as the last piece falls out of the box.

91Shader Surface

Four shader backdrops -- caustics, metal, plasma and ripple -- each taking its two colours from your theme, so the same surface arrives dark in a dark application and light in a light one.

92Displacement Image

Two images crossing by pushing their pixels through the same noise in opposite directions, with the first image also present as ordinary markup for anything that cannot run it.

93Scene Hero

A lit three-dimensional object behind a headline, steered by the pointer and coloured by the theme. The one component here that asks for three.

94Scroll Scene

Turns the scrolling of a tall element into a number between nought and one, published to a custom property and to a callback, without rendering the page to do it.

99Tilt Card

A card that leans toward the pointer as though it were a physical object lying on the page.

100Connection Beam

A line between two elements with something travelling along it, measured from the elements rather than given as coordinates.

101Cursor Trail

A fading mark behind the pointer, drawn only inside its own box and only while the pointer is in it.

102Metaballs

Blobs that swell into one another as they meet, taking their two colours from your theme.

103Dither Image

A photograph reduced to two theme colours through an ordered dither, the way a newspaper reduced one to ink and paper.

104ASCII Image

A photograph redrawn as characters. The grid is worked out once and kept, so each frame is a single copy rather than thousands of letters measured again.

105Wireframe Globe

A wireframe world with places marked on it, arcs between them, and the same places written out underneath as text.

Installing one

Each of these copies its source into your project, the same as any other component in the registry.

npx shadcn@latest add Tinkerers-Labs/mischief-ui/render-surface

Other families