Componentes

ambient

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 39

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.

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.

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.

Backlight Halo

1667Backlight HaloFundosEnvolve a arte em uma cópia borrada e colorida de si mesma, de modo que o painel pareça derramar sua própria luz na superfície atrás dele.

Concentric pulse rings

1677Concentric pulse ringsFundosUma pilha de anéis concêntricos atrás de uma legenda, cada um deles respirando com um atraso escalonado, de modo que um pulso lento viaja para fora do centro.

Drifting gradient wash

1687Drifting gradient washFundosUm painel gradiente de dois tons superdimensionado além de sua moldura e movido lentamente para frente e para trás, de modo que o limite da cor flutua pela superfície para sempre.

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.

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.

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.

Merging blob backdrop

1722Merging blob backdropFundosUm amplo cenário de bolhas suaves de grandes dimensões que deslizam e orbitam em loops escalonados, fundindo-se numa massa líquida com um desfoque e uma passagem limiar onde quer que se encontrem.

Meteor shower

1723Meteor showerFundosPequenas cabeças brilhantes com finas listras caem sobre um painel em um ângulo compartilhado, cada uma com seu próprio atraso e velocidade.

Overhead light rays

1726Overhead light raysFundosVigas suaves e cônicas pendem de cima de um painel, cada uma aparecendo e desaparecendo e balançando suavemente em seu próprio ciclo para que o grupo nunca pulsa junto.

Perspective floor grid

1731Perspective floor gridFundosUm plano de grade inclinado para longe da câmera, recuando para o horizonte e deslizando em direção ao observador em um loop contínuo de uma célula.

Smoke veil drift

1748Smoke veil driftFundosFolhas largas de neblina colorida atravessam um campo negro em ângulo, tornando-se mais finas e mais espessas à medida que passam umas pelas outras.

Soft fiber curtain

1749Soft fiber curtainFundosCortinas em camadas de filamentos claros se inclinam e se retorcem em um campo profundo, iluminando-se à medida que atravessam o tecido como luz.

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.

Halo ring

1979Halo ringFundosUm anel brilhante cuja borda oscila em um campo de ruído flutuante enquanto uma conta quente gira ao redor da borda interna.

Light cone beam

1992Light cone beamFundosUma faixa granulada de luz surge de uma linha quente na parte inferior do quadro, girando lentamente para que suas bordas capturem cores diferentes.

Liquid metal swirl

1994Liquid metal swirlFundosFitas derretidas envolvem um núcleo quente e lançam finos filamentos brilhantes para fora enquanto toda a massa gira sobre si mesma.

Mirror warp field

1999Mirror warp fieldFundosUma folha sangrenta de metal polido que se dobra e se redobra, com um amassado que se espalha onde quer que o ponteiro a toque.

Particle Field

2000Particle FieldFundosUm campo de tela de pontos flutuantes suaves que flutuam por conta própria e se inclinam em direção ao ponteiro com um leve puxão magnético, recuando quando ele se afasta.

Neon ribbon tubes

2004Neon ribbon tubesFundosDois tubos brilhantes trançam-se um sobre o outro ao longo da moldura, rodeados por faixas de interferência onde quer que se cruzem.

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.

Plasma plume

2015Plasma plumeFundosUma alta coluna de vapor luminoso que sobe, dobra-se sobre si mesma e afina em direção ao topo, tingida em uma única cor quase preta.

Radial light burst

2022Radial light burstFundosLâminas de luz saem de um centro escuro, girando em três dimensões e manchadas como se tivessem sido filmadas em uma longa exposição.

Shimmer sweep text

2036Shimmer sweep textEfeitos de textoUma linha de texto onde cada letra aumenta e diminui de brilho, enviando uma faixa de luz viajando ao longo da frase em um loop.

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.

Light Threads

2181Light ThreadsFundosFilamentos brilhantes se espalham a partir de um único ponto de compressão, entrelaçando-se à medida que suas fases avançam e brilhando quase brancos onde se cruzam.

Luminous ribbon field

2187Luminous ribbon fieldFundosUm cenário de tela onde algumas fitas brilhantes se entrelaçam na moldura, afinando em pontas em ambas as bordas e florescendo em direção ao branco onde se cruzam.

Pulse grid mesh

2210Pulse grid meshFundosUma malha de arame quadrada que se expande em anéis lentos a partir do meio, mais brilhante no centro e desaparece antes de atingir as bordas.

Rotating beam rim button

2547Rotating beam rim buttonBotõesUm botão em forma de folha com um feixe brilhante de dois tons girando em torno de sua borda, visível apenas na abertura ao redor da placa frontal.

Shifting frame button

2548Shifting frame buttonBotõesUm botão escuro emoldurado por alguns pixels de uma ampla rampa de dois tons que desliza lentamente para que o quadro visível continue mudando de tom.

Drifting mesh tilt

2713Drifting mesh tiltBotõesUma pílula mantida em uma ligeira inclinação tridimensional enquanto suaves flores de luz flutuam sob sua superfície, balançando entre duas poses enquanto paira ou foca.

Drifting halo button

2764Drifting halo buttonBotõesUm botão escuro cercado por uma moldura de halo um pouco maior, na qual uma faixa brilhante do destaque flutua indefinidamente ao redor do perímetro, iluminando e levantando a placa ao pairar.

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 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.
Backlight Halo
Envolve a arte em uma cópia borrada e colorida de si mesma, de modo que o painel pareça derramar sua própria luz na superfície atrás dele.

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)