feat(benchmarks): animate progress bars and add scroll-triggered counter

src/components/BenchmarkInfo/index.jsx

@@ -1,31 +1,112 @@
-import React from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import styles from './styles.module.css'
 import Heading from '@theme/Heading'
 import Link from '@docusaurus/Link'
 
-function BenchmarkInfo({ name, test: testFile, repository, req, progressValue }) {
+function useInView(threshold = 0.3) {
+  const ref = useRef(null)
+  const [inView, setInView] = useState(false)
+
+  useEffect(() => {
+    if (!ref.current || inView) {
+      return
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setInView(true)
+          observer.disconnect()
+        }
+      },
+      { threshold },
+    )
+
+    observer.observe(ref.current)
+
+    return () => observer.disconnect()
+  }, [inView, threshold])
+
+  return [ref, inView]
+}
+
+// Runs a single 0 -> 1 ease-out animation, shared by both the counter and
+// the progress bar so they move in perfect lockstep instead of drifting
+// apart as two independent rAF loops.
+function useEasedProgress(active, duration = 1200) {
+  const [eased, setEased] = useState(0)
+  const frameRef = useRef(null)
+
+  useEffect(() => {
+    if (!active) {
+      return
+    }
+
+    // Respect users who asked the OS/browser for less motion.
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      setEased(1)
+      return
+    }
+
+    const startTime = performance.now()
+
+    function tick(now) {
+      const progress = Math.min((now - startTime) / duration, 1)
+      setEased(1 - (1 - progress) ** 3) // ease-out cubic
+
+      if (progress < 1) {
+        frameRef.current = requestAnimationFrame(tick)
+      }
+    }
+
+    frameRef.current = requestAnimationFrame(tick)
+
+    return () => cancelAnimationFrame(frameRef.current)
+  }, [active, duration])
+
+  return eased
+}
+
+function BenchmarkInfo({ name, test: testFile, repository, req, progressValue, rank }) {
+  const [boxRef, inView] = useInView()
+  const eased = useEasedProgress(inView)
+  const animatedReq = req * eased
+  const animatedProgress = progressValue * eased
+  const isFastify = name === 'Fastify'
+
   return (
-    <div className={`${styles.box} shadow--md`}>
+    <div ref={boxRef} className={`${styles.box} ${isFastify ? styles.boxFastify : ''}`}>
+      {rank && <span className={styles.rank}>#{rank}</span>}
       <div className={styles.level}>
         <div>
           <Link to={testFile}>
-            <Heading as={'h2'}>{name}</Heading>
+            <Heading as={'h2'} className={styles.heading}>
+              {name}
+            </Heading>
           </Link>
         </div>
         <div>
-          <Link className="header-github-link" to={repository} />
+          <Link className="header-github-link" to={repository} aria-label={`${name} repository on GitHub`} />
         </div>
       </div>
-      <p>{Math.round(req) + ' req/sec'}</p>
-      <progress className={`${styles.progress} ${specialColor(name)}`} value={progressValue} max="1">
-        {progressValue * 100 + '%'}
-      </progress>
+      <p className={styles.reqLine}>
+        <span className={styles.reqNumber}>{Math.round(animatedReq)}</span>
+        <span className={styles.reqUnit}>req/sec</span>
+      </p>
+      <div
+        className={styles.progressTrack}
+        role="progressbar"
+        aria-valuenow={Math.round(animatedProgress * 100)}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-label={`${name}: ${Math.round(animatedProgress * 100)}% relative to the fastest framework`}>
+        <div
+          className={`${styles.progressFill} ${isFastify ? styles.progressFillFastify : styles.progressFillOthers}`}
+          style={{ width: `${animatedProgress * 100}%` }}
+        />
+      </div>
     </div>
   )
 }
 
-function specialColor(name) {
-  return name === 'Fastify' ? styles.progressFastify : styles.progressOthers
-}
-
 export default BenchmarkInfo

src/components/BenchmarkInfo/styles.module.css

@@ -1,41 +1,109 @@
 .box {
+  position: relative;
   background-color: var(--ifm-card-background-color);
-  border-radius: 6px;
+  border: 1px solid transparent;
+  border-radius: 10px;
   color: #4a4a4a;
   display: block;
-  padding: 1.25rem;
+  padding: 1.5rem;
   margin: 1.25rem;
+  overflow: hidden;
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 6%),
+    0 4px 10px rgb(0 0 0 / 5%);
+  transition:
+    transform 200ms ease,
+    border-color 200ms ease,
+    box-shadow 200ms ease;
+}
+
+.box:hover {
+  transform: translateY(-3px);
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 12px 24px -12px rgb(0 0 0 / 25%);
 }
 
 [data-theme='dark'] .box {
   background-color: var(--ifm-card-background-color);
-  border-radius: 6px;
   color: #f9f6f6;
-  display: block;
-  padding: 1.25rem;
-  margin: 1.25rem;
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 30%),
+    0 4px 10px rgb(0 0 0 / 25%);
+}
+
+[data-theme='dark'] .box:hover {
+  box-shadow: 0 12px 24px -12px rgb(0 0 0 / 60%);
+}
+
+.boxFastify {
+  border-color: color-mix(in srgb, var(--ifm-color-success) 95%, transparent);
+}
+
+.rank {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  color: var(--ifm-color-emphasis-500, #999);
+  font-variant-numeric: tabular-nums;
+}
+
+.heading {
+  margin-bottom: 0;
 }
 
 .level {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding-right: 2rem;
 }
 
-.progress {
-  border: none;
+.reqLine {
+  display: flex;
+  align-items: baseline;
+  gap: 0.4rem;
+  margin: 0.5rem 0 0.75rem;
+}
+
+.reqNumber {
+  font-size: 1.5rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.reqUnit {
+  font-size: 0.875rem;
+  opacity: 0.65;
+}
+
+.progressTrack {
   border-radius: 9999px;
   display: block;
-  height: 1rem;
+  height: 0.625rem;
   overflow: hidden;
-  padding: 0;
   width: 100%;
+  background: rgb(0 0 0 / 10%);
+  box-shadow: inset 0 1px 2px rgb(0 0 0 / 15%);
+}
+
+[data-theme='dark'] .progressTrack {
+  background: rgb(255 255 255 / 8%);
+}
+
+.progressFill {
+  height: 100%;
+  border-radius: 9999px;
 }
 
-.progressFastify::-webkit-progress-value {
-  background: var(--ifm-color-success);
+.progressFillOthers {
+  background: var(--ifm-color-primary);
 }
 
-.progressOthers::-webkit-progress-value {
-  background: var(--ifm-color-info-darker);
+.progressFillFastify {
+  background: var(--ifm-color-primary);
+  box-shadow: 0 0 8px color-mix(in srgb, var(--ifm-color-primary) 50%, transparent);
 }