5d: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"] 5e:T4c8,

FuseMorph is an interactive icon morphing component for Framer, built by InterFuse. It lets you smoothly transform one icon into another instead of simply switching between states.

Choose icons from Lucide, Tabler, and Heroicons, or connect your own compatible SVG icons. FuseMorph supports Framer Variants, Tap, Hover, and Progress, so the animation can react naturally to different interactions.

You can fine-tune the result with Spring presets, custom stiffness and damping, animation timing, icon size, color, and stroke width. Progress mode also gives you direct control over the morph from 0 → 1, making it useful for scroll, drag, and other continuous interactions.

Built for UI details like menu buttons, navigation, toggles, media controls, states, and micro-interactions — anywhere a simple icon swap feels too static.

Key features: Lucide, Tabler & Heroicons support · Custom SVG icons · Variant / Tap / Hover · Adjustable animation time · Spring presets & custom physics · Size, color & stroke controls · Smooth reversible morphing · Built directly for Framer.

5f:T8e7,

FuseReveal brings cinematic, scroll-driven text animation to any Framer project.

Transform static headings and paragraphs into polished reveal sequences with adjustable blur, color transitions, accent trails and precise scroll timing - without writing code.

Shape every reveal

Adjustable starting blur
Precise blur clear position
Custom base, highlight and final colors
Configurable accent start and peak
Adjustable reveal trail
Motion smoothing
Forward and reverse directions

Precision scroll controls

Choose exactly where the reveal starts and finishes inside the viewport. Control the start position, end position and component anchor to match short headings, long paragraphs and full-page storytelling sections.

Characters or words

Reveal text character by character for detailed cinematic motion, or animate complete words for a cleaner rhythm and better performance on longer content.

Built for native Framer workflows

Use Framer’s native Typography panel to change fonts, weights, sizes, spacing, line height and alignment. Select the appropriate semantic HTML tag and customize everything from the properties panel.

Accessible and SEO-friendly

FuseReveal keeps the complete text available as readable semantic content while hiding the decorative animated fragments from screen readers.

Canvas preview included

Scrub through any stage of the animation directly on the Framer canvas without repeatedly opening Preview mode.

Optimized for smooth performance

Text processing is memoized, animation updates are synchronized with the browser and visual properties are prepared for efficient rendering. For longer text, word-based splitting provides an additional lightweight option.

Perfect for

Landing pages, portfolios, product launches, editorial layouts, storytelling sections, SaaS websites, presentations and cinematic hero experiences.

Make every word feel intentional with FuseReveal.

60:T6c7,

FuseTone is back with a cleaner, safer and more focused architecture. 🔊

This update introduces a new wrapper-based workflow designed specifically for Framer components.

Connect any button, link, input, dropdown or form through the Content property, then assign responsive sound feedback to:

• Hover

• Press

• Release

• Click

• Page navigation

• Section links

• External links

• Input focus

• Value changes

• Form submission

• Browser validation

• Success and error states

FuseTone now keeps all interaction listeners strictly inside its own wrapper and connected content. It no longer attaches behavior to surrounding elements or unrelated parts of the page.

Form monitoring has also been rebuilt. When result detection is enabled, FuseTone watches only the submitted form, batches DOM updates and automatically stops monitoring after a short period.

The component includes 17 lightweight sounds:

Chime, Sparkle, Droplet, Bloom, Whisper, Tick, Press, Release, Toggle, Success, Error, Page, Loading, Ready, Pulse, Scan and Arrival.

Every sound is generated directly in the browser using the Web Audio API.

No MP3 files.

No external audio hosting.

No additional dependencies.

A small browser note: visitors need to click, tap or use the keyboard once before Web Audio can start. After the first interaction, hover sounds work normally.

FuseTone is built for interactive landing pages, SaaS websites, portfolios, product demos, forms and polished Framer micro-interactions.

Built by InterFuse Agency.

61:T7aa,

FuseTone adds responsive sound feedback to buttons, links, inputs, dropdowns, navigation and forms in Framer.

Connect any Framer component through the Content property, then assign sounds to hover, press, release, click, navigation and form interactions.

