Posts tagged “vaio” — Blog of independent game and app developer Matt Sephton. Featuring vintage Macintosh, game development, digital artwork, Japanese esoterica, video game reviews, hacks and tips, and much more. https://blog.gingerbeardman.com/tag/vaio/ Wed, 01 Jul 2026 16:09:47 +0000 Wed, 01 Jul 2026 16:09:47 +0000 Jekyll v4.4.1 <p>Some things you probably didn’t realise about the design of the original <em><a href="https://en.wikipedia.org/wiki/PlayStation_(console)">Sony PlayStation</a></em>:</p> <ul> <li>it was inspired by Apple’s <em><a href="https://en.wikipedia.org/wiki/Macintosh_Plus">Macintosh Plus</a></em></li> <li>the colour is grey with a hint of violet to counteract plastic ageing/yellowing</li> <li><em>Sony</em> acquired the PlayStation name from Yamaha</li> <li>it led to the <em><a href="https://en.wikipedia.org/wiki/Vaio">VAIO</a></em> range of PCs</li> </ul> <p><strong>Bonus fact:</strong></p> <ul> <li><em><a href="https://en.wikipedia.org/wiki/Vaio#Etymology">VAIO</a></em> was originally an acronym for Video Audio Input Output</li> </ul> <h2 id="photo-reference">Photo reference</h2> <p>Taken from <em><a href="https://www.worldcat.org/title/1050032044">Digital Dreams: The Work of the Sony Design Center</a></em> (1999, Paul Kunkel)</p> <div class="carousel__holder"> <div class="carousel"> <input class="carousel__activator" type="radio" name="carousel" id="a" checked="checked" /> <input class="carousel__activator" type="radio" name="carousel" id="b" /> <input class="carousel__activator" type="radio" name="carousel" id="c" /> <input class="carousel__activator" type="radio" name="carousel" id="d" /> <div class="carousel__controls"> <label class="carousel__control carousel__control--backward" for="d"></label> <label class="carousel__control carousel__control--forward" for="b"></label> </div> <div class="carousel__controls"> <label class="carousel__control carousel__control--backward" for="a"></label> <label class="carousel__control carousel__control--forward" for="c"></label> </div> <div class="carousel__controls"> <label class="carousel__control carousel__control--backward" for="b"></label> <label class="carousel__control carousel__control--forward" for="d"></label> </div> <div class="carousel__controls"> <label class="carousel__control carousel__control--backward" for="c"></label> <label class="carousel__control carousel__control--forward" for="a"></label> </div> <div class="carousel__track"> <ul> <li class="carousel__slide" style="background-image: url('https://cdn.gingerbeardman.com/images/posts/sony-playstation-facts-1.jpg');"><img class="carousel__staticimage" src="https://cdn.gingerbeardman.com/images/posts/sony-playstation-facts-1.jpg" /></li> <li class="carousel__slide" style="background-image: url('https://cdn.gingerbeardman.com/images/posts/sony-playstation-facts-2.jpg');"><img class="carousel__staticimage" src="https://cdn.gingerbeardman.com/images/posts/sony-playstation-facts-2.jpg" /></li> <li class="carousel__slide" style="background-image: url('https://cdn.gingerbeardman.com/images/posts/sony-playstation-facts-3.jpg');"><img class="carousel__staticimage" src="https://cdn.gingerbeardman.com/images/posts/sony-playstation-facts-3.jpg" /></li> <li class="carousel__slide" style="background-image: url('https://cdn.gingerbeardman.com/images/posts/sony-playstation-facts-4.jpg');"><img class="carousel__staticimage" src="https://cdn.gingerbeardman.com/images/posts/sony-playstation-facts-4.jpg" /></li> </ul> </div> <div class="carousel__indicators"> <label class="carousel__indicator" for="a"></label> <label class="carousel__indicator" for="b"></label> <label class="carousel__indicator" for="c"></label> <label class="carousel__indicator" for="d"></label> </div> </div> </div> <style> .carousel__holder {width: 100%; position: relative; padding-bottom: 133%; margin: 1rem 0 1rem;} .carousel { height: 100%; width: 100%; overflow: hidden; text-align: center; position: absolute; padding: 0; } .carousel__staticimage, .carousel__controls, .carousel__activator { display: none; } .carousel__activator:nth-of-type(1):checked ~ .carousel__track { -webkit-transform: translateX(-000%); transform: translateX(-000%); } .carousel__activator:nth-of-type(1):checked ~ .carousel__slide:nth-of-type(1) { transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s; transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s; top: 0; left: 0; right: 0; opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .carousel__activator:nth-of-type(1):checked ~ .carousel__controls:nth-of-type(1) { display: block; opacity: 1; } .carousel__activator:nth-of-type(1):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(1) { opacity: 1; } .carousel__activator:nth-of-type(2):checked ~ .carousel__track { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .carousel__activator:nth-of-type(2):checked ~ .carousel__slide:nth-of-type(2) { transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s; transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s; top: 0; left: 0; right: 0; opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .carousel__activator:nth-of-type(2):checked ~ .carousel__controls:nth-of-type(2) { display: block; opacity: 1; } .carousel__activator:nth-of-type(2):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(2) { opacity: 1; } .carousel__activator:nth-of-type(3):checked ~ .carousel__track { -webkit-transform: translateX(-200%); transform: translateX(-200%); } .carousel__activator:nth-of-type(3):checked ~ .carousel__slide:nth-of-type(3) { transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s; transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s; top: 0; left: 0; right: 0; opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .carousel__activator:nth-of-type(3):checked ~ .carousel__controls:nth-of-type(3) { display: block; opacity: 1; } .carousel__activator:nth-of-type(3):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(3) { opacity: 1; } .carousel__activator:nth-of-type(4):checked ~ .carousel__track { -webkit-transform: translateX(-300%); transform: translateX(-300%); } .carousel__activator:nth-of-type(4):checked ~ .carousel__slide:nth-of-type(4) { transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s; transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s; top: 0; left: 0; right: 0; opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .carousel__activator:nth-of-type(4):checked ~ .carousel__controls:nth-of-type(4) { display: block; opacity: 1; } .carousel__activator:nth-of-type(4):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(4) { opacity: 1; } .carousel__control { height: 30px; width: 30px; margin-top: -15px; top: 50%; position: absolute; display: block; cursor: pointer; border-width: 5px 5px 0 0; border-style: solid; opacity: 0.35; opacity: 1; outline: 0; z-index: 3; color: #fafafa; mix-blend-mode: difference; } .carousel__control:hover { opacity: 1; } .carousel__control--backward { left: 20px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .carousel__control--forward { right: 20px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .carousel__indicators { position: absolute; bottom: 20px; width: 100%; text-align: center; } .carousel__indicator { height: 10px; width: 10px; border-radius: 100%; display: inline-block; z-index: 2; cursor: pointer; opacity: 0.35; margin: 0 2.5px 0 2.5px; } .carousel__indicator:hover { opacity: 0.75; } .carousel__track { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 0; margin: 0; transition: -webkit-transform 0.5s ease 0s; transition: transform 0.5s ease 0s; transition: transform 0.5s ease 0s, -webkit-transform 0.5s ease 0s; } .carousel__track .carousel__slide { display: block; top: 0; left: 0; right: 0; opacity: 1; } .carousel__track .carousel__slide:nth-of-type(1) { -webkit-transform: translateX(000%) translateZ(0); transform: translateX(000%) translateZ(0); } .carousel__track .carousel__slide:nth-of-type(2) { -webkit-transform: translateX(100%) translateZ(0); transform: translateX(100%) translateZ(0); } .carousel__track .carousel__slide:nth-of-type(3) { -webkit-transform: translateX(200%) translateZ(0); transform: translateX(200%) translateZ(0); } .carousel__track .carousel__slide:nth-of-type(4) { -webkit-transform: translateX(300%) translateZ(0); transform: translateX(300%) translateZ(0); } .carousel--scale .carousel__slide { -webkit-transform: scale(0); transform: scale(0); } .carousel__slide { height: 100%; position: absolute; opacity: 0; overflow: hidden; } .carousel__slide .overlay {height: 100%;} .carousel--thumb .carousel__indicator { height: 30px; width: 30px; } .carousel__indicator { background-color: #fafafa; } .carousel__slide:nth-of-type(1), .carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(1) { background-size: cover; background-position: center; } .carousel__slide:nth-of-type(2), .carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(2) { background-size: cover; background-position: center; } .carousel__slide:nth-of-type(3), .carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(3) { background-size: cover; background-position: center; } .carousel__slide:nth-of-type(4), .carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(4) { background-size: cover; background-position: center; } </style> <script> function isVisible(el) { while (el) { if (el === document) { return true; } var $style = window.getComputedStyle(el, null); if (!el) { return false; } else if (!$style) { return false; } else if ($style.display === 'none') { return false; } else if ($style.visibility === 'hidden') { return false; } else if (+$style.opacity === 0) { return false; } else if (($style.display === 'block' || $style.display === 'inline-block') && $style.height === '0px' && $style.overflow === 'hidden') { return false; } else { return $style.position === 'fixed' || isVisible(el.parentNode); } } } setInterval(function(){ var j=0; var elements = document.querySelectorAll('.carousel__control--forward'); for(i=(elements.length - 1);i>-1;i--) { if(isVisible(elements[i])) j=i; } elements[j].click(); },60000); </script> by Matt Sephton Mon, 12 Jun 2023 00:00:00 +0000 https://blog.gingerbeardman.com/2023/06/12/five-interesting-facts-about-the-design-of-the-original-playstation/ https://blog.gingerbeardman.com/2023/06/12/five-interesting-facts-about-the-design-of-the-original-playstation/