Components
Loading preview...
Bold hero section featuring a red gradient title and animated dot grid that dynamically follows cursor movement. Ideal for creative portfolios, landing pages, and modern minimal websites to engage users instantly.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/animated-heroimport {ParticleHero } from '@/components/ui/animated-hero'
// Demo Component
const ParticleHeroDemo = () => {
return (
<div className="min-h-screen w-full">
<ParticleHero
title="MINIMAL"
subtitle="Clean Design"
description="Less is more with this streamlined approach."
particleCount={10}
interactiveHint="Hover to Interact"
primaryButton={{
text: "Get Started",
onClick: () => console.log("Started!")
}}
/>
</div>
);
};
export default ParticleHeroDemo;