M

Enter access code

This site is for authorized partners only.
MavelPoint
Context Hub ES

Components & UX

Component library, navigation patterns, UX flows, and interaction design for www.mavelpoint.com. For color tokens, typography, and breakpoints see the Design System page.

mavelpoint-web-design mavelpoint-web-components mavelpoint-web-ux

Animations

Keyframe animations, CSS transitions, and motion patterns.

Tailwind Keyframes

Built-in animation classes defined in tailwind.config.js.

animate-marquee

Horizontal infinite scroll

animate-marquee-vertical

Vertical infinite scroll

animate-loading-bar

Progress bar animation

animate-blink

Text blink effect

CSS Animations

Global CSS classes for entrance and effect animations.

.fade-in-up-*

Staggered entrance (200ms–1400ms delays)

.text-gradient

Gradient text effect

.bio-clamp

Line clamp (6 mobile, 15 desktop)

.glass-effect

Glassmorphism with 8px backdrop blur

Framer Motion

React island animation framework.

Used in React islands for:

  • • Entrance/exit animations
  • • Scroll-triggered reveals
  • • AnimatePresence for component transitions
  • • prefers-reduced-motion respected

Component Library

Shared primitives and domain-specific composed components. Astro for static content, React for interactive elements.

Component Architecture

Two-tier system: shared primitives reused everywhere, and domain-specific compositions for feature areas.

Shared Primitives

src/components/shared/

badgesbannersbuttonscardcontentsdividersempty-statesinputskeen-sliderleafletloaderplayerprogressseoskeletontabstexttooltipstrack

Domain Compositions

src/components/ui/

artistblogeventfeaturesflyerlandinglocal-circuitpricingvenue

Other Component Groups

Supporting component directories.

analytics/

GA, GTM, Sentry, Meta Pixel, TikTok, Spotify tracking

icons/

Custom SVG icons: BandCamp, Beatport, Shazam

navbar/

NavBarWeb, NavBarPublicProfile, NavBarGeneral

magicui/

Animated UI patterns: BlurFade, Marquee

Component Patterns

Variants, sizes, states, and styling rules for core UI components.

Buttons

4 types, 3 colors, 3 sizes.

Types

PrimarySecondaryTertiaryQuaternary

Colors

lime indigo white

Sizes

sm h-8 • base h-10 • lg h-11

Styling

Primary: bg-lime text-black

Secondary: border border-white-10 text-white

Badges

4 colors, 3 types, 3 sizes.

Colors

lime indigo gray black

Types

PrimarySecondaryTertiary

Genre Badge Example

bg-lime-15 text-lime text-buttonXs rounded px-2 py-0.5

Cards

Surface, interactive, gradient border, and specialized card types.

Base Surface

bg-black border border-white-10 rounded-xl p-6

Interactive Hover

hover:border-white-20 hover:shadow-xs

Variants

CardCardArrowDateCardPromoterCardCardBackgroundColorImage

Inputs

3 sizes, 3 statuses, icon support.

Sizes

sm h-10 • base h-11 • lg h-12

Statuses

default error success

Base Styling

bg-base-fill border-white-5 → focus: status ring

Tabs

Generic typed component with animated indicator.

Features

  • • Generic <T extends string> for type-safe IDs
  • • Smooth animated position indicator
  • • Variants: primary, secondary
  • • Colors: white, lime

Text Components

Responsive typography primitives.

Components

  • • Heading — as prop (h1–h4), responsive mobileSize + desktopSize
  • • Paragraph — responsive sizing, weight, optional truncation tooltip
  • • TextError — danger-colored via Paragraph

Dependencies & Libraries

Key packages used for interactive components and UI patterns.

Headless UI

Accessible, unstyled interactive components — Dialog, Disclosure, Popover, Listbox. Used for modals, nav menus, dropdowns, and select inputs.

Phosphor Icons

