What it does
Rope Toggle hangs a pull-cord from the top of its frame — just like the chain on a desk lamp. Visitors grab the rope, pull it down past the threshold and let go: the switch flips, the knob lights up and the rope snaps back and swings with real rope physics until it settles. A short tug that doesn't reach the threshold only makes the rope sway. A quick tap, or Enter / Space on the keyboard, flips it too.
Out of the box it switches your site between light and dark mode using Framer's native Color Styles — pair each color with a light and a dark value and you're done. It can also set an attribute and class on <html> for your own CSS, or just fire an event so you can wire it to anything.
Customizable properties
- Knob — Bulb (lights up when on), Ball, Bar, Ring, Tassel or your own Image (round crop); size, Off / On colors, Glow
- Rope — Rope (twisted), Chain (ball chain) or Cord; color and width; Fill the frame or a custom length; Anchor X; optional ceiling mount
- Feel — Pull to Toggle distance, Stretch (how far the rope can stretch), Gravity, Damping
- Click Sound — a synthesized "tick" (off by default, no audio files)
- Controls — Framer Theme (light/dark Color Styles), HTML Attribute (attribute name, on/off values, class when on) or Event Only (`ropetoggle` event with { on, theme })
- On Means — Dark or Light, Start — Off / On / System, Remember — stores the choice (custom storage key)
- Label — optional text under the knob (Light / Dark), color and full font control
Why this component
- The only pull-cord toggle on the Marketplace: pull-and-release instead of click, with a rope that actually swings — people remember it.
- Real rope physics in one small file (no physics library). The loop stops completely once the rope is still, so it costs nothing at rest.
- Works with Framer's native light/dark Color Styles, or with your own CSS via an attribute/class, or as a pure event source. Several Rope Toggles on one page stay in sync.
- Accessible: it is a real switch (role="switch"), works with Enter / Space, shows a focus ring, and respects "reduce motion" (the cord follows your pointer straight and returns instantly, no swinging).
- Canvas-safe: on the canvas it shows the Start state and never touches your editor's theme.
Need help?
Email hello@brandingupstudio.com — we usually reply within 72 hours. Custom edits are available from $75/hr.
