Creative Clutter
A desk of scattered cutout objects that reflows between three named layouts. Eleven props are placed as a percentage of the board with a headline floating among them; chaos, cleanup, and notebook buttons swap the whole arrangement while GSAP Flip tweens every object and the heading from where they were to where they land, staggered from the center. Reads from its own box, so it embeds anywhere.
npx shadcn@latest add @compronents/creative-clutterInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
| Prop | Type | Default | Description |
|---|---|---|---|
| images | string[] | 11 Compronents-hosted PNGs | Cutout props in order: music, cd, dialog, folder, macmini, paper, passport, portrait, appicon, lighter, cursor. |
| heading / paragraph | string | "Creative Clutter" / a short line | The floating headline and its supporting copy. |
| background / textColor / mutedColor | string | "#f5f2ed" / "#171717" / "#5f5f5f" | Board background, heading ink, and paragraph tone. |
| surfaceColor / borderColor | string | "#f5f2ed" / "#e0dfd7" | Mode button surface and border colors. |
background / textColor / mutedColorcolorBoard surface, heading ink, and the paragraph tone.
surfaceColor / borderColorcolorThe mode button surface and border.
heading / paragraphtextThe floating title and its supporting line.
imagesasset-urlEleven cutout props, hosted through https://ui.aryank.space/assets/creative-clutter/music.png and the rest of the named set.
gsap