Componentes

headline

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

19 de 19

1530Hero signalSeçõesUm herói de pouso completo cujo título chega uma palavra por vez em finas linhas verticais que flutuam e carregam sinais curtos e iluminados para cima.

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.

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.

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.

2066Morphing HeadlineEfeitos de textoUm título que dissolve uma frase na seguinte, permitindo que as letras correspondentes deslizem para seu novo lugar enquanto o resto fica confuso e diminui ou aumenta.

2085Word swap loopEfeitos de textoUma frase com um espaço de palavra que percorre uma lista em um cronômetro, cada palavra deslizando para cima e para fora conforme a próxima surge em seu lugar.

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.

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.

2237Sparkling highlight textEfeitos de textoTexto em negrito com um punhado de pequenas estrelas de quatro pontas aparecendo e saindo em pontos aleatórios nas letras, cada uma crescendo, girando brevemente e depois desaparecendo para ser substituída em outro lugar.

2248Striped shadow headingEfeitos de textoUm título em negrito com um deslocamento de cópia duplicado atrás dele, preenchido com listras diagonais que ficam flutuando como uma longa sombra projetada.

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.

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.

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

2819Rotating Word SwapEfeitos de textoUma frase introdutória permanece fixa enquanto uma palavra final percorre uma lista, cada uma trocando caracteres deslizando para cima e para fora conforme a próxima palavra desliza para cima e para dentro.

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.

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.

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.

2831Typewriter sentence cycleEfeitos de textoUma máquina de escrever com cursor piscante digita uma frase por vez, pausa, apaga e passa para a próxima em um ciclo interminável.

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.

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.
Cascading Letter Reveal
Um 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.
Color Band Text Reveal
Uma 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.

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)