Fractr

Ultra-performant 3D fractal explorer powered by WebGPU. Fly through infinite mathematical structures with FPS-style controls.

Launch Fractr

Features

• 19 fractals — Mandelbulb, Mandelbox, Menger Sponge, Sierpinski, Quaternion Julia, Gyroid, and more
• 13 color modes — Glow, Distance Estimation, Chromatic, Temperature, Ambient Occlusion, Fresnel, and more
• Animated colors — toggle time-based color animations (cycling hues, moving bands, pulsing glow)
• 17 render modes — Ray Marching, Soft Shadows, Reflections, Whitted Ray Trace, Path Tracing, Volume Rendering, Cel Shading, and more
• Progressive accumulation — stochastic modes converge to noise-free images when stationary
• 6DOF camera — full six degrees of freedom with roll (Q/E), fly like a spaceship
• Radial menu — hold R/C/V to open a wheel for quickly picking any mode
• Saved locations — F5 to quick-save with thumbnail, browse/filter/load/export/import saves
• Distance-based camera speed — automatically slows near surfaces for precise deep-zoom exploration
• Dynamic iterations — detail level adapts based on proximity to fractal surface
• Adaptive quality — resolution scales with FPS for smooth performance on any GPU
• Shareable URLs — URL updates live with your camera position; press P to copy
• Mobile touch controls — dual-joystick (left = move, right = look), auto-detected on touch devices
• Gamepad support — standard 6DOF controls via sticks, triggers, and face buttons
• F1 controls overlay — in-game keybinding reference; shows touch controls on mobile
• Game-style UI — title screen, fractal selection, pause menu, settings, HUD

Gallery

Cosine Power-2	Menger Sponge

Quaternion Julia	Burning Ship 3D

Bristorbrot	Gyroid

Controls

Key	Action
W/A/S/D	Move
Q/E	Roll
Shift+Q/E	Up/Down
Mouse	Look
Left click	Move forward
Right click	Move backward
Shift	Sprint (2x speed)
Escape	Pause
Ctrl	Unlock cursor without pausing
C / Shift+C	Cycle color mode
R / Shift+R	Cycle render mode
V / Shift+V	Cycle fractal type
Hold C / R / V	Open radial menu for quick pick
I	Toggle dynamic iterations
. / ,	Increase/decrease max iterations
K / J	Increase/decrease bailout
G	Toggle animated colors
F5	Quick save location
F6	Screenshot to clipboard
B	Browse saved locations
Scroll wheel	Adjust max iterations
F3	Toggle HUD
H	Toggle crosshair
F1	Controls overlay
P	Copy share URL

Mobile / Touch

Gesture	Action
Left half drag	Move (analog)
Right half drag	Look around
Pause button	Open pause menu
? button	Controls overlay

Requirements

• A browser with WebGPU support (Chrome 113+, Edge 113+)
• Tested on MacBook Pro M1, Nvidia RTX 4080 Super, and iPhone 15

Development

pnpm install
pnpm run dev

Generate preview screenshots

# All fractals (for selection screen thumbnails)
pnpm run generate-previews

# Specific fractals with custom color
pnpm run generate-previews mandelbulb menger --color chromatic

# Custom color and render mode
pnpm run generate-previews quatjulia --color chromatic --render reflection

# High-res screenshots (1920x1080, for README)
pnpm run generate-previews --highres --color glow --render softshadow

# Single fractal, high-res
pnpm run generate-previews mandelbulb --highres

Build

pnpm run build

Lint and format

pnpm run lint
pnpm run format

Tech Stack

• Vite + Vue 3 + TypeScript
• WebGPU + WGSL shaders
• Tailwind CSS 4
• Pinia for state management
• Playwright for automated screenshot generation

License

MIT