Remove staircase effects for larger time units.

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