ThreeUI

Spark Badge

Meng To

External demo

Installation

No MCP yet? Connect your agent.

Files to copy

The page is loaded from /spark-badge.html on your own domain, so that file has to be somewhere the app serves static files from: public/ in Vite and Next, static/ in SvelteKit.

cp node_modules/@designcodeio/threeui/lib-dist/assets/spark-badge.html public/

Without it the component renders an empty box.

Size

The component is 100% of its parent's width and height and has no size of its own, so a parent with no height renders nothing. A box at a 16 to 9 ratio suits it.

Props

No visual options on this one.

sourceUrl sets where the runtime files are loaded from, for serving them at a path of your own.

className passes through to the root element.

Agent guides

Copy the component out of the package to change what it showsWhen: The words, imagery or behavior of the scene need to change. The props only tune presentation, so anything beyond them means editing the component's own code.From the collection

Every prop tunes presentation: speed, color, density, intensity, mode. None of them changes what a scene shows. The words, logos, imagery and motion of a scene are code inside the installed package, so the way past the props is to bring that code into the project, where it is editable like anything else there. The MIT license allows exactly that.

Each component has a locator: node_modules/@designcodeio/threeui/lib-dist/package-components/<ExportName>.js is a one-line re-export whose import names the implementation folder, under lib-dist/shaders/<family>/. That folder's modules import each other by relative path; an import line that reaches into a sibling folder names the other folder to copy along with it. Copying a folder whole is fine: modules the scene never imports are dead weight, not errors. The .d.ts files beside the modules belong in the copy too, since they are what TypeScript reads for these otherwise plain JavaScript files.

Copied into the project's own source tree and imported from there instead of from the package, the component becomes project code. The package stays installed: the @designcodeio/threeui/style.css import keeps sizing the scene to fill its parent, and the package's dependencies keep resolving the copied modules' bare imports (react, and in some scenes three or a pinned build of it).

Inside the copy, the scene itself mostly lives outside the compiled modules. A component that renders a whole document keeps it under sources/ as a template string of plain authored HTML, CSS and JavaScript, and editing that document edits the scene. Shader scenes keep their GLSL in a Shaders.js module beside the component. A component whose delivery includes a copy-into-public step loads its document from public/ instead, so the copied file there is the one to edit.

Copy spark-badge.html into your public folderWhen: Always. Without it the component is an empty box.

Spark Badge renders an iframe pointing at /spark-badge.html. That is a URL on your own domain, so your app has to serve that file.

Installing the package puts it in node_modules, which the browser cannot request. Bundlers do not help either: they put modules in your JavaScript, not files on URLs. So the file has to be copied to where your app serves static files from, public/ in Vite and Next, static/ in SvelteKit.

Copy node_modules/@designcodeio/threeui/lib-dist/assets/spark-badge.html there, keeping the name.

Or set sourceUrl to wherever you would rather serve them from.

Skip it and the iframe requests a URL that is not there, so the component shows an empty box.

Most components in this collection need none of this. They render from the package alone.