FreeScroll

Ink Reveal

A paragraph that fills in word by word as you scroll through it.

Loading
Usage 
import { InkReveal } from "./InkReveal";

<InkReveal
  as="h2"
  text="Words wrapped in *asterisks* light in the accent."
  pin
/>

About

Every word starts faint and inks in as the reader's scroll reaches it, with a soft leading edge instead of a hard line. Words wrapped in *asterisks* light in an accent colour with a highlighter sweeping in behind them. It measures one element per frame and writes a single CSS variable per word, so it stays smooth on long passages, and the text remains real, selectable text.

What you get

  • Rebuild prompt

    One paste into Claude Code, Cursor, Codex or v0 rebuilds it byte for byte.

  • Source

    InkReveal.tsx + InkReveal.css — plain React and CSS, every comment kept.

  • Vite project

    A ready-to-run project with this exact example and pinned versions — unzip, install, run.

More like this

All components
↕ScrollNewPro
Open live demo →

Aperture Zoom

Scroll

A framed image that opens to full-bleed as you scroll, parting the headline.

↕ScrollNewPro
Open live demo →

Stack Scroll

Scroll

Cards that pin and pile into a deck as you scroll.

↕ScrollNewPro
Open live demo →

Horizontal Rail

Scroll

Scroll down, travel sideways: a pinned rail of panels with parallax.