--- title: Hanging Id Card description: A physics-based ID card component that hangs from a rope at the top. Features realistic pendulum physics with spring return, drag interaction, and gravity simulation. Click or drag the card left/right and watch it swing with authentic momentum before settling back to center. --- ## Installation CLI Manual ```bash npx lightswind@latest add hanging-id-card ``` Copy and paste the following code into your project. ```tsx "use client"; import React, { useRef, useEffect, useCallback, useState } from "react"; import { cn } from "@/components/lib/utils"; // ─── Physics constants ──────────────────────────────────────────────────────── const SPRING_K = 0; // Real pendulum relies on gravity const DAMPING = 0.92; // Air resistance for smooth natural swing const GRAVITY = 3000; // Gravity scalar for snappy momentum const MASS = 1; interface CardPhysicsState { angle: number; // radians from vertical vel: number; // angular velocity rad/s } export interface HangingIdCardProps { children?: React.ReactNode; ropeLength?: number; ropeColor?: string; className?: string; name?: string; role?: string; badgeId?: string; accentColor?: string; } // ─── SVG Black Lanyard Rope & Metal Lock Clip ────────────────────────────────── const Lanyard = ({ length, color }: { length: number; color: string }) => { const clampY = length; const ringY = length + 10; const hookY = length + 18; return ( ); }; // ─── Main Component ─────────────────────────────────────────────────────────── export const HangingIdCard = ({ children, ropeLength = 140, ropeColor = "#18181b", className, name = "John Doe", role = "Product Designer", badgeId = "ID-84920", accentColor = "#2563eb", }: HangingIdCardProps) => { const physRef = useRef({ angle: 0, vel: 0 }); const rafRef = useRef(null); const prevTimeRef = useRef(null); const prevAngleRef = useRef(0); const isDraggingRef= useRef(false); const [angle, setAngle] = useState(0); const [, setIsDragState] = useState(false); const dragStartX = useRef(0); const dragAngle0 = useRef(0); // ── Physics loop ──────────────────────────────────────────────────────────── const tick = useCallback((now: number) => { if (prevTimeRef.current === null) { prevTimeRef.current = now; } const dt = Math.min((now - prevTimeRef.current) / 1000, 0.05); // cap at 50ms prevTimeRef.current = now; const s = physRef.current; if (!isDraggingRef.current) { // Realistic pendulum: L is approximate center of mass const L = ropeLength + 100; const torque = -(GRAVITY / L) * Math.sin(s.angle) - (DAMPING / MASS) * s.vel - (SPRING_K / MASS) * s.angle; s.vel += torque * dt; s.angle += s.vel * dt; setAngle(s.angle); if (Math.abs(s.angle) > 0.001 || Math.abs(s.vel) > 0.001) { rafRef.current = requestAnimationFrame(tick); } else { // settled perfectly at bottom s.angle = 0; s.vel = 0; setAngle(0); } } else { // Track velocity while dragging so we can "flick" it if (dt > 0) { s.vel = (s.angle - prevAngleRef.current) / dt; } prevAngleRef.current = s.angle; rafRef.current = requestAnimationFrame(tick); } }, [ropeLength]); const startPhysics = useCallback(() => { if (rafRef.current) cancelAnimationFrame(rafRef.current); prevTimeRef.current = null; rafRef.current = requestAnimationFrame(tick); }, [tick]); // ── Pointer events ────────────────────────────────────────────────────────── const onPointerDown = useCallback((e: React.PointerEvent) => { e.currentTarget.setPointerCapture(e.pointerId); isDraggingRef.current = true; setIsDragState(true); dragStartX.current = e.clientX; dragAngle0.current = physRef.current.angle; prevAngleRef.current = physRef.current.angle; if (rafRef.current) cancelAnimationFrame(rafRef.current); prevTimeRef.current = null; rafRef.current = requestAnimationFrame(tick); }, [tick]); const onPointerMove = useCallback((e: React.PointerEvent) => { if (!isDraggingRef.current) return; const dx = e.clientX - dragStartX.current; const L = ropeLength + 100; const newAngle = dragAngle0.current - dx / L; const clamped = Math.max(-1.4, Math.min(1.4, newAngle)); physRef.current.angle = clamped; setAngle(clamped); }, [ropeLength]); const onPointerUp = useCallback((e: React.PointerEvent) => { e.currentTarget.releasePointerCapture(e.pointerId); isDraggingRef.current = false; setIsDragState(false); }, []); // ── Click impulse (tap) ───────────────────────────────────────────────────── const onCardClick = useCallback(() => { if (Math.abs(physRef.current.vel) < 0.1 && Math.abs(physRef.current.angle) < 0.05) { physRef.current.vel = 4.0; // Give it a satisfying push startPhysics(); } }, [startPhysics]); useEffect(() => () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); }, []); const cardRotateDeg = angle * (180 / Math.PI); return (

{/* Ceiling anchor pin */}

{/* The Pendulum Assembly (Rope + Lock Clip + Card) */}

{/* Lanyard Rope with Lock Clip */}

{/* ID Card */}

{/* Punched Slot Hole for Lanyard Clip */}

{children ?? (

{/* Card Header Banner */}

{/* Security Chip Icon */}

{/* User Profile Avatar (No Lightswind Logo) */}

{/* Card Body */}

{name}

{role}

{/* Barcode */}

{Array.from({ length: 26 }).map((_, i) => (

))}

{badgeId}

{/* Status badge */}

ACTIVE

)}

{/* Drag hint */}

Drag or click the card

); }; export default HangingIdCard; ``` ## Usage ```tsx import { HangingIdCard } from "@/components/lightswind/hanging-id-card" ``` ```tsx import { HangingIdCard } from "@/components/lightswind/hanging-id-card"; export default function App() { return (

); } ```