Iniciar sesión

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.

36 de 39

Cargando el índice completo de búsqueda.

Aurora veil

1526Aurora veilFondosUn fondo sin bordes de tres cintas de luz a la deriva que se suman donde se cruzan, sobre un fondo oscuro, con una capa de leyenda que permanece legible.

Particle drift

1536Particle driftFondosUn campo de lienzo de partículas a la deriva lenta que se envuelven en los bordes, se unen con líneas tenues y se alejan por donde pasa el puntero.

Aurora curtain

1666Aurora curtainFondosUna suave cortina de luz que cuelga del borde superior, su dobladillo inferior sube y baja en una lenta onda de ruido mientras su color cambia a lo ancho.

Backlight Halo

1667Backlight HaloFondosEnvuelve la obra de arte en una copia borrosa y realzada de sí misma para que el panel parezca derramar su propia luz sobre la superficie detrás de él.

Concentric pulse rings

1677Concentric pulse ringsFondosUna pila de anillos concéntricos detrás de una leyenda, cada uno de los cuales respira con un retraso escalonado de modo que un pulso lento viaja hacia afuera desde el centro.

Drifting gradient wash

1687Drifting gradient washFondosUn panel degradado de dos tonos sobredimensionado más allá de su marco y lentamente se desplaza hacia adelante y hacia atrás, de modo que el límite de color se desplaza a lo largo de la superficie para siempre.

Gradient slat spotlight

1700Gradient slat spotlightFondosLas lamas verticales ocultan un degradado de color hasta que un foco suave sigue el puntero a través de ellas e ilumina cada lama que toca.

Light beam slats

1715Light beam slatsFondosLamas diagonales largas que se deslizan unas sobre otras en la oscuridad, cada una de las cuales capta una banda de luz a medida que se cruza, de modo que el panel respira como una persiana iluminada.

Magnetic particle ring

1720Magnetic particle ringFondosUn campo a la deriva de pequeñas motas que el puntero atrapa y reorganiza en un anillo ondulado, soltándolos nuevamente a medida que avanza.

Merging blob backdrop

1722Merging blob backdropFondosUn amplio telón de fondo de masas blandas de gran tamaño que se deslizan y orbitan en bucles escalonados, fusionándose en una masa líquida con un desenfoque y un umbral dondequiera que se encuentren.

Meteor shower

1723Meteor showerFondosPequeñas cabezas brillantes con finas rayas caen sobre un panel en un ángulo compartido, cada una con su propio retraso y velocidad.

Overhead light rays

1726Overhead light raysFondosSuaves vigas cónicas cuelgan de encima de un panel, cada una de las cuales aparece y desaparece y se balancea suavemente en su propio ciclo para que el grupo nunca pulse al mismo tiempo.

Perspective floor grid

1731Perspective floor gridFondosUn plano de cuadrícula inclinado lejos de la cámara para retroceder hacia un horizonte y deslizarse hacia el espectador en un bucle continuo de una celda.

Smoke veil drift

1748Smoke veil driftFondosAmplias láminas de neblina de colores cruzan un campo negro en ángulo, adelgazándose y engrosándose a medida que se deslizan unas sobre otras.

Soft fiber curtain

1749Soft fiber curtainFondosCortinas en capas de filamentos pálidos se inclinan y giran a lo largo de un campo profundo, iluminándose a medida que atraviesan como la luz a través de la tela.

Cursor fluid trail

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.

Drifting particle field

1952Drifting particle fieldFondosUna nube de pequeños puntos redondos que gira lentamente, cada uno a la deriva en su propio camino, con toda la nube inclinándose hacia afuera del puntero.

Halo ring

1979Halo ringFondosUn anillo brillante cuyo borde se tambalea en un campo de ruido a la deriva mientras una perla caliente recorre el borde interior.

Light cone beam

1992Light cone beamFondosUna cuña de luz granulada surge de una línea viva al pie del marco y gira lentamente para que sus bordes adquieran diferentes colores.

Liquid metal swirl

1994Liquid metal swirlFondosCintas fundidas se envuelven alrededor de un núcleo caliente y arrojan finos filamentos brillantes hacia afuera mientras toda la masa gira sobre sí misma.

Mirror warp field

1999Mirror warp fieldFondosUna hoja de metal pulido con sangrado completo que se pliega y se repliega, con una abolladura que se extiende dondequiera que la toque el puntero.

Particle Field

2000Particle FieldFondosUn campo de lienzo de suaves puntos flotantes que flotan por sí solos y se inclinan hacia el puntero con un suave tirón magnético, retrocediendo una vez que se aleja.

Neon ribbon tubes

2004Neon ribbon tubesFondosDos tubos luminosos se entrelazan a lo largo del marco y están rodeados de bandas de interferencia cuando se cruzan.

Pixel snowfall

2014Pixel snowfallFondosNieve gruesa de baja resolución que cae a través de un volumen profundo, cerca de copos gruesos y brillantes, y a lo lejos, motas individuales y tenues.

Plasma plume

2015Plasma plumeFondosUna alta columna de vapor luminoso que se eleva, se pliega sobre sí misma y se adelgaza hacia la parte superior, teñida de un solo color casi negro.

Radial light burst

2022Radial light burstFondosFilos de luz surgen de un centro oscuro, girando en tres dimensiones y difuminados como si hubieran sido disparados en una exposición prolongada.

Shimmer sweep text

2036Shimmer sweep textEfectos de textoUna línea de texto donde cada letra se ilumina y se atenúa a su vez, enviando una banda de luz que viaja a lo largo de la frase en un bucle.

Contour Field

2130Contour FieldFondosUn fondo animado a sangre completa de contornos de elevación anidados que se expanden y se fusionan, con el puntero levantando un suave bulto en el terreno.

Corner light rays

2132Corner light raysFondosAmplios rayos de luz se abren en abanico desde una esquina, dos ventiladores tintados se cruzan en ángulos ligeramente diferentes y respiran lentamente.

Light Threads

2181Light ThreadsFondosLos filamentos brillantes se desplegaron en abanico desde un único punto de pellizco, trenzándose a medida que avanzan sus fases y destellando casi en blanco donde se cruzan.

Luminous ribbon field

2187Luminous ribbon fieldFondosUn fondo de lienzo donde unas cuantas cintas brillantes se entrelazan a lo largo del marco, estrechándose en puntas en ambos bordes y floreciendo hacia el blanco donde se cruzan.

Pulse grid mesh

2210Pulse grid meshFondosUna malla de alambre cuadrada que se hincha hacia afuera en lentos anillos desde el centro, más brillante en el centro y desaparece antes de llegar a los bordes.

Rotating beam rim button

2547Rotating beam rim buttonBotonesUn botón en forma de hoja con un haz brillante de dos tonos que gira alrededor de su borde, visible sólo en el espacio alrededor de la placa frontal.

Shifting frame button

2548Shifting frame buttonBotonesUn botón oscuro con seguimiento enmarcado por unos pocos píxeles de una amplia rampa de dos tonos que se desliza lentamente para que el marco visible siga cambiando de tono.

Drifting mesh tilt

2713Drifting mesh tiltBotonesUna píldora sostenida con una ligera inclinación tridimensional mientras suaves rayos de luz flotan debajo de su superficie, balanceándose entre dos posturas mientras flota o está enfocada.

Drifting halo button

2764Drifting halo buttonBotonesUn botón oscuro rodeado por un marco de halo ligeramente más grande en el que una banda brillante del acento se desplaza sin cesar alrededor del perímetro, iluminando y levantando la placa al flotar.

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)