# Remotion Short Video Storyboards

These scripts are designed for later Remotion production in both 9:16 and 16:9 formats. Keep each video between 45 and 60 seconds, use captions throughout, and end with the matching topic hub URL.

## 1. Eight Queens Backtracking Visualization

Target page: `/algorithm-visualization/`

| Time | Visual | Caption |
| --- | --- | --- |
| 0-5s | Empty 8x8 board, first queen appears | "Backtracking is a search tree, not a guess." |
| 5-15s | Queens placed row by row, invalid cells dim | "Try a column, check conflicts, then go deeper." |
| 15-28s | A conflict flashes, last queen moves backward | "When a branch fails, undo the choice." |
| 28-42s | Bitmask labels appear for columns and diagonals | "Bitmasks make the same search compact and fast." |
| 42-55s | Browser playground UI preview | "Run the search step by step on haotianblog." |

## 2. K-means One Iteration

Target page: `/machine-learning-from-scratch/`

| Time | Visual | Caption |
| --- | --- | --- |
| 0-6s | Iris scatter plot appears | "K-means starts with points and centroids." |
| 6-18s | Points connect to nearest centroid | "Step 1: assign each sample to its nearest center." |
| 18-30s | Centroids move to the average of assigned points | "Step 2: recompute the centroid." |
| 30-42s | SSE counter decreases | "SSE tracks how tight the clusters are." |
| 42-55s | K-means++ label and resource link | "Study the C implementation and download the dataset." |

## 3. CNN Convolution Sweep

Target page: `/deep-learning/`

| Time | Visual | Caption |
| --- | --- | --- |
| 0-6s | CIFAR-10 32x32 image grid | "A CNN keeps image structure instead of flattening first." |
| 6-20s | 3x3 filter slides across image | "A convolution learns local patterns." |
| 20-32s | ReLU removes negative activations | "ReLU keeps useful positive signals." |
| 32-42s | 2x2 max pooling shrinks the feature map | "Pooling reduces size while keeping strong responses." |
| 42-58s | Softmax probabilities and CIFAR-10 classes | "Read the full Tiny CNN in C on haotianblog." |

## 4. Handwritten Digit Classifier

Target page: `/student-ai-projects/`

| Time | Visual | Caption |
| --- | --- | --- |
| 0-6s | User draws a digit on a canvas | "Start with a 28x28 pixel input." |
| 6-18s | Pixel grid flattens into a vector | "The C classifier reads pixels as numbers." |
| 18-30s | Logits turn into softmax probabilities | "Softmax makes 10 class scores comparable." |
| 30-42s | Probability bars animate | "Inspect the prediction before trusting it." |
| 42-55s | Link to playground and project bundle | "Try the browser demo and read the C source." |