āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/imskyleen/animate-ui/primitives/effects/particles ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
<Particles>
<div>Particles</div>
<ParticlesEffect />
</Particles>
<TypeTable type={{ children: { description: 'The children of the particles', type: 'React.ReactNode', required: true, }, animate: { description: 'Whether the particles are animated', type: 'boolean', required: false, default: 'true', }, asChild: { description: 'Change the default rendered element for the one passed as a child, merging their props and behavior.', type: 'boolean', required: false, default: 'false', }, inView: { description: 'Animate the element when it is in view', type: 'boolean', required: false, default: 'false', }, inViewOnce: { description: 'Animate the element only once when it is in view', type: 'boolean', required: false, default: 'true', }, inViewMargin: { description: 'The margin of the element to be in view', type: 'string', required: false, default: '0px', }, '...props': { description: 'The props of the particles', type: 'HTMLMotionProps<"div">', required: false, }, }} />
<TypeTable type={{ side: { description: 'The side of the particles effect', type: "'top' | 'bottom' | 'left' | 'right'", required: false, default: 'top', }, sideOffset: { description: 'The offset of the particles effect', type: 'number', required: false, default: '0', }, align: { description: 'The align of the particles effect', type: "'start' | 'center' | 'end'", required: false, default: 'center', }, alignOffset: { description: 'The offset of the particles effect', type: 'number', required: false, default: '0', }, count: { description: 'The count of the particles effect', type: 'number', required: false, default: '6', }, radius: { description: 'The radius of the particles effect', type: 'number', required: false, default: '30', }, spread: { description: 'The spread of the particles effect', type: 'number', required: false, default: '360', }, duration: { description: 'The duration of the particles effect', type: 'number', required: false, default: '0.8', }, holdDelay: { description: 'The delay between each particle of the particles effect', type: 'number', required: false, default: '0.05', }, delay: { description: 'The delay of the particles effect to start', type: 'number', required: false, default: '0', }, '...props': { description: 'The props of the particles effect', type: 'HTMLMotionProps<"div">', required: false, }, }} />
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā