Small moves, big feelings: microanimations that everyone can enjoy

import {useState, type CSSProperties} from 'react'
import {PauseButton} from './PauseButton'
import {useReducedMotion} from './useReducedMotion'

/** Position, size and drift for each bubble. Varied durations and delays keep them out of sync. */
const BUBBLES = [
  {
    left: '8%',
    top: '55%',
    size: 5,
    x: '1.5rem',
    y: '-2.5rem',
    duration: 9,
    delay: 0,
    color: 'var(--color-shoe-blue)',
  },
  {
    left: '22%',
    top: '12%',
    size: 3,
    x: '-1rem',
    y: '2rem',
    duration: 11,
    delay: -3,
    color: 'var(--color-cyber)',
  },
  {
    left: '45%',
    top: '60%',
    size: 7,
    x: '2rem',
    y: '-1.5rem',
    duration: 13,
    delay: -6,
    color: 'var(--color-periwinkle)',
  },
  {
    left: '68%',
    top: '18%',
    size: 4,
    x: '-1.5rem',
    y: '2.5rem',
    duration: 10,
    delay: -2,
    color: 'var(--color-shoe-blue)',
  },
  {
    left: '85%',
    top: '58%',
    size: 6,
    x: '-2rem',
    y: '-2rem',
    duration: 12,
    delay: -8,
    color: 'var(--color-cyber)',
  },
]

/**
 * Decorative only, so it follows three rules:
 *  - `aria-hidden` on the bubbles: screen readers skip decoration
 *  - `pointer-events-none`: a bubble can never sit on top of something you want to click
 *  - `motion-safe:` on the animation: with reduce motion on, the bubbles simply stay still
 *
 * The motion is plain CSS. React's only job is the pause button: it flips `animation-play-state`,
 * so a paused bubble freezes where it is instead of jumping back to the start.
 */
export default function FloatingBubbles() {
  const [paused, setPaused] = useState(false)
  const reduced = useReducedMotion()

  return (
    <div className="relative flex min-h-56 flex-col items-center justify-center gap-4 overflow-hidden rounded-2xl border-2 border-fg bg-surface p-6 text-center">
      <div aria-hidden="true" className="pointer-events-none absolute inset-0">
        {BUBBLES.map((b, i) => (
          <span
            key={i}
            className="absolute rounded-full opacity-70 motion-safe:animate-drift"
            style={
              {
                left: b.left,
                top: b.top,
                width: `${b.size}rem`,
                height: `${b.size}rem`,
                background: b.color,
                animationDuration: `${b.duration}s`,
                animationDelay: `${b.delay}s`,
                animationPlayState: paused ? 'paused' : 'running',
                '--drift-x': b.x,
                '--drift-y': b.y,
              } as CSSProperties
            }
          />
        ))}
      </div>

      {/* A solid card, so text contrast never depends on which bubble happens to drift behind it. */}
      <p className="relative max-w-xs rounded-xl border-2 border-fg bg-bg px-4 py-3 font-display text-lg leading-snug font-extrabold">
        These bubbles are just for fun. Screen readers skip them, and they never get in the way.
      </p>
      {/* Nothing moves with reduce motion on, so there's nothing to pause. */}
      {reduced ? (
        <p className="relative rounded-lg bg-bg px-3 py-1 text-sm text-muted">
          Reduce motion is on, so the bubbles are staying still.
        </p>
      ) : (
        <PauseButton paused={paused} onToggle={() => setPaused((p) => !p)} label="bubbles" />
      )}
    </div>
  )
}

import {useEffect, useState} from 'react'
import {PauseButton} from './PauseButton'

const pad = (n: number) => String(n).padStart(2, '0')

function minutesText(minutes: number) {
  if (minutes === 0) return 'You’ve been on this page for less than a minute.'
  return `You’ve been on this page for ${minutes} minute${minutes === 1 ? '' : 's'}.`
}

/**
 * A "time since you arrived" counter. Unlike the bubbles it carries information, so:
 *  - the flipping digits are `aria-hidden` (a screen reader would read "0 0 colon 0 1…")
 *  - a visually hidden live region says the same thing in words, but only once a minute,
 *    otherwise it would interrupt every second
 *  - the flip is `motion-safe:`, so with reduce motion on the digits just change
 *  - it updates on its own forever, so it gets a pause button (WCAG 2.2.2)
 */
export default function TickingCounter() {
  const [start] = useState(() => Date.now())
  const [now, setNow] = useState(start)
  const [paused, setPaused] = useState(false)

  useEffect(() => {
    if (paused) return
    setNow(Date.now()) // catch up straight away after un-pausing
    const id = setInterval(() => setNow(Date.now()), 1000)
    // Cleanup runs on pause and when the island goes away; without it, timers pile up.
    return () => clearInterval(id)
  }, [paused])

  const elapsed = Math.floor((now - start) / 1000)
  const time = `${pad(Math.floor(elapsed / 3600))}:${pad(Math.floor(elapsed / 60) % 60)}:${pad(elapsed % 60)}`
  const minutes = Math.floor(elapsed / 60)

  return (
    <div className="flex flex-col items-center gap-4 rounded-2xl border-2 border-fg bg-surface p-6 text-center">
      <p className="font-display text-lg font-extrabold">Time since you opened this page</p>

      <div aria-hidden="true" className="flex gap-1 font-mono text-4xl font-bold [perspective:20rem]">
        {time.split('').map((char, i) =>
          char === ':' ? (
            <span key={i} className="px-0.5">
              :
            </span>
          ) : (
            <span
              // A new key when the digit changes makes React swap in a fresh element, which
              // replays the CSS flip. Unchanged digits keep their key and stay put.
              key={`${i}-${char}`}
              className="inline-block w-[1.3ch] rounded-lg border-2 border-fg bg-bg py-1 motion-safe:animate-flip"
            >
              {char}
            </span>
          ),
        )}
      </div>

      <p role="status" aria-live="polite" className="sr-only">
        {minutesText(minutes)}
      </p>

      <PauseButton paused={paused} onToggle={() => setPaused((p) => !p)} label="counter" />
    </div>
  )
}