Win95Player brings nostalgic Windows 95 design language to your Framer projects with a fully functional audio player. Every detail is authentic — beveled borders, gradient titlebar, monospace green display, and pixel-accurate controls. Behind the retro shell is a real HTML5 audio engine with playlist management, seek-to-click progress bar, volume controls, and loop mode. Fully customizable via property controls with no code required.
Authentic Windows 95 UI — beveled borders, gradient titlebar, inset displays
Full HTML5 audio playback — play, pause, stop with real audio engine
Multi-track playlist — up to 20 tracks with File menu navigation
Click-to-seek progress bar with visual thumb indicator
Interactive dropdown menus — File, Play, and Options
Volume control via Options menu with live status bar display
Loop mode toggle for continuous single-track playback
Auto-play support on component load
Window control buttons — minimize, maximize, close with event handlers
Blinking monospace digital display for track name and time
Fully customizable colors — borders, titlebar gradient, display, buttons
Separate font controls for UI elements and digital display
Responsive layout — adapts to fixed or flexible container sizes
Clean React hooks implementation with proper event cleanup
Content
Title — Window title text (default: "Media Player")
Menu 1 / 2 / 3 — Customize the three menu labels (File, Play, Options)
Audio
Tracks — Array of up to 20 tracks, each with a Name and Audio file
Start Track — Initial track index on load (0–19)
Auto Play — Begin playback automatically on load
Loop — Repeat current track continuously
Volume — Initial volume level (0–1, default 0.75)
Typography
UI Font — Font for menus, buttons, and status bar
Display Font — Monospace font for the digital track display
Colors – Structure
Card BG — Main window background
Border Light — Highlight border color
Border Dark — Shadow border color
Border Darker — Deep shadow border color
Colors – Titlebar
Title Start — Gradient start (default: #000080)
Title End — Gradient end (default: #1084D0)
Title Text — Title bar text color
Colors – Content
Text — Primary UI text
Display BG — Digital display background (default: #000000)
Display Text — Digital display text color (default: #00FF00)
Colors – Interactive
Accent — Progress bar fill color
Menu Hover BG / Text — Menu item hover state
Button Hover BG — Control button hover background
Event Handlers
On Min / On Max / On Close — Window button events
On Prev / On Play / On Stop / On Next — Playback button events
Built with React hooks — useState, useEffect, useRef
Real HTML5 <audio> element with full event listener lifecycle management
Supports MP3, WAV, and OGG audio formats
Server-side rendering safe — audio initializes client-side only
startTransition used for non-urgent state updates
Progress tracking via timeupdate event with efficient DOM updates
Menu system closes on outside click and Escape key
Intrinsic size: 288 × 220px
Layout: any-prefer-fixed width and height
Portfolio sites with background music or audio demos
Retro / nostalgia-themed web experiences
Game developer portfolios with chiptune soundtracks
Agency or creative studio sites with a playful, memorable UI
Music producer or artist landing pages with track previews
Hackathon or indie project showcase sites
Easter egg hidden audio players in personal sites
Windows / OS-themed design concepts and presentations
windows 95 framer component · retro audio player framer · win95 media player · nostalgia ui framer · vintage music player component · html5 audio framer · playlist component framer · retro ui component · windows media player clone · framer music player · 90s ui framer · old windows style component · audio player with playlist · framer interactive component · retro design framer
Hamim Reza
