Canvas Reveal Effect
Dot matrix canvas that reveals a colored pattern on hover with a radial animation.
Preview
Canvas Reveal Effect
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Feature cards that reveal content on interaction.
Why this component matters
Earn every pixel. Hidden content that reveals itself on hover rewards curiosity and keeps the interface clean.
Usage guidance
Use inside cards or bounded areas. Set dot size and color to match the content theme. The reveal should expose something meaningful, not just decoration.
Installation
bash
npx shadcn@latest add @aceternity/canvas-reveal-effectUsage
example.tsxtsx
import { CanvasRevealEffect } from "@/components/ui/canvas-reveal-effect";
export default function Example() {
return (
<CanvasRevealEffect>
{/* Your content here */}
</CanvasRevealEffect>
);
}Source
canvas-reveal-effect.tsx
components/ui/canvas-reveal-effect.tsx