Composants

ambient

Explorez les aperçus interactifs, trouvez les bons composants et intégrez les composants ouverts à votre projet avec leur code source.

Créer à partir d’un guide Connectez votre agent Explorer les modèles de pages

36 sur 39

Chargement de l’index de recherche complet.

Aurora veil

1526Aurora veilArrière-plansUn arrière-plan à fond perdu composé de trois rubans de lumière flottants qui s'additionnent là où ils se croisent, sur un fond sombre, avec un calque de légende qui reste lisible.

Particle drift

1536Particle driftArrière-plansUn champ de toile de particules à la dérive lente qui s'enroulent sur les bords, se lient avec des lignes pâles et s'éloignent là où passe le pointeur.

Aurora curtain

1666Aurora curtainArrière-plansUn doux rideau de lumière suspendu au bord supérieur, son ourlet inférieur montant et descendant sur une lente onde sonore tandis que sa couleur change sur toute la largeur.

Backlight Halo

1667Backlight HaloArrière-plansEnveloppe l’œuvre d’art dans une copie floue et rehaussée de couleurs de manière à ce que le panneau semble répandre sa propre lumière sur la surface située derrière lui.

Concentric pulse rings

1677Concentric pulse ringsArrière-plansUne pile d'anneaux concentriques derrière une légende, chacun respirant selon un délai échelonné afin qu'une impulsion lente se propage vers l'extérieur depuis le centre.

Drifting gradient wash

1687Drifting gradient washArrière-plansUn panneau dégradé bicolore surdimensionné au-delà de son cadre et se déplaçant lentement d'avant en arrière, de sorte que la limite de couleur dérive pour toujours sur la surface.

Gradient slat spotlight

1700Gradient slat spotlightArrière-plansLes lattes verticales cachent un dégradé de couleurs jusqu'à ce qu'un projecteur doux suive le pointeur sur elles et éclaire chaque latte qu'il touche.

Light beam slats

1715Light beam slatsArrière-plansDe longues lattes diagonales glissent les unes sur les autres dans l'obscurité, chacune captant une bande de lumière lorsqu'elle se croise afin que le panneau respire comme un store éclairé.

Magnetic particle ring

1720Magnetic particle ringArrière-plansUn champ dérivant de minuscules points que le pointeur attrape et réorganise en un anneau ondulant, les relâchant à mesure qu'il avance.

Merging blob backdrop

1722Merging blob backdropArrière-plansUne large toile de fond de gouttes molles surdimensionnées qui glissent et orbitent sur des boucles décalées, fusionnant en une seule masse liquide avec un flou et un seuil franchissant partout où elles se rencontrent.

Meteor shower

1723Meteor showerArrière-plansDe minuscules têtes brillantes avec de fines stries traînantes tombent sur un panneau sous un angle commun, chacune avec son propre retard et sa propre vitesse.

Overhead light rays

1726Overhead light raysArrière-plansDe douces poutres effilées sont suspendues au-dessus d'un panneau, chacune s'estompant et se balançant doucement selon son propre cycle afin que le groupe ne vibre jamais ensemble.

Perspective floor grid

1731Perspective floor gridArrière-plansUn plan de grille s'éloigne de la caméra de sorte qu'il recule jusqu'à un horizon et glisse vers le spectateur sur une boucle continue à une cellule.

Smoke veil drift

1748Smoke veil driftArrière-plansDe larges nappes de brume colorée traversent un champ noir en biais, s'amincissant et s'épaississant à mesure qu'elles glissent les unes sur les autres.

Soft fiber curtain

1749Soft fiber curtainArrière-plansDes rideaux superposés de filaments pâles se penchent et se tordent sur un champ profond, s’éclairant lorsqu’ils traversent comme la lumière à travers le tissu.

Cursor fluid trail

1947Cursor fluid trailArrière-plansUn champ sombre sur lequel le fait de faire glisser le pointeur étale un liquide coloré dessus, et le frottis continue de s'enrouler et de s'éclaircir après l'arrêt du pointeur.

Drifting particle field

1952Drifting particle fieldArrière-plansUn nuage de petits points ronds qui s'effondre lentement, chacun dérivant sur son propre chemin, le nuage entier s'éloignant du pointeur.

Halo ring

1979Halo ringArrière-plansUn anneau lumineux dont le bord vacille sur un champ de bruit dérivé tandis qu'une perle chaude parcourt le bord intérieur.

Light cone beam

1992Light cone beamArrière-plansUn coin de lumière granuleuse jaillit d’une ligne chaude au pied du cadre, tournant lentement pour que ses bords prennent différentes couleurs.

