Componentes

Efeitos de texto

Palavras que aparecem, se embaralham, contam ou fluem.

Crie com um guia Conecte seu agente Explorar modelos de páginas

36 de 87

Carregando o índice completo de busca.

Aurora glow heading

1915Aurora glow headingEfeitos de textoUm título onde uma palavra carrega um preenchimento gradiente multicolorido e lento recortado em suas letras, como a luz de uma aurora brilhando atrás do tipo.

Binary Decode Text

1921Binary Decode TextEfeitos de textoCada letra pisca brevemente em um dígito binário brilhante antes de ser decodificada novamente em seu caractere real, percorrendo a palavra da esquerda para a direita.

Shimmer Wave Text

1930Shimmer Wave TextEfeitos de textoUma onda de brilho percorre uma linha de texto, iluminando cada caractere por vez antes de diminuir, depois faz uma breve pausa e repete.

Flowing gradient headline

1962Flowing gradient headlineEfeitos de textoUm título cujas letras são preenchidas por um gradiente móvel de dois tons, de modo que uma faixa brilhante flutua indefinidamente pelas palavras, com um toque suave opcional atrás.

Glare Pass Text

1967Glare Pass TextEfeitos de textoTexto de etiqueta silenciado que capta periodicamente uma faixa estreita de luz deslizando sobre ele, como um brilho refletido no vidro, e depois silencia antes de ser repetido.

Gradient shift text

1970Gradient shift textEfeitos de textoUma pílula arredondada cujo texto é preenchido com um gradiente de duas cores que percorre continuamente as letras lateralmente.

Gradient sweep heading

1971Gradient sweep headingEfeitos de textoUm título grande cujo preenchimento é uma faixa gradiente móvel que se move continuamente de uma borda a outra, dando ao texto um brilho brilhante e em constante mudança.

Greeting Cycle

1973Greeting CycleEfeitos de textoUma breve saudação ao lado de um ponto marcador passa uma vez pelos olás em diferentes idiomas, deslizando cada um deles no lugar enquanto o último desaparece.

Letter roll in

1991Letter roll inEfeitos de textoUma linha de texto onde cada caractere gira em um eixo horizontal, a face antiga rolando enquanto uma face idêntica aparece por baixo.

Color Band Text Reveal

2124Color Band Text RevealEfeitos de textoUma faixa suave de várias cores desliza uma vez através de uma linha de texto com um movimento de entrada e saída, tingindo cada letra à medida que ela passa antes que o texto assuma uma cor sólida.

Comic pop text

2125Comic pop textEfeitos de textoLetras robustas de quadrinhos com contorno grosso e preenchimento de pontos em meio-tom que aparecem no palco com uma entrada scale-and-rotate saltitante.

Cube flip letters

2136Cube flip lettersEfeitos de textoPassar o mouse sobre uma linha gira cada letra um quarto de volta em 3D, uma após a outra a partir de uma origem escolhida, revelando uma segunda face que carrega o mesmo glifo no acento.

Hand-drawn text marker

2164Hand-drawn text markerEfeitos de textoQuebra uma extensão de texto com uma anotação de marcador desenhada à mão, como um destaque, um sublinhado, um círculo ou uma caixa, que se desenha com um traço de esboço ligeiramente imperfeito.

Hover Decrypt Text

2168Hover Decrypt TextEfeitos de textoAs letras passam por caracteres aleatórios e são resolvidas da esquerda para a direita na palavra real durante cerca de um segundo, reproduzindo a decodificação sempre que o ponteiro entra no texto.

Hover weight ripple text

2169Hover weight ripple textEfeitos de textoTipo de tela ultraleve em que passar o mouse sobre uma letra a transforma em um peso pesado com um contorno fino, facilitando para fora para que seus vizinhos também engrossem um pouco.

Keystroke Text

2177Keystroke TextEfeitos de textoO texto aparece um caractere por vez, como se estivesse sendo digitado ao vivo, com um cursor piscando que continua após o término da digitação.

Layered shadow headline

2179Layered shadow headlineEfeitos de textoUm título curto e em negrito com uma cópia duplicada deslocada atrás dele, hachurada diagonalmente em uma cor de destaque, que flutua lentamente para dar às letras uma placa de sombra em movimento.

Looping typewriter text

