Liner
A canvas-based workspace for music
Ownership
Solo Designer & Developer
Team
Solo / small team
Key Result
3+ Custom tldraw Shapes
Overview
Liner is a spatial workspace for arranging songs, notes, and album structures on an infinite canvas.
The Challenge
Playlists and folders are useful for storage, but they are poor tools for sequencing and comparing songs in a broader structure. The goal was to make music organization more visual and direct.
Approach
1. Spatial Over Sequential
tldraw provides the canvas model. I added custom shapes for songs, album frames, and notes so tracks can be arranged and grouped visually.
2. Audio as First-Class Object
Audio files are treated as interactive objects with waveform extraction, queue support, and keyboard playback controls.
3. Local-First, Cloud-Synced
Convex handles sync and persistence, Clerk handles auth, and the client state model is built to keep the canvas usable even when connectivity is unreliable.
Outcome
A working canvas tool for sequencing, note-taking, and audio playback in one interface.
3+
Custom tldraw Shapes
Local-first
Architecture
Convex
Real-time Sync
Learnings
- →tldraw is flexible, but custom shapes require careful work around rendering and state.
- →Audio playback introduces edge cases that affect the whole editing model.
- →Users often want to organize music spatially once the interface makes it possible.
Get In Touch
If you want to talk about similar work, email me.
Contact is the simplest place to start.
Next project
Whakapapa