24 lines
1.4 KiB
JSON
24 lines
1.4 KiB
JSON
{
|
|
"name": "CanvasRevealBackground",
|
|
"description": "Animated WebGL dot matrix effect with ball-shaped radial gradient mask creating a spotlight from configurable position.",
|
|
"details": "Use for premium hero backgrounds with animated dot matrix effect. Features CanvasRevealEffect wrapped with CSS masks creating a ball/dome-shaped spotlight effect. Position prop allows center, left, or right placement. Center position uses combined radial and linear gradients with maskComposite intersect. Left/right positions use circular radial gradient from corners creating a peeking ball effect. Automatically reads --color-primary-cta CSS variable and converts hex to RGB for WebGL shader colors. Height is customizable (default: 30% of viewport). Perfect for hero sections where content appears below the animated effect. Requires @react-three/fiber and three packages.",
|
|
"constraints": {},
|
|
"propsSchema": {
|
|
"className?": "string",
|
|
"animationSpeed?": "number (default: 5)",
|
|
"dotSize?": "number (default: 3)",
|
|
"height?": "string (default: '30%')",
|
|
"position?": "'center' | 'left' | 'right' (default: 'center')"
|
|
},
|
|
"usageExample": "<CanvasRevealBackground animationSpeed={5} height=\"30%\" position=\"center\" />",
|
|
"do": [
|
|
"Use for general use"
|
|
],
|
|
"dont": [],
|
|
"editRules": {
|
|
"textOnly": true,
|
|
"layoutLocked": true,
|
|
"styleLocked": true
|
|
}
|
|
}
|