62:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3gx96u50v9idb.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/069_m7850i8jf.js","/creators-assets/_next/static/immutable/chunks/03586ab1rea-b.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0-lv0573a1cyl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/24gcuxpvxd8dy.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3vd9_7_mqx0kl.js","/creators-assets/_next/static/immutable/chunks/3l37d07td4kzk.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3nw4q_evu8ge1.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/04onqby6uwgz7.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/0yulab_mho2q7.js","/creators-assets/_next/static/immutable/chunks/3_6nvj55e699g.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/3fyhezch4qqad.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v2aom8xv86j9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0s-n7u5-dwtml.js"],"S"] 63:T7d0,

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.

WHAT IT DOES

- 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)

SOUND INPUT

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

HOW TO USE

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

TECHNICAL DETAILS

- 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

COMPATIBILITY

Works with any Framer component that uses variants — buttons, cards, nav items, toggles, or custom interactive elements.

61:["$","$L62",null,{"value":{"fallback":{"$inf$activity-creator-2c5d6e3f-7629-437b-b8bc-b1f5b727b5d0-all:/unified/creator/2c5d6e3f-7629-437b-b8bc-b1f5b727b5d0/activity/":[{"data":[{"id":"019f6695-6a02-75cf-b371-31418acd2d81","type":"creator.followed","target":{"type":"creator","id":"7b34ca5d-5f1b-47da-9ab6-dbafa98f7c64","preview":"Elias ALVES","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1986765/ZQCDW6564-Rd4a11uLlTKRXXJMOFXxqWVm8c2e46","slug":"elias-alves","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2c5d6e3f-7629-437b-b8bc-b1f5b727b5d0","name":"Abhishek Aji","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1179177/avatar-55LWl1BVyiNPS2T8teYkFNW7TBUuIx.jpg","slug":"abhishekaji","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-15T16:21:35.864Z","latestAt":"2026-07-15T16:21:35.864Z"},{"id":"019f6694-ef93-76bb-9498-09deb74586da","type":"creator.followed","target":{"type":"creator","id":"999e5985-24b5-4f64-a124-1a229faff2c9","preview":"Waida Studio","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/999e5985-24b5-4f64-a124-1a229faff2c9/p9ksnuud","slug":"waidastudio","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2c5d6e3f-7629-437b-b8bc-b1f5b727b5d0","name":"Abhishek Aji","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1179177/avatar-55LWl1BVyiNPS2T8teYkFNW7TBUuIx.jpg","slug":"abhishekaji","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-15T16:21:04.517Z","latestAt":"2026-07-15T16:21:04.517Z"},{"id":"019f6693-bb7a-704c-b216-a0f3bcada626","type":"creator.followed","target":{"type":"creator","id":"bfaa0dfb-3797-4487-8c7e-4462418c03cf","preview":"Flexbuildr","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bfaa0dfb-3797-4487-8c7e-4462418c03cf/446tpedp","slug":"flexbuildr","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2c5d6e3f-7629-437b-b8bc-b1f5b727b5d0","name":"Abhishek Aji","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1179177/avatar-55LWl1BVyiNPS2T8teYkFNW7TBUuIx.jpg","slug":"abhishekaji","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-15T16:19:45.651Z","latestAt":"2026-07-15T16:19:45.651Z"},{"id":"019f6693-6e7e-7631-bed8-d68f33434c78","type":"creator.followed","target":{"type":"creator","id":"efdded77-3c71-4bb2-a61d-30ef6282cbf5","preview":"David Bagdasaryan","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/efdded77-3c71-4bb2-a61d-30ef6282cbf5/fwwmlizx","slug":"dtaw","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2c5d6e3f-7629-437b-b8bc-b1f5b727b5d0","name":"Abhishek Aji","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1179177/avatar-55LWl1BVyiNPS2T8teYkFNW7TBUuIx.jpg","slug":"abhishekaji","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-15T16:19:25.934Z","latestAt":"2026-07-15T16:19:25.934Z"},{"id":"019f4d32-2db2-718c-b1e6-2faf42591465","type":"creator.followed","target":{"type":"creator","id":"92c2a437-4e58-4cd2-9a23-5fd81786f849","preview":"Webnity X","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/92c2a437-4e58-4cd2-9a23-5fd81786f849/fs1ughi6","slug":"webnity-x","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2c5d6e3f-7629-437b-b8bc-b1f5b727b5d0","name":"Abhishek Aji","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1179177/avatar-55LWl1BVyiNPS2T8teYkFNW7TBUuIx.jpg","slug":"abhishekaji","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-10T18:02:41.952Z","latestAt":"2026-07-10T18:02:41.952Z"},{"id":"019f4d31-b3cf-7198-9768-cd80267e41c4","type":"creator.followed","target":{"type":"creator","id":"daebf60b-d183-4dc3-9ee8-f5b070d8d8b4","preview":"Sidhanth Suman","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/64229/avatar-6Fkzk5vt1plyb4srBNDlylzUVliRDh.jpg","slug":"sidhanth-suman","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2c5d6e3f-7629-437b-b8bc-b1f5b727b5d0","name":"Abhishek Aji","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1179177/avatar-55LWl1BVyiNPS2T8teYkFNW7TBUuIx.jpg","slug":"abhishekaji","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-10T18:02:10.759Z","latestAt":"2026-07-10T18:02:10.759Z"},{"id":"019f4d31-9790-7408-b529-c7473fa10354","type":"creator.followed","target":{"type":"creator","id":"530618d4-39d4-4326-822e-6adc8a89643b","preview":"Renatho","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/530618d4-39d4-4326-822e-6adc8a89643b/1mfjjuaw","slug":"renatho","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2c5d6e3f-7629-437b-b8bc-b1f5b727b5d0","name":"Abhishek Aji","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1179177/avatar-55LWl1BVyiNPS2T8teYkFNW7TBUuIx.jpg","slug":"abhishekaji","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-10T18:02:03.527Z","latestAt":"2026-07-10T18:02:03.527Z"},{"id":"019f4d2d-bd2f-71ee-bf56-d478898d55aa","type":"creator.followed","target":{"type":"creator","id":"827a339e-2d46-41b2-9f77-3f05c29de5a9","preview":"Nandi","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/29583/avatar-UPfop9vtI2KgN6WreJoFN7Ytns0o9Q.jpg","slug":"framer-university","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2c5d6e3f-7629-437b-b8bc-b1f5b727b5d0","name":"Abhishek Aji","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1179177/avatar-55LWl1BVyiNPS2T8teYkFNW7TBUuIx.jpg","slug":"abhishekaji","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-10T17:57:51.016Z","latestAt":"2026-07-10T17:57:51.016Z"},{"id":"019f4d2d-b087-7650-aea2-c40db446f809","type":"creator.followed","target":{"type":"creator","id":"a7cd9fe6-cf81-4a41-8e93-bca0291dba80","preview":"Framer","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/107446/xpZr8yYS_400x400-2-MqZMjb2zlessnXickTqkyAzkfqz6le.jpg","slug":"framer","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2c5d6e3f-7629-437b-b8bc-b1f5b727b5d0","name":"Abhishek Aji","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1179177/avatar-55LWl1BVyiNPS2T8teYkFNW7TBUuIx.jpg","slug":"abhishekaji","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-10T17:57:47.775Z","latestAt":"2026-07-10T17:57:47.775Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:2c5d6e3f-7629-437b-b8bc-b1f5b727b5d0:/unified/posts/?creator=2c5d6e3f-7629-437b-b8bc-b1f5b727b5d0&with=reposts":[{"data":[{"id":"019d481a-4652-7770-86c4-b07c676cd05d","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2c5d6e3f-7629-437b-b8bc-b1f5b727b5d0","name":"Abhishek Aji","slug":"abhishekaji","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1179177/avatar-55LWl1BVyiNPS2T8teYkFNW7TBUuIx.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"duM1JVdyOI6YTl4Ztjah","resolved":true,"title":"SoundEffect","body":"$63","bodyJson":null,"introduction":"Play sounds on hover and click.","slug":"soundeffect","author":{"framerUserId":"2c5d6e3f-7629-437b-b8bc-b1f5b727b5d0","name":"Abhishek Aji","slug":"abhishekaji","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1179177/avatar-55LWl1BVyiNPS2T8teYkFNW7TBUuIx.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/duM1JVdyOI6YTl4Ztjah/soundeffect-bTyI9v30dhoJtSpSvdsbcpOaQLOVSa","metadata":{"tint":{"h":348,"s":67,"l":27},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-20T18:57:31.480Z","updatedAt":"2026-04-01T08:08:25.705Z","publishedAt":"2026-04-01T08:12:54.738Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/SoundEffect-lJdQ5b.js@Nl2MsJelgZKI7UfsE5UO","previewUrl":"https://sound-effect.framer.website/","price":null,"paymentUrl":null,"workshop":true,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"Nl2MsJelgZKI7UfsE5UO","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":11,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-01T08:12:54.738Z","updatedAt":"2026-04-01T08:12:54.738Z"},{"id":"019c8f39-317c-70bd-a6b2-d444d44617c2","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2c5d6e3f-7629-437b-b8bc-b1f5b727b5d0","name":"Abhishek Aji","slug":"abhishekaji","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1179177/avatar-55LWl1BVyiNPS2T8teYkFNW7TBUuIx.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Lwaeetr81QcGHwbwVe1E","resolved":true,"title":"Decrypted Motion","body":"

This component gives users complete control over the animation experience:

✨ Text & Typography

Change text content instantly
Customize font family
Adjust font color
Set encrypted character color

⚡ Animation Controls

Control animation speed
Set number of iterations
Enable sequential animation
Choose animation direction
Select when animation triggers (Animate On)

","bodyJson":null,"introduction":"customizable text encryption animation","slug":"decrypted-motion","author":{"framerUserId":"2c5d6e3f-7629-437b-b8bc-b1f5b727b5d0","name":"Abhishek Aji","slug":"abhishekaji","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1179177/avatar-55LWl1BVyiNPS2T8teYkFNW7TBUuIx.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/Lwaeetr81QcGHwbwVe1E/decrypted-motion-6Ll72bZLXet0fo03xEPbiaI8seKWtx","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-02-20T08:18:18.015Z","updatedAt":"2026-02-24T10:13:35.485Z","publishedAt":"2026-02-24T10:36:56.060Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Decrypted-Text-sPLejg.js@1BDFzQrzlhrvZwMCOFgk","previewUrl":"https://decrypted-text.framer.website/","price":null,"paymentUrl":null,"workshop":true,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"1BDFzQrzlhrvZwMCOFgk","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-02-24T10:36:56.060Z","updatedAt":"2026-02-24T10:36:56.060Z"},{"id":"019c7498-7ff7-75db-9c80-08dcef5e3ae4","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2c5d6e3f-7629-437b-b8bc-b1f5b727b5d0","name":"Abhishek Aji","slug":"abhishekaji","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1179177/avatar-55LWl1BVyiNPS2T8teYkFNW7TBUuIx.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"9fSFWU8h5LwoVl91RXFP","resolved":true,"title":"Animated Hover btn","body":"

A modern, eye-catching button component featuring a smooth sliding fill animation on hover. The background transitions elegantly across the button, creating a premium micro-interaction that instantly makes your UI feel dynamic and polished.

Designed with rounded edges, clean typography, and subtle motion timing, this button is perfect for call-to-action sections, hero areas, landing pages, and product showcases.

✨ Features:

Smooth sliding hover animation
Clean rounded design
Subtle micro-interaction on click
Fully customizable text, colors, and size
Responsive and performance optimized
Easy to integrate into any Framer project

This component adds movement without being distracting — helping your CTA stand out while keeping a modern, professional look.

","bodyJson":null,"introduction":"Animated Button with smooth transition ","slug":"animated-hover-btn","author":{"framerUserId":"2c5d6e3f-7629-437b-b8bc-b1f5b727b5d0","name":"Abhishek Aji","slug":"abhishekaji","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1179177/avatar-55LWl1BVyiNPS2T8teYkFNW7TBUuIx.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/Y3aUXc8LgDzTCOlUUMQz/animated-button-001-tS9zZe9I3QN2PabAfcQxawS1IAYGHk","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-02-12T12:18:35.219Z","updatedAt":"2026-03-09T06:33:52.578Z","publishedAt":"2026-02-19T06:31:17.239Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Animated-Button-Hover-xhTSjx.js@eM4VcAvRGMIX7wUfXRvF","previewUrl":"https://animated-button-hover.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"eM4VcAvRGMIX7wUfXRvF","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-02-19T06:31:17.239Z","updatedAt":"2026-02-19T06:31:17.239Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L64"}]