oktaf
Music-streaming interface focused on calmer discovery, direct listener control, and responsive playback.
overview
Oktaf explores a less cluttered, more predictable music-streaming experience. It responds to crowded discovery, weak album-library browsing, recommendation fatigue, and opaque shuffle behavior observed during HCI research.
The React prototype keeps familiar streaming conventions while giving listeners clearer navigation, denser library browsing, direct feedback, and unbiased queue randomization.
key features
discovery
- focused viewsSeparate albums, playlists, and tracks instead of mixing every format on one surface.
- release detailBrowse album tracks, metadata, play counts, artists, and related releases.
- adaptive colorDerive detail-page backgrounds from album artwork.
library
- album-first layoutScan saved music through a dense responsive grid.
- direct feedbackLike, dislike, or bookmark tracks without hidden intent.
- clear navigationPreserve familiar structure while reducing homepage noise.
playback
- true shuffleBuild unbiased queues with Fisher-Yates randomization.
- complete controlsPlay, seek, skip, mute, change volume, shuffle, and cycle three repeat modes.
- keyboard accessControl playback, seeking, tracks, and volume with shortcuts.
experience
- responsive playerAdapt desktop sidebar and player into compact mobile controls.
- shared stateKeep queue and playback state consistent across routes.
- restrained motionUse transitions to connect navigation, cards, and artwork without competing with content.
technology stack
- interface
- React
- TypeScript
- React Router
- ui system
- Tailwind CSS
- shadcn/ui
- experience
- Framer Motion
- Node Vibrant
engineering highlights
unbiased queue logic
Fisher-Yates shuffle replaces recommendation-weighted ordering with transparent, uniform randomization.
artwork-driven identity
Node Vibrant extracts colors from album covers to create contextual detail-page backgrounds while keeping shared layout consistent.
responsive playback
Player state and controls persist across routes while desktop navigation and the full player collapse into mobile-specific patterns.