From aradotso-trending-skills-37
Converts SVGs and text into interactive 3D React components using 3dsvg library with extrusion, materials, animations, lighting, and visual editor at 3dsvg.design.
npx claudepluginhub joshuarweaver/cascade-ai-ml-agents-misc-1 --plugin aradotso-trending-skills-37This skill uses the workspace's default tool permissions.
> Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
Skill by ara.so — Daily 2026 Skills collection.
3dsvg extrudes SVG paths, text, and shapes into fully interactive 3D React components powered by Three.js and React Three Fiber. It ships as an embeddable <SVG3D> component (npm) plus a visual editor at 3dsvg.design.
npm install 3dsvg
# or
yarn add 3dsvg
# or
pnpm add 3dsvg
Peer dependencies (install if not already present):
npm install three @react-three/fiber @react-three/drei
import { SVG3D } from "3dsvg";
// Spin text in 3D
<SVG3D text="Hello" animate="spin" />
// 3D logo from SVG file
<SVG3D svg="/logo.svg" material="gold" />
// Pixel editor input
<SVG3D svg="<svg>...</svg>" material="chrome" animate="float" />
import { SVG3D } from "3dsvg";
<SVG3D
// Input (choose one)
text="Hello World" // Text string (uses Google Fonts)
svg="/path/to/file.svg" // URL to SVG file
// svg="<svg>...</svg>" // Raw SVG markup string
// Font (when using text=)
font="Inter" // Google Font name (10 presets available)
// Material preset
material="default" // "default" | "plastic" | "metal" | "glass"
// "rubber" | "chrome" | "gold" | "clay"
// "emissive" | "holographic"
// Animation
animate="spin" // "spin" | "float" | "pulse" | "wobble"
// "swing" | "spin+float" | undefined (static)
// Geometry
depth={0.2} // Extrusion depth (default: 0.2)
bevelEnabled={true} // Enable bevel on edges
bevelThickness={0.02} // Bevel thickness
bevelSize={0.02} // Bevel size
bevelSegments={3} // Bevel smoothness
// Lighting
ambientIntensity={0.5} // Ambient light (0–1)
keyLightIntensity={1.0} // Key light brightness
keyLightX={5} // Key light X position
keyLightY={5} // Key light Y position
keyLightZ={5} // Key light Z position
shadows={true} // Enable shadow casting
// Camera
zoom={1} // Initial zoom level
autoRotate={false} // Auto-rotate camera (overrides animate)
// Texture
texture="none" // "none" or procedural preset name, or URL
/>
import { SVG3D } from "3dsvg";
export function LogoViewer() {
return (
<div style={{ width: 400, height: 400 }}>
<SVG3D
svg="/logo.svg"
material="metal"
animate="float"
depth={0.3}
bevelEnabled={true}
bevelThickness={0.03}
/>
</div>
);
}
import { SVG3D } from "3dsvg";
export function HeroBadge() {
return (
<SVG3D
text="LAUNCH"
font="Inter"
material="chrome"
animate="spin"
depth={0.4}
keyLightIntensity={1.5}
ambientIntensity={0.3}
/>
);
}
import { SVG3D } from "3dsvg";
export function ProductIcon({ svgUrl }: { svgUrl: string }) {
return (
<SVG3D
svg={svgUrl}
material="gold"
depth={0.15}
bevelEnabled={true}
shadows={true}
ambientIntensity={0.6}
keyLightX={3}
keyLightY={8}
keyLightZ={3}
/>
);
}
import { SVG3D } from "3dsvg";
export function HolographicLogo() {
return (
<SVG3D
svg="/brand.svg"
material="holographic"
animate="spin+float"
depth={0.1}
ambientIntensity={0.8}
/>
);
}
import { SVG3D } from "3dsvg";
const starSvg = `
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<polygon points="50,5 61,35 95,35 68,57 79,91 50,70 21,91 32,57 5,35 39,35"
fill="#FFD700"/>
</svg>
`;
export function Star3D() {
return (
<SVG3D
svg={starSvg}
material="gold"
animate="pulse"
depth={0.25}
/>
);
}
| Value | Description |
|---|---|
"default" | Standard PBR material |
"plastic" | Smooth, slightly shiny plastic |
"metal" | Matte metallic surface |
"glass" | Transparent glass look |
"rubber" | Soft matte rubber |
"chrome" | High-gloss mirror chrome |
"gold" | Warm gold PBR |
"clay" | Soft diffuse clay (great for screenshots) |
"emissive" | Glowing emission effect |
"holographic" | Iridescent rainbow foil |
| Value | Description |
|---|---|
"spin" | Continuous Y-axis rotation |
"float" | Gentle up/down bob |
"pulse" | Breathing scale animation |
"wobble" | Side-to-side wobble |
"swing" | Pendulum swing |
"spin+float" | Spin combined with float |
undefined | Static, user-draggable only |
git clone https://github.com/renatoworks/3dsvg.git
cd 3dsvg
npm install
npm run build:engine # Build the npm package
npm run dev:web # Start the visual editor at localhost:3000
cd packages/engine
npm run build # Outputs to dist/
npm run dev # Watch mode
packages/
├── engine/src/
│ ├── index.tsx # SVG3D public component
│ ├── scene.tsx # Three.js scene, ExtrudedSVG mesh
│ ├── controls.tsx # Animation logic, orbit controls
│ ├── materials.ts # PBR material preset definitions
│ ├── types.ts # SVG3DProps TypeScript types
│ └── use-font.ts # Google Font → vector path loader
└── web/src/
├── app/ # Next.js pages
├── components/ # Editor UI panels, export bar
└── lib/ # Texture generators, FFmpeg utils
import type { SVG3DProps } from "3dsvg";
const config: SVG3DProps = {
svg: "/logo.svg",
material: "chrome",
animate: "float",
depth: 0.3,
};
export function MyComponent() {
return <SVG3D {...config} />;
}
Because SVG3D uses Three.js (browser-only), use dynamic import with ssr: false:
// components/Logo3D.tsx
"use client";
import dynamic from "next/dynamic";
const SVG3D = dynamic(
() => import("3dsvg").then((m) => m.SVG3D),
{ ssr: false, loading: () => <div>Loading 3D...</div> }
);
export function Logo3D() {
return (
<SVG3D
svg="/logo.svg"
material="gold"
animate="spin"
/>
);
}
// No special config needed — just import and use
import { SVG3D } from "3dsvg";
function App() {
return (
<div style={{ height: "100vh" }}>
<SVG3D text="Vite + 3D" material="plastic" animate="float" />
</div>
);
}
<SVG3D> JSX snippetDrag and drop an SVG file anywhere on the editor to load it instantly.
Component renders blank / white screen
three, @react-three/fiber, and @react-three/drei are installeddynamic with ssr: falsewidth and heightSVG not extruding correctly
fill attributes on paths are respected — avoid CSS-only fillsbevelSegments for smoother curvesText not loading
font prop loads from Google Fonts — ensure network access or host fonts locallyuse-font.tsPerformance issues
bevelSegments (try 1 or 2)shadows for lower-end devicesanimate={undefined} for static displayFFmpeg/video export fails in dev
SharedArrayBufferCross-Origin-Opener-Policy: same-origin and Cross-Origin-Embedder-Policy: require-corpMIT — Renato Costa / Blueberry