2186Looping typewriter textEfeitos de textoUma linha de texto se digita caractere por caractere, retém, exclui até nada e digita a próxima frase de uma lista, circulando indefinidamente atrás de um sinal de intercalação piscante.

Ascii Art Heading

2301Ascii Art HeadingEfeitos de textoUma palavra grande é representada como um mosaico de caracteres monoespaçados cuja densidade imita o formato das letras, ondulando suavemente e inclinando-se em direção ao ponteiro.

Blur in word reveal

2307Blur in word revealEfeitos de textoAs palavras em uma frase passam de um borrão suave para um foco nítido, uma após a outra, à medida que a frase aparece.

Cipher reveal text

2317Cipher reveal textEfeitos de textoUm rótulo que começa embaralhado em símbolos aleatórios e é descriptografado em seu texto real ao visualizar, passar o mouse ou clicar.

Circular hover speed ring

2320Circular hover speed ringEfeitos de textoUma frase gira lentamente em torno de um círculo até que o ponteiro chegue, depois gira rapidamente e cresce ligeiramente antes de voltar quando o ponteiro sai.

Count Up Number

2327Count Up NumberEfeitos de textoUm grande número que salta de um valor inicial até um alvo quando ele aparece, ultrapassando um pouco antes de se estabilizar.

Curved Text Loop

2331Curved Text LoopEfeitos de textoUma linha de texto se repete indefinidamente ao longo de um caminho suave e arqueado, com rolagem automática para os lados e arrastável manualmente com impulso que inverte a direção.

Flip panel headline reveal

2355Flip panel headline revealEfeitos de textoUma manchete cujos caracteres ficam atrás de pequenos painéis articulados que descem um após o outro, como um quadro de chegadas, para revelar as letras abaixo.

Hover speed text ring

2367Hover speed text ringEfeitos de textoUma frase definida em um anel de letras voltadas para fora que gira suavemente em repouso e muda drasticamente de velocidade enquanto o ponteiro paira sobre ela.

Line by line headline reveal

2379Line by line headline revealEfeitos de textoUm título revela uma linha completa por vez: cada linha se abre da esquerda para a direita como uma cortina se levantando, enquanto uma marca colorida pousa em sua borda final e permanece acesa, deixando um rastro visível assim que a sequência se estabiliza.

Extruded layer text

2806Extruded layer textEfeitos de textoUma palavra renderizada como muitas camadas de cores empilhadas atrás de sua face, formando um bloco 3D extrudado que se inclina em direção ao ponteiro e flutua quando ocioso.

Fuzzy static text

2807Fuzzy static textEfeitos de textoUma palavra desenhada na tela e repintada em linhas de varredura trêmulas, zumbindo como estática de televisão e distorcendo-se ainda mais ao passar o mouse ou pressionar.

Flowing gradient text

2814Flowing gradient textEfeitos de textoUm gradiente multicolorido percorre continuamente o preenchimento de um título, opcionalmente emoldurado por uma borda gradiente correspondente.

Cascading Letter Reveal

2824Cascading Letter RevealEfeitos de textoUm título que se revela letra por letra com um aumento suave e desbotamento à medida que entra na visualização, e permanece estável quando concluído.

Character shuffle reveal

2825Character shuffle revealEfeitos de textoCada personagem rola por uma faixa de glifos aleatórios como um rolo de slot antes de pousar na letra real, revelada na rolagem com replay flutuante.

Elastic weight headline

2826Elastic weight headlineEfeitos de textoUma única linha de enormes letras maiúsculas cujo peso, largura e inclinação aumentam em torno de uma posição atrasada e facilitada do cursor.

Highlight focus swap

2827Highlight focus swapEfeitos de textoAs palavras em uma frase se revezam sendo nítidas enquanto o resto fica desfocado, com uma moldura de colchete brilhante deslizando para a caixa em qualquer palavra que esteja em foco.

Looping text ribbon

2828Looping text ribbonEfeitos de textoUma fita colorida carrega uma frase repetida ao longo de um caminho ondulado, circular ou arqueado, rolando indefinidamente como um selo ou distintivo.

Liquid warp headline

2835Liquid warp headlineEfeitos de textoUma manchete desenhada em uma tela que se curva e ondula como a luz na água, com a distorção se acumulando onde quer que o ponteiro passe.

Compare estes componentes

