LM-30Music

Velvet

An artist management agency staged as a theatre at night, with its back office behind the curtain.

The live preview runs real 3D in your browser, so on this device it can take longer to appear and scroll less smoothly. The video above shows the full site.

A complete website for Ormolu, a made-up artist management agency, staged as a theatre at night in live three.js, with the agency's back office and a portal for each artist behind it. The curtain carries the agency's name in gilt and rises as you scroll. The roster stands on a revolve, each artist on their own mark in their own colour of light beside the instrument that says what they do. The records sit in a crate in the green room and the turntable plays the one you pick. The tour is a brass orrery with each artist's dates pinned on the globe and joined in order, the services are doors down a backstage corridor, the team reads like a playbill, and the booking, new music and press forms wait at the stage door in the rain. Behind it, the studio runs the agency: an inbox from the site's forms, a bookings board from first email to settlement with advancing, a calendar, the roster, music, tour dates, files, team access and an editor for every word, colour, section and switch on the public site. Each artist signs in to their own portal to edit their page, answer offers, see their dates and send in new music. The public demo runs the sample agency in the browser with a switch between visitor, agency and artist; a buyer's copy runs live on its own Base44 app, and uploaded anywhere else it runs as the demo agency. For artist managers, booking agencies, record labels and music PR firms.

How it's made

  1. A theatre, not a template

    Every section of an agency site maps onto a part of a theatre, so the 3D carries the story instead of decorating it. The curtain is the agency's name in gilt, the roster is a revolve, the records sit in a green-room crate, the tour is a brass orrery, the services are doors down a backstage corridor, the team is a playbill and the forms wait at the stage door.

  2. Sets built from the agency's data

    The proscenium, seats, instruments, doors and orrery are three.js primitives and lathes, the curtain is a cloth of folds moved by a shader, and the velvet, brick, plaster and wood are drawn on canvases at load. Each artist's colour lights their mark, their dates become pins on the globe, their records become sleeves, and the agency's name goes on the valance and the stage door poster.

  3. One renderer, one scroll director

    A single WebGL canvas draws every set. A scroll director maps each part of the page to a camera, a set and a light level, and the theatre eases between them; sets out of view aren't drawn. The busiest frame is about 200,000 triangles with shadows, and quality steps down on its own if the frame rate falls.

  4. A turntable that always plays

    Picking a record drops the needle on its uploaded audio, or on a short sketch in the artist's genre synthesised in the browser with Web Audio when there's none. Nothing plays until someone presses play, and what's playing stays under the nav while the visitor scrolls on.

  5. The back office, from a manager's day

    Tonight shows what needs the agency now: new messages, artists' answers, holds running out, shows to advance. Bookings run on a board from first email to settlement, each offer with the promoter, fee and deal, deposit, an advancing checklist and a history; one click turns a message into an offer and a confirmed offer into a tour date.

  6. Everything editable

    The site editor covers every word, colour, section, service, form and the sign-in page, with four type sets and the agency's own palette. Settings hold the booking stages, deal types, currency, CSV exports, a routing-sheet import and a full backup, and Ctrl K, undo, an offline outbox and live alerts run across the studio.

  7. A portal for every artist

    Artists sign in at the same stage door to edit their own page, answer the offers the agency sends them (I'm in, Pass or a question), see their dates and days away, open shared files and send in new music as drafts. The agency decides whether they see fees and whether they can change their name and look.

  8. Locked down by functions

    Every table is closed to all but the agency. Visitors read published records and public fields through one function, artists read and write through another that checks which fields they may touch, and the forms go through a third with a bot trap, a rate limit and duplicate merging. A fourth turns a departing staff member's Base44 account back into a plain user. Tested against a real database with an owner, staff, an artist and a stranger: 107 access checks passed.

In this kit

  • src/

    Full source. The complete site as its own project, ready to run.

  • base44/

  • public/

    Media and assets. The images, clips, textures and icons the page loads.

  • index.html

  • bench.html

  • package.json

  • package-lock.json

  • vite.config.js

  • tailwind.config.js

  • postcss.config.js

  • eslint.config.js

  • .env.example

  • README.md

    Start here. What's inside and how to run it.

  • CHANGES.md

    Changelog. What changed in each version of the kit.

  • HOW-IT-WAS-MADE.md

    How it was made. The build step by step, and a recipe to make your own.

  • ADAPT.md

    Adaptation prompt. Fits the kit to your client's brand in an AI builder.

  • RESKIN.md

    Re-skin guide. Colors, type, copy and media, changed file by file.

  • PROVENANCE.md

    Provenance. Where every model, texture and image came from.

  • THIRD_PARTY.md

    Open-source credits. Every library and font inside, with its license.

  • LICENSE.md

    Commercial license. Unlimited client projects, one person per license, no resale.

See a real zip, opened

Specs

Stack
Vite 8.3 · React 18.3 · React Router 7.18 · three.js 0.171 · Tailwind CSS 3.4 · Base44 SDK 0.8 (auth / database / functions / file uploads) · Four Base44 backend functions (Deno) · Web Audio (synthesised previews) · GLSL shaders · Procedural geometry · Lucide icons 0.475 · Google Fonts (Bodoni Moda / Hanken Grotesk / Fragment Mono)
File size
0.4 MB
Triangles
203,495
Browser
Needs WebGL 2 for the theatre: current Chrome, Edge, Firefox and Safari, on desktop and phones. The 3D picks its quality from the device and steps down if the frame rate falls, and reduced motion turns the camera's glides into cuts. Without WebGL a painted backdrop shows and every page, form, the studio and the portal still work. Runs live on a Base44 app (sign-in, data, functions and uploads); on any other host it runs as the demo agency in the visitor's browser. Tested in headless Chrome at 1440 x 900 and 390 x 844, with no sideways scroll down to 360 px; Safari, Firefox and real phones weren't part of the tests.
Released
Oct 2026
Version
1.0.1

From download to client site

  1. Buy it, or get it with a plan

    Buy this kit on its own, or get every kit in the collection with a plan.

  2. Download the zip

    It shows up in your library as soon as payment goes through. Up to 10 downloads a day, and each link works for 10 minutes.

  3. Run it

    Unzip it, run npm install, then npm run dev to open the site on your machine. You need Node.js 20 or newer. The README says how to build it for any host.

    npm install && npm run dev

  4. Make it your client's

    Hand ADAPT.md to your AI builder (Claude, ChatGPT or Cursor) with the client's brief, or follow RESKIN.md to change colors, type, copy and media by hand. HOW-IT-WAS-MADE.md shows how to build their product the same way.

Unlimited client projects, one person per license, no resale. Read the license

Built entirely in code: the curtain, the proscenium and the house, the revolve and its six instruments, the record crate and turntable, the corridor, the orrery and the rainy alley are generated in the browser, and their textures (velvet, brick, plaster, wood, the painted map) are drawn on canvases at load, so the site loads no model, photo or video files. The land on the globe comes from Natural Earth's public-domain map, record sleeves are generated from each record's seed, previews without uploaded audio are synthesised in the browser, and the fonts load from Google Fonts under the SIL Open Font License. Written with an AI coding assistant (Claude Code) under Parallel's direction. Ormolu and its six artists are made up and shown by their light and their instrument, not photos, and every name, record, date, venue and fee in the demo is a placeholder.

Buy LM-30 Velvet

Single kit

Price: $59once

By buying you agree to the Terms and License.

Included with Monthly, Annual and Lifetime.

Or every kit for life, $499.