Scroll Stopper

Scroll Stopper is a cognitive firewall converting doomscrolling into safe STEM learning with vertical reels, AST code parsing, XP coding rewards, scroll-velocity guardrails, & persistent AI coaching.

Comment

Scroll Stopper

Inspiration

Society today—especially teenagers—is completely hooked on doomscrolling. Standard solutions like app blockers, screen time limits, or digital detoxes simply don't work. I know this firsthand: I actually ran an experiment in my AP Chemistry class testing screen time restriction methods, and every student ended up returning to doomscrolling even more aggressively once the limits were off.

I realized that fighting the brain's craving for instant dopamine is a losing battle. Instead of trying to block the scroll, why not hijack it? That’s why I created Scroll Stopper. By keeping the familiar, high-dopamine vertical reel format but filling it with bite-sized STEM challenges, users satisfy their urge to swipe while actively learning instead of frying their brains.

What it does

Scroll Stopper acts as a cognitive firewall that transforms short-form video feeds into active learning sessions:

  • TikTok-Style Vertical Feed: Native-feeling vertical snap-scrolling (snap-y snap-mandatory) complete with custom metadata, concept tags, and social UI overlays
  • Interactive Code Challenges: Each reel embeds a live code editor where users solve bite-sized STEM problems to earn +100 XP, trigger visual confetti, and transition to the next topic
  • Cognitive Safety Intercept: Monitors scroll velocity. If a user rapidly swipes past 3 reels without engaging with a challenge, it triggers a mandatory 5-second "Mindful Pause" break to disrupt mindless scrolling loops
  • Mindful Ratio Tracker: Displays live header metrics calculating active engagement versus passive consumption: $$\text{Mindful Ratio} = \frac{T_{\text{active learning}}}{T_{\text{active learning}} + T_{\text{passive scroll}}} \times 100\%$$
    • Displays a "Cognitive Safety Index" badge alongside "Brainrot Avoided" time tracking
  • Context-Aware AI Coach: An integrated AI Tutor powered by gpt-5-mini and gpt-5-nano with localized safety filtering and persistent localStorage API key storage

How I built it

  • Frontend & Styling: Built using Next.js, React, and Tailwind CSS using strict mobile-first container constraints (h-screen w-full max-w-md) to preserve UI proportions across screens
  • Development Workflow: Built the core structure independently and leveraged Claude Code to rapidly accelerate and refine the second half of development
  • AST Code Engine: Engineered a custom static syntax parser that checks user code strings fAST(code) for required language paradigms (like explicit .map() or .filter() usage) prior to execution

Mathematical Formulation of AST Scoring & Safety

The scoring engine evaluates user input Cuser against expected output Otarget and required syntax rules Sreq:

$$Score(C_{user}) = 100\text{ XP if } \text{eval}(C_{user}) = O_{target} \land S_{req} \subseteq f_{AST}(C_{user})$$

$$Score(C_{user}) = 50\text{ XP (Warning) if } \text{eval}(C_{user}) = O_{target} \land S_{req} \not\subseteq f_{AST}(C_{user})$$

$$Score(C_{user}) = 0\text{ XP otherwise}$$

For the Cognitive Safety Intercept, rapid scrolling velocity V triggers a mandatory guardrail break if:

$$\sum_{i=1}^{3} \mathbb{I}(\Delta t_i < 15\text{s} \land \text{ChallengeAttempted}_i = \text{False}) = 3$$

Challenges I ran into

  • Debugging the 3-Scroll Intercept: Getting the state machine to accurately track rapid scrolling velocity across snap-scroll container triggers without false positives was tough to calibrate
  • Generating Quality STEM Content: Designing bite-sized STEM problems that are easy to digest in under 30 seconds while still testing real coding concepts required extensive curriculum planning
  • Vercel AI & Generation Limits: Hitting prompt limits during rapid UI iterations forced me to optimize my prompt strategies, export raw project files, and refactor code locally

Accomplishments that I'm proud of

  • Single-handedly building and deploying a fully functional, highly responsive Next.js application on Vercel
  • Validating a real-world problem observed in my AP Chem class with a practical, software-based solution
  • Creating an AST static syntax analyzer that awards partial XP for correct outputs missing required paradigms

What I learned

  • Dopamine loops don't have to be destructive—they can be re-engineered to form productive daily habits
  • Utilizing modern AI tools like Claude Code to streamline logic debugging and accelerate development

What's next for Scroll Stopper

  • Teacher Portal: Allowing educators to upload custom 30-second STEM clips and AST challenge specs directly to their students' feeds
  • Adaptive AI Difficulty: Dynamically tuning problem difficulty based on real-time scroll velocity and code execution success rates

Built With

Share this project:

Updates

Submission history