---
id: S01
parent: M011
milestone: M011
provides:
  - Card hover animation pattern (scale+shadow) on all card types
  - Stagger entrance animation utility class
  - GET /api/v1/techniques/random endpoint
  - Random Technique button on homepage
requires:
  []
affects:
  []
key_files:
  - frontend/src/App.css
  - frontend/src/pages/Home.tsx
  - frontend/src/pages/TopicsBrowse.tsx
  - frontend/src/pages/CreatorDetail.tsx
  - frontend/src/pages/SubTopicPage.tsx
  - frontend/src/pages/SearchResults.tsx
  - backend/routers/techniques.py
  - frontend/src/api/public-client.ts
key_decisions:
  - CSS stagger pattern uses --stagger-index custom property with calc() delay rather than nth-child selectors — works with dynamic lists
  - Dedicated /random endpoint returning just {slug} rather than reusing sort=random on list endpoint — cleaner API surface
  - /random route placed before /{slug} to avoid FastAPI slug capture
patterns_established:
  - card-stagger utility class: add className='card-stagger' and style={{ '--stagger-index': i }} to any .map() loop for entrance animations
  - Featured section visual treatment: gradient border-image + double box-shadow glow
observability_surfaces:
  - none
drill_down_paths:
  - .gsd/milestones/M011/slices/S01/tasks/T01-SUMMARY.md
  - .gsd/milestones/M011/slices/S01/tasks/T02-SUMMARY.md
duration: ""
verification_result: passed
completed_at: 2026-03-31T08:25:58.040Z
blocker_discovered: false
---

# S01: Interaction Delight & Discovery

**Added card hover animations (scale+shadow) on all 6 card types, staggered entrance animations across 5 page components, gradient-border glow on featured technique, and a Random Technique button with backend endpoint.**

## What Happened

Two tasks delivered CSS interaction polish and a random discovery feature.

T01 added `transform: scale(1.02)` hover transitions with `will-change: transform` to all 6 card types (recent-card, creator-technique-card, subtopic-technique-card, search-result-card, topic-card, nav-card). Created a `@keyframes cardEnter` animation (opacity 0→1, translateY 12px→0, 300ms ease-out) with a `.card-stagger` utility class driven by a `--stagger-index` CSS custom property. Applied stagger indices via JSX style props across Home.tsx, TopicsBrowse.tsx, CreatorDetail.tsx, SubTopicPage.tsx, and SearchResults.tsx. The featured technique section got a gradient `border-image` and double box-shadow glow treatment.

T02 added a `GET /api/v1/techniques/random` backend endpoint (placed before the `/{slug}` route to avoid capture) that returns `{slug}` via `ORDER BY random() LIMIT 1`, with 404 when no techniques exist. Frontend gets `fetchRandomTechnique()` in the API client and a 🎲 Random Technique button on the homepage with loading and error states.

Both tasks verified with TypeScript (`tsc --noEmit`) and Vite production build (50 modules). All grep checks confirm features landed in expected files.

## Verification

All slice-level checks pass:
- `npx tsc --noEmit` — exit 0, no type errors
- `npm run build` — exit 0, 50 modules, 806ms build
- `grep cardEnter App.css` — found
- `grep card-stagger App.css` — found  
- `grep fetchRandomTechnique public-client.ts` — found
- `grep /random techniques.py` — found
- `grep Random Home.tsx` — found
- `grep stagger-index` across all 5 page components — found in each (Home:3, TopicsBrowse:1, CreatorDetail:1, SubTopicPage:1, SearchResults:1)

## Requirements Advanced

- R016 — All 6 card types have scale(1.02) hover with smooth 200ms transition. 5 page components use staggered cardEnter animation.
- R017 — Featured technique section has gradient border-image and double box-shadow glow, visually distinct from regular cards.
- R018 — Random Technique button on homepage calls GET /random endpoint and navigates to result. Loading and error states implemented.

## Requirements Validated

None.

## New Requirements Surfaced

None.

## Requirements Invalidated or Re-scoped

None.

## Deviations

SearchResultCard needed a staggerIndex prop threaded through (not anticipated in plan). topic-card had no existing :hover rule — one was added. border-image removes border-radius on the featured card (CSS limitation) but the glow box-shadow still provides the visual treatment.

## Known Limitations

border-image CSS property strips border-radius on the featured technique card. The glow effect (box-shadow) still provides visual distinction but the card corners are square rather than rounded.

## Follow-ups

None.

## Files Created/Modified

- `frontend/src/App.css` — Added card hover scale(1.02) transitions, @keyframes cardEnter, .card-stagger utility, .home-featured glow treatment, .btn--random and .home-random styles
- `frontend/src/pages/Home.tsx` — Added stagger indices to nav-cards and recent cards, Random Technique button with loading/error states
- `frontend/src/pages/TopicsBrowse.tsx` — Added card-stagger class and stagger-index to topic cards
- `frontend/src/pages/CreatorDetail.tsx` — Added card-stagger class and stagger-index to creator technique cards
- `frontend/src/pages/SubTopicPage.tsx` — Added card-stagger class and stagger-index to subtopic technique cards
- `frontend/src/pages/SearchResults.tsx` — Added card-stagger class and stagger-index to search result cards, threaded staggerIndex prop
- `backend/routers/techniques.py` — Added GET /random endpoint before /{slug} route
- `frontend/src/api/public-client.ts` — Added fetchRandomTechnique() API client function
