A pendant lamp you switch by tugging its pull chain. Space toggles it from the keyboard.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/pull-chain-lightPlayground
Desk lampOff
Lights off
On
Desk lampOn
Lights on
Disabled
Desk lampOff
Lights off
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/pull-chain-light
On
defaultOn starts lit. The glow and the drifting dust only run while it is on.
Desk lampOn
Lights on
Motion
Accessibility
- The pull is a native switch.
- The state is announced as a status.
Motion
- Pulling past 22 px switches the lamp on release. A click or tap tugs it once.
- The chain snaps back with a bounce, the pull swings and the lamp sways on its wire.
- On, the bulb flickers as it catches, the light breathes gently and dust drifts through it.
- With reduced motion, the switch flips and nothing moves, with the dust held still.
- Swift uses an SF Symbol lamp.
Responsive behavior
- The tray keeps its 288 px size.
Performance
- The cord and pull run on motion values, so dragging does not re-render on each frame.
- Dust animates only while on and pauses when scrolled out of view.
- The 16 motes use fixed values, so server and browser render the same scene.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import from @/components/fetaui/pull-chain-light.
- Pass on and onChange to control it, or defaultOn to seed it. title names the switch.
- A click or tap tugs the cord and flips the switch, as do Space and Enter. A drag flips it only past 22 px.
- The tray keeps a 288 px size, and the lamp changes only itself. Wire up onChange to act on anything else.
Related
SwitchComponentTurns a setting on or off and applies it at once.Theme ToggleComponentA light and dark switch that shows a sun or a moon, so the value reads at a glance.ToggleComponentA button that stays pressed.Theme SwitchComponentSwitches between light and dark. The sun folds into the moon as the theme spreads.