PortfolioCut 01 / 09 Press play
Live shelf

Everythingyou've gotspinning.

A shelf you flick, not a list you scroll.

Role
Product design, front and back end
When
Jul to Sep 2026
Built with
Next.js, three.js, Postgres
Status
Live

The problem

Links flatten everything.

Every playlist already ships with the one picture people recognise. So the cover art became the interface.

OG B-TOWN
(G)old
Hollywood
Workout
Bhajans

The shelf

A deck you flick.

Card184 px
Step40 px
Gesture1 flick = 1 card
LoopEndless, never copied

The orbit took six passes

123456

Two layouts

Or an arc.

Owners pick the layout in settings. The page swaps one component and nothing else.

OG B-TOWN
(G)old
Hollywood
Workout
Bhajans

The drafts

Every page, before it shipped.

19 takes · 9 masters · real builds and Figma frames

Home page3 takes
Take 1 · Aug 1 · BuildA lit shelf of placeholder playlists, built before there was a design.
Take 2 · Aug 5 · BuildA record off the top. Its 1.4 MB animation went with it.
Take 3 · Aug 9 · BuildThe halftone ribbon, home for seven weeks. Kept whole at /signup, as the way in.
Master
Master · ShippedA record changer, built from a real shelf. It plays the product instead of describing it.
Sign in1 take
Take 1 · Jul 31 · BuildA page of its own. It still catches errors under the card.
Master
Master · ShippedA card over the sign-up page. Google only.
Welcome4 takes
Take 1 · Aug 1 · BuildNo moment at all. Straight to a dashboard of counts.
Take 2 · Aug 18 · BuildA caustic light field. It fought the record, and won.
Take 3 · Aug 22 · BuildPaler record, louder type. The rings read as a diagram.
Take 4 · Aug 23 · BuildThe flat Figma disc. So concentric its spin was invisible.
Master
Master · ShippedThe earlier record came back. It waits for a tap.
Pick your link1 take
Take 1 · Aug 1 · BuildThe address inside the field read as a URL bar to finish.
Master
Master · ShippedA plain labelled field, on the landing's backdrop.
Dashboard2 takes
Take 1 · Aug 1 · BuildFour tabs and a form. Every screen came out to be redrawn.
Take 2 · Aug 22 · BuildConnect, then import. Both services keep import behind review.
Master
Master · ShippedPaste a link. Toggle what shows, drag the order.
Settings2 takes
Take 1 · Aug 1 · BuildA checkbox, and one Save for everything.
Take 2 · Sep · FigmaLayout sat under Save. Waiting on Save read as a bug.
Master
Master · ShippedSave wakes only on a real change. Picking a layout is the save.
Public shelf4 takes
Take 1 · Aug 1 · BuildA lit shelf per service. 912 lines, deleted.
Take 2 · Sep 5 · BuildThe first deck. Rebuilt three days later.
Take 3 · Sep · FigmaStacked cards: 184px, stepping 40px.
Take 4 · Sep · FigmaTilted covers on a ring, stood upright.
Master
Master · ShippedBoth shipped as a setting. The owner picks.
Titles1 take
Take 1 · Sep · FigmaWhite on real art measured 1.59:1.
Master
Master · ShippedA band behind every title. 5.5:1 on pure white.
Player1 take
Take 1 · Aug 1 · BuildSpotify's embed. Unstyleable, and silent for most visitors.
Master
Master · ShippedOur own player. Previews for Spotify, whole songs for YouTube Music.

The front door

Don't describe it. Play it.

The first home page said what SpindlShare was. The new one shows it running: a record changer, dropping the playlists on a real shelf onto the platter one at a time. This is the product's own three.js model, running here.

