Family
Scenes
Backdrops and moments where the drawing is the job, each one taking its colours from the theme it was installed into.
Components18
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 FieldA 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 OverlayFilm grain for any positioned box, which incidentally fixes the banding a wide gradient shows on a good monitor.
87Spotlight CardA card that catches a light following the pointer, and can light every card in its grid from the same pointer at once.
88Constellation FieldDrifting points joined by lines when they come close, brightening and swelling around the pointer.
89Lattice FieldA grid of dots that parts around the pointer and falls apart when pressed, then climbs back into line.
90BurstA 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 SurfaceFour 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 ImageTwo 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 HeroA 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 SceneTurns 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 CardA card that leans toward the pointer as though it were a physical object lying on the page.
100Connection BeamA line between two elements with something travelling along it, measured from the elements rather than given as coordinates.
101Cursor TrailA fading mark behind the pointer, drawn only inside its own box and only while the pointer is in it.
102MetaballsBlobs that swell into one another as they meet, taking their two colours from your theme.
103Dither ImageA photograph reduced to two theme colours through an ordered dither, the way a newspaper reduced one to ink and paper.
104ASCII ImageA 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 GlobeA 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