Lanyard Badge — 3D name badge component for Framer

A name badge on a lanyard that visitors can grab, swing, throw and flip, rendered in three.js.

What it is

An interactive component for event, portfolio and team pages: a badge hanging from a lanyard with rope-and-card physics, built with three.js.

What you get

• One Framer code component (Lanyard Badge), delivered as a Component URL.
• A badge template (name, role, organisation, event, tag, photo) or your own front and back images.
• Three card shapes, Gloss, Matte and Holographic finishes, strap colour, width, length and printed text, drop-in, breeze and an optional link.
• Free updates.

How it behaves

• Grab it. Drag the badge, swing it or throw it; flick an edge and it flips to the back.
• Your badge. Fill in the template or use your own front and back images.
• Your strap. Loop or single strap in your colour, with your text printed along it.
• Light on the page. Drawing stops when the badge settles or leaves the screen; reduced motion turns off the drop-in and sway.
• Safe fallbacks. The Framer canvas and browsers without WebGL show a flat badge.

Requirements

Any Framer project. Uses three.js, which Framer loads for the component; no plugins.

Live preview: https://thistle-timing-694660.framer.app/lanyard-badge