Inspiration

Have you ever looked at a goal on your to-do list—like "clean the house" or "start writing the research paper"—and felt completely frozen?

For millions of people living with ADHD, dyslexia, or executive dysfunction, this feeling is called task paralysis. When a project feels too big or vague, our brains hit a wall.

Most productivity tools actually make this worse. They slap you in the face with endless lists, complex sub-task menus, and cluttered dashboards. We built StepForge to do the exact opposite: to create a calm digital space that takes your scariest goals, breaks them into bite-sized micro-steps using AI, and gently holds your hand through one single action at a time.

What it does

StepForge bridges AI task breakdown with thoughtful accessibility to make starting any goal feel effortless:

• AI Micro-Step Breakdown: Enter an overwhelming task, and Grok AI automatically breaks it down into 4 to 6 short, low-effort steps.
• Single-Task Isolation: Focus mode completely hides the rest of your to-do list and shows only one step at a time on screen, eliminating visual clutter and cognitive overload.
• Cognitive Load Reduction: Designed around a simple mental formula:

$$CL = \frac{T_{complexity} \times V_{clutter}}{A_{support}}$$

By shrinking task complexity ($T_{complexity}$), clearing screen clutter ($V_{clutter}$), and offering accessibility tools ($A_{support}$), mental stress drops down to zero.

• Bionic Reading & Dyslexia Fonts: Includes an instant toggle for Bionic Reading (which bolds the first few letters of words to guide eye flow) and the Atkinson Hyperlegible font to make reading far easier.
• Calm Audio Soundscapes: Generates soothing brown noise directly in your browser to help mask background distractions without needing external apps or music streams.
• Voice Interactions: Read steps out loud with text-to-speech or dictate tasks hands-free with speech recognition.

How we built it

We focused on keeping StepForge fast, lightweight, and accessible on any device:

• Core Stack: Built with Vanilla JavaScript (ES6+), HTML5, and Vite for lightning-fast load times.
• UI & Styling: Styled with Tailwind CSS to deliver a sleek dark glassmorphism design, soft color palettes, and high-contrast themes (Dark, Calm, and Light).
• AI Intelligence: Integrated the xAI Grok API (grok-beta) to act as an executive function coach that translates vague prompts into actionable micro-steps.
• Browser Audio & Speech APIs: Built a custom Web Audio API sound generator for brown noise and leveraged native browser Speech APIs for voice input and text-to-speech output.

Challenges we ran into

1. Coaching the AI for Simplicity: Getting Grok to return short, practical micro-steps rather than long paragraphs required careful system prompt tuning and defensive JSON parsing.
2. Smooth Browser Soundscapes: Synthesizing continuous brown noise directly in the browser without click artifacts or audio pops took significant tweaking of Web Audio buffer nodes.
3. Balancing Beauty with Accessibility: Creating a modern, polished dark mode with glassmorphism while maintaining strict WCAG contrast ratios and high-contrast focus rings for keyboard navigation.

Accomplishments that we're proud of

• Building a zero-dependency Web Audio engine that generates calming focus noise directly on the client.
• Crafting a Single-Task Isolation View that genuinely lowers anxiety and helps users build momentum immediately.
• Creating an end-to-end accessible application that bridges cutting-edge AI (Grok) with neurodiversity-focused UX design.

What we learned

• Accessibility Helps Everyone: Designing specifically for neurodivergent minds creates a cleaner, more intuitive experience for all users.
• Less Is Always More: Stripping away extra UI elements during Focus Mode proved to be the single most effective feature for overcoming procrastination.
• AI as an Executive Proxy: Generative AI is uniquely suited for reducing mental friction by structuring ambiguous thoughts into small, manageable actions.

What's next for Stepforge

• Gentle Focus Timers: Adding subtle visual timer rings tailored for short focus sprints (like 10-minute sprint blocks).
• Browser Extension: Allowing users to highlight any dense article, assignment, or email on the web and turn it into a StepForge step-by-step checklist with a single click.

Built With

• html5
• javascript
• tailwind
• vite
• xai