Photo Stamp

1"use client"
2 
3import * as React from "react"
4import { createPortal } from "react-dom"
5 
6import { cn } from "@/lib/utils"
7import { useSpring, type SpringOptions } from "@/registry/lib/use-spring"
8 
9export interface PhotoStampProps extends Omit<
10  React.ComponentProps<"figure">,
11  "children"
12> {
13  /** The photo. Ship the full-size file: the open state is its real size. */
14  src: string
15  /** Describes the photo. It is also the trigger's accessible name. */
16  alt: string
17  /** Sits under the photo, in both states. */
18  caption?: React.ReactNode
19  /** Corner radius. Held steady in screen pixels through the lift. */
20  radius?: number
21  /** How much of the viewport the open photo fills, `0` to `1`. */
22  fill?: number
23  /** How the photo travels. */
24  spring?: SpringOptions
25  /** Sizes the photo at rest. The open size is worked out from it. */
26  imageClassName?: string
27}
28 
29interface Box {
30  x: number
31  y: number
32  width: number
33  height: number
34}
35 
36interface Geometry {
37  /** Where the photo sits on the page. */
38  from: Box
39  /** Where it is going. */
40  to: Box
41  /** `from` over `to`. One number, because the two boxes share an aspect. */
42  scale: number
43}
44 
45/** Room kept under the open photo for the caption. */
46const CAPTION_ROOM = 44
47/** An exit wants to be quicker than the entrance it undoes. */
48const EXIT_RATE = 0.8
49/** Keys that scroll the page out from under an open photo. */
50const SCROLL_KEYS = new Set([
51  " ",
52  "PageUp",
53  "PageDown",
54  "Home",
55  "End",
56  "ArrowUp",
57  "ArrowDown",
58  "ArrowLeft",
59  "ArrowRight",
60])
61 
62/**
63 * The open box, fitted to the viewport at the aspect the photo already has on
64 * the page. Matching the rendered aspect rather than the source file's means
65 * the crop never changes on the way up, so one scale covers both axes and
66 * nothing has to be un-distorted afterwards.
67 */
68function fit(from: Box, fill: number, room: number): Box {
69  const maxWidth = window.innerWidth * fill
70  const maxHeight = window.innerHeight * fill - room
71  const aspect = from.width / from.height
72 
73  let width = maxWidth
74  let height = width / aspect
75 
76  if (height > maxHeight) {
77    height = maxHeight
78    width = height * aspect
79  }
80 
81  return {
82    x: (window.innerWidth - width) / 2,
83    y: (window.innerHeight - room - height) / 2,
84    width,
85    height,
86  }
87}
88 
89function measure(node: HTMLElement): Box {
90  const rect = node.getBoundingClientRect()
91  return { x: rect.x, y: rect.y, width: rect.width, height: rect.height }
92}
93 
94function usePrefersReducedMotion() {
95// … truncated