Built for isolated and predictable behavior

FuseTone handles interactions only inside its own wrapper and connected content. It does not attach listeners to surrounding page elements or unrelated components.

Supported interactions

• Hover

• Press

• Release

• Click

• Page navigation

• Section links

• External links

• Input focus

• Value changes

• Form submission

• Browser validation

• Success and error states

17 included sounds

Chime, Sparkle, Droplet, Bloom, Whisper, Tick, Press, Release, Toggle, Success, Error, Page, Loading, Ready, Pulse, Scan and Arrival.

No audio files required

Every sound is generated directly in the browser using the Web Audio API. There are no MP3 files, external audio hosting or additional dependencies.

Form-aware behavior

When form result detection is enabled, FuseTone watches only the submitted form for a limited period. Updates are debounced to keep the component lightweight and avoid unnecessary page-wide monitoring.

How to use

1. Add FuseTone to the Canvas.

2. Connect a button, link, input or form through Content.

3. Choose sounds for the interactions you need.

4. Preview or publish the site.

Browser audio note

Browsers require a click, tap or keyboard interaction before Web Audio can start. Hover sounds become available after the visitor’s first interaction with the page.

Perfect for

Interactive landing pages, SaaS websites, portfolios, product demos, forms and polished micro-interactions.

FuseTone is built by InterFuse Agency.

