CINXE.COM
Yotam Mann
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <link rel="icon" type="image/png" sizes="174x174" href="images/favicon.png"> <script type="text/javascript" src="scripts/prefixfree.min.js"></script> <script type="text/javascript" src="scripts/src/videohover.js"></script> <link rel="stylesheet" type="text/css" href="style/default.css"> <meta name="description" content="info on Yotam Mann"> <title>Yotam Mann</title> </head> <body> <div id='content'> <link rel="stylesheet" type="text/css" href="style/topbar.css"> <div id="topbar"> <a href="//yotammann.info"> <div id="name"> <span>Y</span> <span>O</span> <span>T</span> <span>A</span> <span>M</span> <span></span> <span>M</span> <span>A</span> <span>N</span> <span>N</span> </div> </a> <a href="/about"> <div id="info"> <span>I</span> <span>N</span> <span>F</span> <span>O</span> </div> </a> </div> <link rel="stylesheet" type="text/css" href="style/index.css" /> <div id="tiles"> <div class="tile"> <div id="inner"> <div id="image"> <video playsinline="" muted="" loop="" id="still" poster="images/animated/holly-plus.mp4.jpg" src="images/animated/holly-plus.mp4"></video> </div> <a href="/holly-plus"></a> </div> <div id="title"> Holly+ </div> </div> <div class="tile"> <div id="inner"> <div id="image"> <video playsinline="" muted="" loop="" id="still" poster="images/animated/gan-gould.mp4.jpg" src="images/animated/gan-gould.mp4"></video> </div> <a href="/gan-style"></a> </div> <div id="title"> gan.style </div> </div> <div class="tile"> <div id="inner"> <div id="image"> <video playsinline="" muted="" loop="" id="still" poster="images/animated/MorphClipBigKnobSpin.mp4.jpg" src="images/animated/MorphClipBigKnobSpin.mp4"></video> </div> <a href="/hardware"></a> </div> <div id="title"> Realtime Timbre-transfer </div> </div> <div class="tile"> <div id="inner"> <div id="image"> <video playsinline="" muted="" loop="" id="still" poster="images/animated/heardsounds.mp4.jpg" src="images/animated/heardsounds.mp4"></video> </div> <a href="/heardsounds"></a> </div> <div id="title"> Never Before Heard Sounds </div> </div> <div class="tile"> <div id="inner"> <div id="image"> <video playsinline="" muted="" loop="" id="still" poster="images/animated/magenta-studio-crop.mp4.jpg" src="images/animated/magenta-studio-crop.mp4"></video> </div> <a href="/magentastudio"></a> </div> <div id="title"> Magenta Studio </div> </div> <div class="tile"> <div id="inner"> <div id="image"> <video playsinline="" muted="" loop="" id="still" poster="images/animated/dot_piano_trim.mp4.jpg" src="images/animated/dot_piano_trim.mp4"></video> </div> <a href="/dotpiano"></a> </div> <div id="title"> dot piano </div> </div> <div class="tile"> <div id="inner"> <div id="image"> <video playsinline="" muted="" loop="" id="still" poster="images/animated/aiexperiments.mp4.jpg" src="images/animated/aiexperiments.mp4"></video> </div> <a href="/aiexperiments"></a> </div> <div id="title"> AI Experiments </div> </div> <div class="tile"> <div id="inner"> <div id="image"> <video playsinline="" muted="" loop="" id="still" poster="images/animated/arc.mp4.jpg" src="images/animated/arc.mp4"></video> </div> <a href="/arc"></a> </div> <div id="title"> ARC at SXSW </div> </div> <div class="tile"> <div id="inner"> <div id="image"> <video playsinline="" muted="" loop="" id="still" poster="images/animated/musiclab.mp4.jpg" src="images/animated/musiclab.mp4"></video> </div> <a href="/musiclab"></a> </div> <div id="title"> Chrome Music Lab </div> </div> <div class="tile"> <div id="inner"> <div id="image"> <video playsinline="" muted="" loop="" id="still" poster="images/animated/delqa.mp4.jpg" src="images/animated/delqa.mp4"></video> </div> <a href="/delqa"></a> </div> <div id="title"> Delqa </div> </div> <div class="tile"> <div id="inner"> <div id="image"> <video playsinline="" muted="" loop="" id="still" poster="images/animated/jazzcomputer.mp4.jpg" src="images/animated/jazzcomputer.mp4"></video> </div> <a href="/jazz.computer"></a> </div> <div id="title"> Jazz.Computer </div> </div> <div class="tile"> <div id="inner"> <div id="image"> <video playsinline="" muted="" loop="" id="still" poster="images/animated/scrollometer.mp4.jpg" src="images/animated/scrollometer.mp4"></video> </div> <a href="/scrollometer"></a> </div> <div id="title"> scroll-o-meter </div> </div> <div class="tile"> <div id="inner"> <div id="image"> <video playsinline="" muted="" loop="" id="still" poster="images/animated/tonejs.mp4.jpg" src="images/animated/tonejs.mp4"></video> </div> <a href="/tone"></a> </div> <div id="title"> Tone.js </div> </div> <div class="tile"> <div id="inner"> <div id="image"> <video playsinline="" muted="" loop="" id="still" poster="images/animated/echo.mp4.jpg" src="images/animated/echo.mp4"></video> </div> <a href="/echo"></a> </div> <div id="title"> echo </div> </div> </div> <script type="text/javascript"> //make the tiles appear when the page is loaded // document.querySelectorAll('.tile').forEach(function(tile, i){ // // var imageContainer = tile.querySelector('#image') // var videoElement = tile.querySelector('video'); // videoElement.addEventListener('canplaythrough', function(){ // console.log('yup') // }) // if (videoElement){ // tile.addEventListener('mouseenter', function(){ // videoElement.play(); // }); // tile.addEventListener('mouseleave', function(){ // videoElement.pause(); // }); // } // }) // //forward previous # pages // if (window.location.hash.length){ // // get the content after the #/ // var page = window.location.hash.substr(2) // //clear the hash // if(window.history.pushState) { // window.history.pushState('', '/', window.location.pathname) // } else { // window.location.hash = ''; // } // // go to the page // window.location.pathname = page // } </script> </div> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-30350128-1', 'auto'); ga('send', 'pageview'); </script> </body> </html>