Section · scroll
Split word
A giant word pulls its letters together, then parts at one letter so a card can rise into the gap; a contact form fades in below.
Split word
A giant word pulls its letters together, then parts at one letter so a card can rise into the gap; a contact form fades in below.
Use when: The last block of a page: a contact, a sign-up or a newsletter, under a word short enough to set very large.
DOM and GSAP (ScrollTrigger, Flip), every browser · pinned for about 1.5 screens
npx shadcn@latest add @sharingan/split-wordFirst time? Add the @sharingan registry to your project: getting started. The CLI also installs gsap, used under GSAP’s own no-charge licence.
Add ?motion=final or ?motion=off to the address for the version without scroll motion; phones below 768 px get it too, with short reveals.
Props
content what the section says, real text in the DOM
| Name | Type | Default | Description |
|---|---|---|---|
| eyebrow | string (≤ 48 chars) | — | A short kicker above the word. |
| word * | string (3–14 chars) | — | The giant word, 1–2 short words: Contact us, Say hello, Join. |
| split | integer (1–9007199254740991) | — | The letter the word parts before (counting spaces); the middle by default. |
| card * | object | — | The card that rises into the word. |
| title * | string (2–40 chars) | — | |
| lines * | string[] (1–4) | — | An address, a phone, an email: one per line. |
| href | string | — | Where the card links to: a mailto:, a map. |
| form | object | — | A contact form under the word: name, email, subject and message. |
| action * | string (≥ 1 chars) | — | Where the form posts. |
| submit | string (2–20 chars) | "Send" | |
| subject | boolean | true | A subject field beside the name and the email. |
config how it moves; attributes on the Web Component
| Name | Type | Default | Description |
|---|---|---|---|
| length | number (0.8–3) | 1.5 | How long the section stays pinned, in screen heights. |
| spread | number (0–1.5) | 0.8 | How wide the letters start apart, in letter widths. |
| tilt | number (-15–15) | -4 | The card's final lean, in degrees. |
| accent | string (≥ 1 chars) | "#ee8a7b" | The card and the send button. |
The same section as a Web Component
Section · scroll
<sg-split-word>
The same engine as a Web Component, driven by attributes, on the page’s own HTML.