50:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 51:T51f,

Bring your website to life with a fluid cursor experience. 🌊

Flowing Cursor creates a smooth, organic wave effect that reacts to your cursor movement in real time. Move your mouse, watch the colors flow, and give your visitors an interactive moment they’ll remember.

✨ What you can create • Fluid cursor trails • Interactive wave effects • Liquid-style backgrounds • Creative hero sections • Immersive portfolio experiences • Eye-catching landing pages

🎛 Make it yours Customize the colors, intensity, wave strength, trail size, smoothness, decay, and more directly from Framer’s property panel — no code required.

⚡ Built for Framer Smooth interactions, responsive behavior, and a static fallback for Canvas and exports.

Perfect for: portfolios, creative agencies, SaaS websites, landing pages, personal websites, and experimental designs.

Move your cursor. Watch the page flow. 🌊

52:T5fa,

Confetti Toggle Button is a playful animated toggle for Framer that adds a burst of confetti whenever users switch it on. Perfect for pricing toggles, settings, preferences, forms, onboarding flows, SaaS dashboards, and interactive landing pages.

Customize the toggle colors, size, knob, confetti colors, particle count, spread, and size directly from Framer's property panel. You can also add a custom background and connect the toggle state to your project with the onValueChange event.

Features

Animated ON/OFF states
Confetti celebration on activation
Custom confetti colors
Adjustable particle count and spread
Custom toggle width and height
Custom knob and track colors
Optional background container
Framer property controls
onValueChange event support
Lightweight React + Framer Motion animation

Use it for

Pricing plan toggles
Settings and preferences
SaaS dashboards
Forms and filters
Onboarding experiences
Success and confirmation interactions
Interactive landing pages
Fun micro-interactions

Drop it into your Framer project, customize the properties, and turn an ordinary toggle into a delightful interaction.

