Grain · a type foundry
Letters with a pulse
Grain draws variable fonts for screens that move. Pass your cursor over the headline: every letter is a few thousand particles.
Particle type
The headline is drawn in thousands of particles that scatter under the cursor and spring back; the real text stays in the DOM.
Use when: A short, bold headline that is the brand: type foundries, creative studios, launches.
Engine: WebGPU, with a CSS fallback
Render: …
npx shadcn@latest add @sharingan/particle-typeFirst 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 (4–40 chars) | — | Short and bold: 2–5 words read best as particles. |
| 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 |
|---|---|---|---|
| colors | string[] (1–3) | ["var(--brand, oklch(0.66 0.2 262))","oklch(0.72 0.19 330)","oklch(0.85 0.12 95)"] | Left and right of the headline, then the colour of fast particles. |
| background | string | "var(--background, #0b0c10)" | The colour behind the letters. |
| scatter | number (0–3) | 1 | How hard the cursor blows particles away. |
| spring | number (0.3–3) | 1 | How quickly particles fly back to their letter. |
| gap | number (1.5–6) | 2.2 | Distance between particles, in CSS pixels. |
| size | number (0.3–1.2) | 0.95 | Particle size, as a share of the gap. |
| pointer | boolean | true | The cursor scatters the letters. |
| poster | string | — | Image shown when WebGPU is unavailable. |
The same hero as a Web Component
Web Component · no framework
<sg-particle-type>
The same engine, driven by attributes. Its text is the page’s own DOM, slotted over the GPU layer.