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).
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).
