Remove staircase effects for larger time units.

package-lock.json

@@ -9066,6 +9066,14 @@
         "prop-types": "15.5.10"
       }
     },
+    "react-fontawesome": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/react-fontawesome/-/react-fontawesome-1.6.1.tgz",
+      "integrity": "sha1-7dzhfn3HMaoJ/UoYZoimF5OhbFw=",
+      "requires": {
+        "prop-types": "15.5.10"
+      }
+    },
     "react-helmet": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-5.1.3.tgz",
@@ -11081,6 +11089,11 @@
         "minimalistic-assert": "1.0.0"
       }
     },
+    "webfontloader": {
+      "version": "1.6.28",
+      "resolved": "https://registry.npmjs.org/webfontloader/-/webfontloader-1.6.28.tgz",
+      "integrity": "sha1-23hhKSU8tujq5UwvsF+HCvZnW64="
+    },
     "webpack": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-3.4.1.tgz",

src/Countdown.jsx

@@ -24,7 +24,7 @@ export default class Countdown extends React.Component {
 
   componentDidMount() {
     this.tick();
-    this.interval = setInterval(this.tick.bind(this), 1000);
+    this.interval = setInterval(this.tick.bind(this), 100);
   }
 
   componentWillUnmount() {
@@ -49,10 +49,13 @@ export default class Countdown extends React.Component {
 
     const durationMoment = moment.duration(duration);
 
-    const days = durationMoment.days();
-    const hours = durationMoment.hours();
-    const minutes = durationMoment.minutes();
-    const seconds = durationMoment.seconds();
+    const milliseconds = durationMoment.asMilliseconds();
+    const seconds = (milliseconds / 1000) % 60;
+    const minutes = (milliseconds / (60 * 1000)) % 60;
+    const hours = (milliseconds / (60 * 60 * 1000)) % 24;
+    const days = (milliseconds / (24 * 60 * 60 * 1000));
+
+    console.log({ days, hours, minutes, seconds });
 
     const size = 160; // @HACK
 
@@ -61,7 +64,7 @@ export default class Countdown extends React.Component {
       <div className={style.countdown}>
         <ProgressCircle size={size} max={3} progress={days} stroke="rgb(76,114,163)">
           <DigitBlock suffix="d">
-            {days.toLocaleString(locale, {
+            {Math.floor(days).toLocaleString(locale, {
               minimumIntegerDigits,
               useGrouping,
             })}
@@ -69,7 +72,7 @@ export default class Countdown extends React.Component {
         </ProgressCircle>
         <ProgressCircle size={size} max={24} progress={hours} stroke="rgb(60, 144, 60)">
           <DigitBlock suffix="h">
-            {hours.toLocaleString(locale, {
+            {Math.floor(hours).toLocaleString(locale, {
               minimumIntegerDigits,
               useGrouping,
             })}
@@ -77,7 +80,7 @@ export default class Countdown extends React.Component {
         </ProgressCircle>
         <ProgressCircle size={size} max={60} progress={minutes} stroke="rgb(160, 154, 40)">
           <DigitBlock suffix="m">
-            {minutes.toLocaleString(locale, {
+            {Math.floor(minutes).toLocaleString(locale, {
               minimumIntegerDigits,
               useGrouping,
             })}
@@ -85,7 +88,7 @@ export default class Countdown extends React.Component {
         </ProgressCircle>
         <ProgressCircle size={size} max={60} progress={seconds} stroke="rgb(193,63,88)">
           <DigitBlock suffix="s">
-            {durationMoment.seconds().toLocaleString(locale, {
+            {Math.floor(seconds).toLocaleString(locale, {
               minimumIntegerDigits,
               useGrouping,
             })}

src/DigitBlock.sass

@@ -7,4 +7,4 @@
     font-size: 0.5em
     text-transform: uppercase
     font-weight: bold
-    color: #888
+    color: #888

src/ProgressCircle.sass

@@ -5,7 +5,7 @@
   top: 0
 
 .progressValue
-  transition: stroke-dashoffset 1s linear
+  transition: stroke-dashoffset 0.15s linear
 
 .progressCircleContainer
   position: relative