Inspiration

Open a dense PDF when you have ADHD and you don't hit "this is hard" — you hit a wall. Your brain won't even start. There's no first step, just a slab of text and that stuck feeling before you've begun. Tools like NotebookLM or ChatGPT don't fix this; they make you leave the page, copy, paste, screenshot, switch apps — and a distractible brain only has to slip once to give up. We wanted something that lives on the page you're already reading and pulls the tangle apart one thread at a time. Hence the name, and the ball-of-yarn logo.

What it does

Highlight any text on any page and a concept map opens in a side panel using progressive disclosure — you see only the core idea first, then tap to reveal one layer at a time, so you're never shown a wall of text again. It also works on PDFs and diagrams: since Chrome blocks extensions from its PDF viewer, we screenshot the tab and send the pixels to Gemini's vision, which is what lets it read the actual files students revise from. There's a coach chat that already has the whole page as context (no pasting), 30-second micro-quests with XP and confetti to make it stick, and an interactive sandbox where Gemini pulls the variables out of a formula so you can drag sliders and watch the graph move. Plus streaks, a dashboard, dyslexia-friendly font, reduced-motion, and light/dark.

How I built it

A Chrome extension built with WXT, React, TypeScript and Tailwind. A content script handles the highlight button, a background service worker talks to Gemini and manages state, and a side panel renders the map, quests, sandbox and coach. We use Gemini 2.5 Flash five different ways — text-to-concept-tree, vision-to-concept-tree, chat, quiz generation, and formula extraction — all with structured JSON output so responses are always parseable. Formulas are evaluated safely with mathjs, charts with Recharts.

Challenges I ran into

Chrome's PDF viewer sandbox was the big one — no extension can read text inside it, so we flipped the whole approach and used Gemini's multimodal vision instead. Getting the side panel to open reliably from an in-page click was fiddly because of Chrome's user-gesture rules, and we had to disable Gemini's "thinking" mode to get responses fast enough to feel instant.

Accomplishments that I'm proud of

What I learned

That accessibility isn't a feature you add at the end — for this audience it's the entire product. And that Gemini's vision was the unlock: it turned "we can't touch PDFs" into our single biggest advantage.

What's next for Unravel

Spaced repetition that resurfaces quests you struggled with, shareable maps for study groups, and teacher/SEN dashboards.

Built With

  • activetab
  • browser
  • canvas-confetti-animations-platforms:-chrome
  • capturevisibletab)-ui/design:-tailwind-css
  • extension
  • firefox
  • fontsource-(nunito-+-opendyslexic-fonts)
  • framer-motion
  • gemini
  • javascript-frameworks-&-libraries:-react-19
  • languages:-typescript
  • lucide-react-icons
  • manifest
  • math.js-build-tools:-vite
  • multi-target
  • project
  • recharts
  • sidepanel
  • support)
  • tabs
  • tailwind-css-4
  • type:
  • typescript-compiler-browser-apis:-chrome-extensions-api-(storage
  • wxt
  • wxt-0.20
Share this project:

Updates

Submission history