Create a client files folder for a fictional builder, Ashgrove Builders, on a warm paper page (#f1ece3). Centre a terracotta (#c75b39) uppercase label, the heading "Your new kitchen, in one folder" and a manila folder 370 by 250px. Layers: a back panel (#cf9440) with a tab on the top left, three white papers (#fffdf8) peeking out at slight angles, and a front panel button in a gradient from #f3cb7d to #d9a049 with a cream label "Flat 3, 27 Larch Street, Kitchen refit, March 2027" and a tilted "APPROVED" stamp. Hovering the closed folder tips the front 9 degrees and lifts the papers. Clicking it rotates the front panel minus 46 degrees on X from its bottom edge in a 1100px perspective, and the papers rise and fan out, scaled to 72%, to minus 118, 0 and 118px across and up to 138px, rotated minus 10, 1 and 10 degrees, with 60ms staggers and an overshooting cubic-bezier(.3,1.45,.5,1). The papers are a quote with a total of £18,420, a floor plan drawn in SVG and a sheet of tile swatches. When open they lean up to 10px towards the pointer, and clicking one opens a dialog with the full content, such as the itemised quote. Escape closes the dialog, then the folder. On touch screens the closed papers peek up every 3.6s. Reduced motion makes moves instant.
Written by Informeek Studio to recreate this design. Prompts are not deterministic: running it again gives a similar result, not an identical one.
Use it in three steps
Copy the prompt with the button above.
Paste it into your tool, such as v0, Lovable, Bolt or Claude.
Make it yours by relabelling the folder and drawing the three documents your clients need.
About this folder animation
This folder animation behaves like the real thing on a desk. The front flap tips towards you on its bottom edge, and the three papers inside spring up and fan out with a small overshoot, each a moment after the last. Before you open it the papers already peek over the top, so you can see there is something inside, and hovering nudges them up a little more.
It is also a useful pattern, not just a toy. Each paper is a button with a readable preview: the quote with its total, a floor plan drawn in SVG and a set of tile swatches. Clicking one opens the full document in a dialog, and Escape steps back out, first from the document and then from the folder.
Why the prompt works
It builds the folder in layers, back panel, papers and a hinged front.
It gives every paper a position, angle and delay, so the fan lands neatly.
It writes real document content, including the itemised quote.
It plans the keyboard and touch flow, from opening to closing.
Where to use it
Client portals, project handovers, press kits and portfolio case studies. Three to five papers read well; any more and the fan gets crowded.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
We use cookies to measure how the site is used and, if you allow it, to show advertising. Prompts you copy and previews you try are never collected. See our privacy policy.
