Creative Clutter Flip Layouts
What it does
A messy-desk hero of 11 floating cut-out items scattered around a centered Space Grotesk display header, with three arrangements (chaos scatter, tidy cleanup grid, notebook cluster) switched via bottom icon buttons. Each switch captures Flip.getState, applies new percent-based positions and rotations with gsap.set, then animates with Flip.from (1.25s, power3.inOut, 0.1s center-out stagger, absolute); the layout recalculates on window resize.
How it's built
| Category | interactive |
|---|---|
| Tech | gsap |
| GSAP plugins | Flip |
| Complexity | section |
| Performance cost | light |
| Mobile-safe | yes |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Creative Clutter — Flip Layout Switch
## Goal
Build a full-viewport, light "messy desk" hero: **11 cut-out desk objects** (music player card, CD, error dialog, folder icon, mini computer, ruled paper, passport, portrait poster, app icon, lighter, cursor) float at scattered positions and angles around a **centered display headline block**. Three small icon buttons at the bottom switch between **three named arrangements** — `chaos` (a random-looking scatter), `cleanup` (a tidier, un-rotated spread with the header pushed to the right), and `notebook` (a tight cluster). The star effect: on each button press, **GSAP Flip** captures the current layout and smoothly morphs every object AND the header from its old position/size/rotation to the new one, with a slow `power3.inOut` ease and a center-out stagger, so the whole desk re-organizes itself in one fluid choreographed move.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) plus the GSAP plugin **`Flip`** (imported from `gsap/all` and registered with `gsap.registerPlugin(Flip)`). No smooth-scroll, no other libraries. Ship one `index.html` (`<link rel="stylesheet" href="./styles.css">` and `<script type="module" src="./script.js">`), one `styles.css`, one ES-module `script.js`. Must run in a fresh Vite + npm project.
## Layout / HTML
```html
<section class="desk">
<div class="header">
<h1>Creative Clutter</h1>
<p>The best ideas live somewhere between a coffee stain and a half-open
folder, scattered things have a way of finding others when you stop
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.