React Bits: El Arte de la UI Destacada

Hola a todos, soy David. Soy el creador de React Bits, una biblioteca de código abierto que comencé el año pasado. En esta charla, compartiré lo que construir React Bits me enseñó sobre diseñar componentes de UI que destaquen, sean reutilizables y dejen una impresión.

En solo un año, React Bits ha crecido hasta convertirse en una colección de más de 130 componentes y ahora se está acercando a 40,000 estrellas en GitHub, lo cual ha sido increíble, sorprendente y, honestamente, a veces un poco aterrador. Porque una vez que tantas personas comienzan a usar tus componentes, rápidamente aprendes la diferencia entre algo que se ve bien en una demostración y algo que realmente sobrevive en proyectos reales. Y esa diferencia es de lo que quiero hablar hoy.

La mayoría de las UI modernas funcionan bastante bien. Son responsivas, son limpias, probablemente tienen buen espaciado, buena tipografía, tarjetas redondeadas y botones de llamada a la acción que dicen algo como comenzar. Y eso es genial. No estoy aquí para argumentar en contra de la UI limpia. La UI limpia es buena. Paga las cuentas y a todos les gusta. Pero la web ha llegado a un punto donde muchas interfaces están empezando a sentirse muy similares.

Mismos patrones de diseño, mismos degradados, mismas secciones de héroe, mismas tarjetas de características, mismos pequeños iconos y cuadrados redondeados. Y nada de eso es malo por sí mismo. Estos patrones existen porque funcionan. Pero cuando todos usan el mismo patrón de la misma manera, se vuelve más difícil para un producto, un portafolio o una marca sentirse memorable. Así que la pregunta es, ¿cómo creas momentos que se sientan distintos sin hacer que la interfaz sea ruidosa?

¿Cómo haces que algo destaque sin hacer que grite? Y este es el espacio que ReactVids está tratando de explorar. Cuando digo UI destacada, no me refiero a agregar efectos por todas partes. No me refiero a que cada botón necesite partículas. No quiero decir que cada contenedor necesite un shader. Y definitivamente no quiero decir que tu página de precios debería sentirse como si estuvieras entrando en una pelea de jefe. Lo que quiero decir es más intencional que eso. Una interfaz destacada tiene momentos que la gente recuerda. Tal vez sea un fondo que le da atmósfera a la página. Tal vez sea una tarjeta que se siente viva cuando la pasas por encima.

O tal vez sea solo una pequeña animación de texto que le da ritmo a tu titular. Y en este caso, lo que ves en esta diapositiva, es esta pequeña animación ASCII que realmente destaca a la derecha. Estos momentos crean identidad, y la identidad es lo que la gente recuerda. Así que la idea detrás de ReactVids no es solo hacer componentes animados. La idea es crear momentos visuales reutilizables que los desarrolladores puedan tomar, personalizar y hacer suyos.

ReactVids en realidad comenzó a partir de una observación muy simple. Hay tantos experimentos front-end increíbles en línea. Hay demostraciones de shaders, hay efectos de hover, hay fondos animados, tarjetas creativas, animaciones de texto, pequeñas interacciones que te hacen dejar de desplazarte por solo un segundo. Pero muchos de ellos no son fáciles de usar en un proyecto real de React. Pueden estar enterrados dentro de un code pen, pueden estar escritos como un experimento único, o pueden tener valores codificados por todas partes. Pueden verse hermosos en una configuración muy específica, pero se vuelven dolorosos en el momento en que intentas usarlos en un diseño real.

Así que ReactVids se convirtió en mi intento de tomar ese tipo de trabajo creativo front-end y convertirlo en algo más utilizable. El objetivo es hacer que la UI destacada sea más accesible no eliminando el arte sino empaquetando el arte de una manera que sea más fácil de usar. Al principio, ReactVids no era un gran plan maestro. Era principalmente yo construyendo componentes que deseaba que existieran. Quería componentes que se sintieran pulidos, expresivos y, sobre todo, divertidos de usar. Y quería que fueran lo suficientemente prácticos como para que alguien pudiera realmente incorporarlos en un proyecto.