Flexible icon library supporting 6 weight variants: thin, light, regular, bold, fill, duotone. Used across all components via @phosphor-icons/react.

Keen Slider

Performant carousel/slider with touch support. Wrapped in a custom component for consistent API across features.

Leaflet

Map rendering with dark CartoDB tiles and custom red SVG markers. Used on venue pages in display-only mode (interactions disabled).

Nanostores

Cross-component state management: player, tracks, tabs, navigation, collections, industry access, modal vote. Persists across ViewTransitions.

Framer Motion

Animation library for React islands — entrance/exit, scroll triggers, AnimatePresence for component transitions.

UX Flows

Core user journeys, conversion paths, and interaction patterns.

Artist Discovery & Sign-Up

DJ/producer finds MavelPoint and creates an account.

Landing → Value prop → CTA "Join MavelPoint" → app.mavelpoint.com

Entry: Homepage, feature page, or blog. Sign-up happens on the web app. PlatformButton tracks lead/client_potential events.

3–5% homepage conversion 8–12% feature page

Industry Professional Evaluates Artist

Promoter/agent reviews an artist EPK profile.

Overview (bio, music) → Tabs (Events, Tracks, Gallery, Press) → Contact/Book CTA

Replaces PDF press kits, scattered SoundCloud/RA/Instagram checks. Everything structured and scannable in one place.

Persistent music player Sticky booking CTA

Blog Content → Conversion

Artist finds career advice via Google, converts to user.

Blog article → Contextual CTA → Feature page or sign-up

WordPress-powered with 1hr cache. Value-first approach — deliver content before product mention.

1–2% blog → sign-up

Event Discovery

User explores events and venue details.

Event detail → Lineup, venue, date → Visit/Calendar/Share → Venue map

Dark CartoDB map tiles with custom markers. EventSlugButtonsAction provides visit/calendar/share actions.

Local Circuit (DJ Contests)

Emerging DJs participate in contests, community votes.

Browse contests → Select contest → View participants → Vote or submit entry

Organized by city and promoter. Voting via modalVoteStore. Industry access gating for some features.

Demo Submission

Producer submits tracks to an artist or label.

/artist/[name]/send-demo → Fill form → Submit (rate-limited)

Rate limiting via rateLimiter.ts. Input validation with status-specific error states.

MavelPoint Studio (AI Flyers)

Generate promotional flyers with AI.

/mavelpoint-studio → Upload/describe → Gemini AI generates → Download or email

30s timeout on AI calls. Email delivery via /api/send-flyers-email.

Pricing Evaluation

Artist compares plans and upgrades.

/pricing → Compare plans → Click upgrade → Redirect to app billing

Checkout happens on web app, not marketing site. Highlight recommended plan.

Cross-Page State

Nanostores that persist data across page navigations via Astro ViewTransitions.

Store Purpose Persistence
playerStore Music playback state (current track, progress, volume) Across navigations (ViewTransitions)
tracksStore Track list data and metadata Across navigations
tabsStore Active tab selection on artist profiles Across navigations
navigationStore Page navigation state Across navigations
collectionStore Gallery collection data Across navigations
industryAccessStore Industry access gating state Across navigations
modalVoteStore Contest voting modal state Per-page only

UX Design Rules

Core principles that guide all user experience decisions.

CTA Above the Fold

Every marketing page must have a visible call-to-action without scrolling.

5-Second Rule

Visitors must understand what MavelPoint does within 5 seconds of landing on any page.

Two Audience Tracks

Artists want to build presence and get booked. Industry wants productivity and data-driven decisions. Each track has different motivations.

Artist Pages Are Their Brand

Minimize MavelPoint chrome on /artist/ and /t/ pages — the artist's identity comes first.

Player Persists

Music playback continues uninterrupted across page transitions via nanostores and Astro ViewTransitions.

Performance Targets

Artist EPK pages < 2s LCP. MavelTree pages < 1s LCP. Third-party scripts offloaded to web workers via Partytown.