/the garage — 01 / 09

Personal project

Lovetape

A small digital place for musical gifts: LOVETAPE turns a song and a personal message into a handmade 3D cassette, created for someone special.

LOVETAPE — cover

/overview

LOVETAPE turns a song into a gift you can actually hold: a hand-drawn 3D cassette, rendered live in the browser, decorated, written on, and shared like a real mixtape — no accounts, no ads.

/approach

01

Concept

Started from the ritual of making an actual mixtape: pick a song, decorate it, write a note on the back.

02

3D craft

Modeled the cassette in three.js with procedural geometry, painted through a UV-atlas canvas texture instead of static art.

03

Sharing

Wired Supabase behind publish tokens, so a tape moves from private link to the public Nightstand without an account system.

04

Motion

Tuned every interaction to a stop-motion 12fps cadence with hand-made jitter, to keep it feeling crafted, not slick.

/what it is

LOVETAPE is a small corner of the internet where songs become personal gifts.

Choose a song, write a message, and wrap them inside a 3D cassette made for someone special.

Each tape can be shared privately or added to a public library, where visitors can rotate it, listen to the track, and read the message on the back.

No accounts, no ads. Just music, memories and meaningful messages.

LOVETAPE — introducing the app

/development

Personal project built with Next.js 16 (App Router, Turbopack) and React 19: a real three.js / @react-three/fiber cassette with procedural geometry, painted on every face through a UV-atlas CanvasTexture instead of static art. Spotify Web API search (with an iTunes fallback so the app runs without credentials) finds the song, Supabase (Postgres) stores each tape behind a publish token that proves ownership before it can go public, and nanoid mints the shareable /t/:id links and Open Graph thumbnails for the public Nightstand.
  • Next.js 16
  • React 19
  • three.js
  • @react-three/fiber
  • Zustand
  • Supabase
  • Spotify Web API
  • nanoid
LOVETAPE — make it personal

/ux design

Designed LOVETAPE around the feel of making an actual mixtape: choose a song, then drag to rotate the cassette while decorating every side with stickers, clay-like flowers, torn washi ribbons, handwriting and gouache paint, and flip it over to write a letter on the back like a postcard. Every tape can be shared through a private link or published to the Nightstand, a public library where visitors rotate the cassette, listen to the track, and read the message on the back. The whole interface ticks at a stop-motion 12 frames per second with tiny handmade jitter — no accounts, no ads — just music and messages.

Send a tape through a private link, or publish it to the Nightstand — a growing public library of songs, memories and personal dedications.

  • Interaction design
  • Stop-motion motion design
  • Hand-drawn illustration
  • Prototyping
LOVETAPE — the library