Swinging 3D lanyard / badge card with realistic inertial motion.
Grab the card and drag it around, then let go and watch it swing on its band. Use the controls to move the camera or switch gravity off.
| Prop | Type | Default | Description |
|---|---|---|---|
position | number[] | [0, 0, 30] | Initial camera position for the canvas. |
gravity | number[] | [0, -40, 0] | Gravity vector for the physics simulation. |
fov | number | 20 | Camera field of view. |
transparent | boolean | true | Enables a transparent background for the canvas. |
frontImage | string | null | Custom image URL for the card's front face. Falls back to the model's built-in texture when not set. |
backImage | string | null | Custom image URL for the card's back face, rendered independently from the front. |
imageFit | 'cover' | 'contain' | 'cover' | How a custom front or back image fits its face. Both preserve aspect ratio; 'cover' fills and crops, 'contain' letterboxes. |
lanyardImage | string | null | Custom image URL for the lanyard band's repeating texture. Falls back to the default band texture when not set. |
lanyardWidth | number | 1 | Width of the lanyard band. Increase it to give a custom band image more room and reduce stretching. |
modelUrl | string | '/previews-assets/lanyard/card.glb' | URL of the card model. It needs the card, clip and clamp nodes and the base and metal materials. Host card.glb and lanyard.png from your own public folder. |
Keyboard shortcuts and ARIA behavior.