Skip to main content
affpapa.org
RU EN
skill CX Codex

3dsvg-interactive-react — Claude Code skill: SVG to 3D React

Turns SVGs and text into interactive 3D React components with the 3dsvg library. Useful for a dimensional logo or hero badge.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add reason-machines/trending-skills --skill 3dsvg-interactive-react -a claude-code
Open on GitHub

What 3dsvg-interactive-react does

The skill tells your agent how to build an <SVG3D> component from the 3dsvg package. Under the hood it extrudes flat SVG paths into depth, applies a material preset such as chrome, gold or holographic, and attaches an animation like spin, float or pulse.

The component takes a text string, a path to an SVG file, or inline markup. Geometry and lighting come through props: depth, bevelEnabled, ambientIntensity, keyLightIntensity, shadows. Camera behaviour is set with zoom and autoRotate.

Because it pulls in Three.js and React Three Fiber, a Next.js app has to load it through a dynamic import with ssr: false — otherwise the build breaks during server rendering. Install the peer dependencies three, @react-three/fiber and @react-three/drei first.

What it helps with

  • extrude a flat logo into a 3D component
  • add rotation to hero text
  • render a static 3D product icon with no animation
  • match a brand look using built-in material presets
  • embed a 3D model in a React app

Example prompts for the agent

  • turn /logo.svg into a spinning 3D component with 3dsvg
  • give the LAUNCH text a spin animation and chrome material
  • wire 3dsvg into Next.js without breaking SSR

How to install 3dsvg-interactive-react

1Skills CLI (Vercel)

npx skills add reason-machines/trending-skills --skill 3dsvg-interactive-react -a claude-code

2Manually: put the files in place

~/.claude/skills/3dsvg-interactive-react/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/3dsvg-interactive-react/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about 3dsvg-interactive-react

How do I install 3dsvg-interactive-react in Claude?

Run npx skills add reason-machines/trending-skills --skill 3dsvg-interactive-react -a claude-code. The skill lands in ~/.claude/skills/3dsvg-interactive-react/SKILL.md.

What does 3dsvg-interactive-react do?

It guides the agent through building interactive 3D React components from SVG or text using the 3dsvg library and Three.js.

What do I need installed for 3dsvg to work?

The 3dsvg package plus the peer dependencies three, @react-three/fiber and @react-three/drei.

Similar skills

Everything for Frontend and UI →
react-three-fiber freshtechbro Teaches the agent to build declarative Three.js 3D scenes in React using JSX components, animation hooks, and Suspense loaders. CX Codex +1 3,800installs spline-interactive freshtechbro Guides agents on integrating interactive Spline 3D scenes into web apps. Useful for embedding 3D UI, configuring state animations, and handling object events in React. CX Codex +1 2,800installs r3f-loaders EnzeD Guides 3D asset loading and reuse in React Three Fiber. Helps set up hooks, preloading, scene cloning, and fallback UI. CX Codex +1 1,800installs threejs-r3f AThevon A skill covering Three.js and React Three Fiber: scene setup, hooks, postprocessing and performance rules. Useful when your agent writes 3D in React. CX Codex +1 1,000installs threejs-react-three-fiber CloudAI-X A skill for writing three.js scenes as React components. Covers the Canvas, frame-loop hooks and pointer events in React Three Fiber. CX Codex +1 1,300installs build-interactive-particle-trail MengTo A skill for pointer-driven particle trails: the cursor or finger leaves discrete motes that fly on their own path. Useful in 3D scenes and landing pages. CX Codex +1 1,100installs

From the same set49

claude-code-source-study A 25-article breakdown of Claude's source: system prompt, tools, agents and permissions. Useful if you are building your own agent. CX Codex +1 616installs cabinet-ai-knowledge-base This skill sets up Cabinet, a self-hosted knowledge base and startup OS with markdown pages, agents that keep memory, cron jobs and embedded HTML apps. CX Codex +1 607installs x-mentor-skill-nuwa A skill that turns six creators' methods and open-source algorithm data into concrete advice on hooks, threads and account growth. CX Codex +1 594installs bluehammer-vulnerability-poc A skill that walks the agent through the BlueHammer repo: building the C exploit, running it, and reading the vulnerability code. For isolated labs only. CX Codex +1 570installs rattles-terminal-spinners A Claude skill covering rattles, a minimal Rust library for terminal spinners. Useful when a CLI needs a loading indicator without extra dependencies. CX Codex +1 497installs isolet-widget-isolation This skill packages a component into a self-contained widget with shadow DOM and scoped styles, ready to embed on any page. CX Codex +1 474installs ntwarden-windows-analysis-toolkit A skill for digging into Windows internals: processes, services, network, ETW, kernel. Useful when you need to break down what a suspicious process is doing. CX Codex +1 443installs tech-doc-style-chinese Style rules for Chinese technical writing: spacing between CJK and Latin, corner brackets, no buzzwords. Ships with a Python linter. CX Codex +1 434installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor