51: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"] 52:Tee0,

The Missing Feature in Framer – Solved.

Framer is incredible for native light and dark mode handling when it comes to colors and text styles. But as soon as you need to switch out a graphic, asset, or logo based on the active theme, you run into a wall—Framer simply doesn't support theme-specific image toggles out of the box.

This component fills that exact gap. It automates the entire process, swapping your brand's assets instantly based on the user's active theme, while giving you full design control directly from the sidebar.

⚠️ Important Note: To unlock the full potential of this component, make sure to pair it with the free "Theme Toggle PLUS" component in your project. This switcher is specifically engineered to listen to the custom events triggered by "Theme Toggle PLUS", ensuring your logos swap instantly and perfectly in sync with your theme switch button!https://hy.chujiqiqi.com/marketplace/components/theme-toggle-plus/

Features & Capabilities

⚡ Instant Theme Switching

The component utilizes an optimized MutationObserver and event listeners to detect theme changes the exact millisecond they happen. Whether a user toggles a dark mode switch on your site or changes their system-wide preferences, the logo swaps instantly with zero layout shift and no visual delay.

🛠️ Full Control via Framer Properties

You don't need to touch a single line of code. All styling options are exposed directly within the right-hand sidebar interface:

Dual Logo Slots: Dedicated inputs for your light and dark logo variations (supports SVGs, PNGs, and WebPs).
Smart Fallbacks: If you only upload one logo variant, the component automatically uses it across both themes, preventing broken image placeholders.
SEO & Accessibility: Includes a native input field for alt text to keep your website accessible to screen readers and fully optimized for image SEO.

🎨 Clean Layout & Border Customization

Achieve perfect alignment with your design system using integrated container controls:

Corner Radius: Smoothly adjust the container's roundness from hard edges (0px) to completely circular pills (100px).
Border Customization: Configure the border width, select from multiple styles (Solid, Dashed, Dotted), and pick a custom color via the native Framer color wheel.
Layout Safeguards: Powered by box-sizing: border-box and overflow: hidden, the component guarantees that your borders never distort element dimensions and your logo assets never clip past rounded corners.

🔗 Integrated Linking

Turn your logo into a functional navigation element with a single click. The built-in URL option automatically wraps the component in a secure, performance-ready anchor tag (target="_blank", rel="noopener noreferrer"), making it perfect for main navigation bars or external links.

Technical Specifications & SSR Stability

Engineered strictly following React and Framer best practices, the component features a robust dual-pass hydration strategy. By deferring local storage and DOM attribute checks to the client-side lifecycle (useEffect), it entirely eliminates server-side rendering (SSR) hydration mismatches. This ensures your site benefits from fast loading times, clean HTML source code, and optimal search engine indexation.

53:T843,

✨ Features

🖱️ Two interaction modes

Drag — visitors grab the handle and pull to compare
Hover — the divider follows the cursor for instant feedback (auto-falls-back to drag on touch devices)

↔️ Five reveal directions

Left → Right, Right → Left, Top → Bottom, Bottom → Top
Plus a radial reveal that opens from the center outward

🎨 Fully styled to your brand

Native Framer typography controls for all text (font family, weight, size, color, letter-spacing)
Custom colors for handle fill, handle border, and divider
Five built-in handle icons (arrows, dots, lines) plus the option to upload your own
Adjustable handle size, divider thickness, corner radius, and label placement

📱 Mobile-ready out of the box

Larger handle target on touch devices for easier tapping
Optional swipe hint that disappears after the first interaction
Separate text for horizontal vs. vertical reveals
Smart gesture detection prevents conflicts with page scrolling

⚡ Polished by default

Spring-based animation for natural-feeling movement
Backdrop-blurred labels that read clearly on any image
Sensible defaults that look great immediately — no setup required

Use cases

Designer portfolios · Photo retouching showcases · Web redesign comparisons · Interior design before/after · Skincare and beauty results · Real estate staging · Product configurators · Restoration projects · Map and satellite comparisons

🚀 Getting started

Drop the component onto your canvas, swap in your before and after images, and adjust the size to match your layout. Everything else is optional — the defaults are tuned to look professional from the first render.

54:T96d,

CircularText renders any string as a continuously rotating ring of letters — a design pattern common in portfolios, hero sections, product pages, and branded UI elements. The component is built for designers who want full control without touching code.

🔄 Rotation & speed Set the rotation speed in seconds per full revolution. Lower values spin faster. The component starts automatically and loops indefinitely.

