Kinetic Type
A short headline whose words fly in from different axes with rotation and settle on springs, with a scroll-scrubbed variant.
Preview
Make it move, then make it still.
Scroll scrubs every word into place.
Scroll inside the second card to scrub; up reverses it.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | A short headline. |
| trigger | "mount" | "inView" | "scroll" | "mount" | Fly in on mount or first view, or scrub with scroll. |
| container | RefObject<HTMLElement> | page | Scroll container for scroll mode; give it position: relative. |
| stagger | number | 0.09 | Seconds between words. |
| as | "span" | "h1" | "h2" | "h3" | "p" | "span" | Element to render. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.