Studio Keychain

Studio Keychain

Transform 2D SVGs, vector logos, and brand marks into hyper-realistic, interactive 3D enamel keychains. Powered by Three.js, SVGLoader, and Cannon-es rigid-body physics,

Perfect for interactive hero sections, modern agency portfolios, Web3/crypto landing pages, brand identity launches, and tactile digital merchandise showcases.

Key Features

• Real-time Rigid-Body Physics: Multi-link chain physics powered by Cannon-es. Charms swing naturally, respond to gravity, collide realistically, and settle into neutral rest poses.

• Direct Tactile Interactions: Drag charms along the split keyring circumference, flick badges with cursor velocity, or tap to trigger localized 3D impulse forces.

• Auto-Extruded SVG Enamel Badges: Converts flat SVGs into multi-layered 3D badges with raised metal bezels, glossy enamel fill, and bevel profiling.

• Studio-Grade PBR Materials: Photorealistic chrome hardware paired with high-gloss clearcoat enamel finishes, featuring HDR studio lighting and soft contact shadows.

Customization Controls

• Charm Management (1–2 Badges): Select built-in presets (YouTube, Gemini) or supply custom SVGs via raw SVG code, direct .svg file upload, or external URLs. Adjust independent scaling, ring attachment position along the curve, and eyelet alignment.

• Hardware Geometry: Customize the primary keyring radius, depth, bevel thickness, jump-ring link counts (1–4 links), link radius, wire thickness, drop spacing, and eyelet weld overlap.

• Material Tuning: Adjust metal roughness, metalness, and environment reflection intensity for chrome components. Dial in enamel roughness, saturation boost, and clearcoat gloss.

• Physics & Feel: Fine-tune gravitational acceleration, tap impact force, linear air resistance, and anti-spin angular damping.

• Studio Lighting: Adjust scene exposure, ambient fill, key lights, and background canvas colors (supporting Framer color tokens and transparent backgrounds).