25 lines
1.3 KiB
JSON
25 lines
1.3 KiB
JSON
{
|
|
"name": "CanvasRevealEffect",
|
|
"description": "Animated dot matrix reveal effect using WebGL shaders with customizable colors and animation speed.",
|
|
"details": "Use for dynamic, tech-focused backgrounds with animated dot patterns. Features WebGL shader-based dot matrix that reveals from center outward with randomized timing. Supports 1-3 colors that distribute across the dot pattern. Uses React Three Fiber for 3D rendering. Dots have varying opacities and animate with configurable speed. Optional gradient overlay available. Best for hero sections, landing pages, or areas needing high-impact visual interest. Requires @react-three/fiber and three packages.",
|
|
"constraints": {},
|
|
"propsSchema": {
|
|
"animationSpeed?": "number (default: 0.4)",
|
|
"opacities?": "number[] (default: [0.3, 0.3, 0.3, 0.5, 0.5, 0.5, 0.8, 0.8, 0.8, 1])",
|
|
"colors?": "number[][] - RGB arrays (default: [[0, 255, 255]])",
|
|
"containerClassName?": "string",
|
|
"dotSize?": "number (default: 3)",
|
|
"showGradient?": "boolean (default: true)"
|
|
},
|
|
"usageExample": "<CanvasRevealEffect animationSpeed={0.4} colors={[[0, 255, 255]]} dotSize={3} />",
|
|
"do": [
|
|
"Use for general use"
|
|
],
|
|
"dont": [],
|
|
"editRules": {
|
|
"textOnly": true,
|
|
"layoutLocked": true,
|
|
"styleLocked": true
|
|
}
|
|
}
|