```jsx import { Particles } from "@/components/ui/particles"; export function Hero() { const particlesColor = "#8b5cf6"; const customParticleOptions = { particles: { size: { value: { min: 0.5, max: 1, }, }, move: { quantity: 1000, enable: true, speed: { min: 0.2, max: 0.5, }, direction: "none", random: true, straight: false, outModes: { default: "out", }, }, shadow: { enable: true, color: particlesColor, blur: 5, offset: { x: 0, y: 0, }, }, glow: { enable: true, color: particlesColor, distance: 10, size: 2, }, }, interactivity: { detectOn: "canvas", events: { onHover: { enable: false, }, }, }, }; return (

Announcing our next.{" "}

Streamline Your Email Management Effortlessly

Centralize your messages, automate tasks, and collaborate seamlessly with an intuitive platform designed to boost your productivity.

Get started Learn more{" "}

); } ``` ```tsx import { Particles } from "@/components/ui/particles"; export function Hero() { const particlesColor = "#8b5cf6"; const customParticleOptions = { particles: { size: { value: { min: 0.5, max: 1, }, }, move: { quantity: 1000, enable: true, speed: { min: 0.2, max: 0.5, }, direction: "none", random: true, straight: false, outModes: { default: "out", }, }, shadow: { enable: true, color: particlesColor, blur: 5, offset: { x: 0, y: 0, }, }, glow: { enable: true, color: particlesColor, distance: 10, size: 2, }, }, interactivity: { detectOn: "canvas", events: { onHover: { enable: false, }, }, }, }; return (

Announcing our next.{" "}

Streamline Your Email Management Effortlessly

Centralize your messages, automate tasks, and collaborate seamlessly with an intuitive platform designed to boost your productivity.

Get started Learn more{" "}

); } ``` ## Installation ### Install dependencies ```bash npm install @tsparticles/react @tsparticles/engine @tsparticles/slim ``` ### Copy the Star Hero component Copy the star-hero component from the preview, place your images, and adjust the imports if needed. ### (Optional) Add a basic header to your page Install a header on your page to complement this hero basic-header