RetroCade
Boogie like it's the '80s
An adventure through the magical world of CSS design & keyframe animations
Retrocade is an ambitious experiment set out to create a functional, semi-realistic audio system in HTML, CSS and JavaScript only. Demo on Codepen.
Pushing the limits
As much as CSS can be obtuse at times and we like to joke about it, it can also be leveraged to accomplish absolutely stunning visuals. Take a look on Codepen. Every day a couple of small, nifty projects come up that blow everyone's minds. Paintings in CSS? Done. 3D in 2D? Done. Entire forms without a shred of Javascript? That's also a thing. The possibilities are truly endless. Why not, then, replicate a more or less functional R2R recorder using (mostly) CSS?
Sweet dreams
(are made of this)
And indeed they are. I based my concept on the Akai GX-747 and on the memories of my father's Grundig TS1000. I felt that this mixture of old and new made a perfectly pleasant and balanced layout. Influenced by Google's currently trending material design, the concept went through quite a few iterations and many moments of self-doubt. Am I adding too many buttons? Is it supposed to be three-head or four-head? Should it even have a stop button or just pause? You get the gist of it.
Get down on it
Get down on it!
So, what do I plan on adding in the future, you ask?
Functional power buttonFunctional play/pause buttons- Draggable volume sliders
- Rotating knobs
- Animated VU meters
- Easing rewind/fast-forward functions
Display counter that actually keeps track of time
Perhaps even the possibility of playing a real track.
See it in action
Buttons, dials, sliders
Reel-to-reel tape recorders can often times appear confusing due to their highly complicated layouts. I tried to approach this issue by heavily simplifying the original concept, whilst still providing a somewhat functional, minimalist UI.
