diff --git a/hotfloat.coffee b/hotfloat.coffee
new file mode 100644
index 0000000..e9dd980
--- /dev/null
+++ b/hotfloat.coffee
@@ -0,0 +1,48 @@
+class Dashing.Hotfloat extends Dashing.Widget
+  @accessor 'current', Dashing.AnimatedValue
+
+  @accessor 'difference', ->
+    if @get('last')
+      last = parseFloat(@get('last'))
+      current = parseFloat(@get('current'))
+      if last != 0
+        diff = Math.round(((current - last)) * 100) / 100
+        "#{diff}"
+    else
+      ""
+
+  @accessor 'arrow', ->
+    if @get('last')
+      if parseFloat(@get('current')) > parseFloat(@get('last')) then 'icon-arrow-up' else 'icon-arrow-down'
+
+  onData: (data) ->
+    if data.status
+      # clear existing "status-*" classes
+      $(@get('node')).attr 'class', (i,c) ->
+        c.replace /\bstatus-\S+/g, ''
+      # add new class
+      $(@get('node')).addClass "status-#{data.status}"
+
+    node = $(@node)
+    current = parseFloat data.current
+    cool = parseFloat node.data "cool"
+    warm = parseFloat node.data "warm"
+    if warm >= cool
+      level = switch
+        when current <= cool then 0
+        when current >= warm then 4
+        else 
+          bucketSize = (warm - cool) / 3 # Total # of colours in middle
+          Math.ceil (current - cool) / bucketSize
+    else
+      level = switch
+        when current >= cool then 0
+        when current <= warm then 4
+        else 
+          bucketSize = (cool - warm ) / 3 # Total # of colours in middle
+          Math.ceil (cool - current) / bucketSize
+  
+    backgroundClass = "hotness#{level}"
+    lastClass = @get "lastClass"
+    node.toggleClass "#{lastClass} #{backgroundClass}"
+    @set "lastClass", backgroundClass
\ No newline at end of file
diff --git a/hotfloat.html b/hotfloat.html
new file mode 100644
index 0000000..c82e5f4
--- /dev/null
+++ b/hotfloat.html
@@ -0,0 +1,11 @@
+<h1 class="title" data-bind="title"></h1>
+
+<h2 class="value" data-bind="current | shortenedNumber | prepend prefix | append suffix"></h2>
+
+<p class="change-rate">
+  <i data-bind-class="arrow"></i><span data-bind="difference"></span>
+</p>
+
+<p class="more-info" data-bind="moreinfo"></p>
+
+<p class="updated-at" data-bind="updatedAtMessage"></p>
diff --git a/hotfloat.scss b/hotfloat.scss
new file mode 100644
index 0000000..d4d6fae
--- /dev/null
+++ b/hotfloat.scss
@@ -0,0 +1,61 @@
+// ----------------------------------------------------------------------------
+// Mixins
+// ----------------------------------------------------------------------------
+@mixin transition($transition-property, $transition-time, $method) {
+  -webkit-transition: $transition-property $transition-time $method;
+  -moz-transition: $transition-property $transition-time $method;
+  -o-transition: $transition-property $transition-time $method;
+  transition: $transition-property $transition-time $method;
+}
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #47bbb3;
+$value-color:       #fff;
+$title-color:       rgba(255, 255, 255, 0.7);
+$moreinfo-color:    rgba(255, 255, 255, 0.7);
+$updated-at-color: rgba(0, 0, 0, 0.3);
+
+// ----------------------------------------------------------------------------
+// Widget-hotfloat styles
+// ----------------------------------------------------------------------------
+.widget-hotfloat {
+
+  background-color: $background-color;
+
+  .title {
+    color: $title-color;
+  }
+
+  .value {
+    color: $value-color;
+  }
+
+  .change-rate {
+    font-weight: 500;
+    font-size: 30px;
+    color: $value-color;
+  }
+
+  .more-info {
+    color: $moreinfo-color;
+  }
+
+  .updated-at {
+    color: $updated-at-color;
+  }
+
+}
+
+.hotness0 { background-color: #00C176; }
+.hotness1 { background-color: #88C100; }
+.hotness2 { background-color: #FABE28; }
+.hotness3 { background-color: #FF8A00; }
+.hotness4 { background-color: #FF003C; }
+
+// // More colour-blind friendly palette
+// .hotness0 { background-color: #046D8B; }
+// .hotness1 { background-color: #309292; }
+// .hotness2 { background-color: #2FB8AC; }
+// .hotness3 { background-color: #93A42A; }
+// .hotness4 { background-color: #ECBE13; }
\ No newline at end of file