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

Animações

Movimento de entrada, estado e ênfase com fallback para redução de movimento. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.

QUANDO USAR

Use Animações quando a interface precisar de movimento de entrada, estado e ênfase com fallback para redução de movimento.

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
WIDE · stable

Fade up

Fade up, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div style="display:flex; justify-content:flex-end; margin-bottom:10px;">
                        <button class="sc-btn sc-btn-glass sc-btn-sm" type="button" data-anim-replay="">Reproduzir</button>
                      </div>
                      <div class="sc-grid sc-cols-3 sc-gap-4">
                        <div class="sc-card sc-fade-up in-view">Fade up 1</div>
                        <div class="sc-card sc-fade-up in-view">Fade up 2</div>
                        <div class="sc-card sc-fade-up in-view">Fade up 3</div>
                      </div>
Classes, JavaScript e API
sc-btnsc-btn-glasssc-btn-smsc-gridsc-cols-3sc-gap-4sc-cardsc-fade-up

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

Plugin
scrollObserver
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • 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.

WIDE · stable

Fade in

Fade in, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div style="display:flex; justify-content:flex-end; margin-bottom:10px;">
                        <button class="sc-btn sc-btn-glass sc-btn-sm" type="button" data-anim-replay="">Reproduzir</button>
                      </div>
                      <div class="sc-grid sc-cols-3 sc-gap-4">
                        <div class="sc-card sc-fade-in in-view">Fade in 1</div>
                        <div class="sc-card sc-fade-in in-view">Fade in 2</div>
                        <div class="sc-card sc-fade-in in-view">Fade in 3</div>
                      </div>
Classes, JavaScript e API
sc-btnsc-btn-glasssc-btn-smsc-gridsc-cols-3sc-gap-4sc-cardsc-fade-in

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

Plugin
scrollObserver
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • 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.

WIDE · stable

Zoom in

Zoom in, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div style="display:flex; justify-content:flex-end; margin-bottom:10px;">
                        <button class="sc-btn sc-btn-glass sc-btn-sm" type="button" data-anim-replay="">Reproduzir</button>
                      </div>
                      <div class="sc-grid sc-cols-3 sc-gap-4">
                        <div class="sc-card sc-zoom-in in-view">Zoom 1</div>
                        <div class="sc-card sc-zoom-in in-view">Zoom 2</div>
                        <div class="sc-card sc-zoom-in in-view">Zoom 3</div>
                      </div>
Classes, JavaScript e API
sc-btnsc-btn-glasssc-btn-smsc-gridsc-cols-3sc-gap-4sc-cardsc-zoom-in

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

Plugin
scrollObserver
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • 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.

WIDE · stable

Slide left

Slide left, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div style="display:flex; justify-content:flex-end; margin-bottom:10px;">
                        <button class="sc-btn sc-btn-glass sc-btn-sm" type="button" data-anim-replay="">Reproduzir</button>
                      </div>
                      <div class="sc-grid sc-cols-3 sc-gap-4">
                        <div class="sc-card sc-slide-left in-view">Left 1</div>
                        <div class="sc-card sc-slide-left in-view">Left 2</div>
                        <div class="sc-card sc-slide-left in-view">Left 3</div>
                      </div>
Classes, JavaScript e API
sc-btnsc-btn-glasssc-btn-smsc-gridsc-cols-3sc-gap-4sc-cardsc-slide-left

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

Plugin
scrollObserver
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • 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.

WIDE · stable

Slide right

Slide right, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div style="display:flex; justify-content:flex-end; margin-bottom:10px;">
                        <button class="sc-btn sc-btn-glass sc-btn-sm" type="button" data-anim-replay="">Reproduzir</button>
                      </div>
                      <div class="sc-grid sc-cols-3 sc-gap-4">
                        <div class="sc-card sc-slide-right in-view">Right 1</div>
                        <div class="sc-card sc-slide-right in-view">Right 2</div>
                        <div class="sc-card sc-slide-right in-view">Right 3</div>
                      </div>
Classes, JavaScript e API
sc-btnsc-btn-glasssc-btn-smsc-gridsc-cols-3sc-gap-4sc-cardsc-slide-right

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

Plugin
scrollObserver
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • 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.

WIDE · stable

Stagger (grid)

