Visual Analysis of Team Roster

ROSTER is in beta and currently requires a larger screen.

Resize your browser window or open ROSTER on a larger display.

Loading neural voice clips

Neural voice plays prebuilt Kokoro PCM from shipped sample packs — hydrated into memory and stitched at playback, with no live ONNX model on this device. System voices differ by platform, are hard to control, and frankly the Windows voice gets unpleasant after a while. Sample packs keep tone and timing consistent. This isn’t a screen reader. ROSTER authors its own phrases for chart and player browse, not a generic read of the page.

0%

Voiceover

System Neural

Search

Team

Position

Ranked by:

ROSTER V3.1

ROSTER is an experimental web app for exploring NFL team rosters across many dimensions. It grew from an idea I sketched years ago while working on Madden NFL: instead of treating a roster like a spreadsheet, examining one attribute at a time, what if you could see where every player sits within the whole team?

Using Madden ratings, ROSTER lets you move between attributes, see the roster reorganize from high to low, compare players, and cluster cohorts by College and a chooser for Hairstyle, Experience, or Expression.

Technology

HTML, CSS, and ES modules
Built in Cursor — both as the IDE and as the organizer/planner for agent chats, implementation plans, and systems docs
Pipeline tooling: Node + Cheerio (fetch/join), Sharp (portraits), Cloudflare R2 (photos + atom voice packs), Vercel (app host)
Unit and interaction tests with Node’s test runner and Playwright

Ratings and portraits are third-party materials assembled for this experimental exploration — not an official NFL or EA product, and not for commercial redistribution.

Madden ratings. Player attributes come from a community Madden NFL 26 Player Ratings — Base spreadsheet (CSV export), name-matched into per-team roster JSON. Week tabs on that sheet track rating updates over the season; this build uses the Base ratings set.
Player portraits. Headshots were scraped from NFL.com team roster / player profile pages, with club official-headshot galleries as a high-res fallback when available. Images were processed with Sharp (and face-api for head framing), then hosted on Cloudflare R2.
Hairstyle & expression. Offline enrichment with Claude vision (Anthropic Messages API, default model Claude Sonnet): one call per portrait. Hairstyles are free-text descriptions bucketed into silhouette tags; expressions are scored into mood + moodDetail and clustered in the app. No vision API runs in the browser.
Neural voice. Closed vocabulary of prebuilt PCM clips from Kokoro-82M-v1.0-ONNX via kokoro-js, voice preset am_michael. Packs (essential + atoms) hydrate into RAM and stitch at playback — no live ONNX in the app. Unbounded phrases use Web Speech; scrub sonification uses Web Audio.

Madden ratings spreadsheet
NFL.com rosters & headshots
Kokoro TTS model (ONNX)
Anthropic Claude (portrait analysis)

Charts

Click a chart to activate it, this re-sorts the player listing by that attribute (high to low)

Players & Charts

Hover to inspect
Click to select
Hold to compare
Drag to scroll

Keyboard

Browse charts
Browse players
Enter Commit to select a player or chart