Componentes

texto

Explore prévias interativas, encontre os componentes ideais e incorpore componentes abertos ao seu projeto com o código-fonte incluído.

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

36 de 40

Carregando o índice completo de busca.

Scramble text

1539Scramble textEfeitos de textoTexto monoespaçado que pousa um caractere por vez a partir de glifos rolantes atrás de uma cabeça de escrita e se solta novamente onde quer que o ponteiro o toque.

Split text reveal

1543Split text revealEfeitos de textoUm título cujas palavras ou caracteres surgem de uma máscara de clipe, desfocados e coloridos, escalonados da esquerda para a direita na montagem e reproduzidos ao clicar.

Center out underline link

1929Center out underline linkBotõesUm link de navegação cujo sublinhado cresce do meio para ambas as extremidades ao passar o mouse e retrai para um ponto quando o ponteiro sai.

Fill sweep loading text

1959Fill sweep loading textMensagens de statusUma etiqueta de carregamento cujo contorno tênue fica sob uma cópia totalmente colorida que entra da esquerda, atinge toda a largura e drena de volta, repetindo-se enquanto algo é carregado.

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.

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.

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.

Marker highlight

1995Marker highlightEfeitos de textoUma frase com uma faixa marcadora que aparece atrás dela, da esquerda para a direita, quando a linha aparece pela primeira vez, deixando as palavras em um bloco colorido.

Shimmer sweep text

2036Shimmer sweep textEfeitos de textoUma linha de texto onde cada letra aumenta e diminui de brilho, enviando uma faixa de luz viajando ao longo da frase em um loop.

Split Reveal Hover Text

2048Split Reveal Hover TextEfeitos de textoO texto é dividido nas metades superior e inferior; ao passar o mouse, a metade superior desliza e desaparece enquanto a metade inferior desliza para cima para completar a palavra e inverte quando o ponteiro sai.

Sweeping status text

2060Sweeping status textEfeitos de textoUma grande palavra de status que muda em uma batida constante enquanto uma faixa brilhante percorre infinitamente as letras.

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.

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.

Staggered Reveal Text

2242Staggered Reveal TextEfeitos de textoUma frase aparece em partes escalonadas, divididas em palavras, caracteres ou linhas, usando um estilo de entrada escolhido, como esmaecimento, desfoque, deslizamento ou escala.

Twinkle highlight text

2260Twinkle highlight textEfeitos de textoTexto destacado em negrito com pequenas estrelas brilhantes de quatro pontas que aparecem e saem continuamente em posições aleatórias ao redor e sobre as letras.

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.

Hover duplicate text nav

2365Hover duplicate text navNavegaçãoUma lista de navegação vertical desliza cada rótulo para cima e para fora do topo ao passar o mouse, enquanto um rótulo duplicado desliza de baixo para ocupar seu lugar.

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.

Pointer scatter headline

2405Pointer scatter headlineEfeitos de textoUma manchete dividida em caracteres únicos que são empurrados para o lado e tombam conforme o ponteiro passa por eles e depois voltam à linha.

Reading highlight copy

2410Reading highlight copyEfeitos de textoUm parágrafo que se ilumina palavra por palavra conforme você o rola, deixando as palavras lidas brilhantes e as não lidas esmaecidas, de modo que a posição de rolagem também funciona como uma posição de leitura.

Scroll blur reveal text

2418Scroll blur reveal textEfeitos de textoUm bloco de texto que começa desfocado e deslocado, depois fica mais nítido, palavra por palavra ou letra por letra, na primeira vez que é exibido.

Typewriter caption

2457Typewriter captionEfeitos de textoUma legenda digita um caractere por vez em um ritmo constante, com um cursor de bloco sólido que fica piscando após a conclusão da linha.

Caret tail link

2508Caret tail linkBotõesUm link de texto silencioso com um pequeno colchete angular logo após a última letra, que desliza para fora e ganha um sublinhado ao passar o mouse.

Trailing arrows text button

2526Trailing arrows text buttonBotõesUm link de texto sem borda que amplia o espaçamento entre letras ao passar o mouse enquanto uma trilha de setas se espalha para a direita, cada uma mais distante e mais fraca que a anterior.

Opposing rule text button

2537Opposing rule text buttonBotõesUm botão de texto em letras maiúsculas sem borda delimitado por duas regras que aparecem de extremidades opostas ao passar o mouse ou focar e recuam por onde vieram.

Text field

2785Text fieldCampos de entradaUm campo de texto de linha única com uma borda suave, um anel de foco acentuado, um espaço reservado para silenciamento e um estado desativado adequado.

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.

Paper fold text

2809Paper fold textEfeitos de textoO texto se divide em caracteres, palavras ou linhas que se desdobram ao longo de uma borda de dobradiça escolhida com uma sombra vincada, escalonada ao longo da frase.

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.

Particle formation text

2816Particle formation textEfeitos de textoUma tela de pequenas partículas que se reúne na forma de uma palavra, flutua depois de formada e se espalha pelo ponteiro.

Sweeping shine text

2822Sweeping shine textEfeitos de textoTexto preenchido com um gradiente suave e uma faixa diagonal brilhante que se move para frente e para trás como um brilho de luz e pode congelar no lugar enquanto você passa o mouse.

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.

Outline draw text

2829Outline draw textEfeitos de textoAs letras exibidas traçam-se uma após a outra como contornos brilhantes e, em seguida, um preenchimento sólido desaparece atrás dos traços para finalizar a palavra.

Scroll dim text reveal

2838Scroll dim text revealRolagemUm parágrafo fica esmaecido e clareia palavra por palavra em sincronia com o progresso da rolagem, depois escurece novamente conforme você rola para trás.

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.

Blur in word reveal
As 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.
Caret tail link
Um link de texto silencioso com um pequeno colchete angular logo após a última letra, que desliza para fora e ganha um sublinhado ao passar o mouse.
Center out underline link
Um link de navegação cujo sublinhado cresce do meio para ambas as extremidades ao passar o mouse e retrai para um ponto quando o ponteiro sai.

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)