Record Label Template
A complete independent record label site on a saturated magenta ground, with a rack of designed vinyl sleeves whose records slide out and become genuinely drag-spinnable turntables with inertia, motion smear and an elastic settle.
About This Template
A complete one-page site for Hot Wax, a fictional independent record label pressing limited vinyl in Margate since 2019. The whole page commits to a saturated deep-magenta ground: no cards, no safe margins, just cream type, one tangerine accent, and a near-black deck for the signature section and footer. Bungee carries the oversized wordmark and display moments; Inter does all the reading. The hero is an oversized pure-CSS vinyl disc bleeding a third off the right edge of the viewport with the stacked HOT WAX wordmark crossing its edge; it idles like a motored platter, a mouse can grab, scratch and fling it, and a now-spinning equaliser in the left field dances to its actual speed.
Read the full template overview
The centrepiece is the pressing rack: six release sleeves, each a distinct designed treatment built entirely in CSS, from moire stripes to riso grain to a pixel-heart halftone. Selecting a sleeve slides its record out; the emerged disc is a real turntable, drag-spinnable through Draggable's rotation mode with InertiaPlugin momentum. The groove sheen stays fixed to the light source on a separate non-rotating layer, the centre label picks up a stepped motion blur at high angular velocity, and a hard fling spins long on inertia before decaying into a sub-degree elastic wobble as it stops. Selecting another sleeve returns the current record home first, and the page loads with the first record already half out.
Everything is markup-driven, so making it yours means editing HTML and repainting four colour tokens. Add or remove releases by copying a rack item, rewrite the roster and story in place, and delete any section knowing the rest keeps working. The same goes for the catalogue crate: the 3D ring reads its covers straight from the markup, so a new pressing is one more copied list item. The site ships as static files with no build step, degrades to a complete readable document without JavaScript, and gives reduced-motion visitors a designed static page with the first record out of its sleeve.
What's Included
- Complete deployable one-page label site: disc hero, pressing rack, type-led roster index, split story panel and submit footer
- Drag-spinnable vinyl records powered by Draggable rotation mode with InertiaPlugin momentum and a tunable throw resistance
- Layered spin response: the disc and label rotate under the finger, a light-source-fixed sheen overlay stays put, and the label picks up a stepped motion blur at high angular velocity
- Considered settle: inertia friction decay finished by a sub-degree elastic wobble at throw completion
- Queued sleeve selection returns the current record home with an eased slide before the next one emerges, and rapid choices keep only the latest request
- Six art-directed CSS sleeve treatments (moire stripes, riso grain, stacked type, archival tape box, halftone pixel heart, concentric sun) with no image files at all
- The full catalogue on a drag-spinnable 3D ring: six further CSS sleeve treatments for the older pressings, inertia flings that always land a cover front-facing, depth-dimmed covers over a gloss floor, a motion smear at speed and an idle creep that pauses while you browse
- Oversized pure-CSS hero vinyl bleeding off the viewport edge, idling like a motored platter that a mouse can grab, scratch and fling, with the motor visibly re-catching after a throw
- Now-spinning equaliser wired to the hero platter's real angular speed: the bars groove at idle, surge on a fling and flatline while the record is held stopped
- Roster index with oversized numerals, alternating alignment and hover-or-focus credit reveals that touch visitors see by default
- Measured wax, cream, tangerine and deck palette with every translucent value derived from RGB triple tokens for a three-minute reskin
- Reduced-motion, no-JavaScript and blocked-CDN states all show the complete page with the first record half out of its sleeve
- Optional Lenis smooth scrolling wired to the ScrollTrigger clock, opt-out per page or per visit
Perfect For
- Independent record labels presenting a catalogue of limited pressings
- Vinyl-first artists and bands selling short-run releases direct
- Record shops and distros that want the stock to feel physical on screen
- Cassette and tape labels, with the rack reskinned as a shelf of shells
- Club nights and DJ collectives publishing mixes as a catalogue
How It Works
Structure
One script initialises each section inside a single gsap.context, and every init returns early when its markup is missing, so any section can be deleted without breaking the rest. All collections are read from the markup itself: the rack is whatever [data-press] items exist, so adding a seventh release is a copy-paste in HTML with no script edit. A synchronous head script gates the reveal start states before first paint, and the main script removes that gate if the CDN fails so the page falls back to a plain readable document.
The hero platter
The hero disc idles at a lazy motor speed driven by the ticker, and on a fine pointer Draggable rotation with inertia lets a mouse grab, scratch and fling it; when a throw ends the motor visibly re-catches and pulls the platter back up to speed. The now-spinning equaliser is built by the script (bar count set by the data-hero-eq attribute) and maps measured angular speed to bar energy, so it grooves at idle, surges on a fling and flatlines while the record is held. The deck readout is live: selecting a sleeve in the rack announces its release over a DOM event, the track line swaps with a needle-drop hit on the bars, putting the record away reads Nothing on, and spinning a rack disc drives the equaliser too. On touch the hero stays hands-off so the oversized disc never steals page scrolling; the rack below is the touch turntable.
The turntable rack
Each rack item pairs a sleeve button with a disc built from three layers: a rotating rotor carrying the vinyl face and centre label, and a non-rotating sheen overlay that keeps the groove highlight fixed to the light source. Selecting a sleeve tweens the disc out on yPercent while the sleeve nudges aside, then Draggable's rotation mode with inertia takes over the emerged disc. A ticker samples angular velocity and applies a stepped blur to the label layer only, and onThrowComplete adds a sub-degree elastic wobble so the platter stops like a physical object. A latest-request queue slides the current record home before the next emerges.
The crate
The catalogue section stands all twelve covers on a 3D ring: each cover is rotated about a shared point behind the stage, the list carries transform-style preserve-3d, and depth is drawn with a per-cover deck-coloured overlay plus a slight scale falloff rather than filters, which would flatten the stack. A hidden proxy element and Draggable's x type turn horizontal drag into rotation by pure deltas, InertiaPlugin carries a fling, and the throw's snap option lands every throw exactly front-facing; clicking a sleeve tweens the ring round the short way, arrow keys step one cover, and a caption line dip-swaps to whatever lands at the front, read from each cover's own markup. When nobody is touching it the ring creeps a few degrees a second on the ticker, pausing on any interaction and resuming after a quiet moment, and at high spin speed the front-facing covers take a stepped motion blur on their flat art layer only. Without JavaScript the same markup renders as a plain grid of sleeves with their details beneath them.
Touch and reduced motion
The disc alone carries touch-action none, so drag-spinning works on touch while vertical swipes anywhere else on the rack scroll the page normally. Sleeves are real buttons, so selection works by tap, click, Enter and Space, with aria-pressed tracking the open record. Under prefers-reduced-motion the page is a designed static state: the hero disc does not rotate, the first record sits half out, selection swaps records instantly with no travel, and CSS independently restores every pre-hidden reveal target.
Without JavaScript
The document is complete on its own: the first record is shown half out of its sleeve by a plain CSS state on the markup, every release, artist and paragraph is readable, and the hero disc still renders. The head gate that pre-hides reveal targets is only honoured while GSAP is present, so a blocked CDN gets the same full document rather than hidden content. The newsletter form is decorative until wired to a provider, and the README documents where to point it.