Pular para o conteúdo
Smart UIVATSE interface system
VATSE.DEV
← Catálogopointer · stable

Efeitos de ponteiro

Resposta visual a ponteiro e foco sem depender exclusivamente de hover. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.

QUANDO USAR

Use Efeitos de ponteiro quando a interface precisar de resposta visual a ponteiro e foco sem depender exclusivamente de hover.

QUANDO NÃO USAR

Evite a família quando uma composição semântica mais simples comunicar a mesma ação com menos carga visual.

TECLADO

A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

RESPONSIVO

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Ver prévias
CONTAINER · stable

Base

Resposta visual a ponteiro e foco sem depender exclusivamente de hover.

#
Link direto →
HTML e exemplo
<button class="sc-card sc-pointer-demo sc-pointer-2" type="button" data-pointer-demo="1"><span>POINTER 01</span><strong>Spotlight</strong><small>Mova o ponteiro ou use o foco.</small></button>
Classes, JavaScript e API
sc-pointer-demosc-pointer-2

Inicialize cardPointerFX após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
cardPointerFX
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Usar HTML semântico e foco visível.
  • Fornecer rótulo acessível quando não houver texto visível.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Magnetic

Magnetic, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<button class="sc-card sc-pointer-demo sc-pointer-1" type="button" data-pointer-demo="1"><span>POINTER 01</span><strong>Magnetic</strong><small>Mova o ponteiro ou use o foco.</small></button>
Classes, JavaScript e API
sc-cardsc-pointer-demosc-pointer-1

Inicialize cardPointerFX após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
cardPointerFX
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Spotlight

Spotlight, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<button class="sc-card sc-pointer-demo sc-pointer-2" type="button" data-pointer-demo="2"><span>POINTER 02</span><strong>Spotlight</strong><small>Mova o ponteiro ou use o foco.</small></button>
Classes, JavaScript e API
sc-cardsc-pointer-demosc-pointer-2

Inicialize cardPointerFX após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
cardPointerFX
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Tilt

Tilt, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<button class="sc-card sc-pointer-demo sc-pointer-3" type="button" data-pointer-demo="3"><span>POINTER 03</span><strong>Tilt</strong><small>Mova o ponteiro ou use o foco.</small></button>
Classes, JavaScript e API
sc-cardsc-pointer-demosc-pointer-3

Inicialize tilt após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
tilt
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Glow trail

Glow trail, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<button class="sc-card sc-pointer-demo sc-pointer-4" type="button" data-pointer-demo="4"><span>POINTER 04</span><strong>Glow trail</strong><small>Mova o ponteiro ou use o foco.</small></button>
Classes, JavaScript e API
sc-cardsc-pointer-demosc-pointer-4

Inicialize cardPointerFX após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
cardPointerFX
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Ripple

Ripple, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<button class="sc-card sc-pointer-demo sc-pointer-5" type="button" data-pointer-demo="5"><span>POINTER 05</span><strong>Ripple</strong><small>Mova o ponteiro ou use o foco.</small></button>
Classes, JavaScript e API
sc-cardsc-pointer-demosc-pointer-5

Inicialize ripple após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
ripple
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Cursor halo

Cursor halo, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<button class="sc-card sc-pointer-demo sc-pointer-6" type="button" data-pointer-demo="6"><span>POINTER 06</span><strong>Cursor halo</strong><small>Mova o ponteiro ou use o foco.</small></button>
Classes, JavaScript e API
sc-cardsc-pointer-demosc-pointer-6

Inicialize cardPointerFX após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
cardPointerFX
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Parallax

Parallax, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<button class="sc-card sc-pointer-demo sc-pointer-7" type="button" data-pointer-demo="7"><span>POINTER 07</span><strong>Parallax</strong><small>Mova o ponteiro ou use o foco.</small></button>
Classes, JavaScript e API
sc-cardsc-pointer-demosc-pointer-7

Inicialize cardPointerFX após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
cardPointerFX
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Reveal border

Reveal border, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<button class="sc-card sc-pointer-demo sc-pointer-8" type="button" data-pointer-demo="8"><span>POINTER 08</span><strong>Reveal border</strong><small>Mova o ponteiro ou use o foco.</small></button>
Classes, JavaScript e API
sc-cardsc-pointer-demosc-pointer-8

Inicialize cardPointerFX após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
cardPointerFX
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Follow gradient

Follow gradient, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<button class="sc-card sc-pointer-demo sc-pointer-9" type="button" data-pointer-demo="9"><span>POINTER 09</span><strong>Follow gradient</strong><small>Mova o ponteiro ou use o foco.</small></button>
Classes, JavaScript e API
sc-cardsc-pointer-demosc-pointer-9

Inicialize cardPointerFX após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
cardPointerFX
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Proximity scale

Proximity scale, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<button class="sc-card sc-pointer-demo sc-pointer-10" type="button" data-pointer-demo="10"><span>POINTER 10</span><strong>Proximity scale</strong><small>Mova o ponteiro ou use o foco.</small></button>
Classes, JavaScript e API
sc-cardsc-pointer-demosc-pointer-10

Inicialize cardPointerFX após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin
cardPointerFX
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Componentes relacionados

Spotlight →Tilt →Ripple →