Block Reveal Text
An editorial scroll page where every copy block is split into lines and each line is uncovered by a colored bar that wipes across left to right then retracts, timed off a scroll trigger so the text reveals line by line as it enters view, with full-bleed image sections between the copy.
Framed in tungsten and shadows, every shot holds its own deliberate tension.
This is cinematography in its raw form with practical lamps, soft falloff, and the presence of grain that fills each corner of the frame. Every room functions as a set and every posture becomes a composition. Light moves across furniture and faces, shaping scenes with a natural sense of depth.
Still frames with bold contrast and lighting choices that embrace imperfection.
The camera settles into long takes and patient movement. Colors stay unrefined and shadows turn into texture. The image waits for action instead of chasing it. Every frame forms a clear visual language built through restraint.
Cinematography thrives in the details from the grain to the falloff to the glow.
npx shadcn@latest add @compronents/block-reveal-textInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
| Prop | Type | Default | Description |
|---|---|---|---|
| sections | RevealSection[] | 7 mixed image/copy blocks | The page composition; copy blocks carry a reveal-bar color. |
| stagger / duration | number | 0.15 / 0.75 | Line stagger and wipe duration in seconds. |
| embedded | boolean | true | Own the scroll container and scope the fixed nav to it; set false for a viewport-fixed nav on window scroll. |
sectionslinksOrdered image, heading, and body blocks.
stagger / durationtuplePer-line delay and bar wipe duration.
gsaplenis