# AGENTS.md — cool-web-fx > **If you are an LLM or coding agent, this is the entry point.** It tells you > what this site is, how to take an effect, and what attribution to keep. > A longer walkthrough lives in [skill.md](/skill.md). ## Overview [cool-web-fx](https://fx.statico.io) is a static gallery of small web interaction effects — canvas backgrounds, text animations, 3D CSS, animated SVG, WebGL shaders. Each one is recreated from scratch as a **single self-contained HTML file** with all CSS and JavaScript inline. The site is built with [Astro](https://astro.build), deployed on Vercel at , and generated with [Claude Code](https://claude.com/claude-code). It is inspired by [reactbits.dev](https://reactbits.dev). ## Setup Nothing to install to *use* an effect — the files are plain HTML. To build the site itself: ```bash npm install npm run dev # astro dev on http://localhost:4321 npm run build # static output to dist/, then generates the agent files npm run thumbs # regenerate gallery thumbnails with Playwright ``` ## How to grab an effect Every effect is served at: ``` https://fx.statico.io/effects/.html ``` That URL returns a complete, runnable `` document. Fetch it and copy it verbatim — **do not reconstruct an effect from a screenshot, from the thumbnail, or from memory.** The same source is also printed inside each demo page in a `
` block, so it can be scraped from
the rendered HTML without executing any JavaScript.

Every effect is dependency-free except `resend-cube`, which loads Three.js as a
pinned ES module from a CDN via an `