Escolha pelo comportamento e pelo layout; depois confira os frameworks disponíveis e os requisitos de acesso na página de cada componente.

Ascii Art Heading
Uma palavra grande é representada como um mosaico de caracteres monoespaçados cuja densidade imita o formato das letras, ondulando suavemente e inclinando-se em direção ao ponteiro.
Aurora glow heading
Um título onde uma palavra carrega um preenchimento gradiente multicolorido e lento recortado em suas letras, como a luz de uma aurora brilhando atrás do tipo.
Binary Decode Text
Cada letra pisca brevemente em um dígito binário brilhante antes de ser decodificada novamente em seu caractere real, percorrendo a palavra da esquerda para a direita.

Orientações de design

Abrir o índice completo

Etiquetas

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)admin (12)agent (12)alert (8)align (3)ambient (39)analytics (13)anchored (3)animated (82)animation (4)annotation (3)app shell (3)arc (4)arcs (3)area (12)area chart (4)arrow (32)audio (3)aurora (4)auth (11)authentication (12)auto height (4)autocomplete (4)avatar (10)avatars (3)axis (5)backdrop (18)backer (3)background (54)badge (21)band (6)banner (9)bar (16)bar chart (3)bars (6)beam (6)beams (5)bevel (12)bezel (3)billing (10)bin (3)blend (4)blob (4)blobs (3)bloom (10)blur (15)booking (9)bookmark (3)border (16)bounce (6)brackets (3)breadcrumb (4)breathing (3)broadcast (3)burst (7)busy (5)button (397)button group (5)buttons (4)calendar (32)call to action (11)callout (3)canvas (89)capsule (12)caption (8)card (35)cards (7)caret (5)carousel (11)cascade (3)category (3)cells (4)chain (3)characters (4)chart (59)chat (4)check (3)checkbox (13)checklist (7)checkmark (5)chevron (10)chip (22)chips (4)circle (9)circular (5)click (7)clip (9)clipboard (3)close (4)cloud (3)cluster (3)code (6)collapse (11)collapsible (6)collision (3)column (4)columns (3)combobox (4)command palette (3)commercial (10)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)controlled-state (18)copy (4)corner (6)corners (7)count (7)count-up (3)counter (18)crossfade (5)crosshair (6)cta (28)cue (4)cursor (26)curtain (7)curve (4)customer (13)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)data (13)date picker (16)date range (13)deck (3)delay (5)delete (8)depth (32)destructive (9)destructive-action (4)device mockup (3)diagonal (13)diagram (3)dial (5)dialog (17)digits (5)direction (5)disc (5)disclosure (8)dismiss (6)displacement (3)distortion (5)divider (4)dock (4)donut (7)dots (15)download (10)drag (21)draw (3)drawer (10)drift (17)dropdown (18)dropdown menu (3)duration (3)easing (4)echo (3)edge (7)edge light (3)editor (3)elastic (8)elevation (6)ellipsis (3)email (3)emboss (4)emphasis (3)empty state (3)entrance (14)error state (3)events (3)exit (3)expand (23)explorer (3)fade (9)falling (3)falloff (4)fan (6)faq (4)feed (3)feedback (12)field (6)fill (46)film (3)filter (13)finance (10)flat (6)flat shadow (3)flight (3)flip (10)floating panel (4)flood (14)flow (5)fluid (3)flyout (3)focus (19)focus ring (5)focus trap (6)folder (5)follow (11)form (47)form-control (12)formatting (3)frame (19)gallery (15)game (3)gap (4)gauge (5)gesture (6)ghost (7)glare (3)glitch (9)glow (39)glyph (7)gradient (38)grain (10)gravity (3)grid (35)group (8)guide (3)hairline (8)halftone (4)halo (15)hamburger (4)hard shadow (6)heading (8)headline (19)hero (11)hexagon (3)highlight (22)hinge (4)hint (12)hold (6)horizon (3)horizontal (4)hover (251)hover card (10)hover reveal (3)icon (121)icon-button (23)icons (4)identity (3)indeterminate (4)indicator (9)inertia (4)initials (3)ink (4)inline (5)input (20)input group (3)inset (11)interactive (50)invert (26)italic (3)key (11)keyboard (20)keyboard navigation (6)keycap (10)knob (4)kpi (5)label (14)label reveal (3)label swap (9)labels (7)lag (4)lattice (4)launch (3)layered (9)layers (3)layout (18)ledge (6)legend (9)lens (4)letters (10)lift (19)light (22)lightbox (4)like (4)line (11)line chart (4)lines (8)link (11)link preview (7)liquid (7)list (13)live (3)loader (9)loading (27)log (3)login (10)loop (42)magnet (5)magnetic (3)magnify (3)map (4)marker (3)markers (6)marquee (8)mask (9)matrix (4)media (4)menu (23)merge (3)mesh (5)message (4)metal (10)meter (5)metric (10)metrics (5)minimal (10)modal (19)monospace (12)monthly (12)morph (14)motion (3)motion tuning (3)moulded (6)multi-select (4)nav (3)navbar (3)navigation (21)nested (7)neutral (4)night (4)noise (16)notification (3)notifications (4)nudge (4)number (11)odometer (5)offset (7)on-off (4)onboarding (3)one time code (5)options (5)orb (4)orbit (13)otp (3)outline (63)outlined (4)overflow (7)overlay (24)overshoot (3)page (18)palette (3)panel (31)panels (6)paper plane (4)paragraph (3)parallax (15)particles (18)paste (3)path (4)pattern (9)percentage (4)perimeter (3)perspective (20)photo (5)physics (5)picker (3)pie (7)pill (83)pill switch (4)pin (3)pinned (3)pixel (3)placeholder (4)plane (5)plate (9)play (4)playful (7)pointer (65)polar (8)pop (4)popover (17)post card (3)power (3)press (77)pressed (6)pricing (3)primitive (4)print (4)product (6)profile (8)progress (27)proportion (4)providers (4)pulse (17)queue (3)quiet (5)radar (9)radial (8)radio (4)radio group (8)raised (3)ramp (5)ranking (3)rays (4)readout (4)record (4)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)retry (3)reveal (80)ribbon (6)rim (8)ring (25)rings (10)ripple (18)rise (3)roll (6)rotate (21)rotating text (4)rotation (6)round (5)rounded (3)row (11)rows (4)save (5)scale (20)scan (5)scatter (4)scheduler (3)scramble (5)screen (3)screenshot frame (3)scroll (38)scrub (5)search (8)section (4)sections (4)segmented (7)segmented control (12)select (5)selection (5)send (23)sequence (8)series (7)settings (21)shadow (28)shape (3)share (25)shared element (4)sheen (14)sheet (4)shell (3)shimmer (8)shine (5)shortcut (4)shuffle (3)shutter (5)sidebar (7)sign in (11)signal (8)signup (9)silhouette (3)sizes (4)skew (9)slab (6)slide (20)slider (10)sliding highlight (7)sliding indicator (3)snap (4)social (6)soft (6)space (5)spark (3)sparkline (3)spin (15)spinner (9)split (9)split-flap (3)split text (3)spotlight (7)spring (63)square (5)squash (4)stack (17)stacked (7)stagger (40)staircase (3)star (3)stars (6)stat (5)state (11)static (3)status (21)stepper (3)steps (3)sticker (4)sticky (4)streaks (3)strikethrough (3)stripes (5)stroke (6)submenu (9)submit (7)subtle (3)success (3)surface (5)svg (102)swap (12)sweep (40)swell (4)swipe (5)swirl (3)switch (16)tabs (22)tactile (26)tap (4)target (3)task (3)team (5)terminal (3)text (40)text button (3)text-effect (3)text field (4)text transition (3)textarea (4)texture (11)theme (3)theme toggle (4)thumbnail (4)ticker (5)tile (16)tiles (12)tilt (26)time (3)time range (3)time series (3)timeline (3)timer (3)timing (5)tint (5)toggle (65)toggle group (10)toolbar (25)tooltip (37)total (3)touch (3)trace (4)tracking (6)trail (20)transition (6)translucent (9)travel (6)tray (3)tree (3)trend (10)trigger (4)tunnel (4)twinkle (4)typewriter (9)typing (8)typography (18)underline (10)upload (5)uppercase (14)validation (5)value (3)values (4)variants (4)velocity (3)verification (8)video (4)viewport (6)voice (3)warp (6)wash (5)wave (13)waveform (3)waves (7)window (3)wipe (23)wireframe (3)wireless (3)wobble (6)word swap (3)words (3)workflow (18)workspace (36)wrapper (3)zoom (4)