--- title: "Cool web interaction effects that Ian likes" description: "A gallery of cool web interaction effects, recreated as copy-pasteable HTML/CSS/JS. Generated with Claude Code. Inspired by reactbits.dev." canonical: "https://fx.statico.io/" doc_version: "0.1.0" last_updated: "2026-07-30" date_modified: "2026-07-30T22:29:45-07:00" source: "https://github.com/statico/cool-web-fx" license: "Unlicense" --- > Canonical HTML version: # Cool web interaction effects that Ian likes A growing gallery of web interaction effects, each 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. ## How to use an effect Fetch the effect file, copy it verbatim into your project, and keep the credit to the site where it was first seen. Every effect is dependency-free except `resend-cube`, which loads Three.js from a CDN via an import map. ## All effects - [Cyber Ambient Overlay](https://fx.statico.io/demos/cyber-canvas.md) — A matrix field of monospace glyphs that ripple and rainbow as invisible circular waves wash outward across the header. Seen on ChatGPT (https://chatgpt.com/cyber). Source: https://fx.statico.io/effects/cyber-canvas.html - [On-Command Grid Bloom](https://fx.statico.io/demos/meshy-grid.md) — 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 Meshy (https://www.meshy.ai/). Source: https://fx.statico.io/effects/meshy-grid.html - [Midjourney Prompt Vortex](https://fx.statico.io/demos/midjourney-home.md) — A wall of real Midjourney prompts swirled into a slow CRT vortex with the wordmark fading up at its eye. Seen on Midjourney (https://www.midjourney.com/home). Source: https://fx.statico.io/effects/midjourney-home.html - [Sneakers Text Decode](https://fx.statico.io/demos/sneakers-text.md) — Characters scramble through random glyphs then snap left-to-right into readable text — like a cipher decode from the movie Sneakers. Seen on Infisical (https://infisical.com/). Source: https://fx.statico.io/effects/sneakers-text.html - [Electron Pulse Lines](https://fx.statico.io/demos/electron-lines.md) — Bright electron pulses race along circuit-board Bézier paths between glowing connected nodes. Seen on Schematic & Portkey (https://schematichq.com/). Source: https://fx.statico.io/effects/electron-lines.html - [Particle Text Vortex](https://fx.statico.io/demos/text-vortex.md) — Luminous particles spiral out of a vortex and settle into glowing typographic forms, then dissolve and reform the next word. Seen on Original effect (https://github.com/statico/cool-web-fx). Source: https://fx.statico.io/effects/text-vortex.html - [Black Rubik's Cube](https://fx.statico.io/demos/resend-cube.md) — An all-black Rubik's cube with mixed matte/glossy finishes, slowly turning under studio light. Seen on Resend (https://resend.com/home). Source: https://fx.statico.io/effects/resend-cube.html - [Rotating Rainbow Border Button](https://fx.statico.io/demos/resend-rainbow-button.md) — A pill button whose thin gradient outline spins forever, with a blurred glow that blooms on hover. Seen on Resend (https://resend.com/home). Source: https://fx.statico.io/effects/resend-rainbow-button.html - [Conic Gradient Sweep Border](https://fx.statico.io/demos/resend-conic-border.md) — A card whose border is a bright arc that sweeps around the perimeter, painted with a rotating conic gradient. Seen on Resend (https://resend.com/home). Source: https://fx.statico.io/effects/resend-conic-border.html - [Vertical-Line Glyph Dither](https://fx.statico.io/demos/coderabbit-dither.md) — 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 CodeRabbit (https://app.coderabbit.ai/login). Source: https://fx.statico.io/effects/coderabbit-dither.html - [Warped Text Wall](https://fx.statico.io/demos/nell-text-warp.md) — 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 Nell (https://nell.ai/). Source: https://fx.statico.io/effects/nell-text-warp.html - [ASCII Cloud Banner](https://fx.statico.io/demos/openclaw-ascii-cloud.md) — 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 OpenClaw (https://openclaw.ai/). Source: https://fx.statico.io/effects/openclaw-ascii-cloud.html ## Sitemap - [All effects](https://fx.statico.io/index.md) — gallery index - [Site map](https://fx.statico.io/sitemap.md) — every page, grouped - [sitemap.xml](https://fx.statico.io/sitemap.xml) — machine-readable, with lastmod - [AGENTS.md](https://fx.statico.io/AGENTS.md) — how to grab and reuse an effect - [skill.md](https://fx.statico.io/skill.md) — full agent skill file - [llms.txt](https://fx.statico.io/llms.txt) — short index of every effect - [Glossary](https://fx.statico.io/glossary.md) — terminology used in the writeups