Catálogo de props

Generado por scripts/build-catalog.mts desde lib/catalog/. No editar a mano: npm run catalog. Versión en datos: catalog.json. Vista previa en vivo: /componentes#<id>.

Todos los componentes: import X from "@/components/ui/X", CSS una vez con import "@/components/ui/styles/kit.css", tema con los tokens --bg --fg --mut --acc --acc2 --card --ln --r en cualquier contenedor, estilo con variant (glass · solid · outline · neon · retro · terminal · minimal · dotmatrix · editorial). Las listas se pasan como texto (una entrada por línea o separadas por comas; campos con |), tal como muestran los defaults. Para escribir el separador dentro de un elemento, escápalo con barra invertida: \, (coma), \| (barra) o \; (punto y coma), p. ej. badges="+12 proyectos, 99\,5 % disponibilidad" (atributo JSX entre comillas; dentro de una cadena JS, {"…"}, la barra va doble: "99\\,5 %").

Fuentes: fontVariables de @/lib/ui/fonts (paquete: trama-ui/fonts) en el className de <html>, una vez. Se nombran con su variable (fontFamily: "var(--font-cormorant-garamond)") o con las clases ui-g-* de GuideFrame, nunca con el nombre literal ('Cormorant'): next/font registra otra familia y el texto cae a una fuente del sistema. Antes de usar los tokens de una guía para texto, mide su contraste: varias guías son medidas de webs reales y su --mut o --acc no llegan a 4,5:1.

Fondos (fondos)#

Escenas de caracteres que rellenan un contenedor.

Fondo ASCII (Studio) — AsciiBackground#

Escena procedural convertida en caracteres con asciify-engine. 15 estilos de render, hover, acabado óptico y paleta del tema.

• Rellena el contenedor: debe tener position: relative y tamaño.
• palette reinterpreta los colores con --bg, --acc y --acc2: cambia el tema y el fondo cambia.
• Las escenas marcadas con progreso cambian con la prop progress (0–1).
• Cambiar props no remonta: se aplican en caliente.

Fondo generativo (textmode.js) — TextmodeBackground#

Simulaciones por celda con textmode.js: plasma, lluvia, fuego, vida… El puntero interactúa y la paleta sigue el tema.

• Cada celda es un carácter con su propio color.
• Cambiar sketch, tamaño o fps recrea el lienzo; la paleta y la opacidad no.

Fondo de rejilla (CSS) — GridBackground#

Puntos, líneas, cruces o diagonales con CSS puro. La opción más ligera para fondos discretos. Con kind="grain" es grano de papel (ruido SVG fijo, multiplicado) para poner sobre toda la página con position="fixed", como Sleep Well Creatives. Con kind="contour" son curvas de nivel (mapa topográfico) en SVG calculadas en el servidor, como el fondo de Lando Norris.

Luz ambiental de un vídeo — AmbientLight#

El color de un vídeo (o imagen, o lienzo) de la página, muy desenfocado, detrás de todo: el fondo cambia con lo que se reproduce, como en las webs de productoras y directores. No decodifica el vídeo otra vez: copia sus fotogramas a un lienzo de 32×18 que el CSS estira y desenfoca.

• target es un selector CSS del vídeo, imagen o lienzo; se vuelve a buscar en cada muestra, así que sigue al que esté activo (.pantalla video.is-on) aunque cambie de página o de película.
• position="fixed" (por defecto) cubre toda la ventana detrás del contenido; absolute, solo su contenedor (con position).
• Coste: un drawImage diminuto fps veces por segundo. Con «reducir movimiento», una muestra cada dos segundos.
• Demo: /sitios/travesia (la luz cambia con el documental que señalas en el índice).

Efecto CRT — CrtOverlay#

Capa de monitor antiguo: líneas de barrido, viñeta, parpadeo y barra de refresco. Se superpone a cualquier contenido.

• Se coloca como hijo de un contenedor con position: relative.
• No bloquea el puntero.

Escena 3D retro — RetroCanvas#

Lienzo react-three-fiber con filtro de pixel art, ASCII y scanlines: cualquier escena 3D se ve como caracteres o píxeles con acabado de monitor CRT.

• Requiere three y @react-three/fiber (dependencias opcionales de trama-ui). Importa trama-ui/RetroCanvas, no el barrel.
• Los hijos son la escena R3F (luces + mallas); sin hijos se muestra RetroShapes. Para un <Canvas> propio, RetroFX es solo el post-proceso.
• Rellena su contenedor (position: relative y tamaño). Pausa fuera de pantalla; con prefers-reduced-motion dibuja bajo demanda.
• Pensado para ir de fondo en móvil: 30 fps (fps), 20 durante el scroll (scrollFps), dpr ≤ 1,5 en táctil y bajada adaptativa (adaptive). No le pongas backdrop-filter encima (guía §22.1).
• Los colores salen de los tokens --fg, --bg y --acc; fg, bg y accent los sustituyen.

Modelo 3D retro — RetroModel#

Carga un modelo .glb, .gltf u .obj dentro de RetroCanvas: lo centra, lo escala y le pone un material mate que se lee bien como ASCII o píxeles. Con la cámara siguiendo al ratón.

• Va dentro de RetroCanvas: <RetroCanvas pointerFx="orbit"><RetroModel src="/models/turbina.obj" /></RetroCanvas>. Requiere three y @react-three/fiber; importa trama-ui/RetroModel.
• Satélite solar detallado: /models/satelite.glb, geometría propia reproducible con node scripts/gen-satellite.mjs. Seis placas con celdas, manta térmica, cámara, radiador y parabólica; piezas nombradas y materiales incluidos. Usa material="original", tint="scene" y píxel de 1–2 px para ver el detalle. Puede abrirse en Blender sin recursos externos.
• Modelos de ejemplo en public/models/: asteroide.gltf, turbina.obj y ciudad.glb (propios, scripts/gen-retro-models.mts) y suzanne.glb y farol.glb (Khronos glTF-Sample-Assets, CC0; créditos en public/models/LICENSES.md). Los de otro dominio necesitan CORS.
• npx tsx scripts/strip-gltf.mts entrada.glb salida.glb quita texturas, UV y animaciones: tras el filtro no se ven y el archivo baja mucho (el farol pasa de 9,5 MB a 131 KB).
• material="clay" (por defecto) sustituye los materiales por un gris mate: texturas y colores apenas se ven tras el filtro y la luz sí. original conserva los del archivo (útil con tint="scene").
• Mientras carga no dibuja nada. glTF comprimido con Draco o meshopt no está soportado: expórtalo sin compresión.

Horizonte de llamas con manos — FlameHorizon#

Un horizonte de llamas que sube desde abajo, con lenguas que corren hacia arriba, el color más vivo junto al borde y un halo encima, y siluetas de manos en garra que se mecen. Con progress (0–1) sigue la coreografía de meermohsin.me para atarla al scroll: las llamas suben hasta llenarlo todo y se invierte (rojo arriba, llamas negras con manos abajo). Para portadas oscuras, conciertos, videojuegos, terror o transiciones entre secciones. WebGL a pelo, sin dependencias; colores del tema (--acc sobre --bg).

• progress manda sobre level e invert.
• hands = 0 deja solo las llamas.
• Sin WebGL, un degradado CSS a la altura del borde; con movimiento reducido, quieto.

Humo que sigue al puntero — FluidCursor#

Una simulación de fluidos (remolinos, presión, disipación) que suelta color al mover el ratón o el dedo, como la estela roja de la portada de meermohsin.me (que usa la de Pavel Dobryakov, MIT; esta es una reescritura con sus mismos pasos). Con position="fixed" cubre la ventana sin bloquear clics. Por defecto, los valores medidos en la referencia. WebGL a pelo, sin dependencias; color del tema (--acc).

• Mueve el puntero por el escenario.
• fade y drag controlan cuánto dura el humo y su movimiento; curl, los remolinos.
• Con movimiento reducido no se pinta.

Fondo de color en WebGL (manchas, cinta, haces) — GradientField#

Fondo de color animado en WebGL sin dependencias: manchas que se mezclan (mesh), la cinta iridiscente de Stripe (ribbon) o los haces de luz en diagonal de Raycast (beams). Usa los colores del tema (--bg, --acc, --acc2) y cambia con él. Media resolución, pausado fuera de pantalla; sin WebGL queda un degradado CSS.

• Rellena su contenedor (position: absolute; inset: 0) o la ventana con position="fixed".
• Con movimiento reducido o speed=0 pinta un solo fotograma.
• Pon el texto encima con contraste suficiente sobre la parte más clara del fondo; intensity baja el color.

Texto (texto)#

Titulares y cintas con efectos de texto.

Texto que se descifra — ScrambleText#

Titular que se resuelve entre glifos aleatorios (GSAP ScrambleText). El texto real está siempre en el DOM.

