Shoal
“Stock where it sells” feature explainer
One Monday workflow in three verbs: spot the stockouts, move the idle stock, order only the gap.
The brief, the idea and the craft
Brand
Shoal rebalances stock across a retailer's stores before it makes them buy more. Every Monday it forecasts which store × SKU pairs will sell out before the weekend, moves idle stock from the stores that aren't selling it, and drafts one purchase order for whatever is still short. The customer on screen is Ridgeback Running Co. (6 stores); the user is its ops lead.
- Look: a bright-flat light-mode B2B product. White app on a cerulean field
#00A3D9, ink#0B2230, in-app accent#0679A8; red and green are semantics only. - Type: Hanken Grotesk (UI and captions). Its figures are tabular by default, so every column and counter stays aligned.
- Mark: three equal rounded bars on a diagonal, a shoal moving together and three stock levels brought level. On the end card the bars arrive uneven and even out on the hit.
Brief
Walk a buyer through ONE real workflow in a B2B dashboard in three chaptered steps, so a viewer can explain the product to a colleague after one silent watch. It should feel like a Linear / Stripe / Ramp product film, not a screen recording. Burned-in captions as design (no voiceover), a repeated framing device instead of title cards, every number reconciled, sound designed to the UI.
Format
shoal-explainer-16x9.mp4: 1920×1080, 42.2 s, 30 fps (master).shoal-explainer-9x16.mp4: 1080×1920, 32.5 s, 30 fps. Rebuilt, not cropped:- the app re-flowed to one phone-width column
- the by-store chart grows in place out of the clicked row
- the PO opens inside the list
- captions in a top band, with must-read inside the Reels safe zone
- re-timed to 7.5 s chapters
What makes it work
- One workflow, three verbs. Spot, move, order: each is a real interaction (click, drag, approve) with a visible data consequence (bars cross the Saturday line, chips flip, a total recalculates, a count reaches 0).
- The UI carries the structure. The chapters are the product's own step rail, lifted out of the header and docked back, and it becomes the logo at the end. No title cards, no wipes: a row becomes the chart, rows become PO lines, the rail becomes the mark.
- The numbers add up on every frame: 23 = 14 transferred + 9 ordered · 79 units / $2,503 moved · PO 9 lines, 45 units, $3,276.00 · Hoboken 2/1.7 = 1.2 d → 10/1.7 = 5.9 d · Mon Oct 26 → Sat Oct 31.
- Readable on a phone: captions 68–80 px and story UI at 30–40 px output, checked at 390 px wide; the vertical is rebuilt around a single column rather than cropped.
Production notes
Structure (16:9, timestamped; 120 BPM, chapters on bar lines)
The framing device is the app's own step rail (1 Spot risks · 2 Move stock · 3 Order the gap). At each chapter it lifts out of the header as a large card, ticks the finished step with its result (23 at risk, 14 moved, 9 ordered), lights the next and docks back. Each advance follows the UI action that finished the step.
| Time | Beat |
|---|---|
| 0.0–2.4 | Hook: "[23] stockouts before Saturday." The red chip in the caption and the app's own counter tick 17 → 23 together as the Monday forecast lands row by row. |
| 2.4–5.0 | Pull back to the whole app (establishing, held 1.4 s). |
| 5.0–12.8 | 1 · Spot. The rail lifts and lights step 1. "Sold out here. Sitting idle there." Click Trailfox 3 · M 10 · Hoboken: the row flies out into a days-of-cover chart by store. Hoboken has 1.2 days (2 on hand, sells 1.7/day); Montclair has 47 days (14 idle). A suggestion offers Move 8 pairs, and the click advances the rail. |
| 14.0–24.0 | 2 · Move. The rail ticks 23 at risk and slides to 2. A tight full-bleed push: "Move it before you buy more." The hand reveals the 8 pairs pill, drags it up to Hoboken and lets go: Hoboken 1.2 → 5.9 d (red → green, past Saturday), Montclair 14 → 6, the chip flips Out Tue → Covered, and transfer TR-0412 arrives Tue. Back on the list, Apply 13 more: 13 chips flip to Moving · TR-04xx and the count drops 22 → 9. |
| 24.0–34.0 | 3 · Order. The rail ticks 14 moved and slides to 3. "Order only the gap." The 9 short rows re-sort to the top, then Draft PO: the PO opens inside the list and each row becomes its line (camera locked). A lead-time note suggests +2, so line 1 goes 6 → 8 and the total recalculates $3,128.00 → $3,276.00. Approve & send → Sent · ETA Thu, Oct 29, and the count rolls 9 → 0 on frame. |
| 34.0–38.0 | Outcome: the whole window once, in its final state. The rail lifts with ✓✓✓ and all three results. 0 stockouts before Saturday · $2,503 of stock moved, not bought · "Done before the stores open." |
| 38.0–42.2 | End card: the rail's three ✓ pills fly into the mark's three uneven bars, which even out on the hit (38.5 s). Then shoal, "Stock where it sells.", shoal.so. Static from ~39.5 s. |
9:16 (32.5 s): hook 0–3 · Spot 3–10.5 · Move 10.5–18 (tight drag, card closes back into the list, Apply) · Order 18–25.2 (push-in on the bumped line, total and Approve) · outcome 25.2–28.5 (the giant number counts 9 → 0) · end card 28.5–32.5 (hit 29.0 s).
Deliverables
- Masters:
shoal-explainer-16x9.mp4·shoal-explainer-9x16.mp4(H.264 + AAC, faststart, Concept metadata). - Web copies:
*-web.mp4(< 15 MB, H.264 High, faststart, same tag).
Audio
Original bed (120 BPM, E♭ major) with clear chapter sections, a lift into the outcome and the end hit inside the bed; designed UI SFX on the exact event frames (clicks, drag pick/drop, status flips, recalc ticks, approve, rail). Mixed to −14 LUFS, true peak ≤ −1.5 dBTP as delivered and after AAC.
Posters and stills
Credits and licensing
- Concept
Brand and data are fictional (Concept). Shoal, shoal.so, Ridgeback Running Co., its six stores, Rosa Quintero, Trailfox Wholesale, every product (Trailfox 3, Cadence 5, Ridge WP 2, Pacer Vest 2L, Halo 400, Merino Crew, Glide Balm, Thermal Half-Zip), SKU, transfer ID, PO number, quantity, price and date were invented by Glint Studio for this portfolio piece. All numbers reconcile.
- Design, motion, code
Glint Studio. The Shoal app (sidebar, step rail, at-risk list, days-of-cover chart, drag-to-transfer, purchase order) was rebuilt in React/SVG and rendered with Remotion 4. No screen recordings, no stock and no AI imagery. The cursor, camera and captions are driven per frame from one timeline, so the picture, the captions and the sound cue lists share the same frames.
- Fonts (SIL Open Font License 1.1, via the google/fonts repository)
- Hanken Grotesk (UI, captions, wordmark; variable 100–900): OFL-1.1, © The Hanken Grotesk Project Authors.
- Audio
No third-party audio.)
- Third-party marks
None. The window chrome and icons are drawn in code.
A piece like Shoal is the Launch Video package: US$990, fixed.
See the packages