WordHunt - Transform Focus into Fun

Turn procrastination into productivity with an intelligent word-hunting game that makes learning fun!

Comment

WordHunt - Transform Focus into Fun

1. Inspiration

In today's hyper-connected digital world, maintaining focus has become one of the biggest challenges for students and professionals alike. We've all been there - opening a webpage to learn something new, only to find ourselves mindlessly scrolling hours later, our time lost to digital distractions.

Current solutions either block websites entirely (creating frustration) or ignore the problem (allowing endless procrastination). We asked ourselves: "What if we could transform procrastination into productivity through gamification?"

Enter WordHunt - a Chrome extension that doesn't just block distracting websites, but instead encourages users to engage meaningfully with the content they're viewing. By extracting words from the current webpage and turning them into an interactive word-hunt challenge, we help users take productive micro-breaks that reinforce learning rather than mindless scrolling.

Just as the Pomodoro technique transforms work into manageable chunks, WordHunt transforms reading breaks into engaging learning experiences.

2. What It Does

WordHunt is an intelligent Chrome extension that transforms any webpage into an engaging word-hunting game, creating productive micro-breaks that enhance focus and retention.

2.1 Core Features

2.1.1 Intelligent Word Extraction

  1. Analyzes current webpage content using advanced DOM traversal
  2. Filters out common stop words ("the", "and", "with", etc.)
  3. Extracts top 80 meaningful words based on frequency analysis
  4. Preserves page-relevant vocabulary for contextual learning

2.1.2 Immersive Game Overlay

When triggered (manually or via auto-timer), a stunning full-screen overlay appears featuring:

  1. 20 floating word bubbles dynamically spawned without collision
  2. Target word display with animated glowing underline
  3. Real-time timer (60 seconds default) with urgency states
  4. Live score tracking (+1 correct, -1 wrong)
  5. Smooth animations at 60fps using requestAnimationFrame

2.1.3 Five Beautiful Themes

Switch between professionally designed color schemes:

  1. Ocean - Dark blue with cyan accents (default)
  2. Sunset - Warm oranges and golden hues
  3. Forest - Natural greens with teal highlights
  4. Galaxy - Deep purples with neon accents
  5. Cyber - Dark tech with electric cyan/green

2.1.4 Engaging Visual Effects

  1. Glowing trails that expand from clicked words
  2. Confetti bursts celebrating correct answers
  3. Spotlight effects highlighting target words
  4. Timer urgency - Yellow warning at 30s, red danger at 10s
  5. Smooth floating animations with subtle vibrations

2.1.5 Smart Scoring System

  1. +1 point for each correct word found
  2. -1 point for incorrect clicks
  3. Auto-regeneration when fewer than 5 words remain
  4. Score persistence across sessions

2.1.6 AI-Powered Summary (Ready for Chrome Built-in AI)

At game end, receive encouraging messages highlighting:

  1. Total words mastered
  2. Key concepts discovered from the page
  3. Motivational feedback for focus improvement

3. How We Built It

3.1 Architecture Overview

WordHunt is built as a Chrome Extension (Manifest V3) with a modular architecture:

WordHunt/
├── manifest.json          # Extension configuration
├── background.js          # Service worker for alarms & storage
├── content_script.js      # Game logic & overlay injection
├── popup.html/js          # User control interface
└── icons/                 # Extension icons

3.2 Technology Stack

  1. Manifest V3 - Modern Chrome extension architecture
  2. Vanilla JavaScript - Lightweight and performant
  3. CSS3 - Advanced animations and theming
  4. Chrome APIs - Storage, Alarms, and Messaging
  5. DOM TreeWalker - Efficient text extraction

4. Challenges We Ran Into

4.1 Word Collision Prevention

Problem: Words overlapping made them unreadable and game unplayable.

Solution: Implemented spatial hashing collision detection:

  1. Pre-calculate word dimensions before placement
  2. Check 30px minimum spacing on all sides
  3. Retry placement up to 100 times per word
  4. Fallback to safe positions if collision persists

4.2 Performance Optimization

Problem: Large webpages (news articles, documentation) caused lag and freezing.

Solution: Multi-pronged optimization approach:

  1. Limited text traversal to 20,000 characters
  2. Used Set for O(1) stop word lookup instead of array
  3. Implemented requestAnimationFrame for smooth 60fps
  4. Added GPU acceleration hints with will-change CSS

Performance Metrics:

  • Before: ~500ms extraction, 30fps animations
  • After: ~50ms extraction, 60fps animations

4.3 Animation Smoothness

Problem: Early versions had janky, stuttering animations.

Solution:

  1. Migrated from setInterval to requestAnimationFrame
  2. Proper cleanup with cancelAnimationFrame on element removal
  3. Used CSS transforms instead of position changes
  4. Added isConnected checks to prevent animating removed elements

4.4 Theme Persistence

Problem: Switching themes caused visual glitches and color flashing.

Solution:

  1. CSS custom properties for instant theme switching
  2. Proper class clearing before reapplication
  3. Theme state storage in chrome.storage.local
  4. Smooth transition animations

4.5 Timer Accuracy

Problem: Game timer would drift and lose sync.

Solution:

  1. Separate interval for UI updates versus game logic
  2. Progressive urgency states (normal → warning → danger)
  3. Clear interval cleanup on game end
  4. Added visual feedback for time pressure

