██████╗ ██████╗ ██╗ ██████╗ ██████╗ ██████╗
╚════██╗██╔══██╗ ██║ ██╔═══██╗██╔════╝ ██╔═══██╗
█████╔╝██║ ██║ ██║ ██║ ██║██║ ███╗██║ ██║
╚═══██╗██║ ██║ ██║ ██║ ██║██║ ██║██║ ██║
██████╔╝██████╔╝ ███████╗╚██████╔╝╚██████╔╝╚██████╔╝
╚═════╝ ╚═════╝ ╚══════╝ ╚═════╝ ╚═════╝ ╚═════╝
Flat in. 3D out.
Any logo → a 3D spinning coin, as one self-contained React Three Fiber component.
An agent skill for Claude Code, Cursor and Codex, built on Three.js. No 3D modelling.
FIREBIRD · KOI · MANTA
Download your coin as a looping MP4 straight from the live demo.
Claude Code · Cursor · Codex · Gemini CLI · GitHub Copilot · 50+ more
The rim isn't a generic circle. It traces your logo's actual outline, every concave notch included.
Install
npx skills add hasuwini77/3d-logo-skill
npx skills add detects which agents you have and drops the skill in the right folder for each.
# terminal
claude plugin marketplace add hasuwini77/3d-logo-skill
claude plugin install 3d-logo@3d-logo-skill
# or inside a Claude Code session
/plugin marketplace add hasuwini77/3d-logo-skill
/plugin install 3d-logo@3d-logo-skill
If it saves you time, a ⭐ helps others find it.
Usage
Ask your agent:
Make my logo at public/logo.png into a 3D spinning coin
Use /3d-logo on src/assets/brand-logo.png with night reflections
You get a self-contained SpinningLogo3D.tsx. Drop it anywhere in your React app:
import { SpinningLogo3D } from './SpinningLogo3D'
<SpinningLogo3D size={540} />
Live demo
hasuwini77.github.io/3d-logo-skill: pick a preset or drop in your own logo, switch reflections, drag the thickness. It runs the same SpinningLogo3D.tsx architecture the skill generates. Your file is processed on an offscreen canvas and never leaves your device.
You can also download your coin as a short looping video (one seamless 360° turn, MP4 or WebM) with the Download video button.
How it works
- Background removal: samples the 1px border, then flood-fills the connected background from the edge. Enclosed details (the white of an eye, the inside of an "O") stay put.
- Outline tracing: Moore-neighbour contour trace per shape at a real opacity cutoff, with specks dropped. Multi-part logos keep every piece.
- Faces: front and back planes cut to the same outline; the back is a true mirror, like a stamped coin.
- Chrome rim: indexed
BufferGeometry along the smoothed outline, with outward normals for clean reflections.
- Emboss + light: Sobel normal map on the faces, environment reflections, and
NeutralToneMapping so your colours don't wash out.
Reflections
| Preset | Best for | Feeling |
|---|
| studio | Corporate, SaaS | Clean, neutral (default) |
| warehouse | Gaming, industrial | Gritty, darker |
| city | Tech, startups | Urban, bright |
| night | Dark themes, premium | Moody, elegant |
| dawn | Health, wellness | Soft, warm |
| sunset | Creative, entertainment | Rich amber |
Works offline
The coin needs nothing from the internet. The live demo self-hosts all six HDRs (the same CC0 Poly Haven files drei's preset prop would download from a CDN), bundles its fonts, and processes uploads locally, so the coin renders with no internet, behind firewalls, and in air-gapped setups (the GitHub star count is the only online extra, and it simply hides). Only the picked reflection is loaded, and if an HDR ever fails to load the coin falls back to procedural studio lighting instead of disappearing.
The skill does the same for your project: it saves the chosen HDR into public/hdri/ and loads it with <Environment files=… /> instead of preset=, so the generated component has no runtime network dependency.
Customization
| Constant | Default | Controls |
|---|
PLANE_SIZE | 4.8 | Logo face size (3D units) |
THICKNESS | 0.45 | Coin edge thickness, also exposed as a thickness prop |
SPIN_SPEED | 0.35 | Rotation speed (rad/s) |
BG_TOLERANCE | 24 | How close a pixel must be to the border colour to count as background (0–255) |
EMBOSS_STRENGTH | 1.5 | Normal map depth (0 = flat, 3+ = deep) |
Requirements
npm install three @react-three/fiber @react-three/drei
npm install -D @types/three
Show your coin
Exported a video of your coin? Post it in Show and tell.
Contributing
- Fork → feature branch → edit
.claude/skills/3d-logo/SKILL.md
- Test locally:
claude plugin marketplace add ./ then claude plugin install 3d-logo@3d-logo-skill
- Open a PR with before/after coins
Open ideas: inner rim for logos with holes, hover interactions, glow, custom shaders.
License
MIT. Do whatever you want with it.
