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.
This service exceeded our expectations, since not only was the
development technically flawless, but Manu and his team also acted as
strategic partners by encouraging us to add ...
Georg Weingartner
CMO at Renderwork