3d-logo

                 ██████╗ ██████╗     ██╗      ██████╗  ██████╗  ██████╗
                 ╚════██╗██╔══██╗    ██║     ██╔═══██╗██╔════╝ ██╔═══██╗
                  █████╔╝██║  ██║    ██║     ██║   ██║██║  ███╗██║   ██║
                  ╚═══██╗██║  ██║    ██║     ██║   ██║██║   ██║██║   ██║
                 ██████╔╝██████╔╝    ███████╗╚██████╔╝╚██████╔╝╚██████╔╝
                 ╚═════╝ ╚═════╝     ╚══════╝ ╚═════╝  ╚═════╝  ╚═════╝

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

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

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

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

1. Fork → feature branch → edit .claude/skills/3d-logo/SKILL.md
2. Test locally: claude plugin marketplace add ./ then claude plugin install 3d-logo@3d-logo-skill
3. 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.

---