<div align="center">
```
██████╗ ██████╗ ██╗ ██████╗ ██████╗ ██████╗
╚════██╗██╔══██╗ ██║ ██╔═══██╗██╔════╝ ██╔═══██╗
█████╔╝██║ ██║ ██║ ██║ ██║██║ ███╗██║ ██║
╚═══██╗██║ ██║ ██║ ██║ ██║██║ ██║██║ ██║
██████╔╝██████╔╝ ███████╗╚██████╔╝╚██████╔╝╚██████╔╝
╚═════╝ ╚═════╝ ╚══════╝ ╚═════╝ ╚═════╝ ╚═════╝
```
### 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.
<br/>
<img src="screenshots/coins.webp" width="800" alt="Firebird, Koi and Manta enamel-pin logos spinning in sync as 3D coins over a sunset sky" />
<sub><b>FIREBIRD</b> · <b>KOI</b> · <b>MANTA</b></sub>
<br/><br/>
<sub>Download your coin as a looping MP4 straight from the live demo.</sub>
[](https://authrain-cloud-abdullahformuli.github.io/3d-logo-skill/)
[](https://agentskills.io)
[](LICENSE)
<sub>Claude Code · Cursor · Codex · Gemini CLI · GitHub Copilot · <a href="https://agentskills.io/specification">50+ more</a></sub>
</div>
---
> The rim isn't a generic circle. It traces your logo's actual outline, every concave notch included.
## Install
```bash
npx skills add authrain-cloud-abdullahformuli/3d-logo-skill
```
`npx skills add` detects which agents you have and drops the skill in the right folder for each.
<details>
<summary>Claude Code plugin install</summary>
```bash
# terminal
claude plugin marketplace add authrain-cloud-abdullahformuli/3d-logo-skill
claude plugin install 3d-logo@3d-logo-skill
# or inside a Claude Code session
/plugin marketplace add authrain-cloud-abdullahformuli/3d-logo-skill
/plugin install 3d-logo@3d-logo-skill
```
</details>
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:
```tsx
import { SpinningLogo3D } from './SpinningLogo3D'
<SpinningLogo3D size={540} />
```
## Live demo
<a href="https://authrain-cloud-abdullahformuli.github.io/3d-logo-skill/"><img src="images/social-card.png" alt="3D Logo live demo: Firebird coin floating over a painted sunset sky, with preset, upload and reflection controls" /></a>
**[authrain-cloud-abdullahformuli.github.io/3d-logo-skill](https://authrain-cloud-abdullahformuli.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
1. **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.
2. **Outline tracing**: Moore-neighbour contour trace per shape at a real opacity cutoff, with specks dropped. Multi-part logos keep every piece.
3. **Faces**: front and back planes cut to the same outline; the back is a true mirror, like a stamped coin.
4. **Chrome rim**: indexed `BufferGeometry` along the smoothed outline, with outward normals for clean reflections.
5. **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
```bash
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](https://github.com/authrain-cloud-abdullahformuli/3d-logo-skill/discussions/categories/show-and-tell).
## Maintenance & Ownership
Maintained solely by [Abdullah Formuli](https://github.com/authrain-cloud-abdullahformuli) (`authrainmedia@gmail.com`). External contributions or third-party pull requests are not accepted. See [MAINTAINERS.md](MAINTAINERS.md) for details.
## Citation
```bibtex
@software{formuli20263dlogoskill,
title={3d-logo-skill: Turn Any Logo into a 3D Spinning Coin with React Three Fiber},
author={Abdullah Formuli},
url={https://github.com/authrain-cloud-abdullahformuli/3d-logo-skill},
year={2026}
}
```
## License
Licensed under the MIT License. Copyright (c) 2026 Abdullah Formuli. See [LICENSE](LICENSE).
---
<div align="center">
<sub>Built with <a href="https://github.com/pmndrs/react-three-fiber">React Three Fiber</a> + <a href="https://github.com/pmndrs/drei">drei</a> + <a href="https://threejs.org">Three.js</a></sub>
<br/><br/>
<b>If this saved you time, drop a ⭐</b>
</div>