Design Database

What's here

Each one is a single effect: a cursor-lit ASCII wordmark, a marquee that follows any SVG path, a cast-iron medallion that tilts on a damped spring, and more. Every component ships with:

• The source, ready to copy into a React (or plain Three.js) project
• A demo.html that runs with no build step
• A README listing every prop, plus the techniques that make it work

Click any preview to open its live demo.

Using a component

Copy the folder's component file into your project, then follow its README. To run a demo locally, serve the repo over HTTP (some demos fetch their own source):

python3 -m http.server 8000

Then open http://localhost:8000/components/<name>/demo.html.

How these are made

Most components start as a reference, such as a screen recording or a screenshot of an interaction I liked. I break down the mechanic, measure its timings and palette, then rebuild it from scratch as a reusable, prop-driven component. Brand, copy and imagery from the reference are never carried over. Each README says what came from the reference and what didn't.

index.json is a machine-readable catalogue of everything here (tags, stack, dependencies, file destinations, techniques), so tools and AI agents can search and install components without walking the folders.

Conventions

• One folder per component: components/<name>/.
• Include a demo.html that runs without a build step where practical.
• Document every exposed prop in the component's README.
• Add every component to index.json and to the preview grid above. index.json is the machine-readable catalogue — name, aliases, tags, stack, dependencies, file destinations, and the techniques worth reusing. Tools read it instead of walking the folders, so a component missing from it is effectively invisible.
• Add a 1280×800 preview to docs/previews/<name>.png.

Credits

marquee-along-svg-path is MarqueeAlongSvgPath from Daniel Petho's Fancy Components, used under its MIT license. The setup notes, no-build demo and Framer port are mine.

License

MIT © Cameron Gordon