```jsx "use client"; import Particles, { initParticlesEngine } from "@tsparticles/react"; import { loadSlim } from "@tsparticles/slim"; import React, { useEffect, useMemo, useState } from "react"; import { useTheme } from "next-themes"; export function Hero({ accentColor = "#2563eb" }) { const { theme } = useTheme(); const [imageSrc, setImageSrc] = useState("/saas-light.png"); useEffect(() => { setImageSrc(theme === "dark" ? "/saas-dark.png" : "/saas-light.png"); }, [theme]); const particlesColor = theme === "dark" ? "#ffffff" : accentColor; 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{" "}

); } const StarBackground = ({ backgroundColor = "transparent", particlesColor = "#ffffff", particlesSpeed = 1.5, particlesNumber = 250, particleSizeMax = 1.5, particleSizeMin = 0.5, animEnable = true, animSpeed = 2, }) => { const [init, setInit] = useState(false); useEffect(() => { initParticlesEngine(async (engine) => { await loadSlim(engine); }).then(() => { setInit(true); }); }, []); const options = useMemo( () => ({ background: { color: { value: backgroundColor, }, }, fpsLimit: 120, fullScreen: { enable: false, zIndex: 0, }, particles: { color: { value: particlesColor, }, move: { direction: "top", enable: true, outModes: { default: "out", }, random: false, speed: particlesSpeed, straight: false, }, number: { density: { enable: true, }, value: particlesNumber, }, opacity: { value: 0.5, }, shape: { type: "circle", }, size: { value: { min: particleSizeMin, max: particleSizeMax }, anim: { enable: animEnable, speed: animSpeed, minimumValue: particleSizeMin, sync: false, }, }, }, detectRetina: true, }), [ backgroundColor, particlesColor, particlesSpeed, particlesNumber, particleSizeMax, particleSizeMin, animEnable, animSpeed, ] ); if (init) { return (

); } return null; }; ``` ```tsx "use client"; import Particles, { initParticlesEngine } from "@tsparticles/react"; import type { ISourceOptions } from "@tsparticles/engine"; import { loadSlim } from "@tsparticles/slim"; import React, { useEffect, useMemo, useState } from "react"; import { useTheme } from "next-themes"; interface HeroProps { accentColor?: string; } export function Hero({ accentColor = "#2563eb" }: HeroProps) { const { theme } = useTheme(); const [imageSrc, setImageSrc] = useState("/saas-light.png"); useEffect(() => { setImageSrc(theme === "dark" ? "/saas-dark.png" : "/saas-light.png"); }, [theme]); const particlesColor = theme === "dark" ? "#ffffff" : accentColor; 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{" "}

); } interface StarBackgroundProps { backgroundColor?: string; particlesColor?: string; particlesSpeed?: number; particlesNumber?: number; particleSizeMax?: number; particleSizeMin?: number; animEnable?: boolean; animSpeed?: number; } const StarBackground: React.FC = ({ backgroundColor = "transparent", particlesColor = "#ffffff", particlesSpeed = 1.5, particlesNumber = 250, particleSizeMax = 1.5, particleSizeMin = 0.5, animEnable = true, animSpeed = 2, }) => { const [init, setInit] = useState(false); useEffect(() => { initParticlesEngine(async (engine) => { await loadSlim(engine); }).then(() => { setInit(true); }); }, []); const options: ISourceOptions = useMemo( () => ({ background: { color: { value: backgroundColor, }, }, fpsLimit: 120, fullScreen: { enable: false, zIndex: 0, }, particles: { color: { value: particlesColor, }, move: { direction: "top", enable: true, outModes: { default: "out", }, random: false, speed: particlesSpeed, straight: false, }, number: { density: { enable: true, }, value: particlesNumber, }, opacity: { value: 0.5, }, shape: { type: "circle", }, size: { value: { min: particleSizeMin, max: particleSizeMax }, anim: { enable: animEnable, speed: animSpeed, minimumValue: particleSizeMin, sync: false, }, }, }, detectRetina: true, }), [ backgroundColor, particlesColor, particlesSpeed, particlesNumber, particleSizeMax, particleSizeMin, animEnable, animSpeed, ] ); if (init) { return (

); } return null; }; ``` ## Installation ### Install dependencies ```bash npm install @tsparticles/react @tsparticles/engine @tsparticles/slim next-themes ``` ### 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