Composants

tilt

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

26 sur 26

Tilt card

1545Tilt cardCartesUne carte de contenu qui tourne en 3D vers le pointeur avec un reflet mobile, se lève lorsqu'elle est engagée et revient au niveau lorsque le pointeur s'éloigne.

Pointer tilt card

1735Pointer tilt cardAnimationUne carte qui se penche en 3D vers le pointeur, avec un éclat qui glisse sur sa face et un ressort qui la remet à niveau à la sortie.

Tilted tile parallax

1753Tilted tile parallaxArrière-plansDes rangées de tuiles étiquetées sur une grille surdimensionnée inclinée glissent dans des directions opposées lorsque le pointeur se croise, chaque rangée arrivant avec son propre retard.

Twin Sweep Tile

1756Twin Sweep TileBoutonsUne tuile au contour carré qui s'incline lorsqu'elle se soulève, parcourt deux bandes lumineuses inclinées sur elle-même dans des directions opposées et échange son glyphe contre une légende.

Tilt Spotlight Grid

1817Tilt Spotlight GridCartesUne grille de capacités dans laquelle la carte survolée s'incline vers le pointeur et s'allume tandis que toutes les autres cartes s'assombrissent et rétrécissent.

Tilting cube field

1818Tilting cube fieldAnimationUne grille de cubes creux qui se penchent vers le pointeur dans un rayon d’atténuation, errent d’eux-mêmes lorsqu’ils sont laissés seuls et clignotent vers l’extérieur en anneaux en un clic.

Holographic ID card

1865Holographic ID cardCartesUne carte personnelle qui s'incline vers le pointeur tandis qu'un éclat holographique glisse sur sa face, avec une bande de pied de page portant l'avatar, la poignée, le statut et un bouton de contact.

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.

Tilt Parallax Tile

1897Tilt Parallax TileCartesUne vignette qui s'incline en 3D vers le pointeur sur des ressorts, soulève un calque de superposition au-dessus de sa face et traîne une petite légende qui s'incline avec la vitesse du curseur.

Tilted deck button

1898Tilted deck buttonBoutonsUn bouton décontracté en perspective comme une clé sur un pont incliné, s'inclinant plus loin et glissant vers le bas lorsqu'on le survole et qu'on appuie dessus.

Consequence confirm dialog

1943Consequence confirm dialogSuperpositionsUne boîte de dialogue de confirmation qui s'incline depuis un bord choisi et bloque la page jusqu'à ce que le visiteur annule ou continue explicitement.

Tilted perspective button

2068Tilted perspective buttonBoutonsUn call-to-action arrondi qui se trouve dans une perspective 3D permanente et bascule vers le pointeur lorsqu'il traverse la plaque.

Edge-tilt alert modal

2147Edge-tilt alert modalSuperpositionsUn mode d'avertissement pour les actions irréversibles qui monte et s'incline à partir du bord inférieur avec un dépassement élastique et se ferme uniquement via ses propres boutons.

Perspective reveal dialog

2204Perspective reveal dialogSuperpositionsUne boîte de dialogue à usage général dont le panneau s'incline à partir d'un bord choisi en 3D, puis s'aplatit pour afficher du contenu arbitraire sur une page grisée.

Tilt-in content frame

2253Tilt-in content frameSuperpositionsUn panneau d'information qui s'incline depuis un bord, se ferme librement lors d'un clic extérieur ou d'un échappement, et s'agrandit en douceur à mesure qu'une deuxième section de contenu est révélée.

Tilted plinth call to action

2254Tilted plinth call to actionBoutonsUn gros appel à l'action reposant sur un socle de couleur unie, légèrement incliné dans l'espace, qui se soulève de sa base en vol stationnaire et s'enfonce sous une presse.

Reactive bento panels

2409Reactive bento panelsMise en pageUne grille bento de panneaux qui brillent au pointeur, s'inclinent en 3D, dérivent vers le curseur et éclatent de particules et d'ondulations au clic.

Tilting Backer Tile

2450Tilting Backer TileBoutonsUne tuile carrée translucide avec une plaque de couleur unie placée exactement derrière elle qui s'incline sous la face en survol.

Outset ring tilt button

2544Outset ring tilt buttonBoutonsUn bouton de style badge avec un anneau épais flottant à l'extérieur de son bord qui s'agrandit, s'incline de quelques degrés et laisse tomber une ombre dure en survol.

Squaring backer button

2567Squaring backer buttonBoutonsUne pilule solide avec un jumeau incliné derrière elle qui se met à niveau et s'allume en survol tandis qu'une flèche se déplie depuis la gauche à côté de l'étiquette.

Split shutter reveal button

2573Split shutter reveal buttonBoutonsUn bouton rond dont les deux moitiés d'étiquette se rétractent vers les bords à des vitesses différentes, révélant la marque de respiration en dessous lorsque l'ensemble s'incline.

Tilting send button

2581Tilting send buttonBoutonsUn bouton d'envoi pâle dont le glyphe pointe vers le haut lors de la mise au point du clavier et s'éloigne du bord lorsqu'il est tiré, puis se réinitialise.

Tilted Stack CTA

2586Tilted Stack CTABoutonsUn gros appel à l'action qui repose en rotation sur une pile d'ombres décalées, puis se tient debout sous le pointeur.

Tilt pop button

2693Tilt pop buttonBoutonsUn petit bouton solide qui s'agrandit et s'incline de quelques degrés d'un côté en survol, puis s'aplatit dans la surface lorsqu'on appuie dessus.

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.

Extruded layer text

2806Extruded layer textEffets de texteUn mot restitue autant de couches de couleurs empilées derrière sa face, formant un bloc 3D extrudé qui se penche vers le pointeur et dérive lorsqu'il est inactif.

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.

Consequence confirm dialog
Une boîte de dialogue de confirmation qui s'incline depuis un bord choisi et bloque la page jusqu'à ce que le visiteur annule ou continue explicitement.
Drifting mesh tilt
Une 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.
Edge-tilt alert modal
Un mode d'avertissement pour les actions irréversibles qui monte et s'incline à partir du bord inférieur avec un dépassement élastique et se ferme uniquement via ses propres boutons.

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)