Carregando…Carregando…Carregando…Carregando…A background text covered by an opaque layer, punched through by a cursor-following circular mask that grows on hover — adapted from Aceternity UI.
SVG Mask Effect — passe o mouse pra revelar o texto de baixo
O design system do Kikito, componível e reativo ao tema.
$ npx kikitocn add mask-container@/lib/utilsmotionimport { SVGMaskEffect } from "@/components/ui/cn/mask-container/SVGMaskEffect";
export function SVGMaskEffectExample() {
return (
<SVGMaskEffect>
SVG Mask Effect
</SVGMaskEffect>
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
children | React.ReactNode | — | Conteúdo mostrado pelo 'buraco' da máscara |
revealText | React.ReactNode | — | Conteúdo de fundo revelado por baixo |
size | number | 40 | Diâmetro (px) da máscara em repouso |
revealSize | number | 600 | Diâmetro (px) da máscara no hover |
className | string | — | Classes CSS extras |