Frases que se escriben — Typewriter#

Titular de héroe con frases que se escriben y se borran en bucle.

Rótulo de neón — NeonSign#

Tubo de neón, contorno o sombra de píxel, con parpadeo opcional. Usa --acc y --acc2.

Titular ASCII (bitmap / FIGlet) — BitmapText#

Arte de texto generado por asciify-engine: fuente bitmap 7×7 o 21 fuentes FIGlet.

Cinta de texto — Marquee#

Filas de texto en bucle, en CSS puro y sin JS. Siete estilos y color por token.

Cabecera de sección — SectionHeader#

Sobretítulo, titular, subtítulo y regla decorativa; titular gigante y palabra de fondo opcionales.

Separador — Divider#

Separador con etiqueta. El modo texto dibuja la regla con caracteres.

Texto troceado (cinético) — SplitText#

Titular o párrafo que entra por líneas, palabras o letras, con máscara de recorte. CSS puro: el estado oculto viene en el HTML del servidor. Espera a que termine el Preloader, si lo hay.

• by=lines mide cada palabra tras cargar las fuentes y al cambiar el ancho: la entrada es por línea real, no por saltos de línea escritos a mano.
• El lector de pantalla lee una copia del texto íntegro; las unidades visuales van aria-hidden.
• Solo admite un string (no trocea texto controlado por React, guía §10).
• effect="block": una barra del color de acento tapa cada palabra y se retira descubriéndola (Lando Norris); con by=lines o words. emphasis pone las palabras entre asteriscos en la fuente de acento (titular mixto palo seco + serifa). Ver /sitios/volt.

Texto a todo el ancho — FitText#

Una sola línea que llena exactamente el ancho del contenedor (titulares gigantes de pie de página). Se reajusta al cambiar el tamaño.

Texto que se enciende con el scroll — ScrubText#

Párrafo cuyas palabras pasan de apagadas a plenas según haces scroll. Un cálculo por fotograma, sin GSAP; el lector de pantalla lo lee entero.

• Depende del scroll de la página: en el catálogo avanza al desplazar la ventana. Ver el efecto completo en /sitios/estudio.
• Dentro de un PinnedSection el párrafo no se mueve: usa scope=".ui-pin" y range={[a, b]} para que se encienda en ese tramo de la sección (portada de /sitios/plano).

Texto que se dispersa con el scroll — ScatterText#

Letras que se separan y se desvanecen al hacer scroll: la marca gigante de un hero que se disuelve (fórmula Belgrade Arbor). scope toma el progreso de la sección contenedora cuando el titular está en un contenedor sticky.

• Depende del scroll de la página; con prefers-reduced-motion se ve entero y quieto.

Tarjetas (tarjetas)#

Superficies de contenido con capas ASCII.

Tarjeta ASCII — AsciiCard#

Número bitmap, fondo ASCII (15 campos procedurales animados × 8 juegos de caracteres, texto repetido o una escena de AsciiBackground), revelado e inclinación hacia el puntero. Siete estilos.

• El color sale de --bg, --mut, --acc y --acc2 y se actualiza al cambiar de tema sin repetir el revelado.
• reveal: dissolve dibuja celdas ASCII opacas que se apagan.
• Con movimiento reducido o táctil se desactivan tilt y scramble.
• El campo animado corre a ~30 fps y solo mientras la tarjeta está a la vista; «scene» monta un AsciiBackground por tarjeta (más pesado).
• index sirve de semilla: tres tarjetas con el mismo campo no salen iguales.

Panel — Panel#

Superficie genérica con barra opcional, título, cuerpo y pie. Base de cualquier tarjeta simple.

Tarjeta de precios — PricingCard#

Plan con precio, características (incluidas y no incluidas) y llamada a la acción. Tres maquetaciones, cuatro formas de destacar (halo, invertida, borde, luz cenital), insignia sobre el borde o junto al nombre, marcas + o ✓, precio tachado y nota.

Testimonio — Testimonial#

Cita con tres tratamientos (tarjeta, suave o abierta), retrato circular con respaldo de iniciales, autor, cargo y valoración.

Tarjeta de artículo — BlogCard#

Artículo con cabecera (imagen, trama de CSS o caracteres), categoría, titular, extracto, autor y meta. Cuatro maquetaciones: apilada, horizontal, superpuesta (imagen de fondo) y mínima. Con href, toda la tarjeta es un enlace.

Tarjetas apiladas — StackedCards#

Cada tarjeta se pega arriba y la siguiente la cubre al hacer scroll. position: sticky puro; las cubiertas se encogen un poco donde hay animaciones ligadas al scroll.

Envuelve contenido (children), p. ej.: <article>Tarjeta 1</article> <article>Tarjeta 2</article> <article>Tarjeta 3</article>

• Las tarjetas necesitan fondo opaco para tapar a las anteriores.

Rejilla bento — BentoGrid#

Celdas de distinto tamaño (1×1, 2×1, 1×2, 2×2) que encajan sin huecos. CSS puro; cada celda admite título, texto, cifra grande o imagen de fondo.

Tarjeta de producto — ProductCard#

Imagen con segunda imagen al pasar el puntero, etiqueta, título, material y precio. Todo el cuadro es un único enlace con nombre claro. Sin JS: el cambio de imagen es CSS.

Marco de plano técnico — BlueprintFrame#

Borde de línea fina con regla de marcas milimétricas y cruces «+» de registro en las esquinas: la piel de las webs de producto técnico (fórmula Heron AI). Decorativo, sin JS.

Envuelve contenido (children), p. ej.: <h2>Contenido del plano</h2>

Rejilla de celdas con divisores — CellGrid#

Celdas separadas por divisores de línea fina, continuos o discontinuos, sin tarjetas ni sombras. Los divisores se dibujan con el hueco de la rejilla: sin dobles bordes con cualquier número de celdas.

Envuelve contenido (children), p. ej.: <div>Celda 1</div> <div>Celda 2</div>

Interacción (interaccion)#

Respuestas al puntero.

Botón — Button#

Botón del sistema: 6 colores (acento, neutro, éxito, info, aviso, peligro) × 5 énfasis (relleno, superficie, borde, fantasma, enlace), estados pulsado, cargando y deshabilitado, solo icono y como enlace. Siete estilos.

• intent cambia el color y tone el énfasis: son independientes, cualquier color con cualquier énfasis y estilo.
• active pone aria-pressed (botón conmutable); loading pone aria-busy y bloquea el clic; con href se pinta como <a>.
• iconOnly usa glyph como contenido y label como aria-label.

Botón magnético — MagneticButton#

Button que se desplaza (y gira un poco) hacia el puntero cuando se acerca. Sin efecto en táctil.

Cursor personalizado — GlyphCursor#

Un carácter, un anillo o un punto que persigue al puntero dentro de su contenedor. Colócalo como hijo del área donde debe actuar.

Foco que sigue al puntero — Spotlight#

Superficie con un foco de luz (y borde iluminado) bajo el puntero. Envuelve cualquier contenido.

Envuelve contenido (children), p. ej.: <h3>Pasa el puntero</h3> <p>Un foco de luz sigue tu cursor.</p>

Efectos de hover — HoverFX#

Envoltorio de hover reutilizable en cualquier contenido: elevación, escala, inclinación 3D, brillo que sigue al puntero, destello, barrido de escaneo, micro-glitch, corchetes de objetivo o subrayado.

Envuelve contenido (children), p. ej.: <PricingCard plan="Pro" />

• La mayoría de efectos son CSS puro; «tilt» y «glow» siguen el puntero con GSAP.
• Se puede combinar con Presence: HoverFX dentro, Presence fuera (o al revés) para tener entrada/salida y hover a la vez.
• Todo componente del catálogo puede envolverse así: activa el panel «FX» de la cabecera para probarlo con cualquier demo.

Área con scroll — ScrollArea#

Caja de contenido largo (registro de cambios, comentarios, salida de terminal…) con su propia barra de desplazamiento, distinta en cada estilo.

• La barra de scroll no es exclusiva de este componente: cualquier superficie ui-s--<variante> la hereda automáticamente (ver components/ui/styles/ui-kit.css).

Rascar para revelar — ScratchReveal#

Una capa que se rasca con el puntero o el dedo para descubrir lo que hay debajo: un fósil bajo el sedimento, un premio bajo la lámina (rasca y gana), una imagen bajo la niebla. Mide cuánto se ha rascado y, al pasar del umbral, la capa se retira sola y avisa (onReveal). Lo de debajo es HTML normal.

• El progreso se calcula con una rejilla de 24 × 24 celdas, sin leer píxeles del lienzo.
• En táctil captura el gesto dentro de la capa (touch-action: none): no la hagas más alta que la pantalla.
• Un botón que aparece con el foco revela sin rascar (teclado y lectores de pantalla).

