Component Kit

The building blocks behind every page on this site, and how they fit together.

Instead of pulling in a full UI library, I keep a small kit of my own: accessible Radix primitives styled with Tailwind and class-variance-authority, tuned for a dark, music-first site. Every piece below is the real component, rendered live. The same components power Daily Melody, Inner Tempo, Sound Map and the rest.

Primitives `components/ui`

Button

Mono, uppercase buttons with a cyan glow, a glass variant and spring hover/tap motion. Supports loading state and icons.

src/components/ui/button.tsx

Dialog

Accessible modal on Radix: focus trap, Escape to close, scroll lock.

src/components/ui/dialog.tsx

A melody that grows from today’s weather.

Tabs

Radix tabs with keyboard navigation and the site’s blue active state.

src/components/ui/Tabs.tsx

Daily Melody

A generative melody that grows from your local weather.

Card

A plain surface with header, content and footer slots, used across admin and feature pages.

src/components/ui/card.tsx

Generative

2026

Beta

Badge

Small status pills with variants built using class-variance-authority.

src/components/ui/badge.tsx

Sound on

Switch

Radix toggle for on/off settings, fully keyboard and screen reader friendly.

src/components/ui/switch.tsx

Tooltip

Hover/focus hints that portal into the right container, even inside dialogs.

src/components/ui/tooltip.tsx

SegmentedControl

Pick one of a few options: radius, view, language, country. Arrow keys move between them; announced as a radio group.

src/components/ui/segmented-control.tsx

Chip

Pills for tags and quick choices. Static, clickable, or a toggle with a selected state, in neutral or the pink story color.

src/components/ui/chip.tsx

Volume60%

Slider

Single-thumb range for volume and tempo, tinted per use (each Daily Melody layer has its own color).

src/components/ui/slider.tsx

Spinner

Loading ring in four sizes that follows the site blue, or the text color inside colored buttons.

src/components/ui/spinner.tsx

Skeleton

Placeholder blocks shaped like the content on its way, so nothing jumps when it arrives.

src/components/ui/skeleton.tsx

Too many requests

Retry in 42s

Alert

Error banner with icon, actions, dismiss and a live retry countdown, shared by Sound Map and Neighborhood Vibe.

src/components/ui/alert.tsx

Input

Text field on the site palette: faint border, blue focus ring, muted placeholder.

src/components/ui/input.tsx

Select

Accessible Radix dropdown for picking one value, with keyboard search.

src/components/ui/select.tsx

Only rising words

Checkbox

Radix checkbox with a visible focus ring, used in admin filters.

src/components/ui/checkbox.tsx

DropdownMenu

Menus of actions or options that open from any trigger.

src/components/ui/dropdown-menu.tsx

Word	Headlines
Argentina	42
España	31
San Lorenzo	12

Table

Plain, readable tables for rankings and admin data.

src/components/ui/table.tsx

Hello again 👋

FadeIn

Fades and lifts content in on mount, CSS-only, off under reduced motion.

src/components/ui/fade-in.tsx

Composed `components/shared`

darkaico

GradientTitle

The purple-to-red display heading. Four sizes, any tag, no clipped descenders.

src/components/shared/GradientTitle.tsx

Inner Tempo

Tap your rhythm

PageHeader

Centered title block shared by content pages: icon, gradient title, actions and subtitle.

src/components/shared/PageHeader.tsx

HelpPopup

“How it works” modal behind a small trigger, built on Dialog.

src/components/shared/HelpPopup.tsx

Buenos Aires, Argentina

SelectedChip

A removable chip for the current selection, like the chosen location in Neighborhood Vibe.

src/components/shared/SelectedChip.tsx

You’re looking at it: this page sits on top of it.

AnimatedBackground

Page shell with drifting color blobs (or the star sky) and a centered content column. Respects reduced motion.

src/components/shared/AnimatedBackground.tsx

SearchBar

Place search shell: icon, debounced results anchored under the bar, and a slot for actions. Used by Sound Map and Neighborhood Vibe.

src/components/shared/SearchBar.tsx

Originals

SectionHeading

The small spaced-out label that opens sections on content pages.

src/components/shared/SectionHeading.tsx

Energy

How full it plays: drum detail, fills, comping, brightness

GenerativeSoundControls

Layer toggles and energy picker for the generative music in Daily Melody and Inner Tempo.

src/components/shared/GenerativeSoundControls.tsx

ProviderSelector

Spotify / YouTube switch in each brand’s color.

src/components/shared/ProviderSelector.tsx

LocationSwitchDialog

Confirms before swapping the location the music is built from.

src/components/shared/LocationSwitchDialog.tsx

Effects `components/effects`

Drifting behind this very page, look at the corners.

BlobBackdrop

Soft color blobs behind content pages: a palette per page, sized with the screen, drifting gently toward the pointer (off on touch and reduced motion).

src/components/effects/BlobBackdrop.tsx

Fills the whole screen, so it lives behind the home page.

WeatherSky

three.js particle sky shaped by the hour and the local weather.

src/components/effects/WeatherSky.tsx

WobbleOrb

A soft gradient orb that moves in place: a wobble in any of four directions, or a heartbeat pulse. The track art for the originals on Explorations.

src/components/effects/WobbleOrb.tsx

How it’s organized

layout/App shell: Navbar, Footer and the root wrappers.
admin/Admin-only pieces: sidebar, data tables, status dots and the API health panel.
common/Small shared bits such as the language selector.
providers/Context providers, e.g. Auth0.
analytics/Analytics loaders.

Primitives components/ui