Pull Cord Lamp
A hanging lamp you switch with a physics pull cord — the filament flickers on.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Drag the brass bead down past the click point and let go: the cord stretches, whips on a damped spring and snaps back. The bulb stutters on like an old filament and a dusty light cone falls on your content. Works as a theme switch.
Installation
$ npx shadcn@latest add https://guetix.com/r/pull-cord.json
Uses the shadcn CLI. It creates components/guetix/pull-cord.tsx and installs nothing else.
Usage
example.tsx
"use client";
import PullCord from "@/components/guetix/pull-cord";
export default function PullCordDemo({ variant = "animated" }: { variant?: string }) {
return (
<PullCord animated={variant !== "regular"} label="Desk lamp" className="h-full min-h-[420px]">
<div className="text-center">
<p className="font-mono text-[10px] uppercase tracking-[0.35em] text-amber-200/80">Pull the cord</p>
<h3 className="mt-2 text-3xl font-black tracking-tight text-white">Ideas need light.</h3>
<p className="mt-2 max-w-xs text-sm text-white/60">Drag the brass bead down, tap it, or press Enter.</p>
</div>
</PullCord>
);
}
Dark / light theme switchHero easter eggEmpty-state delightLanding-page centerpiece
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01A hand-rolled spring (k = 170, c = 9) integrates in `requestAnimationFrame`, then sleeps when at rest.
- 02The cord is a quadratic Bézier whose control point leans against the bead's velocity, which makes it whip.
- 03The flicker uses `steps(1,end)` keyframes for a hard, electrical on/off feel; a smooth fade wouldn't read as a filament.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| on | boolean | — | Controlled state. |
| defaultOn | boolean | false | Initial state. |
| onChange | (on: boolean) => void | — | Called after a successful pull. |
| lightColor | string | "#ffd18a" | Light tint. |
| label | string | "Light" | Accessible switch name. |
| children | ReactNode | — | Content lit by the lamp. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- The bead is a `role="switch"` with `aria-checked`; Enter/Space give it a tug.
- Reduced motion: instant toggle, no physics or flicker.