No MCP yet? Connect your agent.
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.
All optional. The defaults below are what the snippet renders.
| Prop | Values | Default |
|---|---|---|
speed | 0 to 3 | 1 |
pointerAmount | 0 to 2 | 1 |
smoothing | 0.005 to 0.15 | 0.035 |
hue | -180 to 180 | 0 |
saturation | 0 to 2 | 1 |
brightness | 0.4 to 2 | 1 |
opacity | 0.1 to 1 | 1 |
className passes through to the root element.
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.
