Mouse-Interactive Glass Shader

Shader 3Free

A full-screen shader background with glass refraction, circular shapes, mouse-following interaction, and configurable color.

Shadcn UI Shader Block

Shader3 is a full-screen shader background built with Shadcn UI and React Three Fiber, featuring a glass-like refraction effect with circular shapes. The shader uses SDF circles, fresnel, and lambert lighting. Mouse position is passed as a uniform and influences the circle positions via a hash offset. A color prop controls the tint (default mint green).

Dark base with colored rim highlights on the circles. The refraction creates a glass or lens effect. Smooth mouse tracking with lerped interpolation.

Interactive and polished. The mouse-following refraction is distinctive among shader blocks. Moderate complexity with color and custom shader support.

Dependencies

PackageType
@react-three/fiberNPM
reactNPM
threeNPM