Pull Cord Lamp

Component

About

A pendant lamp that is a switch. Pull the acorn: the detent resists and snaps, the filament warms from dull red to white and the lamp sways on its cable, with its light thrown on the wall behind. Dome, tube or bare-holder shade, clear or frosted bulb. MIT. More like it: tactileui.dev

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Pull Cord Lamp to your project and fits it to your theme.

Code

How Pull Cord Lamp is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { useState } from "react";
import { PullCordLamp } from "@/components/ui/pull-cord-lamp";

const wall = `
.pcd-stage { background: #d8d7d2; color: #1b1c1e; }
@media (prefers-color-scheme: dark) { .pcd-stage { background: #0e0f10; color: #e8e6e1; } }
.dark .pcd-stage, [data-theme="dark"] .pcd-stage { background: #0e0f10; color: #e8e6e1; }
`;

export default function PullCordDemo() {
  const [on, setOn] = useState(true);
  return (
    <div className="pcd-stage" style={{ position: "relative", width: "100%", minHeight: "100vh", overflow: "hidden" }}>
      <style>{wall}</style>
      <div style={{ position: "absolute", inset: 0 }}>
        <PullCordLamp defaultOn onChange={setOn} />
      </div>
      <p style={{ position: "absolute", left: 0, right: 0, bottom: 28, margin: 0, textAlign: "center", font: "500 15px system-ui, sans-serif", opacity: 0.7 }}>
        Pull the acorn. The lamp is {on ? "on" : "off"}.
      </p>
    </div>
  );
}