Canvas Reveal Effect
A dot background that expands on hover, as seen on Clerk's website
Sheetal is Nisha
Nisha is Munni
Munni is Aditi
Installation
Run the following command
npx shadcn@latest add https://ui.aceternity.com/registry/canvas-reveal-effect.jsonSection
With insomnia, nothing's real. Everything is far away. Everything is a copy, of a copy, of a copy
Static
I'm static and I know it.
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
With the best in class components and templates, stand out from the crowd and get more attention to your website. Trusted by founders and entrepreneurs from all over the world.
Manu is the man! He is the best front-end developer I have worked with.
He took the requirements and quite literally ran with them. We are super happy with the result and product we go...
John Shahawy
Founder at Rogue and Moonbeam