LiveScroll the list, try a filter, then steep a tea
The prompt
Build an animated list for a fictional tea room, Kettlehouse Tea Room, on a deep green black page (#0e1512) with a jade accent (#7fd3a2). Left: a jade uppercase label, a serif headline "Twenty four leaves, steeped to order" and a short line of copy. Right: a 480px panel (#151f1a, 26px radius) with five filter pills (All, Green, Oolong, Black, Herbal, 44px tall, aria-pressed) and a 330px scrolling list (228px on phones) of 24 teas. Each row has a round cup swatch in the colour of the brewed tea, the name, two tasting words and the temperature and time on the right. Rows rise 14px and scale up from 0.94 as they scroll into view, using an IntersectionObserver on the list with a 0.35 threshold, and sink again as they leave. Top and bottom gradients appear only when there is more to scroll. A highlight slides behind the chosen row with a springy 380ms ease. The list is a listbox with aria-activedescendant, so arrow keys, Home and End move the choice and scroll it into view. Changing the filter fades the rows out and staggers the new ones in 55ms apart. A footer shows the chosen tea, its temperature and a "Steep it" button that runs a real countdown with a progress bar in the tea colour. Show the rows still for reduced motion.
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 filling the list with your own menu, products or episodes.
About this animated list
Long lists are where interfaces usually go grey. This animated list keeps a menu of twenty four teas lively without getting in the way. Rows rise and grow slightly as they scroll into the panel and sink again as they leave, soft gradients at the top and bottom hint that there is more, and a highlight glides behind whichever tea you pick.
The movement is tied to the scroll position through an observer on the list itself, so it costs almost nothing and never runs when nothing is moving. Filters do more than hide rows. The old ones fade out, then the new set staggers in one after another. Underneath it is a proper listbox, so the arrow keys move through the teas and screen readers announce each one, and the footer turns your choice into something useful, a real steeping timer.
Why the prompt works
It sets the reveal precisely, 14px of rise, a 0.94 scale and a 0.35 threshold.
It scopes the observer to the list, not the page, so it works inside a panel.
It asks for listbox semantics, the part most animated lists skip.
It gives the list a purpose with the timer at the bottom.
Where to use it
Menus, playlists, podcast episodes, changelogs and product pickers, anywhere people scan a long list and choose one thing.
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.
