Race

src/App.js

@@ -5,6 +5,7 @@ import Visualization from './Visualization';
 import HackerTyper from './HackerTyper';
 import FidgetSpinner from './FidgetSpinner';
 import FlappyBrick from './flappy-brick/FlappyBrick';
+import Race from './Race';
 import './App.css';
 
 class App extends Component {
@@ -113,6 +114,12 @@ class App extends Component {
     return <FlappyBrick speed={this.getAverageGamma()} />;
   };
 
+  renderRace = _ => {
+    const { data } = this.state;
+    document.body.style = 'background: white;';
+    return <Race data={data} speed={this.getAverageAlpha()} />;
+  };
+
   renderDemoType = _ => {
     const { demoType } = this.state;
     switch (demoType) {
@@ -122,6 +129,8 @@ class App extends Component {
         return this.renderFidgetSpinner();
       case 'flappybrick':
         return this.renderFlappyBrick();
+      case 'race':
+        return this.renderRace();
       default:
         return this.renderVisualization();
     }
@@ -164,6 +173,12 @@ class App extends Component {
           >
             <div className="flappybrick">Flappy Brick</div>
           </li>
+          <li
+            className={`${demoType === 'race' ? 'active' : ''}`}
+            onClick={this.handleDemoTypeChange}
+          >
+            <div className="race">Race</div>
+          </li>
           <li style={{ float: `right`, display: `flex` }}>
             <div onClick={this.subscribeToMuse} disabled={status}>
               Connect

src/Race.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import styled, { css, keyframes } from 'styled-components';
+import c1 from './chow.jpg';
+import c2 from './kiser2.jpg';
+import rd from './road.jpg';
+
+const movement = keyframes`
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(100vw);
+  }
+`;
+
+const animation = props =>
+  css`
+    ${movement} ${props.speed}s linear infinite;
+  `;
+
+const Translate = styled.div`
+  display: inline-block;
+  animation: ${props => animation(props)};
+  padding: 2rem 1rem;
+  font-size: 1.2rem;
+  height: auto;
+  align-self: flex-end;
+`;
+
+const Kachow = styled.img`
+  height: 200px;
+  width: 300px;
+`;
+
+const RaceTrack = styled.div`
+  display: flex;
+  background-image: url(${rd});
+  flex-direction: column-reverse:
+  alight-items: flex-end;
+  width: 100vw;
+  height: 720px;
+`;
+
+function Race(props) {
+  return (
+    <RaceTrack>
+      <Translate speed={props.speed}>
+        <Kachow src={c1} />
+      </Translate>
+      <Translate speed={20}>
+        <Kachow src={c2} />
+      </Translate>
+    </RaceTrack>
+  );
+}
+
+export default Race;