GitHub Stars
Docs
Pulse Shader

Pulse Shader

An interactive and customizable shader effect that creates a dynamic wave in response to hover interactions, perfect for adding engaging visual effects to backgrounds.

Installation

pnpm dlx shadcn@latest add https://badtz-ui.com/r/pulse-shader.json

Usage

import dynamic from "next/dynamic";
const PulseShaderScene = dynamic(
  () => import("@/components/ui/pulse-shader-scene"),
  {
    ssr: false,
    loading: () => (
      <div className="h-full w-full bg-zinc-100 dark:bg-neutral-950">
        {/* Skeleton loader */}
      </div>
    ),
  },
);
<div className="w-full max-w-[620px] h-auto">
  <PulseShaderScene imageSrc="/images/shaders/aurora-borealis-image.webp" />
</div>

You can use a placeholder while loading, to avoid potential issues, consider using dynamic imports.

The component is designed to automatically adjust based on the parent's width while maintaining the original image's aspect ratio. The height is always calculated dynamically.
By default, the shader is automatically disabled on mobile and replaced with a static image.

Props

pulse-shader-scene props.

PropTypeDefaultDescription
imageSrcstring(required)The source URL of the image used in the shader.
altstringundefinedAlternative text for the image (used when the fallback <img> is displayed on mobile).
marginFactornumber1.05Factor applied to the camera distance to ensure the shader is fully visible. Adjust this if parts of the shader are cut off.

Credits

  • The GLSL shader used in this component was created by @stegu

    • Resources

    Here are some of the key resources that helped me learn about shaders. If you're interested in exploring shaders further, these are great places to start!

  • Akella's repo
  • The Book Of Shaders
  • ThreeJS Journey

    • Version Requirements

    If you are using Next.js 14 or earlier, install these packages instead: @react-three/[email protected] @react-three/[email protected] gsap

    pnpm add @react-three/[email protected] @react-three/[email protected] gsap three

    Changelog

    2025-04-27

    • Fixed a critical THREE.WebGLRenderer: Context Lost error occurring on Next.js 15 projects.
    • Improved WebGL context handling for better stability across modern browsers.
    • Adjusted recommended package versions to ensure compatibility with Next.js 14.
    • Updated installation instructions to clearly differentiate requirements between Next.js 14 and 15 environments.
    Previous
    Next