Componentes

pointer

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 65

Carregando o índice completo de busca.

Dock menu

1528Dock menuNavegaçãoUm encaixe inferior cujos ícones são dimensionados a partir da distância do ponteiro, com um rótulo acima do ícone sob o cursor e um ponto abaixo do ativo.

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.

Particle drift

1536Particle driftFundosUm campo de tela de partículas lentas que se movem nas bordas e se conectam com linhas tênues e se afastam por onde o ponteiro passa.

1548Arrow iconÍconesUma seta de comprimento total que se move ao longo de seu próprio eixo, com setas emparelhadas para as direções bidirecionais.

Bouncing sphere pit

1670Bouncing sphere pitFundosUm poço de esferas pesadas que caem, batem umas nas outras e se acumulam, espalhando-se sempre que o cursor passa por elas.

Cursor trail grid

1681Cursor trail gridFundosUma grade de células contornadas que se acendem sob o ponteiro e esfriam lentamente à medida que ele avança, deixando um rastro desbotado.

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.

Gradient slat spotlight

1700Gradient slat spotlightFundosAs ripas verticais escondem um gradiente de cor até que um holofote suave rastreie o ponteiro sobre elas e ilumine cada ripa que toca.

Gravity dust field

1703Gravity dust fieldFundosUm campo lento de partículas de poeira brilhantes que se curvam em direção ou para longe do ponteiro e ficam mais brilhantes à medida que se aproximam.

Light Beam Flare

1714Light Beam FlareFundosUm feixe estreito cai do topo de um palco escuro em um amplo clarão horizontal, com neblina flutuante e um feixe que se inclina em direção ao ponteiro.

Liquid metal drift

1718Liquid metal driftFundosBordas iluminadas de forma líquida pesada, esticam-se e fundem-se em um campo negro, projetando-se em direção ao ponteiro como limalha de ferro em direção a um ímã.

Liquid swirl vortex

1719Liquid swirl vortexFundosDuas piscinas de tinta espessa dobradas em torno de um redemoinho lento, com bordas duras e pixels grossos que fazem com que pareça impresso em vez de renderizado.

Magnetic particle ring

1720Magnetic particle ringFundosUm campo flutuante de pequenas partículas que o ponteiro capta e reorganiza num anel ondulante, libertando-as novamente à medida que avança.

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.

Pointer lit lattice

1733Pointer lit latticeFundosUma treliça de tela cujas células iluminam-se à medida que o ponteiro passa, segura e depois decai, com uma pressão enviando um anel de luz que se expande para os cantos mais distantes.

Pointer ripple mesh

1734Pointer ripple meshFundosUma placa colorida é amostrada através de uma malha grosseira cujas células lembram onde o ponteiro esteve, portanto, arrastar mancha a imagem e a mancha relaxa de volta.

Bracket lock cursor

1764Bracket lock cursorCursorUm ponteiro personalizado de quatro colchetes de canto que gira enquanto está ocioso e se abre em torno de qualquer elemento marcado como alvo.

Drag tile track

1771Drag tile trackAnimaçãoUm ladrilho que você pode jogar em torno de uma pista delimitada que se inclina para o arrasto, resiste além das bordas e pára com impulso.

Fluid Splash

1776Fluid SplashCursorArrastar pelo painel empurra a tinta através de uma simulação fluida, de modo que a cor ondula, ondula e se dissipa lentamente atrás do ponteiro.

Iron filings field

1781Iron filings fieldAnimaçãoUma grade quadrada de pequenos traços que giram para apontar para o ponteiro, como limalhas de ferro se prendendo a um ímã arrastado sobre elas.

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.

Pixel Wake

1793Pixel WakeCursorUma grade grossa de células acende sob o ponteiro e esfria atrás dele, deixando um rastro em bloco no painel.

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.

Edge tracking glow card

1854Edge tracking glow cardCartõesUm cartão cujo contorno só acende onde o ponteiro se aproxima dele, iluminando à medida que você se aproxima da borda e escurecendo perto do meio.

Click ripple burst

1937Click ripple burstMensagens de statusUm efeito de feedback de ponteiro que gera uma breve forma animada exatamente onde o usuário clica ou toca.

Cursor fluid trail

1947Cursor fluid trailFundosUm campo escuro onde arrastar o ponteiro espalha um fluido colorido sobre ele, e a mancha continua ondulando e diminuindo depois que o ponteiro para.

Orbit Pointer Nav

2007Orbit Pointer NavNavegaçãoUm anel de navegação circular onde um ponteiro central gira para apontar para qualquer botão de seção que esteja ativo e os botões se expandem em comprimidos rotulados na seleção.

Compass bar grid

2127Compass bar gridAnimaçãoUma grade de barras curtas que giram para apontar para o ponteiro, de modo que o campo pareça uma limalha de ferro encontrando um ímã.

Focus Lens

2155Focus LensAnimaçãoUma forma delineada que permanece suave e fora de foco em todos os lugares, exceto em um pequeno círculo que segue o ponteiro, onde fica nítido.

Gooey blob field

2159Gooey blob fieldAnimaçãoUm campo de bolhas suaves que orbitam caminhos semeados e se fundem na aproximação, com uma bolha extra que segue o ponteiro.

Pointer Magnet

2206Pointer MagnetAnimaçãoUm invólucro que permite que tudo o que ele contém seja levado em direção ao ponteiro enquanto estiver dentro de uma zona de captura acolchoada e, em seguida, deslize de volta para descansar.

Dodging eyes button

2510Dodging eyes buttonBotõesUma cápsula escura com dois olhos de desenho animado piscando que salta para o canto mais distante do ponteiro enquanto suas pupilas continuam observando você.

Hairline trace submit

2647Hairline trace submitBotõesUm botão de envio escuro cuja linha fina de um pixel acende, traçando o perímetro a partir da borda que o ponteiro inseriu e, em seguida, recua da mesma maneira.

Floating text trail

2833Floating text trailCursorUm painel escuro onde o movimento do ponteiro deixa cair cópias flutuantes de uma palavra ao longo do caminho de viagem, cada uma balançando brevemente antes de desaparecer.

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.

Bouncing sphere pit
Um poço de esferas pesadas que caem, batem umas nas outras e se acumulam, espalhando-se sempre que o cursor passa por elas.
Bracket lock cursor
Um ponteiro personalizado de quatro colchetes de canto que gira enquanto está ocioso e se abre em torno de qualquer elemento marcado como alvo.
Click ripple burst
Um efeito de feedback de ponteiro que gera uma breve forma animada exatamente onde o usuário clica ou toca.

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)