Particles
Champ de particules flottantes qui derive doucement en arriere-plan. Installez Particles depuis le registre VLLNT UI avec la CLI shadcn.
Champ de particules flottantes qui derive doucement en arriere-plan. Fait partie de la famille utility dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Particles a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/particles.jsonSource
"use client";
import * as React from "react";
import { cn } from "../../lib/utils";
/** Props for {@link Particles}. */
export type ParticlesProps = React.ComponentPropsWithoutRef<"div"> & {
/** Count of drifting dots in the field. Defaults to `30`. */
count?: number;
};
type Particle = {
delay: number;
duration: number;
left: number;
size: number;
top: number;
};
function createParticles(count: number): Particle[] {
return Array.from({ length: count }, () => ({
delay: Math.random() * 4,
duration: 4 + Math.random() * 6,
left: Math.random() * 100,
size: 2 + Math.random() * 3,
top: Math.random() * 100,
}));
}
/**
* Decorative field of dots drifting upward at staggered speeds.
*
* Respects `prefers-reduced-motion`: the dots hold still.
*
* @example
* ```tsx
* <Particles count={40} />
* ```
*/
export const Particles = ({
className,
count = 30,
ref,
...props
}: ParticlesProps & { ref?: React.Ref<HTMLDivElement> }) => {
const [particles] = React.useState(() => createParticles(count));
return (
<div
aria-hidden="true"
className={cn(
"pointer-events-none absolute inset-0 overflow-hidden",
className,
)}
ref={ref}
{...props}
>
{particles.map((particle, index) => (
<span
className="absolute rounded-full bg-foreground/30 motion-reduce:animate-none"
key={index}
style={{
animation: `vllnt-particle-float ${particle.duration}s linear infinite`,
animationDelay: `${particle.delay}s`,
height: `${particle.size}px`,
left: `${particle.left}%`,
top: `${particle.top}%`,
width: `${particle.size}px`,
}}
/>
))}
</div>
);
};
Particles.displayName = "Particles";
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.