Componentes

Cada componente, en vivo

Componentes originales de React para tus proyectos. Cada ficha muestra el componente real: mueve el cursor, haz clic y escribe. Inicia sesión para acceder al código, las propiedades, la instalación y las versiones Vue, Svelte, Astro y HTML.

20 de 20

1681Cursor trail gridFondosUna cuadrícula de celdas delineadas que se encienden debajo del puntero y se enfrían lentamente una vez que avanza, dejando un rastro que se desvanece.

1733Pointer lit latticeFondosUna celosía de lienzo cuyas células se iluminan a medida que pasa el puntero, se mantienen y luego se descomponen; al presionar, se envía un anillo de luz que se expande hasta las esquinas más alejadas.

1776Fluid SplashCursorArrastrar por el panel empuja la tinta a través de una simulación fluida, por lo que el color ondea, se curva y se disipa lentamente detrás del puntero.

1777Gooey blob trailCursorUna cadena de formas persigue el puntero y se funde en una masa líquida que se estira con el movimiento y se acumula cuando se detiene.

1788Neon trail cursorCursorUn haz de luz cónico atravesó la trayectoria reciente del puntero, cálido y ancho en la cabeza, adelgazando y cambiando de color hacia la cola.

1793Pixel WakeCursorUna cuadrícula gruesa de celdas se ilumina debajo del puntero y se enfría detrás de él, dejando una estela en bloques a lo largo del panel.

1794Pointer label cursorCursorDentro de un panel delimitado, el cursor del sistema es reemplazado por una flecha dibujada con un pequeño chip con el nombre detrás de él sobre un resorte suave.

1796Tile trailCursorUn sendero de puntero que deja caer pequeñas baldosas redondeadas a lo largo del camino, cada una de las cuales surge de una piscina reciclada y se aleja a medida que otras nuevas ocupan su lugar.

1803Ribbon trail flowCursorVarias cintas de colores persiguen la aguja con sus propios resortes, se estrechan hasta formar una punta y se trenzan a medida que la aguja gira.

1806Smoke trail cursorCursorUna nube suave y agitada que sigue el puntero como si fuera humo, se enrosca sobre sí misma cuando cambias de dirección y se disuelve cuando te detienes.

1809Spring lag trailCursorUna cadena de círculos que persiguen el puntero con resortes cada vez más suaves, de modo que un movimiento rápido los estira hasta formar una cola de cometa que se vuelve a juntar en reposo.

1812Stamped cursor trailCursorTarjetas pequeñas estampadas a lo largo de la trayectoria del puntero a intervalos de distancia fijos, cada una de las cuales cae con una inclinación y envejece detrás del cursor.

1815Swarm trail cursorCursorUna nube de manchas suaves orbita el puntero dentro de un panel, dejando rastros ahusados y fusionándose en una forma donde se superponen.

1823Velocity comet trailCursorUna cadena de puntos que cada uno persigue al que está delante con inercia, estirándose hasta convertirse en un cometa con movimientos rápidos y enroscándose nuevamente formando un cúmulo en reposo.

1947Cursor fluid trailFondosUn campo oscuro donde al arrastrar el puntero se mancha un líquido coloreado, y la mancha sigue curvandose y adelgazándose después de que el puntero se detiene.

2222Scrolling tile latticeFondosUna celosía delineada sin fin que se desplaza en una dirección, llenando las celdas debajo del puntero y dejándolas desvanecerse detrás de él.

2455Trail breadcrumbsNavegaciónUn rastro de ruta de navegación horizontal con separadores entre cada paso, enlaces de antepasados silenciados, una página actual en negrita y puntos suspensivos que colapsan los caminos largos.

2522Echo halo hover buttonBotonesUna píldora oscura que, al pasar el mouse o enfocarse en el teclado, arroja copias escalonadas y descoloridas de sí misma a lo largo de las cuatro diagonales mientras la píldora crece.

2526Trailing arrows text buttonBotonesUn enlace de texto sin bordes que amplía el espacio entre letras al pasar el mouse mientras un rastro de flechas se abre en abanico hacia la derecha, cada una más lejos y más tenue que la anterior.

2813Trailing echo textEfectos de textoUn titular con una pila de copias borrosas y translúcidas que van por detrás de su inclinación impulsada por el puntero, extendiéndose hasta convertirse en un rastro de eco y desapareciendo hasta la primera línea cuando está inactivo.

Abrir el índice completo

Etiquetas

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)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)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 (6)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 (3)columns (3)combobox (4)command palette (3)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)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)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)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 (12)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 (8)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)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)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 (3)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)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 (11)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)wrapper (3)zoom (4)