Prompt:
Build a standalone HTML page called "Softwell Player": a soft neumorphic music player with a generated visualizer and no audio. Softwell is an invented label. Palette: a single sage-mist surface (#e4e9e5) lit from the top left, with pure white highlights (#ffffff) and sage-gray shade (#b5bfb8) for every raised and inset shadow; ink (#46524b) and muted sage (#8a978f) text. Each track has its own accent that the whole UI eases to through a registered @property --accent color transition: coral #ef7b5c, teal #3fa5a0, amber #d99a2b, plum #9a6fc4 and sky #5b8fd9. Typography: rounded system faces (ui-rounded, SF Pro Rounded, Hiragino Maru Gothic, then system-ui, Helvetica Neue, Arial), bold titles, small uppercase tracked labels and tabular numerals for times.
Layout: a two-column shell (a 400px player card and a 340px queue card) that stacks into one centered column under 780px. Both cards are soft raised slabs with 36 to 40px radii. Player card from top to bottom: a row with a round restart button, a "Softwell · now playing / Side A · 1 of 5" label and a round heart like button; a raised well holding an inset vinyl disc with fine repeating radial grooves and a raised accent-colored center label with a radial highlight, a spindle hole and the track number; title and artist, which fade and slide when the track changes; an inset visualizer well; a scrubber with times, an inset track, an accent gradient fill and a raised knob with an accent core; a control row of shuffle, previous, a large play button, next and repeat; and an inset intensity slider. Queue card: five fictional tracks (Tidewater Hours by Lumen Harbor, Paper Lanterns, Slowly by Oda Fenwick, Glasshouse Weather by The Quiet Orchard, Northbound Static by Mirela Vance, Small Hours Bloom by Hollis & Wren), each a row button with its number, title, artist and duration. The current row is pressed inset and swaps its number for a tiny three-bar CSS equalizer. A small note at the bottom explains that the music is imagined.
Behavior: pressed and toggled states (playing, shuffle, repeat, like) turn raised shadows into inset ones. The play button sinks into the surface while playing. The disc rotates once every 7 seconds while playing. Time advances in real time and the track moves on at the end, following shuffle or repeat. The visualizer is a DPR-aware canvas with 30 round-capped vertical bars mirrored about the midline in the accent color. Their heights come from a synthetic spectrum per track: a decaying low-frequency profile plus a brightness tilt, slow per-band sine wobble, and kick, snare and hi-hat envelopes timed to the track's BPM. Bars rise quickly and fall slowly. When paused they settle to a gentle breathing line, and before the first play the well shows the empty-state line "Press play. Nothing will sound, but everything will move." The heart pops with a spring animation. Under prefers-reduced-motion the disc and queue equalizer stop, the visualizer runs at a quarter of the tempo with heavy smoothing and lower amplitude, and transitions are removed.
Title: Softwell Player
Description: A tactile, almost silent music player shaped from one soft sage surface, as if pressed out of clay-coloured felt. Every control is raised out of or sunk into the same material, and pressing play visibly pushes the button into the card. Each imagined track brings its own accent color, which washes across the disc label, the progress bar and the visualizer. A synthetic, tempo-aware spectrum makes the inset well pulse as though music were playing.
Visual techniques:
- Neumorphic dual-shadow system (white and sage) for raised and inset states, with toggles shown as inset shadows
- Registered @property --accent so the palette color itself animates between tracks
- Vinyl grooves from repeating-radial-gradient and a color-mix highlight on the label
- Canvas visualizer from a synthetic BPM-driven spectrum with kick, snare and hat envelopes and asymmetric attack and decay
- Pointer-capture scrubber with ARIA slider semantics and keyboard seeking
- Staggered fade and slide when track text changes; spring easing on knobs and the heart pop
- CSS mini equalizer on the active queue row, synced to play state
Interaction model: Press the big button, or Space, to play and pause. Previous restarts the track, or goes back one if you are near the start; next, shuffle and repeat behave as on a real player. Drag or click the scrubber to seek, or focus it and use the arrow, Home and End keys. Choose any track in the queue to switch to it and recolor the player. The intensity slider scales the visualizer, and the heart likes the current track.