Shader 10 - Image Transition Shader

Pro

A full-screen shader background that cycles between two images with lens distortion and bubble transition, configurable transition and pause duration.
Shadcn Shader 10 block

Component data

ID
shader10
Access
pro
Created
Dec 17, 2025
Type
block
Libraries
Radix UI, Base UI, React Aria

Shader 10 block design & features

Shader10 is a full-screen shader background built with shadcn/ui and React Three Fiber, blending between two texture inputs. The shader applies a lens distortion and bubble-style transition based on a progress uniform. Progress is driven by transitionDuration and pauseDuration props. Fallback Unsplash images are used when no textures are provided.

Full-color image content. The transition uses a sphere-based distortion. The effect reads as a magnifying lens or bubble. Looping animation.

Content-driven: requires two image URLs. The lens distortion transition is distinctive. Moderate complexity with transition and pause props.