Composants

glow

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.

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.

Drifting border sheen

1685Drifting border sheenArrière-plansUn panneau dont le contour est éclairé par une douce lueur bicolore, plusieurs fois la taille du panneau, dérivant lentement autour du cadre.

Gravity dust field

1703Gravity dust fieldArrière-plansUn champ lent de grains de poussière brillants qui se courbent vers ou s'éloignent du pointeur et s'éclairent de plus en plus à mesure qu'ils se rapprochent.

Light Beam Flare

1714Light Beam FlareArrière-plansUn faisceau étroit tombe du haut d’une scène sombre dans une large fusée horizontale, avec une brume dérivante et un faisceau qui se penche vers le pointeur.

Light column beam

1716Light column beamArrière-plansUne seule colonne de lumière se dresse dans un cadre sombre, respirant en largeur tandis que sa texture intérieure défile vers le haut à travers un dégradé de deux couleurs.

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.

Pointer lit lattice

1733Pointer lit latticeArrière-plansUn treillis de toile dont les cellules s'illuminent au fur et à mesure que le pointeur passe, tiennent, puis se désintègrent, avec une pression envoyant un anneau de lumière s'étendant vers les coins les plus éloignés.

Ribbon light streams

1739Ribbon light streamsArrière-plansDes faisceaux de lignes capillaires balayent l'obscurité comme des rubans de lumière, se croisant près du milieu et s'éloignant du pointeur.

Shifting gradient pill

1745Shifting gradient pillBoutonsUn bouton capsule peint avec une rampe diagonale surdimensionnée qui glisse sur le visage lorsqu'il est engagé, tandis que deux lueurs de coin alternent entre une teinte claire et une teinte profonde de la même teinte.

Neon trail cursor

1788Neon trail cursorCurseurUn faisceau de lumière effilé traversait la trajectoire récente du pointeur, chaud et large au niveau de la tête, s'amincissant et changeant de couleur vers la queue.

Smoke trail cursor

1806Smoke trail cursorCurseurUn doux nuage tourbillonnant qui suit le pointeur comme de la fumée, se recroquevillant sur lui-même lorsque vous changez de direction et se dissolvant lorsque vous vous arrêtez.

Glow halo button

1828Glow halo buttonBoutonsUn bouton de pilule avec une copie de lui-même flou derrière lui, donc en vol stationnaire fleurit un halo de couleur douce tandis que le remplissage dérive lentement.

Pointer spotlight card

1830Pointer spotlight cardCartesUne carte dont la bordure s'éclaire uniquement le long de l'arc le plus proche du curseur, avec un doux lavage intérieur qui suit le pointeur et recule lorsqu'il part.

Rolling Label Button

1836Rolling Label ButtonBoutonsUne pilule compacte et lumineuse qui enroule sa légende hors de vue et fait apparaître une deuxième ligne par le bas en survol.

Color swap play button

1849Color swap play buttonBoutonsUne pilule de jeu en majuscules qui échange ses couleurs de fond et de texte en survol, se soulevant à mesure que sa lueur colorée s'assombrit.

Edge tracking glow card

1854Edge tracking glow cardCartesUne carte dont le contour ne s'éclaire que là où le pointeur s'en rapproche, s'éclaircissant à mesure que vous vous approchez du bord et s'assombrissant vers le milieu.

Light sweep button

1869Light sweep buttonBoutonsUn bouton de contour éclairé dont le bord brillant envoie une étroite bande de lumière le balayant en survol.

Outline invert button

1872Outline invert buttonBoutonsUn bouton en ardoise sombre entouré d'un contour chaleureux qui échange toutes les couleurs avec sa bordure en survol et s'élève sur une lueur changeante.

Aurora glow heading

1915Aurora glow headingEffets de texteUn titre dans lequel un mot porte un remplissage dégradé multicolore à dérive lente attaché à ses lettres, comme une aurore qui brille derrière le type.

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.

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.

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.

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.

Aurora band glow

2110Aurora band glowArrière-plansUn doux ruban de lumière s'étendant sur un cadre sombre, son bord errant sur un bruit superposé tandis que la couleur se déplace sur toute sa longueur.

Crackling border frame

2135Crackling border frameAnimationUne monture arrondie dont le contour est redessiné à chaque image comme un arc de lumière tremblant, avec une lueur constante en dessous et parfaitement immobile sur le dessus.

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.

Halo glow button

2475Halo glow buttonBoutonsUne pilule sombre dont le halo d'accent flou s'estompe au survol et se déplace autour du bord tandis qu'un mince anneau intérieur s'éclaircit.

Speaking glow button

2515Speaking glow buttonBoutonsUne pilule sombre dont le bord inférieur porte des bandes lumineuses fonctionnant sur des boucles décalées, de sorte qu'elle se lit comme une forme d'onde en direct pendant qu'elle écoute.

Clamp jaws glow button

2598Clamp jaws glow buttonBoutonsUn bouton au contour creux dont les graduations latérales glissent, fusionnent dans les mâchoires et se ferment sur l'étiquette avec une lueur d'accent au survol ou à la mise au point.

Edge lamp tracking bar

2605Edge lamp tracking barBoutonsUne large barre translucide avec deux petites lampes fixées sur ses bords supérieur et inférieur qui s'étirent en capuchons lumineux à mesure que l'étiquette s'étale.

Glass tube element tile

2607Glass tube element tileBoutonsUne tuile carrée sélectionnable encadrée comme une longueur de tube de verre éclairé, avec un symbole d'élément à l'intérieur qui s'éclaire au survol et se verrouille lorsqu'il est sélectionné.

Light pool button

2612Light pool buttonBoutonsUn bouton de signe de tube allumé qui répand une piscine floue de sa propre couleur sur la surface située en dessous et échange la figure contre le sol lorsqu'il est survolé ou focalisé.

Corner bracket seal button

2644Corner bracket seal buttonBoutonsDeux supports d'angle courts poussent le long des bords jusqu'à ce qu'ils se scellent pour former un cadre complet autour de l'étiquette en survol.

Slanted outline button

2654Slanted outline buttonBoutonsUn bouton en parallélogramme creux dont le contour arrive en deux étapes : les côtés inclinés s'inclinent d'abord, puis le haut et le bas plats se replient pour fermer la forme.

Starfield glow button

2727Starfield glow buttonBoutonsUne pilule sombre qui se réveille en survol ou en mise au point avec un champ d'étoiles scintillantes, un coin brillant et un état de presse aux tons froids.

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 band glow
Un doux ruban de lumière s'étendant sur un cadre sombre, son bord errant sur un bruit superposé tandis que la couleur se déplace sur toute sa longueur.
Aurora glow heading
Un titre dans lequel un mot porte un remplissage dégradé multicolore à dérive lente attaché à ses lettres, comme une aurore qui brille derrière le type.
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)