Clip Reveal Services
Copy that fills in as you read it, and a three line masthead that assembles then collapses. Each paragraph is duplicated through a pseudo element and the bright copy is clipped from the bottom up on scroll, so the grey text is overwritten line by line rather than faded. The service lines slide in from alternating sides, then the section pins: the outer two close on the middle one, and once stacked all three scale down together.
A space for work shaped with clarity and intention. Each project follows a simple path from thought to form, from form to function.
I create websites and digital experiences that value clarity above excess. Through minimal form and precise detail, I aim to build work that lasts and offers a quiet sense of order.
npx shadcn@latest add @compronents/clip-reveal-servicesInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| Prop | Type | Default | Description |
|---|---|---|---|
| aboutCopy / servicesCopy | string | BLANK copy | Paragraphs revealed by the clip. Both are mirrored into a pseudo element automatically. |
| heroImage / outroImage / headerImage | string | Blob-hosted assets | Opening and closing portraits, and the lockup repeated three times as the masthead. |
| embedded | boolean | true | Own the scroll container so it fits a bounded box. Set false to drive it from the window scroll. |
aboutCopy / servicesCopytextThe two clip-revealed paragraphs.
gsaplenis