25 lines
1.3 KiB
JSON
25 lines
1.3 KiB
JSON
{
|
|
"name": "CellWaveBackground",
|
|
"description": "Animated vertical cell columns with GSAP creating sequential wave effects from bottom to top.",
|
|
"details": "Use for dynamic, rhythmic backgrounds with vertical cell wave animations. Features customizable columns and rows of cells that animate in a wave pattern from bottom to top. Each column animates with a staggered delay creating a cascading wave effect. Cells pulse through opacity keyframes (0 → 0.05 → 0.15 → 0.25 → 0.5 and back) with customizable duration. Uses GSAP timeline animations with infinite repeat. Cell color is customizable with box shadow for glow effect using color-mix for opacity. Default uses --color-background-accent theme variable. Perfect for modern, energetic hero sections or background accents. Requires gsap package.",
|
|
"constraints": {},
|
|
"propsSchema": {
|
|
"className?": "string",
|
|
"columns?": "number (default: 5)",
|
|
"rows?": "number (default: 24)",
|
|
"cellColor?": "string (default: 'var(--color-background-accent)')",
|
|
"duration?": "number (default: 0.25)",
|
|
"delay?": "number (default: 1.25)"
|
|
},
|
|
"usageExample": "<CellWaveBackground columns={5} rows={24} duration={0.25} delay={1.25} />",
|
|
"do": [
|
|
"Use for general use"
|
|
],
|
|
"dont": [],
|
|
"editRules": {
|
|
"textOnly": true,
|
|
"layoutLocked": true,
|
|
"styleLocked": true
|
|
}
|
|
}
|