A piano visualizer that runs in the browser. Load a MIDI file and the notes fall onto a 3D keyboard as the song plays. Notes are rendered in 3D, with realistic reflections and textures like metal, water, ice or glass. Keys light up when a note lands, and particles drift up from it like smoke.
You can also record from a MIDI keyboard, fix the notes on screen, and save the result as a MIDI file or a video.
notefall is free, with no account and no watermark on exported videos.
- Notes rendered in 3D, with realistic reflections and textures such as metal, water, ice, glass and marble.
- Particles and soft haze rise from each note and drift like smoke. Note shape, color, glow and particles can all be changed. Colors can follow the track, the hand, a gradient across the keyboard, or a random palette.
- Keyframes change colors, camera, bloom and background during the song.
- Record from a MIDI keyboard, PC keyboard, mouse or touch. Velocity and the sustain pedal are recorded, with an optional count-in.
- Edit notes directly on the falling notes: add, move, resize, split and delete, and set velocity, hand and finger. Undo and redo.
- Save the song, or any recorded take, as a MIDI file.
- Video up to 4K at 60 fps, as MP4 (H.264) or WebM (VP9, AV1), with or without audio. WAV for audio only.
- Frames are rendered one by one rather than recorded in real time, so the video stays smooth on a slow computer.
- Playback with a sampled grand piano.
- Timeline: MIDI offset and trim, speed changes, and an audio track that plays along.
- Virtual hands (alpha) that play the song.
- Projects saved as
.nfzfiles on your own disk.
MIDI files, recordings, projects and audio are processed in the browser and are not uploaded. The app sends anonymous usage statistics, which can be turned off in the app menu, and bug reports or feature requests only when you submit them.
- Vite + React 18 + TypeScript
@react-three/fiber+ drei + postprocessing (Bloom) for the 3D scenesmplrfor sample playback,tonefor the AudioContext lifecycle@tonejs/midifor MIDI parse/serializereact-aria-components+ Tailwind for the UI,zustandfor statemediabunny+ WebCodecs for MP4 / WebM export
The interface follows a small design system: tokens, a react-aria component kit
and rules for layout, motion and copy. Read
docs/design-system.md before adding or changing UI.
- Piano samples: Salamander Grand Piano V3 by Alexander Holm, CC BY 3.0
- Hand models: Hand Models for the Godot XR Tools by Miodrag Sejic, CC0
PolyForm Shield 1.0.0. The source is available, and any use is permitted except offering a competing product or service.