Y a medida que el proyecto crecía, la comunidad comenzó a darle forma. La gente usaba los componentes de maneras que no esperaba. Pedían más personalización, pedían versiones en TypeScript, pedían Tailwind, pedían si un componente podría hacerse más sutil, más intenso, más responsivo, más flexible. Y con el tiempo, eso cambió mi forma de pensar sobre la biblioteca.

Al principio, me preguntaba principalmente, ¿puedo hacer que esto se vea genial? Pero la mejor pregunta se convirtió en, ¿puedo hacer esto útil para muchas personas diferentes en muchos contextos diferentes? Esa es una pregunta mucho más difícil, y lleva a componentes mucho mejores. Cuando pienso en una UI memorable, generalmente vuelvo a tres cualidades principales. La primera es el movimiento. El movimiento le da ritmo a una interfaz. Puede guiar la atención, puede crear anticipación, y puede hacer que la página se sienta menos estática y más viva.

La segunda es la profundidad. La mayoría de las pantallas son planas por defecto. La profundidad le da atmósfera a las interfaces. Eso puede provenir de sombras, degradados, ruido, partículas, iluminación, desenfoque o shaders. Y eso hace que una pantalla se sienta menos como una disposición plana de cajas, y más como un espacio. Y la tercera es la interacción. Las mejores interfaces a menudo se sienten como si te notaran. Responden a tu cursor, tu desplazamiento, tu enfoque y tu entrada. Y esa respuesta crea una pequeña relación entre el usuario y la interfaz.

Y esas tres cosas, movimiento, profundidad e interacción, son una gran parte de React Bits. Pero lo importante es que ninguna de ellas debe usarse a ciegas. Necesitan servir a la experiencia, ¿verdad? Y eso nos lleva a la parte difícil. La parte difícil es el equilibrio. Si una interfaz es demasiado simple, puede funcionar, pero podría no dejar una impresión. Si es demasiado expresiva, puede volverse distractora. Así que el punto óptimo está en algún lugar en el medio.

Expresiva, pero controlada. Distinta, pero aún útil. Memorable, pero definitivamente no molesta. Un componente destacado debe tener una razón para existir. Debe apoyar una sección, debe enmarcar contenido, debe crear atmósfera, y debe hacer que una interacción se sienta mejor. Debe ayudar a comunicar algo sobre el producto o la marca. Por eso pienso en una UI destacada menos como decoración y más como composición. Estás decidiendo dónde la interfaz necesita energía, dónde necesita calma, y dónde necesita algo que la gente recordará.

Así que hagamos esto concreto con un componente. Magic Rings. Magic Rings es un componente visual basado en shaders construido alrededor de anillos animados, brillo, movimiento, color, mezcla, comportamiento al pasar el ratón, influencia del ratón, sutil paralaje y textura. Pero la razón por la que elegí este componente para la charla no es porque se vea genial. Es porque Magic Rings muestra el proceso completo detrás de muchos componentes basados en React. Comienza con una idea visual, luego se convierte en un shader, luego se convierte en un componente de React, luego se convierte en una API personalizable. Luego se convierte en algo que la gente puede usar en contextos muy diferentes. Una página de aterrizaje, una tarjeta, un pie de página, una sección de acerca de.

Y la parte interesante no es solo el visual final. La parte interesante es cómo conviertes ese visual en algo reutilizable. Y aquí es donde el componente se vuelve interesante. En una sección principal, Magic Rings puede ser el ancla visual principal. Puede situarse detrás del titular y hacer que la página se sienta más atmosférica. En una tarjeta, tiene un trabajo diferente. Necesita ser más pequeño, más contenido, tal vez menos intenso. Se convierte en un detalle, no en una escena completa. En un pie de página, podría necesitar ser aún más sutil, una capa visual suave que le da vida a la parte inferior de la página sin competir con enlaces o llamadas a la acción.

Y en una sección de acerca de, puede funcionar de manera más editorial. Puede sugerir energía, movimiento o enfoque. Mismo componente, diferente escala, diferente intensidad, y un rol diferente. Y ese es el verdadero desafío. El componente no puede ser solo un efecto fijo. Necesita ser un sistema visual flexible. Para componentes como este, generalmente no empiezo con código. Empiezo con un sentimiento. Para Magic Rings, el sentimiento era algo como orbital, enfocado, energético, un poco futurista, pero no tanto como para que solo funcione en fondos negros. Quería que se sintiera como algo que podrías colocar dentro de una interfaz real. Algo que pudiera ser expresivo pero aún controlado.