Minijuego de precisión — SkillCheck#

Una aguja recorre un anillo o una barra y hay que pulsar cuando pasa por la zona buena: tras cada acierto la zona cambia de sitio y la aguja acelera. Para forzar una cerradura en un juego, cargar un golpe o una promoción con juego. Clic, toque, Espacio o Enter.

• onHit, onMiss y onComplete avisan de cada jugada; resetKey lo vuelve a empezar.
• globalKey escucha Espacio en toda la página (para un juego a pantalla completa).
• La aguja se mueve escribiendo en el DOM, sin re-renderizar; con movimiento reducido va a la mitad.

Sonido de 8 bits (interruptor y efectos) — SoundToggle#

Efectos de sonido de 8 bits sintetizados en el navegador (lib/ui/sfx: moneda, golpe, cofre, victoria…), sin archivos ni licencias, y el interruptor que los silencia en toda la web y lo recuerda. Para interfaces con juego, promociones y webs de videojuegos.

• En el código: import { playSfx } from "@/lib/ui/sfx" y playSfx("coin"). useSfx() devuelve play, muted y setMuted.
• El audio arranca con el primer sonido, que siempre llega tras un gesto: los navegadores no dejan sonar antes.
• Pulsa los efectos de abajo para oírlos.

Enlace que rueda — RollLink#

Enlace o botón cuyo texto sube y es sustituido por una copia igual al pasar el puntero o enfocar (el «rolling text» de Essor, Fenriz o K72). Con fade, la palabra que sale se funde. Solo CSS.

Cursor de página con estados — CustomCursor#

Punto que persigue al puntero en toda la página y se ve sobre cualquier fondo: lee el fondo de debajo (claro, oscuro o imagen) y cambia de color, con un contorno de contraste. Se hace aro sobre enlaces (sin tapar el texto), muestra una etiqueta con data-cursor="Ver", una imagen con data-cursor-img="/foto.jpg" (así se compone el índice de proyectos con foto: ProjectList preview="cursor"), se oculta con data-cursor="hide" y es una barra en campos de texto. Solo con puntero fino.

• Es global (position: fixed): en el catálogo actúa sobre toda la ventana mientras esta ficha está abierta.
• hideNative oculta el cursor del sistema, salvo en campos de texto.

Scroll suave (Lenis) — SmoothScroll#

Scroll con inercia de toda la página, sincronizado con ScrollTrigger. No pinta nada. Se apaga con prefers-reduced-motion y en táctil.

• Colócalo una vez, en el marco de la web. Pausar desde un menú o modal: lockScroll() de @/lib/motion/lenis.
• No está activo en el catálogo para no alterar su scroll; pruébalo en /sitios/estudio.
• Anclas (<a href="#precios">): salto animado con expo.out (de 0,6 a 1,4 s según la distancia) que descuenta la cabecera fija, escribe el #ancla y pasa el foco a la sección. Funciona también en táctil y con enabled={false} (solo anclas, scroll nativo); con «reducir movimiento», salta sin animar. Opciones: anchors={{ offset, duration, easing }}; scrollToAnchor() de @/lib/motion/anchors para hacerlo desde código.

Botón circular (también dentro de un titular) — CircleButton#

Botón de icono circular. Con inline mide lo mismo que la letra y se coloca dentro de un titular («…interior design studio ⊙»). Enlace o botón real, con foco visible y nombre accesible.

Collage de pegatinas arrastrables — StickerCollage#

Pegatinas vectoriales que flotan sobre un titular y se pueden arrastrar, apilar y mover con las flechas (Uncommon). Decorativo: el texto que importa va en el contenido, no en las pegatinas.

Estela de imágenes bajo el cursor — ImageTrail#

Al mover el puntero por la zona van apareciendo fotos donde está, que crecen y se desvanecen: uno de los efectos más repetidos en portfolios premiados. Decorativa (las imágenes van aria-hidden); lo que cuenta va en el contenido, por encima.

• Solo con puntero fino y sin movimiento reducido; en táctil queda el contenido.
• Recicla 10 <img>: no crea nodos al mover el ratón.

Antes / después con control — BeforeAfter#

Comparador de dos imágenes (o de dos contenidos cualesquiera): un corte que se arrastra, accesible como deslizador (flechas, Inicio, Fin), o un botón que alterna entre los dos (día/noche, apagado/encendido). Para limpiezas, reformas, tratamientos y restauraciones; las dos imágenes con la misma luz.

• Lo pedían la docs/11 §5 (clínicas, reformas) y la docs/15 (Colonia Zacamil); la primera web que lo usa es Quilate (limpieza de una joya).

Transiciones (transiciones)#

Cambios de escena y de sección.

Transición de escena — SceneFlash#

Barrido, iris, rebanadas, persianas o mosaico de píxeles para acompañar un cambio de sección. Usa --acc y --acc2.

Transición de página — PageTransition#

Anima la ventana entera al navegar (todo salvo la cabecera y lo que envuelvas en PageTransitionPersist) con la View Transitions API y el <ViewTransition> de React, sin configurar en el App Router de Next: fundido, deslizamiento, barrido de color, línea de escaneo, pila de barras, persianas, disolución por píxeles, encendido CRT, glitch, iris o escritura de terminal. CSS puro con los tokens del tema; una animación fija o una por tipo de navegación.

Envuelve contenido (children), p. ej.: {/* contenido de la página */}

• Anima la raíz del documento (::view-transition-old/new(root)): fondos fijos, pie y márgenes incluidos. En este ejemplo, al cambiar de página se anima toda la ventana del catálogo; las cabeceras quedan quietas.
• Va en cada page.tsx (o en un template.tsx), nunca en un layout. La animación la elige la página de destino. Sin nodos extra en el DOM.
• scan: una línea brillante del color tone recorre la pantalla (de arriba abajo por defecto) y deja detrás la página nueva, sin apagado CRT. stack: una pila de barras de grandes a pequeñas (--acc, --acc2 y su mezcla) tapa la página, se comprime y se va por el lado de direction.
• Tipos de navegación: nav-forward usa kind con direction y nav-back la dirección contraria (slide, wipe, scan, stack; sin direction —«auto» en este catálogo—, down en scan y left en el resto); trama-<animación> (p. ej. trama-glitch, o pageTransitionType("glitch")) elige la animación de esa navegación; types={{ "mi-tipo": "iris" }} añade los tuyos. En Next: <Link transitionTypes={[NAV_FORWARD]}>.
• Cabecera, barra o cualquier elemento fijo que deba quedarse quieto: envuélvelo en <PageTransitionPersist name="cabecera"> (un name único por elemento).
• Los pseudo-elementos de la transición heredan de <html>, no del contenedor del tema: PageTransition copia en <html>, mientras dura la navegación, el tema de la página nueva (acento, texto y fondo pintado), leído en el centro de la ventana o en el contenedor de themeFrom. Así una web con tema propio dentro del sitio barre con su color. --ui-vt-page fija el fondo a mano.
• Con «reducir movimiento», solo un fundido de 120 ms. Sin soporte (React sin ViewTransition, navegador sin la API) la página cambia sin animar.

Transición de elemento — ElementTransition#

Las mismas 11 animaciones de PageTransition, pero sobre la caja de un elemento suelto (una tarjeta, un panel, el contenido de una pestaña) cuando entra o sale dentro de una transición de React. Incluye SharedTransition para elementos compartidos que se transforman de una vista a otra.

Envuelve contenido (children), p. ej.: {/* el elemento que entra o sale */}

• Anima al montarse o desmontarse dentro de startTransition, una navegación o un <Suspense>: para cambiar de contenido, cambia su key. Sin nodos extra en el DOM.
• Mismos kind, direction, pace, tone y types que PageTransition, y los mismos tipos de transición (nav-forward, nav-back, trama-<animación>).
• Elemento compartido: <SharedTransition name={foto-${id}}> en la miniatura del listado y en la imagen de la ficha; al navegar de una a otra, el navegador la transforma de una caja a la otra por encima de la animación de página. fit="cover" si las dos cajas tienen distinta proporción; layout para que también se deslice al reordenar o filtrar en la misma vista.
• React no forma la pareja si el elemento de la vista de salida estaba fuera del viewport (una tarjeta por debajo del pliegue): entonces solo cambia de página.
• Con «reducir movimiento», solo un fundido de 120 ms. Sin soporte, el cambio es inmediato.

Texto que viaja palabra a palabra — SharedText#

El mismo texto en dos vistas (la marca pequeña de la cabecera y el titular gigante de otra página, o el título de un índice y el de su ficha): al cambiar de una a otra, cada palabra vuela a su sitio nuevo con un retraso escalonado, por encima de todo. View Transitions API; el tamaño y el color los pone el CSS de cada vista.

