A growing gallery of web interaction effects I think are cool — each one recreated from scratch as copy-pasteable HTML/CSS/JS.
Every demo is a single self-contained file you can lift straight into your own page. The full code is embedded in each page (no build step, no API) so it's easy for humans and LLMs to read. Each effect credits where I first saw it. Inspired by reactbits.dev.
How to use an effect
Open any effect below, hit Copy code, and paste the whole
file into your own project — it is a complete HTML document with the CSS and
JavaScript inline. Nothing here needs a bundler, a package install, or an API
key. Only resend-cube loads an external library (Three.js, pinned
via an import map); every other effect makes no network calls at all.
For coding agents
If you are an LLM or coding agent, start with
skill.md or
AGENTS.md — they explain how to grab an
effect and what attribution to keep. Machine-readable indexes live at
llms.txt,
sitemap.md and
sitemap.xml, and every page has a Markdown
mirror at the same path with a .md suffix. Unfamiliar terms are
defined in the glossary.