Fractaleyez

Fractaleyez is a new way to visualize your music. It stacks mathematical fractals, particle attractors, video and a logo on a single three.js canvas and drives them with your microphone in real time.

The visualizer runs without any music, but it gets much better when your microphone picks up background audio. Audio analysis happens live, so the visuals respond to the beat of whatever is playing around you.

Controls

• Arrow keys control your speed and rotation.
• Mouse steers your path of travel.
• V / F / O / L toggle the Video, Fractal, Orbit and Logo layers.
• S turns the Shockwave effect on and off.

Layers

What you see is a stack of up to 5 enabled layers, composited back to front. Each layer has an on/off switch (with a fade in and out), an opacity slider and a blend mode. The first-load default has Video, Fractal and Orbit on and Logo off.

Layer	Hotkey	What it is
Video	V	Looping video clips (galaxy, earth). Pick clips in the Video section. Clips crossfade as you change them.
Fractal	F	A Julia set rendered in a fragment shader, zooming endlessly toward its center. See The Fractal Layer.
Orbit	O	Layers of particles generated by Barry Martin's Hopalong attractor, with beat-reactive effects.
Logo	L	An image that sits on screen, spins on its vertical axis, pulses with the beat and can shake. Its thickness is faked with a stack of slices, and its sides pick up the image's edge colors.

Blend modes decide how a layer combines with what is behind it:

• mask: the layer's dark areas are transparent, so lower layers show through. This is how the fractal and video can reveal each other.
• screen: brightens by adding light on top, used by Orbit.
• over: normal alpha blending, used by Logo so it covers what is behind it.

The Fractal Layer

The Fractal layer shows a Julia set that you fall into forever. The shape of the set comes from a point c on the complex plane, and the tour moves c along a hand-built path through famous Julia sets (Airplane, Basilica, Rabbit, Dendrite, Siegel disk and more) so neighboring positions look related.

• Tour slider walks the path of shapes.
• Shape pad shows a map of the Mandelbrot set. Drag on it to pick any c yourself, and double-click to hand control back to the Tour slider. The Julia set for the point you pick is the one the main view shows.
• Scale zooms the whole view. Low values show the full set, higher values dive in.
• The zoom loops seamlessly, and the spin and zoom speed follow the music.

Menu Options

A sidebar menu is hidden by default. Hover the left side of the screen and click the "menu" tab to open it. It can also pop out into its own window, which gives you an expanded 8-column view for tweaking in real time without covering the visuals.

The menu has two sections: Configuration and Presets.

Configuration

Configuration is split into global sections that cut across layers and one section per layer. Most options change live. The exception is the Particle config (see below).

Each layer's header has its power button, opacity and a reset button. Double-click any slider to reset it, or use a section's reset button to restore the whole section to where it was when you loaded or last saved the preset. A Log Config button prints (and copies) your current settings in the slim preset format.

User

Adjust your travel and perspective: Speed, Rotation, Scale and Sway. The camera pad shows where your steering currently points.

Audio

Adjust how the visual detects beats from your microphone: Threshold and Ignore Time.

Effects

Preconfigured effects that change how the visuals respond to a beat. They can affect individual particles, layers of particles, or the whole scene.

Effect	Description
Cyclone	Splits particle layers into groups that rotate in alternating directions, creating a cyclone-like spin rather than uniform rotation.
Wob Wob	On each beat, pushes particles backward along the z-axis opposite to the direction of travel, producing a surging pulse toward and away from the camera.
Switcheroo	On each beat, regenerates the fractal orbit geometry for every other particle layer, causing sudden shape-shifts that alternate across layers.
Color Shift	On each beat, re-applies each layer's randomly assigned hue, flashing colors in sync with audio peaks. Colors are re-randomized whenever orbit parameters change.
Glow	Scales the bloom post-processing effect proportionally to audio peak energy, making the entire scene glow brighter on louder sounds. It also makes the Logo glow.
Shockwave	Triggers a radial shockwave post-processing effect from the center of the scene whenever the audio peak exceeds a high threshold.

Video

Choose which clips play and how they blend. Enabling, disabling or changing clips fades over the crossfade duration. The performance HUD (FPS, quality tier, video jumps per minute, smoothness and estimated audio-to-visual lag; click its title for the debugging rows) lives in this section.

Fractal

The Tour slider and the Shape pad, described above.

Orbit

Variables in the algorithm that generates each layer of particles. Adjust them live to create unique visual progressions.

The orbit is generated by Barry Martin's Hopalong algorithm, an iterative equation that produces fractal attractor patterns. Five parameters control the shape and character of the result:

Parameter	Name	Description
A	Radius	Controls the overall size and spread of the attractor. Higher values expand the fractal outward.
B	Spread	Scales the x-axis contribution inside the fold function, affecting how densely or loosely the pattern is distributed.
C	Sharpness	Offsets the fold's inflection point. Low values produce soft, gradual transitions between arms; high values produce sharper, more defined edges.
D	Shift	Raises the baseline of the fold function uniformly each iteration, pulling more particles toward the center at higher values.
E	Drift	Biases which branch of the fold gets applied each iteration. At 0 the orbit is most symmetric; higher values favor one branch, gradually shifting the overall shape and density of the pattern.

Particle

Sits inside the Orbit layer. Modify the particles and layers of particles: Size, Count, Layers, Levels, Saturation and the sprite each particle uses. You can upload your own sprite when signed in. Changing settings here forces a re-render of the whole particle system. WARNING: Increasing values too much in this category can seriously impact performance and overload your GPU, causing the application to crash.

The Count, Layers, Levels and Size sliders are painted green, yellow and red to show how heavy the combined load is (total particles, nudged up by size). Each slider's colors shift as the others change. Dragging past the red zone stops at its edge and asks you to confirm first. Thresholds live in src/config/particleLoad.config.ts.

Logo

Pick the logo image (or upload one), then set Spin Speed (0 is still), Beat Scale (how much it pulses on a beat) and Shake.

Presets

Presets are saved visual setups, so anyone can jump straight into something good. They are grouped into packs, and some packs are premium (they use a trial flow). Signed-in users can save their own presets and upload their own sprites, and each account has a settings page for the crossfade duration, frequency bands shown in the HUD and a personal logo.

Presets store bare values only, so older presets keep working as new options are added. Missing options fall back to the defaults, and out-of-range values are kept as saved rather than clamped. If the API is unreachable, the app falls back to the presets bundled with the client.

Development

pnpm dev            # client (:3000) and API (:8080) together
pnpm build          # production build to public/app.js
pnpm lint
pnpm typecheck
pnpm seed           # seed presets into MongoDB
pnpm seed-packs     # seed packs into MongoDB

You need MONGO_URI, CLERK_SECRET_KEY and CLERK_PUBLISHABLE_KEY in .env. See CLAUDE.md for the architecture and docs/ for design notes.

Credits and Resources

• The idea behind the fractal layer: the zoom into a Julia set, with a Mandelbrot inset to choose which Julia set you are looking at, comes from Mandelbrot Maps by jmaio. Fractaleyez does its own thing with it: an audio-reactive endless dive, a guided tour through famous shapes and layers composited with video, particles and a logo.
• r/fractals on Reddit, for the inspiration and endless supply of beautiful fractals.
• Audio Visualization Starter Pack by bcrespy: https://github.com/bcrespy/audio-visualization-starter
• Barry Martin's Hopalong Orbits Visualizer by Iacopo Sassarini: http://iacopoapps.appspot.com/hopalongwebgl/