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 https://ui.aryank.space/r/creative-clutter.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| 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