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.

20 de 20

Two face flip button
1661Two face flip buttonBotonesUn botón con dos caras apiladas que giran entre sí en 3D al pasar el mouse, el frente se inclina hacia un borde elegido mientras que la parte posterior se balancea para ocupar su lugar.
Funnel vortex backdrop
1698Funnel vortex backdropFondosUn embudo de estructura metálica de anillos que se encogen y radios radiales que se vierten en una garganta iluminada, con motas que vuelven a salir.
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.
Pointer tilt card
1735Pointer tilt cardAnimaciónUna tarjeta que se inclina en 3D hacia el puntero, con un brillo que se desliza por su cara y un resorte que la vuelve a nivelar al salir.
Scanning wire grid
1744Scanning wire gridFondosUna fina rejilla de alambre en perspectiva se inclina con el puntero mientras una banda brillante la recorre formando un bucle, iluminando cada línea que cruza.
Tunnel Warp Panel
1755Tunnel Warp PanelFondosEl contenido se encuentra en la boca de un túnel de cuatro paredes mientras vigas estrechas corren por cada pared hacia el espectador.
Warp lane streaks
1760Warp lane streaksFondosUna carretera nocturna vista desde el asiento del conductor, donde dos corrientes de rayos de luz se acercan y se alejan de un punto de fuga y al mantener el puntero presionado se acelera todo.
Tilting cube field
1818Tilting cube fieldAnimaciónUna cuadrícula de cubos huecos que se inclinan hacia el puntero dentro de un radio de caída, deambulan por sí solos cuando se los deja solos y destellan hacia afuera formando anillos con un clic.
Card Shuffle Stack
1846Card Shuffle StackTarjetasUna pila de paneles ventilados que funcionan con un temporizador: el panel frontal se cae, el resto da un paso hacia adelante y el que se cayó se mueve hacia atrás.
Tilted deck button
1898Tilted deck buttonBotonesUn botón colocado en perspectiva como una llave en una plataforma inclinada, inclinándose más hacia afuera y deslizándose hacia abajo cuando se suspende y se presiona.
Consequence confirm dialog
1943Consequence confirm dialogCapas superpuestasUn cuadro de diálogo de confirmación que aparece desde un borde elegido y bloquea la página hasta que el visitante cancela o continúa explícitamente.
Tilted perspective button
2068Tilted perspective buttonBotonesUna llamada a la acción redondeada que se encuentra en una perspectiva 3D permanente y se balancea hacia el puntero a medida que cruza la placa.
Glass Block Bars
2090Glass Block BarsGráficasUn gráfico de barras representado como bloques de vidrio 3D brillantes con caras laterales y superiores en perspectiva, y un lento barrido de luz pulsando hacia arriba en la barra más alta.
Perspective reveal dialog
2204Perspective reveal dialogCapas superpuestasUn cuadro de diálogo de uso general cuyo panel se inclina desde un borde elegido en 3D y luego se aplana en su lugar para mostrar contenido arbitrario en una página atenuada.
Perspective sheen button
2582Perspective sheen buttonBotonesUn botón rectangular sólido que lleva un panel brillante translúcido sesgado en perspectiva que se aplana al flotar.
Anaglyph wobble button
2625Anaglyph wobble buttonBotonesUn botón que cuelga en un lento movimiento 3D y, cuando se mantiene suspendido o enfocado, arroja duplicados cálidos y fríos de sí mismo fuera de registro con una oscilación excesiva.
Hinged plate button
2687Hinged plate buttonBotonesDos placas de identificación idénticas se colocan exactamente una encima de la otra y se separan al flotar, como un par de puertas que giran en perspectiva.
Hinged progress button
2688Hinged progress buttonBotonesUn botón cuya cara gira hacia atrás al pasar el mouse, exponiendo una bandeja donde una barra de progreso llena ráfagas desiguales y se desvanece en todo su ancho.
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.
Extruded tilt button
2767Extruded tilt buttonBotonesUn botón de pantalla pesado inclinado en perspectiva cuyas letras huecas son extruidas por dos desplazamientos duros que giran los lados cuando la placa se balancea al flotar y se aplana cuando se presiona.
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)