Componentes y UX
Biblioteca de componentes, patrones de navegación, flujos de UX y diseño de interacciones para www.mavelpoint.com. Para tokens de color, tipografía y breakpoints consulta la página de Design System.
Animaciones
Animaciones keyframe, transiciones CSS y patrones de movimiento.
Keyframes de Tailwind
Clases de animación definidas en tailwind.config.js.
animate-marquee
Scroll horizontal infinito
animate-marquee-vertical
Scroll vertical infinito
animate-loading-bar
Animación de barra de progreso
animate-blink
Efecto de parpadeo de texto
Animaciones CSS
Clases CSS globales para entrada y efectos.
.fade-in-up-*
Entrada escalonada (200ms–1400ms)
.text-gradient
Efecto de texto gradiente
.bio-clamp
Line clamp (6 mobile, 15 desktop)
.glass-effect
Glassmorphism con 8px backdrop blur
Framer Motion
Framework de animación para islas React.
Usado en islas React para:
- •Animaciones de entrada/salida
- •Reveals activados por scroll
- •AnimatePresence para transiciones
- •prefers-reduced-motion respetado
Biblioteca de Componentes
Primitivos compartidos y componentes de dominio compuestos. Astro para contenido estático, React para elementos interactivos.
Arquitectura de Componentes
Sistema de dos niveles: primitivos compartidos reutilizados en todas partes, y composiciones de dominio para áreas funcionales.
Primitivos Compartidos
src/components/shared/
Composiciones de Dominio
src/components/ui/
Otros Grupos de Componentes
Directorios de componentes de soporte.
analytics/
GA, GTM, Sentry, Meta Pixel, TikTok, Spotify
icons/
SVG personalizados: BandCamp, Beatport, Shazam
navbar/
NavBarWeb, NavBarPublicProfile, NavBarGeneral
magicui/
Patrones animados: BlurFade, Marquee
Patrones de Componentes
Variantes, tamaños, estados y reglas de estilo para componentes UI principales.
Botones
4 tipos, 3 colores, 3 tamaños.
Tipos
Colores
Tamaños
sm h-8 • base h-10 • lg h-11
Estilo
Primary: bg-lime text-black
Secondary: border border-white-10 text-white
Badges
4 colores, 3 tipos, 3 tamaños.
Colores
Tipos
Ejemplo Badge de Género
bg-lime-15 text-lime text-buttonXs rounded px-2 py-0.5
Cards
Superficie, interactiva, borde gradiente y tipos especializados.
Superficie Base
bg-black border border-white-10 rounded-xl p-6
Hover Interactivo
hover:border-white-20 hover:shadow-xs
Variantes
Inputs
3 tamaños, 3 estados, soporte de iconos.
Tamaños
sm h-10 • base h-11 • lg h-12
Estados
Estilo Base
bg-base-fill border-white-5 → focus: ring de estado
Tabs
Componente genérico tipado con indicador animado.
Características
- • Genérico
<T extends string>para IDs type-safe - • Indicador de posición animado suave
- • Variantes: primary, secondary
- • Colores: white, lime
Componentes de Texto
Primitivos tipográficos responsivos.
Componentes
- •
Heading— propas(h1–h4), mobileSize + desktopSize responsivo - •
Paragraph— tamaño responsivo, peso, tooltip de truncación opcional - •
TextError— color danger via Paragraph
Dependencias y Librerías
Paquetes clave usados para componentes interactivos y patrones de UI.
Headless UI
Componentes interactivos accesibles y sin estilo — Dialog, Disclosure, Popover, Listbox. Usados para modales, menús de navegación, dropdowns y selects.
Phosphor Icons
Librería de iconos flexible con 6 variantes de peso: thin, light, regular, bold, fill, duotone. Usados en todos los componentes via @phosphor-icons/react.
Keen Slider
Carrusel/slider performante con soporte táctil. Envuelto en un componente personalizado para API consistente.
Leaflet
Renderizado de mapas con tiles CartoDB oscuros y marcadores SVG rojos personalizados. Usado en páginas de venue en modo solo visualización.
Nanostores
Gestión de estado cross-componente: player, tracks, tabs, navegación, collections, industry access, modal vote. Persiste entre ViewTransitions.
Framer Motion
Librería de animación para islas React — entrada/salida, scroll triggers, AnimatePresence para transiciones de componentes.
Flujos de UX
Journeys de usuario principales, rutas de conversión y patrones de interacción.
Descubrimiento y Registro de Artistas
DJ/productor descubre MavelPoint y crea una cuenta.
Landing → Propuesta de valor → CTA "Join MavelPoint" → app.mavelpoint.com
Entrada: Homepage, página de feature, o blog. El registro ocurre en la web app.
Profesional Evalúa Artista
Promotor/agente revisa el perfil EPK de un artista.
Overview (bio, música) → Tabs (Events, Tracks, Gallery, Press) → CTA Contact/Book
Reemplaza PDFs de press kit, búsquedas dispersas en SoundCloud/RA/Instagram. Todo estructurado y escaneable.
Blog → Conversión
Artista encuentra consejos de carrera via Google, se convierte en usuario.
Artículo → CTA contextual → Página de feature o registro
WordPress con caché de 1hr. Enfoque value-first — entregar contenido antes de mencionar producto.
1–2% blog → registroDescubrimiento de Eventos
Usuario explora eventos y detalles de venues.
Detalle evento → Lineup, venue, fecha → Visitar/Calendario/Compartir → Mapa venue
Tiles de mapa CartoDB oscuros con marcadores personalizados.
Local Circuit (Concursos DJ)
DJs emergentes participan en concursos, la comunidad vota.
Explorar concursos → Seleccionar → Ver participantes → Votar o participar
Organizado por ciudad y promotor. Votación via modalVoteStore. Gating de acceso industry.
Envío de Demos
Productor envía tracks a un artista o sello.
/artist/[name]/send-demo → Llenar formulario → Enviar (rate-limited)
Rate limiting via rateLimiter.ts. Validación de inputs con estados de error específicos.
MavelPoint Studio (Flyers IA)
Genera material promocional con IA.
/mavelpoint-studio → Subir/describir → Gemini IA genera → Descargar o email
Timeout de 30s en llamadas IA. Envío por email via /api/send-flyers-email.
Evaluación de Precios
Artista compara planes y actualiza.
/pricing → Comparar planes → Click upgrade → Redirect a billing de la app
El checkout ocurre en la web app, no en el sitio de marketing. Resaltar plan recomendado.
Estado Cross-Page
Nanostores que persisten datos entre navegaciones de página via Astro ViewTransitions.
| Store | Propósito | Persistencia |
|---|---|---|
| playerStore | Estado de reproducción (track actual, progreso, volumen) | Entre navegaciones (ViewTransitions) |
| tracksStore | Datos y metadatos de tracks | Entre navegaciones |
| tabsStore | Selección de pestaña activa en perfiles | Entre navegaciones |
| navigationStore | Estado de navegación de página | Entre navegaciones |
| collectionStore | Datos de colecciones de galería | Entre navegaciones |
| industryAccessStore | Estado de gating de acceso industry | Entre navegaciones |
| modalVoteStore | Estado de modal de votación de concurso | Solo por página |
Reglas de Diseño UX
Principios fundamentales que guían todas las decisiones de experiencia de usuario.
CTA Sobre el Fold
Cada página de marketing debe tener un call-to-action visible sin hacer scroll.
Regla de 5 Segundos
Los visitantes deben entender qué hace MavelPoint en los primeros 5 segundos de cualquier página.
Dos Tracks de Audiencia
Los artistas quieren construir presencia y ser contratados. La industria quiere productividad y decisiones basadas en datos.
Páginas del Artista Son Su Marca
Minimizar el chrome de MavelPoint en páginas /artist/ y /t/ — la identidad del artista es lo primero.
Player Persistente
La reproducción de música continúa sin interrupciones entre transiciones de página via nanostores y Astro ViewTransitions.
Targets de Performance
Páginas EPK de artista < 2s LCP. Páginas MavelTree < 1s LCP. Scripts de terceros en web workers via Partytown.