-
Notifications
You must be signed in to change notification settings - Fork 0
Home
# CAPTAIN COOL: DECODED
> The numbers. The decisions. The moments.
**Captain Cool: Decoded** is an interactive digital documentary and cricket analytics experience built around the career of **MS Dhoni**.
The project explores Dhoni's career through three interconnected dimensions:
- **The Numbers** — career statistics, batting positions, wicketkeeping, captaincy, venues, formats and performance trends.
- **The Decisions** — leadership, tactical choices, role evolution and match situations.
- **The Moments** — iconic matches, trophies, finishing innings and defining career milestones.
Rather than presenting Dhoni's career as a conventional statistics dashboard, the project transforms the data into an immersive, story-driven experience.
---
## What Is Captain Cool: Decoded?
Captain Cool: Decoded is designed as a combination of:
**Interactive Sports Documentary**
+
**Cricket Analytics Platform**
+
**Digital Museum**
+
**Data Visualization Experience**
The central question behind the project is:
> **What made Captain Cool?**
The answer is explored through verified cricket data, career milestones, contextual statistics and interactive visual storytelling.
The project does not attempt to reduce a career to a single rating or ranking.
Instead, it allows visitors to explore the different roles Dhoni played throughout his career:
- Batter
- Wicketkeeper
- Captain
- Finisher
- Leader
- Player
- Icon
---
## The Story
The experience follows Dhoni's career as a visual journey.
```text
2004
↓
THE ARRIVAL
↓
2005
↓
THE BLADE
↓
2007
↓
THE CAPTAIN
↓
2011
↓
THE FINISHER
↓
2013
↓
THE CHAMPION
↓
2018
↓
THE COMEBACK
↓
2023
↓
THE LEGACYThe website uses scroll position as a storytelling mechanism.
Scrolling is not simply navigation.
It becomes:
- time
- camera movement
- progression
- data discovery
- scene transition
An interactive career timeline covering the major stages of Dhoni's career.
The timeline connects:
- years
- teams
- tournaments
- milestones
- statistical changes
- major moments
The goal is to show the evolution of the player rather than simply list dates.
The batting analytics experience.
Visitors can explore Dhoni's batting across formats and career stages.
Metrics include:
- Runs
- Innings
- Average
- Strike Rate
- Not Outs
- 50s
- 100s
- Boundaries
- Highest Scores
One of the project's core analytical features.
Dhoni's performance is examined according to his batting position.
The system can analyse positions such as:
1
2
3
4
5
6
7
...
The purpose is to understand how his role changed depending on where he entered the batting order.
The project can also provide analytical groupings such as:
Top Order
Positions 1–3
Middle Order
Positions 4–6
Lower Order / Finishing Role
Positions 7–11
These groupings are analytical classifications created for the project and are not intended to replace official cricket terminology.
An exploration of Dhoni's wicketkeeping career.
Metrics include:
- Catches
- Stumpings
- Dismissals
- Dismissals per match
- Format-level performance
- Career progression
The section separates wicketkeeping performance from batting performance.
The captaincy experience.
Captaincy is analysed separately for:
- Tests
- ODIs
- T20Is
- IPL
- Relevant franchise competitions
Metrics include:
- Matches captained
- Wins
- Losses
- Ties
- No Results
- Win Percentage
- Tournament outcomes
The project avoids reducing captaincy to a single "best captain" score.
An analytical exploration of Dhoni's finishing role.
Possible dimensions include:
- Chasing performance
- Not-outs
- Death-over batting
- Strike rate
- Runs under pressure
- Boundary production
- Successful finishes
- Match-winning innings
Historical statistics are kept separate from simulated scenarios.
A digital trophy cabinet containing documented achievements.
The experience presents trophies as part of a virtual museum rather than simply displaying them as cards.
Each trophy can contain:
- Year
- Competition
- Team
- Result
- Context
An interactive archive of iconic moments.
Each moment can contain:
- Date
- Tournament
- Opponent
- Venue
- Match context
- Performance
- Result
- Relevant statistics
The section is designed to feel like a cinematic film archive.
A contextual comparison of two major environments of Dhoni's career:
India
and
Chennai Super Kings
The section can compare:
- Matches
- Runs
- Average
- Strike Rate
- 50s
- 100s
- Wicketkeeping
- Captaincy
- Trophies
Statistics are presented with their relevant population and format.
The analytical research area of the project.
This section contains the more detailed data interfaces:
- Tables
- Filters
- Charts
- Opponent analysis
- Venue analysis
- Yearly analysis
- Format analysis
- Batting-position analysis
- Career statistics
The Archive is intentionally more data-oriented than the cinematic sections.
A contextual comparison of Dhoni with players from his era.
Potential comparison dimensions include:
- Runs
- Average
- Strike Rate
- Matches
- Format
- Period
- Role
Comparisons are intended to provide statistical context.
The project does not assign an overall ranking or "GOAT" score.
Ask Mahi is the project's data-grounded question-and-answer interface.
It is not intended to be a generic chatbot.
The concept is:
User Question
↓
Question Understanding
↓
Verified Dhoni Dataset
↓
Calculation / Filtering
↓
Answer
↓
Source / Context
Example questions:
How did Dhoni perform at positions 1–4 in ODIs?
What was his highest ODI score?
How did his batting role change throughout his career?
How many dismissals did he make in ODIs?
Answers should be grounded in the project's verified dataset.
If the dataset does not contain sufficient information, the system should explicitly say so rather than invent an answer.
Data integrity is one of the most important principles of the project.
The architecture separates:
RAW DATA
↓
PROCESSED DATA
↓
ANALYTICS
↓
API / DATA ACCESS
↓
VISUALIZATION
↓
CINEMATIC EXPERIENCE
Animations and visualizations consume data.
They never generate or modify the underlying statistics.
The project is designed to use structured cricket datasets and reputable statistical references.
Primary data may include:
- Cricsheet
- Official cricket records
- ICC
- BCCI
- IPL
- ESPNcricinfo / Statsguru
- Other reputable statistical sources
Secondary datasets may be used for validation or cross-reference.
Every important metric should have:
- Source
- Definition
- Format
- Time period
- Population
- Calculation method
- Limitations
The project follows several important rules.
Where applicable:
Average = Total Runs / Total Dismissals
The project does not calculate a career average by averaging individual innings or position averages.
Strike Rate = Runs / Balls Faced × 100
Not Outs = Innings − Dismissals
subject to the relevant format/statistical definition.
The project does not casually combine:
- Tests
- ODIs
- T20Is
- IPL
unless the visualization explicitly defines the aggregation.
India and Chennai Super Kings data remain distinguishable.
The project is designed around a modern web stack.
- Next.js
- React
- TypeScript
- Tailwind CSS
- GSAP
- ScrollTrigger
- Framer Motion
- Lenis
- Three.js
- React Three Fiber
- Canvas
- Recharts
- D3.js where appropriate
- Supabase
- PostgreSQL
- Prisma
- API layer
Optional data-grounded AI capabilities through Ask Mahi.
The website is deliberately designed to avoid the visual language of a conventional dashboard.
Instead of:
Heading
↓
Cards
↓
Chart
↓
Cards
↓
Table
the experience follows:
SCENE
↓
STORY
↓
INTERACTION
↓
DATA REVEAL
↓
PAYOFF
↓
TRANSITION
The scroll position acts as the camera.
The design system is built around:
- Near-black
- Charcoal
- Deep navy
- Off-white
- Metallic gray
- Controlled India blue
- Controlled CSK yellow
The interface uses:
- Editorial typography
- Film grain
- Cinematic lighting
- Large-scale imagery
- Subtle depth
- Parallax
- Scroll-driven transitions
- Data animation
- Spatial compositions
The goal is premium rather than flashy.
Cinematic does not mean unnecessarily heavy.
The project prioritizes:
- Lazy loading
- Dynamic imports
- Code splitting
- Optimized images
- WebP / AVIF
- Optimized video
- Lazy WebGL
- Cleanup of inactive scenes
- Responsive assets
- Reduced-motion support
Heavy 3D scenes are used selectively.
The experience is designed mobile-first.
Desktop can use:
- Horizontal storytelling
- Large cinematic compositions
- WebGL
- Wide timelines
- Spatial layouts
Mobile should use:
- Vertical storytelling
- Simplified camera movement
- Touch interactions
- Optimized media
- Shorter pinned scenes
The mobile experience should not simply be a scaled-down desktop version.
The project aims to support:
- Keyboard navigation
- Semantic HTML
- Focus states
- Screen readers
- Sufficient contrast
- Alt text
- Reduced motion
With:
prefers-reduced-motionenabled, the story remains completely usable without aggressive animation.
Captain Cool: Decoded is not intended to answer:
Who is the greatest?
It is intended to answer:
What made Captain Cool?
The project approaches that question through evidence:
NUMBERS
+
DECISIONS
+
MOMENTS
=
A CAREER STORY
The goal is to let the visitor explore the evidence and form their own understanding of Dhoni's career.
Captain Cool: Decoded began from a simple fascination with MS Dhoni and evolved into an attempt to understand the career beyond highlights and famous moments.
Instead of creating another fan page, the project turns that fascination into a technical experiment:
Can a cricket career be experienced as an interactive story?
The result combines:
- frontend engineering
- data analysis
- information design
- animation
- cricket statistics
- storytelling
- interactive visualization
Potential future features include:
- Advanced Ask Mahi
- Data-grounded RAG
- More ball-by-ball analytics
- Interactive match simulations
- Career heatmaps
- Advanced venue analysis
- Finishing-pressure models
- Historical match explorer
- Interactive pitch simulations
- More 3D cinematic scenes
- Expanded data validation
Status: Active Development
The project is continuously evolving from a cricket analytics website into a cinematic interactive documentary.
Current priority:
Transforming data into experience.
Built as an independent fan-driven technology project.
Captain Cool: Decoded
MS Dhoni
Cricket · Data · Storytelling · Interactive Technology
The numbers tell the story.
The moments made the legacy.
Captain Cool: Decoded.
The man behind No. 7.
### Recommended Wiki pages
Don't put everything into one massive `Home` page. Create these GitHub Wiki pages:
```text
Home
│
├── About
├── Project Vision
├── Architecture
├── Data Pipeline
├── Data Sources
├── Data Dictionary
├── Statistical Methodology
├── Cinematic Experience
├── Features
├── Ask Mahi
├── Technology Stack
├── Performance
├── Accessibility
├── Development Guide
├── Contributing
└── Roadmap
For the GitHub repository itself, I'd keep the short About description as:
An interactive cricket documentary decoding MS Dhoni through data, decisions, and defining moments.
And the repository tagline:
The numbers. The decisions. The moments. — An interactive data-driven journey through the career of MS Dhoni.