HomeCognitive ScienceFlow Channel Map: Skill vs. Challenge in Self-Directed Learning

Flow Channel Map: Skill vs. Challenge in Self-Directed Learning

Interactive 2D flow-channel map for self-directed learning: a top-down heatmap of every challenge/skill pair shows where boredom, flow and anxiety live, a live learner marker traces its path, and a scrolling timeline plots skill, challenge and flow index over time. Drag on the map or use the sliders to set challenge yourself, or switch on self-directed autopilot.

Cognitive Science2DModerate60 FPS📱 Mobile-adapted⇄ 3D version
2d-self-directed-learning ↗ Open standalone

Psychologist Mihaly Csikszentmihalyi's flow channel says engagement peaks in a narrow band where task difficulty tracks current ability — too far above and you get anxiety, too far below and you get boredom, and in both cases learning stalls. This simulator renders that whole challenge/skill landscape as a 2D heatmap and drives a real learner model across it: skill grows fastest inside the flow band and saturates as it approaches mastery. Drag directly on the map or fix the challenge with the slider and watch what happens when it drifts out of range, or flip to self-directed mode and watch an autopilot recalibrate challenge to the learner's own growing skill — the exact loop a self-directed learner runs by hand when setting goals, picking resources and reflecting on progress. A scrolling timeline underneath tracks skill, challenge and flow index second by second.

⚙ Under the hood

Interactive 2D flow-channel map for self-directed learning: a top-down heatmap of every challenge/skill pair shows where boredom, flow and anxiety live, a live learner marker traces its path, and a scrolling timeline plots skill, challenge and flow index over time. Drag on the map or use the sliders to set challenge yourself, or switch on self-directed autopilot.

flow stateself-directed learningcognitive sciencemotivationskill growth

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)