Stagger (grid), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div style="display:flex; justify-content:flex-end; margin-bottom:10px;">
                        <button class="sc-btn sc-btn-glass sc-btn-sm" type="button" data-anim-replay="">Reproduzir</button>
                      </div>
                      <div class="sc-grid sc-cols-3 sc-gap-4 sc-grid-stagger">
                        <div class="sc-card">Stagger 1</div>
                        <div class="sc-card">Stagger 2</div>
                        <div class="sc-card">Stagger 3</div>
                        <div class="sc-card">Stagger 4</div>
                        <div class="sc-card">Stagger 5</div>
                        <div class="sc-card">Stagger 6</div>
                      </div>
Classes, JavaScript e API
sc-btnsc-btn-glasssc-btn-smsc-gridsc-cols-3sc-gap-4sc-grid-staggersc-card

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

Plugin
scrollObserver
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • 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.

WIDE · stable

Blur in (novo)

Blur in (novo), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div style="display:flex; justify-content:flex-end; margin-bottom:10px;">
                        <button class="sc-btn sc-btn-glass sc-btn-sm" type="button" data-anim-replay="">Reproduzir</button>
                      </div>
                      <div class="sc-grid sc-cols-3 sc-gap-4">
                        <div class="sc-card sc-blur-in in-view">Blur 1</div>
                        <div class="sc-card sc-blur-in in-view">Blur 2</div>
                        <div class="sc-card sc-blur-in in-view">Blur 3</div>
                      </div>
Classes, JavaScript e API
sc-btnsc-btn-glasssc-btn-smsc-gridsc-cols-3sc-gap-4sc-cardsc-blur-in

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

Plugin
scrollObserver
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • 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.

WIDE · stable

Pop in (novo)

Pop in (novo), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div style="display:flex; justify-content:flex-end; margin-bottom:10px;">
                        <button class="sc-btn sc-btn-glass sc-btn-sm" type="button" data-anim-replay="">Reproduzir</button>
                      </div>
                      <div class="sc-grid sc-cols-3 sc-gap-4">
                        <div class="sc-card sc-pop-in in-view">Pop 1</div>
                        <div class="sc-card sc-pop-in in-view">Pop 2</div>
                        <div class="sc-card sc-pop-in in-view">Pop 3</div>
                      </div>
Classes, JavaScript e API
sc-btnsc-btn-glasssc-btn-smsc-gridsc-cols-3sc-gap-4sc-cardsc-pop-in

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

Plugin
scrollObserver
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • 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.

WIDE · stable

Flip in (novo)

Flip in (novo), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div style="display:flex; justify-content:flex-end; margin-bottom:10px;">
                        <button class="sc-btn sc-btn-glass sc-btn-sm" type="button" data-anim-replay="">Reproduzir</button>
                      </div>
                      <div class="sc-grid sc-cols-3 sc-gap-4">
                        <div class="sc-card sc-flip-in in-view">Flip 1</div>
                        <div class="sc-card sc-flip-in in-view">Flip 2</div>
                        <div class="sc-card sc-flip-in in-view">Flip 3</div>
                      </div>
Classes, JavaScript e API
sc-btnsc-btn-glasssc-btn-smsc-gridsc-cols-3sc-gap-4sc-cardsc-flip-in

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

Plugin
scrollObserver
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • 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.

WIDE · stable

Bounce / Skew (novo)

Bounce / Skew (novo), preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div style="display:flex; justify-content:flex-end; margin-bottom:10px;">
                        <button class="sc-btn sc-btn-glass sc-btn-sm" type="button" data-anim-replay="">Reproduzir</button>
                      </div>
                      <div class="sc-grid sc-cols-3 sc-gap-4">
                        <div class="sc-card sc-bounce-in in-view">Bounce</div>
                        <div class="sc-card sc-skew-in in-view">Skew</div>
                        <div class="sc-card sc-bounce-in in-view">Bounce 2</div>
                      </div>
Classes, JavaScript e API
sc-btnsc-btn-glasssc-btn-smsc-gridsc-cols-3sc-gap-4sc-cardsc-bounce-insc-skew-in

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

Plugin
scrollObserver
Dependências
smart-ui.js
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • 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

Botões com microinteração →Scroll reveal →Efeitos visuais →Efeitos para cards →