Animação

Focus Lens

Uma forma delineada que permanece suave e fora de foco em todos os lugares, exceto em um pequeno círculo que segue o ponteiro, onde fica nítido.

Como usar Focus Lens

Uma forma delineada que permanece suave e fora de foco em todos os lugares, exceto em um pequeno círculo que segue o ponteiro, onde fica nítido.

Teste a prévia com o mouse e o teclado. Verifique o foco visível e o layout em telas estreitas na sua página. Informe o número ou o identificador do componente ao seu agente de programação.

Propriedades: shape, lensSize, lensSoftness, strokeWeight, accent

Quais frameworks estão disponíveis?

O catálogo inclui estas versões: react, vue, svelte, astro, html. A prévia desta página usa React.

Como acessar a implementação?

O código, as versões e os comandos de instalação estão disponíveis no painel acima.

Conecte seu agente

Componentes relacionados

1697Focus in revealAnimaçãoUma revelação que deixa o conteúdo fora de foco e o deixa mais nítido à medida que entra na visualização, com um atraso opcional por item para uma pilha de linhas.

1669Blur revealAnimaçãoUm wrapper que mantém seu filho fora de foco e ligeiramente deslocado até que ele entre pela primeira vez na janela de visualização e, em seguida, resolva o desfoque e feche a lacuna em um movimento.

2127Compass bar gridAnimaçãoUma grade de barras curtas que giram para apontar para o ponteiro, de modo que o campo pareça uma limalha de ferro encontrando um ímã.

2135Crackling border frameAnimaçãoUma moldura arredondada cujo contorno é redesenhado em cada moldura como um arco de luz trêmulo, com um brilho constante abaixo e conteúdo perfeitamente imóvel na parte superior.

1771Drag tile trackAnimaçãoUm ladrilho que você pode jogar em torno de uma pista delimitada que se inclina para o arrasto, resiste além das bordas e pára com impulso.

2159Gooey blob fieldAnimaçãoUm campo de bolhas suaves que orbitam caminhos semeados e se fundem na aproximação, com uma bolha extra que segue o ponteiro.