-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1 lines (1 loc) · 3.66 KB
/
index.html
1
<head><title>Reviving the Dream of the 90s</title><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type"/><link href="https://unpkg.com/[email protected]/normalize.css" rel="stylesheet" type="text/css"/><link href="style.css" rel="stylesheet" type="text/css"/><meta property="og:title" content="Reviving the Dream of the 90s with WebGL"/><meta property="og:description" content="Recreating screensavers with modern web technology to bring back some of that exuberant 90s energy."/><meta property="og:image" content="https://billyroh.com/screensavers/assets/social-maze.jpg"/><meta property="og:image:width" content="2400"/><meta property="og:image:height" content="1260"/><meta property="og:url" content="https://billyroh.com/screensavers"/><meta property="og:type" content="website"/></head><body><div class="top-bar-wrapper"><div class="blue-bar"><div class="left-content"><div class="icon app-icon"><img src="./assets/paint-brush.ico"/></div><div class="title">Reviving the Dream of the 90s with WebGL</div></div><div class="right-content blue-bar-buttons"><div class="button"><div class="icon"><img src="./assets/minimize.svg"/></div></div><div class="button"><div class="icon"><img src="./assets/maximize.svg"/></div></div><div class="button"><div class="icon"><img src="./assets/close.svg"/></div></div></div></div><div class="action-bar"><div class="action"><span class="action-underline">F</span>ile</div><div class="action"><span class="action-underline">E</span>dit</div><div class="action"><span class="action-underline">V</span>iew</div></div></div><div class="viewport"><section><img class="header" src="./assets/header.png"/><p>The 90s were an exuberant time for the technology that we take for granted today. This is an attempt to bring back some of that energy by recreating 90s screensavers with WebGL and other modern web technologies.</p><p>Special thanks to <a href="https://twitter.com/visnup">Visnu Pitiyanuvath</a> for all his help with this.</p><div class="section-button-wrapper"><a class="button" href="https://github.com/billyroh/screensavers">View Source</a><a class="button" href="https://speakerdeck.com/billyroh/reviving-the-dream-of-the-90s-with-webgl">See Slides </a></div></section><section><a href="./pipes"><video src="./assets/pipes.mp4" autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline"></video></a><h3>Pipes</h3><p>On desktop, use WASD and your cursor to move and pan around. You can also change the colour palette.</p><a class="button" href="./pipes">View Pipes</a></section><section><a href="./maze"><video src="./assets/maze.mp4" autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline"></video></a><h3>Maze</h3><p>Get the authentic NYC experience by adding more rats with the buttons at the bottom.</p><a class="button" href="./maze">View Maze</a></section><section><a href="./matrix"><video src="./assets/matrix.mp4" autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline"></video></a><h3>The Matrix</h3><p>Try changing the language options, as well as the colour palette.</p><a class="button" href="./matrix">View the Matrix</a></section></div><div class="bottom-bar-wrapper"><div class="menu-bar-delineator"></div><div class="menu-bar"><div class="left-content"><div class="start-button button"><div class="icon"><img src="./assets/windows-logo.ico"/></div><span>Start</span></div><div class="menu-bar-item"><div class="icon"><img src="./assets/paint-brush.ico"/></div><span class="menu-bar-item-text">Reviving the Dream of the 90s with WebGL</span></div></div><div class="right-content"><div class="time"></div></div></div></div><script src="scripts.js"></script></body>