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

Efeitos de texto

Movimento tipográfico para títulos, métricas e mensagens com leitura preservada. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.

QUANDO USAR

Use Efeitos de texto quando a interface precisar de movimento tipográfico para títulos, métricas e mensagens com leitura preservada.

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

O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

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

Movimento tipográfico para títulos, métricas e mensagens com leitura preservada.

#
Link direto →
HTML e exemplo
<div class="sc-text-demo sc-text-fx-2"><span>TEXT FX</span><strong>Design em movimento.</strong><small>Leitura preservada em qualquer modo.</small></div>
Classes, JavaScript e API
sc-text-demosc-text-fx-2

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
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.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

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

Typewriter

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

#
Link direto →
HTML e exemplo
<div class="sc-text-demo sc-text-fx-1" data-text-effect="1"><small>TEXT EFFECT 01</small><strong>Typewriter cria ritmo sem esconder a mensagem.</strong></div>
Classes, JavaScript e API
sc-text-demosc-text-fx-1

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
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.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

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

Word rotate

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

#
Link direto →
HTML e exemplo
<div class="sc-text-demo sc-text-fx-2" data-text-effect="2"><small>TEXT EFFECT 02</small><strong>Word rotate cria ritmo sem esconder a mensagem.</strong></div>
Classes, JavaScript e API
sc-text-demosc-text-fx-2

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
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.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

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 words

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

#
Link direto →
HTML e exemplo
<div class="sc-text-demo sc-text-fx-3" data-text-effect="3"><small>TEXT EFFECT 03</small><strong>Flip words cria ritmo sem esconder a mensagem.</strong></div>
Classes, JavaScript e API
sc-text-demosc-text-fx-3

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
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.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

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 reveal

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

#
Link direto →
HTML e exemplo
<div class="sc-text-demo sc-text-fx-4" data-text-effect="4"><small>TEXT EFFECT 04</small><strong>Blur reveal cria ritmo sem esconder a mensagem.</strong></div>
Classes, JavaScript e API
sc-text-demosc-text-fx-4

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
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.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

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

Text reveal

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

#
Link direto →
HTML e exemplo
<div class="sc-text-demo sc-text-fx-5" data-text-effect="5"><small>TEXT EFFECT 05</small><strong>Text reveal cria ritmo sem esconder a mensagem.</strong></div>
Classes, JavaScript e API
sc-text-demosc-text-fx-5

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
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.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

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

Gradient

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

#
Link direto →
HTML e exemplo
<div class="sc-text-demo sc-text-fx-6" data-text-effect="6"><small>TEXT EFFECT 06</small><strong>Gradient cria ritmo sem esconder a mensagem.</strong></div>
Classes, JavaScript e API
sc-text-demosc-text-fx-6

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
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.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

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

Shimmer

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

#
Link direto →
HTML e exemplo
<div class="sc-text-demo sc-text-fx-7" data-text-effect="7"><small>TEXT EFFECT 07</small><strong>Shimmer cria ritmo sem esconder a mensagem.</strong></div>
Classes, JavaScript e API
sc-text-demosc-text-fx-7

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
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.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

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

Scramble

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

#
Link direto →
HTML e exemplo
<div class="sc-text-demo sc-text-fx-8" data-text-effect="8"><small>TEXT EFFECT 08</small><strong>Scramble cria ritmo sem esconder a mensagem.</strong></div>
Classes, JavaScript e API
sc-text-demosc-text-fx-8

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
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.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

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

Encrypted reveal

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

#
Link direto →
HTML e exemplo
<div class="sc-text-demo sc-text-fx-9" data-text-effect="9"><small>TEXT EFFECT 09</small><strong>Encrypted reveal cria ritmo sem esconder a mensagem.</strong></div>
Classes, JavaScript e API
sc-text-demosc-text-fx-9

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
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.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

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

Split reveal

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

#
Link direto →
HTML e exemplo
<div class="sc-text-demo sc-text-fx-10" data-text-effect="10"><small>TEXT EFFECT 10</small><strong>Split reveal cria ritmo sem esconder a mensagem.</strong></div>
Classes, JavaScript e API
sc-text-demosc-text-fx-10

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
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.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

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

Mask reveal

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

#
Link direto →
HTML e exemplo
<div class="sc-text-demo sc-text-fx-11" data-text-effect="11"><small>TEXT EFFECT 11</small><strong>Mask reveal cria ritmo sem esconder a mensagem.</strong></div>
Classes, JavaScript e API
sc-text-demosc-text-fx-11

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
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.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

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

Highlight

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

#
Link direto →
HTML e exemplo
<div class="sc-text-demo sc-text-fx-12" data-text-effect="12"><small>TEXT EFFECT 12</small><strong>Highlight cria ritmo sem esconder a mensagem.</strong></div>
Classes, JavaScript e API
sc-text-demosc-text-fx-12

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
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.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

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

Number roll

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

#
Link direto →
HTML e exemplo
<div class="sc-text-demo sc-text-fx-13" data-text-effect="13"><small>TEXT EFFECT 13</small><strong>Number roll cria ritmo sem esconder a mensagem.</strong></div>
Classes, JavaScript e API
sc-text-demosc-text-fx-13

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
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.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

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

Counter

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

#
Link direto →
HTML e exemplo
<div class="sc-text-demo sc-text-fx-14" data-text-effect="14"><small>TEXT EFFECT 14</small><strong>Counter cria ritmo sem esconder a mensagem.</strong></div>
Classes, JavaScript e API
sc-text-demosc-text-fx-14

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
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.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

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

Marquee

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

#
Link direto →
HTML e exemplo
<div class="sc-text-demo sc-text-fx-15" data-text-effect="15"><small>TEXT EFFECT 15</small><strong>Marquee cria ritmo sem esconder a mensagem.</strong><span>SMART UI · CSS-FIRST · ACESSÍVEL · MODULAR · </span></div>
Classes, JavaScript e API
sc-text-demosc-text-fx-15

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
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.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

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