🖱️ Hover interactions Choose from five on-hover behaviors: speed up, slow down, pause, or reverse the rotation — or leave it unchanged. For Speed up and Slow down, a separate Amount field appears (e.g. 2.5×) so you can dial in exactly how dramatic the effect is.

✋ Drag & Spin with physics Enable Drag & Spin and the component becomes fully interactive. Click and hold to take manual control, then drag in any direction to spin it. The rotation follows the angle of your cursor relative to the center — not just horizontal movement — so it feels natural whether you drag left, right, up, or in circles. 💫 Flick it fast and it carries that momentum forward, with exponential deceleration that gradually eases back to the configured base speed. Works on touch devices too.

🔤 Typography Uses Framer's native Font panel — pick any font, weight, and size the same way you would on a native text layer. No manual font name entry needed.

⚙️ Customization

💬 Text: any string, use characters like * or • as separators
📐 Size: overall diameter of the component
🎨 Color: single color for all letters
🔤 Font: family, weight, and size via native Framer font picker
⏱️ Speed: rotation duration in seconds
🖱️ On Hover: Nothing / Speed up / Slow down / Pause / Reverse
✖️ Amount: multiplier for speed-based hover effects (e.g. 2.5×)
✋ Drag & Spin: toggle physics-based manual interaction on or off

💡 Use cases Rotating badges and stamps , hero section decorations , "scroll down" or "available for work" rings , product labels, nav accents, loading indicators with personality and anywhere a looping text element adds motion without distraction.

