5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/05lj3a0qaa006.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/382a8k30zyobj.js","/creators-assets/_next/static/immutable/chunks/368p63l4oh_7-.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/228u8o-g1d1_g.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/413kuej600yyw.js","/creators-assets/_next/static/immutable/chunks/02hyzon6wywme.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T96a,

About

Playful Toggle is a gamified switch designed to add personality and interaction to your Framer projects. Built for flexibility, it is fully customizable, allowing you to quickly adjust colors and styling to match any brand or interface. Smooth and easy to drop into your workflow, this toggle turns a simple action into a delightful micro-interaction.

Instructions

Add to Project: Copy and paste the Playful Toggle component into your Framer project
Customization: Click the component and access all the properties in the right panel (colors, radius, squircleness, transition...)
Preview & Iterate: Tweak and customize it freely to match your style and make it uniquely yours

Overview

Playful Toggle Customization Panel

Features

Micro-Interaction Focused: Turns a simple toggle into a playful, tactile UI moment
Squircle Control: Easily adjust between sharp and soft geometry
Inner Depth: Optional inner shadow for a subtle dimensional feel
Design System Friendly: Cleanly integrates into modern UI systems
Accessibility Ready: Minimum press area of 44px by 44px for comfortable interaction
Framer Panel Driven: All key adjustments exposed directly in the properties panel for fast iteration
Native Framer Build: No code required, built entirely with Framer’s native tools

Why Pick This?

Playful Toggle is built to bring a bit more life into everyday interactions without adding complexity to your workflow. It is lightweight, fully native to Framer, and designed to be easy to tweak so you can quickly make it your own.

Made with love&hate by Shady

For anything, here's where you can reach me: shady.khalaile@gmail.com

5a:[["$","$L5d",null,{"post":{"id":"019ca4eb-4085-7635-a492-4abfb0dfffc5","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"7c23bf67-c588-49dd-b196-972766c6e99f","name":"Shady","slug":"shady","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7c23bf67-c588-49dd-b196-972766c6e99f/r5qgk69q","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"hXh1sUyx4bsAtPSId8Sw","resolved":true,"title":"Playful Toggle","body":"$5e","bodyJson":null,"introduction":"Playful on/off switch for Framer","slug":"playful-toggle","author":{"framerUserId":"7c23bf67-c588-49dd-b196-972766c6e99f","name":"Shady","slug":"shady","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7c23bf67-c588-49dd-b196-972766c6e99f/r5qgk69q","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/hXh1sUyx4bsAtPSId8Sw/playful-toggle-qg8FQsdbG8Y3xGeqgilKD7W2yvdxBl","metadata":{"tint":{"h":150,"s":57,"l":22},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-02-23T01:01:36.584Z","updatedAt":"2026-02-28T15:42:37.469Z","publishedAt":"2026-02-28T15:43:26.853Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Playful-Toggle-srPbM4.js@wHs1F5x57kyPeTqlgriW","previewUrl":"https://cherished-lot-496619.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"wHs1F5x57kyPeTqlgriW","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-02-28T15:43:26.853Z","updatedAt":"2026-02-28T15:43:26.853Z","reported":false}}],"$L5f"]

Suggested for you