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