Y las referencias iniciales fueron cosas como luces radiales, anillos delgados, brillo suave y distorsión sutil. Y luego la pregunta se convierte en, ¿cuál es la idea reutilizable aquí? Porque hacer una animación de anillo genial no es suficiente. La idea reutilizable es más específica. Son anillos animados en capas que pueden adaptarse a diferentes estados de ánimo, diferentes tamaños, diferentes secciones y diferentes niveles de intensidad. Una vez que eso está claro, las decisiones técnicas se vuelven más fáciles. El primer enfoque fue el obvio. ¿Puede esto ser solo CSS? Y a veces la respuesta es sí. CSS sigue siendo increíblemente poderoso. Puedes crear anillos con bordes, degradados, pseudo elementos, máscaras, transformaciones, desenfoque de opacidad y animaciones de fotogramas clave. Para muchos componentes, esta es definitivamente la elección correcta.

CSS siempre es más fácil de entender, es más fácil de modificar, más fácil de enviar, y tiene mucho menos configuración. Pero para magic rings, CSS por sí solo comenzó a sentirse demasiado rígido. El movimiento se siente un poco demasiado mecánico, el brillo es más difícil de controlar, y los anillos se sentían más como elementos apilados en lugar de una sola cosa viva. Y quería que los componentes soportaran cosas como atenuación radial, ruido procedural, cosas así.

Y ahí es donde los shaders se vuelven súper útiles. Porque con un shader no solo estás animando fichas de dominó, en realidad estás generando los píxeles. Esto significa que puedes controlar la luz, la atenuación, la distorsión, la mezcla, la transparencia y el movimiento de una manera mucho más rica. Así que la decisión no fue que los shaders son más geniales, la decisión fue que esta idea visual específica necesita el tipo de control que ofrece un shader. Ahora, si entramos en el modelo mental del shader, a un nivel simple, el shader de magic rings es solo hacer una pregunta para cada píxel.

¿Qué pasa si rotamos el espacio de coordenadas? ¿Y qué pasa si lo desplazamos ligeramente basado en el ratón? ¿Debería escalar el visual al pasar el ratón? ¿Qué tan rápido debería desvanecerse? ¿Qué color debería usar? ¿Cuánto ruido deberíamos agregar? Ese es el modelo mental básico. Y en lugar de pensar en términos como divs y spans, comienzas a pensar en términos de espacio, distancia, luz y tiempo. Los anillos en sí no son elementos dom, son regiones matemáticas. Y el brillo no es una sombra de caja, se calcula en función de la distancia, ¿verdad?

El movimiento no es solo un fotograma clave de CSS, es el tiempo fluyendo a través del shader. Y esto es lo que le da a magic rings la sensación que quería, porque se siente menos como un activo giratorio y más como un sistema visual generado. Y esta es la función central del anillo para magic rings. No pondría todo el código del shader en una diapositiva, porque esa es una manera rápida de perder a la audiencia. Pero esta función muestra el corazón de ello. Primero, cada anillo obtiene su propio desplazamiento de tiempo. Esto es lo que evita que los anillos se muevan como una capa plana. Luego calculamos el radio actual, que crece con el tiempo usando el uniforme U-scale rate.

Luego calculamos la distancia entre el píxel y el anillo. Esa distancia se convierte en la base para la intensidad del anillo. También hay un valor angular basado en un tan, que ayuda a dar forma al anillo de manera diferente dependiendo del ángulo del píxel. Y eso le da a los anillos un poco más de carácter en lugar de hacerlos círculos perfectamente uniformes. Así que aunque el resultado se siente visual y orgánico, la lógica subyacente sigue siendo muy controlada. Es un conjunto de pequeñas decisiones sobre distancia, tiempo, atenuación y forma.

Ahora hablemos de los shader uniforms. Aquí es donde el shader comienza a convertirse en un componente, porque estos uniforms son el puente entre React y el efecto visual. Un uniform es un valor que pasamos al shader desde el exterior, ¿verdad? Y esto es importante porque el visual no debe estar codificado. El tiempo controla el movimiento. La atenuación controla qué tan rápido se desvanecen los anillos. El grosor de la línea controla qué tan gruesos o afilados se sienten. El radio base y el paso de radio controlan cómo se colocan los anillos. Y la tasa de escala controla cómo se expanden. La opacidad controla qué tan fuerte aparece el componente. Y el ruido le da al visual un poco de textura.

Así que estos uniforms no son solo detalles técnicos. Son materias primas para la API pública. Y ahora podemos pasar al componente React, que tiene un trabajo muy diferente al del shader. El shader crea el visual, pero el componente React lo hace utilizable. Así que Magic Rings usa 3js para configurar un render WebGL. Crea una escena simple. Usa una cámara ortográfica, y renderiza un plano con un material shader personalizado. Ese plano llena el área del componente y luego el fragment shader decide cómo debería verse cada píxel. El componente también maneja el cambio de tamaño. Usa las dimensiones del contenedor y la relación de píxeles del dispositivo para actualizar el renderizador y la resolución del shader. También rastrea el ratón y lo hace más suave. Rastrea la escala de hover. Rastrea los efectos de clic, y pasa todos esos valores a los shader uniforms en cada cuadro de animación. Y luego al final, limpia todo cuando el componente se desmonta.

Y aquí es donde un componente creativo se convierte en un componente responsable, porque el efecto visual recibe toda la atención, pero el código del ciclo de vida en sí es lo que lo hace seguro de usar en la aplicación de alguien. Ahora llegamos a la API pública final. {{^}}Y aquí es donde el componente se convierte en un producto. Y sí, esto es un montón de props, lo sé. Pero para este componente, eso es intencional, créeme. Los props están realmente agrupados en torno a controles creativos reales, porque Color y Color2 controlan la paleta, Speed, Fade In, Fade Out, y Scale Rate controlan el tiempo, Ring Count, Base Radius, Radius Step, Line Thickness, Ring Gap, y Attenuation controlan el sistema de anillos. Y Opacity, Blur, y Noise controlan la textura y presencia final. Rotation cambia la composición. Y también tenemos props de interacción como Follow Mouse, Mouse Influence, Hover Scale, Parallax, y también un control de Click Burst para la interacción.

Así que aunque la API es grande, definitivamente no es aleatoria. Mapea los tipos de decisiones que alguien realmente necesita tomar al colocar este componente en una interfaz real. ¿Lo quiero sutil? ¿Quiero más anillos? ¿Quiero movimiento del ratón? ¿Quiero que se sienta más como un visual principal o más como un acento de fondo? Y ese es todo el punto de la API. Y ya que estamos hablando de props, hay una idea común en el diseño de componentes de que demasiados props son malos. Y muchas veces, eso es definitivamente cierto. Un componente con demasiados props puede volverse difícil de entender. Puede convertirse en un panel de control en lugar de una API limpia. Puede sentirse simplemente desenfocado.

Y para un bot normal, 40 props probablemente significa que algo ha salido mal. Pero los componentes creativos son un poco diferentes. Cuando el valor del componente es la expresión, la personalización no es solo una característica agradable. Es realmente parte del producto. Magic Rings necesita funcionar en un visual principal, un coche, un pie de página. Y estos contextos tienen diferentes necesidades, diferentes tamaños, diferentes colores. Así que en este caso, más props pueden valer la pena. Y la pregunta no es simplemente, ¿cómo exponemos menos props? La mejor pregunta es, ¿qué props crean un control significativo? Porque si un prop ayuda a alguien a adaptar el componente a un caso de uso real, ese prop podría valer la pena tener. Y la forma en que pienso sobre esto es que es importante conocer la diferencia entre control significativo y control ruidoso. Los props significativos se mapean a la forma en que alguien piensa sobre el componente. Por ejemplo, los de la izquierda aquí son controles significativos. Los props ruidosos son diferentes. Exponen detalles de implementación sin dar mucho valor creativo.

