# S01: Interaction Delight & Discovery — UAT

**Milestone:** M011
**Written:** 2026-03-31T08:25:58.041Z

# S01 UAT: Interaction Delight & Discovery

## Preconditions
- Chrysopedia running at http://ub01:8096
- At least 1 technique page exists in the database
- Modern browser (Chrome/Firefox/Safari)

## Test Cases

### TC-01: Card Hover Animation — Homepage Recent Cards
1. Navigate to http://ub01:8096
2. Hover over any card in the "Recently Added" section
3. **Expected:** Card smoothly scales up (~2%) with enhanced shadow over ~200ms
4. Move mouse away from card
5. **Expected:** Card smoothly returns to original size

### TC-02: Card Hover Animation — All Card Types
1. Navigate to Topics page → hover a topic card
2. Navigate to any topic → hover a subtopic technique card
3. Navigate to Creators page → click a creator → hover a creator technique card
4. Use search → hover a search result card
5. On homepage → hover a nav card (Topics/Creators)
6. **Expected:** All 5 card types exhibit the same scale+shadow hover effect

### TC-03: Staggered Entrance Animation — Homepage
1. Hard refresh http://ub01:8096 (Ctrl+Shift+R)
2. Observe the nav cards and recently added cards
3. **Expected:** Cards fade in and slide up sequentially (not all at once). Each card appears ~60ms after the previous one.

### TC-04: Staggered Entrance — Other Pages
1. Navigate to Topics page — cards should stagger in
2. Navigate to a Creator detail page — technique cards should stagger in
3. Navigate to a SubTopic page — technique cards should stagger in
4. Perform a search — result cards should stagger in
5. **Expected:** All pages show sequential card entrance, not simultaneous

### TC-05: Featured Technique Glow
1. Navigate to homepage
2. Scroll to the "Featured Technique" section
3. **Expected:** The featured technique card has a visible gradient border and soft glow (cyan-tinted box shadow) that distinguishes it from regular cards
4. **Note:** Corners may be square due to border-image CSS limitation — this is known

### TC-06: Random Technique Button — Happy Path
1. Navigate to homepage
2. Locate the 🎲 "Random Technique" button (between nav cards and featured section)
3. Click the button
4. **Expected:** Button shows brief loading state, then navigates to a technique page
5. Use browser back, click the button again
6. **Expected:** May navigate to a different technique (randomized server-side)

### TC-07: Random Technique Button — Loading State
1. On homepage, open browser DevTools Network tab
2. Throttle network to "Slow 3G"
3. Click the Random Technique button
4. **Expected:** Button shows a loading indicator while the request is in flight
5. Remove throttle

### TC-08: Random Technique API — Direct
1. Open http://ub01:8096/api/v1/techniques/random in browser or curl
2. **Expected:** JSON response `{"slug": "some-technique-slug"}` with 200 status
3. Refresh multiple times
4. **Expected:** Different slugs returned (assuming multiple techniques exist)

### Edge Cases

### TC-09: Card Stagger with Few Items
1. If a creator has only 1 technique, navigate to their detail page
2. **Expected:** Single card still animates in (no delay needed for index 0)

### TC-10: Featured Technique Glow in Light/Contrast
1. On homepage, inspect the featured technique section
2. **Expected:** Glow is subtle — visible but not overpowering (cyan tint, not neon)