4.6 Z-index Management

Problem: Confetti and trail effects rendering behind word bubbles.

Solution:

  1. Used position: fixed for all effects
  2. Established z-index hierarchy (9999998-9999999)
  3. Appended effects to document.body instead of overlay
  4. Ensured proper stacking context

5. Accomplishments That We're Proud Of

5.1 Beautiful Visual Design

  1. Five professionally designed themes with cohesive color palettes
  2. Smooth 60fps animations across all interactions
  3. Satisfying visual feedback (trails, confetti, glows)

5.2 Engaging Gameplay

  1. Successfully gamified learning without feeling educational
  2. Balanced difficulty that adapts to remaining words
  3. Addictive feedback loop that encourages replay

5.3 Technical Excellence

  1. Optimized performance for large webpages
  2. Clean, modular code architecture
  3. Robust collision detection system

6. What We Learned

6.1 Chrome Extension Development

  1. Deep understanding of Manifest V3 architecture
  2. Content script injection and isolation
  3. Background service worker lifecycle
  4. Message passing between components
  5. Chrome Storage API for persistence
  6. Alarms API for scheduling

6.2 DOM Manipulation & Performance

  1. Efficient TreeWalker API for text extraction
  2. Collision detection spatial algorithms
  3. RequestAnimationFrame for smooth animations
  4. GPU acceleration with CSS transforms
  5. Memory management and cleanup

6.3 CSS Architecture

  1. CSS custom properties for theming
  2. Animation performance optimization
  3. Z-index stacking contexts
  4. Flexbox for responsive layouts
  5. Keyframe animations

6.4 Game Design Psychology

  1. Reward feedback loops
  2. Progressive difficulty curves
  3. Visual feedback importance
  4. Balancing challenge and fun
  5. Creating addictive mechanics

6.5 Accessibility Considerations

  1. Color contrast ratios
  2. Keyboard navigation
  3. Screen reader compatibility (future implementation)
  4. Cognitive load management

7. What's Next for WordHunt

7.1 Phase 1: Enhanced Gameplay

7.1.1 Combo/Streak System

Track consecutive correct answers:

  1. 3+ streak: 2x points
  2. 5+ streak: 3x points with visual effects
  3. Streak counter with fire animation

7.1.2 Power-ups

  1. Freeze Time - Pause timer for 5 seconds
  2. Highlight Target - Make target word glow
  3. Double Points - 2x score for 10 seconds
  4. Slow Motion - Reduce word movement speed

7.1.3 Difficulty Levels

  1. Easy - 15 words, 90 seconds
  2. Medium - 20 words, 60 seconds
  3. Hard - 25 words, 45 seconds, faster movement

7.2 Phase 2: Gamification & Progress

7.2.1 Achievement Badges

  1. Speed Demon - 10 words in 30 seconds
  2. Perfect Game - No wrong answers
  3. Marathon - 50+ correct in one game
  4. Streak Master - 10 consecutive correct answers

7.2.2 Advanced Statistics Dashboard

  1. Words per minute (WPM) tracking
  2. Accuracy percentage graphs
  3. Personal best records
  4. Progress over time visualization
  5. Circular timer progress indicator

7.2.3 Level System

  1. XP bar that fills with each correct answer
  2. Level-up animations and rewards
  3. Unlockable themes and power-ups

7.3 Phase 3: AI Integration

7.3.1 Chrome Built-in AI (Gemini Nano)

  1. Personalized difficulty adjustment based on performance
  2. Intelligent word selection matching user interests
  3. Context-aware hints and tips
  4. Natural language feedback and encouragement
  5. Learning pattern analysis

7.3.2 Smart Features

  1. AI-generated word categories (Tech, Science, Business)
  2. Adaptive timer based on user speed
  3. Predictive difficulty scaling
  4. Personalized challenge recommendations

7.4 Phase 4: Social & Multiplayer

7.4.1 Multiplayer Mode

  1. Real-time competitive mode with friends
  2. Shared game sessions with live leaderboards
  3. Challenge friends to beat your score

7.4.2 Social Features

  1. Share achievements on social media
  2. Global leaderboard rankings
  3. Daily and weekly challenges
  4. Friend system and competitions

7.5 Phase 5: Polish & Expansion

7.5.1 Audio Experience

  1. Success chime on correct clicks
  2. Error buzz on wrong answers
  3. Ticking clock when fewer than 10 seconds remain
  4. Victory fanfare on game end
  5. Mute toggle for quiet environments

7.5.2 Visual Enhancements

  1. Particle effects on correct answers
  2. Screen shake feedback
  3. Lightning bolt connecting words
  4. Ripple wave effects
  5. Aurora borealis background animation

7.5.3 Cross-Platform Support

  1. Firefox extension port
  2. Microsoft Edge browser support
  3. Safari extension (future)
  4. Progressive Web App version

7.5.4 Internationalization

  1. Multi-language support (Spanish, French, German, Japanese)
  2. i18n framework integration
  3. Localized word extraction

7.5.5 Cloud Features

  1. Cross-device score synchronization
  2. Cloud backup of preferences
  3. Achievement synchronization across devices

Version: 1.0
Last Updated: 2024
Status: Active Development

Built With

Share this project:

Updates