Canvas Reveal Effect
A dot background that expands on hover, as seen on Clerk's website
Installation
Run the following command
npx shadcn@latest add @aceternity/canvas-reveal-effectSection
Static
Props
| Component | Prop Name | Type | Default Value | Description |
|---|---|---|---|---|
| CanvasRevealEffect | animationSpeed | number | 0.4 | Animation speed, where 0.1 is slower and 1.0 is faster. |
| CanvasRevealEffect | opacities | number[] | [0.3, 0.3, 0.3, 0.5, 0.5, 0.5, 0.8, 0.8, 0.8, 1] | Array of opacities for the effect. |
| CanvasRevealEffect | colors | number[][] | [[0, 255, 255]] | Array of RGB color arrays to use in the effect. |
| CanvasRevealEffect | containerClassName | string | Additional class name(s) for the container div. | |
| CanvasRevealEffect | dotSize | number | Size of the dots in the effect. | |
| CanvasRevealEffect | showGradient | boolean | true | Whether to show the gradient overlay effect. |
| DotMatrix | colors | number[][] | [[0, 0, 0]] | Array of RGB color arrays for the dots. Default is black. |
| DotMatrix | opacities | number[] | [0.04, 0.04, 0.04, 0.04, 0.04, 0.08, 0.08, 0.08, 0.08, 0.14] | Array of opacities for the dots. |
| DotMatrix | totalSize | number | 4 | Total size of the effect area. |
| DotMatrix | dotSize | number | 2 | Size of the individual dots. |
| DotMatrix | shader | string | Custom shader code to apply to the dots. | |
| DotMatrix | center | ("x" | "y")[] | ["x", "y"] | Array indicating whether to center the effect on the x and/or y axis. |
| ShaderMaterial | source | string | GLSL source code for the shader. | |
| ShaderMaterial | uniforms | Uniforms | Uniform variables for the shader. | |
| ShaderMaterial | maxFps | number | 60 | Maximum frames per second for the shader animation. |
| Shader | source | string | GLSL source code for the shader. | |
| Shader | uniforms | Uniforms | Uniform variables for the shader. | |
| Shader | maxFps | number | 60 | Maximum frames per second for the shader animation. |
The inspiration for this effect is directly taken from Clerk's website.
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
70+ templates and component blocks combined
Ready to copy paste component blocks, save days of development time
