Flutter · WebAssembly · live

Signal Lab

A spectrum analyzer running in your browser. Three tones, a sweep and a noise floor go through a windowed FFT every frame, with peak markers, a pass/fail limit line and a scrolling waterfall. Underneath this is Flutter, compiled to WebAssembly and mounted inside this page. This is similar to work I did as Astronics Test Systems, but further built out and using newer technologies (WebAssembly was just releasing at the height of my Flutter work).

Loading WebAssembly

Hover the spectrum for a readout. Drag the limit line, or use its slider, to set the pass/fail level.Open standalone

How it's built

Compute: A phase-continuous 48 kHz signal generator, radix-2 FFT, four window functions and peak detection, written in Dart over typed arrays and compiled by dart2wasm to WasmGC. The readout shows the per-frame FFT cost as measured in the browser.
Rendering: Three CustomPainters behind RepaintBoundaries, repainted directly from a Ticker-driven ValueNotifier so nothing in the widget tree rebuilds at 60 Hz. The waterfall is a raw RGBA ring buffer decoded to a GPU image each frame, drawn by the Skwasm renderer.
Embedding: No iframe! A custom bootstrap mounts the build into a host element on this React page and Dart reports its layout height back through js_interop to support smaller viewports (aka mobile devices).
Deploy: Unfortunately (and understandably), Vercel's build image has no Flutter SDK, so a pinned release is cloned into the build cache on first deploy and the app is compiled to WebAssembly ahead of next build on every push after that.