WebGL / Shaders / GPU
Real fragment-shader and canvas pipelines rendered into your page.
A WebGL + Motion system that runs many effects on ONE shared canvas.
- fluid-distortion — fluid warps under the cursor
- liquid-media — image/video that ripples on hover
- sphere / orbit / spiral-gallery — 3D image galleries
- webgl-provider — one canvas for the whole app
bunx shadcn add @atelier/<item>
Apple 'Liquid Glass' done properly: WebGL edge refraction + pointer-driven springs over Base UI.
- liquid-surface — the base glass material (rim light, refraction)
- liquid-button — WebGL rim light with jelly press spring
- glass-dock — magnifying glass dock
bunx shadcn add @liquefy-ui/<item>
Interfaces that move: GPU prism lens, ASCII field, real physics metaphors.
- prism-glass — GPU-accelerated refractive lens for images
- ascii-field — glyph field that scrambles around the cursor
- ferrofluid-nav — nav pill that stretches like ferrofluid
- magnetic-field — iron filings aligning to a dipole
bunx shadcn add @morphiq/<item>
Creative HTML-in-canvas effects for React/Vue/Svelte/vanilla, with WebGPU variants.
- asciify — redraws your page as live ASCII around the cursor
- cloth — hangs your live HTML on rippling fabric
- blaze — fire sparks, smoke, heat distortion on your page edge
- bubble — cursor droplet made of blending metaballs
bunx shadcn add @canvas-ui/<item>
Tiny hidden gem: WebGL fluid + dither effects with React and Svelte variants. Zero deps.
- ascii-fluid — mouse-trail WebGL fluid quantized to ASCII
- dithered-404 — fireball cursor scorches the glyph into embers
- folio — whole page leans back in perspective while scrolling
bunx shadcn add @23rd/<item>
Motion components incl. persistent WebGL shader transitions between content.
- aperture-blur-transition — cinematic WebGL content swap
- chroma-blur-transition — soft chromatic shader swap
- header-4 — rauno.me-style interactive 3D grid hero
bunx shadcn add @smoothui/<item>
Shaders, motion and charts shipped as editable source.
- dither — ordered dither shader background
- grainient — grainy animated gradient
- light-rays — volumetric ray overlay
bunx shadcn add @honestui/<item>
Landing-page comps with a real WebGL plasma shader and magnetic particles.
- plasma — mesmerizing WebGL plasma background
- aurora-glass — glass tile w/ ripples + chromatic spread
- magnetize-button — magnetic particle-attraction button
bunx shadcn add @gammaui/<item>
Playful + high-utility: shader backdrops, displacement crossings, canvas viewers.
- shader-surface — four shader backdrops themed from your tokens
- displacement-image — two images pushing pixels through shared noise
- aurora-field — drifting gradient from your theme colors
bunx shadcn add @mischief/<item>
The big one: animated/WebGL components in JS/TS × CSS/Tailwind variants.
- MetallicPaint — liquid metallic paint shader on SVGs
- MetaBalls — implicit-surface blob merging
- GlowCursor — shader-powered light trail cursor
- ElectricBorder — jittery animated energy border
bunx shadcn add @react-bits/<item>