@boyernick/standard-ui-react 0.1.1-canary.9 → 0.2.0

package/src/lifeline/lifeline-hover-image.tsx

@@ -0,0 +1,269 @@
+"use client"
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  type ReactNode,
+} from "react"
+import { clamp, snapToDevicePixel } from "./lifeline-utils"
+import type { LifelineEventImage } from "./types"
+
+/** Tweak these */
+const FOLLOW_EASE = 0.16
+const TILT_FACTOR = 0.14
+const TILT_MAX_DEG = 7
+const TILT_EASE = 0.1
+const CURSOR_OFFSET_X = 24
+const CURSOR_OFFSET_Y = 96
+
+interface LifelineHoverImageApi {
+  show: (image: LifelineEventImage) => void
+  hide: () => void
+}
+
+interface LifelineHoverImageProviderProps {
+  children: ReactNode
+  /** Warmed into the browser cache during idle so swaps are instant. */
+  preload?: LifelineEventImage[]
+}
+
+const LifelineHoverImageContext = createContext<LifelineHoverImageApi | null>(
+  null,
+)
+
+export function useLifelineHoverImage() {
+  return useContext(LifelineHoverImageContext)
+}
+
+/**
+ * A cursor-following image reveal. The floating element lives at the
+ * provider level — it must stay outside the transformed track, since
+ * position: fixed resolves against the nearest transformed ancestor.
+ */
+export function LifelineHoverImageProvider({
+  children,
+  preload,
+}: LifelineHoverImageProviderProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const imageRef = useRef<HTMLImageElement>(null)
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const state = useRef({
+    x: 0,
+    y: 0,
+    targetX: 0,
+    targetY: 0,
+    tilt: 0,
+    visible: false,
+    hoverCapable: false,
+    frame: 0,
+  })
+
+  useEffect(() => {
+    state.current.hoverCapable = window.matchMedia(
+      "(hover: hover) and (pointer: fine)",
+    ).matches
+
+    const onMouseMove = (event: MouseEvent) => {
+      state.current.targetX = event.clientX
+      state.current.targetY = event.clientY
+    }
+
+    window.addEventListener("mousemove", onMouseMove, { passive: true })
+    return () => {
+      window.removeEventListener("mousemove", onMouseMove)
+      cancelAnimationFrame(state.current.frame)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!preload?.length || !state.current.hoverCapable) return
+
+    const warm = () => {
+      preload.forEach(({ src }) => {
+        const image = new window.Image()
+        image.src = src
+      })
+    }
+
+    if (typeof window.requestIdleCallback === "function") {
+      const handle = window.requestIdleCallback(warm)
+      return () => window.cancelIdleCallback(handle)
+    }
+
+    const timeout = window.setTimeout(warm, 2000)
+    return () => window.clearTimeout(timeout)
+  }, [preload])
+
+  const step = useCallback(() => {
+    const s = state.current
+    const container = containerRef.current
+    if (!container) return
+
+    const dx = s.targetX - s.x
+    s.x += dx * FOLLOW_EASE
+    s.y += (s.targetY - s.y) * FOLLOW_EASE
+
+    const targetTilt = clamp(dx * TILT_FACTOR, -TILT_MAX_DEG, TILT_MAX_DEG)
+    s.tilt += (targetTilt - s.tilt) * TILT_EASE
+
+    // The ease is asymptotic — it never actually arrives, so the card
+    // rests on a fractional offset with a residual tilt and the browser
+    // resamples it soft. Land it: snap sub-threshold deltas to done.
+    if (
+      Math.abs(s.targetX - s.x) < 0.1 &&
+      Math.abs(s.targetY - s.y) < 0.1 &&
+      Math.abs(s.tilt) < 0.05
+    ) {
+      s.x = s.targetX
+      s.y = s.targetY
+      s.tilt = 0
+    }
+
+    const rotate = s.tilt === 0 ? "" : ` rotate(${s.tilt}deg)`
+    container.style.transform = `translate3d(${snapToDevicePixel(
+      s.x + CURSOR_OFFSET_X,
+    )}px, ${snapToDevicePixel(s.y - CURSOR_OFFSET_Y)}px, 0)${rotate}`
+
+    if (s.visible) {
+      s.frame = requestAnimationFrame(step)
+    }
+  }, [])
+
+  const api = useMemo<LifelineHoverImageApi>(
+    () => ({
+      show(image) {
+        const s = state.current
+        const container = containerRef.current
+        const img = imageRef.current
+        const video = videoRef.current
+        if (!s.hoverCapable || !container || !img) return
+
+        if (image.video && video) {
+          // Video takes over the card; the image element sits this one out.
+          img.style.display = "none"
+          video.style.display = "block"
+
+          const targetVideo = new URL(image.video, window.location.origin).href
+          if (video.src !== targetVideo) {
+            video.src = targetVideo
+            video.poster = image.src
+          }
+          video.play().catch(() => {
+            // Autoplay rejection just leaves the poster frame showing.
+          })
+
+          if (!s.visible) {
+            s.x = s.targetX
+            s.y = s.targetY
+            s.tilt = 0
+          }
+
+          s.visible = true
+          container.style.opacity = "1"
+          video.style.transform = "scale(1)"
+
+          cancelAnimationFrame(s.frame)
+          s.frame = requestAnimationFrame(step)
+          return
+        }
+
+        if (video) {
+          video.pause()
+          video.style.display = "none"
+        }
+        img.style.display = "block"
+
+        const targetSrc = new URL(image.src, window.location.origin).href
+
+        if (img.src !== targetSrc) {
+          // Kill the previous bitmap instantly — the browser would keep
+          // showing it until the new file decodes.
+          img.style.visibility = "hidden"
+          img.src = targetSrc
+          img.alt = image.alt
+
+          const reveal = () => {
+            // Only reveal if this image is still the requested one.
+            if (img.src === targetSrc) {
+              img.style.visibility = "visible"
+            }
+          }
+
+          if (img.complete) {
+            reveal()
+          } else {
+            img.decode().then(reveal, reveal)
+          }
+        } else {
+          img.style.visibility = "visible"
+        }
+
+        if (!s.visible) {
+          // Materialize at the cursor instead of flying in from the
+          // last resting point.
+          s.x = s.targetX
+          s.y = s.targetY
+          s.tilt = 0
+        }
+
+        s.visible = true
+        container.style.opacity = "1"
+        img.style.transform = "scale(1)"
+
+        cancelAnimationFrame(s.frame)
+        s.frame = requestAnimationFrame(step)
+      },
+      hide() {
+        const s = state.current
+        const container = containerRef.current
+        const img = imageRef.current
+        const video = videoRef.current
+        if (!container || !img) return
+
+        s.visible = false
+        container.style.opacity = "0"
+        img.style.transform = "scale(0.94)"
+        if (video) {
+          video.pause()
+          video.style.transform = "scale(0.94)"
+        }
+      },
+    }),
+    [step],
+  )
+
+  return (
+    <LifelineHoverImageContext.Provider value={api}>
+      {children}
+      <div
+        ref={containerRef}
+        aria-hidden="true"
+        className="pointer-events-none fixed left-0 top-0 z-[60] opacity-0 transition-opacity duration-200 ease-out will-change-transform"
+      >
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          ref={imageRef}
+          alt=""
+          className="w-[280px] scale-95 rounded-xl shadow-2xl ring-1 ring-border-primary transition-[transform,box-shadow] duration-200 ease-out"
+          decoding="async"
+        />
+        <video
+          ref={videoRef}
+          muted
+          loop
+          playsInline
+          preload="none"
+          // Landscape fills the same 280px card as images; portrait is
+          // capped by height instead, matching the floating cards'
+          // scale (180x320) so tall clips don't tower over the cursor.
+          className="max-h-[320px] w-auto max-w-[280px] scale-95 rounded-xl shadow-2xl ring-1 ring-border-primary transition-[transform,box-shadow] duration-200 ease-out"
+          style={{ display: "none" }}
+        />
+      </div>
+    </LifelineHoverImageContext.Provider>
+  )
+}

