Rotary Passcode

Component

About

A gold rotary phone that guards your content. Dial the passcode by turning the finger wheel (it spins back with a ratchet click per number); the right code rings the bell, lifts the handset and reveals what's inside, a wrong one rattles it, and a decoy code gets an apology. Once unlocked it's a working phone: dial tone, dial any number, ring-back, connect to named contacts with a call timer. While locked, incoming calls ring and can be answered by lifting the handset. Keyboard dialing, light and dark theme, synthesized sounds.

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

Code

How Rotary Passcode is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { RotaryPasscode } from "@/components/ui/rotary-passcode";

const contacts = [
  { number: "0714", name: "Grandma" },
  { number: "5551234", name: "Leo's Pizza" },
  { number: "411", name: "Directory" },
];

const vault = [
  { label: "Wi-Fi", value: "skyline-5G", note: "tangerine-42" },
  { label: "Gate code", value: "4821", note: "Press # after" },
  { label: "Spare key", value: "Under the blue pot", note: "Back porch" },
  { label: "Alarm", value: "2096", note: "Hold for 2 seconds" },
];

export default function RotaryPasscodeDemo() {
  return (
    <RotaryPasscode
      code="1975"
      decoy="1957"
      contacts={contacts}
      incoming={[{ number: "0714", name: "Grandma" }]}
      ringEvery={30}
    >
      <h2 className="text-[22px] font-semibold tracking-[-0.02em]">
        House notes
      </h2>
      <p className="mt-1 text-[14px] text-muted-foreground">
        Everything a house-sitter needs.
      </p>
      <dl className="mt-5 divide-y divide-border rounded-2xl border border-border">
        {vault.map((v) => (
          <div
            key={v.label}
            className="flex items-center justify-between gap-4 px-4 py-3"
          >
            <dt className="text-[13px] text-muted-foreground">{v.label}</dt>
            <dd className="text-right">
              <span className="block text-[14px] font-medium">{v.value}</span>
              <span className="block text-[12px] text-muted-foreground">
                {v.note}
              </span>
            </dd>
          </div>
        ))}
      </dl>
      <p className="mt-5 text-[13px] text-muted-foreground">
        Try dialing <span className="font-medium text-foreground">0714</span>{" "}
        for Grandma.
      </p>
    </RotaryPasscode>
  );
}