Lens

Display

Magnifying lens that zooms the content under the cursor (or a fixed spot) via a radial mask — adapted from Aceternity UI.

Lens — passe o mouse pra ampliar

Kikito CN

Instalação via CLI

$ npx kikitocn add lens

Interno:

@/lib/utilsmotion

Exemplo de uso

LensExample.tsx

import { Lens } from "@/components/ui/cn/lens/Lens";

export function LensExample() {
  return (
    <Lens>
      Lens
    </Lens>
  );
}

Props

Prop	Tipo	Padrão	Descrição
`children*`	`React.ReactNode`	—	Conteúdo ampliado pela lupa
`zoomFactor`	`number`	`1.5`	Fator de ampliação
`lensSize`	`number`	`170`	Diâmetro (px) da lupa
`isStatic`	`boolean`	`false`	Lupa fixa na `position` em vez de seguir o cursor
`position`	`{ x: number; y: number }`	`{ x: 200, y: 150 }`	Posição fixa (com isStatic)

Carregando…