Sonic Text
Turn your volume up. Hover-reactive typography with sound. Choose effects and 14 audio cues. Adjustable fonts, colors, spacing—drop-in ready.
Make it with Workshop
Build your own component with AI
About this Component
Fully responsive, interactive text for Framer: Per-letter hover animations, plays lightweight WebAudio—no audio files needed.
Instructions:
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.
• Letter layout control: Adjustable per-letter gap and optional pointer cursor.
• Performance-friendly: Lightweight WebAudio synths, throttled triggers, and a master dynamics compressor.
Tip: Set Auto Demo to No. It was turned on just to showcase the action on the Marketplace
