Music

Make your project look the way it sounds. A black-and-ivory music experience with records, visual storytelling and sound interactions.

Purpose: Artist or music label site · Editorial experience
Sector: Entertainment
Structure: Single page

Make it yours

US$6One-time payment · No subscription

Customize this design for your business or your next client.

Buy now

More designs. More possibilities.

Create for yourself and your clients with access to the Pro catalogue.

From US$19/month

See Pro plan

Already have access? Sign in

The video is a preview. The interactive demo comes with the purchase or with Pro.

No licensed music included; interactive audio uses your files or synthesized effects.

What makes it special

Scroll animation
Interactive audio
Carousel

What's included

Prompt to recreate and customize the design with AI.
Site code and files: images, fonts and licences.
Interactive demo and instructions.
Use on your own sites and final client projects.

Demo sections and screens (6)

Hero with an interactive dot background, headline and record
Seven-piece manifesto that moves with the scroll
Scene of the statue holding the record
Carousel of five concept albums
Final record with an animated text ring and audio player
Contact with dot mosaics and a grid that plays sound as you move across it

What you can customize

Copy, albums, navigation and tracks
Palette
Images and audio in public/media/ (registered in media.json)
Name, monogram, logo, favicon and email
Words in the text ring

How to start

Copy the prompt and download the files.
Take them to your AI tool and ask for the changes: brand, copy and images.
Review the result and publish it on your domain.

Download the package and copy the prompt: your AI tool works on the project in sitio/ (README with installation, running and where to customize). Change copy, albums, tracks, images and colors without touching the scroll choreography, the player or the sound grid. Includes three public-domain or CC0 recordings; if you use other music, make sure you have the rights.

The result depends on your AI tool and the changes you make. The demo shows the visual direction.

Technical details & requirements

Requirements

Node.js 20.19+ or 22.12+ and npm to run the project (Vite).
Static hosting (no backend or environment variables).
Your name, logo and email and, if you change the music, audio you have the rights to.
Not included: AI tool (and its credits), domain and hosting.

Technologies

React
Vite
TypeScript
Tailwind CSS
Motion
Canvas
Web Audio

Implemented in the package you download.

React 19 · Vite 8 · TypeScript · Tailwind CSS 4 · framer-motion · Canvas 2D · Web Audio API

Suggested AI tools

ClaudeCodexv0

Compatible with the design instructions; not a recorded test.

Tested compatibility: No recorded test yet.

Palette and typography

#080808#121212#1B1B1B#F5F3EE#B9B7B1#343434#101010#FFFFFF

Titulares, manifiesto, navegación y títulos (sustituye a IvyPresto / PP Editorial New, no incluidas): Fraunces
Entradilla en cursiva: Instrument Serif
Botón, anillo de texto e indicaciones: Fragment Mono

Licence & versions

Use it on your own sites and in final client projects, including commercial use. Do not resell or redistribute the prompt, the files or the site as a template. Read the licence

Provenance: Package v1.1.0: code and assets from the approved version (classical-sounds-seven.vercel.app, commit dfcad02): React, Vite, Tailwind and framer-motion, the site’s images and graphics, OFL typefaces and three public-domain or CC0 recordings. Notices in LICENCIAS-Y-AVISOS.md.

Version: v1.1.0 · Published Oct 29, 2026
Versions: v1.1.0 · 2026-11-03 — Code and assets package: runnable project (React 19 + Vite 8), images and graphics, typefaces, audio and licenses (90 files). Prompt aligned with the package.
v1.0.0 · 2026-10-30 — Release: video preview, short prompt and downloadable package.

Scope of this design