Lanyard

Create interactive 3D lanyard cards that swing and move realistically. Perfect for digital business cards, event badges, and unique card presentations.

Create a Lanyard

What is a Lanyard?

A Lanyard project creates an interactive 3D card hanging from a ribbon, like a conference badge or ID card. The card swings naturally when viewers interact with it, creating an engaging experience.

Realistic physics-based swinging motion
Customizable card image and colors
Adjustable image position and scale on the card
Adjustable ribbon colors
Works on all devices

Best use cases

Digital Business Cards

Stand out with a memorable 3D presentation

Event Badges

Virtual conference or event credentials

ID Cards

Employee or member identification

Membership Passes

Club or organization membership cards

VIP Passes

Exclusive access credentials

Artist Passes

Backstage or artist credentials

Creating a Lanyard

Step 1: Upload or generate card image

In the Content tab, upload the image for your card:

Upload an image

Drag and drop or browse to upload your card image. For best results, use a portrait image, taller than it is wide.

Whatever is left over around your image is filled with the card background color, so pick a color close to your design.

Step 2: Customize card appearance

Adjust the card settings:

Card Background Color: The color behind your image
Texture Offset: Fine-tune image positioning (X and Y)
Texture Scale: Zoom in or out on your image

Step 3: Customize the ribbon

In the Settings tab, change the ribbon color to match your branding or event theme.

Step 4: Add navigation links

Use the Menu tab to add a floating dock with links to your website, social profiles, or contact info.

Lanyard settings

Ribbon color

Change the color of the lanyard ribbon. Match it to your brand or event colors.

Background

Set a solid color, gradient, or image as the scene background. This appears behind the hanging lanyard.

Navigation dock

Add links and zoom buttons to the floating dock. Configure position, style, and visibility in the Menu tab.

Zoom buttons

Enable zoom controls in the dock so viewers can get a closer look at your card.

How viewers interact

The lanyard responds to viewer interactions:

Mouse/Touch Drag

Click and drag the card to make it swing. Release to let it settle naturally.

Automatic motion

The card swings into place when the page loads, then settles and waits to be moved.

Zoom

Use the zoom buttons in the dock to examine the card closely.

Dock links

Click links in the navigation dock to visit external pages or see modal content.

Tips for great Lanyards

Use high-resolution images for crisp card display
Keep important content centered (edges may be clipped)
Match ribbon color to your brand for cohesive look
Add dock links to your website, LinkedIn, or portfolio
Use the texture offset and scale to frame your image on the card
Test the swinging interaction before sharing