package/src/lifeline/lifeline-icons.tsx

@@ -0,0 +1,39 @@
+import type { SVGProps } from "react"
+
+type IconProps = SVGProps<SVGSVGElement>
+
+const iconProps = {
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round" as const,
+  strokeLinejoin: "round" as const,
+  "aria-hidden": true as const,
+}
+
+export const LifelineFilmIcon = ({
+  strokeWidth = 1.75,
+  ...props
+}: IconProps) => (
+  <svg {...iconProps} strokeWidth={strokeWidth} {...props}>
+    <rect width="18" height="18" x="3" y="3" rx="2" />
+    <path d="M7 3v18" />
+    <path d="M3 7.5h4" />
+    <path d="M3 12h18" />
+    <path d="M3 16.5h4" />
+    <path d="M17 3v18" />
+    <path d="M17 7.5h4" />
+    <path d="M17 16.5h4" />
+  </svg>
+)
+
+export const LifelineImageIcon = ({
+  strokeWidth = 1.75,
+  ...props
+}: IconProps) => (
+  <svg {...iconProps} strokeWidth={strokeWidth} {...props}>
+    <rect width="18" height="18" x="3" y="3" rx="2" />
+    <circle cx="9" cy="9" r="2" />
+    <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+  </svg>
+)

package/src/lifeline/lifeline-intro-timing.ts

