Build a cursor-following portrait with Flora and Codex

'use client';

import Image from 'next/image';
import { useEffect, useRef, useState } from 'react';
import styles from './interactive-portrait.module.css';

const poses = ['front', 'left', 'right', 'up', 'down', 'wink'] as const;
type Pose = (typeof poses)[number];

export function InteractivePortrait() {
  const portraitRef = useRef<HTMLButtonElement>(null);
  const [pose, setPose] = useState<Pose>('front');

  useEffect(() => {
    const portrait = portraitRef.current;
    if (!portrait) return;

    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
    const finePointer = window.matchMedia('(pointer: fine)');
    let visible = false;
    let desired: Pose = 'front';
    let candidate: Pose = 'front';
    let reacting = false;
    let frame = 0;
    let settleTimer: ReturnType<typeof setTimeout> | undefined;
    let reactionTimer: ReturnType<typeof setTimeout> | undefined;

    const show = (next: Pose) => {
      const image = portrait.querySelector<HTMLImageElement>(
        `[data-pose="${next}"]`,
      );
      // Keep the previous frame until the next one is ready to avoid flashes.
      if (image?.complete && image.naturalWidth > 0) setPose(next);
    };
    const look = (next: Pose) => {
      desired = next;
      if (reacting || candidate === next) return;
      candidate = next;
      clearTimeout(settleTimer);
      settleTimer = setTimeout(() => show(desired), 65);
    };
    const reset = () => {
      cancelAnimationFrame(frame);
      clearTimeout(settleTimer);
      clearTimeout(reactionTimer);
      reacting = false;
      desired = candidate = 'front';
      setPose('front');
    };
    const follow = (event: PointerEvent) => {
      if (
        !visible ||
        document.hidden ||
        reducedMotion.matches ||
        !finePointer.matches ||
        event.pointerType === 'touch'
      )
        return;
      cancelAnimationFrame(frame);
      frame = requestAnimationFrame(() => {
        const box = portrait.getBoundingClientRect();
        const dx = event.clientX - (box.left + box.width / 2);
        const dy = event.clientY - (box.top + box.height * 0.39);
        const x = Math.abs(dx);
        const y = Math.abs(dy);
        if (Math.hypot(dx, dy) > 380 || (x < 30 && y < 26)) {
          look('front');
          return;
        }
        // A little hysteresis keeps diagonal movement from flickering.
        const vertical = desired === 'up' || desired === 'down';
        if (y > Math.max(36, x * (vertical ? 0.82 : 1.12)))
          look(dy < 0 ? 'up' : 'down');
        else if (x > 40) look(dx < 0 ? 'left' : 'right');
        else look('front');
      });
    };
    const wink = () => {
      const image =
        portrait.querySelector<HTMLImageElement>('[data-pose="wink"]');
      if (!image?.complete || !image.naturalWidth) return;
      clearTimeout(settleTimer);
      clearTimeout(reactionTimer);
      reacting = true;
      show('wink');
      reactionTimer = setTimeout(() => {
        reacting = false;
        candidate = desired;
        show(desired);
      }, 900);
    };
    const onVisibilityChange = () => {
      if (document.hidden) reset();
    };
    const observer = new IntersectionObserver(([entry]) => {
      visible = entry.isIntersecting;
      if (!visible) reset();
    });

    observer.observe(portrait);
    portrait.addEventListener('click', wink);
    document.addEventListener('pointermove', follow, { passive: true });
    document.addEventListener('pointerleave', reset);
    document.addEventListener('visibilitychange', onVisibilityChange);
    reducedMotion.addEventListener('change', reset);
    finePointer.addEventListener('change', reset);

    return () => {
      observer.disconnect();
      cancelAnimationFrame(frame);
      clearTimeout(settleTimer);
      clearTimeout(reactionTimer);
      portrait.removeEventListener('click', wink);
      document.removeEventListener('pointermove', follow);
      document.removeEventListener('pointerleave', reset);
      document.removeEventListener('visibilitychange', onVisibilityChange);
      reducedMotion.removeEventListener('change', reset);
      finePointer.removeEventListener('change', reset);
    };
  }, []);

  return (
    <button
      ref={portraitRef}
      className={styles.portrait}
      type="button"
      aria-label="Make Claire wink"
      data-facing={pose}
    >
      {poses.map((frame) => (
        <Image
          key={frame}
          src={`/portraits/claire/${frame}.png`}
          alt=""
          aria-hidden="true"
          width={2304}
          height={1728}
          sizes="192px"
          loading="eager"
          fetchPriority={frame === 'front' ? 'high' : 'low'}
          draggable={false}
          data-pose={frame}
          className={frame === pose ? styles.visible : undefined}
        />
      ))}
    </button>
  );
}

.portrait {
  position: relative;
  display: block;
  width: 192px;
  aspect-ratio: 4 / 3;
  /* Offset the transparent inset so the portrait itself aligns with the text. */
  margin: -0.375rem 0 0.75rem -1.5625rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  visibility: hidden;
  user-select: none;
  -webkit-user-drag: none;
}

.portrait img.visible {
  visibility: visible;
}

.portrait:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 5px;
  border-radius: 2px;
}