KQ-1353 · TIDE/MASK
Tide Mask
A multi-line heading revealed by a travelling liquid edge: each line sits behind its own clip path whose top edge is a wave (a swell and a counter-running chop), and the water level rises past each line on a tween, lines a stagger apart, while the letters float up a step onto their line on springs.glide and the glyphs just under the waterline stay wet and tinted until it moves on. The final line's last ripple is left behind as a fine underline that calms on springs.drift, ripples for a while and stirs again when the heading is hovered or focused; with trigger="hover" the heading is focusable and keyboard focus raises it.
KQ-1353 · TIDE/MASK
Basinworks · tide and flood data
Every river,read as it rises.
rising · 2 lines
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/tide-mask
Props
- text
- string | readonly string[]
- default —
- The heading's lines: an array, or a string split on "\n"; a line too long for its box wraps and rises as one block.
- as
- "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "div"
- default "h2"
- The element rendered.
- amplitude
- number
- default 0.5
- Wave height, 0 to 1; 0 is a straight rising edge and 1 about a fifth of a line.
- frequency
- number
- default 2.2
- Wave crests across every 10em of line.
- speed
- number
- default 1
- How fast the water rises and the waves travel, 0.5 to 2.
- stagger
- number
- default 140
- Delay between one line's rise and the next, ms.
- color
- string
- default "var(--accent-bright)"
- The waterline, the wet glyphs just under it and the underline.
- wet
- number
- default 0.6
- How strongly the glyphs just under the waterline are tinted while wet, 0 to 1.
- underline
- boolean
- default true
- The final line's last ripple settles into a fine underline.
- rippleFor
- number
- default 3200
- How long the underline keeps rippling once it settles, and again after each hover, ms; 0 is still and Infinity ripples while on screen.
- align
- "start" | "center"
- default "start"
- Line alignment.
- trigger
- "mount" | "inView" | "hover" | "manual"
- default "inView"
- When the water rises: on mount, when scrolled into view, on hover or keyboard focus, or when active turns true.
- once
- boolean
- default true
- Rise only the first time it is seen or hovered; false lowers the water when it leaves view and raises it again.
- delay
- number
- default 100
- Wait before the first line starts to rise, ms.
- active
- boolean
- default —
- For trigger="manual": true raises the heading, false lowers the water back over it.
- onComplete
- () => void
- default —
- Fires when the last line has risen.
- className
- string
- default —
- Classes for the heading; set the type size and colour here.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | readonly string[] | — | The heading's lines: an array, or a string split on "\n"; a line too long for its box wraps and rises as one block. |
| as | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "div" | "h2" | The element rendered. |
| amplitude | number | 0.5 | Wave height, 0 to 1; 0 is a straight rising edge and 1 about a fifth of a line. |
| frequency | number | 2.2 | Wave crests across every 10em of line. |
| speed | number | 1 | How fast the water rises and the waves travel, 0.5 to 2. |
| stagger | number | 140 | Delay between one line's rise and the next, ms. |
| color | string | "var(--accent-bright)" | The waterline, the wet glyphs just under it and the underline. |
| wet | number | 0.6 | How strongly the glyphs just under the waterline are tinted while wet, 0 to 1. |
| underline | boolean | true | The final line's last ripple settles into a fine underline. |
| rippleFor | number | 3200 | How long the underline keeps rippling once it settles, and again after each hover, ms; 0 is still and Infinity ripples while on screen. |
| align | "start" | "center" | "start" | Line alignment. |
| trigger | "mount" | "inView" | "hover" | "manual" | "inView" | When the water rises: on mount, when scrolled into view, on hover or keyboard focus, or when active turns true. |
| once | boolean | true | Rise only the first time it is seen or hovered; false lowers the water when it leaves view and raises it again. |
| delay | number | 100 | Wait before the first line starts to rise, ms. |
| active | boolean | — | For trigger="manual": true raises the heading, false lowers the water back over it. |
| onComplete | () => void | — | Fires when the last line has risen. |
| className | string | — | Classes for the heading; set the type size and colour here. |