58:["$","$L5d",null,{"value":{"fallback":{"$inf$activity-creator-a1f28d1c-d709-4ed0-b5da-bea65bb1444d-all:/unified/creator/a1f28d1c-d709-4ed0-b5da-bea65bb1444d/activity/":[{"data":[{"id":"01a04ae6-b698-767a-aaaa-a8e8d5df4a71","type":"component.created","target":{"type":"component","id":"G8mbjp2bQFRuZ6VK7TAb","preview":"FuseMorph","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a1f28d1c-d709-4ed0-b5da-bea65bb1444d/01a04ae6-8b02-753e-a9f2-dcee618229f5.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"a1f28d1c-d709-4ed0-b5da-bea65bb1444d","name":"Vasilii Gotsanuck","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a1f28d1c-d709-4ed0-b5da-bea65bb1444d/1z6cn9yq","slug":"gotsanuck","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-08-29T00:23:49.144Z","latestAt":"2026-08-29T00:23:49.144Z"},{"id":"019fd746-d83b-77b9-8df9-2e07b15ef29b","type":"component.created","target":{"type":"component","id":"tY4iHHu4P2eC4bNTriew","preview":"FuseReveal","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a1f28d1c-d709-4ed0-b5da-bea65bb1444d/01a04a66-e5ec-712e-836e-70e06d68fd71.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"a1f28d1c-d709-4ed0-b5da-bea65bb1444d","name":"Vasilii Gotsanuck","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a1f28d1c-d709-4ed0-b5da-bea65bb1444d/1z6cn9yq","slug":"gotsanuck","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-08-06T13:32:52.155Z","latestAt":"2026-08-06T13:32:52.155Z"},{"id":"019fd2ae-856b-7569-a05f-3dfe12db37c8","type":"component.created","target":{"type":"component","id":"1aWvpGbqp4lTv0JpSuVE","preview":"FuseTone","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a1f28d1c-d709-4ed0-b5da-bea65bb1444d/019fd2ad-f333-731a-8312-7bb90151ff1c.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"a1f28d1c-d709-4ed0-b5da-bea65bb1444d","name":"Vasilii Gotsanuck","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a1f28d1c-d709-4ed0-b5da-bea65bb1444d/1z6cn9yq","slug":"gotsanuck","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-08-05T16:08:00.619Z","latestAt":"2026-08-05T16:08:00.619Z"},{"id":"019fb0a2-4297-7507-b95e-1640cb742c32","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":"a1f28d1c-d709-4ed0-b5da-bea65bb1444d","name":"Vasilii Gotsanuck","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a1f28d1c-d709-4ed0-b5da-bea65bb1444d/1z6cn9yq","slug":"gotsanuck","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-30T01:27:31.722Z","latestAt":"2026-07-30T01:27:31.722Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:a1f28d1c-d709-4ed0-b5da-bea65bb1444d:/unified/posts/?creator=a1f28d1c-d709-4ed0-b5da-bea65bb1444d&with=reposts":[{"data":[{"id":"01a04ae6-b474-7585-91a8-86ad47a20e27","title":null,"body":"

FuseMorph is live

A Framer component for fluid icon morphing between Lucide, Tabler, Heroicons, or your own compatible SVGs.

Trigger morphs with Variants, Hover, Tap, or Progress, then fine-tune the feel with spring motion, timing, size, color, and stroke controls.

Built by InterFuse for micro-interactions that deserve more than a simple icon swap.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"FuseMorph is live "}]},{"type":"paragraph","content":[{"type":"text","text":"A Framer component for fluid icon morphing between Lucide, Tabler, Heroicons, or your own compatible SVGs."}]},{"type":"paragraph","content":[{"type":"text","text":"Trigger morphs with Variants, Hover, Tap, or Progress, then fine-tune the feel with spring motion, timing, size, color, and stroke controls."}]},{"type":"paragraph","content":[{"type":"text","text":"Built by InterFuse for micro-interactions that deserve more than a simple icon swap."}]}]},"author":{"framerUserId":"a1f28d1c-d709-4ed0-b5da-bea65bb1444d","name":"Vasilii Gotsanuck","slug":"gotsanuck","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a1f28d1c-d709-4ed0-b5da-bea65bb1444d/1z6cn9yq","followed":false,"followsYou":false},"media":[],"resources":[{"id":"G8mbjp2bQFRuZ6VK7TAb","resolved":true,"title":"FuseMorph","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"FuseMorph is an interactive icon morphing component for Framer, built by InterFuse. It lets you smoothly transform one icon into another instead of simply switching between states.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Choose icons from "},{"type":"text","text":"Lucide, Tabler, and Heroicons","marks":[{"type":"bold"}]},{"type":"text","text":", or connect your own compatible SVG icons. FuseMorph supports "},{"type":"text","text":"Framer Variants, Tap, Hover, and Progress","marks":[{"type":"bold"}]},{"type":"text","text":", so the animation can react naturally to different interactions."}]},{"type":"paragraph","content":[{"type":"text","text":"You can fine-tune the result with "},{"type":"text","text":"Spring presets, custom stiffness and damping, animation timing, icon size, color, and stroke width","marks":[{"type":"bold"}]},{"type":"text","text":". Progress mode also gives you direct control over the morph from "},{"type":"text","text":"0 → 1","marks":[{"type":"code"}]},{"type":"text","text":", making it useful for scroll, drag, and other continuous interactions."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for UI details like menu buttons, navigation, toggles, media controls, states, and micro-interactions — anywhere a simple icon swap feels too static."}]},{"type":"paragraph","content":[{"type":"text","text":"Key features:","marks":[{"type":"bold"}]},{"type":"text","text":" Lucide, Tabler & Heroicons support · Custom SVG icons · Variant / Tap / Hover · Adjustable animation time · Spring presets & custom physics · Size, color & stroke controls · Smooth reversible morphing · Built directly for Framer."}]}]},"introduction":"Morph any icon in Framer","slug":"fusemorph","author":{"framerUserId":"a1f28d1c-d709-4ed0-b5da-bea65bb1444d","name":"Vasilii Gotsanuck","slug":"gotsanuck","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a1f28d1c-d709-4ed0-b5da-bea65bb1444d/1z6cn9yq","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a1f28d1c-d709-4ed0-b5da-bea65bb1444d/01a04ae6-8b02-753e-a9f2-dcee618229f5.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-29T00:23:48.070Z","updatedAt":"2026-09-11T13:54:51.633Z","publishedAt":"2026-08-29T00:23:48.067Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/FuseMorph-SK0UWt.js@tGjJzYw8Cke64WbFMTj9","previewUrl":"https://fusemorph.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"tGjJzYw8Cke64WbFMTj9","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-29T00:23:48.596Z","updatedAt":"2026-08-29T00:23:48.596Z"},{"id":"019fd746-d67d-705d-b75a-6a3d1419aaea","title":null,"body":"

Just released FuseReveal.

A native Framer component for creating cinematic, scroll-driven text reveals with adjustable blur, color transitions, reverse direction, smoothing, and precise viewport controls.

Reveal text by characters or words, customize everything directly inside Framer, and keep your content accessible and SEO-friendly.

FuseReveal is live on the Framer Marketplace.

Built by InterFuse.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Just released FuseReveal."}]},{"type":"paragraph","content":[{"type":"text","text":"A native Framer component for creating cinematic, scroll-driven text reveals with adjustable blur, color transitions, reverse direction, smoothing, and precise viewport controls."}]},{"type":"paragraph","content":[{"type":"text","text":"Reveal text by characters or words, customize everything directly inside Framer, and keep your content accessible and SEO-friendly."}]},{"type":"paragraph","content":[{"type":"text","text":"FuseReveal is live on the Framer Marketplace."}]},{"type":"paragraph","content":[{"type":"text","text":"Built by InterFuse."}]}]},"author":{"framerUserId":"a1f28d1c-d709-4ed0-b5da-bea65bb1444d","name":"Vasilii Gotsanuck","slug":"gotsanuck","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a1f28d1c-d709-4ed0-b5da-bea65bb1444d/1z6cn9yq","followed":false,"followsYou":false},"media":[],"resources":[{"id":"tY4iHHu4P2eC4bNTriew","resolved":true,"title":"FuseReveal","body":"$5f","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"FuseReveal brings cinematic, scroll-driven text animation to any Framer project.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Transform static headings and paragraphs into polished reveal sequences with adjustable blur, color transitions, accent trails and precise scroll timing - without writing code."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Shape every reveal","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable starting blur"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Precise blur clear position"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom base, highlight and final colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Configurable accent start and peak"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable reveal trail"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Motion smoothing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Forward and reverse directions"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Precision scroll controls","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Choose exactly where the reveal starts and finishes inside the viewport. Control the start position, end position and component anchor to match short headings, long paragraphs and full-page storytelling sections."}]},{"type":"paragraph","content":[{"type":"text","text":"Characters or words","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Reveal text character by character for detailed cinematic motion, or animate complete words for a cleaner rhythm and better performance on longer content."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for native Framer workflows","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Use Framer’s native Typography panel to change fonts, weights, sizes, spacing, line height and alignment. Select the appropriate semantic HTML tag and customize everything from the properties panel."}]},{"type":"paragraph","content":[{"type":"text","text":"Accessible and SEO-friendly","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"FuseReveal keeps the complete text available as readable semantic content while hiding the decorative animated fragments from screen readers."}]},{"type":"paragraph","content":[{"type":"text","text":"Canvas preview included","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Scrub through any stage of the animation directly on the Framer canvas without repeatedly opening Preview mode."}]},{"type":"paragraph","content":[{"type":"text","text":"Optimized for smooth performance","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Text processing is memoized, animation updates are synchronized with the browser and visual properties are prepared for efficient rendering. For longer text, word-based splitting provides an additional lightweight option."}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Landing pages, portfolios, product launches, editorial layouts, storytelling sections, SaaS websites, presentations and cinematic hero experiences."}]},{"type":"paragraph","content":[{"type":"text","text":"Make every word feel intentional with FuseReveal."}]}]},"introduction":"Cinematic Text Reveal","slug":"fusereveal","author":{"framerUserId":"a1f28d1c-d709-4ed0-b5da-bea65bb1444d","name":"Vasilii Gotsanuck","slug":"gotsanuck","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a1f28d1c-d709-4ed0-b5da-bea65bb1444d/1z6cn9yq","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a1f28d1c-d709-4ed0-b5da-bea65bb1444d/01a04a66-e5ec-712e-836e-70e06d68fd71.png","metadata":{"tint":{"h":204,"s":94,"l":25},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-06T13:32:51.139Z","updatedAt":"2026-09-03T01:34:29.466Z","publishedAt":"2026-08-06T13:32:51.136Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Fusereveal-rz2MG2.js@DUhPpXKFUKuzDzLIlZEy","previewUrl":"https://fusereveal.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"DUhPpXKFUKuzDzLIlZEy","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":21,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-06T13:32:51.709Z","updatedAt":"2026-08-06T13:32:51.709Z"},{"id":"019fd2ae-83a7-7794-823b-62891250f6ce","title":null,"body":"$60","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"FuseTone is back with a cleaner, safer and more focused architecture. "},{"type":"emoji","attrs":{"name":"loud_sound","emoji":"🔊"}}]},{"type":"paragraph","content":[{"type":"text","text":"This update introduces a new wrapper-based workflow designed specifically for Framer components."}]},{"type":"paragraph","content":[{"type":"text","text":"Connect any button, link, input, dropdown or form through the Content property, then assign responsive sound feedback to:"}]},{"type":"paragraph","content":[{"type":"text","text":"• Hover"}]},{"type":"paragraph","content":[{"type":"text","text":"• Press"}]},{"type":"paragraph","content":[{"type":"text","text":"• Release"}]},{"type":"paragraph","content":[{"type":"text","text":"• Click"}]},{"type":"paragraph","content":[{"type":"text","text":"• Page navigation"}]},{"type":"paragraph","content":[{"type":"text","text":"• Section links"}]},{"type":"paragraph","content":[{"type":"text","text":"• External links"}]},{"type":"paragraph","content":[{"type":"text","text":"• Input focus"}]},{"type":"paragraph","content":[{"type":"text","text":"• Value changes"}]},{"type":"paragraph","content":[{"type":"text","text":"• Form submission"}]},{"type":"paragraph","content":[{"type":"text","text":"• Browser validation"}]},{"type":"paragraph","content":[{"type":"text","text":"• Success and error states"}]},{"type":"paragraph","content":[{"type":"text","text":"FuseTone now keeps all interaction listeners strictly inside its own wrapper and connected content. It no longer attaches behavior to surrounding elements or unrelated parts of the page."}]},{"type":"paragraph","content":[{"type":"text","text":"Form monitoring has also been rebuilt. When result detection is enabled, FuseTone watches only the submitted form, batches DOM updates and automatically stops monitoring after a short period."}]},{"type":"paragraph","content":[{"type":"text","text":"The component includes 17 lightweight sounds:"}]},{"type":"paragraph","content":[{"type":"text","text":"Chime, Sparkle, Droplet, Bloom, Whisper, Tick, Press, Release, Toggle, Success, Error, Page, Loading, Ready, Pulse, Scan and Arrival."}]},{"type":"paragraph","content":[{"type":"text","text":"Every sound is generated directly in the browser using the Web Audio API."}]},{"type":"paragraph","content":[{"type":"text","text":"No MP3 files."}]},{"type":"paragraph","content":[{"type":"text","text":"No external audio hosting."}]},{"type":"paragraph","content":[{"type":"text","text":"No additional dependencies."}]},{"type":"paragraph","content":[{"type":"text","text":"A small browser note: visitors need to click, tap or use the keyboard once before Web Audio can start. After the first interaction, hover sounds work normally."}]},{"type":"paragraph","content":[{"type":"text","text":"FuseTone is built for interactive landing pages, SaaS websites, portfolios, product demos, forms and polished Framer micro-interactions."}]},{"type":"paragraph","content":[{"type":"text","text":"Built by InterFuse Agency."}]}]},"author":{"framerUserId":"a1f28d1c-d709-4ed0-b5da-bea65bb1444d","name":"Vasilii Gotsanuck","slug":"gotsanuck","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a1f28d1c-d709-4ed0-b5da-bea65bb1444d/1z6cn9yq","followed":false,"followsYou":false},"media":[],"resources":[{"id":"1aWvpGbqp4lTv0JpSuVE","resolved":true,"title":"FuseTone","body":"$61","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"FuseTone adds responsive sound feedback to buttons, links, inputs, dropdowns, navigation and forms in Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Connect any Framer component through the Content property, then assign sounds to hover, press, release, click, navigation and form interactions."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for isolated and predictable behavior"}]},{"type":"paragraph","content":[{"type":"text","text":"FuseTone handles interactions only inside its own wrapper and connected content. It does not attach listeners to surrounding page elements or unrelated components."}]},{"type":"paragraph","content":[{"type":"text","text":"Supported interactions"}]},{"type":"paragraph","content":[{"type":"text","text":"• Hover"}]},{"type":"paragraph","content":[{"type":"text","text":"• Press"}]},{"type":"paragraph","content":[{"type":"text","text":"• Release"}]},{"type":"paragraph","content":[{"type":"text","text":"• Click"}]},{"type":"paragraph","content":[{"type":"text","text":"• Page navigation"}]},{"type":"paragraph","content":[{"type":"text","text":"• Section links"}]},{"type":"paragraph","content":[{"type":"text","text":"• External links"}]},{"type":"paragraph","content":[{"type":"text","text":"• Input focus"}]},{"type":"paragraph","content":[{"type":"text","text":"• Value changes"}]},{"type":"paragraph","content":[{"type":"text","text":"• Form submission"}]},{"type":"paragraph","content":[{"type":"text","text":"• Browser validation"}]},{"type":"paragraph","content":[{"type":"text","text":"• Success and error states"}]},{"type":"paragraph","content":[{"type":"text","text":"17 included sounds"}]},{"type":"paragraph","content":[{"type":"text","text":"Chime, Sparkle, Droplet, Bloom, Whisper, Tick, Press, Release, Toggle, Success, Error, Page, Loading, Ready, Pulse, Scan and Arrival."}]},{"type":"paragraph","content":[{"type":"text","text":"No audio files required"}]},{"type":"paragraph","content":[{"type":"text","text":"Every sound is generated directly in the browser using the Web Audio API. There are no MP3 files, external audio hosting or additional dependencies."}]},{"type":"paragraph","content":[{"type":"text","text":"Form-aware behavior"}]},{"type":"paragraph","content":[{"type":"text","text":"When form result detection is enabled, FuseTone watches only the submitted form for a limited period. Updates are debounced to keep the component lightweight and avoid unnecessary page-wide monitoring."}]},{"type":"paragraph","content":[{"type":"text","text":"How to use"}]},{"type":"paragraph","content":[{"type":"text","text":"1. Add FuseTone to the Canvas."}]},{"type":"paragraph","content":[{"type":"text","text":"2. Connect a button, link, input or form through Content."}]},{"type":"paragraph","content":[{"type":"text","text":"3. Choose sounds for the interactions you need."}]},{"type":"paragraph","content":[{"type":"text","text":"4. Preview or publish the site."}]},{"type":"paragraph","content":[{"type":"text","text":"Browser audio note"}]},{"type":"paragraph","content":[{"type":"text","text":"Browsers require a click, tap or keyboard interaction before Web Audio can start. Hover sounds become available after the visitor’s first interaction with the page."}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for"}]},{"type":"paragraph","content":[{"type":"text","text":"Interactive landing pages, SaaS websites, portfolios, product demos, forms and polished micro-interactions."}]},{"type":"paragraph","content":[{"type":"text","text":"FuseTone is built by InterFuse Agency."}]}]},"introduction":"Add sound to every interaction","slug":"fusetone","author":{"framerUserId":"a1f28d1c-d709-4ed0-b5da-bea65bb1444d","name":"Vasilii Gotsanuck","slug":"gotsanuck","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a1f28d1c-d709-4ed0-b5da-bea65bb1444d/1z6cn9yq","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a1f28d1c-d709-4ed0-b5da-bea65bb1444d/019fd2ad-f333-731a-8312-7bb90151ff1c.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-05T16:07:59.667Z","updatedAt":"2026-09-11T13:55:08.898Z","publishedAt":"2026-08-05T16:07:59.664Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Fusetone-cxvVN8.js@MErCOuV4GKj7GOzEOKbl","previewUrl":"https://fusetone.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"MErCOuV4GKj7GOzEOKbl","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":13,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-08-29T08:46:51.383Z","createdAt":"2026-08-05T16:08:00.167Z","updatedAt":"2026-08-29T08:46:51.383Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L62"}]