REFERENCE
- Gallery page: https://magpui.com/en/i/sound-studio-site-with-scratchable-vinyl-ab3183
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/sound-studio-site-with-scratchable-vinyl-ab3183/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/sound-studio-site-with-scratchable-vinyl-ab3183/clip.mp4
- Original post: https://x.com/decibelsz/status/2117261115331924135 by @decibelsz
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD
A one-page site for a small software studio where the music literally draws the page. Everything sits on pure black, rendered live in WebGL: a chrome waveform made of hundreds of thin metal bars that reacts to a looping track, a camera-style lens flare that follows the cursor, a single line that coils into a vinyl record as you scroll, and a record you can grab and scratch so the audio speeds up, slows down and rewinds with your hand. It should feel like a premium audio product launch: dark, quiet, precise, with the sound as the main material.
DESIGN SYSTEM
- Background #000000 everywhere; content max width 1200px, 12-column grid, 24px gutters, large empty black areas between sections (section height 100vh, sticky scenes).
- Typography: a neutral grotesk sans for headings, 56-72px, weight 500, letter-spacing -0.02em, color #F2F2F2 with a subtle vertical silver gradient (#FFFFFF to #9A9A9A); body 15-16px #A6A6A6, line-height 1.5; tiny uppercase monospace captions 10-11px, letter-spacing 0.12em, #6B6B6B (e.g. 'FILTER 200 HZ -> 17 KHZ', '450 BARS').
- Chrome look: bars and logo use a computed metal shading, base #2B2B2B, highlights #FFFFFF, mid #8C8C8C, with a sharp specular streak; no photos.
- Lens flare: a 4-point white star (core 6px, rays 120-200px) with a soft halo and a few chromatic ghost rings tinted red #FF5A5A, green #6BFF8F, blue #6B8CFF at 15-25% opacity along the axis from the cursor through screen center.
- Panels: floating 'screens' with a 1px #2A2A2A border, radius 6px, background #050505, tilted in 3D perspective (rotateY -8 to 8deg) showing the waveform or code.
- Buttons: pill 44px tall, radius 999px, white #F5F5F5 on black text, or ghost with 1px #3A3A3A border.
MOTION
- Intro: black screen, the flare star fades in at center (opacity 0 to 1, 600ms, cubic-bezier(0.22,1,0.36,1)), then the wordmark resolves out of metal shards that fly in and assemble (900ms, stagger 8ms per shard, cubic-bezier(0.16,1,0.3,1)).
- Waveform: 450 vertical bars (2px wide, 2px gap) driven by an AnalyserNode (FFT 2048, smoothing 0.8), height follows frequency bins with a mirrored reflection below at 25% opacity; bars under the cursor brighten (specular boost x2 within a 120px radius, eased back over 400ms).
- Lens flare follows the pointer with a lerp of 0.12 per frame; ghosts reposition along the cursor-center axis every frame.
- Scroll audio: a BiquadFilter lowpass mapped from 200 Hz at the top to 17 kHz at the end of the first chapter, so the track starts muffled 'from another room' and opens up; a monospace readout shows the current cutoff (e.g. '5.7 kHz').
- Line to vinyl: the waveform collapses into a single line that winds into a spiral groove (about 300 turns) as scroll progresses 0 to 1, then the label and sheen fade in; the record spins at 33 rpm.
- Scratch: pointer down on the record pauses auto spin; drag angular velocity maps to playbackRate (-2 to 2) with a 60ms smoothing; on release it eases back to 1.0 over 500ms with cubic-bezier(0.25,0.1,0.25,1).
- Section reveals: headings slide up 24px and fade in (700ms, cubic-bezier(0.22,1,0.36,1)), tilted panels rotate from 14deg to their resting angle (900ms).
SECTIONS
1. Hero: centered chrome wordmark with a waveform icon, small caption 'SOFTWARE STUDIO', cursor flare.
2. 'The music draws the screen': full-width live waveform.
3. Vinyl chapter: the line coils into a close-up record seen in low perspective, label with placeholder text; scratchable.
4. Three explainer rows, each a short heading + paragraph on the left and a tilted panel on the right: sound follows the scroll (filter readout), the metal is drawn live (bars), the light is not an image (shader code panel).
5. 'It does not depend on the effects': the same panel with and without effects; note on adaptive quality.
6. Work: a product demo card (rhythm game) with a 3D tilted screen.
7. Contact: 'Let's talk?' card with a white pill button; language switch EN / PT.
8. Footer: wordmark, tagline 'Everything else is noise.', domain in monospace.
IMPLEMENTATION
- Raw WebGL2 (or OGL) with one full-screen canvas and instanced quads for the bars; fragment shader computes the metal shading and the flare with per-channel offset (dispersion). Web Audio API for analyser, lowpass filter and playbackRate scratching. GSAP ScrollTrigger (or a small scroll progress hook) drives filter cutoff, coil progress and section reveals.
- Audio starts only after a user gesture (a 'sound on' toggle), with a visible mute button.
- Progressive enhancement: all text is real HTML; if WebGL2 is missing or FPS stays under 40 for 2s, drop DPR to 1, halve the bar count, then fall back to a static image of the waveform.
- prefers-reduced-motion: no shard intro, no auto spin, static flare; scroll still changes the filter.
- Keyboard: the record is focusable, Left/Right arrows scrub, Space toggles audio; visible 2px white focus ring.
- Keep JS under ~150 KB, cap DPR at 2, pause rendering when the tab is hidden.
ADAPT TO THE PROJECT
Reuse the project's fonts, spacing scale, buttons and color tokens (map the silver and black to the closest neutral tokens). Do not copy the studio name, logo, product names or music; use a placeholder wordmark, a royalty-free loop and placeholder copy.
SUCCESS CHECK
- Scrolling from the top to the end of the first chapter audibly opens the muffled track and the cutoff readout climbs from about 200 Hz to 17 kHz.
- Dragging the record backwards rewinds the audio and releasing it returns smoothly to normal speed.
- Moving the cursor moves the flare with rainbow ghosts and brightens the bars under it, at 60 fps on a laptop.
