ISby Informeek Studio·Made with Claude·11 November 2026
LiveWatch the pill change word, width and colour
The prompt
Claude · Claude Opus 5.5
Build a rotating text animation in a light, warm hero. Off-white background (#fbf7f2), near-black extra bold headline "Launch your [word] website this weekend" with a line break before "website". The [word] sits in a rounded pill that cycles every 2.2 seconds through bakery, studio, dental clinic, bookshop and yoga class. Each word has its own soft pill colour and matching dark text: peach #ffd6c9 / #9a2f12, blue #d7e8ff / #1e4d9b, mint #d8f5e3 / #17663d, lilac #efe0ff / #5b2a99, butter #fff0c2 / #7a5300. The old word slides up and fades out while the new one slides up from below, and the pill smoothly changes width and colour over 0.55s. Measure word widths with a canvas so nothing overflows the page. Add a grey subline "Templates, copy and a booking page, set up in an afternoon." Use aria-live on the pill and stop the rotation 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 listing the audiences or products you want to cycle through.
About this rotating text animation
A rotating text animation lets one headline speak to several audiences without five versions of the page. Here the word in the coloured pill cycles from bakery to studio to dental clinic, and each visitor sees their own business named within a few seconds.
The detail that makes it feel polished is the pill. It does not just swap the word; it smoothly grows or shrinks to fit the new one and changes colour at the same time, while the old word slides up and out. Without the width animation, the rest of the headline would jump sideways every two seconds.
Why the prompt works
It lists every word and its colours, so the tool does not invent a palette.
It describes both directions of movement, out the top and in from below.
It asks for canvas measuring, which avoids hidden elements that make the page scroll sideways.
It covers accessibility with aria-live and a reduced motion stop.
Where to use it
Landing pages for products with several kinds of customer, agency homepages and template sites. Five words is plenty: the visitor should catch theirs before they scroll.
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.