• Mismo name y mismo text en las dos vistas; cada palabra se llama ${name}-0, ${name}-1… y tiene que ser única en cada página.
• Anima en una navegación o dentro de startTransition (como en este ejemplo). Las palabras van con z-index 130: por encima de la página, de los fijos y de un Traveler (un titular sobre su vídeo).
• React no forma la pareja si la palabra de la vista de salida estaba fuera del viewport: entonces solo cambia.
• Cada palabra lleva ui-stext__w--<n> para darle estilo propio (la segunda en cursiva, por ejemplo). Los lectores de pantalla leen el texto entero una vez.
• Demo: /sitios/travesia (título del índice → titular de la ficha, y la marca de la cabecera → titular de la productora).

Elemento que viaja entre rutas — Traveler#

Un elemento que no desaparece al navegar: vive en el layout (TravelStage) y cada página marca con TravelSlot la caja que ocupa en ella. Al cambiar de ruta, el navegador lo lleva de una caja a otra (posición, tamaño y proporción) con la View Transitions API, con el contenido en directo: un vídeo sigue sonando, un lienzo sigue animando. Para reproductores que se encogen a una esquina, marcas que pasan del titular a la cabecera o una imagen que crece hasta ser la portada.

Envuelve contenido (children), p. ej.: {/* lo que viaja: un <video>, un lienzo, la marca… */}

• En una web: <TravelStage> en el layout envolviendo a los <Traveler id="reel"> y a {children}; en cada página, <TravelSlot id="reel" at="mini" className="…" /> con el tamaño y el sitio por CSS. La página que no tenga hueco lo deja invisible e inerte (sigue vivo).
• El viajero lleva data-at con el nombre del hueco: su CSS cambia de aspecto en cada sitio (esquinas, controles). useTraveler(id) da ese nombre en React; onMove avisa al cambiar.
• blend="live" (por defecto) muestra solo el estado nuevo, en directo, cambiando de caja: ideal para vídeo y lienzos. crossfade funde el viejo con el nuevo (si el contenido cambia de forma). fit="cover" recorta si cambia la proporción; stretch estira (texto o SVG con la misma proporción).
• Huecos position: fixed (mini reproductor en una esquina, cabecera fija) y dentro de sticky funcionan. Con varios huecos a la vez gana el de mayor priority.
• Dentro de una misma página (modo cine, ampliar): monta otro hueco dentro de startTransition, como en este ejemplo.
• Con «reducir movimiento», cambia de sitio con un fundido de 120 ms. Sin la API, salta de caja sin animar. Demo completa: /sitios/travesia.

Revelado de contenido — Reveal#

Revela lo que envuelve al montar, al entrar en pantalla o siguiendo el scroll: 7 efectos × 4 direcciones, escalonado de hijos o de palabras/letras, curvas con rebote y repetición al volver a entrar.

Envuelve contenido (children), p. ej.: <Card /> <Card /> <Card />

• Con «inview» y «scroll», desplaza el escenario: el contenido empieza debajo.
• «stagger» escalona los hijos directos (aquí, las tres tarjetas); «split» trocea un texto plano (aquí, el titular).
• El estado oculto viene en el HTML del servidor: no hay parpadeo antes de hidratar. Sin JS o con movimiento reducido se ve directamente.
• Al terminar no deja transform/filter/clip-path: un Modal o Drawer dentro sigue funcionando.

Aparición / desaparición (hacker) — Presence#

Envuelve cualquier contenido y anima su entrada y salida: capas de glifos que se descifran, glitch con separación RGB y corrupción, datamosh, fragmentos, encendido CRT, parpadeo de neón, estática de TV, censura o arranque de sistema.

Envuelve contenido (children), p. ej.: <Panel title="ACCESO_CONCEDIDO.sh" body="usuario: root…" variant="terminal" />

• El contenido está siempre en el DOM; con movimiento reducido se muestra u oculta sin animar.
• Con «Bucle automático» activado se repite sola; desactívalo para controlarla con «Mostrar contenido».
• chars, celda y rastro solo aplican a los efectos «ascii-*»; columnas a fragmentos; bandas a datamosh; alto de barra y texto a censura; líneas a arranque.
• 13 efectos, 8 estilos de superficie para el contenido de ejemplo: 104 combinaciones.

Preloader — Preloader#

Pantalla de entrada con contador, palabras o barra; bloquea el scroll, se salta con clic o Esc y avisa a SplitText para que sus textos entren al abrirse. Solo la primera visita de la pestaña por defecto. Para webs con 3D, carga real: baja los modelos contando bytes (assets), adelanta los fragmentos de JS de las escenas (modules) y espera a que el lienzo pinte (waitFor), con una animación propia (art).

• Cubre toda la ventana (position: fixed). En el catálogo se lanza al pulsar «Repetir animación» con once=always.
• Carga real (Quilate, Ánima, Cota, Maravillas, Runa): assets={["/models/x.glb"]} modules={[() => import("./scene")]} waitFor={{ root: ".ui-pcloud__gl", ready: ".is-on" }} art={<svg…/>}; el arte lee var(--p) de 0 a 1.

Sección fijada con progreso — PinnedSection#

Se queda fija mientras haces scroll y publica su progreso (0 → 1) en la variable CSS --pin-p para que los hijos se muevan, cambien de opacidad o se recorten con ella. position: sticky, sin GSAP.

Envuelve contenido (children), p. ej.: <h2 className="titulo">Título</h2>

• Ejemplo de CSS: .titulo { transform: translateX(calc(var(--pin-p) * -40vw)); }
• Ocupa (length + 1) alturas de ventana en el documento.

Parallax — Parallax#

Mueve su contenido a distinto ritmo que el scroll (profundidad). Sin GSAP; se apaga con movimiento reducido. Para imágenes: el contenedor recorta y el hijo es más alto.

Envuelve contenido (children), p. ej.: <img src="…" alt="" />

Tarjeta de medios que crece con el scroll — ScrollExpand#

Una tarjeta de medios (vídeo, imagen, lienzo 3D) que crece con el scroll de pequeña a pantalla completa mientras la sección se queda fija: el reel de lusion.co, que sale de una tarjeta del texto y acaba a sangre, o una tableta que se convierte en la escena. Llega inclinada como un plano en 3D y se endereza al crecer; encima, un titular o «PLAY REEL» que crece con ella. Todo se interpola en CSS desde un solo avance con la tubería de scroll del kit (meseta, curva y seguimiento amortiguado, docs/42). Sin WebGL.

• Ocupa (length + 1) pantallas de scroll: en el catálogo, desplaza la página para verla crecer.
• from y offset: tamaño y posición iniciales; inset y radius: el final.
• Con movimiento reducido, ya crecida.

Escenario por capítulos con fallo de señal — ChapterStage#

Escenario fijado al scroll para contar algo por capítulos: una palabra gigante por capítulo que se releva dentro de una máscara (la que sale sube con curva en S, la que entra llega desde abajo frenando), una tarjeta central con la imagen del capítulo que sufre un fallo de señal (separación de color, desgarros, líneas) en cada relevo, una sala en perspectiva dibujada con líneas, la lista del capítulo y la barra de capítulos. Coreografía medida en meermohsin.me con la medida del DOM de cine:capture (docs/30). Fijado al scroll de la página o controlado con progress (0–1). Colores del tema; sin WebGL, imagen y líneas en SVG.

• Requiere three y @react-three/fiber: se importa por subruta, trama-ui/ChapterStage.
• Sin progress se fija al scroll: ocupa (suma de perChapter + 1) pantallas.
• perChapter admite una duración por capítulo, en pantallas.

Trazo que se dibuja (firma, subrayado, círculo) — LineDraw#

Un trazo SVG que se dibuja solo al entrar en pantalla, al montar o siguiendo el scroll: firma, subrayado, círculo o flecha a mano alzada, o cualquier trazado propio (d + viewBox). La firma sobre la foto de Lando Norris. Decorativo (aria-hidden): el texto va aparte.

• Cada tramo (M…) se dibuja después del anterior, con el tiempo repartido por su longitud real.
• trigger="scroll" avanza entre el 90 % y el 35 % del alto de la ventana y se borra al subir.
• Sin JS o con movimiento reducido el trazo se ve completo.
• tube pinta el trazo como una cinta 3D (sombra, cuerpo y brillo): con grosores de 30 a 120, como las cintas de lusion.co. color fija un color propio y scrollRange el tramo de la ventana.
• Con trigger="scroll" el avance sigue al scroll amortiguado con la sensación de la página (docs/42).

Tema que cambia por sección — ThemeScroll#

Contenedor cuyo tema cambia según la sección que cruza el centro de la ventana (oliva → hueso → negro en Lando Norris). Cada sección elige su tema con data-theme; cambian los tokens, así que todo lo de dentro (también una cabecera fija) cambia con ellos, y el fondo se funde.

