[!NOTE] The Origin: To help my son enter a deep state of focus during study sessions, I “hand-rolled” a lightweight “Concentration Tool” using pure HTML. No heavy frameworks, just three raw, direct modules.
In this post, I’ll share the design logic behind this tool. You can experience it directly by clicking Concentration Tool in the navigation bar.
1. Why “Hand-roll”?
There are countless focus apps out there, but they often:
- Are too heavy: Leading to secondary distractions within the app itself.
- Lack specificity: I needed a pure environment that aligns with a specific study rhythm (15-20 min cycles).
So I wrote this HTML page in under 400 lines of code.
2. Three Core Modules
A. Visual Warmup
Before diving into study, the brain needs a “startup ceremony.”
- Principle: Stare at the dot in the center for 30 seconds without blinking. This exercises eye muscles and forces the neural system to converge from a scattered state to a single point.
- Color Choice: Defaulting to Tiffany Blue, a color that provides a calm and restrained visual psychological cue.
B. Focus Timer
We don’t believe in long, exhausting study sessions; we emphasize efficient “short-cycle deduction.”
- 15/20 Min Closed-loop: Tailored to a child’s attention span, featuring both Pie and Grid visual feedback.
- Visualized Elapse: Watching the red pie shrink is more intuitive than abstract numbers for a child to perceive the passage of time.
C. State Check-in
Learning isn’t just about input; it requires “meta-cognitive” monitoring.
- State Cards: Let the child choose if they are “Fully Charged” or have a “Cotton Brain” before or after the timer.
- Introspection Loop: This simple interaction helps the child build self-awareness—“How am I doing right now?"—the foundation of long-term focus.
Conclusion
This tool is a branch of the VisAgent/Claw philosophy: Tools don’t have to be complex, but they must be “fit-for-purpose.” If your child struggles to stay seated during study, feel free to try it out via the navigation bar.
Happy hand-rolling! 🦾