50:["$","$L51",null,{"value":{"fallback":{"$inf$activity-creator-0b7a80bc-24c5-42d6-9b9e-17708393fd9d-all:/unified/creator/0b7a80bc-24c5-42d6-9b9e-17708393fd9d/activity/":[{"data":[],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:0b7a80bc-24c5-42d6-9b9e-17708393fd9d:/unified/posts/?creator=0b7a80bc-24c5-42d6-9b9e-17708393fd9d&with=reposts":[{"data":[{"id":"019e9d0d-a886-73cb-86b7-1d2da479fb99","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0b7a80bc-24c5-42d6-9b9e-17708393fd9d","name":"Niklas Geisler","slug":"niklas-geisler-b53vfb","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2142154/006d8313269d5d0a14b26acb35cfd774-fLnmjZ4hiOx9ojpIdcxiqwETs1m7zt","followed":false,"followsYou":false},"media":[],"resources":[{"id":"KmzYRUc6I7gXUIVaYDWc","resolved":true,"title":"AdaptiveLogoSwapper","body":"$52","bodyJson":null,"introduction":"Adaptive Light/Dark Mode Logo Swapper","slug":"adaptivelogoswapper","author":{"framerUserId":"0b7a80bc-24c5-42d6-9b9e-17708393fd9d","name":"Niklas Geisler","slug":"niklas-geisler-b53vfb","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2142154/006d8313269d5d0a14b26acb35cfd774-fLnmjZ4hiOx9ojpIdcxiqwETs1m7zt","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/KmzYRUc6I7gXUIVaYDWc/lightdarkswitcher-nqMvHrqrhr8d0FtplBb7ftm4i2ZP9w","metadata":{"tint":{"h":240,"s":53,"l":70},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-28T22:42:50.380Z","updatedAt":"2026-06-06T13:20:33.492Z","publishedAt":"2026-06-06T13:09:38.566Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://overly-forest-677493.framer.app/","price":"2","paymentUrl":"https://buy.stripe.com/aFabJ31ld1gadFN1wj8Zq03","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"okoU3CRN8sovECoTmKco","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-06T13:09:38.566Z","updatedAt":"2026-06-06T13:09:38.566Z"},{"id":"019e9c34-a2d3-77c2-95c5-d06da617ab71","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0b7a80bc-24c5-42d6-9b9e-17708393fd9d","name":"Niklas Geisler","slug":"niklas-geisler-b53vfb","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2142154/006d8313269d5d0a14b26acb35cfd774-fLnmjZ4hiOx9ojpIdcxiqwETs1m7zt","followed":false,"followsYou":false},"media":[],"resources":[{"id":"z7hKD4AbM9Ixwn4AbKrX","resolved":true,"title":"Theme Toggle PLUS","body":"

The Theme Toggle PLUS adds a customizable Light/Dark Mode toggle to your Framer website. 🌗Instead of using a fixed toggle design, you can upload your own visual assets for the toggle, giving you full control over how the Light and Dark Mode states look. ☀️🌙

When users change the theme, the component applies the selected mode directly to the page, saves the preference in LocalStorage, and dispatches a theme-change event for connected components. This keeps the selected theme active after page reloads and makes the setup feel smooth and consistent. ⚡

⚠️ Important Note: For the matching visual setup, there is also the \"AdaptiveLogoSwapper\", which automatically changes logos or images depending on the active theme — just like shown in the demo.Together, both components create a polished Light/Dark Mode experience for Framer projects, from theme switching to dynamic logo and image swapping.

","bodyJson":null,"introduction":"Light/Dark Toggle for Framer","slug":"theme-toggle-plus","author":{"framerUserId":"0b7a80bc-24c5-42d6-9b9e-17708393fd9d","name":"Niklas Geisler","slug":"niklas-geisler-b53vfb","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2142154/006d8313269d5d0a14b26acb35cfd774-fLnmjZ4hiOx9ojpIdcxiqwETs1m7zt","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/z7hKD4AbM9Ixwn4AbKrX/theme-toggle-plus-VdaGKH4d2qhuyLhbY2DXaKWnPZMZ36","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-28T23:44:19.153Z","updatedAt":"2026-06-06T13:09:29.161Z","publishedAt":"2026-06-06T09:12:35.795Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/ThemeToggleButton-6NmOn6.js@mU46X574xTFX1wQRRbYI","previewUrl":"https://mysterious-architecture-245558.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"mU46X574xTFX1wQRRbYI","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":19,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-06T09:12:35.795Z","updatedAt":"2026-06-06T09:12:35.795Z"},{"id":"019dd0ba-c1b4-7981-aff5-6edfc5d5e49b","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0b7a80bc-24c5-42d6-9b9e-17708393fd9d","name":"Niklas Geisler","slug":"niklas-geisler-b53vfb","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2142154/006d8313269d5d0a14b26acb35cfd774-fLnmjZ4hiOx9ojpIdcxiqwETs1m7zt","followed":false,"followsYou":false},"media":[],"resources":[{"id":"TwuewJ0WlZJyswEAvTgv","resolved":true,"title":"BeforeAfterImage","body":"$53","bodyJson":null,"introduction":"An interactive before/after slider","slug":"beforeafterimage","author":{"framerUserId":"0b7a80bc-24c5-42d6-9b9e-17708393fd9d","name":"Niklas Geisler","slug":"niklas-geisler-b53vfb","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2142154/006d8313269d5d0a14b26acb35cfd774-fLnmjZ4hiOx9ojpIdcxiqwETs1m7zt","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/TwuewJ0WlZJyswEAvTgv/beforeafterimage-S8vMhDCBAhJTy5bt4OiRhGbkJohhPd","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-26T20:49:36.306Z","updatedAt":"2026-04-27T20:52:12.792Z","publishedAt":"2026-04-27T20:56:33.460Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://essential-grammar-028957.framer.app/","price":"3","paymentUrl":"https://buy.stripe.com/eVq28t0h9bUO1X5a2P8Zq02","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"NgFCZ6UiJkYTVfXoiBiP","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-04-27T20:56:33.460Z","updatedAt":"2026-04-27T20:56:33.460Z"},{"id":"019dba74-ecc9-7320-9701-f11728e43cd1","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0b7a80bc-24c5-42d6-9b9e-17708393fd9d","name":"Niklas Geisler","slug":"niklas-geisler-b53vfb","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2142154/006d8313269d5d0a14b26acb35cfd774-fLnmjZ4hiOx9ojpIdcxiqwETs1m7zt","followed":false,"followsYou":false},"media":[],"resources":[{"id":"RzGXSDRqnhPWCId2Q3Ep","resolved":true,"title":"CircularText D2S","body":"$54","bodyJson":null,"introduction":"Animated circular text with drag-to-spin","slug":"circulartext-d2s","author":{"framerUserId":"0b7a80bc-24c5-42d6-9b9e-17708393fd9d","name":"Niklas Geisler","slug":"niklas-geisler-b53vfb","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2142154/006d8313269d5d0a14b26acb35cfd774-fLnmjZ4hiOx9ojpIdcxiqwETs1m7zt","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/RzGXSDRqnhPWCId2Q3Ep/circulartext-d2s-A4msWwfD3VfOvWLHxU2PTSsBFAmJoE","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-06T13:44:24.536Z","updatedAt":"2026-04-23T12:05:36.048Z","publishedAt":"2026-04-23T13:08:38.217Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://beige-opportunities-586738.framer.app","price":"2","paymentUrl":"https://buy.stripe.com/aFa3cxgg70c63193Er8Zq01","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"K3mGVUknhjrLbgNa91Oo","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-04-23T13:08:38.217Z","updatedAt":"2026-04-23T13:08:38.217Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L55"}]