Componentes

stagger

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.

Masonry flow

1532Masonry flowLayoutUma parede de alvenaria que agrupa ladrilhos de alturas variadas em colunas, levanta cada um deles à medida que aparece e recoloca toda a grade quando a contagem de colunas muda.

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.

Share target swap button

1650Share target swap buttonBotõesUm botão de compartilhamento compacto que ocupa um espaço único e troca seu rótulo por uma linha escalonada de glifos de destino ao passar o mouse ou focar.

Blur reveal

1669Blur revealAnimaçãoUm wrapper que mantém seu filho fora de foco e ligeiramente deslocado até que ele entre pela primeira vez na janela de visualização e, em seguida, resolva o desfoque e feche a lacuna em um movimento.

Burst particle emitter

1672Burst particle emitterAnimaçãoEnvolve qualquer elemento e dispara um leque escalonado de pequenas manchas a partir de uma borda escolhida, ao clicar, em um loop ou na primeira vez que ele rola para ser exibido.

Directional Slide In

1684Directional Slide InAnimaçãoUma revelação que empurra o conteúdo de qualquer um dos quatro lados por uma distância definida e permite que uma mola absorva a chegada.

Focus in reveal

1697Focus in revealAnimaçãoUma revelação que deixa o conteúdo fora de foco e o deixa mais nítido à medida que entra na visualização, com um atraso opcional por item para uma pilha de linhas.

Letter cascade button

1712Letter cascade buttonBotõesUm botão largo e sólido cujo rótulo centralizado cai e é reconstruído uma letra por vez à medida que cada caractere se encaixa no lugar de cima.

Scale in on view

1743Scale in on viewAnimaçãoUm wrapper que mantém seu filho pequeno até que ele primeiro seja exibido e, em seguida, aumente-o para o tamanho máximo, com um escalonamento opcional por item para listas.

Staggered Fade List

1751Staggered Fade ListAnimaçãoLinhas que desaparecem a partir de uma opacidade inicial escolhida, uma após a outra, à medida que o grupo entra na visualização, com o espaço entre elas ajustável.

Mount pop in

1787Mount pop inAnimaçãoUma fileira de formas que surgem do zero no momento em que sobem, escalonadas para que o grupo pareça uma onda, com um botão de repetição para assisti-la novamente.

Tile trail

1796Tile trailCursorUma trilha de ponteiro que deixa cair pequenos ladrilhos arredondados ao longo do caminho, cada um saindo de uma piscina reciclada e desaparecendo à medida que outros mais novos tomam seu lugar.

Stagger bar row

1811Stagger bar rowAnimaçãoUma fileira de barras que se posicionam uma após a outra, com a onda começando em uma das extremidades ou do meio para fora.

Bouncing Photo Fan

1844Bouncing Photo FanCartõesUma fileira de blocos de fotos quadrados sobrepostos que aparecem com uma ultrapassagem elástica e, em seguida, empurram uns aos outros para o lado quando um deles é pairado.

Scroll entrance wrapper

1880Scroll entrance wrapperRolagemUm invólucro que mantém seus filhos estacionados até que eles apareçam, depois reproduz uma chegada facilitada e nunca a repete.

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.

Split text entrance

2049Split text entranceEfeitos de textoCópia que é cortada em caracteres, palavras ou linhas e animada peça por peça em um escalonamento compartilhado, com algumas predefinições de entrada para escolher.

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.

Hopping dot loader

2167Hopping dot loaderMensagens de statusUma pequena fileira de pontos que saltam em uma onda itinerante, cada um saindo do chão uma batida após o ponto ao lado.

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.

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.

Bubble burst menu

2309Bubble burst menuNavegaçãoUma pílula com logotipo flutuante e um botão que se expande em uma sobreposição em tela inteira de links de pílulas grandes, cada um se encaixando com um movimento elástico.

Circle reveal sidebar

2318Circle reveal sidebarNavegaçãoUm painel de menu que se abre como um círculo crescendo a partir de sua própria alternância, com linhas surgindo em sequência e as barras de alternância dobrando-se em uma cruz.

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.

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.

Ripple Origin Grid

2415Ripple Origin GridLayoutUma grade de peças coloridas que se iluminam em uma onda que irradia para fora de uma peça escolhida, cronometrada pela distância daquela peça.

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.

Split curtain reveal button

2435Split curtain reveal buttonBotõesUm botão escondido sob quatro painéis de destaque que se abrem primeiro lateralmente e verticalmente um pouco depois, revelando o rótulo em dois movimentos escalonados.

Staggered Offer Drawer

2441Staggered Offer DrawerSobreposiçõesUma gaveta inferior que promove uma oferta limitada, onde o título, o preço e os botões surgem um após o outro em vez de aparecerem todos ao mesmo tempo.

Letter drop press button

2517Letter drop press buttonBotõesUm botão de tecla em uma borda mais escura cujo rótulo desaparece ao passar o mouse e é reconstruído letra por letra de cima, pressionando a borda quando clicado.

Compass share burst

2604Compass share burstBotõesUm botão redondo de compartilhamento que espalha seu destino atinge os pontos da bússola em uma explosão escalonada e os puxa de volta para casa na ordem inversa.

Split flap face button

2681Split flap face buttonBotõesO rosto preenchido sai da parte inferior do botão ao passar o mouse e o rótulo se reconstrói letra por letra por trás dele.

Letter swap copy button

2718Letter swap copy buttonBotõesUm botão de cópia em relevo cujo rótulo se reconstrói letra por letra ao passar o mouse enquanto seu chip de ícone pulsa e desenha um cheque quando a cópia chega.

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.

Rotating Word Swap

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.

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.

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.
Blur reveal
Um wrapper que mantém seu filho fora de foco e ligeiramente deslocado até que ele entre pela primeira vez na janela de visualização e, em seguida, resolva o desfoque e feche a lacuna em um movimento.
Bouncing Photo Fan
Uma fileira de blocos de fotos quadrados sobrepostos que aparecem com uma ultrapassagem elástica e, em seguida, empurram uns aos outros para o lado quando um deles é pairado.

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)