{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cool-down",
  "title": "Cool Down",
  "description": "A short statement, 'Runs cool.', settles in large over a faint grid with a mono caption.",
  "dependencies": ["remotion", "@remotion/google-fonts"],
  "files": [
    {
      "path": "registry/remocn/cool-down/index.tsx",
      "content": "\"use client\";\n\nimport { loadFont as loadSaira } from \"@remotion/google-fonts/Saira\";\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport {\n  AbsoluteFill,\n  continueRender,\n  delayRender,\n  Easing,\n  interpolate,\n  useCurrentFrame,\n  useVideoConfig,\n} from \"remotion\";\n\nconst saira = loadSaira(\"normal\", {\n  weights: [\"400\", \"500\"],\n  subsets: [\"latin\"],\n});\n\nexport interface CoolDownProps {\n  title?: string;\n  label?: string;\n  accent?: string;\n  background?: string;\n  speed?: number;\n  theme?: \"dark\" | \"light\";\n}\n\nconst THEMES = {\n  dark: {\n    bg: \"#000000\",\n    ink: \"#F2F4EE\",\n    grid: \"rgba(255,255,255,0.07)\",\n    accent: \"#76B900\",\n  },\n  light: {\n    bg: \"#FFFFFF\",\n    ink: \"#0B0D08\",\n    grid: \"rgba(0,0,0,0.08)\",\n    accent: \"#4C7A00\",\n  },\n} as const;\n\nconst FONT_PX = 200;\nconst TRACK = -0.035;\nconst RISE_LEN = 14;\nconst COOL_AT = 16;\nconst COOL_END = 86;\nconst LABEL_AT = 4;\nconst LABEL_LEN = 16;\nconst STILL_AT = 92;\n\nconst EASE_OUT = Easing.bezier(0.22, 1, 0.36, 1);\nconst CLAMP = {\n  extrapolateLeft: \"clamp\",\n  extrapolateRight: \"clamp\",\n} as const;\n\ninterface Metrics {\n  lines: number[];\n  cap: number;\n  base: number;\n  asc: number;\n  desc: number;\n}\n\nfunction measure(lines: string[]): Metrics {\n  const canvas = document.createElement(\"canvas\");\n  const ctx = canvas.getContext(\"2d\");\n  if (!ctx) throw new Error(\"cool-down: no 2d context\");\n  ctx.font = `400 ${FONT_PX}px \"${saira.fontFamily}\"`;\n  const widths = lines.map(\n    (s) =>\n      ctx.measureText(s).width / FONT_PX +\n      TRACK * Math.max(0, Array.from(s).length - 1),\n  );\n  const m = ctx.measureText(\"Hxg\");\n  const asc = m.fontBoundingBoxAscent / FONT_PX;\n  const desc = m.fontBoundingBoxDescent / FONT_PX;\n  return {\n    lines: widths,\n    cap: ctx.measureText(\"H\").actualBoundingBoxAscent / FONT_PX,\n    base: (1 - (asc + desc)) / 2 + asc,\n    asc,\n    desc,\n  };\n}\n\nfunction useMetrics(lines: string[]) {\n  const [metrics, setMetrics] = useState<Metrics | null>(null);\n  const [handle] = useState(() => delayRender(\"cool-down: measuring\"));\n  const released = useRef(false);\n  const key = lines.join(\"\\n\");\n  useEffect(() => {\n    let live = true;\n    Promise.all([\n      saira.waitUntilDone(),\n      document.fonts.load(`400 100px \"${saira.fontFamily}\"`),\n    ])\n      .catch(() => undefined)\n      .then(() => {\n        if (!live) return;\n        setMetrics(measure(key.split(\"\\n\")));\n        if (!released.current) {\n          released.current = true;\n          continueRender(handle);\n        }\n      });\n    return () => {\n      live = false;\n    };\n  }, [key, handle]);\n  return metrics;\n}\n\nfunction splitLines(title: string) {\n  const words = title.split(\" \").filter(Boolean);\n  if (words.length < 2) return [title];\n  let best = 1;\n  let score = Number.POSITIVE_INFINITY;\n  for (let i = 1; i < words.length; i++) {\n    const a = words.slice(0, i).join(\" \").length;\n    const b = words.slice(i).join(\" \").length;\n    const sc = Math.max(a, b);\n    if (sc < score) {\n      score = sc;\n      best = i;\n    }\n  }\n  return [words.slice(0, best).join(\" \"), words.slice(best).join(\" \")];\n}\n\nexport function CoolDown({\n  title = \"Runs cool.\",\n  label = \"a full launch film rendered, fans silent\",\n  accent,\n  background,\n  speed = 1,\n  theme = \"dark\",\n}: CoolDownProps) {\n  const t = useCurrentFrame() * speed;\n  const { width: W, height: H } = useVideoConfig();\n  const c = THEMES[theme];\n  const bg = background ?? c.bg;\n  const hot = accent ?? c.accent;\n  const fid = `cd${useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n  const lines = splitLines(title);\n  const m = useMetrics(lines);\n\n  if (!m) {\n    return <div style={{ position: \"absolute\", inset: 0, background: bg }} />;\n  }\n\n  const margin = Math.round(Math.min(W, H) * 0.075);\n  const widest = Math.max(...m.lines);\n  const F = Math.min(H * 0.4, (W - margin * 2) / widest);\n  const lead = F * 0.96;\n  const blockH = lead * (lines.length - 1) + m.cap * F;\n\n  const rise = interpolate(t, [0, RISE_LEN], [0, 1], {\n    ...CLAMP,\n    easing: EASE_OUT,\n  });\n  const heat = interpolate(t, [COOL_AT, COOL_END], [1, 0], {\n    ...CLAMP,\n    easing: Easing.bezier(0.33, 0, 0.2, 1),\n  });\n  const shimmer = heat ** 1.4;\n  const scale = shimmer * F * 0.075;\n  const still = t >= STILL_AT || scale < 0.05;\n  const color = `color-mix(in oklab, ${hot} ${(heat * 100).toFixed(1)}%, ${c.ink})`;\n  const climb = t * F * 0.035;\n\n  const labelP = interpolate(t, [LABEL_AT, LABEL_AT + LABEL_LEN], [0, 1], {\n    ...CLAMP,\n    easing: EASE_OUT,\n  });\n  const labelSize = Math.max(18, Math.min(H * 0.044, W * 0.04));\n  const labelColor = `color-mix(in oklab, ${hot} ${(40 + heat * 60).toFixed(1)}%, ${c.ink})`;\n\n  const pitch = Math.min(W, H) / 9;\n  const gridCols = Math.ceil(W / pitch) + 1;\n  const gridRows = Math.ceil(H / pitch) + 1;\n  const gx = (W - Math.floor(W / pitch) * pitch) / 2;\n  const gy = (H - Math.floor(H / pitch) * pitch) / 2;\n\n  const baseLast = H - margin;\n  const clipTop = baseLast - blockH - F * 0.12;\n  const clipH = blockH + F * 0.32;\n\n  return (\n    <AbsoluteFill style={{ background: bg, overflow: \"hidden\" }}>\n      <svg\n        width={W}\n        height={H}\n        style={{ position: \"absolute\", inset: 0 }}\n        aria-hidden\n      >\n        <defs>\n          <filter\n            id={fid}\n            x=\"-10%\"\n            y=\"-250%\"\n            width=\"120%\"\n            height=\"600%\"\n            colorInterpolationFilters=\"sRGB\"\n          >\n            <feTurbulence\n              type=\"fractalNoise\"\n              baseFrequency={`${(0.9 / F).toFixed(5)} ${(5.2 / F).toFixed(5)}`}\n              numOctaves={2}\n              seed={5}\n              result=\"noise\"\n            />\n            <feOffset in=\"noise\" dy={-climb} result=\"drift\" />\n            <feDisplacementMap\n              in=\"SourceGraphic\"\n              in2=\"drift\"\n              scale={scale}\n              xChannelSelector=\"R\"\n              yChannelSelector=\"G\"\n            />\n          </filter>\n        </defs>\n        {Array.from({ length: gridCols }, (_, i) => (\n          <line\n            key={`v${i}`}\n            x1={gx + i * pitch}\n            x2={gx + i * pitch}\n            y1={0}\n            y2={H}\n            stroke={c.grid}\n            strokeWidth={1}\n          />\n        ))}\n        {Array.from({ length: gridRows }, (_, i) => (\n          <line\n            key={`h${i}`}\n            x1={0}\n            x2={W}\n            y1={gy + i * pitch}\n            y2={gy + i * pitch}\n            stroke={c.grid}\n            strokeWidth={1}\n          />\n        ))}\n      </svg>\n      <div\n        style={{\n          position: \"absolute\",\n          left: margin,\n          top: margin,\n          width: W - margin * 2,\n          height: labelSize * 2.9,\n          overflow: \"hidden\",\n        }}\n      >\n        <div\n          style={{\n            fontFamily: saira.fontFamily,\n            fontWeight: 400,\n            fontSize: labelSize,\n            lineHeight: `${labelSize * 1.3}px`,\n            letterSpacing: \"-0.005em\",\n            color: labelColor,\n            textWrap: \"balance\",\n            maxWidth: Math.min(W - margin * 2, labelSize * 18),\n            transform: `translateY(${((1 - labelP) * labelSize * 2.8).toFixed(2)}px)`,\n          }}\n        >\n          {label}\n        </div>\n      </div>\n      <div\n        style={{\n          position: \"absolute\",\n          left: 0,\n          width: W,\n          top: clipTop,\n          height: clipH,\n          overflow: \"hidden\",\n        }}\n      >\n        <div\n          style={{\n            position: \"absolute\",\n            right: margin,\n            top: (1 - rise) * clipH,\n            width: W - margin,\n            height: clipH,\n            filter: still ? undefined : `url(#${fid})`,\n          }}\n        >\n          {lines.map((line, i) => {\n            const baseY = baseLast - clipTop - (lines.length - 1 - i) * lead;\n            return (\n              <div\n                key={`${i}-${line}`}\n                style={{\n                  position: \"absolute\",\n                  right: 0,\n                  top: baseY - m.base * F,\n                  height: F,\n                  fontFamily: saira.fontFamily,\n                  fontWeight: 400,\n                  fontSize: F,\n                  lineHeight: `${F}px`,\n                  letterSpacing: `${TRACK}em`,\n                  whiteSpace: \"pre\",\n                  color,\n                  textAlign: \"right\",\n                }}\n              >\n                {line}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </AbsoluteFill>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/cool-down.tsx"
    }
  ],
  "type": "registry:component"
}