• Depende del scroll de la página: en el catálogo, desplaza la ventana con la ficha a media altura. Ver /sitios/volt.
• Cada tema es parcial (bg, fg, mut, acc, acc2, card, ln): lo que no pongas se hereda.
• Elige colores que se lean en todos los temas: el contenido no cambia, solo sus tokens.

Luz que cambia según la finalidad de la sección — LightScroll#

Contenedor con una luz detrás del contenido que cambia con la sección en pantalla según para qué sirve: foco con destellos para emocionar, luz de día difusa para comparar con honestidad, rasante para leer un grabado, lámpara cálida para conversar. Cada sección elige su toma con data-light; la luz se describe con magnitudes físicas (kelvin, dureza, dirección) y se publica en variables CSS y en useLight() para que una escena 3D se ilumine igual.

• Nueve tomas documentadas en LIGHT_PRESETS (lib/ui/light.ts): vitrina, fuego, honesta, calida, rasante, lampara, taller, lupa y memoria. Fuentes en docs/19 §5 (GIA, conservación, fabricantes de vitrinas).
• cue fuerza una toma e ignora el scroll: un paso de un configurador o un conmutador «luz de día / cálida».
• Con movimiento reducido la luz cambia sin fundido, no sigue al puntero y no hay destellos. Funciona mejor sobre fondos oscuros o medios.
• En el catálogo va con position="absolute"; en una web, fixed (la luz es de la ventana). Ver /sitios/quilate.

Datos (datos)#

Cifras, gráficos, terminales y tablas.

Cifra ASCII que cuenta — StatCounter#

Número grande en fuente bitmap de asciify-engine que cuenta hacia arriba con GSAP.

Gráfico ASCII — AsciiChart#

Barras verticales, horizontales, área o sparkline dibujados con caracteres, con animación de crecimiento.

Terminal que escribe sola — TerminalTyper#

Terminal con escritura carácter a carácter. En estilo retro es un monitor de fósforo con el color de --acc.

Línea de pasos — Timeline#

Proceso, hoja de ruta o historial en vertical, con marcadores numerados, punto o carácter.

Tabla de datos — Table#

Tabla a partir de texto CSV. La cabecera y las filas se adaptan a la variante.

Bloque de código — CodeBlock#

Código con cabecera, numeración de línea opcional y botón de copiar. Sin resaltado de sintaxis.

Cuenta atrás — Countdown#

Cuenta atrás hasta una fecha (un evento, un lanzamiento, unas rebajas): días, horas, minutos y, si quieres, segundos. Las cifras entran con un desplazamiento al cambiar; al llegar a cero enseña el texto de «hecho». Se calcula en el navegador (antes de hidratar, guiones) y el texto para lectores de pantalla se actualiza al minuto. Nació en la fiesta de Halloween de /sitios/anima.

• La fecha lleva su zona horaria (+01:00, Z…): así la cuenta es la misma vista desde cualquier sitio.

Hora local — LocalTime#

«Madrid 14:32»: la hora de una ciudad, detalle habitual en estudios. Se pinta al montar, sin desajuste de hidratación.

Tarjeta de indicador (KPI) — KpiCard#

Etiqueta, cifra, variación con color semántico y mini gráfica. El color nunca es la única señal: la variación lleva signo y flecha.

• lowerIsBetter invierte los colores cuando que baje es bueno (bajas, tiempos de respuesta).

Gráfico (líneas, áreas, barras) — Chart#

Gráfico en SVG sin librerías: escala «bonita», animación de trazo, guía con valores al pasar el puntero o con las flechas. Los datos van además en una tabla oculta para lectores de pantalla.

• Máximo recomendable: 4 series. Tonos: acc, acc2, fg, mut.

Tabla de datos interactiva — DataTable#

Ordena al pulsar la cabecera (aria-sort), busca en todas las columnas, selecciona filas y pagina. Datos como array de objetos; celdas a tu manera con render.

• Para datos estáticos en CSV, Table. La búsqueda, el orden y la página se anuncian con aria-live.

Ficha de datos (clave-valor) — MetaTable#

Datos clave-valor en una caja de línea fina (fechas, lugar, superficie, plazo). Es una lista de definiciones (<dl>): los lectores de pantalla leen cada pareja. Sin JS.

Horario con estado (abierto ahora) — OpeningHours#

«Abierto ahora · cierra a las 20:30» calculado en la zona horaria del negocio, con tramos partidos, días cerrados, festivos y aperturas especiales. La semana se pinta en el servidor y el estado al montar. openingHoursSchema() da el mismo horario en schema.org para el JSON-LD.

• El estado depende de la hora del navegador convertida a la zona del negocio: un visitante de otro país ve si abre según la hora de allí.
• Para la ficha de Google y la búsqueda con IA: <JsonLd data={{ "@type": "Bakery", openingHoursSpecification: openingHoursSchema(hours, exceptions) }} />.

Horario de clases — ClassSchedule#

Clases de gimnasio, estudio o academia en los próximos días: filtro por disciplina y nivel, plazas libres, lista de espera y reservas hechas. No guarda nada: las reservas entran por bookings y salen por onBook. Un día en filas o la semana en columnas.

• Las reservas las guarda la web (estado, localStorage o servidor): pásalas en bookings y actualízalas en onBook(clase, fecha, espera).
• Los días se calculan en el navegador para no desajustar la hidratación.
• Una clase de hoy cuya hora ya llegó sale como «Ya empezó» (startedLabel) y no se puede reservar.
• Con useMembership (lib/commerce/membership): bookings={socio.bookings} y onBook={(c, d, espera) => socio.book(c.id, d, espera)}; MemberArea las enseña y las anula.

Cartelera de funciones — EventLineup#

Cartelera de funciones, conciertos o eventos por fecha: agrupada por mes, con la fecha grande, el género, la hora, el precio desde y el estado (últimas mesas, agotado, cancelado), y chips para filtrar por género. Cada función enlaza a su ficha o a la reserva.

• events: id, title, date (ISO), time, genre, blurb, image, price, status (open, few, soldout, cancelled), left y href.
• Con ShowBookingFlow se reserva mesa para la función. Ver /sitios/la-tramoya/cartelera y docs/57.

Programas por convocatoria — CohortList#

Programas de academia, escuela o viajes con convocatorias: nivel, formato en chips, fechas de cada convocatoria, estado (plazas abiertas, últimas plazas, próximamente) y botón para solicitar plaza. En filas o en tarjetas.

Código QR — QRCode#

Código QR en SVG generado en el propio componente (sin dependencias ni servicios externos; modo byte UTF-8, versiones 1–10, niveles L/M/Q/H). Módulos cuadrados, en puntos (dot matrix) o redondeados, en el color del tema. Para la carta de cada mesa, el enlace de reserva o la ficha de una pieza en el escaparate.

• Comprobado con un decodificador real (OpenCV): todas las versiones y niveles, en las tres formas. Los buscadores de las esquinas van siempre cuadrados: redondeados o en círculo, OpenCV no los encuentra.
• En un tema oscuro, contrast="auto" pinta módulos oscuros sobre un cuadro claro (--fg): un QR claro sobre fondo oscuro no lo leen todos los lectores.
• Para imprimir: contraste alto entre el color de los módulos y --bg, al menos 2 × 2 cm y el margen de 4 módulos alrededor.

Navegación (navegacion)#

Barras, pestañas y acordeones.

Barra de navegación — NavBar#

Barra de navegación completa: siete disposiciones (o piezas en el orden que quieras), seis formas de barra, submenús desplegables o mega menú con categorías, barra de búsqueda o paleta ⌘K, menú móvil propio, anuncio, dos llamadas a la acción y comportamiento al hacer scroll.

• Enlaces como texto, una sección por línea: Sección > Hijo|descripción|icon:nombre; Hijo=/ruta. Dentro de un submenú, #Categoría abre una columna con título. Etiqueta=#id es un enlace real y Etiqueta [nuevo] lleva insignia.
• layout elige una disposición; slots la sustituye pieza a pieza: brand, links, search, actions, spacer y menu separadas por espacios, | para otra fila y / para columnas alineadas a izquierda, centro y derecha. Ej.: "brand / links / search actions".
• Se pliega en menú móvil según el ancho de su contenedor (collapseAt), no de la ventana: baja «Ancho de la vista previa» para verlo.
• Con search="button" o "command" (y siempre en móvil), ⌘K / Ctrl+K y «/» abren la paleta; busca en los enlaces, sus categorías y searchItems.
• La paleta y el cajón móvil salen a document.body con los tokens copiados: un ancestro con backdrop-filter (glass, cabeceras con blur) atraparía su position: fixed.

Pestañas — Tabs#

Pestañas con teclado (←/→) y panel. El indicador de la activa cambia con el estilo.

