KQ-1351 · TUNE/IN
Tune In
A headline that comes in like a station on an analogue dial: every letter starts as faint seeded static jittering over a broken scanline, a thin carrier line sweeps across on a tween, letters ahead of it calm and flicker toward their real shape, and each one it passes locks onto its true glyph with a small vertical settle on springs.snap and a flash of signal colour that cools, while a mono readout riding the carrier rolls to the station's frequency. A mouse over the tuned headline detunes the letters under it for a moment and they relock on the same spring; with trigger="hover" the headline is focusable and keyboard focus tunes it in.
Waylight FM · live from the harbour
Music for the late shift
scanning · the carrier is crossing
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/tune-in
Props
- text
- string
- default —
- The headline.
- as
- "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div"
- default "h2"
- The element rendered.
- frequency
- number
- default 104.7
- Where the readout lands when the headline locks.
- from
- number
- default 87.5
- Where the readout starts as the carrier sets off.
- unit
- string
- default "MHz"
- Printed after the readout.
- sweep
- number
- default 1400
- How long the carrier takes to cross the headline, ms.
- noise
- number
- default 0.5
- Static strength, 0 to 1: opacity, jitter, churn and scanline roughness; 0 is a still, faint ghost alphabet.
- readout
- boolean
- default true
- Show the small frequency readout riding the carrier, in a strip reserved above the text.
- color
- string
- default "var(--accent-bright)"
- The carrier, the readout and each letter's brief lock flash.
- staticColor
- string
- default "var(--ink-3)"
- The static glyphs and the scanline under them.
- glyphs
- string
- default "/\\|-_=+:;*#%~^<>{}[]!?"
- The alphabet the static is drawn from.
- interactive
- boolean
- default true
- A mouse or pen over a tuned headline detunes the letters under it for a moment.
- trigger
- "mount" | "inView" | "hover" | "manual"
- default "inView"
- When it tunes in: on mount, when scrolled into view, on hover or keyboard focus, or when active turns true.
- once
- boolean
- default true
- Tune in only the first time it is seen or hovered; false re-tunes each time.
- delay
- number
- default 120
- Wait before the carrier sets off, ms.
- active
- boolean
- default —
- For trigger="manual": true tunes in, false drops back to static.
- seed
- number
- default —
- Seeds the static so the server and browser draw the same; derived from text by default.
- onComplete
- () => void
- default —
- Fires when the last letter locks.
- className
- string
- default —
- Classes for the root element; set the type size and colour here.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The headline. |
| as | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "h2" | The element rendered. |
| frequency | number | 104.7 | Where the readout lands when the headline locks. |
| from | number | 87.5 | Where the readout starts as the carrier sets off. |
| unit | string | "MHz" | Printed after the readout. |
| sweep | number | 1400 | How long the carrier takes to cross the headline, ms. |
| noise | number | 0.5 | Static strength, 0 to 1: opacity, jitter, churn and scanline roughness; 0 is a still, faint ghost alphabet. |
| readout | boolean | true | Show the small frequency readout riding the carrier, in a strip reserved above the text. |
| color | string | "var(--accent-bright)" | The carrier, the readout and each letter's brief lock flash. |
| staticColor | string | "var(--ink-3)" | The static glyphs and the scanline under them. |
| glyphs | string | "/\\|-_=+:;*#%~^<>{}[]!?" | The alphabet the static is drawn from. |
| interactive | boolean | true | A mouse or pen over a tuned headline detunes the letters under it for a moment. |
| trigger | "mount" | "inView" | "hover" | "manual" | "inView" | When it tunes in: on mount, when scrolled into view, on hover or keyboard focus, or when active turns true. |
| once | boolean | true | Tune in only the first time it is seen or hovered; false re-tunes each time. |
| delay | number | 120 | Wait before the carrier sets off, ms. |
| active | boolean | — | For trigger="manual": true tunes in, false drops back to static. |
| seed | number | — | Seeds the static so the server and browser draw the same; derived from text by default. |
| onComplete | () => void | — | Fires when the last letter locks. |
| className | string | — | Classes for the root element; set the type size and colour here. |