Edit on
<!-- Created by Bennett Feely. -->

<main>
  <h1>Spring Physics and Velocity.js</h1>
  <section>
    <span>[<div class="tension" contenteditable>500</div>, <div class="friction" contenteditable>20</div>]</span>
    <button>Run</button>
    <small>[tension, friction]</small></section>
  	<br>
    <div id="box"></div>
    <br>
  <pre><code>$element.velocity({
  "left": "500px"
}, 625, [<b id="code_tension">tension</b>, <b id="code_friction">friction</b>]);</code></pre>  
</main>
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,500,600,700);

$radius : .5rem;

body {
  font-family: "Source Code pro", monospace;
  background: whitesmoke;
}

h1 {
  text-transform: uppercase;
  font-size: 1.4rem;
  font-weight: 300;
}

main {
  width: 30rem;
  margin: 0 auto;
}

section {
  text-align: left;
  position: relative;
  display: inline-block;
  background: white;
  padding: .75rem 1rem;
  padding-right: 5rem;
  font-size: 2em;
  font-family: monospace;
  border-radius: .5rem;
  box-shadow: 0 .125rem lightgray;
  overflow: hidden;
}

small {
  display: block;
  font-size: .8rem;
  margin-top: 1em;
  padding-bottom: .25rem;
  transition: .3s;

  section:hover & {
    color: black;
  }
}

[contenteditable] {
  display: inline-block;
  text-align: center;
  min-width: 1em;
  border: 0;
  background: white;
  border-radius: $radius;
  transition: .3s;
  vertical-align: -10%;
  
  span:hover & {
    background: #ffa;
  }
  
  &:focus,
  section:hover &:focus {
    outline: 0;
    background: yellow;
    padding: 0 .25em;
  }
}

button {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
  background: lightgreen;
  padding: .25em .5em;
  border-top-right-radius: $radius;
  box-shadow: inset 0 -.125rem rgba(0,0,0,.1);
  transition: .4s;
  transform-origin: top right;
  
  &:hover {
    background: darken(lightgreen, 20%);
    transition: .2s;
  }
  &:active {
    transform: scale(1.1);
    transition: 0;
  }
  &:focus {
    outline: 0;
  }
}

#box {
  width: 100px;
  height: 100px;
  margin-top: 1em;
  transform-origin: 0 0;
  background: darkgray;
  border-radius: $radius;
  position: relative;
}

pre {
  display: inline-block;
  font-size: .9rem;
  text-align: left;
  background: rgba(black, .05);
  margin-top: 1rem;
  padding: 1.5rem 2rem;
  border-radius: $radius;
  box-shadow: inset 0 .125rem gainsboro;
}
View Compiled
var $box = $("#box");

$("button").click(spring);

function spring() {
  var tension = $(".tension").text(),
      friction = $(".friction").text();
  
  $box
    .velocity({
      left: "300px"  
    }, 625, [tension, friction])
    .velocity("reverse");
  
  $("#code_tension").text(tension);
  $("#code_friction").text(friction);
}
Rerun