Enhancement: Implement Focus Mode Interactive Demo on GitHub Pages

[hddevteam]

🎯 Issue Description

Enhance the GitHub Pages demonstration to include an interactive Focus Mode demo that showcases one of CueMode's key features - the intelligent text highlighting system with auto-scroll demonstration.

📋 Requirements

Core Focus Mode Effects

• Central Focus Area: Create a clear focus reading area at 40%-60% of screen height
• Gradient Blur Effect: Apply progressive blur to text outside the focus area to improve reading concentration
• Visual Focus Indicator: Add a subtle border indicator to highlight the current focus zone
• Semi-transparent Background: Enhance focus area with a subtle background highlight
• Dynamic Scroll Tracking: Focus area should follow scroll position dynamically
• Auto-scroll Demo: Continuous upward scrolling to showcase focus mode in action

Technical Implementation Details

1. Focus Area Positioning

• Position focus zone at 40%-60% of viewport height (similar to extension implementation)
• Maintain responsive design across different screen sizes
• Center the focus area both horizontally and vertically

2. Blur Effect Implementation

• Use CSS filter: blur() for text outside focus area
• Implement 3-line buffer zone with gradient blur intensity
• Buffer zone blur range: 30%-100% of maximum blur strength
• Maximum blur strength: configurable (default: 1.5px)

3. Visual Indicators

• Fixed position focus indicator with subtle border
• Semi-transparent background overlay for focus area
• Smooth CSS transitions (0.3s ease) for all focus effects
• Responsive border styling that adapts to theme

4. Auto-scroll Demo

• Continuous upward scrolling at optimal reading speed
• Automatic direction change when reaching top/bottom
• Smooth scrolling animation
• Focus area effect updates in real-time during scroll

📱 Responsive Considerations

• Ensure focus mode works seamlessly on mobile devices
• Adapt focus area size for smaller screens
• Maintain accessibility standards (WCAG AA compliance)
• Test across different browsers and devices

🔧 Implementation Location

• Add focus mode demo section after the hero section
• Integrate with existing page structure and styling
• Ensure compatibility with current CSS and JavaScript

📊 Success Criteria

• Focus area correctly positioned at 40%-60% of viewport height
• Gradient blur effect applied to text outside focus zone
• Visual focus indicator displays properly
• Semi-transparent background highlight visible
• Auto-scroll demonstration runs smoothly
• Focus area effect updates in real-time during scroll
• Responsive design maintains quality on all devices
• Smooth animations and transitions
• Cross-browser compatibility
• Accessibility compliance maintained

🎯 Expected Impact

This enhancement will:

• Provide visitors with a realistic preview of Focus Mode functionality
• Demonstrate the professional quality of CueMode's intelligent highlighting
• Show how Focus Mode improves reading concentration during presentations
• Increase user engagement through interactive demonstration
• Serve as a compelling showcase for the extension's advanced features

💡 Simple User Interaction

• Demo starts automatically when section comes into view
• Users can manually scroll to test focus effects
• Hover over demo area to pause auto-scroll (optional)
• Click anywhere in demo area to toggle focus mode on/off

📝 Additional Notes

This streamlined demo should accurately represent the Focus Mode functionality as implemented in the VS Code extension, providing a clean and focused demonstration without complex controls. The auto-scroll feature will continuously showcase the dynamic focus area adjustment, giving users a clear understanding of how the feature works in practice.

The implementation should follow the same architectural patterns established in the extension's webview implementation, ensuring consistency and authenticity in the demonstration.