LiveScroll inside the preview to bring the lines in
The prompt
Build a three section exhibition page for a maritime museum where every headline letter floats up into place as you scroll. Use a full screen scroll container with a deep teal gradient from #062a2f to #0d4a4c, foam white text #e8f3ef, coral #ff8a5c and a mint outline #9fd8cc. Section one: a coral label "Kelpmouth Maritime Museum" and three big lines, "The sea keeps" in white, "every promise" as a 1.5px mint outline and "it never made." in coral, 138px on desktop and 9vw on phones, 850 weight, then a short opening date line and two faint SVG waves. Section two: "Four hundred / years of wrecks / and small boats." and a short paragraph. Section three: "Come in / out of the rain.", three visiting facts and a coral "Plan your visit" button. Split each line into letter spans. Line progress runs from 0 to 1 as the line climbs 55% of the container height, with each line 0.12 behind the one above; letters start 115% lower, rotated 9 degrees and stretched to scale(.7,1.55) at opacity 0, and ease out cubic into place, staggered across the line. Smooth progress by 14% a frame so it scrubs both ways. The first section plays in over 1.5s on load. A fixed "Scroll to bring the lines in" pill hides after 30px. Keep aria-labels on headings; reduced motion shows still text.
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 writing your own three short headlines and swapping the teal for your brand colour.
About this scroll text animation
This scroll text animation ties every letter of a headline to the scrollbar. As a line rises into view, its letters float up from below one after another, stretched tall and tilted, then settle and straighten. Scroll back up and they sink away again, so the reader is in charge of the motion rather than watching it happen once.
The museum setting gives it a reason to exist: the letters bob up like things surfacing from the water. Three lines per section, one white, one outlined and one coral, keep each headline short enough to read while it moves. The first screen plays in on its own so nobody lands on an empty page.
Why the prompt works
It defines progress, 0 to 1 over 55 percent of the screen, with each line 0.12 behind.
It gives the starting pose of every letter, 115 percent lower, 9 degrees and a stretched scale.
It smooths the scrub by 14 percent a frame, which hides jumpy trackpads.
It shows a scroll hint and keeps the headings readable to screen readers.
Where to use it
Exhibitions, editorial features, travel stories and launch pages told in a few big lines. Keep paragraphs static; only the headlines should float.
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.
