Hanging Id Card

Ceiling-anchored lanyard badge with realistic pendulum physics - drag to swing, release with inertia, or tap for a nudge. Pass children to replace the default badge face.

Default

Drag sideways to swing, or click when settled for a soft impulse. Respects prefers-reduced-motion.

Loading…

Installation

CLI

npx @sonojs/ui@latest add hanging-id-card

Usage

page.tsx

"use client"

import { HangingIdCard } from "@/components/3d/hanging-id-card"

export default function Page() {
  return (
    <div className="flex justify-center px-4 py-10">
      <HangingIdCard showHint />
    </div>
  )
}

Props

Prop	Type	Default	Description
name	string	"Alex Rivera"	Badge display name (default face).
role	string	"Product Designer"	Title under the name.
badgeId	string	"ID-84920"	Monospace ID under the barcode.
accentColor	string	"#2563EB"	Header gradient start, ID text, and status chip.
company	string	"SonoJS"	Small uppercase label above the avatar.
ropeLength	number	120	Lanyard strap length (auto-shrinks on narrow screens).
ropeColor	string	"#18181b"	Strap fill color.
showHint	boolean	false	Show “Drag to swing · click to nudge” under the badge.
className	string	-	Classes on the outer stage.
children	ReactNode	-	Custom card face (replaces the default badge body).