28 lines
1.4 KiB
JSON
28 lines
1.4 KiB
JSON
{
|
|
"name": "Sparkles",
|
|
"description": "Interactive particle effect background with animated sparkle particles.",
|
|
"details": "Use for adding subtle, magical sparkle effects to backgrounds. Features particle system powered by @tsparticles with configurable size, speed, density, and color. Particles twinkle with animated opacity and can be clicked to spawn more particles. Automatically resolves CSS variable colors to work with theme system. Default settings: minSize 0.5, maxSize 1, speed 4, particleDensity 100, color var(--color-primary-cta). Fades in smoothly on load. Perfect for hero sections, landing pages, or any area needing a touch of magic and interactivity.",
|
|
"constraints": {},
|
|
"propsSchema": {
|
|
"id?": "string",
|
|
"className?": "string",
|
|
"background?": "string - Default: 'transparent'",
|
|
"particleSize?": "number - Deprecated, use minSize/maxSize instead",
|
|
"minSize?": "number - Minimum particle size. Default: 0.5",
|
|
"maxSize?": "number - Maximum particle size. Default: 1",
|
|
"speed?": "number - Animation speed. Default: 4",
|
|
"particleColor?": "string - Particle color, supports CSS variables. Default: 'var(--color-primary-cta)'",
|
|
"particleDensity?": "number - Number of particles. Default: 100"
|
|
},
|
|
"usageExample": "<Sparkles />",
|
|
"do": [
|
|
"Use for general use"
|
|
],
|
|
"dont": [],
|
|
"editRules": {
|
|
"textOnly": true,
|
|
"layoutLocked": true,
|
|
"styleLocked": true
|
|
}
|
|
}
|