Componentes

spring

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 63

Carregando o índice completo de busca.

Magnetic button

1531Magnetic buttonBotõesUm botão que se move em direção ao ponteiro enquanto ele está dentro de um raio definido e volta ao repouso quando sai, com o rótulo e a seta se deslocando um pouco além do corpo.

Magnetic dust button

1641Magnetic dust buttonBotõesUm botão de pílula cercado por partículas soltas de poeira que chegam ao centro ao pairar e voltam para seus próprios locais de descanso quando liberados.

Press spring button

1646Press spring buttonBotõesUma família de botões básicos em seis capas e quatro tamanhos cuja pressão é comprimida em uma mola e ultrapassa para trás, de forma idêntica para ponteiro e teclado.

Pressed highlight toggle

1647Pressed highlight toggleBotõesUm botão de ícone de dois estados que mantém seu estado pressionado visível com um bloco de destaque arredondado crescendo atrás do glifo do centro para fora.

Bulging dot field

1671Bulging dot fieldFundosUma fina grade de pontos que se expande sob o cursor como um tecido empurrado por trás, saltando para trás com uma ultrapassagem suave no momento em que o ponteiro se move.

Coiled Spring Drag

1675Coiled Spring DragAnimaçãoUm ladrilho arrastável preso ao seu local de origem por uma bobina esticada que se estica e afina conforme você puxa, e então puxa o ladrilho para trás quando você o solta.

Composable Reveal

1676Composable RevealAnimaçãoUm invólucro revelador cujas partes de deslizamento, fade, zoom e desfocagem podem ser ativadas e combinadas em uma única transição de mola.

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.

Magnetic pull target

1721Magnetic pull targetAnimaçãoUm bloco que se inclina em direção ao ponteiro sempre que ele entra em um raio definido, puxando com mais força à medida que se aproxima e voltando para casa quando o ponteiro sai.

Pointer angle sweep

1732Pointer angle sweepFundosUm painel iluminado por uma varredura cônica cuja origem fica sob o ponteiro e cuja borda brilhante aponta para ele, facilitando um giro lento e inativo quando o ponteiro sai.

Bobble tile grid

1763Bobble tile gridAnimaçãoUma grade de peças coloridas que se afastam do ponteiro em uma mola, saltando com mais força à medida que o ponteiro passa por elas.

Cursor drift link preview

1768Cursor drift link previewCartõesUm painel de visualização de link que se inclina para onde o ponteiro estiver no link, arrastando-o sobre uma mola suave.

Fanning Spec Stack

1774Fanning Spec StackCartõesUma pilha inclinada de cartões de produtos que se espalha em um leque sob demanda, cada cartão se encaixando no lugar uma batida após o anterior.

Lagging orb follower

1783Lagging orb followerCursorUm disco macio que persegue o ponteiro em uma mola deliberadamente flexível, passando por ele e balançando para trás em vez de travar.

Magnetic project target

1786Magnetic project targetCursorUm cursor redondo personalizado com texto circulando em sua borda que flutua após o ponteiro e se encaixa em uma pílula de call to action quando ele se aproxima.

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.

Pointer label cursor

1794Pointer label cursorCursorDentro de um painel delimitado, o cursor do sistema é substituído por uma seta desenhada com um pequeno chip de nome atrás dela em uma mola macia.

Press and hover scale tile

1797Press and hover scale tileAnimaçãoUm ladrilho que incha ao pairar e se comprime ao pressionar, com a imprensa sempre superando o hover e ambos resolvidos a partir de uma mola para que os gestos nunca briguem.

Press response tile

1798Press response tileAnimaçãoUm ladrilho tátil que se comprime sob o ponto de pressão e volta ao ser liberado, inclinando-se em direção a qualquer lugar em que você empurrou.

Pointer tilt photo card

1877Pointer tilt photo cardCartõesUm cartão fotográfico legendado que se inclina em direção ao ponteiro em uma mola, com um destaque suave deslizando pela face conforme ela gira.

Bounce warning dialog

1923Bounce warning dialogSobreposiçõesUma caixa de diálogo de confirmação que aparece com uma ultrapassagem elástica e um emblema de ícone saltitante, exigindo uma resposta antes que a página abaixo se torne utilizável novamente.

Checkbox motion lab

1933Checkbox motion labCampos de entradaUma única caixa de seleção grande para ajustar exatamente a firmeza com que pressiona e a lentidão com que a marca de seleção aparece.

Elastic toggle switch

1954Elastic toggle switchCampos de entradaUm botão de alternância de pílula cujo polegar redondo se comprime em uma bolha enquanto pressionado e volta a girar com um salto suave, deslizando entre um estado neutro desligado e um preenchimento de destaque sólido.

Pin priority list

2011Pin priority listExibição de dadosUma lista de duas seções onde tocar no botão de alternância de uma linha a anima entre um grupo fixado e o restante com um movimento de mola contínuo.

Counting readout

2134Counting readoutExibição de dadosUma figura métrica que conta desde um valor inicial até seu destino em uma mola na primeira vez que é vista, com decimais fixos e preenchimento de zeros opcional.

Cursor-chasing tooltip

2137Cursor-chasing tooltipSobreposiçõesUm balão de dicas que aparece ao passar o mouse ou focar e pode deslizar para seguir o ponteiro conforme ele se move pelo gatilho.

Pop scale panel

2207Pop scale panelSobreposiçõesUm popover que abre pela metade, aponta uma pequena seta para o gatilho, escurece a página atrás dele e fecha com Escape ou um clique externo.

Animated metric counter

2299Animated metric counterExibição de dadosUm grande número simples que surge de um valor inicial até seu destino no momento em que é exibido, ultrapassando um pouco antes de se estabilizar, com separadores de milhares e um sufixo opcional.

App folder expand

2300App folder expandSobreposiçõesUm bloco de pasta no estilo da tela inicial, cujos pequenos ícones de aplicativos crescem em um painel completo, cada ícone viajando de sua miniatura para seu ponto grande.

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.

2580Overshoot icon buttonBotõesUma pílula pálida com um grande glifo ilustrado estacionado em sua extremidade esquerda que passa pela borda e volta ao pairar ou focar.

Lozenge swipe highlight

2599Lozenge swipe highlightBotõesUma etiqueta monoespaçada com um losango colorido estacionado à direita que desliza e se estende até um destaque total ao passar o mouse.

Bounce drop toggle

2759Bounce drop toggleCampos de entradaUma chave seletora vertical alta cuja bola cai para o fundo com um movimento saltitante quando desligada e desliza de volta para cima com uma mola apertada quando ligada.

Character budget counter

2760Character budget counterCampos de entradaUm campo de composição com uma leitura de caracteres restantes que perfura uma mola e aquece a cor conforme o orçamento se esgota.

Layout toggle switch

2771Layout toggle switchCampos de entradaUma chave cujo botão cruza a trilha animando uma mudança de layout real em vez de uma tradução, para que o lançamento permaneça exato em qualquer largura da trilha.

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.

Animated metric counter
Um grande número simples que surge de um valor inicial até seu destino no momento em que é exibido, ultrapassando um pouco antes de se estabilizar, com separadores de milhares e um sufixo opcional.
App folder expand
Um bloco de pasta no estilo da tela inicial, cujos pequenos ícones de aplicativos crescem em um painel completo, cada ícone viajando de sua miniatura para seu ponto grande.
Bobble tile grid
Uma grade de peças coloridas que se afastam do ponteiro em uma mola, saltando com mais força à medida que o ponteiro passa por elas.

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)