Shader Animation

A real-time animated fragment shader (aurora-style) as a background layer. It depends only on three and React. Complete Initialization first, then copy the component from this repo and install the dependency below. For a full-screen preview, open the demo page.

Preview

Live (cropped)

Setup

Setup steps
Shader animation background — setup (do these in order)

1) Copy the component file into your project
   Target path:
   components/ui/animated-shader-background.tsx
   Copy the source from this repository's components/ui folder (same path).

2) Install the Three.js package
   npm install three

3) TypeScript types (only if needed)
   If the compiler or IDE reports missing types for the "three" import, run:
   npm install -D @types/three

4) Keep it a Client Component
   The file must start with "use client" (already there). Do not remove that line.
   You may import it from a Server Component page — Next.js will still ship it to the client.

Usage

Next.js
import AnimatedShaderBackground from "@/components/ui/animated-shader-background";

export default function Page() {
  return (
    <AnimatedShaderBackground>
      <p style={{ color: "#fff", padding: "2rem" }}>Content above the shader</p>
    </AnimatedShaderBackground>
  );
}