Highlight Wipe
Reveal a heading with a left-to-right highlight as the section scrolls into view.
- Dependencies
- gsap
- Size
- 223 lines
- Controls
- 8 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/highlight-wipe.json1 · Dependencies
npm install gsap2 · Copy the source
components/onycx/highlight-wipe.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the highlight-wipe.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | Heading copy; "\n" breaks a line. |
| eyebrow | string | "A small studio.\nAn expansive point of view." | Mono label in the left column. Empty hides it. |
| symbol | string | "✳" | Accent glyph under the eyebrow. Empty hides it. |
| body | string | — | Paragraph under the heading. Empty hides it. |
| linkLabel / linkHref | string | "The minds behind the work" / "#" | Underlined text link with an up-right arrow. Empty label hides it. |
| color / dimColor | string | "#f9f9f9" / "#777777" | Lit layer (currentColor) and the grey layer underneath. |
| accent / muted | string | "#e85002" / "#a7a7a7" | Glyph colour; eyebrow and paragraph colour. |
| start / end | number | 88 / 50 | Viewport percentages: wipe starts when the heading top hits start, ends when its bottom hits end. |
| scrub | number | 0.7 | Seconds of smoothing between scroll and wipe. |
| className | string | — | Extra classes on the section. |