Join Join
Join

097Tightening word lines

In this effect, we spread the words of a paragraph wide apart and, as we scroll, each line tightens back to its natural width one row at a time. The motion is scrubbed to scroll progress so the copy feels like it’s reforming into focus. Let’s build it!

HTML Structure

We wrap a scroll hint, a header row, and a content column of titled paragraphs. Every block of body copy stays a plain <p> so the split can turn it into lines and words without disturbing the hierarchy:

<section class="mwg_effect097">
    <p class="scroll">Scroll</p>
    <div class="container">
        <div class="header">
            <p>A Journey Through Space</p>
            <p>A silent expansion</p>
        </div>
        <div class="content">
            <p class="title">1 — An Ever-Expanding Cosmos</p>
            <p>The universe is constantly expanding…</p>
            <p class="title">2 — Light as a Measure of Distance</p>
            <p>Scientists observe this expansion…</p>
            …
        </div>
    </div>
</section>

Become a member to unlock
the full effect today.

Join now Join now

Discover the platform

See how the platform works: try Effect #000 for free.

Try it now Try it now

(No registration or credit card needed)