No. 65 of 106

Text Reveal on Scroll

A statement that fills in word by word as you scroll.

    On this page
  1. Text Reveal on Scroll
  2. The page holds still
  3. Lines that rise into place
  4. A spotlight that guides reading
  5. Text that decodes itself
NEWSON · ELEMENT NO. 65

Big statements that light up word by word as visitors read — 15 effects, three modes (follow the scroll, play once, or pin the section) and reveal by word, letter or line.

15 effectsscroll scrubplay oncepinnedwords / letters / linesaccent wordsprogress linefollow-up button

Scroll slowly. Every word you read lights up, so your message is taken in one idea at a time — not skimmed.

CREATIVE AGENCY · PINNED MANIFESTO

Pin mode keeps the section on screen while the manifesto fills in. When it is fully read, a follow-up line and a button fade in.

pin modefillaccent wordsfollow-up button
Our manifesto

We believe good design is quiet. It gets out of the way, loads in a blink and works for everyone — on every screen, in every language. We sweat the details so your customers never have to.

Northfold Studio — brand & product design since 2014.

See our work

“Northfold Studio” is a fictional agency.

PRODUCT LAUNCH · LINE MASK

Reveal by lines with the mask effect — each line slides up from behind an invisible edge, like a film title. Plays once when it comes into view.

maskby linesplay once
Introducing Aero 2

The lightest laptop we have ever made. All-day battery. Zero compromise.

Pre-order today — ships in October.

Pre-order

“Aero 2” is a fictional product.

ABOUT PAGE · FOUNDER STORY

Spotlight mode brightens only the words you are reading right now, while a line on the side shows how far along you are.

spotlightserifside progress lineblockquote
“I started this bakery with one oven and a borrowed recipe book. Ten years later we still bake everything by hand, before sunrise, because bread should taste like someone cared.”

— Mara Ellison, founder of Ember & Rye Bakery

“Ember & Rye” and its founder are fictional.

$ deploy --prod

Ship to production in 12 seconds. No servers. No YAML. No surprises.

Stackline is a fictional developer platform.

Read the docs
DEVELOPER TOOL · DECODE

Scramble shuffles random characters and settles each letter in turn — a natural fit for tech, security and developer products. Monospace font built in.

scramblemonospaceplay once
SAAS HERO · TYPEWRITER

The typewriter follows the scroll: scroll down and the sentence types out, scroll back and it deletes. The caret blinks while it waits.

typewriterscroll-drivenblinking caretcentered

Write better emails in half the time.

Inkly drafts, shortens and polishes replies right inside your inbox. (Inkly is a fictional product.)

Try it free
BLOG POST · MARKER

The key sentence of an article gets marked word by word, like someone reading along with a highlighter. Accent words get a second color.

highlightany marker colorregular weight
Remote work · 6 min read

The teams that work best remotely do not have more meetings — they write things down. A clear document beats a long call almost every time.

LUXURY BRAND · GRADIENT SWEEP

Reveal by letters with a gradient sweep. Uppercase and a light serif give it a boutique feel.

gradientby lettersuppercaseserif

Crafted slowly. Worn forever.

Maison Solène — fine jewelry, handmade in Lyon. (A fictional brand.)

NONPROFIT · IMPACT STORY

Rise + fade with accent words in a gradient — used here for an impact statement on a charity page.

risegradient accentsside line

Last year, volunteers planted 48,000 trees across nine valleys. Every one of them started with a single person deciding to show up.

Greenvale Trust is a fictional charity; the numbers are illustrative.

Volunteer
15 EFFECTS

The same sentence with every effect. Scroll slowly through the grid to watch each one play.

fillfadeblurriseflipgrowslidemaskmarkergradientunderlinerainbowtypewriterscramblespotlight
1 · Dim → color

Great ideas deserve to be read, not skimmed.

2 · Fade in

Great ideas deserve to be read, not skimmed.

3 · Blur → sharp

Great ideas deserve to be read, not skimmed.

4 · Rise + fade

Great ideas deserve to be read, not skimmed.

5 · 3D flip up

Great ideas deserve to be read, not skimmed.

6 · Grow in

Great ideas deserve to be read, not skimmed.

7 · Slide in

Great ideas deserve to be read, not skimmed.

8 · Line mask

Great ideas deserve to be read, not skimmed.

9 · Marker highlight

Great ideas deserve to be read, not skimmed.

10 · Gradient sweep

Great ideas deserve to be read, not skimmed.

11 · Underline draw

Great ideas deserve to be read, not skimmed.

12 · Rainbow words

Great ideas deserve to be read, not skimmed.

13 · Typewriter

Great ideas deserve to be read, not skimmed.

14 · Scramble → decode

Great ideas deserve to be read, not skimmed.

15 · Spotlight

Great ideas deserve to be read, not skimmed.

All businesses, products and people on this page are fictional examples.

106 elements for news, Text Reveal on Scroll included.