---
title: "Studio Keychain — Framer component · Best of Framer"
description: "$14.00 · Framer component · by Hoshine · Sections. Studio Keychain Transform 2D SVGs, vector logos, and brand marks into hyper-realistic, interactive 3D enamel keychains."
canonical: "https://framer.elliotli.dev/component/studio-keychain"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Studio Keychain

# Studio Keychain

3D Interactive Physics Keychain

[View on Framer](https://framer.com/marketplace/components/studio-keychain/?via=elliot-li)

![Studio Keychain preview image 1](https://framer.elliotli.dev/og/component/studio-keychain/9b27137c004fa45e/1600x1200.jpg)

## Summary

Studio Keychain Transform 2D SVGs, vector logos, and brand marks into hyper-realistic, interactive 3D enamel keychains.

## Description

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

## Rank history [How rankings work →](/terms#rankings)

-   All · #7964

## Details

- **Author**: Hoshine
- **Price**: $14.00
- **Published**: 2026-08-18
- **Updated**: 2026-08-20
- **Added**: 2026-08-18
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes