Kit de componentes

Las piezas detrás de cada página de este sitio y cómo encajan entre sí.

En lugar de usar una librería de UI completa, mantengo un kit propio y chico: primitivas accesibles de Radix con estilos de Tailwind y class-variance-authority, pensadas para un sitio oscuro y musical. Todo lo que ves abajo es el componente real, renderizado en vivo. Son los mismos que usan Daily Melody, Inner Tempo, Sound Map y el resto.

Primitivas `components/ui`

Button

Botones monoespaciados en mayúsculas con brillo cian, una variante glass y animación al pasar y tocar. Soporta estado de carga e íconos.

src/components/ui/button.tsx

Dialog

Modal accesible sobre Radix: foco atrapado, Escape para cerrar y bloqueo de scroll.

src/components/ui/dialog.tsx

Una melodía que nace del clima de hoy.

Tabs

Pestañas de Radix con navegación por teclado y el azul activo del sitio.

src/components/ui/Tabs.tsx

Daily Melody

Una melodía generativa que crece a partir del clima de tu zona.

Card

Una superficie simple con encabezado, contenido y pie, usada en el admin y en las páginas.

src/components/ui/card.tsx

Generative

2026

Beta

Badge

Etiquetas de estado con variantes hechas con class-variance-authority.

src/components/ui/badge.tsx

Sonido activado

Switch

Interruptor de Radix para ajustes on/off, accesible por teclado y lector de pantalla.

src/components/ui/switch.tsx

Tooltip

Ayudas al pasar o enfocar que se montan en el contenedor correcto, incluso dentro de diálogos.

src/components/ui/tooltip.tsx

SegmentedControl

Elegí una de pocas opciones: radio, vista, idioma, país. Las flechas se mueven entre ellas; se anuncia como un grupo de radio.

src/components/ui/segmented-control.tsx

Chip

Píldoras para etiquetas y elecciones rápidas. Estáticas, clickeables o como toggle con estado seleccionado, en neutro o el rosa de las historias.

src/components/ui/chip.tsx

Volumen60%

Slider

Control deslizante de un solo punto para volumen y tempo, con el color de cada uso (cada capa de Daily Melody tiene el suyo).

src/components/ui/slider.tsx

Spinner

Indicador de carga en cuatro tamaños que usa el azul del sitio, o el color del texto dentro de botones de color.

src/components/ui/spinner.tsx

Skeleton

Bloques de relleno con la forma del contenido que viene, para que nada salte cuando llega.

src/components/ui/skeleton.tsx

Demasiadas solicitudes

Reintentá en 42s

Alert

Banner de error con ícono, acciones, cierre y cuenta regresiva en vivo, compartido por Sound Map y Neighborhood Vibe.

src/components/ui/alert.tsx

Input

Campo de texto con la paleta del sitio: borde suave, foco azul y placeholder tenue.

src/components/ui/input.tsx

Select

Desplegable accesible de Radix para elegir un valor, con búsqueda por teclado.

src/components/ui/select.tsx

Solo palabras en alza

Checkbox

Checkbox de Radix con anillo de foco visible, usado en los filtros del admin.

src/components/ui/checkbox.tsx

DropdownMenu

Menús de acciones u opciones que se abren desde cualquier disparador.

src/components/ui/dropdown-menu.tsx

Palabra	Titulares
Argentina	42
España	31
San Lorenzo	12

Table

Tablas simples y legibles para rankings y datos del admin.

src/components/ui/table.tsx

Hola de nuevo 👋

FadeIn

Hace aparecer el contenido con un fundido suave, solo CSS, desactivado con movimiento reducido.

src/components/ui/fade-in.tsx

Compuestos `components/shared`

darkaico

GradientTitle

El título con degradado violeta a rojo. Cuatro tamaños, cualquier etiqueta y sin letras cortadas.

src/components/shared/GradientTitle.tsx

Inner Tempo

Marcá tu ritmo

PageHeader

Bloque de título centrado que comparten las páginas: ícono, título con degradado, acciones y subtítulo.

src/components/shared/PageHeader.tsx

HelpPopup

Modal de “cómo funciona” detrás de un botón chico, construido sobre Dialog.

src/components/shared/HelpPopup.tsx

Buenos Aires, Argentina

SelectedChip

Un chip removible para la selección actual, como la ubicación elegida en Neighborhood Vibe.

src/components/shared/SelectedChip.tsx

Lo estás viendo: esta página está montada sobre él.

AnimatedBackground

Contenedor de página con manchas de color en movimiento (o el cielo estrellado) y una columna centrada. Respeta el movimiento reducido.

src/components/shared/AnimatedBackground.tsx

SearchBar

Estructura de búsqueda de lugares: ícono, resultados con debounce debajo de la barra y un espacio para acciones. La usan Sound Map y Neighborhood Vibe.

src/components/shared/SearchBar.tsx

Originals

SectionHeading

La etiqueta chica y espaciada que abre las secciones de las páginas.

src/components/shared/SectionHeading.tsx

Energía

Qué tan llena suena: detalle de batería, redobles, acompañamiento, brillo

GenerativeSoundControls

Interruptores de capas y selector de energía para la música generativa de Daily Melody e Inner Tempo.

src/components/shared/GenerativeSoundControls.tsx

ProviderSelector

Selector Spotify / YouTube con el color de cada marca.

src/components/shared/ProviderSelector.tsx

LocationSwitchDialog

Pide confirmación antes de cambiar la ubicación de la que nace la música.

src/components/shared/LocationSwitchDialog.tsx

Efectos `components/effects`

Flota detrás de esta misma página, mirá las esquinas.

BlobBackdrop

Manchas de color suaves detrás de las páginas: una paleta por página, tamaño según la pantalla y un leve movimiento hacia el puntero (apagado en pantallas táctiles y con movimiento reducido).

src/components/effects/BlobBackdrop.tsx

Ocupa toda la pantalla, así que vive detrás de la home.

WeatherSky

Cielo de partículas en three.js que cambia con la hora y el clima local.

src/components/effects/WeatherSky.tsx

WobbleOrb

Una esfera de degradado suave que se mueve en su lugar: se balancea en una de cuatro direcciones o late como un corazón. La portada de los originales en Explorations.

src/components/effects/WobbleOrb.tsx

Cómo está organizado

layout/Estructura de la app: Navbar, Footer y los contenedores raíz.
admin/Piezas solo para el admin: barra lateral, tablas, indicadores de estado y el panel de salud de la API.
common/Piezas compartidas chicas, como el selector de idioma.
providers/Proveedores de contexto, por ejemplo Auth0.
analytics/Cargadores de analytics.

Primitivas components/ui