Staccade

A meditation tool using the Troxler effect and optical illusions for visual anchoring

✨ What is Staccade?

Staccade leverages the Troxler effect - a perceptual phenomenon where unchanging stimuli in peripheral vision naturally fade from consciousness. This creates a visual meditation anchor similar to how traditional meditation uses breath awareness.

When you fixate on the central point, surrounding patterns gradually disappear, naturally narrowing attention and inducing meditative states. The tool includes 20 sophisticated optical illusions organized by meditation purpose.

🧘 Quick Start

1. Visit the live demo: https://1ps0.github.io/staccade/
2. Choose a preset: 🎯 Sharp Focus, 🌊 Flow State, 🧘 Deep Release, or 🔮 Mind Bend
3. Press "🧘 Begin Practice" or hit Spacebar
4. Focus on the central white dot - let peripheral patterns fade naturally
5. Press Escape for distraction-free minimal mode

Key Controls

• Spacebar: Start/stop session
• Escape: Toggle minimal mode (during session) or menu (when idle)
• Right Arrow: Next pattern in category (during session)
• Scroll wheel on intensity control: Adjust effect strength

🎯 Meditation Categories

🎯 FOCUS - Sharp Attention

Build concentration with high-contrast patterns that demand steady gaze:

• Sharp Focus Grid: Scintillating intersections create attention anchors
• Soft Focus Rings: Gradient circles for gentle concentration building
• Color Flash Focus: Afterimage training for visual stability

🌊 FLOW - Movement & Rhythm

Dynamic patterns that synchronize with natural attention rhythms:

• Motion Flow: Peripheral drift illusions simulate gentle movement
• Wave Patterns: Moiré interference creates flowing visual rhythms
• Depth Flow: Optic flow patterns simulate forward motion through space

🧘 DEEP - Dissolution States

Patterns designed for ego dissolution and deep meditative states:

• Breath Sync: Expanding/contracting dots match breathing rhythm
• Vanishing Points: Lilac chaser creates green afterimage and disappearing dots
• Fading Dots: Classic Troxler effect with systematic peripheral fading

🔮 EXPLORE - Reality Bending

Advanced practitioners: reality-questioning illusions for insight work:

• Edge Play: Kanizsa triangles create illusory contours
• Size Shift: Ebbinghaus circles distort size perception
• Reality Flip: Necker cubes demonstrate perceptual instability
• ...and 10 more sophisticated optical illusions

🔧 Features

• 20 Meditation Patterns: From basic Troxler effects to complex optical illusions
• Session-Aware Interface: UI adapts from setup → active → minimal modes
• Audio Integration: Brown/pink/white noise + binaural beats
• Browser Extension API: Full programmatic control via window.Staccade
• Floating Controls: Minimal interface during active sessions
• No Dependencies: Pure HTML/CSS/JavaScript - works offline
• Mobile Friendly: Responsive design for phones and tablets

🔌 Browser Extension API

Staccade exposes a complete control interface for browser extensions and external tools:

// Session Control
Staccade.session.start()                 // Begin meditation
Staccade.session.stop()                  // End session
Staccade.session.setIntensity(75)        // Adjust effect strength (0-150)
Staccade.session.setPattern('breathingdots') // Change pattern
Staccade.session.isRunning()             // Check if session active

// Pattern Management
Staccade.patterns.categories()           // ['focus', 'flow', 'deep', 'explore']
Staccade.patterns.setCategory('flow')    // Switch meditation type
Staccade.patterns.next()                 // Cycle to next in category
Staccade.patterns.current()              // Get current pattern name

// UI Control
Staccade.ui.enterMinimal()               // Full-screen minimal mode
Staccade.ui.exitMinimal()                // Exit minimal mode
Staccade.ui.isMinimal()                  // Check minimal state
Staccade.ui.getState()                   // 'idle' | 'active' | 'minimal'

// Settings & Events
Staccade.settings.export()               // Export configuration for backup
Staccade.settings.import(config)         // Import saved configuration
Staccade.on('session-started', callback) // Listen for events
Staccade.on('pattern-changed', callback) // Pattern change events

Perfect for:

• Meditation apps wanting to embed visual patterns
• Productivity tools for focus sessions
• Therapy applications using guided visual meditation
• Research tools studying attention and perception

🏗️ Architecture

Single-file application (staccade-v1.html) with:

• ~2000 lines of embedded HTML, CSS, and JavaScript
• Canvas-based rendering for smooth 60fps pattern animations
• Web Audio API for programmatic noise generation
• localStorage for user preferences
• No server dependencies - pure client-side application

🧪 The Science

Troxler Effect

When you fixate your gaze, peripheral vision naturally adapts and unchanging stimuli fade. This neurological phenomenon occurs because:

• Retinal neurons reduce response to constant stimuli
• Microsaccades (tiny eye movements) normally refresh vision
• Steady fixation minimizes these natural refreshes

Meditation Applications

• Attention Training: Natural concentration without force
• Ego Dissolution: Peripheral world literally disappears
• Present Moment: Requires continuous present-moment awareness
• Visual Dharana: Classical yogic concentration technique
• Insight Practice: Direct experience of perception's constructed nature

🚀 Getting Started (Development)

# Clone the repository
git clone https://github.com/1ps0/staccade.git
cd staccade

# Open directly in browser (no build step needed)
open staccade-v1.html

# Or serve locally
python3 -m http.server 8000
# Visit http://localhost:8000/staccade-v1.html

🤝 Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

Quick contribution areas:

• New optical illusion patterns
• Audio enhancements (nature sounds, etc.)
• Mobile experience improvements
• Accessibility features
• Documentation improvements

⚠️ Safety & Warnings

• Photosensitive Epilepsy: Contains flashing patterns - consult doctor if sensitive
• Not for driving: Never use while operating vehicles or machinery
• Take breaks: Recommended max 20-30 minute sessions
• Sit back: Maintain 50-70cm distance from screen for optimal effect

📖 Documentation

• API Documentation: Complete browser extension interface
• Pattern Guide: Details on all 20 meditation patterns
• Design Specification: Original design document
• CLAUDE.md: Developer guide for AI assistants

📜 License

MIT License - see LICENSE file for details.

🙏 Acknowledgments

• Visual Perception Research: Building on centuries of optical illusion study
• Meditation Traditions: Inspired by dharana and kasina practices
• Open Source Community: Made possible by web standards and collaborative development

---

Experience the disappearing world. Focus within.

Made with 🧘 for deeper states of consciousness