Acordeón — Accordion#

Preguntas frecuentes con paneles animados por CSS.

Migas de pan — Breadcrumbs#

Ruta de navegación. El último elemento es la página actual, sin enlace.

Paginación — Pagination#

Números de página con elipsis cuando hay muchas. Gestiona su propia página activa.

Menú desplegable — Dropdown#

Botón que abre una lista de acciones (⋮). Para elegir un valor de formulario, ver Select en Formularios.

Progreso del scroll — ScrollProgress#

Cuánto se ha leído de la página o de un contenedor con scroll. Se ancla a cualquier borde o esquina (de la ventana o de su contenedor) o va en el flujo, como barra, tramos, puntos, caracteres o anillo.

• Por defecto mide la página y se fija arriba de la ventana: <ScrollProgress /> en el layout basta.
• target="parent" mide el ancestro con scroll más cercano; un selector ("#articulo") mide ese elemento. Con position="absolute" se ancla al contenedor con position: relative.
• El avance se escribe como variable CSS en un rAF, sin re-renderizar React; con prefers-reduced-motion no se suaviza.
• En la vista previa la barra sigue la caja con scroll, no la página.

Menú a pantalla completa — FullscreenMenu#

Botón [menu] que abre un menú de pantalla completa: la cortina baja y los enlaces suben uno a uno. Si el botón está en un <header>, la cabecera NO se mueve: el menú se abre debajo y el mismo botón pasa a [close] sin cambiar de sitio ni de tamaño. Cierra con Esc, pausa el scroll sin que salte la página y deja inerte lo que queda tapado. Opciones: trigger="burger" (icono que se cruza en ✕), triggerHover="fill" (el acento baja desde arriba al pasar, como el botón de K72), cover (llega hasta arriba aunque haya cabecera, que queda encima), backdrop="blur" (vidrio), align="center" (enlaces centrados en la tipografía de titulares), rules (filetes que se dibujan), linkHover="marquee" (la fila gira a una banda del acento con su frase corriendo, como K72) y reveal="stairs" (se abre en escalera). Formas (layout): full (toda la ventana), sheet (panel lateral), drop (persiana desde arriba), island (tarjeta flotante, abajo en el móvil); las tres velan la ventana entera, cabecera incluida, y traen su fila de cierre y split (enlaces y un aside con foto o datos). También reveal circle (círculo desde el botón), slide y fade; tone acc (panel del acento con el texto que mejor se lee) o fg (invertido); size lg/md/sm; numbered (01, 02…); y los botones text (el texto sin corchetes, que rueda al cambiar), count (texto con el número de enlaces volado), lines (tres rayas desiguales), dots (nueve puntos que se quedan en ✕), plus (cruz que gira), ring (rayas en un círculo fino) y pill (píldora del acento); el cierre de la fila propia del menú repite el mismo botón. Al pasar por un enlace, además de color y marquee: slide (se desplaza y asoma una flecha) y dim (se apagan los demás). Combinadas, cada web tiene un menú móvil propio. Un enlace a la página actual («Inicio» en la portada) cierra y sube al principio; con el menú abierto, la ActionBar fija se aparta.

Cabecera que se esconde al bajar — HideOnScroll#

Envoltorio de cabeceras fijas: se esconde al bajar, vuelve al subir o llegar arriba, y no se esconde si un descendiente tiene el foco ni con movimiento reducido.

Envuelve contenido (children), p. ej.: <nav>…tu cabecera…</nav>

• Va fijo arriba de la ventana; en el catálogo solo se muestra su uso. Ver en /sitios/estudio.

Indicador de sección — SectionIndex#

«02 / 05 · Servicios» fijo en una esquina, siguiendo la sección que cruza la mitad de la pantalla. Marca tus secciones con data-section.

• Necesita secciones con data-section en la página; en el catálogo no hay ninguna. Ver en /sitios/estudio.

Marco de aplicación — AppShell#

Barra lateral con grupos (plegable a iconos), barra superior y contenido con su propio scroll. En pantallas estrechas la barra pasa a panel con botón (Esc y fuera cierran). Los enlaces son <a href> reales con aria-current.

• height admite 100svh (página entera) o un valor fijo cuando va dentro de otra cosa.

Filtros y orden — FilterBar#

Grupos de chips (aria-pressed) con contador, selector de orden, número de resultados anunciado con aria-live y «Quitar filtros». Controlada: el estado vive en tu página. Con layout="sentence" filtra con una frase («Fabricamos [qué] para [sector]», como Pentagram): un desplegable nativo por grupo dentro del texto.

• En frase, cada grupo admite un valor; FilterGroup.any es el texto de «sin filtro». Guarda el estado en la URL si el listado es largo (ver /sitios/vertice/soluciones).

Navegación «isla» — IslandNav#

Píldora flotante centrada arriba, con vidrio esmerilado, que agrupa menú, marca y acción (fórmula Belgrade Arbor). Deja pasar los clics fuera de la píldora. Con un FullscreenMenu en leading, el menú se abre debajo de la isla (o la cubre hasta arriba con cover). Con brandAlign="exact", la marca queda en el centro exacto de la píldora aunque los lados midan distinto (Quilate: hamburguesa a la izquierda y «Pedir cita →» a la derecha).

• Es position: fixed; aquí va contenida en el recuadro de puntos. En una web real cuelga de la ventana.

Navegación «isla» con modelo 3D — ModelNav#

IslandNav con un modelo 3D acoplado en el centro: un medallón de vidrio que sobresale de la píldora y lleva cualquier escena de react-three-fiber (model). Se inclina hacia el puntero; dentro del modelo, useModelNavPointer() dice dónde está el puntero y lo cerca que pasa (near), para reaccionar (abrir la boca, brillar…). Sin model, una IslandNav normal: útil para quitarlo en la portada si allí ya hay un 3D grande. three solo se descarga cuando hay modelo; sin WebGL o con movimiento reducido, se ve la marca. Nació en /sitios/anima (la calavera pirata con sombrero en las páginas interiores).

• Es position: fixed; aquí va contenida en el recuadro de puntos.
• La marca sigue siendo el enlace y el nombre accesible: el medallón no recibe clics.

Pestaña de borde — EdgeTab#

Pestaña fija pegada al borde de la ventana con el texto en vertical: una llamada a la acción siempre a mano que no ocupa la cabecera. Enlace o botón real con foco visible.

• Es position: fixed; aquí va contenida en el recuadro de puntos.

Barra de acciones en móvil — ActionBar#

Llamar, WhatsApp, cómo llegar y la acción principal (reservar, pedir, pedir cita) fijos abajo en móvil, en la zona del pulgar: objetivos de 56 px, safe-area-inset-bottom y un hueco al final de la página para no tapar el pie. Por encima de 760 px se oculta (show="mobile"). Con soft, sin bandeja ni botón relleno: vidrio que se difumina hacia arriba, acciones iguales e iconos con brillo (la principal, en el acento).

• En el catálogo va «en el flujo» para verla en la ficha; en una web, position="fixed" (el valor por defecto).
• Una sola acción primary: es la que el negocio quiere que hagas (B15 en docs/11).

Formularios (formularios)#

Campos, interruptores y deslizadores.

Campo de texto — TextField#

Entrada con etiqueta, ayuda, prefijo y estados de error o éxito. El foco usa --acc. Con multiline dibuja un textarea (ver Formulario de contacto).

Interruptor — Toggle#

Interruptor accesible. Retro y terminal lo muestran como texto [ON ]/[OFF].

Deslizador — RangeSlider#

Deslizador con pista y pulgar propios de cada estilo.

Desplegable — Select#

Lista de opciones con estilo propio (no un <select> nativo): mismo aspecto en los 8 estilos, abierto o cerrado.

Grupo de casillas — CheckboxGroup#

Casillas independientes. Retro y terminal las muestran como texto [x]/[ ].

Grupo de opciones — RadioGroup#

Selección única entre varias opciones. Retro y terminal las muestran como texto (•)/( ).

Pasos — Stepper#

Indicador de progreso por pasos (alta, checkout, onboarding…). No gestiona el contenido de cada paso.

Código de verificación — OtpInput#

Casillas de código (SMS, autenticación en dos pasos): el foco avanza solo al escribir.

Selector de cantidad — QuantityStepper#

− y + con el producto nombrado en cada botón («Quitar una unidad de Taza») y el valor anunciado al cambiar.

Selector de variante (color, talla) — OptionPicker#

Círculos de color (con su nombre accesible) o chips de texto. Botones de radio nativos: flechas para moverse, la elegida se anuncia y las agotadas quedan tachadas y deshabilitadas.

Cierre del pedido — CheckoutFlow#

