Build an app feature tour for a fictional vet practice app, Fernhill Vets, on a pale sage page (#eef3ee). Left column: a green (#2f8f6b) paw label, the heading "Your vet, between visits" in deep green (#12302a), one line of copy and four feature buttons with coloured icon squares: Book a check up, Jab reminders, Ask a nurse and Weight log. The active one is white with a progress bar that fills over 4.2s. Right column: four white app screen cards, 330 by 256px with 22px radius and a coloured header (#cdebd9, #ffe3a1, #cfe8f5, #ffd4c8), stacked in 3D inside a 1300px perspective, the stack turned rotateX 9 degrees and rotateY minus 17. Card n sits 36px right, 34px up and 80px back from the one in front and is slightly dimmer. Every 4.2s the front card drops 300px and fades in 420ms, then climbs into the back slot while the others step forward over 750ms with an overshooting cubic-bezier(.3,1.35,.45,1). Draw each screen with small HTML and SVG: a day picker with time slots and a vet, a pet with three jab rows, a nurse chat and a weight line chart. Clicking a feature swaps cards until it reaches the front. Hover pauses; add previous, pause and next buttons. On phones hide the list, scale the stack to 238px cards and show dots. Reduced motion stops the auto tour.
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 drawing your own app screens and renaming the four features.
About this card stack animation
This card stack animation turns a feature list into something you watch. Four app screens sit in a tilted 3D stack, each one a step further back, higher and dimmer. Every few seconds the front card drops and fades, then climbs back in behind the others while the rest step forward with a small overshoot. It is not a swipe deck: nobody has to drag anything, and the stack simply tours the app on its own.
The feature list on the left stays in sync. The active feature shows a progress bar that fills while its card is in front, and clicking any feature cycles the stack until that screen arrives. Hovering the stack pauses it, and a pause button covers people who need the motion to stop.
Why the prompt works
- It gives the slot offsets in pixels, which is what makes the stack read as depth.
- It splits the swap into two moves, a quick drop and a slower climb to the back.
- It ties the list to the stack, so the tour is navigable rather than decorative.
- It includes pause controls and a reduced motion rule.
Where to use it
App landing pages, product tours and onboarding screens. Four or five cards is the sweet spot; more and people never see the last one.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
