Shader 20 - Metaball Glass Shader

Pro

A full-screen shader background with glass rod refraction, two metaballs, configurable metaball and background colors.

Shadcn Shader 20 block

Component data

ID
shader20
Access
pro
Created
Nov 10, 2025
Type
block
Libraries
Radix UI, Base UI, React Aria

Shader 20 block design & features

Shader20 is a full-screen shader background built with shadcn/ui and React Three Fiber, combining glass rod refraction with metaballs. The shader uses a cylindrical refractive surface and samples two metaballs that orbit. metaballColor and backgroundColor props control the palette (default black on white). A timeMultiplier prop controls animation speed. Portrait orientation rotates the layout.

Two-color palette with glass and metaball shapes. The effect reads as liquid or organic blobs behind glass. The metaballs merge and separate. Continuous animation.

Minimal and organic. The metaball-plus-refraction combination is distinctive. Low complexity with metaball and background color props.