Canvas Reveal Effect

A dot background that expands on hover, as seen on Clerk's website

Sheetal is Nisha

npx shadcn@latest add @aceternity/canvas-reveal-effect

With insomnia, nothing's real. Everything is far away. Everything is a copy, of a copy, of a copy

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.

Next.js 15, Tailwind CSS v4 and Motion for react powered templates

100+ templates and blocks combined

Ready to copy paste component blocks, save days of development time