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.

Component

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.

Install

npx shadcn@latest add https://ui.aryank.space/r/clip-reveal-services.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API

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.

Customize

aboutCopy / servicesCopytext

The two clip-revealed paragraphs.

Dependencies

gsaplenis

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.

components

ui