Arclight is a small neon rhythm game you can play right in the browser. No app store. No install. Open a tab, pick a level, and hit the arcs as they close in on the center.
Play it here: Arclight
What you do
Four lanes. Four directions. Neon arcs fly in from the edges toward a glowing ring. When an arc touches the ring, press the matching key (or the on-screen pads on a phone).
Timing decides the score:
- Perfect if you nail it
- Good if you are close
- Miss if you are late, early, or hit the wrong lane
Combos add bonus points. A miss resets the combo. Grades go from F up to SS (all Perfects). A clean run caps at 1,000,000 points.
Why a browser game?
I wanted something people could try in under ten seconds. Link, click, play.
That meant:
- No downloads. The game is a static site.
- Keyboard and touch. Desktop uses arrow keys (or remapped bindings). Phones and tablets get an on-screen pad.
- Local-only progress. Settings and personal records live in IndexedDB on your device. Nothing is uploaded.
- Original music. Built-in tracks are synthesized in the browser, so there is no third-party audio to license or host as big files.
The stack
| Piece | Role |
|---|---|
| React 19 + TypeScript | UI, routing, settings |
| Vite | Build and code splitting |
| PixiJS v8 | Canvas rendering for arcs, target, backdrop |
| Web Audio API | Synth for built-in songs + playback clock |
| IndexedDB | Settings and high scores |
| Vitest | Unit tests for scoring, judgment, beatmaps |
| Netlify | Hosting, HTTPS, headers, SPA routes |
The UI loads first. The heavier game chunks (PixiJS, audio, engine) load only when you start a level. That keeps the home screen light for first visits and for search crawlers.
How a note becomes a hit
Under the hood the loop is small:
- A beatmap lists notes: direction + time in the song.
- The song clock tracks music time in milliseconds.
- The judgment engine matches a press to the earliest open note in that lane.
- Timing windows turn the error into Perfect, Good, or Miss.
- The score tracker updates combo, accuracy, and grade.
Judgment does not depend on frame rate. It only cares about song time. If the screen stutters a bit, timing still stays fair.
If hits feel early or late on your machine (common with Bluetooth headphones), there is a latency calibration screen in Settings. One offset, applied once to the chart.
Music without audio files
Built-in levels are not MP3 packs. Each song is a small composition spec: BPM, scale, chord progression, drum patterns, lead lines. At runtime (or build time) the Web Audio synth turns that into sound.
Tracks include names like First Light, Neon Drive, Glass Horizon, Pulse Circuit, Midnight Arcade, and Afterglow, each with Easy / Normal (and harder charts where it fits).
That approach kept the project free of sample packs and made charts easy to regenerate when the rules changed.
Things I cared about while shipping
Feel first. A rhythm game lives or dies on timing. Countdown, pre-roll for charts that start hot, and calibration all exist so the first arc does not feel unfair.
Mobile is not an afterthought. Fullscreen helpers, touch pads, and layouts that work on a phone matter as much as desktop keyboard play.
Honest scope. Local music import exists in the codebase but is turned off in the public build for now. The site copy only talks about what players can actually use.
Boring-good production details. Prerendered home HTML for SEO, Open Graph tags, a sitemap, CSP headers, and hashed assets with long cache. Not glamorous. Helps the game show up correctly when someone shares the link.
Try it
- Play Arclight
- Watch the Arclight Demo
If you try a run, I would love to hear which track clicked for you, and whether hits felt tight on your setup. Feedback on timing and mobile controls helps the most.
Thanks for reading. Go chase that SS.
Top comments (0)