El pedido en pasos: datos, entrega (envío a casa con dirección o recogida en tienda; sin este paso si es digital) y pago, con un resumen al lado que deja cambiar cantidades. El pago se simula con validación de verdad: titular, número de tarjeta (Luhn), caducidad futura y CVC, o «pagar al recoger». Confirma con número de pedido y vacía el carrito. No cobra: conecta onOrder a tu pasarela.

• Las líneas vienen de useCart (como CartDrawer): lines, onQty y onClear. Pon su página en el checkoutHref del carrito.
• Para probar: tarjeta 4242 4242 4242 4242, cualquier caducidad futura y un CVC de tres cifras.
• delivery="digital" para lo que no se envía (licencias, archivos, señales de reserva): dos pasos, sin gastos de envío y la entrega por correo. Ver /inspiraciones/turia/licencias y /inspiraciones/trocha/reservar (docs/60).
• Ver /inspiraciones/patron/tienda (bolsa, ficha y pedido) y docs/56.

Solicitud de plaza — EnrollmentFlow#

Solicitud de plaza en un curso, programa o viaje por convocatorias: elegir convocatoria (las completas o próximas pasan a lista de espera), los datos con nivel y una pregunta, y la señal para reservar la plaza con pago simulado (validación de tarjeta). Confirma con número de solicitud y la guarda en este navegador. Va con CohortList en la ficha del programa.

• cohorts: label, dates, status (open, few, soon, closed) y seats. Las soon y closed piden lista de espera, sin pago.
• Para probar el pago: 4242 4242 4242 4242. Ver /inspiraciones/melena/academia y docs/56.

Petición de propuesta — BriefFlow#

Petición de propuesta o presupuesto en pasos: qué necesitas (uno o varios servicios, presupuesto y plazo), el proyecto en una pregunta abierta y los datos de contacto (con empresa y teléfono si se piden). Confirma con una referencia y la guarda en este navegador. Para agencias, estudios, formación a medida, eventos y fabricantes.

• services: label y hint; se eligen uno o varios. initialServices marca alguno al llegar (por ejemplo, desde la ficha de un servicio).
• Con onSend(brief) se manda a un servidor; sin él, solo se guarda en storageKey. Ver /inspiraciones/ahora/empresas y docs/56.

Plano de sala — SeatMap#

Plano de una sala para elegir mesa: el escenario, las mesas en su sitio con su zona (color y suplemento en la leyenda), las ocupadas tachadas y las que no caben para los comensales apagadas. Cada mesa es un botón con nombre completo; sin onChange, el plano es de solo lectura.

• tables: id, label, zone, seats, x e y (en % del plano) y shape (round, square, bar). zones: id, name, price (suplemento; negativo, más barata) y color.
• Va dentro de ShowBookingFlow. Ver /sitios/la-tramoya/la-sala y docs/57.

Reserva de cena con espectáculo — ShowBookingFlow#

Reserva de mesa para una función: la noche, los comensales y la mesa en el plano (SeatMap, con las ocupadas de esa noche), el menú, los datos y el pago de la señal o del total (simulado, con validación de tarjeta). Confirma con la entrada en QR y la opción de añadirla al calendario; la guarda con useShowBookings (lib/commerce/shows).

• initialEvent e initialTable llegan elegidos (desde la ficha de la función o el plano). Para probar el pago: 4242 4242 4242 4242.
• Ver /sitios/la-tramoya/reservar y docs/57.

Alta de socio — MembershipFlow#

Alta en un plan de gimnasio, estudio o club en pasos: plan, datos (con fecha de nacimiento para la edad mínima) y pago del primer mes con matrícula opcional (simulado, con validación de tarjeta). Confirma con el pase de socio en QR y guarda el plan con useMembership (lib/commerce/membership), que comparten MemberArea y la reserva de clases.

• Con ClassSchedule: onBook llama a useMembership().book y bookings lee sus plazas. Ver /inspiraciones/nucleo (bonos, clases y mi cuenta) y docs/56.
• Para probar el pago: 4242 4242 4242 4242.

Mi cuenta de socio — MemberArea#

La cuenta de un socio: el plan con su pase en QR (o una invitación a darse de alta), las plazas reservadas y las listas de espera por fecha (anular hasta cutoffHours antes) y la baja del plan con confirmación. Lee useMembership.

• Date de alta en la ficha de MembershipFlow y el plan aparece aquí (comparten storageKey).

Selector de fecha y hueco — DatePicker#

Calendario en línea para un día (cita, encargo, recogida) o un rango (hotel), con antelación mínima, días cerrados, festivos y los huecos del día elegido. Cuadrícula ARIA con teclado completo (flechas, Inicio/Fin, RePág/AvPág). Valores en ISO: «2026-10-24» o «2026-10-24/2026-10-27».

• La demo: domingos cerrados, encargo desde mañana y huecos con disponibilidad que cambia por día (slots como función).
• min y max aceptan una fecha ISO o días desde hoy: min={2} = 48 h de antelación.
• Para pedidos rápidos (recoger hoy o mañana): shortcuts={4} calendar="collapsed" — los próximos días disponibles como botones y el calendario solo si se pide (ver /sitios/almibar/pedido).

Reserva de cita — BookingFlow#

Reserva de cita en pasos (peluquería, barbería, estética, consulta): local si hay varios, servicio y profesional (o «me da igual»); día y hueco con DatePicker; datos con validación; y confirmación con «Añadir al calendario». Los huecos dependen de la duración del servicio, del cierre de cada día y de las citas ya guardadas, y un resumen al lado sigue la elección. Guarda en localStorage con useAppointments (lib/commerce/booking); no envía nada.

• Datos: services (id, name, minutes, price, description), staff (name, role, photo, services que hace, places donde trabaja) y places opcional. Huecos: times, closedDays, closesAt ({ 6: "14:00" }), min y max.
• Desde una carta o una ficha: initialService, initialStaff e initialPlace (de ?servicio=); reprogramar con editId (de ?editar=, el enlace «Cambiar» de AppointmentList).
• Misma storageKey en BookingFlow y AppointmentList. Ver /inspiraciones/cita/reservar (cinco locales) y docs/56.

Mis citas — AppointmentList#

Las citas guardadas por BookingFlow en este navegador, por fecha: añadir al calendario, cambiar de día y anular con confirmación. Dentro de cutoffHours los cambios se cierran, como en una agenda real. Con la lista vacía, una invitación a reservar.

• Reserva una cita en la ficha de BookingFlow y aparece aquí (comparten storageKey).
• bookHref es la página de la reserva; «Cambiar» le añade ?editar=<id>.

Feedback (feedback)#

Estados, avisos y carga.

Insignia — Badge#

Etiqueta de estado en cinco tonos, con punto opcional.

Barra de progreso — Progress#

Barra con franjas animadas o dibujada con caracteres. Retro la dibuja por bloques.

Aviso — Alert#

Mensaje inline con icono según el tipo, permanente (no desaparece solo). Para una notificación temporal, ver Toast en Overlays.

Indicador de carga — Spinner#

Anillo CSS o animaciones de texto: línea, braille, puntos, barra y bloques.

Esqueleto de carga — Skeleton#

Estado de carga que conserva el tamaño del texto o del elemento que sustituye. Se compone dentro del contenido real: imagen, título, párrafo y acción. También ofrece formas independientes y las plantillas de texto, tarjeta, avatar y tabla.

Envuelve contenido (children), p. ej.: El contenido marca el ritmo de la página

• Usa loading={loading} en cada pieza de tu contenido, dentro de su tipografía y maquetación reales. Al pasar a false se devuelve el hijo original sin envoltorios adicionales.
• El contenido de ejemplo permite reservar espacio; no se deducen datos que aún no existen. Si no conoces el tamaño, usa kind="block" con width y height o reserva una proporción estable para la imagen.
• Con un hijo HTML se conserva el mismo nodo; los componentes propios deben propagar className, style, inert, aria-hidden y tabIndex a su raíz. Una tarjeta entera envuelta se convierte en un solo bloque: envuelve sus piezas para representar su estructura.
• Los hijos se montan durante la carga. Para medios pesados o componentes con efectos, usa una forma independiente en el fallback en vez de montar el contenido anticipadamente.
• Mientras carga, la pieza es decorativa y no interactiva. Marca la región que carga con aria-busy y ofrece un estado accesible fuera de ella; la animación se desactiva con movimiento reducido.
• kind y lines se aplican sin children. width, height y borderRadius también permiten ajustar la pieza cargando: deben coincidir con la caja del contenido final para evitar saltos. Las plantillas son aproximaciones, no un análisis automático del contenido.

Tecla (atajo) — Kbd#

Una tecla o combinación en un recuadro (<kbd>): atajos en menús, paletas y ayudas.

Envuelve contenido (children), p. ej.: ⌘K

Avatar — Avatar#

Imagen o iniciales con punto de estado opcional. El nombre y el estado van como texto accesible.

Estado vacío — EmptyState#

