Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/retro-webpage/llms.txt

Use this file to discover all available pages before exploring further.

WinampPlayer is a fully self-contained widget that recreates the iconic Winamp 2.x media player interface straight from 1999 — dark chrome panels, a green-on-black LCD display, bevel-styled transport buttons, and a 16-column animated EQ visualizer. It carries no real audio playback; the illusion is purely visual, making it a perfect decorative centerpiece for any retro portfolio page.

​
Props

WinampPlayer accepts no props. All state is managed internally.
The component is fully self-contained. Drop it anywhere in your JSX and it works out of the box — no configuration, no context, no audio files required.

​
Usage

import WinampPlayer from './components/WinampPlayer';

export default function Sidebar() {
  return (
    <aside>
      <WinampPlayer />
    </aside>
  );
}

​
Behavior & Animation

Play / Pause toggle — The component initializes with isPlaying set to true. Clicking the ⏸ / ▶ button toggles this boolean. While playing:
  • The LCD timer displays 01:23 and resets to 00:00 when paused.
  • The song name Darude - Sandstorm.mp3 (128kbps) scrolls horizontally via a Tailwind animate-marquee class.
  • Each of the 16 EQ bar columns animates independently via the eq-bar CSS class, which applies the eq-bounce keyframe animation. Each column is assigned a random animationDelay (0–0.5 s) and animationDuration (0.3–0.7 s) on every render, producing the organic wobble characteristic of a real spectrum analyzer.
EQ bars — When isPlaying is false, the inner #00ff00 bar element is unmounted entirely, leaving only the dark #003300 column backing visible — faithfully mimicking a stopped Winamp. Prev / Stop / Next buttons — Rendered with the same bevel styling (raised border on mount, inverted on :active) but carry no click handlers in the current implementation. They serve as authentic decorative controls.
The eq-bounce keyframe animation must be defined in your global CSS or Tailwind config for the EQ bars to animate. Confirm the keyframe is present if bars appear static while playing.

​
Customization Tips

Change the track name — The scrolling song title is a static string inside the component. Replace "Darude - Sandstorm.mp3 (128kbps)" with any text to brand the player as your own mixtape.
Resize the widget — The outer container is fixed at w-64. Swap it for any Tailwind width class (e.g. w-72, w-80) or remove it entirely and let the parent control sizing. The internal flex layout will adapt.
Wire up real audio — Add an <audio> ref and call .play() / .pause() inside the existing onClick handler for the play/pause button to turn the prop into a real media controller.
Adjust EQ randomness — The Math.random() calls for animationDelay and animationDuration run at render time. Seed them with deterministic values if you need consistent animations across server and client renders (important for SSR/hydration parity).

Build docs developers (and LLMs) love

Get started for freeTalk to us