glass-ripple

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

Quick start

npm install glass-ripple three

import { 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.

Features

• 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

Source-backed brand catalog

Bundled geometry comes directly from exact package versions:

The Iconify compatibility source is 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'));

AI Models (38)

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)

Creative AI (14)

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)

Dev Tools (52)

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)

Cloud & Infra (18)

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)

Social & Media (13)

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)

Enterprise (15)

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)

DevOps & Data (21)

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)

Finance (5)

stripe (Stripe), visa (Visa), mastercard (Mastercard), paypal (PayPal), airbnb (Airbnb)

Brands (10)

tesla (Tesla), nike (Nike), toyota (Toyota), mercedes (Mercedes-Benz), volkswagen (Volkswagen), mcdonalds (McDonald's), nintendoswitch (Nintendo Switch), uber (Uber), bmw (BMW), starbucks (Starbucks)

Shader pipeline

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"]

Configuration

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.

Runtime API

ready: Promise<void>

Resolves when the initial icon is available to the renderer.

setIcon(icon, transition?): Promise<void>

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');

setWave(opts): void

Updates any subset of WaveConfig.

ripple.setWave({ radius: 0.07, intensity: 30 });

setTint(hex): void

Updates the second halftone tint.

dispose(): void

Stops the animation loop, removes global listeners, and frees GPU resources.

Custom icons

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 },
});

Demo input and typography

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.

Development

pnpm install
pnpm typecheck
pnpm verify:catalog
pnpm verify:demo
pnpm verify:package
pnpm build:site

verify: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.

Browser requirements

Glass Ripple requires WebGL2, Intl.Segmenter, modern SVG image decoding, and ES modules. The browser suite covers Chromium, Firefox, and WebKit.

Contributing

See CONTRIBUTING.md before adding a source or preset. New bundled geometry must arrive through a reviewed, exact-version package import.

Credits

Built by Ziming Wang. The renderer uses Three.js. Bundled marks come from Lobe Icons, Simple Icons, 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.

License

MIT. Bundled third-party material is documented in THIRD_PARTY_NOTICES.md.