Composants

spring

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 63

Chargement de l’index de recherche complet.

Magnetic button

1531Magnetic buttonBoutonsUn bouton qui dérive vers le pointeur lorsqu'il se trouve à l'intérieur d'un rayon défini et revient se reposer lorsqu'il part, l'étiquette et la flèche se déplaçant un peu plus loin que le corps.

Magnetic dust button

1641Magnetic dust buttonBoutonsUn bouton de pilule entouré de grains de poussière qui se précipitent en son centre en vol stationnaire et retournent vers leur propre endroit de repos lorsqu'ils sont relâchés.

Press spring button

1646Press spring buttonBoutonsUne famille de boutons de base en six skins et quatre tailles dont la pression se comprime sur un ressort et dépasse en arrière, identique pour le pointeur et le clavier.

Pressed highlight toggle

1647Pressed highlight toggleBoutonsUn bouton d'icône à deux états qui maintient son état enfoncé visible avec un bloc de surbrillance arrondi se développant derrière le glyphe du centre vers l'extérieur.

Bulging dot field

1671Bulging dot fieldArrière-plansUne fine grille de points qui gonfle vers l'extérieur sous le curseur comme un tissu poussé par derrière, rebondissant avec un léger dépassement au moment où le pointeur avance.

Coiled Spring Drag

1675Coiled Spring DragAnimationUne tuile déplaçable attachée à son point d'origine par une bobine tirée qui s'étire et s'amincit lorsque vous tirez, puis ramène la tuile lorsque vous la lâchez.

Composable Reveal

1676Composable RevealAnimationUn emballage de révélation dont les parties diapositive, fondu, zoom et défocalisation peuvent chacune être activées et combinées en une seule transition à ressort.

Directional Slide In

1684Directional Slide InAnimationUne révélation qui pousse le contenu depuis l'un des quatre côtés d'une distance définie et permet à un ressort d'absorber l'arrivée.

Focus in reveal

1697Focus in revealAnimationUne révélation qui rend le contenu flou et lui permet de s'affiner lorsqu'il entre dans la vue, avec un délai facultatif par élément pour une pile de lignes.

Magnetic pull target

1721Magnetic pull targetAnimationUne tuile qui se penche vers le pointeur chaque fois qu'elle entre dans un rayon défini, tirant plus fort à mesure qu'elle se rapproche et se rapprochant lorsque le pointeur s'en va.

Pointer angle sweep

1732Pointer angle sweepArrière-plansUn panneau éclairé par un balayage conique dont l'origine se trouve sous le pointeur et dont le bord brillant pointe vers lui, passant à une lente rotation au ralenti lorsque le pointeur s'en va.

Bobble tile grid

1763Bobble tile gridAnimationUne grille de tuiles colorées qui s'éloignent du pointeur sur un ressort, rebondissant plus fort à mesure que le pointeur les traverse rapidement.

Cursor drift link preview

1768Cursor drift link previewCartesUn panneau d'aperçu du lien qui se penche vers l'endroit où le pointeur se trouve sur le lien, le traînant sur un ressort souple.

Fanning Spec Stack

1774Fanning Spec StackCartesUne pile penchée de cartes de produits qui se propage en éventail à la demande, chaque carte se mettant en place un battement après la précédente.

Lagging orb follower

1783Lagging orb followerCurseurUn disque souple qui poursuit le pointeur sur un ressort délibérément souple, le dépassant et vacillant en arrière au lieu de se verrouiller.

Magnetic project target

1786Magnetic project targetCurseurUn curseur rond personnalisé avec du texte entourant son bord qui dérive après le pointeur et s'enclenche sur une pilule d'appel à l'action lorsqu'il se rapproche.

Mount pop in

1787Mount pop inAnimationUne rangée de formes qui surgissent de zéro au moment où elles montent, décalées pour que le groupe se lit comme une seule vague, avec un bouton de relecture pour la revoir.

Pointer label cursor

1794Pointer label cursorCurseurÀ l'intérieur d'un panneau délimité, le curseur système est remplacé par une flèche dessinée avec une petite puce nominative derrière elle sur un ressort souple.

Press and hover scale tile

1797Press and hover scale tileAnimationUne tuile qui gonfle au survol et s'écrase à la pression, la presse battant toujours en survol et les deux étant résolus à partir d'un seul ressort afin que les gestes ne se battent jamais.

Press response tile

1798Press response tileAnimationUne dalle tactile qui se comprime sous le point de pression et rebondit lors du relâchement, s'inclinant vers l'endroit où vous avez poussé sur sa face.

