# S03 Research: Topic Color Coding & Visual Polish

## Depth: Light

Straightforward CSS + React work. All color infrastructure exists (D017, D020). Creator avatars already exist. No new libraries, APIs, or architectural decisions needed.

## Summary

The slice has three goals: (1) consistent topic category color coding across all pages, (2) smooth page transitions, (3) visually unique creator avatars. Investigation reveals **goal 3 is already done** — a sophisticated `CreatorAvatar` component with deterministic hash-based generative SVG waveforms exists and is used in CreatorsBrowse, CreatorDetail, and TechniquePage. The remaining work is CSS color propagation and page transition animation.

## Recommendation

Two tasks: one for color propagation across all surfaces, one for page transitions.

## Implementation Landscape

### What Already Exists

**Category color system (D017, D020):**
- 7 category color pairs as CSS custom properties: `--color-badge-cat-{slug}-bg` and `--color-badge-cat-{slug}-text` for Sound Design, Mixing, Synthesis, Arrangement, Workflow, Mastering, Music Theory
- Badge CSS classes: `.badge--cat-sound-design`, `.badge--cat-mixing`, etc.
- `catSlug()` helper in TopicsBrowse.tsx converts category name → CSS slug
- TopicsBrowse already applies category accent via inline `borderLeftColor` on topic cards (D020 pattern)

**Creator avatars (already complete):**
- `CreatorAvatar` component (`frontend/src/components/CreatorAvatar.tsx`) generates deterministic SVG waveform avatars using FNV-1a hash of creatorId
- Already used in: CreatorsBrowse, CreatorDetail, TechniquePage
- CSS classes: `.creator-avatar`, `.creator-avatar--img`, `.creator-avatar--gen`
- Supports optional `imageUrl` prop with fallback to generated avatar

**App structure:**
- React Router v6 with `<Routes>` in App.tsx, no `<Outlet>` layout wrapper
- No page transitions currently — no keyframes, no fade-in/out, no view transitions

### Where Colors Are NOT Yet Applied

| Surface | Current State | What's Needed |
|---------|--------------|---------------|
| **SubTopicPage** | No category color anywhere | Add colored accent (border or heading tint) using the `category` URL param → `catSlug()` → CSS var |
| **SearchResults cards** | `topic_category` shown as plain text | Apply `badge--cat-{slug}` class to category text |
| **SubTopicPage technique cards** | Plain white cards, no category badge | Add category badge with color class |
| **SubTopicPage breadcrumbs** | No color accent | Optional: tint the category breadcrumb segment |

### Page Transitions Approach

React Router v6 doesn't have built-in transitions. Options:
1. **CSS-only fade-in on route mount** — add a `@keyframes fadeIn` animation to `.app-main` or individual page containers. Simplest, no library needed. Triggers on every mount.
2. **`react-transition-group`** — wraps `<Routes>` for enter/exit animations. Heavier, requires layout changes.
3. **View Transitions API** — browser-native, but limited browser support and requires React 19+ integration.

**Recommendation:** CSS-only fade-in. A subtle 200-300ms opacity+translateY animation on page container mount. No library, no structural changes, works with current React Router setup. Apply via a shared `.page-enter` class or directly on page wrapper elements.

### Files That Need Changes

| File | Change |
|------|--------|
| `frontend/src/App.css` | Add page-enter animation keyframes, apply to page containers |
| `frontend/src/pages/SubTopicPage.tsx` | Add category color accent (border/heading), add category badge to technique cards |
| `frontend/src/pages/SearchResults.tsx` | Apply `badge--cat-{slug}` class to topic_category text in SearchResultCard |
| `frontend/src/App.css` | SubTopicPage color accent styles |

### Constraints

- `catSlug()` helper currently lives in TopicsBrowse.tsx — needs extracting to a shared util or duplicating
- SubTopicPage knows the `category` slug from URL params but needs to derive the display-friendly badge slug (they should match since the URL slug format matches the CSS slug format)
- The 7 category names in canonical_tags.yaml match the CSS property names: workflow, music-theory, sound-design, synthesis, arrangement, mixing, mastering

### No Skills Needed

All work is standard CSS + React. No external libraries needed. The `frontend-design` skill could inform animation choices but this is simple enough to not require it.