@@ -0,0 +1,105 @@
+import { clamp } from "./lifeline-utils"
+
+/** Tweak these */
+export const LIFELINE_SLOW_YEARS = 5
+export const LIFELINE_SLOW_TIME_RATIO = 0.38
+export const LIFELINE_SLOW_MARKER_FADE_MS = 720
+export const LIFELINE_FAST_MARKER_FADE_MS = 280
+/** Set > 0 to override auto-calibrated ease power */
+export const LIFELINE_EASE_POWER = 0
+
+function smoothstep(value: number) {
+  const t = clamp(value, 0, 1)
+  return t * t * (3 - 2 * t)
+}
+
+export function getSlowTrackWidth(widths: number[]) {
+  return widths
+    .slice(0, LIFELINE_SLOW_YEARS)
+    .reduce((sum, width) => sum + width, 0)
+}
+
+export function getSlowTrackPortion(widths: number[]) {
+  const total = widths.reduce((sum, width) => sum + width, 0)
+  if (total <= 0) return 0
+  return getSlowTrackWidth(widths) / total
+}
+
+function getEasePower(widths: number[]) {
+  if (LIFELINE_EASE_POWER > 0) return LIFELINE_EASE_POWER
+
+  const slowPortion = getSlowTrackPortion(widths)
+  const softenedPivot = smoothstep(LIFELINE_SLOW_TIME_RATIO)
+
+  if (slowPortion <= 0 || softenedPivot <= 0 || softenedPivot >= 1) {
+    return 2.6
+  }
+
+  return Math.log(slowPortion) / Math.log(softenedPivot)
+}
+
+function softenedTime(elapsedMs: number, railMs: number) {
+  return smoothstep(elapsedMs / railMs)
+}
+
+export function trackProgressAtTime(
+  elapsedMs: number,
+  widths: number[],
+  railMs: number,
+) {
+  if (railMs <= 0) return 0
+
+  const t = softenedTime(elapsedMs, railMs)
+  const power = getEasePower(widths)
+
+  return clamp(Math.pow(t, power), 0, 1)
+}
+
+export function timeAtTrackProgress(
+  progress: number,
+  widths: number[],
+  railMs: number,
+) {
+  const clamped = clamp(progress, 0, 1)
+  if (clamped <= 0) return 0
+  if (clamped >= 1) return railMs
+
+  const power = getEasePower(widths)
+  const softened = Math.pow(clamped, 1 / power)
+
+  return invertSmoothstep(softened) * railMs
+}
+
+function invertSmoothstep(value: number) {
+  const target = clamp(value, 0, 1)
+  let lo = 0
+  let hi = 1
+
+  for (let i = 0; i < 20; i++) {
+    const mid = (lo + hi) / 2
+    if (smoothstep(mid) < target) lo = mid
+    else hi = mid
+  }
+
+  return (lo + hi) / 2
+}
+
+export function isSlowIntroYear(index: number) {
+  return index < LIFELINE_SLOW_YEARS
+}
+
+export function getTransitionMarkerFadeDuration(index: number) {
+  if (index < LIFELINE_SLOW_YEARS) return LIFELINE_SLOW_MARKER_FADE_MS
+
+  const rampYears = 3
+  const rampIndex = index - LIFELINE_SLOW_YEARS
+  if (rampIndex >= rampYears) return LIFELINE_FAST_MARKER_FADE_MS
+
+  const t = (rampIndex + 1) / rampYears
+  const blend = smoothstep(t)
+
+  return Math.round(
+    LIFELINE_SLOW_MARKER_FADE_MS +
+      (LIFELINE_FAST_MARKER_FADE_MS - LIFELINE_SLOW_MARKER_FADE_MS) * blend,
+  )
+}