Usan nombres que solo tienen sentido si escribiste el shader. Dan a las personas la capacidad de romper el componente sin ayudarles a adaptarlo. Así que el objetivo no es exponer todo, sino más bien exponer las cosas correctas. Y ese es el trabajo de diseño detrás de un componente creativo reutilizable. Estás decidiendo qué controles deberían formar parte de la API pública y qué detalles deberían permanecer internos.

Y también hay una razón más reciente por la que los props realmente importan. El desarrollo asistido por IA. Muchas personas ahora usan agentes de IA para instalar componentes, modificarlos y adaptarlos a un proyecto. Y claro, un agente de IA puede ir directamente al código. Puede editar el shader. Puede cambiar los valores internos. Puede mover cosas. Pero eso no es siempre el mejor flujo de trabajo porque puede introducir errores sutiles y a menudo hace que el componente sea más difícil de mantener más tarde.

Si los props útiles ya están conectados, probados, documentados y funcionando, entonces tanto los humanos como los agentes de IA pueden hacer cambios seguros más rápido. Y en lugar de pedir a un agente que edite quirúrgicamente las matemáticas del shader, puedes decir hazlo más lento, hazlo azul, hazlo menos intenso. Y el agente puede mapear esa solicitud a props que ya existen. Y eso en última instancia ahorra tokens, ahorra dolores de cabeza y mantiene la personalización dentro de la API prevista. Así que los props no son solo configuraciones, son manejos seguros para desarrolladores, para diseñadores y cada vez más para agentes de IA.

Y esto se conecta con la filosofía más amplia detrás de React Bits. La biblioteca está construida alrededor de tres cosas. Adopción, propiedad y expresión. Adopción significa que debería ser fácil de probar. El componente no debería sentirse como un gran compromiso. Propiedad significa que las personas deberían sentirse cómodas tomando el código y haciéndolo suyo. Y expresión significa que el componente debería ayudarles a crear algo distinto. Algo que no se vea como cualquier otro sitio web. Algo que le dé a la interfaz un poco más de identidad. Y esa es la razón por la que la personalización importa tanto porque el punto no es solo dar a las personas hermosos valores predeterminados, el punto es darles un punto de partida sólido y suficiente control para que se ajuste a su propio trabajo.

Así que si tuviera que resumir el proceso de magic rings, sería así. Comienza con el sentimiento. Antes del código, antes de los props, antes de la implementación, entiende cómo debería hacer sentir el componente a la interfaz. Luego construye un sistema visual. No solo un resultado estático, sino un sistema que pueda adaptarse. Luego envuelve la complejidad en una API clara. El shader puede ser complejo, la configuración de 3GS puede ser compleja, y también puede serlo la lógica de interacción. Pero el área de superficie debería sentirse comprensible. Luego personaliza para contextos reales, héroe, tarjeta, pie de página, sección de acerca de, sección de producto. Esos contextos deberían influir en los props. Y finalmente, envía para la adopción. Esto significa buena documentación, buenos valores predeterminados, múltiples versiones y estructura limpia. Tu código necesita ser código que las personas realmente puedan incorporar en sus proyectos.

Y esa es la diferencia entre un experimento visual y un componente de código abierto. La lección más grande de ReactVids es que los componentes hacen mucho más que funcionar. Ayudan a que un proyecto se sienta más vivo, más expresivo y más memorable. Y eso es especialmente poderoso en código abierto porque no solo estás enviando un visual terminado, estás enviando una pieza de infraestructura creativa. Algo sobre lo que las personas pueden construir. Y personalmente creo que la web es mejor cuando tiene más personalidad.

No todas las interfaces necesitan ser ruidosas. No todos los productos necesitan shaders en todas partes. No todas las secciones necesitan animarse. Pero cada producto tiene momentos donde puede sentirse más distinto, más intencional, más memorable.

Y de eso se trata realmente ReactVids. Componentes creativos que hacen más que funcionar. Componentes que ayudan a las personas a crear interfaces con identidad que pueden ser copiadas, personalizadas, adaptadas y hechas propias.

Porque UI destacada no se trata solo de hacer más. Se trata de crear momentos que las personas recuerden. Y si quieres probarlo por ti mismo, te invito a ir a reactvids.dev y ver de qué se trata. Espero que hayas disfrutado esta charla. Cuídate, y nos vemos luego.