A reactive WebGL2 hero surface for AI products.
Glass Ripple combines a real-time wave simulation, refraction, halftone texture, and a CRT display treatment in one canvas. It includes 186 source-backed brand presets and a typed runtime API.
Live Demo · npm · GitHub · Report Bug
npm install glass-ripple threeimport { GlassRipple } from 'glass-ripple';
import { claude } from 'glass-ripple/icons';
const ripple = new GlassRipple({
canvas: document.getElementById('canvas') as HTMLCanvasElement,
icon: claude.icon,
});
await ripple.ready;ready resolves after an initial full-SVG icon has decoded. Single-path icons are ready immediately.
- 11 GPU passes covering wave simulation, normals, blur, refraction, halftone, chromatic aberration, CRT cells, and vignette
- Continuous pointer wake based on distance to the latest pointer segment
- 186 source-backed brand presets in 9 categories
- Runtime icon, tint, wave, and effect configuration
- Immediate icon selection for keyboard and reduced-motion paths
- Full TypeScript declarations
- One required runtime peer dependency: Three.js
Bundled geometry comes directly from exact package versions:
| Source | Version | Presets | License |
|---|---|---|---|
@lobehub/icons-static-svg |
1.94.0 | 124 | MIT |
simple-icons |
16.27.1 | 27 | CC0-1.0 |
@iconify-json/logos |
1.2.11 | 30 native-color marks | CC0-1.0 |
@iconify-icons/simple-icons |
1.2.74 | 5 compatibility exports | CC0-1.0 |
Iconify Logos supplies native multicolor geometry without bundling its full collection. The compatibility source remains limited to public exports that current Simple Icons no longer distributes. Every bundled preset carries library, packageName, packageVersion, slug, repository, and license metadata.
import {
claude,
openai,
allPresets,
presetsByCategory,
} from 'glass-ripple/icons';
console.log(claude.source);
console.log(allPresets.length);
console.log(presetsByCategory.get('Dev Tools'));claude (Claude), anthropic (Anthropic), openai (OpenAI), gemini (Gemini), google (Google), meta (Meta AI), mistral (Mistral), deepseek (DeepSeek), groq (Groq), cohere (Cohere), xai (xAI), qwen (Qwen), moonshot (Moonshot), kimi (Kimi), doubao (Doubao), zhipu (Zhipu), perplexity (Perplexity), minimax (MiniMax), baichuan (Baichuan), yi (Yi), stepfun (StepFun), spark (Spark), inflection (Inflection)
agentvoice (Agent Voice), agnesai (Agnes AI), anspire (Anspire), apertis (Apertis), bocha (Bocha), briaai (Bria AI), celestoai (Celesto AI), happyhorse (Happy Horse), hermesagent (Hermes Agent), moxt (Moxt), openhuman (OpenHuman), pi (Pi), poolside (Poolside), speedai (Speed AI), venice (Venice)
midjourney (Midjourney), stability (Stability AI), runway (Runway), suno (Suno), pika (Pika), elevenlabs (ElevenLabs), dalle (DALL-E), flux (Flux)
airjelly (AirJelly), lovart (Lovart), meshy (Meshy), nanobanana (Nano Banana), reve (Reve), slock (Slock)
github (GitHub), copilot (Copilot), cursor (Cursor), vercel (Vercel), notion (Notion), ollama (Ollama), huggingface (Hugging Face), langchain (LangChain), langgraph (LangGraph), llamaindex (LlamaIndex), crewai (CrewAI), mcp (Model Context Protocol), openrouter (OpenRouter), replicate (Replicate), colab (Google Colab), dify (Dify), windsurf (Windsurf), cline (Cline), openwebui (Open WebUI), comfyui (ComfyUI), n8n (n8n), replit (Replit), v0 (v0), lovable (Lovable), trae (Trae), aistudio (Google AI Studio)
ace (Ace), amp (Amp), antigravity (Antigravity), askverdict (AskVerdict), brave (Brave), browserless (Browserless), cherrystudio (Cherry Studio), claudecode (Claude Code), codebuddy (CodeBuddy), codex (Codex), devin (Devin), firecrawl (Firecrawl), geminicli (Gemini CLI), junie (Junie), kagi (Kagi), kilocode (Kilo Code), kiro (Kiro), obsidian (Obsidian), openclaw (OpenClaw), opencode (OpenCode), openhands (OpenHands), qoder (Qoder), roocode (Roo Code), searxng (SearXNG), sillytavern (SillyTavern), zencoder (Zencoder)
nvidia (NVIDIA), aws (AWS), bedrock (Amazon Bedrock), azure (Azure), googlecloud (Google Cloud), vertexai (Vertex AI), together (Together AI), fireworks (Fireworks AI), cerebras (Cerebras), sambanova (SambaNova), baseten (Baseten), cloudflare (Cloudflare), apple (Apple)
atlascloud (AtlasCloud), llmapi (LLM API), prunaai (Pruna AI), worldrouter (WorldRouter), xpay (xPay)
x (X), linkedin (LinkedIn), youtube (YouTube), tiktok (TikTok), spotify (Spotify), netflix (Netflix), discord (Discord), reddit (Reddit), snapchat (Snapchat), pinterest (Pinterest), twitch (Twitch), telegram (Telegram), whatsapp (WhatsApp)
microsoft (Microsoft), amazon (Amazon), adobe (Adobe), oracle (Oracle), salesforce (Salesforce), sap (SAP), atlassian (Atlassian), dell (Dell), hp (HP), shopify (Shopify), wordpress (WordPress), figma (Figma), slack (Slack), zoom (Zoom), dropbox (Dropbox)
docker (Docker), kubernetes (Kubernetes), mongodb (MongoDB), postgresql (PostgreSQL), redis (Redis), steam (Steam), amd (AMD), gitlab (GitLab), bitbucket (Bitbucket), supabase (Supabase), neon (Neon), bun (Bun), deno (Deno), railway (Railway), render (Render), digitalocean (DigitalOcean), sentry (Sentry), linear (Linear), grafana (Grafana), prometheus (Prometheus), datadog (Datadog)
stripe (Stripe), visa (Visa), mastercard (Mastercard), paypal (PayPal), airbnb (Airbnb)
tesla (Tesla), nike (Nike), toyota (Toyota), mercedes (Mercedes-Benz), volkswagen (Volkswagen), mcdonalds (McDonald's), nintendoswitch (Nintendo Switch), uber (Uber), bmw (BMW), starbucks (Starbucks)
graph LR
A["Base texture"] --> B["Wave simulation at quarter resolution"]
B --> C["Normal map"]
C --> D["Horizontal and vertical blur"]
D --> E["Refraction and lighting"]
E --> F["Two halftone passes"]
F --> G["Chromatic aberration"]
G --> H["CRT cells"]
H --> I["Vignette"]
I --> J["Screen"]
const ripple = new GlassRipple({
canvas: document.getElementById('canvas') as HTMLCanvasElement,
icon: claude.icon,
background: '#050505',
pixelRatio: 2,
wave: {
damping: 0.8,
speed: 1,
radius: 0.05,
intensity: 20,
momentum: 0.4,
steps: 1,
},
effects: {
halftone: [{ mix: 0.29 }, { mix: 0.38 }],
chromab: { amount: 0.2 },
retroScreen: { cellScale: 0.028, glow: 0.5 },
vignette: { intensity: 1 },
},
});
await ripple.ready;Set an effect to false to disable it.
Resolves when the initial icon is available to the renderer.
Decodes and swaps an icon. transition accepts 'crossfade' or 'immediate' and defaults to 'crossfade'. A newer call supersedes an older in-flight SVG decode, so rapid selection cannot commit stale icon state.
await ripple.setIcon(openai.icon);
await ripple.setIcon(openai.icon, 'immediate');Updates any subset of WaveConfig.
ripple.setWave({ radius: 0.07, intensity: 30 });Updates the second halftone tint.
Stops the animation loop, removes global listeners, and frees GPU resources.
Single-path input remains available for application-owned geometry:
await ripple.setIcon({
svgPath: 'M12 2L2 22h20Z',
color: '#ff6600',
viewBox: 24,
scale: 0.55,
position: { x: 0.5, y: 0.408 },
});Full SVG markup supports multiple paths and gradients:
await ripple.setIcon({
svg: '<svg viewBox="0 0 24 24">...</svg>',
scale: 0.55,
position: { x: 0.5, y: 0.408 },
});The bottom catalog keeps native horizontal scrolling. Vertical mouse-wheel input is normalized across pixel, line, and page delta modes while the pointer is over the rail. Events remain uncancelled at either edge. Previous and next controls provide an explicit mouse path, and focused brands scroll into view.
The demo hosts fixed IBM Plex font files locally. Pretext 0.0.8 measures each changing title against the exact loaded face before applying one of the supported title sizes. The verification fixture compares Pretext and semantic DOM geometry in Chromium, Firefox, and WebKit.
pnpm install
pnpm typecheck
pnpm verify:catalog
pnpm verify:demo
pnpm verify:package
pnpm build:siteverify:catalog imports the built package entry and checks source identity, SVG safety, uniqueness, and legacy exports. verify:demo drives real browsers through wheel units, edge behavior, buttons, keyboard focus, reduced motion, resize races, and text geometry. verify:package installs the packed tarball with its declared peer and checks runtime plus strict NodeNext TypeScript imports.
Glass Ripple requires WebGL2, Intl.Segmenter, modern SVG image decoding, and ES modules. The browser suite covers Chromium, Firefox, and WebKit.
See CONTRIBUTING.md before adding a source or preset. New bundled geometry must arrive through a reviewed, exact-version package import.
Built by Ziming Wang. The renderer uses Three.js. Bundled marks come from Lobe Icons, Simple Icons, Iconify Logos, and the declared Iconify Simple Icons compatibility snapshot. Demo typography uses IBM Plex and Pretext.
Brand names and logos remain trademarks of their respective owners.
MIT. Bundled third-party material is documented in THIRD_PARTY_NOTICES.md.