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.
Constraints
- •Audio playback had to stay responsive while the canvas handled selection, pan, zoom, and editing state.
- •The same product model needed to support web and iOS work without splitting the concept into two unrelated apps.
- •The interface had to remain useful before every possible cloud-sync and collaboration feature existed.
Decision Log
Problem
A standard list UI made music sequencing feel like storage rather than arrangement.
Decision
Built the core workflow around an infinite canvas with custom music objects.
Tradeoff
More interaction edge cases than a conventional playlist builder.
Impact
Tracks, notes, and album structures can be compared spatially instead of only sequentially.
Problem
Audio state can easily fight canvas editing state.
Decision
Treated playback as part of the object model instead of a detached global player.
Tradeoff
More coordination between keyboard shortcuts, selected shapes, and playback controls.
Impact
Music objects behave like working material rather than static attachments.
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.
Anti-Patterns Avoided
- ×Treating tracks as files in a folder rather than objects in a composition workspace.
- ×Global playback controls detached from the selected canvas material.
- ×Cloud-first assumptions that make the product feel broken offline or during rough sync states.
Next Iterations
- →Deeper arrangement tools for comparing alternate sequences and album structures.
- →More explicit collaboration states for shared music workspaces.
Get In Touch
If you want to talk about similar work, email me.
Contact is the simplest place to start.
Next project
Whakapapa