4f:["$","$L50",null,{"value":{"fallback":{"$inf$activity-creator-ceb08417-4110-42cd-b198-a3eb4d93a1f3-all:/unified/creator/ceb08417-4110-42cd-b198-a3eb4d93a1f3/activity/":[{"data":[{"id":"01a110e2-f068-7089-9150-5c9af4a9471b","type":"component.created","target":{"type":"component","id":"kQ1NBCl7Scj0OZadxtJp","preview":"Text Slide Button","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ceb08417-4110-42cd-b198-a3eb4d93a1f3/01a110e2-aa90-770d-acbe-1a7907a702e5.jpg","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"ceb08417-4110-42cd-b198-a3eb4d93a1f3","name":"Ansab khalid","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ceb08417-4110-42cd-b198-a3eb4d93a1f3/brc7d22t","slug":"ansab-khalid","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-06T11:04:30.568Z","latestAt":"2026-10-06T11:04:30.568Z"},{"id":"01a042c6-d3b3-74c2-a514-bb16b5437802","type":"component.created","target":{"type":"component","id":"TlvwfwR1yehcB44kmEat","preview":"Text Liquid Hover","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ceb08417-4110-42cd-b198-a3eb4d93a1f3/01a042c5-d32c-751a-bb97-76305028312a.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"ceb08417-4110-42cd-b198-a3eb4d93a1f3","name":"Ansab khalid","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ceb08417-4110-42cd-b198-a3eb4d93a1f3/brc7d22t","slug":"ansab-khalid","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-08-27T10:32:01.715Z","latestAt":"2026-08-27T10:32:01.715Z"},{"id":"01a00f72-f371-75f9-ae33-f2591a2cd870","type":"component.created","target":{"type":"component","id":"HtQldIO2dRhMvxghLNYH","preview":"Flowing Cursor","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ceb08417-4110-42cd-b198-a3eb4d93a1f3/01a00f72-aa1b-76ec-a9dd-46c13a9c07af.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"ceb08417-4110-42cd-b198-a3eb4d93a1f3","name":"Ansab khalid","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ceb08417-4110-42cd-b198-a3eb4d93a1f3/brc7d22t","slug":"ansab-khalid","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-08-17T11:19:46.801Z","latestAt":"2026-08-17T11:19:46.801Z"},{"id":"019ffacb-5d85-778f-851d-8b3c1cc51415","type":"component.created","target":{"type":"component","id":"wkiHMqfFZXfEJeSgHS3z","preview":"Confetti Toggle","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ceb08417-4110-42cd-b198-a3eb4d93a1f3/019ffb52-45eb-77a9-b2aa-e63fb956c6f4.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"ceb08417-4110-42cd-b198-a3eb4d93a1f3","name":"Ansab khalid","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ceb08417-4110-42cd-b198-a3eb4d93a1f3/brc7d22t","slug":"ansab-khalid","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-08-13T11:04:19.589Z","latestAt":"2026-08-13T11:04:19.589Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:ceb08417-4110-42cd-b198-a3eb4d93a1f3:/unified/posts/?creator=ceb08417-4110-42cd-b198-a3eb4d93a1f3&with=reposts":[{"data":[{"id":"01a110e2-eb7e-7628-8908-175423c597f4","title":null,"body":"

Just dropped Text Slide Button on the Framer Marketplace ✨

A tiny but satisfying hover button that slides the text up to reveal a second message. Smooth springs, color transitions, soft shadow lift — and it respects reduced motion.

Perfect for CTAs, nav links, or any place you want a little extra delight.

Grab it and make your buttons feel alive →

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Just dropped Text Slide Button on the Framer Marketplace ✨"}]},{"type":"paragraph","content":[{"type":"text","text":"A tiny but satisfying hover button that slides the text up to reveal a second message. Smooth springs, color transitions, soft shadow lift — and it respects reduced motion."}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for CTAs, nav links, or any place you want a little extra delight."}]},{"type":"paragraph","content":[{"type":"text","text":"Grab it and make your buttons feel alive →"}]}]},"author":{"framerUserId":"ceb08417-4110-42cd-b198-a3eb4d93a1f3","name":"Ansab khalid","slug":"ansab-khalid","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ceb08417-4110-42cd-b198-a3eb4d93a1f3/brc7d22t","followed":false,"followsYou":false},"media":[],"resources":[{"id":"kQ1NBCl7Scj0OZadxtJp","resolved":true,"title":"Text Slide Button","body":"

Buttons don’t have to be static. ✦

Meet Text Slide Button. A new Framer component that turns a simple CTA into a playful, animated experience.

Hover and the text slides up to reveal a new message with smooth spring motion, color shifts, and a soft lift.

✦ Text slide animation ✦ Spring-based motion ✦ Custom hover colors & borders ✦ Adjustable speed ✦ Respects reduced motion

Built for portfolios, landing pages, agencies and creative sites.

What will you make people click next?

#Framer #FramerComponents #FramerMarketplace #WebDesign #InteractionDesign #UIDesign

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Buttons don’t have to be static. ✦ "}]},{"type":"paragraph","content":[{"type":"text","text":"Meet Text Slide Button. A new Framer component that turns a simple CTA into a playful, animated experience."}]},{"type":"paragraph","content":[{"type":"text","text":"Hover and the text slides up to reveal a new message with smooth spring motion, color shifts, and a soft lift."}]},{"type":"paragraph","content":[{"type":"text","text":"✦ Text slide animation ✦ Spring-based motion ✦ Custom hover colors & borders ✦ Adjustable speed ✦ Respects reduced motion"}]},{"type":"paragraph","content":[{"type":"text","text":"Built for portfolios, landing pages, agencies and creative sites."}]},{"type":"paragraph","content":[{"type":"text","text":"What will you make people click next?"}]},{"type":"paragraph","content":[{"type":"text","text":"#Framer #FramerComponents #FramerMarketplace #WebDesign #InteractionDesign #UIDesign"}]}]},"introduction":"Animated hover text swap button","slug":"text-slide-button","author":{"framerUserId":"ceb08417-4110-42cd-b198-a3eb4d93a1f3","name":"Ansab khalid","slug":"ansab-khalid","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ceb08417-4110-42cd-b198-a3eb4d93a1f3/brc7d22t","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ceb08417-4110-42cd-b198-a3eb4d93a1f3/01a110e2-aa90-770d-acbe-1a7907a702e5.jpg","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1168,"height":784}}],"post":null,"createdAt":"2026-10-06T11:04:28.613Z","updatedAt":"2026-10-06T11:04:28.613Z","publishedAt":"2026-10-06T11:04:28.611Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/TextSlideButton-N9a1Fp.js@bcGypw7kT72ZiYhNkfgj","previewUrl":"https://tiny-heart-291651.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"bcGypw7kT72ZiYhNkfgj","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-06T11:04:29.310Z","updatedAt":"2026-10-06T11:04:29.310Z"},{"id":"01a042c6-d183-705f-b687-77e2f279b318","title":null,"body":"

🌊 Meet Liquid Hover

A tiny interaction that makes your website feel a lot more alive.

Move your cursor over the element and watch it smoothly flow, stretch, and react to your movement.

✨ Smooth liquid animation 🖱 Cursor reactive 🎨 Fully customizable 🆓 Free for your Framer projects

Try it out and let me know what you think 👀

#Framer #FramerCommunity #FramerComponents #WebDesign #InteractionDesign

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"ocean","emoji":"🌊"}},{"type":"text","text":" Meet Liquid Hover"}]},{"type":"paragraph","content":[{"type":"text","text":"A tiny interaction that makes your website feel a lot more alive."}]},{"type":"paragraph","content":[{"type":"text","text":"Move your cursor over the element and watch it smoothly flow, stretch, and react to your movement."}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"sparkles","emoji":"✨"}},{"type":"text","text":" Smooth liquid animation "},{"type":"emoji","attrs":{"name":"computer_mouse","emoji":"🖱"}},{"type":"text","text":" Cursor reactive "},{"type":"emoji","attrs":{"name":"art","emoji":"🎨"}},{"type":"text","text":" Fully customizable "},{"type":"emoji","attrs":{"name":"free","emoji":"🆓"}},{"type":"text","text":" Free for your Framer projects"}]},{"type":"paragraph","content":[{"type":"text","text":"Try it out and let me know what you think "},{"type":"emoji","attrs":{"name":"eyes","emoji":"👀"}}]},{"type":"paragraph","content":[{"type":"text","text":"#Framer #FramerCommunity #FramerComponents #WebDesign #InteractionDesign"}]}]},"author":{"framerUserId":"ceb08417-4110-42cd-b198-a3eb4d93a1f3","name":"Ansab khalid","slug":"ansab-khalid","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ceb08417-4110-42cd-b198-a3eb4d93a1f3/brc7d22t","followed":false,"followsYou":false},"media":[],"resources":[{"id":"TlvwfwR1yehcB44kmEat","resolved":true,"title":"Text Liquid Hover","body":"

Make your website feel alive ✨

Liquid Hover adds a smooth, playful interaction that responds beautifully to your cursor. Move across the element and watch it flow, stretch, and react in real time.

Perfect for hero sections, headings, buttons, cards, portfolios, and creative landing pages.

✨ Smooth liquid animation 🖱 Interactive cursor response 🎨 Easy to customize ⚡ Lightweight and simple to use 🆓 Free for your Framer projects

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Make your website feel alive "},{"type":"emoji","attrs":{"name":"sparkles","emoji":"✨"}}]},{"type":"paragraph","content":[{"type":"text","text":"Liquid Hover adds a smooth, playful interaction that responds beautifully to your cursor. Move across the element and watch it flow, stretch, and react in real time."}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for hero sections, headings, buttons, cards, portfolios, and creative landing pages."}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"sparkles","emoji":"✨"}},{"type":"text","text":" Smooth liquid animation "},{"type":"emoji","attrs":{"name":"computer_mouse","emoji":"🖱"}},{"type":"text","text":" Interactive cursor response "},{"type":"emoji","attrs":{"name":"art","emoji":"🎨"}},{"type":"text","text":" Easy to customize "},{"type":"emoji","attrs":{"name":"zap","emoji":"⚡"}},{"type":"text","text":" Lightweight and simple to use "},{"type":"emoji","attrs":{"name":"free","emoji":"🆓"}},{"type":"text","text":" Free for your Framer projects"}]}]},"introduction":"A playful liquid hover effect that","slug":"text-liquid-hover","author":{"framerUserId":"ceb08417-4110-42cd-b198-a3eb4d93a1f3","name":"Ansab khalid","slug":"ansab-khalid","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ceb08417-4110-42cd-b198-a3eb4d93a1f3/brc7d22t","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ceb08417-4110-42cd-b198-a3eb4d93a1f3/01a042c5-d32c-751a-bb97-76305028312a.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1448,"height":1086}}],"post":null,"createdAt":"2026-08-27T10:32:00.546Z","updatedAt":"2026-08-27T10:32:00.546Z","publishedAt":"2026-08-27T10:32:00.543Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/LiquidHover-ghdYL0.js@ffjUqGWI3fvfVK4bISrS","previewUrl":"https://final-guava-208119.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"ffjUqGWI3fvfVK4bISrS","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-27T10:32:01.155Z","updatedAt":"2026-08-27T10:32:01.155Z"},{"id":"01a00f72-f11b-779d-9623-7d141e5e7d6f","title":null,"body":"

🌊 Meet Flowing Cursor — a free interactive effect for Framer

Give your website a little more life with a smooth fluid wave that follows your cursor in real time.

✨ Easy to customize 🎨 Control colors & intensity 🌊 Create fluid wave effects ⚡ Smooth & responsive 🆓 Completely free

Perfect for portfolios, landing pages, hero sections, and creative websites.

Move your cursor. Watch your website flow.

👉 Try it out and add it to your next Framer project.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"ocean","emoji":"🌊"}},{"type":"text","text":" "},{"type":"text","text":"Meet Flowing Cursor — a free interactive effect for Framer","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Give your website a little more life with a smooth fluid wave that follows your cursor in real time."}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"sparkles","emoji":"✨"}},{"type":"text","text":" Easy to customize "},{"type":"emoji","attrs":{"name":"art","emoji":"🎨"}},{"type":"text","text":" Control colors & intensity "},{"type":"emoji","attrs":{"name":"ocean","emoji":"🌊"}},{"type":"text","text":" Create fluid wave effects "},{"type":"emoji","attrs":{"name":"zap","emoji":"⚡"}},{"type":"text","text":" Smooth & responsive "},{"type":"emoji","attrs":{"name":"free","emoji":"🆓"}},{"type":"text","text":" Completely free"}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for portfolios, landing pages, hero sections, and creative websites."}]},{"type":"paragraph","content":[{"type":"text","text":"Move your cursor. Watch your website flow.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"point_right","emoji":"👉"}},{"type":"text","text":" Try it out and add it to your next Framer project."}]}]},"author":{"framerUserId":"ceb08417-4110-42cd-b198-a3eb4d93a1f3","name":"Ansab khalid","slug":"ansab-khalid","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ceb08417-4110-42cd-b198-a3eb4d93a1f3/brc7d22t","followed":false,"followsYou":false},"media":[],"resources":[{"id":"HtQldIO2dRhMvxghLNYH","resolved":true,"title":"Flowing Cursor","body":"$51","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Bring your website to life with a fluid cursor experience. ","marks":[{"type":"bold"}]},{"type":"emoji","attrs":{"name":"ocean","emoji":"🌊"}}]},{"type":"paragraph","content":[{"type":"text","text":"Flowing Cursor creates a smooth, organic wave effect that reacts to your cursor movement in real time. Move your mouse, watch the colors flow, and give your visitors an interactive moment they’ll remember."}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"sparkles","emoji":"✨"}},{"type":"text","text":" What you can create","marks":[{"type":"bold"}]},{"type":"text","text":" • Fluid cursor trails • Interactive wave effects • Liquid-style backgrounds • Creative hero sections • Immersive portfolio experiences • Eye-catching landing pages"}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"control_knobs","emoji":"🎛"}},{"type":"text","text":" Make it yours","marks":[{"type":"bold"}]},{"type":"text","text":" Customize the colors, intensity, wave strength, trail size, smoothness, decay, and more directly from Framer’s property panel — no code required."}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"zap","emoji":"⚡"}},{"type":"text","text":" Built for Framer","marks":[{"type":"bold"}]},{"type":"text","text":" Smooth interactions, responsive behavior, and a static fallback for Canvas and exports."}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for:","marks":[{"type":"bold"}]},{"type":"text","text":" portfolios, creative agencies, SaaS websites, landing pages, personal websites, and experimental designs."}]},{"type":"paragraph","content":[{"type":"text","text":"Move your cursor. Watch the page flow. ","marks":[{"type":"bold"}]},{"type":"emoji","attrs":{"name":"ocean","emoji":"🌊"}}]}]},"introduction":"Interactive fluid cursor trail","slug":"flowing-cursor","author":{"framerUserId":"ceb08417-4110-42cd-b198-a3eb4d93a1f3","name":"Ansab khalid","slug":"ansab-khalid","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ceb08417-4110-42cd-b198-a3eb4d93a1f3/brc7d22t","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ceb08417-4110-42cd-b198-a3eb4d93a1f3/01a00f72-aa1b-76ec-a9dd-46c13a9c07af.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1672,"height":941}}],"post":null,"createdAt":"2026-08-17T11:19:45.625Z","updatedAt":"2026-08-17T11:39:00.514Z","publishedAt":"2026-08-17T11:19:45.612Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Flowing-Cursor-kkTRiv.js@kBKJ1AmOQQXOoIjr162X","previewUrl":"https://newcomer-cougar-178603.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"c0182b81-fefe-45f5-ba00-27459f05e2a7","name":"Cursors","slug":"cursors"}],"lastSaveId":"kBKJ1AmOQQXOoIjr162X","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-08-18T08:10:53.632Z","createdAt":"2026-08-17T11:19:46.204Z","updatedAt":"2026-08-18T08:10:53.632Z"},{"id":"019ffacb-59d5-72ff-b548-0e7d472675d7","title":null,"body":"