Liquid metal swirl

1994Liquid metal swirlArrière-plansDes rubans fondus s'enroulent autour d'un noyau chaud et projettent de fins filaments brillants vers l'extérieur tandis que la masse entière se retourne sur elle-même.

Mirror warp field

1999Mirror warp fieldArrière-plansUne feuille à fond perdu de métal poli qui se plie et se replie toute seule, avec une bosse qui s'étend partout où le pointeur la touche.

Particle Field

2000Particle FieldArrière-plansUn champ de toile de points flottants doux qui dérivent d'eux-mêmes et se penchent vers le pointeur avec une légère traction magnétique, s'atténuant une fois qu'il s'éloigne.

Neon ribbon tubes

2004Neon ribbon tubesArrière-plansDeux tubes lumineux se croisent sur le cadre, entourés de bandes d'interférence partout où ils se croisent.

Pixel snowfall

2014Pixel snowfallArrière-plansDe grosses chutes de neige à basse résolution tombant à travers un volume profond, près des flocons gras et brillants, au loin, des taches isolées sombres.

Plasma plume

2015Plasma plumeArrière-plansUne haute colonne de vapeur lumineuse qui s'élève, se replie sur elle-même et s'amincit vers le haut, teintée d'une seule couleur sur un fond presque noir.

Radial light burst

2022Radial light burstArrière-plansDes lames de lumière jaillissent d'un centre sombre, se tordant en trois dimensions et étalées comme si elles avaient été prises avec une longue exposition.

Shimmer sweep text

2036Shimmer sweep textEffets de texteUne ligne de texte où chaque lettre s'éclaircit et s'assombrit à son tour, envoyant une bande de lumière voyageant le long de la phrase en boucle.

Contour Field

2130Contour FieldArrière-plansUn arrière-plan animé à fond perdu de contours d'élévation imbriqués qui gonflent et fusionnent, le pointeur soulevant une légère bosse sur le terrain.

Corner light rays

2132Corner light raysArrière-plansDe larges rayons de lumière jaillissent d’un coin, deux éventails teintés se croisant sous des angles légèrement différents et respirant lentement.

Light Threads

2181Light ThreadsArrière-plansDes filaments lumineux se déploient à partir d'un seul point de pincement, se tressant à mesure que leurs phases avancent et s'éclairant presque au blanc là où ils se croisent.

Luminous ribbon field

2187Luminous ribbon fieldArrière-plansUne toile de fond en toile où quelques rubans lumineux s'entrelacent sur le cadre, se rétrécissant en pointes sur les deux bords et s'épanouissant vers le blanc là où ils se croisent.

Pulse grid mesh

2210Pulse grid meshArrière-plansUn treillis métallique carré qui gonfle vers l'extérieur en anneaux lents à partir du milieu, le plus brillant au centre et disparaît avant d'atteindre les bords.

Rotating beam rim button

2547Rotating beam rim buttonBoutonsUn bouton en forme de feuille avec un faisceau lumineux à deux tons tournant autour de son bord, visible uniquement dans l'espace autour de la plaque frontale.

Shifting frame button

2548Shifting frame buttonBoutonsUn bouton suivi sombre encadré par quelques pixels d'une large rampe bicolore qui glisse lentement pour que le cadre visible continue de changer de ton.

Drifting mesh tilt

2713Drifting mesh tiltBoutonsUne pilule tenue selon une légère inclinaison tridimensionnelle tandis que de douces fleurs de lumière dérivent sous sa surface, se balançant entre deux poses lorsqu'elle est planée ou focalisée.

Drifting halo button

2764Drifting halo buttonBoutonsUn bouton sombre entouré d'un cadre en forme de halo légèrement plus grand dans lequel une bande lumineuse de l'accent dérive sans fin autour du périmètre, éclaircissant et soulevant la plaque en survol.

Comparer ces composants

Choisissez selon le comportement et la mise en page, puis vérifiez les frameworks disponibles et les conditions d’accès sur la page de chaque composant.

Aurora curtain
Un doux rideau de lumière suspendu au bord supérieur, son ourlet inférieur montant et descendant sur une lente onde sonore tandis que sa couleur change sur toute la largeur.
Aurora veil
Un arrière-plan à fond perdu composé de trois rubans de lumière flottants qui s'additionnent là où ils se croisent, sur un fond sombre, avec un calque de légende qui reste lisible.
Backlight Halo
Enveloppe l’œuvre d’art dans une copie floue et rehaussée de couleurs de manière à ce que le panneau semble répandre sa propre lumière sur la surface située derrière lui.

Conseils de design

Ouvrir l’index complet

Étiquettes

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)