Now spinningOG B-TOWN100 songs · Spotify

  1. 01  Grooves

    Light that holds still.

    Vinyl shines because its grooves are concentric. The grain of this material runs along them, so light streaks across the record and stays put while it turns. The first changer was CSS gradients, and up close their rings shimmered into moiré.

  2. 02  Label

    Printed from the cover.

    Each playlist's art is printed onto a paper label: the wordmark round the top, the playlist round the bottom, SIDE A down the side, and a little tooth in the paper.

  3. 03  Stack

    Motion with weight.

    The next record drops under gravity. The platter catches it and takes the spin, the one beneath is gone, and the stack above settles by one.

  4. 04  Arm

    A gimballed S-arm.

    For every record it lifts, swings out and lowers on a curve, balanced by a brass counterweight. While one plays, the stylus creeps inward, the way a groove carries it.

  5. 05  Deck

    Walnut, brass, 33 lit.

    Book-matched walnut, a brass inlay, and a machined platter with strobe dots and a lamp to read them by. Lit as a dark studio with a few softboxes, so a ruby pressing stays ruby.

One model, three uses

The changer, the player, the sleeves.

The home page's player turntable is this same deck, and the records on its three step sleeves are this same model, rendered once into images. These three were baked by your browser, from this page, a moment ago.

1
Claim your name
2
Paste your links
3
Share one link

Paid for on arrival: three.js loads after first paint, and each scene only as its section nears.

The flow

Under a minute to a shelf.

Arrive: A changer, and one button.
Claim: The old front door, kept as the way in.
Sign in: Google, and nothing to fill in.
Name: Pick your link, or keep the one you typed.
Welcome: Your shelf is live.
Curate: Paste, toggle, drag.
Share: One link to all of it.
01 ArriveOne line, one button.

The player

Our own player.

Spotify's embed only streams to people signed in to Spotify, and it can't be styled. So the song rows became the controls: a Spotify song plays its 30-second preview, which anyone can hear, and a YouTube Music song plays whole, through YouTube's own player, under the same rows.

  1. 1Ajab SiKK, Vishal-Shekhar4:02
  2. 2Tumhe Jo Maine DekhaAbhijeet, Shreya Ghoshal5:41
  3. Main Hoon NaSonu Nigam, Shreya Ghoshal6:01
  4. 4Chale Jaise HawaienKK, Vasundhara Das5:24
  5. 5Tumse Milke Dil KaSonu Nigam, Sabri Brothers5:59
  6. 6Kal Ho Naa HoShankar-Ehsaan-Loy5:21

Before and after

From Spotify's embed to our own.

Drag across. On the left, the Aug 1 build with Spotify's red iframe under the turntable. On the right, what shipped.

Shipped: the product's own player, a record over the song listAug 1 build: a turntable over Spotify's red embedded playerBeforeAfter

Your turn

Flick it yourself.

The public page, running: tap the phone, pick a step, switch between stacked and arc. It plays on its own until you take over.

One refresh, two ways to report it

Press refresh. Both boards below run it.

RejectedInline note

Chosen 5 out of 5

5 checked, 197 songs, 5 updated

OG B-TOWN

(G)old

Hollywood

First row –

ChosenFloating card

Chosen 5 out of 5

5 checked, 197 songs, 5 updated

OG B-TOWN

(G)old

Hollywood

First row –

Back cover

One link. Everything you've got spinning.

Make yours See mine

Liner notes

Design
The shelf and both its layouts, the home page, the dashboard, settings and admin.
3D and motion
The turntables and the sand, modelled and lit by hand in three.js. The deck and the arc, hand-written geometry with no animation library.
Front end
Next.js 16, React 19 and Tailwind 4, with CSS modules for the home page.
Back end
Prisma 7 on Postgres, ten models. Auth.js v5, rate limits per account and per IP, tokens encrypted with AES-256-GCM.
Care
Thirteen check suites, cached public pages, reduced motion honoured throughout, and a complete working copy at spindlshare.vercel.app in case the domain ever lapses.
Pressed
July to September 2026. 150+ commits, solo.