{"_id":"3dsvg","_rev":"5-7fb3ba5f51b81d127bbe2d462df3eb88","name":"3dsvg","dist-tags":{"latest":"0.2.1"},"versions":{"0.1.0":{"name":"3dsvg","version":"0.1.0","keywords":["3d","svg","react","three","threejs","embed","widget","pbr","webgl"],"author":{"name":"Renato Costa","email":"renatocesarcp@gmail.com"},"license":"MIT","_id":"3dsvg@0.1.0","maintainers":[{"name":"renatoworks","email":"renatocesarcp@gmail.com"}],"homepage":"https://3dsvg.design","bugs":{"url":"https://github.com/renatoworks/3dsvg/issues"},"dist":{"shasum":"d724433283e63f237a4d185947d43e5fb5e46d34","tarball":"https://registry.npmjs.org/3dsvg/-/3dsvg-0.1.0.tgz","fileCount":16,"integrity":"sha512-LMv6+LAVEX90xzURo7E+en9iPFkfxYrzRLL6nPLDgkLnfcHqAKIlCy4jzJ5h2s2puQXJsjhD4RPsdLwBLv58rQ==","signatures":[{"sig":"MEYCIQC03EdQmPpJRmNkuKCJ7ZlKJeDJC4aCTi48vPfmX7HdTAIhAKOvYiDDG3CqXGMYBT6vVyyA2r4KWwLtLANJYonZi1t1","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":108457},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./scene":{"types":"./dist/scene.d.ts","import":"./dist/scene.js"},"./types":{"types":"./dist/types.d.ts","import":"./dist/types.js"},"./controls":{"types":"./dist/controls.d.ts","import":"./dist/controls.js"},"./use-font":{"types":"./dist/use-font.d.ts","import":"./dist/use-font.js"},"./materials":{"types":"./dist/materials.d.ts","import":"./dist/materials.js"}},"gitHead":"6b600b8674c0773ac6ce876bc7f59fa2788b41f5","scripts":{"dev":"tsup --watch","build":"tsup"},"_npmUser":{"name":"renatoworks","email":"renatocesarcp@gmail.com"},"repository":{"url":"git+https://github.com/renatoworks/3dsvg.git","type":"git","directory":"packages/engine"},"_npmVersion":"10.2.4","description":"Embeddable 3D component – render extruded SVGs with PBR materials, animations, and shadows","directories":{},"_nodeVersion":"20.11.0","dependencies":{"opentype.js":"^1.3.4"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8","react":"^19","three":"^0.183.2","react-dom":"^19","typescript":"^5","opentype.js":"^1.3.4","@types/react":"^19","@types/three":"^0.183.1","@react-three/drei":"^10.7.7","@react-three/fiber":"^9.5.0","@types/opentype.js":"^1.3.9"},"peerDependencies":{"react":">=18","three":">=0.160.0","react-dom":">=18","@react-three/drei":">=10","@react-three/fiber":">=9"},"_npmOperationalInternal":{"tmp":"tmp/3dsvg_0.1.0_1775203577573_0.9423251213265036","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"3dsvg","version":"0.1.1","keywords":["3d","svg","react","three","threejs","embed","widget","pbr","webgl"],"author":{"name":"Renato Costa","email":"renatocesarcp@gmail.com"},"license":"MIT","_id":"3dsvg@0.1.1","maintainers":[{"name":"renatoworks","email":"renatocesarcp@gmail.com"}],"homepage":"https://3dsvg.design","bugs":{"url":"https://github.com/renatoworks/3dsvg/issues"},"dist":{"shasum":"9ae61e36a98549ee0be9d27c1142878194b5b733","tarball":"https://registry.npmjs.org/3dsvg/-/3dsvg-0.1.1.tgz","fileCount":16,"integrity":"sha512-NOGmqfgg3Os5tnazfdRz1bEthwTg+S8yVYJ2Cu6QnhdiTP8LdmidVvnVzNcC8ibxlNcCJEu1IFy0Z4AvjurKVg==","signatures":[{"sig":"MEUCIQC36ouy2xtB9FhyojJ46+v9lNVW0meWyiBZSD8YubQFOQIgTlDwdeOOxdeMlvEMBTl6jS3ZjGRoZjLfdPtFsuLBkJ4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":108429},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./scene":{"types":"./dist/scene.d.ts","import":"./dist/scene.js"},"./types":{"types":"./dist/types.d.ts","import":"./dist/types.js"},"./controls":{"types":"./dist/controls.d.ts","import":"./dist/controls.js"},"./use-font":{"types":"./dist/use-font.d.ts","import":"./dist/use-font.js"},"./materials":{"types":"./dist/materials.d.ts","import":"./dist/materials.js"}},"gitHead":"6b600b8674c0773ac6ce876bc7f59fa2788b41f5","scripts":{"dev":"tsup --watch","build":"tsup"},"_npmUser":{"name":"renatoworks","email":"renatocesarcp@gmail.com"},"repository":{"url":"git+https://github.com/renatoworks/3dsvg.git","type":"git","directory":"packages/engine"},"_npmVersion":"10.2.4","description":"Embeddable 3D component – render extruded SVGs with PBR materials, animations, and shadows","directories":{},"_nodeVersion":"20.11.0","dependencies":{"opentype.js":"^1.3.4"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8","react":"^19","three":"^0.183.2","react-dom":"^19","typescript":"^5","opentype.js":"^1.3.4","@types/react":"^19","@types/three":"^0.183.1","@react-three/drei":"^10.7.7","@react-three/fiber":"^9.5.0","@types/opentype.js":"^1.3.9"},"peerDependencies":{"react":">=18","three":">=0.160.0","react-dom":">=18","@react-three/drei":">=10","@react-three/fiber":">=9"},"_npmOperationalInternal":{"tmp":"tmp/3dsvg_0.1.1_1775204550884_0.7136642298618232","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"3dsvg","version":"0.1.2","keywords":["3d","svg","react","three","threejs","embed","widget","pbr","webgl"],"author":{"name":"Renato Costa","email":"renatocesarcp@gmail.com"},"license":"MIT","_id":"3dsvg@0.1.2","maintainers":[{"name":"renatoworks","email":"renatocesarcp@gmail.com"}],"homepage":"https://3dsvg.design","bugs":{"url":"https://github.com/renatoworks/3dsvg/issues"},"dist":{"shasum":"96e7a04b2148302d4a0d436b3b4d2588f4f7209f","tarball":"https://registry.npmjs.org/3dsvg/-/3dsvg-0.1.2.tgz","fileCount":16,"integrity":"sha512-v52IiZMKq2u2IP/wl+OXXziCF4mTEhfS/pLJ31txxrEVZbspxnfcWoPOken4ZMXA8fnoIiSMPmbtRcoVJcPIkw==","signatures":[{"sig":"MEUCIFHFJzcDrpZS9bQHehfm2RqY5S6qelx8jB5Na2sjrv1IAiEAknpyeSMaJpjDIg4lINnggODJIztiiVgv5InazO96iXE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":109921},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./scene":{"types":"./dist/scene.d.ts","import":"./dist/scene.js"},"./types":{"types":"./dist/types.d.ts","import":"./dist/types.js"},"./controls":{"types":"./dist/controls.d.ts","import":"./dist/controls.js"},"./use-font":{"types":"./dist/use-font.d.ts","import":"./dist/use-font.js"},"./materials":{"types":"./dist/materials.d.ts","import":"./dist/materials.js"}},"gitHead":"4497ca5677e6a8fa5e5d8026d243c76793536e1a","scripts":{"dev":"tsup --watch","build":"tsup"},"_npmUser":{"name":"renatoworks","email":"renatocesarcp@gmail.com"},"repository":{"url":"git+https://github.com/renatoworks/3dsvg.git","type":"git","directory":"packages/engine"},"_npmVersion":"10.2.4","description":"Embeddable 3D component – render extruded SVGs with PBR materials, animations, and shadows","directories":{},"_nodeVersion":"20.11.0","dependencies":{"opentype.js":"^1.3.4"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8","react":"^19","three":"^0.183.2","react-dom":"^19","typescript":"^5","opentype.js":"^1.3.4","@types/react":"^19","@types/three":"^0.183.1","@react-three/drei":"^10.7.7","@react-three/fiber":"^9.5.0","@types/opentype.js":"^1.3.9"},"peerDependencies":{"react":">=18","three":">=0.160.0","react-dom":">=18","@react-three/drei":">=10","@react-three/fiber":">=9"},"_npmOperationalInternal":{"tmp":"tmp/3dsvg_0.1.2_1775205535611_0.4215844844619634","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"3dsvg","version":"0.2.0","keywords":["3d","svg","react","three","threejs","embed","widget","pbr","webgl"],"author":{"name":"Renato Costa","email":"renatocesarcp@gmail.com"},"license":"MIT","_id":"3dsvg@0.2.0","maintainers":[{"name":"renatoworks","email":"renatocesarcp@gmail.com"}],"homepage":"https://3dsvg.design","bugs":{"url":"https://github.com/renatoworks/3dsvg/issues"},"dist":{"shasum":"2d48ffb4c13fab81d042dbdf1bc36c11a12ec11a","tarball":"https://registry.npmjs.org/3dsvg/-/3dsvg-0.2.0.tgz","fileCount":16,"integrity":"sha512-EaWPehN1oV5Dlh5kWj19STnN1JIKzKrA2Dw3v3l6q1e7PhpnqvWvI7Vd9Twe+AyzZbqJJqigv63IZF1JqWxsmg==","signatures":[{"sig":"MEUCIH2KDsDXjj3vicwoZZTkhsr5L2J/8WZoeO6FaOAzILB/AiEAzYQiT5psZyHGdC+BO6SlBC1oNhg9/KtUsQOKoqZ22Rs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":112618},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./scene":{"types":"./dist/scene.d.ts","import":"./dist/scene.js"},"./types":{"types":"./dist/types.d.ts","import":"./dist/types.js"},"./controls":{"types":"./dist/controls.d.ts","import":"./dist/controls.js"},"./use-font":{"types":"./dist/use-font.d.ts","import":"./dist/use-font.js"},"./materials":{"types":"./dist/materials.d.ts","import":"./dist/materials.js"}},"gitHead":"3fbf22099924278d167fd85c9f91ef2815e57b48","scripts":{"dev":"tsup --watch","build":"tsup"},"_npmUser":{"name":"renatoworks","email":"renatocesarcp@gmail.com"},"repository":{"url":"git+https://github.com/renatoworks/3dsvg.git","type":"git","directory":"packages/engine"},"_npmVersion":"11.3.0","description":"The easiest way to turn SVGs into interactive React 3D components","directories":{},"_nodeVersion":"24.1.0","dependencies":{"opentype.js":"^1.3.4"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8","react":"^19","three":"^0.183.2","react-dom":"^19","typescript":"^5","opentype.js":"^1.3.4","@types/react":"^19","@types/three":"^0.183.1","@react-three/drei":"^10.7.7","@react-three/fiber":"^9.5.0","@types/opentype.js":"^1.3.9"},"peerDependencies":{"react":">=18","three":">=0.160.0","react-dom":">=18","@react-three/drei":">=10","@react-three/fiber":">=9"},"_npmOperationalInternal":{"tmp":"tmp/3dsvg_0.2.0_1775719358543_0.23152831725407963","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"3dsvg","version":"0.2.1","description":"The easiest way to turn SVGs into interactive React 3D components","author":{"name":"Renato Costa","email":"renatocesarcp@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/renatoworks/3dsvg.git","directory":"packages/engine"},"homepage":"https://3dsvg.design","keywords":["3d","svg","react","three","threejs","embed","widget","pbr","webgl"],"type":"module","main":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.js","types":"./dist/index.d.ts"},"./scene":{"import":"./dist/scene.js","types":"./dist/scene.d.ts"},"./controls":{"import":"./dist/controls.js","types":"./dist/controls.d.ts"},"./materials":{"import":"./dist/materials.js","types":"./dist/materials.d.ts"},"./types":{"import":"./dist/types.js","types":"./dist/types.d.ts"},"./use-font":{"import":"./dist/use-font.js","types":"./dist/use-font.d.ts"}},"scripts":{"build":"tsup","dev":"tsup --watch"},"peerDependencies":{"react":">=18","react-dom":">=18","three":">=0.160.0","@react-three/fiber":">=9","@react-three/drei":">=10"},"devDependencies":{"react":"^19","react-dom":"^19","three":"^0.183.2","@react-three/fiber":"^9.5.0","@react-three/drei":"^10.7.7","@types/react":"^19","@types/three":"^0.183.1","opentype.js":"^1.3.4","@types/opentype.js":"^1.3.9","tsup":"^8","typescript":"^5"},"dependencies":{"opentype.js":"^1.3.4"},"_id":"3dsvg@0.2.1","gitHead":"aba4d8f88658c714eac16d7a34a4bcaded3540d2","bugs":{"url":"https://github.com/renatoworks/3dsvg/issues"},"_nodeVersion":"24.1.0","_npmVersion":"11.3.0","dist":{"integrity":"sha512-JIw2Yj/AvEltF2sI0xjwwH9b3Z4BNg7aMLmkPIJbLSrnbSoCL32eTyKlFFgU/JvVwfyV9PrykWj91o65MUBm7Q==","shasum":"01b0a16810ab26aeabc02b9e54734bd837cc9849","tarball":"https://registry.npmjs.org/3dsvg/-/3dsvg-0.2.1.tgz","fileCount":16,"unpackedSize":112326,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIH1Imrf/F7miZLYZtQNONw7yxfStAsBnVRro8k5WVg+wAiAQV0+8bGU84XF7cMVIhy4yQfAlGMgG8bDV0MuyQreIFw=="}]},"_npmUser":{"name":"renatoworks","email":"renatocesarcp@gmail.com"},"directories":{},"maintainers":[{"name":"renatoworks","email":"renatocesarcp@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/3dsvg_0.2.1_1775720424335_0.7929071443797426"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-03T08:06:17.572Z","modified":"2026-04-09T07:40:24.588Z","0.1.0":"2026-04-03T08:06:17.711Z","0.1.1":"2026-04-03T08:22:31.072Z","0.1.2":"2026-04-03T08:38:55.784Z","0.2.0":"2026-04-09T07:22:38.683Z","0.2.1":"2026-04-09T07:40:24.478Z"},"bugs":{"url":"https://github.com/renatoworks/3dsvg/issues"},"author":{"name":"Renato Costa","email":"renatocesarcp@gmail.com"},"license":"MIT","homepage":"https://3dsvg.design","keywords":["3d","svg","react","three","threejs","embed","widget","pbr","webgl"],"repository":{"type":"git","url":"git+https://github.com/renatoworks/3dsvg.git","directory":"packages/engine"},"description":"The easiest way to turn SVGs into interactive React 3D components","maintainers":[{"name":"renatoworks","email":"renatocesarcp@gmail.com"}],"readme":"# 3dsvg\n\n![3dsvg](https://raw.githubusercontent.com/renatoworks/3dsvg/main/.github/assets/demo.png)\n\nThe easiest way to turn SVGs into interactive React 3D components.\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/renatoworks/3dsvg/blob/main/LICENSE)\n[![npm](https://img.shields.io/npm/v/3dsvg)](https://www.npmjs.com/package/3dsvg)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/3dsvg)](https://bundlephobia.com/package/3dsvg)\n\n## Install\n\n```bash\nnpm install 3dsvg\n```\n\nPeer dependencies: `react`, `react-dom`, `three`, `@react-three/fiber`, `@react-three/drei`\n\n## Quick Start\n\n```tsx\nimport { SVG3D } from \"3dsvg\";\n\n// 3D text\n<SVG3D text=\"Hello\" animate=\"spin\" />\n\n// SVG from your public folder\n<SVG3D svg=\"/logo.svg\" material=\"gold\" animate=\"float\" />\n\n// Inline SVG markup\n<SVG3D svg='<svg viewBox=\"0 0 24 24\"><path d=\"M12 2L2 7l10 5 10-5z\"/></svg>' />\n\n// Remote URL\n<SVG3D svg=\"https://cdn.example.com/icon.svg\" material=\"metal\" />\n```\n\n**Next.js** — wrap with `next/dynamic` for SSR safety:\n\n```tsx\nconst SVG3D = dynamic(\n  () => import(\"3dsvg\").then((m) => ({ default: m.SVG3D })),\n  { ssr: false }\n);\n```\n\n## Demo & Editor\n\nDesign 3D objects visually and export embed code at [3dsvg.design](https://3dsvg.design).\n\n## Props\n\n### Content\n\nProvide either `text` or `svg`. If both are given, `svg` takes priority.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `text` | `string` | — | Text to render in 3D |\n| `font` | `string` | `\"DM Sans\"` | Google Font name (see [available fonts](#available-fonts)) |\n| `svg` | `string` | — | SVG markup or URL (`/logo.svg`, `https://...`, `./path.svg`) |\n\n### Shape\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `depth` | `number` | `1` | Extrusion depth (0.5 = flat, 10 = very deep) |\n| `smoothness` | `number` | `0.2` | Curve and bevel quality, 0–1 |\n| `color` | `string` | `\"#ffffff\"` | Base color (hex) |\n\n### Material\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `material` | `MaterialPreset` | `\"default\"` | Material preset (see below) |\n| `metalness` | `number` | — | Override preset metalness (0–1) |\n| `roughness` | `number` | — | Override preset roughness (0–1) |\n| `opacity` | `number` | — | Override preset opacity (0–1) |\n| `wireframe` | `boolean` | `false` | Wireframe rendering mode |\n\n**Material presets:**\n\n| Preset | Metalness | Roughness | Notes |\n|--------|-----------|-----------|-------|\n| `default` | 0.15 | 0.35 | Balanced starting point |\n| `plastic` | 0.0 | 0.3 | Smooth, non-reflective |\n| `metal` | 0.9 | 0.2 | Brushed metal |\n| `glass` | 0.1 | 0.05 | Transparent with refraction |\n| `rubber` | 0.0 | 0.9 | Matte, soft |\n| `chrome` | 1.0 | 0.05 | Mirror-like reflections |\n| `gold` | 1.0 | 0.25 | Gold tint applied automatically |\n| `clay` | 0.0 | 1.0 | Fully matte |\n| `emissive` | 0.0 | 0.5 | Self-illuminated glow |\n| `holographic` | 0.8 | 0.1 | Transparent with clearcoat |\n\n### Texture\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `texture` | `string` | — | Image URL to map onto the 3D surface |\n| `textureRepeat` | `number` | `1` | How many times the texture tiles |\n| `textureRotation` | `number` | `0` | Texture rotation in radians |\n| `textureOffset` | `[number, number]` | `[0, 0]` | UV offset `[x, y]` |\n\nWhen a texture is set, the base color is overridden to white so the texture renders at full fidelity.\n\n### Lighting\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `lightPosition` | `[number, number, number]` | `[5, 8, 5]` | Key light position `[x, y, z]` |\n| `lightIntensity` | `number` | `1.2` | Key light brightness |\n| `ambientIntensity` | `number` | `0.3` | Ambient fill light |\n| `shadow` | `boolean` | `true` | Show contact shadows |\n\n### Camera\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `rotationX` | `number` | `0` | Initial X rotation (radians) |\n| `rotationY` | `number` | `0` | Initial Y rotation (radians) |\n| `zoom` | `number` | `8` | Camera distance |\n| `fov` | `number` | `50` | Field of view (degrees) |\n\nThe camera automatically adjusts on narrow/portrait viewports — it zooms out proportionally so the 3D object always fits within the visible area.\n\n### Interaction\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `interactive` | `boolean` | `true` | Master toggle — `false` disables drag, zoom, and orbit |\n| `cursorOrbit` | `boolean` | `true` | Object subtly follows the cursor |\n| `orbitStrength` | `number` | `0.15` | How strongly the object follows the cursor (radians) |\n| `draggable` | `boolean` | `true` | Allow drag to rotate |\n| `scrollZoom` | `boolean` | `false` | Allow scroll to zoom (off by default so embeds don't hijack page scroll) |\n| `resetOnIdle` | `boolean` | `false` | Return to default position after inactivity |\n| `resetDelay` | `number` | `2` | Seconds before reset triggers |\n\n### Animation\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `animate` | `AnimationType` | `\"none\"` | Loop animation type (see below) |\n| `animateSpeed` | `number` | `1` | Speed multiplier |\n| `animateReverse` | `boolean` | `false` | Reverse direction |\n\n**Animation types:** `none` · `spin` · `float` · `pulse` · `wobble` · `spinFloat` · `swing`\n\n### Intro\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `intro` | `string` | `\"zoom\"` | Intro animation: `zoom` · `fade` · `none` |\n| `introDuration` | `number` | `2.5` | Duration in seconds |\n| `introFrom` | `object` | `{ zoom: 18, opacity: 0 }` | Starting state |\n| `introTo` | `object` | `{ zoom: 8, opacity: 1 }` | Ending state |\n\n### Layout\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `width` | `string \\| number` | `\"100%\"` | Container width |\n| `height` | `string \\| number` | `\"100%\"` | Container height |\n| `background` | `string` | `\"transparent\"` | Canvas background color |\n| `className` | `string` | — | CSS class on the wrapper div |\n\n### Events\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `onReady` | `() => void` | Fires when WebGL context is ready and first frame is rendered |\n| `onAnimationComplete` | `() => void` | Fires when the intro animation finishes |\n| `onLoadingChange` | `(loading: boolean, progress: number) => void` | Fires during geometry processing with loading state and progress (0-100). Use this to show custom loading UI. |\n\nGeometry processing is asynchronous — complex SVGs are processed in batches to keep the browser responsive. The `onLoadingChange` callback lets you track progress and show a loading indicator:\n\n```tsx\n<SVG3D\n  svgString={complexSvg}\n  onLoadingChange={(loading, progress) => {\n    if (loading) console.log(`Processing: ${progress}%`);\n    else console.log(\"Done\");\n  }}\n/>\n```\n\n## Available Fonts\n\nDM Sans · Bebas Neue · Playfair Display · Righteous · Black Ops One · Permanent Marker · Rubik Mono One · Pacifico · Oswald · Archivo Black\n\n## License\n\nMIT — [Renato Costa](https://renato.works)\n\nMade in [Blueberry](https://meetblueberry.com) 🫐\n","readmeFilename":"README.md"}