Qué pasa y qué puedes hacer cuando no hay datos, resultados o hay un error. Una sola acción principal.

Envuelve contenido (children), p. ej.: <Button label="Conectar una integración" />

Precio con rebaja — PriceTag#

Precio con precio anterior tachado y porcentaje de descuento. El tachado y la rebaja llevan texto accesible: no dependen del color ni del tachado.

Galerías, vídeo y audio (galerias)#

Galerías de imágenes y carruseles sobre Swiper (coverflow, baraja, cubo, mosaico, cintas continuas), reproductor de vídeo y reproductor de música.

Galería de imágenes — ImageGallery#

Ocho presentaciones de las mismas fotos: imagen grande con miniaturas, coverflow 3D, baraja, fundido, cubo, creativa, tira libre y mosaico de dos filas. Táctil, con teclado y flechas; sin imágenes propias usa escenas pixel art generadas.

• Cada línea de «imágenes» es «imagen|título|texto». La imagen puede ser una URL o ruta, o gen:N (0, 1, 2…) para una escena de ejemplo generada, sin descargas.
• Las flechas, los puntos y las imágenes toman borde, radio y sombra de la variante de estilo (variables --s-*).
• El zoom (doble clic o pellizco) solo se aplica a los modos thumbs y fade.

Carrusel — Carousel#

Carrusel genérico sobre Swiper: cada hijo es una diapositiva. Diapositivas visibles responsivas, reproducción automática, bucle, fundido, baraja apilada o cinta continua, con flechas y puntos cuadrados del estilo activo.

• Las secciones (testimonios, ventajas, precios, equipo, blog) lo usan por dentro con layout="carousel"; úsalo directamente para cualquier lista de tarjetas.
• En pantallas estrechas baja solo a 2 y a 1 diapositiva visible.

Mockup de dispositivo — DeviceMockup#

Vista previa de una web dentro de un móvil, tablet, portátil, monitor o ventana de navegador dibujados con CSS: web real en un iframe a tamaño de viewport, captura (con recorrido de páginas largas), vídeo o contenido React. Sin WebGL ni dependencias; para enseñar proyectos en un portfolio o una landing.

• finish elige el color de la carcasa: theme (por defecto) lo saca del tema con tone; black, graphite, silver, white, gold, blue y rose son colores de aparato, iguales en cualquier tema. El cristal y el marco de la pantalla son siempre negros.
• Contenido, por orden de preferencia: url (web real en un iframe), video, children (React) o solo image (captura). Con url o video, image es la imagen previa y la que queda en modo estático.
• La pantalla simula el viewport real del dispositivo (móvil 390 px, o 412 con platform android; tablet 820, portátil 1440, monitor 1920, navegador 1280) y lo reduce al tamaño del mockup: la web se ve como en ese aparato. viewportWidth lo cambia. Los children pueden responder a ese ancho con @container.
• Una web solo se puede incrustar si lo permite: X-Frame-Options: DENY o frame-ancestors 'none' la dejan en blanco, y tu propia CSP necesita frame-src con ese origen. Para webs de terceros, usa una captura.
• Ocupa el ancho de su contenedor (que debe tener ancho propio) hasta --device-max: 300 px el móvil, 460 la tablet, 860 el portátil, 900 el monitor y el navegador.
• safeArea (móvil): la web no se pinta bajo la isla sino debajo de ella, como el área segura de un teléfono real; la franja es negra o del color de --device-safe (p. ej. el de la cabecera de la web).
• orientation fija la orientación de móvil y tablet; rotatable añade debajo un botón para que el visitante lo gire (la web en vivo se adapta al nuevo viewport).
• systemNav (móvil y tablet): pinta la navegación del sistema y deja la web por encima; el indicador de inicio con platform ios, o los tres botones de Android (a la derecha con el móvil en horizontal). Color de los iconos: --device-nav.
• Con motion pointer, pointerX y pointerY son los grados máximos de giro horizontal e inclinación vertical (0 anula ese eje) y pointerSide deja girar solo hacia un lado: con left, el aparato solo se vuelve cuando el puntero está a su izquierda.
• Por defecto el contenido no es utilizable (no atrapa el scroll ni el foco); interactive lo activa.
• Con prefers-reduced-motion queda quieto y el vídeo no arranca. still lo fuerza y además muestra image en lugar de la web.

Mockup de dispositivo 3D — DeviceMockup3D#

El mismo mockup con volumen: carcasa three.js generada (canto, cristal, reflejos, sombra) y la pantalla como DOM real colocado en 3D, así la web en vivo sigue siendo utilizable. Si el equipo no puede con WebGL, va justo o pide reducir movimiento, pinta solo la versión CSS como imagen fija.

• Requiere three y @react-three/fiber (opcionales en el paquete): importa trama-ui/DeviceMockup3D. three se descarga bajo demanda, al acercarse el mockup a la pantalla; mientras, se ve la versión CSS en la misma caja y con la misma pose.
• render: auto elige 3D salvo sin WebGL2, con Save-Data, ≤ 2 GB de memoria, ≤ 2 núcleos o prefers-reduced-motion, que caen a imagen fija; 3d lo fuerza; flat es la versión CSS; static, la CSS quieta con image en lugar de la web.
• Cada mockup 3D es un contexto WebGL (los navegadores admiten unos 16): en una rejilla de proyectos usa 3D en uno o dos destacados y DeviceMockup en el resto. Dibuja bajo demanda y se detiene fuera de pantalla.
• finish elige el color de la carcasa: theme (por defecto) lo saca del tema con tone; black, graphite, silver, white, gold, blue y rose son colores de aparato, iguales en cualquier tema. El cristal y el marco de la pantalla son siempre negros.
• Contenido, por orden de preferencia: url (web real en un iframe), video, children (React) o solo image (captura). Con url o video, image es la imagen previa y la que queda en modo estático.
• La pantalla simula el viewport real del dispositivo (móvil 390 px, o 412 con platform android; tablet 820, portátil 1440, monitor 1920, navegador 1280) y lo reduce al tamaño del mockup: la web se ve como en ese aparato. viewportWidth lo cambia. Los children pueden responder a ese ancho con @container.
• Una web solo se puede incrustar si lo permite: X-Frame-Options: DENY o frame-ancestors 'none' la dejan en blanco, y tu propia CSP necesita frame-src con ese origen. Para webs de terceros, usa una captura.
• Ocupa el ancho de su contenedor (que debe tener ancho propio) hasta --device-max: 300 px el móvil, 460 la tablet, 860 el portátil, 900 el monitor y el navegador.
• safeArea (móvil): la web no se pinta bajo la isla sino debajo de ella, como el área segura de un teléfono real; la franja es negra o del color de --device-safe (p. ej. el de la cabecera de la web).
• orientation fija la orientación de móvil y tablet; rotatable añade debajo un botón para que el visitante lo gire (la web en vivo se adapta al nuevo viewport).
• systemNav (móvil y tablet): pinta la navegación del sistema y deja la web por encima; el indicador de inicio con platform ios, o los tres botones de Android (a la derecha con el móvil en horizontal). Color de los iconos: --device-nav.
• Con motion pointer, pointerX y pointerY son los grados máximos de giro horizontal e inclinación vertical (0 anula ese eje) y pointerSide deja girar solo hacia un lado: con left, el aparato solo se vuelve cuando el puntero está a su izquierda.
• Por defecto el contenido no es utilizable (no atrapa el scroll ni el foco); interactive lo activa.

Logo giratorio 3D — LogoCoin#

Un logo con volumen que gira sobre su eje vertical, como una moneda: la marca en las dos caras y canto visible. CSS 3D puro, sin WebGL ni dependencias: lo anima el compositor, no cuesta nada dentro de un contenedor oculto y no recibe toques. Para dar vida a un menú, una cabecera o una pantalla de carga.

• La marca va en src (URL, ruta o gen:N) o como children (un SVG, un Icon, texto), que se pinta en las dos caras. Con un logo ya redondo, fit cover; con uno suelto, contain.
• Decorativo por defecto: aria-hidden y sin eventos. alt le da nombre accesible. draggable deja girarlo arrastrando, con inercia (entonces sí recibe toques, pero el scroll vertical pasa).
• Sin draggable no ejecuta JavaScript por fotograma: es una animación CSS de transform. Con prefers-reduced-motion o still queda quieto y ladeado, con el canto a la vista.
• Color del canto: tone. Fondo de las caras: faceTone.

Logo 3D — Logo3D#

La marca como objeto 3D: un trazado SVG extruido que gira, se balancea, flota o sigue al puntero, pintado como sólido, malla de alambre, caracteres ASCII o pixel art con el mismo filtro que RetroCanvas (rampas de glifos, dither, scanlines, glow, glitch). Decorativo, para un menú, una cabecera o un hero.