SoundEffect brings audio feedback to any Framer component without touching its design. Drop it on the canvas, connect its Variant property to the same variable driving your interactive component, and it handles the rest — completely invisibly.
- Plays a hover sound when the variant transitions to "Hover"
- Plays a click sound when the variant transitions to "Clicked"
- Restarts the sound on every trigger, so rapid interactions always feel snappy
- Suppresses the hover sound after a click — Framer's natural Clicked → Hover bleed-through is silenced until the mouse fully exits and re-enters
- Does nothing in canvas, export, or static render modes (useIsStaticRenderer guard)
Each sound slot (Hover and Click) has its own source toggle:
- File Upload — attach any mp3, wav, ogg, aac, or webm directly from your assets
- External URL — point to any hosted audio file
1. Add SoundEffect to your canvas (it will be invisible and take up no space)
2. In the Properties panel, set your hover and click sounds via upload or URL
3. Adjust Volume (0–1) to taste
4. Connect the Variant property to the same variable or interaction state that drives your visual component's variants
5. Done — audio fires automatically on every interaction
- Built with React hooks (useEffect, useRef) — no external dependencies
- Audio elements are lazily created and reused; only rebuilt when the source actually changes
- Fully defensive: invalid URLs, detached media elements, and browser autoplay restrictions all fail silently
- Volume is clamped and validated before reaching the Web Audio pipeline
- Clean, readable code with zero deprecated APIs
Works with any Framer component that uses variants — buttons, cards, nav items, toggles, or custom interactive elements.
Abhishek Aji
