Pulse Shader

"use client"

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>
    ),
  }
)

export function PulseShaderDemo() {
  return (
    <div className="h-auto max-h-[400px] w-full overflow-hidden rounded-lg">
      <PulseShaderScene imageSrc="https://cdn.badtz-ui.com/images/shaders/aurora-borealis-image.webp" />
    </div>
  )
}

Installation

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

Usage

Copyimport 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>
    ),
  },
);

Copy<div className="w-full max-w-[620px] h-auto">
  <PulseShaderScene imageSrc="/images/shaders/aurora-borealis-image.webp" />
</div>

Props

pulse-shader-scene props.

Credits & 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 GLSL shader used in this component was created by @stegu

@stegu

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

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

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.