Agent skill · software engineering · aradotso
3dsvg-interactive-react
Turn SVGs into interactive React 3D components using the 3dsvg library and visual editor
Why this skill is useful
Provides specific commands and patterns for integrating 3D SVG components into React applications using the 3dsvg library.
What it needs
Requires 3dsvg, @react-three/drei, @react-three/fiber, three installed locally. About 5k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
3dsvg — Interactive React 3D Components from SVGs 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. Installation Peer dependencies (install if not already present): Quick Start SVG3DProps — Full API Common Patterns Basic Logo Viewer Interactive 3D Text Badge Static Product Icon (No Animation) Holographic Animated Logo Inline SVG String Material Presets Reference 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 Animation Presets Reference 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 Monorepo Development Setup Engine package only Project Structure TypeScript Types Next.js Integration Because SVG3D uses Three.js (browser-only), use dynamic import with ssr: false: Vite / React Integration Visual Editor Workflow 1. Go to 3dsvg.design 2. Choose an input method: Text, Pixel Editor, SVG Code, or File Upload 3. Pick a material, animation, and lighting configuration 4. Use the Embed export to copy a ready-to-paste <SVG3D> JSX snippet 5. Export as PNG (up to 4K), Video (MP4/WebM), or 3D Model (GLB/STL/OBJ/PLY) Drag and drop an SVG file anywhere on the editor to load it instantly. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/3dsvg-interactive-react