# cool-web-fx

> A static gallery of cool web interaction effects, each recreated as a single
> self-contained, copy-pasteable HTML/CSS/JS file. Generated with Claude Code.
> Inspired by reactbits.dev.

Each effect's full source lives at /effects/<slug>.html and is also printed
verbatim in each demo page's HTML for easy scraping (no JS execution needed).
Every page has a Markdown mirror at the same path with a .md suffix, also
served for `Accept: text/markdown`.

## Read first

- [AGENTS.md](/AGENTS.md): entry point — what this is, how to grab an effect, attribution.
- [Agent skill file](/skill.md): the long-form version of the same.
- [Glossary](/glossary.md): terms used in the technique writeups.
- [Site map](/sitemap.md): every page, grouped. Machine-readable at /sitemap.xml.

## Effects

<!-- a14y:begin effects — generated by scripts/sync-agent-docs.mjs -->
- cyber-canvas: A matrix field of monospace glyphs that ripple and rainbow as invisible circular waves wash outward across the header. — seen on https://chatgpt.com/cyber — /effects/cyber-canvas.html
- meshy-grid: A skewed white grid blooms out of a lime light haze while pale dust motes drift and twinkle across the band, behind a bold heading and a flowing gradient CTA. — seen on https://www.meshy.ai/ — /effects/meshy-grid.html
- midjourney-home: A wall of real Midjourney prompts swirled into a slow CRT vortex with the wordmark fading up at its eye. — seen on https://www.midjourney.com/home — /effects/midjourney-home.html
- sneakers-text: Characters scramble through random glyphs then snap left-to-right into readable text — like a cipher decode from the movie Sneakers. — seen on https://infisical.com/ — /effects/sneakers-text.html
- electron-lines: Bright electron pulses race along circuit-board Bézier paths between glowing connected nodes. — seen on https://schematichq.com/ — /effects/electron-lines.html
- text-vortex: Luminous particles spiral out of a vortex and settle into glowing typographic forms, then dissolve and reform the next word. — seen on https://github.com/statico/cool-web-fx — /effects/text-vortex.html
- resend-cube: An all-black Rubik's cube with mixed matte/glossy finishes, slowly turning under studio light. — seen on https://resend.com/home — /effects/resend-cube.html
- resend-rainbow-button: A pill button whose thin gradient outline spins forever, with a blurred glow that blooms on hover. — seen on https://resend.com/home — /effects/resend-rainbow-button.html
- resend-conic-border: A card whose border is a bright arc that sweeps around the perimeter, painted with a rotating conic gradient. — seen on https://resend.com/home — /effects/resend-conic-border.html
- coderabbit-dither: A slowly tumbling extruded glyph, raymarched and then re-rendered as vertical ASCII-style bars whose width tracks brightness — with a headline in front. — seen on https://app.coderabbit.ai/login — /effects/coderabbit-dither.html
- nell-text-warp: A wall of text in tall draggable columns, crisp at the top and smeared into hot-pink weather at the bottom as a flow field resamples every character. — seen on https://nell.ai/ — /effects/nell-text-warp.html
<!-- a14y:end effects -->

## Optional

- [Gallery index](/index.md): the home page as Markdown.
- [Site map](/sitemap.md): every page, grouped by section.

Crawling is unrestricted — see /robots.txt. Source lives at
https://github.com/statico/cool-web-fx and is released under the Unlicense.