Pointer tilt photo card

1877Pointer tilt photo cardCartesUne carte photo sous-titré qui pointe vers le pointeur sur un ressort, avec une lumière douce glissant sur le visage lorsqu'il tourne.

Bounce warning dialog

1923Bounce warning dialogSuperpositionsUne boîte de dialogue de confirmation apparaît avec un dépassement élastique et un badge d'icône rebondissant, exigeant une réponse avant que la page ci-dessous ne redevienne utilisable.

Checkbox motion lab

1933Checkbox motion labChamps de saisieUne seule case à cocher surdimensionnée pour régler exactement la force avec laquelle elle appuie et la lenteur avec laquelle sa coche s'insère.

Elastic toggle switch

1954Elastic toggle switchChamps de saisieUne pilule à bascule dont le pouce rond s'écrase en une goutte lorsqu'il est pressé et revient pour s'arrondir avec un léger rebond, glissant entre un état neutre et un remplissage d'accent solide.

Pin priority list

2011Pin priority listAffichage des donnéesUne liste en deux sections dans laquelle appuyer sur le bouton d'épingle d'une ligne l'anime entre un groupe épinglé et le reste avec un mouvement de ressort continu.

Counting readout

2134Counting readoutAffichage des donnéesUn chiffre métrique qui compte depuis une valeur de départ jusqu'à sa cible sur un ressort la première fois qu'il est vu, avec des décimales fixes et un remplissage de zéros en option.

Cursor-chasing tooltip

2137Cursor-chasing tooltipSuperpositionsUne bulle d'indice qui apparaît lors du survol ou de la mise au point et peut glisser pour suivre le pointeur lorsqu'il se déplace sur le déclencheur.

Pop scale panel

2207Pop scale panelSuperpositionsUn popover qui s'ouvre de moitié, pointe une petite flèche vers son déclencheur, assombrit la page derrière lui et se ferme sur Échap ou sur un clic extérieur.

Animated metric counter

2299Animated metric counterAffichage des donnéesUn grand chiffre nu qui jaillit d'une valeur de départ jusqu'à sa valeur cible au moment où il défile, dépassant légèrement avant de se stabiliser, avec des milliers de séparateurs et un suffixe facultatif.

App folder expand

2300App folder expandSuperpositionsUne vignette de dossier de style écran d'accueil dont les petites icônes d'application se transforment en un panneau complet, chaque icône voyageant de sa miniature à son grand emplacement.

Circle reveal sidebar

2318Circle reveal sidebarNavigationUn panneau de menu qui s'ouvre sous la forme d'un cercle s'élevant à partir de sa propre bascule, avec des lignes apparaissant en séquence et les barres de bascule se repliant en croix.

2580Overshoot icon buttonBoutonsUne pilule pâle avec un grand glyphe illustré garé à son extrémité gauche qui tire vers l'extérieur au-delà du bord et revient en vol stationnaire ou en mise au point.

Lozenge swipe highlight

2599Lozenge swipe highlightBoutonsUne étiquette monospace nue avec un losange coloré garé à sa droite qui glisse et s'étire pour devenir un point culminant complet au survol.

Bounce drop toggle

2759Bounce drop toggleChamps de saisieUn grand interrupteur à bascule vertical dont la boule tombe vers le bas avec un mouvement rebondissant lorsqu'elle est éteinte et remonte avec un ressort serré lorsqu'elle est allumée.

Character budget counter

2760Character budget counterChamps de saisieUn champ de composition avec une lecture des caractères restants qui frappe sur un ressort et se réchauffe en couleur à mesure que le budget s'épuise.

Layout toggle switch

2771Layout toggle switchChamps de saisieUn commutateur dont le bouton traverse la piste en animant un changement de disposition réel plutôt qu'une translation, de sorte que le lancer reste exact quelle que soit la largeur de la piste.

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.

Animated metric counter
Un grand chiffre nu qui jaillit d'une valeur de départ jusqu'à sa valeur cible au moment où il défile, dépassant légèrement avant de se stabiliser, avec des milliers de séparateurs et un suffixe facultatif.
App folder expand
Une vignette de dossier de style écran d'accueil dont les petites icônes d'application se transforment en un panneau complet, chaque icône voyageant de sa miniature à son grand emplacement.
Bobble tile grid
Une grille de tuiles colorées qui s'éloignent du pointeur sur un ressort, rebondissant plus fort à mesure que le pointeur les traverse rapidement.

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)