About
bg shader Hero component
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Shader-Hero to your project and fits it to your theme.
Code
How Shader-Hero is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import BeautifulHero from "@/components/ui/shader-hero";
export default function DemoOne() {
return (
<div className="min-h-screen h-full w-full">
<BeautifulHero/>
</div>
);
}
Dependencies
More by Jessi
View all
Wireframe Dotted Globe
3.4K
3D Gallery Photography
3.3K
Animate Card Animation
2.4K
The Infinite Grid
1.9K
Hero Dithering Card
1.6K
Hero section with smooth bg Shader
1.3K
3D Image gallery
1.3K
Stacked Panels Cursor intereactive component
1.2K
More in Heroes
View all
SaaS Template
2.4K
Responsive Hero Banner
2K
Hero
1.2K
Centered Hero with Image Fan
931
Editorial Collage Hero
430
Glass Fold
212
Minimalist Hero Fashion
285
HeroSectionWithGradient
336