package/src/lifeline/lifeline-labels.tsx

@@ -0,0 +1,24 @@
+export const LIFELINE_LABEL_COLUMN_WIDTH = 56
+export const LIFELINE_LABEL_GAP = 16
+export const LIFELINE_STICKY_SHIELD_WIDTH =
+  LIFELINE_LABEL_COLUMN_WIDTH + LIFELINE_LABEL_GAP
+export const LIFELINE_STICKY_LEFT = 20
+
+export function LifelineStickyLabels() {
+  return (
+    <div
+      className="relative"
+      style={{ width: LIFELINE_LABEL_COLUMN_WIDTH }}
+      aria-hidden="true"
+    >
+      <div className="flex flex-col items-start text-left">
+        <p className="mb-5 h-4 text-[11px] font-medium leading-4 tracking-[0.08em] text-fg-tertiary transition-colors duration-300">
+          Age
+        </p>
+        <p className="mb-6 h-5 text-[11px] font-medium leading-5 tracking-[0.08em] text-fg-tertiary transition-colors duration-300">
+          Years
+        </p>
+      </div>
+    </div>
+  )
+}

package/src/lifeline/lifeline-layout.ts

@@ -0,0 +1 @@
+export const LIFELINE_MOBILE_BREAKPOINT = 768

package/src/lifeline/lifeline-legend.tsx

@@ -0,0 +1,31 @@
+import type { LifelineLegendItem } from "./types"
+
+const LEGEND_DOT_CLASS: Record<LifelineLegendItem["type"], string> = {
+  mentor: "bg-blue-500",
+  met: "bg-pink-500",
+}
+
+const DEFAULT_ITEMS: LifelineLegendItem[] = [
+  { type: "mentor", label: "Mentors" },
+  { type: "met", label: "Met in person" },
+]
+
+export function LifelineLegend({
+  items = DEFAULT_ITEMS,
+}: {
+  items?: LifelineLegendItem[]
+}) {
+  return (
+    <ul className="flex flex-wrap items-center gap-x-6 gap-y-2 text-[13px] text-fg-tertiary">
+      {items.map((item) => (
+        <li key={item.type} className="flex items-center gap-2">
+          <span
+            className={`h-1.5 w-1.5 shrink-0 rounded-full ${LEGEND_DOT_CLASS[item.type]}`}
+            aria-hidden="true"
+          />
+          <span>{item.label}</span>
+        </li>
+      ))}
+    </ul>
+  )
+}