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 to-setup
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>Note
You can use a placeholder while loading
To avoid potential issues, consider using dynamic imports.
If you’d like, you can experiment with the Leva controls for fine-tuning.
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.
In the next update, I will pass most of the uniforms as props to allow for advanced customization.
Props
pulse-shader-scene props.
| Prop | Type | Default | Description |
|---|---|---|---|
| imageSrc | string | (required) | The source URL of the image used in the shader. |
| alt | string | undefined | Alternative text for the image (used when the fallback <img> is displayed on mobile). |
| marginFactor | number | 1.05 | Factor 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!
The Book Of Shaders