# 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
- openclaw-ascii-cloud: A coral ASCII-art field of concentric arcs shimmers behind the OpenClaw hero banner while a bright wave radiates outward along the arcs — monospace glyphs reading as horizontal wavy lines fading in from the top, behind a bold heading. — seen on https://openclaw.ai/ — /effects/openclaw-ascii-cloud.html
- testerarmy-fireflies: A Bayer-dithered glow rising from the bottom of the hero, broken into thousands of 2px dots that scatter away from the cursor, spring back home, and occasionally drift up off the top like fireflies. — seen on https://tester.army/e2e — /effects/testerarmy-fireflies.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.