Componentes

depth

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

32 de 32

1567Layers iconÍconesFolhas empilhadas vistas em perspectiva, a de cima levantando primeiro e as de baixo seguindo um ritmo depois.

Drifting glass shards

1686Drifting glass shardsFundosUma corrente lenta de lascas translúcidas que piscam enquanto caem, espalhando-se do cursor e reunindo-se quando o ponteiro fica parado.

Light beam slats

1715Light beam slatsFundosLongas ripas diagonais deslizando umas sobre as outras no escuro, cada uma captando uma faixa de luz ao cruzar, de modo que o painel respira como uma cortina acesa.

Parallax Starfield

1727Parallax StarfieldFundosTrês camadas de pontos dispersos rolam para cima em taxas diferentes e deslizam contra o ponteiro, para que o campo ganhe profundidade.

Tunnel Warp Panel

1755Tunnel Warp PanelFundosO conteúdo fica na entrada de um túnel de quatro paredes enquanto feixes estreitos descem por cada parede em direção ao espectador.

Deep Slab Button

1825Deep Slab ButtonBotõesUma placa alta que flutua acima da página em uma longa sombra diagonal e afunda nela quando pairada, e então bate ao clicar.

Press block button

1831Press block buttonBotõesUm botão de bloco arredondado apoiado em uma borda sólida de sombra que encurta conforme o botão desce quando pressionado.

Key travel button

1835Key travel buttonBotõesUma tecla arredondada apoiada em uma base alta que encurta ao pairar e desaparece quando pressionada, assentando a tecla na horizontal.

Lift and Sink Button

1868Lift and Sink ButtonBotõesUm botão monoespaçado colorido que flutua ao passar o mouse e afunda em sua própria sombra quando pressionado.

Parallax plate gallery

1873Parallax plate galleryRolagemUma galeria vertical onde o número de índice superdimensionado de cada placa flutua em uma taxa diferente da própria placa, com um trilho de progresso de rolagem na parte inferior.

Radial sheen button

1878Radial sheen buttonBotõesUm botão curto em forma de tecla iluminado no canto superior direito, com uma borda de base fina que inverte quando pressionada.

Settling Add Pill

1885Settling Add PillBotõesUma cápsula compacta com uma marca de adição que se estabelece em três profundidades de sombra conforme você passa o mouse e pressiona.

Tilted deck button

1898Tilted deck buttonBotõesUm botão colocado em perspectiva como uma chave em um deck inclinado, inclinando-se ainda mais e deslizando para baixo à medida que é pairado e pressionado.

Comet rain

1941Comet rainFundosListras com cabeças brilhantes caem de um ponto brilhante próximo ao topo e curvam-se para fora à medida que caem, a velocidades definidas pela sua profundidade.

Drifting particle field

1952Drifting particle fieldFundosUma nuvem que cai lentamente de pequenos pontos redondos, cada um vagando em seu próprio caminho, com a nuvem inteira inclinada para longe do ponteiro.

Nested plate send button

2005Nested plate send buttonBotõesUma pílula moldada colocada dentro de uma placa de apoio cuja sombra se estreita ao pairar e se achata ao pressionar.

Pixel snowfall

2014Pixel snowfallFundosNeve grossa de baixa resolução caindo através de um volume profundo, perto de flocos gordos e brilhantes, os distantes são manchas únicas e escuras.

Squash key button

2054Squash key buttonBotõesUm botão de tecla que se aperta sob o ponteiro enquanto uma laje de base desliza para fora dele e, em seguida, cai sobre a laje quando pressionada.

Glass Block Bars

2090Glass Block BarsGráficosUm gráfico de barras renderizado como blocos de vidro 3D brilhantes com faces laterais e superiores em perspectiva e uma varredura lenta de luz pulsando na barra mais alta.

Tilted plinth call to action

2254Tilted plinth call to actionBotõesUm apelo à ação robusto apoiado em um pedestal de cor sólida, ligeiramente inclinado no espaço, que se levanta de sua base ao pairar e afunda sob uma prensa.

Receding stack carousel

2411Receding stack carouselLayoutUm carrossel onde as cartas se distanciam atrás da carta em foco, escurecendo e desfocando à medida que ficam atrás.

Stacked shadow outline button

2500Stacked shadow outline buttonBotõesUm botão de contorno monoespaçado apoiado em uma escada de sombras empilhadas que se comprime e se acomoda conforme o destaque inunda seu rosto e, em seguida, retorna uma camada de cada vez.

Soft inset press button

2533Soft inset press buttonBotõesUma placa quase preta que fica acima de um painel correspondente em duas sombras suaves opostas, afunda na superfície enquanto é segurada e sobe novamente ao ser liberada.

Growing ledge button

2566Growing ledge buttonBotõesUm botão de destaque sólido apoiado em uma borda inferior mais escura que engrossa e sobe ao pairar, depois fica mais fino e afunda sob pressão.

Arcade dome button

2574Arcade dome buttonBotõesUm botão redondo cuja tampa em forma de cúpula flutua acima de uma base mais escura e fica nivelada com uma queda visível quando pressionada.

Tilted Stack CTA

2586Tilted Stack CTABotõesUma frase de chamariz robusta que fica girada sobre uma pilha de sombras rígidas e, em seguida, fica na vertical sob o ponteiro.

Three layer push button

2620Three layer push buttonBotõesUma tecla tátil construída a partir de três placas empilhadas, uma sombra projetada, uma parede lateral escura e uma face flutuante, que surge ao pairar e atinge o fundo instantaneamente ao pressionar.

Stacked plate press button

2655Stacked plate press buttonBotõesUm botão robusto e arredondado construído a partir de três placas aninhadas que se separam ao pressionar e voltam ao soltar.

Pressed ledge button

2690Pressed ledge buttonBotõesUm botão sólido apoiado em uma borda inferior espessa e mais escura que desmorona quando pressionado, de modo que a tampa cai nivelada como uma chave real.

Bevel press pill

2708Bevel press pillBotõesUma pílula escura chanfrada com um chip redondo recuado na extremidade que afunda na superfície quando pressionada.

Keycap press button

2717Keycap press buttonBotõesUma tecla clara com espessura real construída a partir de sombras duras empilhadas, que desce e perde altura quando pressionada.

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.

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.

Arcade dome button
Um botão redondo cuja tampa em forma de cúpula flutua acima de uma base mais escura e fica nivelada com uma queda visível quando pressionada.
Bevel press pill
Uma pílula escura chanfrada com um chip redondo recuado na extremidade que afunda na superfície quando pressionada.
Comet rain
Listras com cabeças brilhantes caem de um ponto brilhante próximo ao topo e curvam-se para fora à medida que caem, a velocidades definidas pela sua profundidade.

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)