Sonic Text

Hover-reactive typography with sound. Choose blink, jump, or fill effects and 14 audio cues (keycap tick, pixel pop, laser blip, more). Adjustable fonts, colors, spacing—drop-in ready.

Features

• Per-letter hover effects: None, Blink, Jump, or Shape (filled rounded block) with smooth spring/bounce transitions.
• Full Font control: Typeface, size, weight, line height, letter spacing, alignment — all via Framer’s Font control.
• Color styling: Base color + hover color, plus separate text color inside Shape mode.
• Built-in sound palette (WebAudio): Keycap Tick, Pixel Pop, Pop, Glass Ping, Chime, Wood Click, Water Plop, Laser Blip, Whoosh Micro, Crackle Cluster, Birdsong, Blackbird, Pianino, Air Bell — no audio files needed.
• Sound tuning: Volume, throttle (anti-spam), and stereo spread per letter; instant audition from the picker.
• On-canvas Effect Picker: Clickable pills to try hover modes and sounds; toggle on/off from props.
• Responsive by default: Works with auto/fixed sizing; honors container width and your font settings.
• Letter layout control: Adjustable per-letter gap and optional pointer cursor.
• Performance-friendly: Lightweight WebAudio synths, throttled triggers, and a master dynamics compressor.
• Accessible: Text remains real, selectable content with proper aria-label; no images or canvases.
• Zero external deps: TypeScript + Framer Motion only; drop-in and publish.