Back to Motion Prompt examples
Landing page & web effects, part 2 · #02
Scroll text reveal
Text darkens letter by letter as you scroll. A light gray headline darkens one character at a time from the top left as the page scrolls, and fades back from the end when scrolling up.
Scroll effectsscrolltext-revealscroll-driventypographyopacitystorytelling
Full motion specification
How the movement works
Use it on a short statement, such as a concept or a message from the founder, that should be read slowly.
- 01A 511 × 168 viewport. Scroll progress p: 0→1 over 0.3–2.6 s, 1→0 over 3.2–4.4 s (cubic ease-in-out). The page moves up by p × 40 px. One pass takes 4.7 s (twice per 9.4 s pack cycle).
- 02A three-line headline, 24 characters in all (27 px, weight 800, 38 px line height), all light gray (#D6DBE4) at the start.
- 03Character n (counting from 0) has darkness clamp(p × 26 − n): each character takes 1/26 of the progress to reach the text color (#1C2333), in step with the scroll.
- 04Scrolling back fades them from the last character by the same formula. The body-text bars and the scrollbar thumb move with the page.
Prompt
Add a scroll text reveal to the concept statement: start in light gray and darken it one character at a time as the page scrolls.