Shader Animation

Heroes 3.7K

About

The page will now show the beautiful animated ripple effect that fills the entire screen with the mesmerizing concentric circles and color gradients from your original Three.js shader code.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Shader Animation to your project and fits it to your theme.

Code

How Shader Animation is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ShaderAnimation } from "@/components/ui/shader-animation";

export default function DemoOne() {
  return (
    <div className="relative flex h-[650px] w-full flex-col items-center justify-center overflow-hidden rounded-xl border bg-blue-700">
      <ShaderAnimation/>
      <span className="absolute pointer-events-none z-10 text-center text-7xl leading-none font-semibold tracking-tighter whitespace-pre-wrap text-white">
        Shader Animation
      </span>
    </div>
  )
}