Line reveal

1. Copy to Webflow

   Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: Webflow removes any font your site has not installed.
   Copy to Webflow

2. Add custom CSS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

   Before the script runs, a marked heading is hidden with visibility and keeps its room, so nothing below it moves. It shows by itself after four seconds if the script never comes, and at once without JavaScript, through the noscript line the paste carries inside its Embed. The Designer canvas runs no Embed: there the headings are always plain and editable.

3. Add custom JS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

4. Use it on your own elements

   Custom attributes
   Select the element on the canvas and open the Settings panel. Under Custom attributes, add a pair: the name on the left, the value on the right.

   Custom attribute	What it does
   data-line-reveal	Marks a heading whose lines rise one after the other as it comes into view. It takes no value: leave the value field empty. It goes on the heading itself, an h1, h2 or h3, or on any block of text; the script finds the lines on screen, and bold words and links inside it stay as they are.
   data-line-reveal-skip	On an inline element inside a marked heading: its words are left out of the split and stand still while the rest rises. [ Optional ]
   data-line-reveal-state	Written by the engine on the heading: ready while it waits hidden, playing, done at rest, static under reduced motion. Never written by hand. [ Optional ]

   Settings
   Every setting is a custom attribute too, added the same way and on the same element. An attribute always wins over the defaults written in the code.

   Attribute	Default	What it is
   data-line-reveal-duration	1.1	Time one line takes from its hidden pose to rest, in seconds.
   data-line-reveal-stagger	0.08	Delay between the start of one line and the start of the next, in seconds.
   data-line-reveal-ease	expo.out	Shape of the rise: a CSS easing (cubic-bezier(...), ease-out) or a GSAP name the engine translates (expo.out, power1.out to power4.out, sine.out, circ.out, none). Options: any CSS easing or one of those names.
   data-line-reveal-delay	0	Wait before the first line starts, in seconds, once the heading is in view.
   data-line-reveal-offset	0.12	How far over the bottom edge of the window the heading has to come before it plays, as a share of the window height, 0 to 0.9.
   data-line-reveal-replay	false	Whether the heading plays again each time it comes back into view. Options: false (once, then it stays), true (it waits hidden again once it has fully left the window).

Two files, no build step. It runs in the browser only. Load it with a script tag in plain HTML, in a client-side script in Astro, never in the frontmatter. In React, call LineReveal.mount(ref.current) in useEffect and destroy() in its cleanup.

1. Tune it, either way

   Per element with an attribute, or once for the whole site by editing DEFAULTS at the top of the file.

   Attribute	Default	What it is	Lower	Higher
   data-line-reveal-duration	1.1	Time one line takes from its hidden pose to rest, in seconds.	A snap: the lines pop up	A slow, stately rise
   data-line-reveal-stagger	0.08	Delay between the start of one line and the start of the next, in seconds.	The lines rise almost as one block	Each line clearly after the other, a cascade
   data-line-reveal-ease	expo.out	Shape of the rise: a CSS easing (cubic-bezier(...), ease-out) or a GSAP name the engine translates (expo.out, power1.out to power4.out, sine.out, circ.out, none). Options: any CSS easing or one of those names.
   data-line-reveal-delay	0	Wait before the first line starts, in seconds, once the heading is in view.	Plays the moment it enters	Lets another element go first; three headings side by side with 0, 0.1 and 0.2 come in as a row
   data-line-reveal-offset	0.12	How far over the bottom edge of the window the heading has to come before it plays, as a share of the window height, 0 to 0.9.	It plays as soon as it enters at the bottom	It waits until it has climbed higher up the screen
   data-line-reveal-replay	false	Whether the heading plays again each time it comes back into view. Options: false (once, then it stays), true (it waits hidden again once it has fully left the window).

2. Drive it from JavaScript

   When a heading arrives after the page has loaded, when it has to play again from code, or when the page reacts to it landing.
   JavaScript Copy

   const element = document.querySelector('[data-line-reveal]');
   element.addEventListener('line-reveal:done', (e) => {
     console.log(e.detail);
   });
   
   const heading = LineReveal.mount(element);   // the heading auto() mounted, or a new one
   heading.replay();   // back to its hidden pose, then played again
   heading.lines();    // the number of lines read on screen
   
   // Headings added after the page loaded: mount everything marked inside it.
   LineReveal.auto(container);
   
   // When the heading leaves the page:
   heading.destroy();   // the words go back exactly as they were

