crucıble

Inlay

The living bento: a six-tile features grid where every tile performs a real micro-demo instead of an icon — search that types and filters, a switch that unlocks a row, a bar chart that redraws, named cursors over a mini doc, ⌘K keycaps that pop a palette, and a packet syncing two devices. A staggered idle loop keeps about two tiles performing; hover, focus or tap takes a tile over, with a cursor-follow accent border light.

motionpro

Installation

CLI

npx shadcn@latest add @crucible/inlay

Manual — install dependencies, then copy the source

npm install motion

Props

PropTypeDefaultDescription
tilesInlayTile[]Per-tile overrides, index-aligned with the six built-in tiles (Search, Toggle, Chart, Presence, Shortcut, Sync). The array length sets the tile count; each entry merges onto the built-in tile at the same index. Omit for the full default bento.
eyebrowReact.ReactNode"Features"Small label above the heading. Pass null to hide.
headingReact.ReactNode"Small details, working together"Section heading. Pass null to hide the whole header.
descriptionReact.ReactNodeSupporting line under the heading. Pass null to hide.
accentColorstring"#6ee7b7"Signature accent for highlights, the cursor-follow border light and focus rings.
columns1 | 2 | 33Maximum columns on wide containers. 3 uses the varied-span bento; 2 pairs tiles evenly; 1 stacks. Narrow containers always stack.
pausedbooleanfalseStop the ambient idle loop (hover, focus and play() still run tiles).
refReact.Ref<InlayHandle>Imperative handle (replay(), play(index)). React 19 ref-as-prop.
classNamestringExtra classes for the <section> root.
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"section">, "children" | "title"> — they pass through to the underlying element.

Honors prefers-reduced-motion with a designed static fallback, and passes className through.