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

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.