🎉 Meet Confetti Toggle — a playful toggle component for Framer.

Turn a simple ON/OFF interaction into a satisfying micro-interaction with customizable confetti.

✨ Animated toggle states 🎊 Custom confetti colors, size & spread ⚙ Fully customizable properties 🚀 Perfect for SaaS, dashboards, settings, forms, pricing pages & onboarding

It’s free to use in your Framer projects.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"tada","emoji":"🎉"}},{"type":"text","text":" Meet Confetti Toggle — a playful toggle component for Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Turn a simple ON/OFF interaction into a satisfying micro-interaction with customizable confetti."}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"sparkles","emoji":"✨"}},{"type":"text","text":" Animated toggle states "},{"type":"emoji","attrs":{"name":"confetti_ball","emoji":"🎊"}},{"type":"text","text":" Custom confetti colors, size & spread "},{"type":"emoji","attrs":{"name":"gear","emoji":"⚙"}},{"type":"text","text":" Fully customizable properties "},{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}},{"type":"text","text":" Perfect for SaaS, dashboards, settings, forms, pricing pages & onboarding"}]},{"type":"paragraph","content":[{"type":"text","text":"It’s free to use in your Framer projects."}]}]},"author":{"framerUserId":"ceb08417-4110-42cd-b198-a3eb4d93a1f3","name":"Ansab khalid","slug":"ansab-khalid","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ceb08417-4110-42cd-b198-a3eb4d93a1f3/brc7d22t","followed":false,"followsYou":false},"media":[],"resources":[{"id":"wkiHMqfFZXfEJeSgHS3z","resolved":true,"title":"Confetti Toggle","body":"$52","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Confetti Toggle Button is a playful animated toggle for Framer that adds a burst of confetti whenever users switch it on. Perfect for pricing toggles, settings, preferences, forms, onboarding flows, SaaS dashboards, and interactive landing pages.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Customize the toggle colors, size, knob, confetti colors, particle count, spread, and size directly from Framer's property panel. You can also add a custom background and connect the toggle state to your project with the onValueChange event.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated ON/OFF states"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Confetti celebration on activation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom confetti colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable particle count and spread"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom toggle width and height"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom knob and track colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional background container"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Framer property controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"onValueChange event support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Lightweight React + Framer Motion animation"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Use it for","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pricing plan toggles"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Settings and preferences"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS dashboards"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Forms and filters"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Onboarding experiences"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Success and confirmation interactions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fun micro-interactions"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Drop it into your Framer project, customize the properties, and turn an ordinary toggle into a delightful interaction.","marks":[{"type":"bold"}]}]}]},"introduction":"Toggle with customizable confetti","slug":"confetti-toggle","author":{"framerUserId":"ceb08417-4110-42cd-b198-a3eb4d93a1f3","name":"Ansab khalid","slug":"ansab-khalid","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ceb08417-4110-42cd-b198-a3eb4d93a1f3/brc7d22t","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ceb08417-4110-42cd-b198-a3eb4d93a1f3/019ffb52-45eb-77a9-b2aa-e63fb956c6f4.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1448,"height":1086}}],"post":null,"createdAt":"2026-08-13T11:04:17.768Z","updatedAt":"2026-08-13T13:31:45.680Z","publishedAt":"2026-08-13T11:04:17.764Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/ConfettiToggle-DYWAxg.js@QAHYfHPjxrm00b0FWUPW","previewUrl":"https://generous-expectations-185405.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"QAHYfHPjxrm00b0FWUPW","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-13T11:04:18.645Z","updatedAt":"2026-08-13T11:04:18.645Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L53"}]