Lanyard Badge

3D lanyard badge card with rope physics: drag it and the strap pulls taut, flick to spin, tap or use the built-in button to flip to the back. Verlet rope on canvas plus a CSS 3D card whose faces take any content. For conference, portfolio or team pages. No dependencies.

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

"use client"

import LanyardBadge from "@/components/ui/lanyard-badge"

export default function Demo() {
  return (
    // w-full: 21st centres demos in a flex wrapper that would shrink this to 0px.
    <div className="relative w-full bg-[var(--color-background)]">
      <LanyardBadge />
    </div>
  )
}