Carregando…Carregando…Carregando…Carregando…Card with a gradient reveal or a border spotlight that tracks the cursor inside it — adapted from cuicui.day. Absorbed by Following Pointer.
$ npx kikitocn add dynamic-cards@/hooks/cn/use-mouse@/lib/utilsimport { DynamicCards } from "@/components/ui/cn/dynamic-cards/DynamicCards";
export function DynamicCardsExample() {
return (
<DynamicCards title="Título" variant="gradient">
Dynamic Cards
</DynamicCards>
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
variant | 'gradient' | 'spotlight' | 'gradient' | Mecanismo do efeito |
title* | string | — | Título do card |
description | string | — | Texto descritivo |
withArrow | boolean | false | Ícone de seta no hover (variante gradient) |
circleSize | number | 400 | Diâmetro (px) da mancha de gradiente |
spotlightSize | number | 350 | Diâmetro (px) do spotlight na borda |
className | string | — | Classes CSS extras |
children | ReactNode | — | Conteúdo da área central (variante gradient) |
Dynamic Cards — gradiente ou spotlight seguindo o cursor
Mancha de cor sob máscara circular
Anel de luz na borda