Premium
Reading Ruler Paragraph
A paragraph set as separate lines. A soft tinted ruler band glides to whichever line you point at with a spatial ease, that line brightens and the rest dim, so you can read down it like a finger.
Also known as: reading ruler css, line focus hover, highlight line on hover, reading guide paragraph.
Run a finger under the line you are reading and your eye stops slipping back to the start of the one above. A reading ruler does the same on a screen: one soft band that follows you down the page, a single line at a time.
Premium
Unlock the HTML and CSS
Everything you see above is live. Basic and Pro include every premium piece, with the HTML and CSS ready to copy, plus the Tailwind version where there is one and Motions in Claude Code on Pro.
Customizing this snippet
- Color: set
--hfx-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hfx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.