Tether: Hanging Physics Badge

Give your event, portfolio or launch page something irresistible to touch. Tether renders a conference pass on a fabric lanyard that swings with real physics: grab it, toss it, watch it settle, flip it to see the back. A built-in editor lets visitors personalise the name, role, event and finish in seconds.

A real physics engine, not a keyframe

A custom Verlet integration simulates gravity, air damping, ribbon stiffness and even a breeze that follows the cursor. Tweak every parameter live from the physics panel.

Personalise and share

Switch between Speaker, VIP, Backstage and Press presets, edit every line of text, choose a finish and flip the badge to reveal QR, Wi-Fi and lounge details on the back.

Features

• ✓Real-time Verlet physics: drag, toss and swing
• ✓Cursor breeze and ambient wind
• ✓Live physics controls: gravity, damping, ribbon stiffness, sway
• ✓Front and back faces with flip animation
• ✓Badge presets: Speaker, VIP Pass, Backstage, Press
• ✓In-app badge editor (name, role, company, event, dates, lanyard text)
• ✓Metal clasp and printed lanyard ribbon
• ✓Confetti celebration (canvas-confetti)
• ✓Zero animation libraries: React + plain CSS

What's included
Full JavaScript source code, package.json with locked dependencies, Vite config, RVT.ai README with setup and customisation guide, LICENSE and THIRD-PARTY-NOTICES.md. No node_modules: run npm install once.

Requirements
Node.js 20.19+ and npm 10+ to develop and build. The production build is static HTML, CSS and JavaScript that runs on any static host. No backend, API keys or paid services required.

Perfect for

• Conference, meetup and hackathon sites
• Speaker and team pages
• Portfolio "about me" sections
• Ticket and access-pass confirmations

From download to production

1. Download Tether: Hanging Physics Badge from your account and unzip it.
2. Run npm install, then npm run dev to open it locally.
3. Swap in your brand colours, copy and data (see the README customisation guide).
4. Run npm run build and deploy the dist/ folder to any static host.

Support and updates
Includes free updates and six months of RVT.ai support. Ask pre-purchase questions in the product Q&A, or open a ticket at https://rvt.ai/support with your order number.

Choose the license for your project

A Regular license covers a single end product that is not sold to end users. Choose Extended for a single end product that is sold to end users, including SaaS products and paid applications. Review the full license terms before checkout.