Neuroscope

An adaptive cognitive visualizer and self-paced session tool co-designed in practice with neurodivergent learners.

Comment

Inspiration

Traditional educational software assumes a singular, rigid cognitive pathway. For many neurodivergent learners, static and over-stimulating visualizers, forced pacing, and hidden engagement tracking logic create unnecessary cognitive load, working memory exhaustion, and sensory overwhelm.

We built NeuroScope to turn this paradigm upside down. Guided by the philosophy "Designed with, not just for," we collaborated directly with a neurodivergent learner, Sora, to engineer a tool that dynamically shifts representation styles and pacing intervals to match the learner’s immediate threshold and sensory comfort.

What it does

NeuroScope is an adaptive fractions visualizer and pacing workspace that coordinates five modular systems:

Adaptive Concept Visualizer: Coordinates state across three interchangeable views: 3D Spatial Mode: An interactive 3D cake model.Slices translate outward radially on hover and toggle selection on click. Sequential Mode: A non-3D step-by-step card guide with an interactive SVG progress tracker to minimize working memory friction. Narrative Mode: Anchors numbers in a sourdough bread-sharing story, rendering floating bread slices off a cutting board. Evidence-Based Strategy Overlay: A drawer that queries IES ERIC and Europe PMC (PubMed) in parallel to display citation cards explaining the pedagogical validation backing each visual mode. Self-Paced Session Flow: A clock-driven timer panel showing gentle break prompts. It includes a "Stay in this concept" bypass toggle to disable all timer interrupts. No engagement tracking or behavior inference is used. Educator/Parent Annotation Layer: A local-storage observation system using non-clinical language ("what supported the learner" rather than diagnostic terminology) displaying notes as expandable badges next to headers. Co-Design Journal: A chronological timeline recording session inputs, direct quotes (highlighted in gold), and ensuing product iterations.

How we built it

Frontend Architecture: Built using Next.js 14 (App Router, TypeScript) and Tailwind CSS. 3D Graphics Engine: Implemented React Three Fiber (R3F) and Three.js to construct custom-extruded 3D shapes with bevel parameters on an HTML5 canvas. Academic Data Layer: Constructed Next.js API routes that make parallel, aborted requests to ERIC and Europe PMC APIs. It includes an in-memory caching registry and Incremental Static Regeneration (ISR) to revalidate cache items every 24 hours. Automation & Caching: Added a Vercel Cron handler (vercel.json) that queries the API endpoint daily to warm up edge caching locations. Media Processing: Utilized FFmpeg to extract high-quality, lightweight poster fallbacks to optimize Largest Contentful Paint (LCP).

Challenges we ran into

React 18 vs R3F Dependencies: R3F target environments often assume React 19, causing dependency conflicts during Next.js initialization. We resolved this by pinning compatible legacy peer versions and enforcing build targets. 3D Extrusion Geometry: Creating upright wedges that translate outwards radially on click required custom bevel path calculations rotated by −π/2 on the X-axis, computing translation coordinates Hydration Mismatches: WebGL canvas elements cannot be prerendered on the server. We resolved hydration errors by client-isolating WebGL rendering nodes using Next.js dynamic loaders.

Accomplishments that we're proud of

Comprehensive Accessibility (WCAG AA+): Built visible gold focus indicators (3px solid with 2px offsets), ARIA tab structures, hidden emoji indicators, and full keyboard-only navigation compatibility. OS-Level Reduced Motion Integration: If prefers-reduced-motion is enabled, the 3D rotation animations freeze, and the hero video unmounts completely, rendering a static fallback to conserve CPU resources. Manual Animation Pause Toggles: Integrated a custom play/pause override button for the hero loop video to help users without system-level settings. 0-Warning Production Builds: Compiled the entire package with zero ESLint warnings and zero TypeScript compilation errors.

What we learned

We learned that the best educational software doesn't try to direct or diagnose. By replacing clinical assessment parameters with explicit user control (manual timers, mode switches, and non-clinical parent annotations), we could build a highly empowering, low-stimulus learning environment.

What's next for Neuroscope

Interactive Ratios & Algebra: Expanding the concept rendering engine beyond fractions to algebra, geometry, and spatial scaling. Multi-Account Sync: Enabling collaborative, syncable workspaces for educators, guides, and learners to review adaptations across local networks. Offline PWA support: Packaging the custom 3D bundle to run offline without local server dependencies

Built With

Share this project:

Updates

Submission history