# cool-web-fx — agent skill file

> **STOP — read this first if you are an LLM / coding agent.**
> This site is a gallery of small, self-contained web interaction effects. Each
> effect is ONE standalone HTML file with everything inline. To use an effect,
> copy its file verbatim — do not reconstruct it from a screenshot or from memory.

## What this project is

"Cool web interaction effects that Ian likes" — a static gallery of front-end
effects (canvas backgrounds, text animations, 3D CSS, animated SVG), each
recreated from scratch as copy-pasteable HTML/CSS/JS. Built with Astro, generated
with [Claude Code](https://claude.com/claude-code), inspired by
[reactbits.dev](https://reactbits.dev).

## How to grab an effect

Every effect lives at:

```
public/effects/<slug>.html
```

That file is **self-contained**: a complete `<!doctype html>` document with inline
`<style>` and `<script>`, no external fonts or images. It runs when opened directly
in a browser. The one exception is `resend-cube`, which loads Three.js as a pinned
ES module from a CDN via an `<script type="importmap">` (called out at the top of
that file); every other effect makes no network calls at all.

To embed one in your own page you can either:

1. Copy the whole file and serve it (or drop it in an `<iframe>`), or
2. Lift the `<style>` and `<script>` blocks and the small bit of markup into your
   own page (rename IDs if they clash).

The full source is also printed verbatim inside each demo page's HTML (in a
`<pre><code>` block), so you can scrape it from the rendered page without running
any JavaScript.

## Available effects

<!-- a14y:begin effects — generated by scripts/sync-agent-docs.mjs -->
| slug | what it is | seen on |
|------|------------|---------|
| `cyber-canvas` | A matrix field of monospace glyphs that ripple and rainbow as invisible circular waves wash outward across the header. | https://chatgpt.com/cyber |
| `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. | https://www.meshy.ai/ |
| `midjourney-home` | A wall of real Midjourney prompts swirled into a slow CRT vortex with the wordmark fading up at its eye. | https://www.midjourney.com/home |
| `sneakers-text` | Characters scramble through random glyphs then snap left-to-right into readable text — like a cipher decode from the movie Sneakers. | https://infisical.com/ |
| `electron-lines` | Bright electron pulses race along circuit-board Bézier paths between glowing connected nodes. | https://schematichq.com/ |
| `text-vortex` | Luminous particles spiral out of a vortex and settle into glowing typographic forms, then dissolve and reform the next word. | https://github.com/statico/cool-web-fx |
| `resend-cube` | An all-black Rubik's cube with mixed matte/glossy finishes, slowly turning under studio light. | https://resend.com/home |
| `resend-rainbow-button` | A pill button whose thin gradient outline spins forever, with a blurred glow that blooms on hover. | https://resend.com/home |
| `resend-conic-border` | A card whose border is a bright arc that sweeps around the perimeter, painted with a rotating conic gradient. | https://resend.com/home |
| `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. | https://app.coderabbit.ai/login |
| `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. | https://nell.ai/ |
| `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. | https://openclaw.ai/ |
| `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. | https://tester.army/e2e |
<!-- a14y:end effects -->

## Attribution expectation

Each effect is an **independent recreation** and credits where it was first seen.
If you reuse one, keep the credit to the original site/company (see the table and
each effect's demo page). No proprietary source was copied into this repo.

## Repo layout

```
public/effects/<slug>.html   # canonical, runnable, copy-paste source of each effect
src/demos/<slug>.json        # metadata: title, source, credit, blurb, technique writeup
src/pages/index.astro        # gallery index
src/pages/demos/[slug].astro # per-effect page (live iframe + code + writeup + credit)
public/thumbs/<slug>.png      # gallery thumbnails (generated by scripts/take-screenshots.mjs)
```

## Adding a new effect

1. Write `public/effects/<new-slug>.html` (self-contained, no external resources).
2. Add `src/demos/<new-slug>.json` (copy the schema from any existing one).
3. Run `npm run thumbs` to capture its thumbnail.

That's it — the index and demo page are generated automatically.