Unfog/FocusLens

From information overload to focused understanding.

Comment

Inspiration

We live in a world where information is abundant, but understanding it isn't always easy. Students and readers constantly face dense textbooks, complicated assignments, research papers, technical documentation, and long articles.

We noticed that most existing tools solve only one part of the problem. A summarizer makes text shorter, text-to-speech makes it audible, and formatting tools make it more readable—but they don't connect these experiences.

That inspired us to build Unfog: a tool that helps turn a "wall of information" into something a person can actually process.

Our goal was simple: don't just give users less information—help them understand the information better.

What it does

Unfog transforms overwhelming information into focused understanding through four core stages: Focus → Understand → Visualize → Act.

🔎 Focus

  • Bionic reading
  • Adjustable font size and spacing
  • Reading ruler
  • Sentence and paragraph focus
  • Distraction-free reading
  • Reading progress

🧠 Understand

AI analyzes complex content and provides:

  • Simple explanations
  • Key ideas
  • Important facts
  • Difficult terms and definitions
  • Concise summaries

🗺️ Visualize

Unfog converts concepts and their relationships into an interactive concept map, allowing users to see how ideas connect instead of processing everything as a block of text.

⚡ Act

Unfog extracts:

  • Tasks
  • Deadlines
  • Requirements
  • Important dates
  • Decisions
  • Questions

🔍 Why Am I Stuck?

Users can highlight a difficult sentence and ask Unfog why it may be hard to process. It identifies factors such as complex vocabulary, long sentence structure, or high conceptual density, then provides a clearer version.

🎯 Quick Mode

For users who need the essentials immediately:

3 Key Points → 2 Actions → 1 Important Detail

Unfog is designed as an accessibility aid, not a diagnostic or medical tool.

How we built it

We built Unfog as a modern web application with a React-based frontend and a server-side AI layer.

Technology

  • React + TypeScript — application architecture
  • Tailwind CSS — responsive interface and styling
  • Lucide — consistent iconography
  • Framer Motion — subtle interactions and transitions
  • React Flow — interactive concept visualization
  • Gemini API — AI-powered understanding and extraction
  • Web Speech API — browser-based text-to-speech
  • LocalStorage — preferences, history, and action states

We deliberately kept deterministic functionality on the client side. Features such as bionic reading, typography controls, reading progress, and the reading ruler don't require AI.

Gemini is used where intelligence adds genuine value: understanding, simplification, difficulty analysis, concept extraction, and action extraction.

We also created a Demo Mode with local fallback data, allowing the core experience to remain demonstrable even if an AI service is unavailable.

Challenges we ran into

One of our biggest challenges was making sure Unfog wasn't simply another AI summarizer with a nice interface.

We had to think carefully about how information should be transformed, not just how it should be summarized.

Another challenge was reliability. AI-generated responses aren't always predictable, so we designed structured outputs, validation, error handling, and fallback experiences rather than allowing malformed responses to break the application.

We also had to balance accessibility with visual design. Adding more controls can actually make an interface more overwhelming, so we focused on progressive disclosure and keeping the core experience simple.

Finally, we had limited development time, which forced us to prioritize features that created the biggest difference for users instead of trying to build everything at once.

Accomplishments that we're proud of

We're especially proud that Unfog goes beyond simply shortening text.

We created a complete workflow:

Focus → Understand → Visualize → Act

A user can start with a dense paragraph and progressively transform it into:

Readable text → Simple explanation → Visual concept map → Actionable tasks

We're also proud of Why Am I Stuck?, which shifts the experience from simply telling users what a piece of text means to helping them understand why it may feel difficult to process.

Another accomplishment is our Demo Intelligence fallback, which makes the application resilient during demonstrations instead of relying completely on a live AI connection.

Most importantly, we built the project around a real principle:

Accessibility shouldn't mean removing complexity from the world. It should mean making complexity easier to navigate.

What we learned

We learned that building an AI product isn't just about connecting an API to a frontend.

The hardest part is deciding where AI should and shouldn't be used.

We learned that deterministic functionality is often better handled locally, while AI should be reserved for tasks involving interpretation and language.

We also learned that accessibility is fundamentally a UX challenge. More features don't automatically create a better accessible experience—sometimes the best improvement is simply presenting the right information at the right time.

Finally, we learned that a strong product needs a strong story. Focus → Understand → Visualize → Act gave us a simple way to communicate a technically complex system in a way anyone can understand.

What's next for Unfog

Unfog is currently a web-based experience, but we see it becoming an adaptive reading layer across the internet.

🚀 Next steps

  • Chrome/Edge browser extension
  • One-click transformation of webpages
  • PDF and document support
  • Personalized reading preferences
  • More advanced concept mapping
  • Multilingual support
  • Improved voice interaction
  • Offline accessibility features
  • Integration with educational platforms
  • Personalized learning workflows

Our long-term vision is for Unfog to become a universal information accessibility layer—something that can sit between people and the overwhelming amount of information they encounter every day.

From information overload to focused understanding.

That's Unfog.

Built With

  • a11y
  • accessibility
  • bionic-reading
  • data-visualization
  • edtech
  • framer-motion
  • gemini-api
  • generative-ai
  • google-ai
  • javascript
  • json-schema
  • llm
  • lucide-react
  • mind-mapping
  • next.js
  • node.js
  • opendyslexic
  • productivity
  • react
  • react-flow
  • social-good
  • tailwind-css
  • typescript
  • web-speech-api
Share this project:

Updates

Submission history