Kerning · type foundry
Letters that answer back
Twelve variable families drawn in Lagos and Lisbon, tuned for screens. Try them on your own words before you license a single weight.
Split headline
The headline assembles letter by letter, then the letters near the pointer thicken, lift and take your accent colour.
Use when: Short, confident headlines: type foundries, studios, launches where the words are the product.
Engine: DOM (HTML, SVG, CSS 3D), every browser
Render: …
npx shadcn@latest add @sharingan/split-headlineFirst time? Add the @sharingan registry to your project: getting started.
Add ?motion=final to the address for the repeatable still frame, or ?motion=off for the reduced-motion version.
Props
content what the hero says, real text in the DOM
| Name | Type | Default | Description |
|---|---|---|---|
| eyebrow | string (≤ 48 chars) | — | A short kicker above the headline. |
| headline * | string (8–60 chars) | — | The promise in one line, 3–8 words. Shorter lines make a stronger entrance. |
| subheadline | string (≤ 180 chars) | — | One or two sentences under the headline. |
| primaryCta | object | — | |
| label * | string (2–28 chars) | — | Action verb first, 1–4 words. |
| href * | string (≥ 1 chars) | — | |
| secondaryCta | object | — | |
| label * | string (2–28 chars) | — | Action verb first, 1–4 words. |
| href * | string (≥ 1 chars) | — |
config how it looks and moves; attributes on the Web Component
| Name | Type | Default | Description |
|---|---|---|---|
| intro | "rise" | "scatter" | "type" | "scatter" | How the letters arrive: from below, from all around, or one after another. |
| stagger | number (0–120) | 28 | Milliseconds between two letters during the entrance. |
| accent | string | "var(--brand, oklch(0.62 0.2 262))" | The colour letters take under the pointer. |
| radius | number (0.5–6) | 1.4 | How far the pointer reaches, in letter heights. |
| strength | number (0–1.5) | 1 | How much a letter thickens, lifts and takes the accent. |
| pointer | boolean | true | Letters near the pointer thicken and lift. |
| idle | boolean | true | Now and then a wave runs through the headline when nobody points at it. |
The same hero as a Web Component
Web Component · no framework
Split, then answer
<sg-split-headline>: the same engine, driven by attributes. Letters rise from below here, and a warmer accent follows the pointer.