Warp Gradient

Heroes 48

About

A slow, liquid field of blended colors driven by a single WebGL2 shader, used as a decorative animated background behind content.

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

Code

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

Usage.tsx

"use client";

import WarpGradient from "@/components/ui/warp-gradient";

export default function WarpGradientDemo() {
  return (
    <div className="relative isolate h-screen w-full overflow-hidden">
      <WarpGradient preset="tide" grain={0.25} />
      <div className="absolute inset-0 flex items-center justify-center">
        <h2 className="text-4xl font-semibold text-white">Into the blue</h2>
      </div>
    </div>
  );
}