Carregando…

Variable Font Cursor

Display

Per-letter variable font weight that interpolates toward the cursor as it gets close, with linear/exponential/gaussian falloff — adapted from cuicui.day.

Instalação via CLI

$ npx kikitocn add variable-font-cursor

Interno:

@/lib/utils@/hooks/cn/use-mousemotion

Exemplo de uso

Variable Font CursorExample.tsx

import { VariableFontCursor } from "@/components/ui/cn/variable-font-cursor/VariableFontCursor";

export function VariableFontCursorExample() {
  return (
    <VariableFontCursor falloff="linear">
      Variable Font Cursor
    </VariableFontCursor>
  );
}

Props

Prop	Tipo	Padrão	Descrição
`children*`	`string`	—	Texto renderizado letra a letra
`fromFontVariationSettings`	`string`	`"'wght' 400"`	font-variation-settings longe do cursor
`toFontVariationSettings`	`string`	`"'wght' 900"`	font-variation-settings no centro da zona de proximidade
`radiusPx`	`number`	`50`	Raio (px) da zona de proximidade
`falloff`	`'linear' \| 'exponential' \| 'gaussian'`	`'linear'`	Curva de interpolação conforme a distância
`containerRef`	`React.RefObject<HTMLElement \| null>`	—	Container cuja área conta pra proximidade (default: o próprio wrapper do texto)
`className`	`string`	—	Classes CSS extras
`style`	`React.CSSProperties`	—	Estilos inline extras

Voltar para Display

Carregando…