More screenshots
Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+22 moreClaude CodeCursorCodex CLIMuseDots
OpenClaw
Manus
Grok
Grok Bot+18 agents3D Logo Coin
Turn flat logo images into high-fidelity, 3D spinning coins with chrome rims and realistic reflections.
Free
3D Logo Coin
Example session with this skill installed
I have a white-background PNG logo at /assets/brand/logo.png. It has text on it. Create a 3D spinning coin component with a gold chrome rim and studio lighting.
- Read your context and instructions
- Compiled the 3d logo coin
- Generated the UI component
I have generated the SpinningLogo3D.tsx component. It includes a contiguous flood-fill to remove the white background, a Moore-neighbor tracer for the rim, and specialized logic for the HAS_TEXT flag to ensure the logo reads correctly from both sides during rotation.
3D Logo Spinner: Gold Chrome Edition
import React, { useMemo, useRef, Suspense, useLayoutEffect } from 'react'
import { Canvas, useFrame, useThree, useLoader } from '@react-three/fiber'
import { useTexture, Environment, PerspectiveCamera } from '@react-three/drei'
import * as THREE from 'three'
// Configuration for this specific build
const PLANE_SIZE = 4.8
const THICKNESS = 0.45
const SPIN_SPEED = 0.35
const HAS_TEXT = true
const EMBOSS_STRENGTH = 1.2
// ... (Internal flood-fill, perimeter tracing, and rim building logic)
export function SpinningLogo3D({ size = 540 }: { size?: number }) {
return (
<div style={{ width: size, height: size }}>
<Canvas
orthographic
gl={{
alpha: true,
antialias: true,
toneMapping: THREE.NeutralToneMapping,
preserveDrawingBuffer: true
}}
>
<FitOrthoCamera />
<ambientLight intensity={0.7} />
<pointLight position={[10, 10, 10]} intensity={2} />
<Environment files="/hdri/studio_small_03_1k.hdr" />
<Suspense fallback={null}>
<Coin logoPath="/assets/brand/logo.png" color="#e6c88e" emissive="#d4a506" />
</Suspense>
</Canvas>
</div>
)
}
Next steps
- Install dependencies:
npm install three @react-three/fiber @react-three/drei. - Download the studio HDR file to your
public/hdri/folder using the provided curl command. - Import and place the component in your layout; it will automatically handle the transparency of your white-background PNG.
3d-logo-coin.tsx
TSX · React component
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
About this skill
Building high-quality 3D animations from flat logo files is often a manual, time-consuming process involving Blender or complex custom shaders. This skill automates the generation of a React component that transforms any PNG, JPG, or SVG into a premium 3D spinning coin. It handles the heavy lifting of geometry extraction and real-time material rendering.
What it does
- Auto-transparency generation by detecting solid backgrounds and applying contiguous flood-fill removal to preserve interior details.
- Perimeter extraction using Moore-neighbor boundary tracing to create a precise chrome rim that follows the logo's exact silhouette.
- Dynamic normal mapping via Sobel filters to give flat logos embossed depth and realistic highlights.
- Continuous rotation logic that handles text-based logos correctly, ensuring they read properly from both sides without visual snaps.
- Premium material rendering with environment reflections, satin chrome finishes, and orthographic framing for a polished, professional look.
How it works
- Identify assets by providing a local path to a logo image within your project structure.
- Configure metadata such as whether the logo contains text or which lighting environment (studio, warehouse, sunset) to use.
- Generate component which produces a standalone
SpinningLogo3D.tsxfile including all Three.js and R3F logic. - Integrate by dropping the component into your UI, with all dependencies managed via standard npm installs.
Frameworks & tools
Built for React projects using Three.js, @react-three/fiber, and @react-three/drei.
Why this beats prompting it yourself
Writing a robust Moore-neighbor tracer and managing UV-independent back-face rendering is beyond the scope of a standard LLM chat. This skill provides specialized algorithms for contiguous transparency and tangent-based normals that prevent common artifacts like jagged reflections or "mirror-flipped" silhouettes.
Use cases
- Adding high-end 3D branding to a landing page or hero section.
- Generating interactive loading indicators that match a product's identity.
- Creating digital medals or badge rewards for gamified web applications.
Known limitations
Requires a React environment with R3F. Works best with high-resolution source images; low-res or highly compressed JPGs may show artifacts in the rim geometry.
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
1 install
Downloaded by developers to date
Free forever
No account required to browse
Trust & safety
Security scanned
Verified clean 1 day ago
- Free to download with an account
Needs access to
Githubusercontent