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

package/src/lifeline/lifeline-fireworks.tsx

@@ -0,0 +1,302 @@
+"use client"
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react"
+import type { LifelineEventEffect } from "./types"
+
+/** Tweak these */
+const DURATION_S = 7.5
+const MAX_DPR = 1.5
+/** Wait for the theme cross-fade before the first burst. */
+const NIGHTFALL_MS = 400
+
+type Palette = [number[], number[], number[]]
+
+const PALETTES: Record<LifelineEventEffect, Palette> = {
+  // Old Glory red / white / blue
+  fireworks: [
+    [0.9, 0.15, 0.25],
+    [1.0, 1.0, 1.0],
+    [0.25, 0.45, 0.95],
+  ],
+  // celeste / white / pale celeste
+  "fireworks-argentina": [
+    [0.45, 0.75, 0.98],
+    [1.0, 1.0, 1.0],
+    [0.7, 0.87, 1.0],
+  ],
+}
+
+const VERTEX_SHADER = `
+attribute vec2 a_pos;
+void main() {
+  gl_Position = vec4(a_pos, 0.0, 1.0);
+}
+`
+
+/**
+ * Additive point-glow fireworks in Old Glory red, white, and blue,
+ * composited over a night-sky scrim via premultiplied canvas alpha.
+ */
+const FRAGMENT_SHADER = `
+precision highp float;
+
+uniform vec2 u_res;
+uniform float u_time;
+uniform float u_dur;
+uniform vec3 u_c0;
+uniform vec3 u_c1;
+uniform vec3 u_c2;
+
+#define TAU 6.28318530718
+#define N_FIREWORKS 10
+#define N_PARTICLES 42
+
+float hash(float n) {
+  return fract(sin(n) * 43758.5453123);
+}
+
+vec3 palette(float m) {
+  if (m < 0.5) return u_c0;
+  if (m < 1.5) return u_c1;
+  return u_c2;
+}
+
+void main() {
+  vec2 uv = (gl_FragCoord.xy - 0.5 * u_res) / u_res.y;
+  float t = u_time;
+  float env = smoothstep(0.0, 0.5, t) * (1.0 - smoothstep(u_dur - 1.0, u_dur, t));
+
+  vec3 col = vec3(0.0);
+
+  for (int i = 0; i < N_FIREWORKS; i++) {
+    float fi = float(i);
+    float t0 = 0.35 + fi * (u_dur - 2.8) / float(N_FIREWORKS) + hash(fi * 7.31) * 0.3;
+    // No flow control in the loop — some WebGL1 driver translations
+    // mishandle continue, so inactive bursts multiply to zero instead.
+    float active = step(t0, t) * step(t, t0 + 1.8);
+    float lt = clamp((t - t0) / 1.8, 0.0, 1.0);
+
+    vec2 center = vec2((hash(fi * 3.7) - 0.5) * 1.6, -0.05 + hash(fi * 9.1) * 0.5);
+    vec3 base = palette(mod(fi, 3.0)); // strict red / white / blue rotation
+    // Ramp in fast so overlapping particles at ignition don't stack
+    // into a blown-out ball, then decay.
+    float fade = exp(-lt * 4.0) * min(1.0, lt * 6.0);
+
+    for (int j = 0; j < N_PARTICLES; j++) {
+      float fj = float(j);
+      float angle = (fj / float(N_PARTICLES)) * TAU + hash(fi * 100.0 + fj) * 0.15;
+      float speed = 0.16 + 0.22 * hash(fj * 7.77 + fi * 31.3);
+
+      vec2 p = center + vec2(cos(angle), sin(angle)) * speed * sqrt(lt);
+      p.y -= 0.09 * lt * lt; // gravity
+
+      float d = max(length(uv - p), 0.004);
+      float sparkle = 0.7 + 0.3 * sin(30.0 * lt + fj * 1.7);
+      col += base * active * fade * sparkle * 0.0006 / (d * d);
+    }
+  }
+
+  col = clamp(col * env, 0.0, 1.0);
+  float spark = max(col.r, max(col.g, col.b));
+  float scrim = 0.45 * env;
+  gl_FragColor = vec4(col, max(spark, scrim));
+}
+`
+
+interface LifelineFireworksApi {
+  launch: (effect: LifelineEventEffect) => void
+}
+
+const LifelineFireworksContext = createContext<LifelineFireworksApi | null>(
+  null,
+)
+
+export function useLifelineFireworks() {
+  return useContext(LifelineFireworksContext)
+}
+
+function FireworksCanvas({
+  palette,
+  onDone,
+}: {
+  palette: Palette
+  onDone: () => void
+}) {
+  const paletteRef = useRef(palette)
+  paletteRef.current = palette
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const onDoneRef = useRef(onDone)
+  onDoneRef.current = onDone
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+
+    const gl = canvas.getContext("webgl", {
+      alpha: true,
+      premultipliedAlpha: true,
+      antialias: false,
+    })
+    if (!gl) {
+      onDoneRef.current()
+      return
+    }
+
+    const compile = (type: number, source: string) => {
+      const shader = gl.createShader(type)!
+      gl.shaderSource(shader, source)
+      gl.compileShader(shader)
+      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        console.warn("fireworks shader:", gl.getShaderInfoLog(shader))
+      }
+      return shader
+    }
+
+    const program = gl.createProgram()!
+    gl.attachShader(program, compile(gl.VERTEX_SHADER, VERTEX_SHADER))
+    gl.attachShader(program, compile(gl.FRAGMENT_SHADER, FRAGMENT_SHADER))
+    gl.linkProgram(program)
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      console.warn("fireworks link:", gl.getProgramInfoLog(program))
+      onDoneRef.current()
+      return
+    }
+    gl.useProgram(program)
+
+    const buffer = gl.createBuffer()
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([-1, -1, 3, -1, -1, 3]),
+      gl.STATIC_DRAW,
+    )
+    const aPos = gl.getAttribLocation(program, "a_pos")
+    gl.enableVertexAttribArray(aPos)
+    gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0)
+
+    const uRes = gl.getUniformLocation(program, "u_res")
+    const uTime = gl.getUniformLocation(program, "u_time")
+    const uDur = gl.getUniformLocation(program, "u_dur")
+
+    const [c0, c1, c2] = paletteRef.current
+    gl.uniform3f(gl.getUniformLocation(program, "u_c0"), c0[0], c0[1], c0[2])
+    gl.uniform3f(gl.getUniformLocation(program, "u_c1"), c1[0], c1[1], c1[2])
+    gl.uniform3f(gl.getUniformLocation(program, "u_c2"), c2[0], c2[1], c2[2])
+
+    const resize = () => {
+      const dpr = Math.min(window.devicePixelRatio || 1, MAX_DPR)
+      canvas.width = Math.round(window.innerWidth * dpr)
+      canvas.height = Math.round(window.innerHeight * dpr)
+      gl.viewport(0, 0, canvas.width, canvas.height)
+    }
+    resize()
+    window.addEventListener("resize", resize)
+
+    let frame = 0
+    const start = performance.now()
+
+    const step = (now: number) => {
+      const t = (now - start) / 1000
+      if (t >= DURATION_S) {
+        onDoneRef.current()
+        return
+      }
+
+      gl.uniform2f(uRes, canvas.width, canvas.height)
+      gl.uniform1f(uTime, t)
+      gl.uniform1f(uDur, DURATION_S)
+      gl.clearColor(0, 0, 0, 0)
+      gl.clear(gl.COLOR_BUFFER_BIT)
+      gl.drawArrays(gl.TRIANGLES, 0, 3)
+
+      frame = requestAnimationFrame(step)
+    }
+    frame = requestAnimationFrame(step)
+
+    return () => {
+      cancelAnimationFrame(frame)
+      window.removeEventListener("resize", resize)
+      // No manual loseContext: StrictMode re-runs this effect on the
+      // same canvas, and a lost context can never compile again.
+    }
+  }, [])
+
+  return (
+    <canvas
+      ref={canvasRef}
+      aria-hidden="true"
+      className="pointer-events-none fixed inset-0 z-[70] h-full w-full"
+    />
+  )
+}
+
+function isDarkDocument() {
+  return document.documentElement.classList.contains("dark")
+}
+
+function setDocumentDark(dark: boolean) {
+  document.documentElement.classList.toggle("dark", dark)
+}
+
+export function LifelineFireworksProvider({
+  children,
+}: {
+  children: ReactNode
+}) {
+  const [playing, setPlaying] = useState(false)
+  const [effect, setEffect] = useState<LifelineEventEffect>("fireworks")
+  const restoreThemeRef = useRef<"light" | null>(null)
+  const nightfallRef = useRef(0)
+  const playingRef = useRef(false)
+  playingRef.current = playing
+
+  useEffect(() => {
+    return () => window.clearTimeout(nightfallRef.current)
+  }, [])
+
+  const launch = useCallback((nextEffect: LifelineEventEffect) => {
+    if (playingRef.current) return
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return
+
+    setEffect(nextEffect)
+
+    // Fireworks belong in the dark: switch a light page to dark for
+    // the show, and restore afterwards.
+    if (!isDarkDocument()) {
+      restoreThemeRef.current = "light"
+      setDocumentDark(true)
+      window.clearTimeout(nightfallRef.current)
+      nightfallRef.current = window.setTimeout(
+        () => setPlaying(true),
+        NIGHTFALL_MS,
+      )
+      return
+    }
+
+    restoreThemeRef.current = null
+    setPlaying(true)
+  }, [])
+
+  const done = useCallback(() => {
+    setPlaying(false)
+    if (restoreThemeRef.current) {
+      setDocumentDark(false)
+      restoreThemeRef.current = null
+    }
+  }, [])
+
+  return (
+    <LifelineFireworksContext.Provider value={{ launch }}>
+      {children}
+      {playing && <FireworksCanvas palette={PALETTES[effect]} onDone={done} />}
+    </LifelineFireworksContext.Provider>
+  )
+}

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,
+  )
+}