FoveaFlow

FoveaFlow is a free online eye training app for visual tracking, focus, reaction speed, and peripheral awareness. It includes Smooth Pursuit paths, Reaction Jumps, Lilac Chaser peripheral focus practice, random motion, and distractor tracking.

It runs without an account or install. The app keeps the canvas full screen, gives direct control over target motion, and stores settings locally in your browser.

What it does

• Runs four drills: Smooth Pursuit, Reaction Jumps, Multiple Distractions, and Lilac Chaser.
• Includes motion paths such as random, figure eight, bounce, sweeps, lissajous, shifting orbit, and corner tour.
• Supports speed controls in deg/s, cm/s, and screen/s.
• Lets you tune target size, shape, color, opacity, trail behavior, distractor count, distractor brightness, and Lilac Chaser scale.
• Includes calibration settings for viewing distance and CSS pixels per centimeter.
• Stores settings locally in your browser.
• Uses a canvas renderer with light and dark themes.
• Keeps safety checks close to the engine, including saturated-red replacement and flash-frequency helpers.

Background reading

• Visual guidance of smooth pursuit eye movements
• Visual learning in multiple-object tracking
• Lilac chaser illusion
• FPS Eye Training Warmup (HIGH FPS)

Tech stack

• Astro for the app shell.
• Svelte 5 for the trainer UI.
• TypeScript for application and engine code.
• Tailwind CSS 4 for styling.
• shadcn-svelte and bits-ui for UI primitives.
• Bun for dependency management and scripts.

Quick start

Requirements:

• Bun
• Node.js >=22.12.0

Install dependencies:

bun install

Start the local dev server:

bun run dev

Astro serves the app at:

http://127.0.0.1:4321

Scripts

Command	What it does
bun run dev	Starts the Astro dev server on 127.0.0.1.
bun run build	Builds the production app.
bun run preview	Serves the built app locally.
bun run lint	Runs astro check.
bun run check	Runs astro check.
bun run format	Formats the whole project with Prettier.
bun run format:svelte	Formats Svelte, Astro, TypeScript, and CSS src files.

Project structure

src/pages/                 Astro routes
src/lib/components/        Svelte app and UI components
src/lib/engine/            Training patterns, profiles, metrics, safety, storage
src/styles/                Global styles and Tailwind setup
public/metadata/           Generated icons and social images

Quality checks

Run the same checks before shipping changes:

bun run lint
bun run format
bun run check

Use bun run format:svelte when you only need to format source files after Svelte, Astro, TypeScript, or CSS edits.

Safety note

FoveaFlow is practice software, not medical care. Stop if you feel eye strain, dizziness, headache, nausea, or any other discomfort. If you have an eye condition, light sensitivity, seizures, or recent eye surgery, ask a qualified clinician before using visual training tools.

Roadmap

• Session history with basic progress stats.
• Guided routines for warmups, tracking, reaction drills, and cooldowns.
• Keyboard controls for common actions.
• Better calibration flow for screen size and viewing distance.
• Exportable presets.
• Demo GIF and short usage clips.

License

MIT. See LICENSE.