Componentes

canvas

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 89

Carregando o índice completo de busca.

Aurora veil

1526Aurora veilFundosUm fundo sem margens de três faixas de luz flutuantes que se somam onde se cruzam, sobre um fundo escuro, com uma camada de legenda que permanece legível.

Aurora curtain

1666Aurora curtainFundosUma suave cortina de luz pendurada na borda superior, sua bainha inferior subindo e descendo em uma lenta onda de ruído enquanto sua cor muda ao longo da largura.

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.

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.

Celebration burst

1674Celebration burstAnimaçãoUma explosão de flocos de papel de tela disparada de um botão, formando um arco, espalhando-se, flutuando enquanto caem e saem do quadro sob a gravidade.

CRT terminal static

1680CRT terminal staticFundosUma grade completa de glifos de blocos brilhantes que ferve, rola e rasga como um monitor monocromático com defeito.

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.

Drifting Light Beams

1688Drifting Light BeamsFundosAltas barras inclinadas de luz sobem em diferentes velocidades e se misturam em uma névoa que se move lentamente.

Drifting starfield

1689Drifting starfieldFundosUm campo profundo de estrelas com chamas em forma de cruz que brilha, gira muito lentamente e se divide em torno do ponteiro.

Firework burst canvas

1691Firework burst canvasFundosOs projéteis são lançados da borda inferior, formam um arco e depois explodem em faíscas que caem sob a ação da gravidade.

Flaming iris eye

1692Flaming iris eyeFundosUma íris ardente de filamentos radiantes ao redor de uma pupila estreita que gira para manter o cursor à vista.

1693Flickering glyph gridFundosUma grade densa de caracteres monoespaçados onde um punhado aleatório troca letras e cores a cada tique, alternando entre os tons conforme avança.

Flickering square mesh

1694Flickering square meshFundosUma malha de tela de pequenos quadrados onde células aleatórias ganham um novo brilho a cada quadro, proporcionando uma estática inquieta que nunca se repete.

Funnel vortex backdrop

1698Funnel vortex backdropFundosUm funil de estrutura de arame com anéis encolhíveis e raios radiais fluindo para uma garganta iluminada, com partículas subindo de volta.

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.

Grain wash

1701Grain washFundosDois conjuntos de cores se misturam no quadro, enquanto uma deformação lenta mantém a borda em movimento, tudo sob uma granulação pesada do filme.

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.

Branching bolt

1924Branching boltFundosUm raio irregular desce pela moldura com garfos curtos morrendo nas laterais, fica branco no golpe e depois desaparece em uma imagem residual.

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.

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.

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.

1969Glyph Static BackdropFundosUma tela cheia de pequenos símbolos monoespaçados pisca silenciosamente, um punhado deles mudando para um novo glifo aleatório a cada tique, desaparecendo em direção à borda inferior para ficar atrás do conteúdo em primeiro plano.

Grain Flicker

1972Grain FlickerFundosUma camada granulada que se redesenha a cada poucos quadros, para que os fundos planos obtenham a oscilação inquieta de um projetor em execução, em vez de uma textura fixa.

Halftone ripple field

1978Halftone ripple fieldFundosUm campo de pequenos ladrilhos que ligam e desligam com um padrão de ruído flutuante, e cada clique envia um anel de ladrilhos iluminados correndo para fora.

Aurora band glow

2110Aurora band glowFundosUma faixa suave de luz atravessando uma moldura escura, sua borda vagando em camadas de ruído enquanto a cor caminha ao longo de sua extensão.

Bar wave matrix

2112Bar wave matrixFundosUma grade de barras curtas onde cada barra desliza ao longo de sua própria trilha, e o deslocamento de fase de linha para linha transforma toda a grade em uma onda viajante.

Click spark burst

2122Click spark burstMensagens de statusCada pressão lança um anel de linhas curtas a partir do ponto exato de contato, cada uma se esticando e encolhendo até virar nada enquanto voa.

Contour Field

2130Contour FieldFundosUm cenário animado completo de contornos de elevação aninhados que aumentam e se fundem, com o ponteiro levantando uma suave saliência no terreno.

Corner light rays

2132Corner light raysFundosLargos feixes de luz se espalham por um canto, dois leques coloridos cruzando-se em ângulos ligeiramente diferentes e respirando lentamente.

Crackling border frame

2135Crackling border frameAnimaçãoUma moldura arredondada cujo contorno é redesenhado em cada moldura como um arco de luz trêmulo, com um brilho constante abaixo e conteúdo perfeitamente imóvel na parte superior.

Fanned wave threads

2152Fanned wave threadsFundosUm feixe de fios finos presos na borda esquerda, espalhando-se para a direita e ondulando em um campo de ruído lento.

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.

Curved Scroll Wall

2330Curved Scroll WallLayoutUma parede de fotos com rolagem horizontal renderizada em um plano curvado suavemente que continua rolando infinitamente em qualquer direção.

Halftone print loupe

2735Halftone print loupeMídiaUma imagem renderizada como uma tela de pontos de tinta impressos, com uma lupa redonda sob o ponteiro onde os pontos se dissolvem novamente no original liso.

Fuzzy static text

2807Fuzzy static textEfeitos de textoUma palavra desenhada na tela e repintada em linhas de varredura trêmulas, zumbindo como estática de televisão e distorcendo-se ainda mais ao passar o mouse ou pressionar.

Elastic weight headline

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.

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 band glow
Uma faixa suave de luz atravessando uma moldura escura, sua borda vagando em camadas de ruído enquanto a cor caminha ao longo de sua extensão.
Aurora curtain
Uma suave cortina de luz pendurada na borda superior, sua bainha inferior subindo e descendo em uma lenta onda de ruído enquanto sua cor muda ao longo da largura.
Aurora veil
Um fundo sem margens de três faixas de luz flutuantes que se somam onde se cruzam, sobre um fundo escuro, com uma camada de legenda que permanece legível.

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)