Fieldbook
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 40

Cargando el índice completo de búsqueda.

Scramble text
1539Scramble textEfectos de textoTexto monoespaciado que aparece un carácter a la vez a partir de glifos rodantes detrás de un cabezal de escritura y se suelta nuevamente dondequiera que el puntero lo roce.
Split text reveal
1543Split text revealEfectos de textoUn titular cuyas palabras o caracteres surgen de una máscara de clip, borrosos y teñidos, escalonados de izquierda a derecha en el montaje y reproducidos al hacer clic.
Center out underline link
1929Center out underline linkBotonesUn enlace de navegación cuyo subrayado crece hacia afuera desde el centro hasta ambos extremos al pasar el cursor y se retrae hasta un punto cuando el puntero se aleja.
Fill sweep loading text
1959Fill sweep loading textMensajes de estadoUna etiqueta de carga cuyo contorno tenue se encuentra debajo de una copia completamente coloreada que avanza desde la izquierda, alcanza todo su ancho y desaparece, repitiéndose mientras algo se carga.
Flowing gradient headline
1962Flowing gradient headlineEfectos de textoUn titular cuyas letras están rellenas con un degradado en movimiento de dos tonos, de modo que una banda brillante se desplaza sin cesar a través de las palabras, con un suave florecimiento opcional detrás.
Gradient shift text
1970Gradient shift textEfectos de textoUna pastilla redondeada cuyo texto está relleno con un degradado de dos colores que recorre continuamente las letras de lado.
Gradient sweep heading
1971Gradient sweep headingEfectos de textoUn título grande cuyo relleno es una banda de degradado en movimiento que se desplaza continuamente de un borde al otro, dando al texto un brillo brillante y en constante cambio.
Letter roll in
1991Letter roll inEfectos de textoUna línea de texto donde cada personaje gira sobre un eje horizontal, la cara antigua se aleja mientras una cara idéntica aparece desde abajo.
Marker highlight
1995Marker highlightEfectos de textoUna frase con una banda marcadora que se desplaza detrás de ella de izquierda a derecha cuando la línea aparece por primera vez, dejando las palabras en un bloque de color.
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.
Split Reveal Hover Text
2048Split Reveal Hover TextEfectos de textoEl texto se divide en una mitad superior e inferior; Al pasar el cursor, la mitad superior se desliza y se desvanece mientras que la mitad inferior se desliza hacia arriba para completar la palabra y se invierte cuando el puntero se va.
Sweeping status text
2060Sweeping status textEfectos de textoUna palabra de estado grande que cambia a un ritmo constante mientras una banda brillante recorre sin cesar las formas de las letras.
Cube flip letters
2136Cube flip lettersEfectos de textoAl pasar el cursor sobre una línea, cada letra gira un cuarto de vuelta en 3D, una tras otra desde un origen elegido, revelando una segunda cara que lleva el mismo glifo en el acento.
Keystroke Text
2177Keystroke TextEfectos de textoEl texto aparece un carácter a la vez como si se escribiera en vivo, con un cursor parpadeante que continúa después de terminar de escribir.
Staggered Reveal Text
2242Staggered Reveal TextEfectos de textoUna oración aparece en partes escalonadas, divididas en palabras, caracteres o líneas, usando un estilo de entrada elegido, como desvanecimiento, desenfoque, diapositiva o escala.
Twinkle highlight text
2260Twinkle highlight textEfectos de textoTexto resaltado en negrita con pequeñas estrellas brillantes de cuatro puntas que aparecen y desaparecen continuamente en posiciones aleatorias alrededor y sobre las letras.
Blur in word reveal
2307Blur in word revealEfectos de textoLas palabras de una oración pasan de un desenfoque suave a un enfoque nítido, una tras otra, a medida que la oración aparece a la vista.
Cipher reveal text
2317Cipher reveal textEfectos de textoUna etiqueta que comienza codificada en símbolos aleatorios y se descifra en su texto real al verla, pasar el cursor o hacer clic.
Hover duplicate text nav
2365Hover duplicate text navNavegaciónUna lista de navegación vertical desliza cada etiqueta hacia arriba y fuera de la parte superior al pasar el mouse, mientras que una etiqueta duplicada se desliza desde abajo para ocupar su lugar.
Hover speed text ring
2367Hover speed text ringEfectos de textoUna frase situada en un anillo de letras orientadas hacia afuera que gira suavemente en reposo y cambia dramáticamente de velocidad mientras el puntero lo suspende.
Pointer scatter headline
2405Pointer scatter headlineEfectos de textoUn titular dividido en caracteres individuales que se hacen a un lado y giran a medida que el puntero los recorre, para luego volver a alinearse.
Reading highlight copy
2410Reading highlight copyEfectos de textoUn párrafo que se ilumina palabra por palabra a medida que se desplaza, dejando las palabras leídas brillantes y las no leídas atenuadas, de modo que la posición de desplazamiento también funciona como posición de lectura.
Scroll blur reveal text
2418Scroll blur reveal textEfectos de textoUn bloque de texto que comienza borroso y desplazado, luego se enfoca palabra por palabra o letra por letra la primera vez que aparece en la vista.
Typewriter caption
2457Typewriter captionEfectos de textoUn título se escribe solo un carácter a la vez a un ritmo constante, con un cursor de bloque sólido que sigue parpadeando una vez completada la línea.
Caret tail link
2508Caret tail linkBotonesUn enlace de texto silencioso con un pequeño corchete en ángulo justo después de su última letra, que se desliza hacia afuera y se subraya al pasar el mouse.
Trailing arrows text button
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.
Opposing rule text button
2537Opposing rule text buttonBotonesUn botón de texto en mayúsculas sin bordes entre corchetes por dos reglas que barren desde extremos opuestos al pasar el cursor o enfocar y retroceden por donde vinieron.
Text field
2785Text fieldCampos de entradaUn campo de texto de una sola línea con un borde suave, un anillo de énfasis, un marcador de posición silenciado y un estado deshabilitado adecuado.
Fuzzy static text
2807Fuzzy static textEfectos de textoUna palabra dibujada en un lienzo y repintada en líneas de escaneo temblorosas, zumbando como estática de televisión y distorsionándose más al pasar el mouse o presionar.
Paper fold text
2809Paper fold textEfectos de textoEl texto se divide en caracteres, palabras o líneas que se abren a lo largo de un borde de bisagra elegido con una sombra de pliegue, escalonada a lo largo de la frase.
Flowing gradient text
2814Flowing gradient textEfectos de textoUn degradado multicolor recorre continuamente el relleno de un título, opcionalmente enmarcado por una pastilla de borde degradado a juego.
Particle formation text
2816Particle formation textEfectos de textoUn lienzo de partículas diminutas que se reúnen en forma de palabra, se desplazan una vez formada y se dispersan lejos del puntero.
Sweeping shine text
2822Sweeping shine textEfectos de textoTexto lleno de un degradado tenue y una banda diagonal brillante que se mueve hacia adelante y hacia atrás como un destello de luz y puede congelarse en su lugar mientras está suspendido.
Character shuffle reveal
2825Character shuffle revealEfectos de textoCada personaje recorre una franja de glifos aleatorios como un carrete de tragamonedas antes de aterrizar en la letra real, que se revela en el desplazamiento con la repetición del cursor.
Outline draw text
2829Outline draw textEfectos de textoLas letras en pantalla se trazan una tras otra como contornos brillantes, luego un relleno sólido se desvanece detrás de los trazos para terminar la palabra.
Scroll dim text reveal
2838Scroll dim text revealDesplazamientoUn párrafo permanece atenuado y se ilumina palabra por palabra al mismo ritmo que el progreso del desplazamiento, luego se oscurece nuevamente a medida que retrocede.
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)