diff --git a/src/CodeSlide.js b/src/CodeSlide.js
index 480729c..98de9f3 100644
--- a/src/CodeSlide.js
+++ b/src/CodeSlide.js
@@ -5,6 +5,7 @@ const {Slide} = require('spectacle');
 const CodeSlideTitle = require('./CodeSlideTitle');
 const CodeSlideNote = require('./CodeSlideNote');
 const CodeSlideImage = require('./CodeSlideImage');
+const CodeSlideControlHelpers = require('./CodeSlideControlHelpers');
 
 const clamp = require('lodash.clamp');
 const padStart = require('lodash.padstart');
@@ -188,7 +189,7 @@ class CodeSlide extends React.Component {
   }
 
   render() {
-    const {code, lang, ranges, color, bgColor, notes, showLineNumbers, ...rest} = this.props;
+    const {code, lang, ranges, color, bgColor, notes, showLineNumbers, withControlHelpers, ...rest} = this.props;
     const {active} = this.state;
 
     const range = ranges[active] || {};
@@ -217,12 +218,14 @@ class CodeSlide extends React.Component {
         {range.title && <CodeSlideTitle>{range.title}</CodeSlideTitle>}
 
         <pre ref="container" style={newStyle}>
-          <code style={{ display: "inline-block", textAlign: "left" }}>{lines}</code>
+          <code style={{ display: "inline-block", textAlign: "left", width: '100%' }}>{lines}</code>
         </pre>
 
         {range.note && <CodeSlideNote>{range.note}</CodeSlideNote>}
 
         {range.image && <CodeSlideImage src={range.image}/>}
+
+        {withControlHelpers && <CodeSlideControlHelpers hasNextRange={active < ranges.length - 1} pristine={active === 0} />}
       </Slide>
     );
   }
diff --git a/src/CodeSlideControlHelpers.js b/src/CodeSlideControlHelpers.js
new file mode 100644
index 0000000..344f33a
--- /dev/null
+++ b/src/CodeSlideControlHelpers.js
@@ -0,0 +1,97 @@
+const React = require('react');
+
+const blinkAnimation = 'code-slide-control-helpers-blink';
+const shakeAnimation = 'code-slide-control-helpers-shake';
+
+const getContainerTransform = (extraTransform = '') => `translate(-100%, -100%) ${extraTransform}`
+
+const styles = {
+  container: {
+    position: 'fixed',
+    bottom: '-15%',
+    transform: getContainerTransform()
+  },
+  controlKey: {
+    height: '50px',
+    width: '50px',
+    backgroundColor: 'white',
+    color: 'black',
+    margin: '15px 0',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '8px',
+    border: 'solid 1px rgba(0, 0, 0, 0.4)',
+    opacity: 0.3
+  },
+  controlKeyActive: {
+    animation: `2.5s ease-in-out infinite alternate ${blinkAnimation} `
+  },
+  containerPristine: {
+    animation: `2.5s ease-in-out infinite 1s alternate ${shakeAnimation}`
+  }
+};
+
+class CodeSlideControlHelpers extends React.Component {
+  render() {
+    const { hasNextRange, pristine } = this.props;
+    return (
+      <div style={{position: 'relative'}}>
+        <div style={{position: 'absolute', left: '99%'}}>
+          <div 
+              style={{
+                ...styles.container, 
+                ...pristine ? styles.containerPristine : {}
+              }}
+          >
+            <style>{`
+              @keyframes ${blinkAnimation} {
+                0%, 35% {
+                  opacity: 1;
+                }
+                50% {
+                  opacity: 0.5;
+                }
+                65%, 100% {
+                  opacity: 1;
+                }
+              }
+              @keyframes ${shakeAnimation} {
+                0%, 40% {
+                  transform: ${getContainerTransform()};
+                }
+                45% {
+                  transform: ${getContainerTransform('translateX(3px)')};
+                }
+                50% {
+                  transform: ${getContainerTransform('translateX(-5px)')};
+                }
+                55% {
+                  transform: ${getContainerTransform('translateX(4px)')};
+                }
+                60%, 100% {
+                  transform: ${getContainerTransform()};
+                }
+              }
+            `}</style>
+            <div style={styles.controls}>
+              <div style={styles.controlKey}>
+                ↑
+              </div>
+              <div
+                style={{
+                  ...styles.controlKey,
+                  ...hasNextRange ? styles.controlKeyActive : {},
+                }}
+              >
+                ↓
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+module.exports = CodeSlideControlHelpers;