3. Fit it to your page

   • One attribute, on the heading itself. Put data-line-reveal on the h1, h2, h3, or any block of text meant to rise line by line; it takes no value. The script wraps each word where it stands, finds the lines on screen and plays them as the heading enters the window. Nothing to split by hand. In Webflow, select the Heading, open the Settings panel and add the custom attribute data-line-reveal with an empty value.
   • Inline markup stays itself. A strong, an em, a span or a link inside the heading is the same element afterwards, with its own class and listeners; the words inside it are wrapped in place. A link keeps its name for assistive technology through an aria-label the script adds and destroy() takes off. Put data-line-reveal-skip on an inline element to keep its words out of the split: they then stand still while the rest rises.
   • One setting for every heading of the page, without opening the file: declare window.LineRevealSettings = { stagger: 0.12 } in a script placed before line-reveal.js. The three levels, least specific first, are DEFAULTS, then that object, then a data-line-reveal-* attribute on the heading itself (data-line-reveal-delay="0.2"), so one heading can still differ from the page-wide setting.
   • Before the script, the heading keeps its room unseen. A marked heading is hidden with visibility, never display, until the script has run, so nothing below it moves when it shows. If the script never runs, the heading shows by itself after four seconds; without JavaScript at all, the noscript line at the top of snippet.html shows it at once. Keep that line on the page.
   • In the Webflow Designer the headings are plain. The canvas runs no Embed and applies none of its styles, so a marked heading is always there, whole and editable; the hidden pose and the rise only exist on the published page and in the preview.
   • A heading already above the window when the page opens (a reload half way down) is shown at rest, not played behind the reader's back.
   • **prefers-reduced-motion**: the heading stands at rest from the start and never moves. The words stay wrapped, which cannot be seen.
   • Resize and late fonts: the lines are read again on every change of the heading's size and once each web font lands, so a heading always rises by the lines it shows. A resize during the rise waits for it to end.
   • States, on the heading, for a style or a test: data-line-reveal-state is ready (hidden, waiting), playing, done or static (reduced motion). Each change fires a bubbling event of the same name: line-reveal:ready, line-reveal:playing, line-reveal:done, line-reveal:static, whose detail is { element, lines }.
   • From JavaScript: LineReveal.mount(el, overrides) returns the instance, which carries element, settings (the values it resolved), state(), lines() (the number of lines read), split() (read the lines again), play(), show() (to rest at once, no motion), reset() (back to the hidden pose), replay() and destroy(). LineReveal.auto(root) mounts every marked heading inside root, LineReveal.replay(root) plays them again, LineReveal.destroy(root) takes them all back. destroy() unwraps every word, joins the text nodes again and puts back the style and aria-label the heading had, so the markup is the one of snippet.html and mounting again starts clean. In React, mount in useEffect and destroy in its cleanup.
   • The words of the markup are the preview's, and they ship as they are: pasted, the page reads the way the preview did. Put the user's own headings in their place whenever they want, in the page's language.
   • On Webflow, add the fonts first. Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: the paste names them, and the Designer drops a font the site does not have.

4. Avoid the pitfalls

   • **Settings handed to mount() after the page loaded are dropped.** auto() mounts on DOM ready, and mount() on a heading that already carries the effect returns the existing one untouched. A page-wide block therefore goes in window.LineRevealSettings, which auto() reads itself, or the heading is taken back with destroy() and mounted again.
   • Text added to a heading after it mounted is not split. Change the words, then destroy() and mount() it again.
   • **A heading painted through background-clip: text** (gradient text) loses it: every word becomes a box of its own. Paint the words, not the heading.
   • The hidden pose lives in the stylesheet. Loaded late, or at the foot of a heavy page, a heading high on the page can show for a moment before the rule that hides it arrives, then hide and rise. In a Webflow paste the rule travels in the Embed, after the headings; when the first heading of a long page flickers, copy the first rule of line-reveal.css (the one that sets visibility: hidden) into the site's head code as well.
   • Whitespace kept as typed is not covered. The split heading does not wrap by itself, only its spaces do; a heading in white-space: pre or pre-wrap breaks where the engine did not look.
   • **overflow: hidden on the heading clips the accents** that the windows let show above and below each line. Leave the heading's overflow visible.

One click on Copy the AI prompt copies everything an assistant needs to build this effect: the complete code, the markup, the dependency, every setting and every pitfall.