Liner
A spatial canvas for organizing music
Ownership
Solo Designer & Developer
Team
Solo / small team
Key Result
3+ Custom tldraw Shapes
Overview
Liner is Figma for musicians. An infinite spatial canvas where you drag songs, build albums, and capture ideas visually. Built on tldraw with custom shapes for audio, real-time cloud sync via Convex, and a local-first architecture.
The Challenge
Musicians organize music in playlists — linear, one-dimensional lists. But album sequencing is spatial: you're thinking about flow, energy, transitions, thematic arcs. Spreadsheets and playlists can't capture that. The challenge: make music organization feel like arranging photos on a table, not filing documents in a cabinet.
Approach
1. Spatial Over Sequential
tldraw provides an infinite canvas with pan, zoom, and selection. I built custom shapes for songs (with waveform visualization), album frames, and sticky notes. Drag a song onto a frame and it belongs to that album. The spatial metaphor makes relationships between songs visible — proximity implies connection, distance implies contrast.
2. Audio as First-Class Object
Songs aren't just cards with metadata. Drop an audio file and Liner extracts the waveform, creates a playable shape, and adds it to the queue. Keyboard controls (space, arrows) for playback. The canvas becomes a playable instrument, not just an organizational tool.
3. Local-First, Cloud-Synced
Convex handles real-time sync and persistence. Clerk for authentication. But the architecture is local-first — your canvas works offline and syncs when connected. Zustand manages client-side state. The data model is yours, not locked into a service.
Outcome
A working spatial canvas that musicians can use to sequence albums, organize ideas, and play audio — all in one interface. The spatial metaphor makes album sequencing feel intuitive in a way playlists never could.
3+
Custom tldraw Shapes
Local-first
Architecture
Convex
Real-time Sync
Learnings
- →tldraw is an incredible foundation but custom shapes require deep understanding of the rendering pipeline. Worth it for the UX payoff.
- →Audio playback in a canvas context creates interesting UX challenges — what happens when you delete a playing song? When you undo? These edge cases define the experience.
- →Musicians think spatially about music more than they realize. The 'aha moment' is when someone drags two songs next to each other and immediately sees the album taking shape.
Need This Type Of Outcome?
I run focused design engineering sprints for product teams.
If your team needs clearer UX, faster implementation, and measurable performance improvements, I can help.
Next project
Whakapapa