lab de componentes
Cada componente, corriendo de verdad.
Los posts de este blog se apoyan en piezas interactivas — gráficas que puedes recorrer, diagramas que se reproducen paso a paso, pequeños simuladores — en vez de capturas estáticas. Esta galería las reúne todas, vivas: todo lo que ves aquí se cliquea, se arrastra y se reproduce exactamente igual que dentro de un post. Cada una existe porque un post concreto la necesitó: una afirmación que la prosa no podía sostener, una comparación que se comía el scroll, un número que nadie sentiría como texto. Esa razón vive en la página de cada componente, bajo «por qué existe».
31 componentes documentadosDatos y visualización 7
CountUp Número animado que se dispara al entrar en el viewport, en Fraunces tamaño display, con líneas de caption en mono. Respeta prefers-reduced-motion. DataTable Tabla ordenable con coloreado heatmap opcional por columna y orden por defecto. FileTree Listado de directorios con carpetas colapsables y resaltado opcional de archivos, para mostrar dónde vive cada cosa en un proyecto. GitGraph El historial de git como grafo animado: carriles por rama, aristas de merge y un playback que puedes avanzar operación por operación. InteractiveChart Gráfica multitipo (barras, horizontal, línea, área, dona, dispersión) con multiserie, umbrales, scrub con hover y navegación por teclado. MermaidDiagram Flowcharts y diagramas de secuencia escritos como texto, renderizados a juego con el sitio tanto en modo claro como oscuro. StatGrid Grilla de tarjetas KPI — valor grande en serif, etiqueta mono en mayúsculas, línea de contexto opcional — con fade-in escalonado al hacer scroll.
Narrativa y scroll 6
AgentLoop Visualizador paso a paso del ciclo planear → actuar → observar de un agente de IA, con un gauge de ventana de contexto en vivo. DecisionTree Narrativa ramificada a base de clics — el autor define nodos de pregunta y de veredicto, y el lector recorre el árbol eligiendo opciones. ProgressGate Contenido oculto tras un umbral de scroll — el muro con la pista se desvanece y el remate aparece cuando el lector llega. Scrollytelling Scrollytelling al estilo NYT: un gráfico fijado que cambia de estado a medida que recorres los pasos a su lado. StepThroughDiagram Un diagrama que se construye solo mientras recorres su lista de pasos — cada paso revela la parte de la imagen de la que habla. Timeline Línea de tiempo vertical de hitos con fechas en mono, títulos en serif y revelado por lotes al hacer scroll; una entrada puede ir enfatizada.
Juego e interacción 7
AskMeAnything El chat flotante que vive en todas las páginas: una IA que corre en tu navegador, responde sobre mí y resume el post que estás leyendo, más una pestaña para escribirme directo. BeforeAfter Comparación con slider arrastrable entre dos slots — imágenes, bloques de texto o HTML arbitrario, recortados por un divisor que se arrastra. EasingExplorer Editor de cubic-bezier con manijas arrastrables, vista previa en vivo, presets y un snippet de CSS listo para copiar. El compañero interactivo de JuiceLab. FlakySuite Simulador Monte Carlo de suites flaky: arrastra la tasa de flakes y el tamaño de la suite, y mira P(suite verde) por presupuesto de retries sobre 2.000 corridas. GameFeelHero Panel hero siempre oscuro tipo "pantalla de juego", con título serif, subtítulo apagado y chips de enlace que hacen de tabla de contenidos. JuiceLab Demos autocontenidas de game feel: squash, hitstop, shake, partículas, síntesis con Web Audio y medidor de combos. Playground Explorador con sliders: mueve los inputs y la demo de al lado reacciona en tiempo real.
Tipografía y editorial 5
Callout Aparte semántico con cuatro tipos — tip, warning, note, important — marcados con etiquetas eyebrow en mono, nunca con barras de acento. Collapsible Disclosure nativo con details/summary y chevron animado — para tangentes y volcados largos que romperían el ritmo de lectura. PullQuote Cita destacada editorial en Fraunces itálica con hairlines y atribución en mono; aparece con fade al hacer scroll vía GSAP. Sidenote Marcador superíndice autonumerado que revela una nota editorial corta inline bajo el párrafo — sin caja, sin borde. TLDR Las conclusiones de un post, de entrada: dos o tres bullets para el lector que lee en diagonal antes de comprometerse.
Utilidad y chrome 6
CodeBlock Contenedor de código con encabezado opcional de filename — para saber dónde vive el código — y botón de copiar en un clic. CodeDiff Diff antes/después lado a lado con líneas marcadas y una nota del narrador por hunk. Dos columnas a ≥ 900px, apiladas por debajo. CopyableCommand Comando de shell de una línea, inline, con prompt $ y botón de copiar — para comandos que el lector debería correr de verdad. FreshnessLine Fila eyebrow en mono para encabezados de post — fecha de publicación, fecha de revisión opcional y un segmento de estado con la voz del autor. ReadingMeta Línea compacta con tiempo de lectura y conteo de palabras que aparece al inicio de cada post. Tabs Set de tabs navegable con teclado y con indicador de subrayado animado. Los paneles se asocian a las etiquetas por orden.