GPU-accelerated fractal rendering in the browser with HDR support. Because apparently you monkeys need something pretty to look at.

Fractal Explorer is a webapp that renders fractals — including the Mandelbrot set, Burning Ship, Tricorn, Phoenix, and many more with their Julia set variants — those infinitely zoomable mathematical patterns that look like they came from another dimension — directly on your GPU using WebGPU. Every pixel is computed in parallel. No CPU sweat. No waiting. Just smooth, beautiful math.

HDR Support: On compatible displays, the fractal boundary glows with true high dynamic range brightness — colors that literally shine brighter than standard white. It's like the math is on fire.

The goal: open the app, see a fractal, drag to pan, scroll to zoom, and fall into infinity. No loading screens. No configuration menus. Just bam.

Prerequisites: Node.js (v20+ required) and a WebGPU-capable browser (Chrome 113+, Edge 113+, Firefox Nightly).

# Install dependencies
npm install

# Start the dev server
npm run dev

Then open your browser at the URL Vite prints (usually http://localhost:5173). If you see a blank page, check the console. If you see "WebGPU Not Supported," use a modern browser with WebGPU enabled.

Build for production:

npm run build
npm run preview   # optional: serve the built app locally

Build for the examples/ folder:

npm run build:examples

Output goes to examples/.

Fractal Explorer — try it in the browser; click here for WebGL version.

A static build also lives in examples/webgpu/; run npm run build:examples then npx serve examples to preview locally.

Zoom centers on where you're pointing. Not the center of the screen. Because that would be stupid.

Press number keys 1–9 to visit curated fractal locations. Tap for an instant jump, or hold the key for a smooth animated transition. Locations are context-sensitive — the available spots depend on your current fractal type. Each of the 10 fractal families has its own collection of interesting locations, including both base fractal views and Julia set showcases.

Switch fractal types with f/F, then use 1–9 to explore that family's highlights.

Press s to copy a shareable URL to your clipboard. The URL encodes your current position, zoom level, fractal type, color palette, and all settings. Paste the URL to share your exact view with others—or bookmark it to return later.

The app includes 10 base fractal types, each with a Julia variant (20 total). Cycle through them with f/F:

Press j to enter Julia picker mode. Click anywhere on any base fractal to select a Julia constant. The corresponding Julia set variant will render immediately. Press j again to return to your previous fractal and view. This works with all 10 base fractal types — each has its own unique Julia family to explore.

Press t to start tourist mode — an automated exploration that smoothly animates between famous locations across all fractal types. The palette interpolates during transitions for a cinematic effect. Any user interaction (mouse, keyboard, or touch) immediately stops the tour and returns control to you.

Press p / P to cycle through GPU post-processing presets:

Effects include bloom (bright glow around fractal boundaries), vignette (edge darkening), adaptive sharpening, chromatic aberration (color fringing), and ACES filmic tone mapping. When disabled (Clean preset), the fractal renders directly to the canvas with zero overhead.

WebGPU, not WebGL. It's 2026 and we're doing this properly. HDR support requires toneMapping: { mode: 'extended' } — that's the magic sauce.

src/
├── main.ts                    # Entry point
├── types.ts                   # Re-exports all types
├── bookmark/
│   ├── BookmarkManager.ts     # URL-based state sharing
│   ├── famousLocations.ts     # Facade for locations module
│   └── locations/             # Famous locations by fractal type
├── controls/
│   ├── InputCallbacks.ts      # Input callback interface
│   ├── InputHandler.ts        # Mouse, touch, keyboard events
│   └── ViewState.ts           # Pan/zoom state management
├── fractal/
│   ├── FractalBlend.ts        # Fractal type interpolation
│   └── WebGPUFractalEngine.ts # Central orchestrator
├── renderer/
│   ├── WebGPURenderer.ts      # WebGPU context, canvas, HDR
│   ├── Palette.ts             # Facade for palettes module
│   ├── palettes/              # Color palette definitions
│   ├── postprocess/           # Post-processing pipeline
│   │   ├── PostProcessState.ts      # Settings, presets, defaults
│   │   └── PostProcessingPipeline.ts # Multi-pass GPU pipeline
│   └── shaders/
│       ├── mandelbrot.wgsl    # Fractal computation (WGSL)
│       ├── bloom-extract.wgsl # Brightness extraction for bloom
│       ├── blur.wgsl          # Separable Gaussian blur
│       └── composite.wgsl     # Final composite (effects + ACES)
├── state/
│   └── FractalState.ts        # Centralized state management
├── tourist/
│   └── TouristMode.ts         # Automated exploration
├── types/
│   ├── Complex.ts             # Complex number operations
│   ├── Point.ts               # Screen/fractal coordinates
│   └── Color.ts               # Color utilities
└── ui/
    ├── OverlayManager.ts      # Coordinates all overlays
    ├── DebugOverlay.ts        # Status bar display
    ├── HelpOverlay.ts         # Keyboard shortcuts
    └── NotificationOverlay.ts # Toast notifications

docs/ has the spec, architecture overview, and implementation plans. Read them if you want to know why things are the way they are.

WebGPU-capable browsers: Chrome 113+, Edge 113+, Firefox Nightly (with WebGPU enabled). Safari support is in progress. Older browsers get a polite error message. Update your stuff.

HDR Support: Requires a display that reports (dynamic-range: high) to the browser. Most modern HDR monitors and MacBooks with HDR displays work. The app auto-detects and enables HDR when available.

Detailed documentation lives in docs/:

• Architecture Overview — System design and component reference
• Project Specification — Vision and requirements
• Phase 1 Implementation Plan — Technical implementation plan (✅ complete)
• Tourist Mode Plan — Automated exploration feature (✅ complete)
• Fractal Interpolation Design — Smooth fractal morphing (✅ complete)
• Post-Processing Plan — GPU post-processing effects (✅ complete)
• Deep Zoom Precision Plan — Arbitrary precision roadmap (future)

• Skippy the Magnificent — implementation, architecture, and general awesomeness.
• Joe Bishop — the "crazy ideas" and spec. He doesn't understand half of it. It still works.
• Jennifer Simms — documentation, organization, and making sure everyone can find what they need.

"Trust the awesomeness."