Text Scroll — every design
Text that reacts to the scroll: line, letter and word highlights, vertical and horizontal masks, colour fill, rise and blur — with start/end lines, smoothing, play-once, accent words and full typography. Scroll slowly.
1. Line highlight
Happy’s vertical line highlight: each line lights up as it crosses the start line (60 % down the screen) and dims again on the way back.
We design products people actually enjoy using. Every screen starts with a question: what does this person need right now, and what can we take away? The answer is usually less than you think.
2. Letter highlight
Happy’s horizontal highlight: letters light up one after another, scrubbed by the scroll.
Good software feels like a conversation. It answers before you finish asking, it remembers what matters to you, and it gets out of the way the moment its job is done.
3. Word highlight
The same, word by word — with a dimmed colour, so unread words are grey and read words turn ink-dark.
Coffee roasted on Tuesday, in your cup by Friday. We buy green beans straight from eleven farms we visit every harvest, roast in small batches and ship the same afternoon.
4. Line mask — vertical
Happy’s vertical mask: a cover the colour of the background lifts off each line.
We design products people actually enjoy using. Every screen starts with a question: what does this person need right now, and what can we take away? The answer is usually less than you think.
5. Line mask — horizontal
Happy’s horizontal mask on a dark section: the cover slides off each line, left to right.
Good software feels like a conversation. It answers before you finish asking, it remembers what matters to you, and it gets out of the way the moment its job is done.
6. Colour fill
New: each line fills with colour from left to right as you scroll, over a faint outline of the text.
Coffee roasted on Tuesday, in your cup by Friday. We buy green beans straight from eleven farms we visit every harvest, roast in small batches and ship the same afternoon.
7. Rise
New: the words of each line slide up out of it when the line arrives. Plays once here.
Good software feels like a conversation. It answers before you finish asking, it remembers what matters to you, and it gets out of the way the moment its job is done.
8. Blur
New: words sharpen from a blur as you scroll.
We design products people actually enjoy using. Every screen starts with a question: what does this person need right now, and what can we take away? The answer is usually less than you think.
9. Timing
Start and end lines and smoothing. Top: starts low (85 %), ends high (10 %), no smoothing — follows the scroll exactly. Bottom: starts at the middle with 3 s smoothing.
Good software feels like a conversation. It answers before you finish asking, it remembers what matters to you, and it gets out of the way the moment its job is done.
Coffee roasted on Tuesday, in your cup by Friday. We buy green beans straight from eleven farms we visit every harvest, roast in small batches and ship the same afternoon.
10. Accent words & styles
Words written *like this* take the accent colour — plain, italic, underlined or as a highlighter stroke.
Plain accent: we ship every Friday without fail.
Italic accent: the slow part is the thinking, not the typing.
Underlined accent: read the full changelog before you upgrade.
Highlighter accent: our support team answers in under four minutes on average.
11. Layout & type
Heading tags, alignment per device, max width, several paragraphs with spacing, and a background box with padding and radius.
Centred H2, max width 18 characters wide.
Right-aligned on desktop, left on phones.
We design products people actually enjoy using. Every screen starts with a question: what does this person need right now, and what can we take away? The answer is usually less than you think.
Good software feels like a conversation. It answers before you finish asking, it remembers what matters to you, and it gets out of the way the moment its job is done.
12. Manifesto
Finished design: a big serif statement on black, lines lighting up in warm white with an amber accent.
We believe the best tools disappear. They don’t ask for attention, they don’t need a manual, and they never make you feel slow. That is the whole brief. Everything else is detail.
13. Pull quote
Finished design: a centred quote that fills with colour, then the attribution.
“Switching took an afternoon. Our checkout conversion went up eighteen percent in the first month.”
— Priya Nair, Head of Growth at Copper & Pine
14. About us
Finished design: a readable two-paragraph intro with a word-by-word reveal.
Coffee roasted on Tuesday, in your cup by Friday. We buy green beans straight from eleven farms we visit every harvest, roast in small batches and ship the same afternoon.
We started in a garage in Leeds in 2016 with a second-hand drum roaster and one stubborn idea: that great coffee should be fresh, fair and easy to get.
End of the demo — scroll back up to watch the effects reverse.