# webgl-components

Agent skill by Florian Kiem (https://floriankiem.com)

One shared context blitted into cheap 2D canvases, one rAF loop, IntersectionObserver gating, mipmaps, and real optics instead of painted ones. The failure modes are predictable and nearly all come from treating the widget like a demo.

Topics: 3D, Performance, Components
Last updated: 2026-08-20 (26 days ago)
Source: https://www.ui-skills.com/skills/flornkm/webgl-components
Repository: https://github.com/flornkm/skills

## Install

```bash
npx skills add https://github.com/flornkm/skills --skill webgl-components
```

## In the author's words

Build small, always-on WebGL visuals (identity avatars, ambient orbs, glass and iridescent surfaces, animated textures) that ship inside a normal web app UI without wrecking performance, accessibility, SSR, or layout. Use whenever a shader-, GLSL-, or canvas-driven decorative element is added to a product UI, especially one rendered many times per page or per list; when reviewing or optimizing one; or when debugging one that renders blurry, aliased, all-black, or paints over the surrounding UI on machines without hardware acceleration.

## Verification

- Source link: Resolved (HTTP 200) (pass)
- Repository: Resolves on GitHub (pass)
- Install command: Transcribed from UI Skills (pass)
- Maintenance: Last updated 26 days ago (pass)
- Attribution: Credited to Florian Kiem (pass)

Full page: https://stackskills.dev/library/webgl-components