Hero section with smooth bg Shader

Heroes 1.3K

About

Hero section with smooth Shader and data passing using props

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

Code

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

Usage.tsx

import { HeroSection } from "@/components/ui/hero-section-with-smooth-bg-shader";

const settings = {
  distortion: 1.2,
  speed: 0.8,
  colors: ["#ff6b6b", "#4ecdc4", "#45b7d1"],
};

export default function DemoOne(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return <HeroSection distortion={s.distortion} speed={s.speed} />;
}

/*
Usage examples:

// Basic usage with defaults
<HeroSection />

// Custom content
<HeroSection 
  title="Revolutionary AI Solutions for"
  highlightText="Modern Business"
  description="Streamline operations with cutting-edge AI technology"
  buttonText="Get Started"
  onButtonClick={() => console.log('Button clicked!')}
/>

// Custom colors and animation
<HeroSection 
  colors={s.colors}
  distortion={1.2}
  speed={0.8}
/>


*/