Interactive-Gradient-Background

Component 309

About

Interactive Graident Background with pointer movement

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

Code

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

Usage.tsx

import { InteractiveGradientBackground } from "@/components/ui/interactive-gradient-background";

export default function DemoOne() {
  return (
    <InteractiveGradientBackground intensity={1}>
      <div style={{ padding: '6rem 2rem', color: 'white', textAlign: 'center' }}>
        <h1 style={{ fontSize: '3rem', margin: 0 }}>Hello</h1>
        <p>Move your mouse.</p>
      </div>
    </InteractiveGradientBackground>
  );
}