react-marketing-ui 0.0.4 → 0.0.6

package/README.md

@@ -10,6 +10,18 @@ Ported from the [offkeep](https://offkeep.com) marketing site into a standalone
 bun add react-marketing-ui
 ```
 
+### DiaTextReveal styles
+
+Import the animation stylesheet once in your app's global stylesheet:
+
+```css
+@import "react-marketing-ui/dia-text-reveal.css";
+```
+
+The package build emits CSS separately from JavaScript. These keyframes are
+required for the text reveal and for advancing repeated lines; scanning the
+package with Tailwind's `@source` does not include them.
+
 ## Components
 
 - **SparklesText** — text wrapped in continuously respawning sparkle stars

package/dist/footer-glow.d.cts

@@ -0,0 +1,2 @@
+export default function FooterGlow(): import("react").JSX.Element;
+//# sourceMappingURL=footer-glow.d.ts.map

package/dist/footer-glow.d.ts

@@ -0,0 +1,2 @@
+export default function FooterGlow(): import("react").JSX.Element;
+//# sourceMappingURL=footer-glow.d.ts.map

package/dist/footer-glow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer-glow.d.ts","sourceRoot":"","sources":["../../src/components/footer-glow.tsx"],"names":[],"mappings":"AAwEA,MAAM,CAAC,OAAO,UAAU,UAAU,gCAmGjC"}

package/dist/footer-glow.js

@@ -0,0 +1,110 @@
+"use client";
+'use strict';
+
+var framerMotion = require('framer-motion');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var VB_W = 1270;
+var VB_H = 600;
+var BAND_TOP = 0;
+var OVERHANG = "0.5rem";
+var OVERSHOOT = 60;
+var BAND_X = -OVERSHOOT;
+var BAND_W = VB_W + OVERSHOOT * 2;
+var BAND_H = VB_H + OVERSHOOT;
+var HUES = [188, 210, 232, 250, 262, 285, 308, 330, 350];
+var ARCH_RX = VB_W * 1.35;
+var FADE_STOPS = [
+  { offset: 0, opacity: 1 },
+  { offset: 0.62, opacity: 1 },
+  { offset: 0.81, opacity: 0.8 },
+  { offset: 0.93, opacity: 0.35 },
+  { offset: 1, opacity: 0 }
+];
+var MAX_OPACITY = 0.85;
+function FadeStops() {
+  return FADE_STOPS.map(({ offset, opacity }) => /* @__PURE__ */ jsxRuntime.jsx("stop", { offset, style: { stopColor: "#fff", stopOpacity: opacity } }, offset));
+}
+function FooterGlow() {
+  const ref = react.useRef(null);
+  const reduce = framerMotion.useReducedMotion();
+  const uid = react.useId();
+  const hueId = `footer-glow-hue-${uid}`;
+  const flatFadeId = `footer-glow-fade-flat-${uid}`;
+  const archFadeId = `footer-glow-fade-arch-${uid}`;
+  const flatMaskId = `footer-glow-mask-flat-${uid}`;
+  const archMaskId = `footer-glow-mask-arch-${uid}`;
+  const { scrollYProgress } = framerMotion.useScroll({ target: ref, offset: ["start end", "start center"] });
+  const y = framerMotion.useTransform(scrollYProgress, [0, 0.7, 1], ["55%", "5%", "2%"]);
+  const opacity = framerMotion.useTransform(scrollYProgress, [0, 0.65], [0, MAX_OPACITY]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "aria-hidden": "true",
+      className: "pointer-events-none absolute inset-x-0 bottom-0 overflow-hidden",
+      style: { height: `calc(100% + ${OVERHANG})` },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        framerMotion.motion.svg,
+        {
+          viewBox: `0 0 ${VB_W} ${VB_H}`,
+          preserveAspectRatio: "none",
+          className: "h-full w-full",
+          overflow: "visible",
+          style: reduce ? { opacity: MAX_OPACITY } : { y, opacity },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("linearGradient", { id: hueId, x1: "0", y1: "0", x2: "1", y2: "0", children: HUES.map((hue, i) => /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: i / (HUES.length - 1), style: { stopColor: `hsl(${hue} 95% 55%)` } }, hue)) }),
+              /* @__PURE__ */ jsxRuntime.jsx("linearGradient", { id: flatFadeId, gradientUnits: "userSpaceOnUse", x1: "0", y1: VB_H, x2: "0", y2: BAND_TOP, children: /* @__PURE__ */ jsxRuntime.jsx(FadeStops, {}) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "radialGradient",
+                {
+                  id: archFadeId,
+                  gradientUnits: "userSpaceOnUse",
+                  cx: VB_W / 2,
+                  cy: VB_H,
+                  r: VB_H - BAND_TOP,
+                  gradientTransform: `translate(${VB_W / 2} 0) scale(${ARCH_RX / (VB_H - BAND_TOP)} 1) translate(${-VB_W / 2} 0)`,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(FadeStops, {})
+                }
+              ),
+              [
+                { id: flatMaskId, fill: flatFadeId },
+                { id: archMaskId, fill: archFadeId }
+              ].map(({ id, fill }) => /* @__PURE__ */ jsxRuntime.jsx("mask", { id, maskUnits: "userSpaceOnUse", x: BAND_X, y: "0", width: BAND_W, height: BAND_H, children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: BAND_X, y: "0", width: BAND_W, height: BAND_H, fill: `url(#${fill})` }) }, id))
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                x: BAND_X,
+                y: "0",
+                width: BAND_W,
+                height: BAND_H,
+                fill: `url(#${hueId})`,
+                mask: `url(#${flatMaskId})`,
+                className: "md:hidden"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                x: BAND_X,
+                y: "0",
+                width: BAND_W,
+                height: BAND_H,
+                fill: `url(#${hueId})`,
+                mask: `url(#${archMaskId})`,
+                className: "hidden md:block"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+module.exports = FooterGlow;
+//# sourceMappingURL=footer-glow.js.map
+//# sourceMappingURL=footer-glow.js.map

package/dist/footer-glow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/footer-glow.tsx"],"names":["jsx","useRef","useReducedMotion","useId","useScroll","useTransform","jsxs","motion"],"mappings":"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","file":"footer-glow.js","sourcesContent":["'use client';\n\nimport { motion, useReducedMotion, useScroll, useTransform } from 'framer-motion';\nimport { useId, useRef } from 'react';\n\n/**\n * Blurred brand glow behind the footer card — inspired by the Lovable footer.\n * A single full-bleed band carries a horizontal hue sweep (cyan → blue → brand\n * violet → pink) and is masked so it fades out towards the top: on wide screens\n * a very wide ellipse anchored to the bottom edge gives a shallow arch (solid to\n * the corners at the base, cresting in the middle); below `md` the same ramp runs\n * straight up, because at narrow widths the arch has no room to read as a curve\n * and just looks like a lopsided top edge. The wash reads as one even sheet of\n * colour with no bar seams and no hard cut against `overflow-hidden`. It fades +\n * rises into place as the footer scrolls into view (scroll-linked, not a\n * one-shot), and stays static when the user prefers reduced motion.\n *\n * Both masks are always in the markup and CSS picks between them, so the static\n * export is correct at every width without a JS width branch.\n */\n\nconst VB_W = 1270;\nconst VB_H = 600;\n// The band's top: the vertical fade reaches full transparency at the very top of\n// the layer, which itself overhangs the footer (see OVERHANG) — so the glow dies\n// out in open air above the footer rather than against a clipped edge.\nconst BAND_TOP = 0;\n// How far the glow layer reaches above the footer's top edge, into the CTA\n// section. Only the faint tail of the fade lands up there.\nconst OVERHANG = '0.5rem';\n// Overshoot — the band runs past the viewBox on the sides and below so the\n// colour stays full-bleed to the footer's edges even while the scroll transform\n// nudges it downwards.\nconst OVERSHOOT = 60;\nconst BAND_X = -OVERSHOOT;\nconst BAND_W = VB_W + OVERSHOOT * 2;\nconst BAND_H = VB_H + OVERSHOOT;\n\n// Hue sweep across the width. Saturation + lightness are constant so no column\n// reads brighter than its neighbours; only the hue moves.\nconst HUES = [188, 210, 232, 250, 262 /* centre — brand violet */, 285, 308, 330, 350];\n\n// Arch curvature, as a multiple of the band width: the horizontal radius of the\n// fade's ellipse. Larger = flatter. At 1.35 the outer edges give out ~7% of the\n// footer's height below the centre — a shallow crown, not a dome. The bottom\n// corners stay well inside the solid core, so the base is still edge-to-edge.\nconst ARCH_RX = VB_W * 1.35;\n\n// Alpha ramp from the solid base outwards (bottom → top, or centre-bottom → rim\n// of the ellipse for the arched variant). Solid through the lower two thirds,\n// then a tight falloff — holding full opacity that long is what keeps the band\n// reading as a defined sheet of colour instead of a diffuse haze. The ellipse's\n// rim lands exactly on BAND_TOP along the centre line, so both variants agree\n// down the middle; the arch only differs by the sides reaching zero sooner.\nconst FADE_STOPS = [\n  { offset: 0, opacity: 1 },\n  { offset: 0.62, opacity: 1 },\n  { offset: 0.81, opacity: 0.8 },\n  { offset: 0.93, opacity: 0.35 },\n  { offset: 1, opacity: 0 },\n];\n\n// Peak wash opacity. The glow sits *behind* the opaque card (footer on top), so\n// only the part above the card shows — it can carry rich, saturated colour.\nconst MAX_OPACITY = 0.85;\n\nfunction FadeStops() {\n  return FADE_STOPS.map(({ offset, opacity }) => (\n    <stop key={offset} offset={offset} style={{ stopColor: '#fff', stopOpacity: opacity }} />\n  ));\n}\n\nexport default function FooterGlow() {\n  const ref = useRef<HTMLDivElement>(null);\n  const reduce = useReducedMotion();\n  const uid = useId();\n  const hueId = `footer-glow-hue-${uid}`;\n  const flatFadeId = `footer-glow-fade-flat-${uid}`;\n  const archFadeId = `footer-glow-fade-arch-${uid}`;\n  const flatMaskId = `footer-glow-mask-flat-${uid}`;\n  const archMaskId = `footer-glow-mask-arch-${uid}`;\n\n  // Progress runs 0 → 1 as the layer's top edge travels from the bottom of the\n  // viewport to its middle. Deliberately viewport-relative rather than tied to\n  // the footer's own height: the footer is several screens tall once the link\n  // columns stack, and anchoring the end to it ('end end') meant the glow only\n  // finished rising at the very bottom of the page on a phone. Half a viewport\n  // of travel puts it in place early and behaves the same at every width.\n  const { scrollYProgress } = useScroll({ target: ref, offset: ['start end', 'start center'] });\n\n  const y = useTransform(scrollYProgress, [0, 0.7, 1], ['55%', '5%', '2%']);\n  const opacity = useTransform(scrollYProgress, [0, 0.65], [0, MAX_OPACITY]);\n\n  // Full-bleed background layer, anchored to the footer's bottom and one overhang\n  // taller than it, so the band scales with the footer while spilling above its\n  // top edge. It clips itself rather than relying on the footer: that keeps the\n  // sides and the scroll-transformed bottom contained (no stray page overflow)\n  // while leaving the top free. `pointer-events-none` keeps the CTA above it\n  // clickable through the spill.\n  return (\n    <div\n      ref={ref}\n      aria-hidden=\"true\"\n      className=\"pointer-events-none absolute inset-x-0 bottom-0 overflow-hidden\"\n      style={{ height: `calc(100% + ${OVERHANG})` }}\n    >\n      <motion.svg\n        viewBox={`0 0 ${VB_W} ${VB_H}`}\n        preserveAspectRatio=\"none\"\n        className=\"h-full w-full\"\n        overflow=\"visible\"\n        style={reduce ? { opacity: MAX_OPACITY } : { y, opacity }}\n      >\n        <defs>\n          <linearGradient id={hueId} x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n            {HUES.map((hue, i) => (\n              <stop key={hue} offset={i / (HUES.length - 1)} style={{ stopColor: `hsl(${hue} 95% 55%)` }} />\n            ))}\n          </linearGradient>\n\n          {/* Flat variant — a straight bottom-to-top ramp. */}\n          <linearGradient id={flatFadeId} gradientUnits=\"userSpaceOnUse\" x1=\"0\" y1={VB_H} x2=\"0\" y2={BAND_TOP}>\n            <FadeStops />\n          </linearGradient>\n\n          {/* Arched variant — a circle of radius (VB_H - BAND_TOP) centred on the\n              bottom edge, stretched horizontally into a very wide ellipse; that\n              stretch is the arch. Both use userSpaceOnUse so the geometry is\n              absolute, independent of the rect's bounding box (which overshoots\n              the viewBox on three sides). */}\n          <radialGradient\n            id={archFadeId}\n            gradientUnits=\"userSpaceOnUse\"\n            cx={VB_W / 2}\n            cy={VB_H}\n            r={VB_H - BAND_TOP}\n            gradientTransform={`translate(${VB_W / 2} 0) scale(${ARCH_RX / (VB_H - BAND_TOP)} 1) translate(${-VB_W / 2} 0)`}\n          >\n            <FadeStops />\n          </radialGradient>\n\n          {[\n            { id: flatMaskId, fill: flatFadeId },\n            { id: archMaskId, fill: archFadeId },\n          ].map(({ id, fill }) => (\n            <mask key={id} id={id} maskUnits=\"userSpaceOnUse\" x={BAND_X} y=\"0\" width={BAND_W} height={BAND_H}>\n              <rect x={BAND_X} y=\"0\" width={BAND_W} height={BAND_H} fill={`url(#${fill})`} />\n            </mask>\n          ))}\n        </defs>\n        <rect\n          x={BAND_X}\n          y=\"0\"\n          width={BAND_W}\n          height={BAND_H}\n          fill={`url(#${hueId})`}\n          mask={`url(#${flatMaskId})`}\n          className=\"md:hidden\"\n        />\n        <rect\n          x={BAND_X}\n          y=\"0\"\n          width={BAND_W}\n          height={BAND_H}\n          fill={`url(#${hueId})`}\n          mask={`url(#${archMaskId})`}\n          className=\"hidden md:block\"\n        />\n      </motion.svg>\n    </div>\n  );\n}\n"]}

package/dist/footer-glow.mjs

@@ -0,0 +1,108 @@
+"use client";
+import { useReducedMotion, useScroll, useTransform, motion } from 'framer-motion';
+import { useRef, useId } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var VB_W = 1270;
+var VB_H = 600;
+var BAND_TOP = 0;
+var OVERHANG = "0.5rem";
+var OVERSHOOT = 60;
+var BAND_X = -OVERSHOOT;
+var BAND_W = VB_W + OVERSHOOT * 2;
+var BAND_H = VB_H + OVERSHOOT;
+var HUES = [188, 210, 232, 250, 262, 285, 308, 330, 350];
+var ARCH_RX = VB_W * 1.35;
+var FADE_STOPS = [
+  { offset: 0, opacity: 1 },
+  { offset: 0.62, opacity: 1 },
+  { offset: 0.81, opacity: 0.8 },
+  { offset: 0.93, opacity: 0.35 },
+  { offset: 1, opacity: 0 }
+];
+var MAX_OPACITY = 0.85;
+function FadeStops() {
+  return FADE_STOPS.map(({ offset, opacity }) => /* @__PURE__ */ jsx("stop", { offset, style: { stopColor: "#fff", stopOpacity: opacity } }, offset));
+}
+function FooterGlow() {
+  const ref = useRef(null);
+  const reduce = useReducedMotion();
+  const uid = useId();
+  const hueId = `footer-glow-hue-${uid}`;
+  const flatFadeId = `footer-glow-fade-flat-${uid}`;
+  const archFadeId = `footer-glow-fade-arch-${uid}`;
+  const flatMaskId = `footer-glow-mask-flat-${uid}`;
+  const archMaskId = `footer-glow-mask-arch-${uid}`;
+  const { scrollYProgress } = useScroll({ target: ref, offset: ["start end", "start center"] });
+  const y = useTransform(scrollYProgress, [0, 0.7, 1], ["55%", "5%", "2%"]);
+  const opacity = useTransform(scrollYProgress, [0, 0.65], [0, MAX_OPACITY]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "aria-hidden": "true",
+      className: "pointer-events-none absolute inset-x-0 bottom-0 overflow-hidden",
+      style: { height: `calc(100% + ${OVERHANG})` },
+      children: /* @__PURE__ */ jsxs(
+        motion.svg,
+        {
+          viewBox: `0 0 ${VB_W} ${VB_H}`,
+          preserveAspectRatio: "none",
+          className: "h-full w-full",
+          overflow: "visible",
+          style: reduce ? { opacity: MAX_OPACITY } : { y, opacity },
+          children: [
+            /* @__PURE__ */ jsxs("defs", { children: [
+              /* @__PURE__ */ jsx("linearGradient", { id: hueId, x1: "0", y1: "0", x2: "1", y2: "0", children: HUES.map((hue, i) => /* @__PURE__ */ jsx("stop", { offset: i / (HUES.length - 1), style: { stopColor: `hsl(${hue} 95% 55%)` } }, hue)) }),
+              /* @__PURE__ */ jsx("linearGradient", { id: flatFadeId, gradientUnits: "userSpaceOnUse", x1: "0", y1: VB_H, x2: "0", y2: BAND_TOP, children: /* @__PURE__ */ jsx(FadeStops, {}) }),
+              /* @__PURE__ */ jsx(
+                "radialGradient",
+                {
+                  id: archFadeId,
+                  gradientUnits: "userSpaceOnUse",
+                  cx: VB_W / 2,
+                  cy: VB_H,
+                  r: VB_H - BAND_TOP,
+                  gradientTransform: `translate(${VB_W / 2} 0) scale(${ARCH_RX / (VB_H - BAND_TOP)} 1) translate(${-VB_W / 2} 0)`,
+                  children: /* @__PURE__ */ jsx(FadeStops, {})
+                }
+              ),
+              [
+                { id: flatMaskId, fill: flatFadeId },
+                { id: archMaskId, fill: archFadeId }
+              ].map(({ id, fill }) => /* @__PURE__ */ jsx("mask", { id, maskUnits: "userSpaceOnUse", x: BAND_X, y: "0", width: BAND_W, height: BAND_H, children: /* @__PURE__ */ jsx("rect", { x: BAND_X, y: "0", width: BAND_W, height: BAND_H, fill: `url(#${fill})` }) }, id))
+            ] }),
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: BAND_X,
+                y: "0",
+                width: BAND_W,
+                height: BAND_H,
+                fill: `url(#${hueId})`,
+                mask: `url(#${flatMaskId})`,
+                className: "md:hidden"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: BAND_X,
+                y: "0",
+                width: BAND_W,
+                height: BAND_H,
+                fill: `url(#${hueId})`,
+                mask: `url(#${archMaskId})`,
+                className: "hidden md:block"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+export { FooterGlow as default };
+//# sourceMappingURL=footer-glow.mjs.map
+//# sourceMappingURL=footer-glow.mjs.map

package/dist/footer-glow.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/footer-glow.tsx"],"names":[],"mappings":"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","file":"footer-glow.mjs","sourcesContent":["'use client';\n\nimport { motion, useReducedMotion, useScroll, useTransform } from 'framer-motion';\nimport { useId, useRef } from 'react';\n\n/**\n * Blurred brand glow behind the footer card — inspired by the Lovable footer.\n * A single full-bleed band carries a horizontal hue sweep (cyan → blue → brand\n * violet → pink) and is masked so it fades out towards the top: on wide screens\n * a very wide ellipse anchored to the bottom edge gives a shallow arch (solid to\n * the corners at the base, cresting in the middle); below `md` the same ramp runs\n * straight up, because at narrow widths the arch has no room to read as a curve\n * and just looks like a lopsided top edge. The wash reads as one even sheet of\n * colour with no bar seams and no hard cut against `overflow-hidden`. It fades +\n * rises into place as the footer scrolls into view (scroll-linked, not a\n * one-shot), and stays static when the user prefers reduced motion.\n *\n * Both masks are always in the markup and CSS picks between them, so the static\n * export is correct at every width without a JS width branch.\n */\n\nconst VB_W = 1270;\nconst VB_H = 600;\n// The band's top: the vertical fade reaches full transparency at the very top of\n// the layer, which itself overhangs the footer (see OVERHANG) — so the glow dies\n// out in open air above the footer rather than against a clipped edge.\nconst BAND_TOP = 0;\n// How far the glow layer reaches above the footer's top edge, into the CTA\n// section. Only the faint tail of the fade lands up there.\nconst OVERHANG = '0.5rem';\n// Overshoot — the band runs past the viewBox on the sides and below so the\n// colour stays full-bleed to the footer's edges even while the scroll transform\n// nudges it downwards.\nconst OVERSHOOT = 60;\nconst BAND_X = -OVERSHOOT;\nconst BAND_W = VB_W + OVERSHOOT * 2;\nconst BAND_H = VB_H + OVERSHOOT;\n\n// Hue sweep across the width. Saturation + lightness are constant so no column\n// reads brighter than its neighbours; only the hue moves.\nconst HUES = [188, 210, 232, 250, 262 /* centre — brand violet */, 285, 308, 330, 350];\n\n// Arch curvature, as a multiple of the band width: the horizontal radius of the\n// fade's ellipse. Larger = flatter. At 1.35 the outer edges give out ~7% of the\n// footer's height below the centre — a shallow crown, not a dome. The bottom\n// corners stay well inside the solid core, so the base is still edge-to-edge.\nconst ARCH_RX = VB_W * 1.35;\n\n// Alpha ramp from the solid base outwards (bottom → top, or centre-bottom → rim\n// of the ellipse for the arched variant). Solid through the lower two thirds,\n// then a tight falloff — holding full opacity that long is what keeps the band\n// reading as a defined sheet of colour instead of a diffuse haze. The ellipse's\n// rim lands exactly on BAND_TOP along the centre line, so both variants agree\n// down the middle; the arch only differs by the sides reaching zero sooner.\nconst FADE_STOPS = [\n  { offset: 0, opacity: 1 },\n  { offset: 0.62, opacity: 1 },\n  { offset: 0.81, opacity: 0.8 },\n  { offset: 0.93, opacity: 0.35 },\n  { offset: 1, opacity: 0 },\n];\n\n// Peak wash opacity. The glow sits *behind* the opaque card (footer on top), so\n// only the part above the card shows — it can carry rich, saturated colour.\nconst MAX_OPACITY = 0.85;\n\nfunction FadeStops() {\n  return FADE_STOPS.map(({ offset, opacity }) => (\n    <stop key={offset} offset={offset} style={{ stopColor: '#fff', stopOpacity: opacity }} />\n  ));\n}\n\nexport default function FooterGlow() {\n  const ref = useRef<HTMLDivElement>(null);\n  const reduce = useReducedMotion();\n  const uid = useId();\n  const hueId = `footer-glow-hue-${uid}`;\n  const flatFadeId = `footer-glow-fade-flat-${uid}`;\n  const archFadeId = `footer-glow-fade-arch-${uid}`;\n  const flatMaskId = `footer-glow-mask-flat-${uid}`;\n  const archMaskId = `footer-glow-mask-arch-${uid}`;\n\n  // Progress runs 0 → 1 as the layer's top edge travels from the bottom of the\n  // viewport to its middle. Deliberately viewport-relative rather than tied to\n  // the footer's own height: the footer is several screens tall once the link\n  // columns stack, and anchoring the end to it ('end end') meant the glow only\n  // finished rising at the very bottom of the page on a phone. Half a viewport\n  // of travel puts it in place early and behaves the same at every width.\n  const { scrollYProgress } = useScroll({ target: ref, offset: ['start end', 'start center'] });\n\n  const y = useTransform(scrollYProgress, [0, 0.7, 1], ['55%', '5%', '2%']);\n  const opacity = useTransform(scrollYProgress, [0, 0.65], [0, MAX_OPACITY]);\n\n  // Full-bleed background layer, anchored to the footer's bottom and one overhang\n  // taller than it, so the band scales with the footer while spilling above its\n  // top edge. It clips itself rather than relying on the footer: that keeps the\n  // sides and the scroll-transformed bottom contained (no stray page overflow)\n  // while leaving the top free. `pointer-events-none` keeps the CTA above it\n  // clickable through the spill.\n  return (\n    <div\n      ref={ref}\n      aria-hidden=\"true\"\n      className=\"pointer-events-none absolute inset-x-0 bottom-0 overflow-hidden\"\n      style={{ height: `calc(100% + ${OVERHANG})` }}\n    >\n      <motion.svg\n        viewBox={`0 0 ${VB_W} ${VB_H}`}\n        preserveAspectRatio=\"none\"\n        className=\"h-full w-full\"\n        overflow=\"visible\"\n        style={reduce ? { opacity: MAX_OPACITY } : { y, opacity }}\n      >\n        <defs>\n          <linearGradient id={hueId} x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n            {HUES.map((hue, i) => (\n              <stop key={hue} offset={i / (HUES.length - 1)} style={{ stopColor: `hsl(${hue} 95% 55%)` }} />\n            ))}\n          </linearGradient>\n\n          {/* Flat variant — a straight bottom-to-top ramp. */}\n          <linearGradient id={flatFadeId} gradientUnits=\"userSpaceOnUse\" x1=\"0\" y1={VB_H} x2=\"0\" y2={BAND_TOP}>\n            <FadeStops />\n          </linearGradient>\n\n          {/* Arched variant — a circle of radius (VB_H - BAND_TOP) centred on the\n              bottom edge, stretched horizontally into a very wide ellipse; that\n              stretch is the arch. Both use userSpaceOnUse so the geometry is\n              absolute, independent of the rect's bounding box (which overshoots\n              the viewBox on three sides). */}\n          <radialGradient\n            id={archFadeId}\n            gradientUnits=\"userSpaceOnUse\"\n            cx={VB_W / 2}\n            cy={VB_H}\n            r={VB_H - BAND_TOP}\n            gradientTransform={`translate(${VB_W / 2} 0) scale(${ARCH_RX / (VB_H - BAND_TOP)} 1) translate(${-VB_W / 2} 0)`}\n          >\n            <FadeStops />\n          </radialGradient>\n\n          {[\n            { id: flatMaskId, fill: flatFadeId },\n            { id: archMaskId, fill: archFadeId },\n          ].map(({ id, fill }) => (\n            <mask key={id} id={id} maskUnits=\"userSpaceOnUse\" x={BAND_X} y=\"0\" width={BAND_W} height={BAND_H}>\n              <rect x={BAND_X} y=\"0\" width={BAND_W} height={BAND_H} fill={`url(#${fill})`} />\n            </mask>\n          ))}\n        </defs>\n        <rect\n          x={BAND_X}\n          y=\"0\"\n          width={BAND_W}\n          height={BAND_H}\n          fill={`url(#${hueId})`}\n          mask={`url(#${flatMaskId})`}\n          className=\"md:hidden\"\n        />\n        <rect\n          x={BAND_X}\n          y=\"0\"\n          width={BAND_W}\n          height={BAND_H}\n          fill={`url(#${hueId})`}\n          mask={`url(#${archMaskId})`}\n          className=\"hidden md:block\"\n        />\n      </motion.svg>\n    </div>\n  );\n}\n"]}

package/dist/index.d.cts

@@ -15,6 +15,7 @@ export { FadeIn, Stagger, StaggerItem } from './components/fade-in.js';
 export type { FeatureCardProps } from './components/feature-card.js';
 export { FeatureCard } from './components/feature-card.js';
 export { ArrowLeft, ArrowRight, FlowDiamond, FlowNode, FlowPill, JoinArrow, SplitArrow, TurnDown, } from './components/flowchart-parts.js';
+export { default as FooterGlow } from './components/footer-glow.js';
 export type { GlossyButtonProps } from './components/glossy-button.js';
 export { GlossyButton, glossyButtonVariants } from './components/glossy-button.js';
 export { default as Grainient } from './components/grainient.js';

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export { FadeIn, Stagger, StaggerItem } from './components/fade-in.js';
 export type { FeatureCardProps } from './components/feature-card.js';
 export { FeatureCard } from './components/feature-card.js';
 export { ArrowLeft, ArrowRight, FlowDiamond, FlowNode, FlowPill, JoinArrow, SplitArrow, TurnDown, } from './components/flowchart-parts.js';
+export { default as FooterGlow } from './components/footer-glow.js';
 export type { GlossyButtonProps } from './components/glossy-button.js';
 export { GlossyButton, glossyButtonVariants } from './components/glossy-button.js';
 export { default as Grainient } from './components/grainient.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1185,6 +1185,105 @@ function FlowDiamond({ label, sub, className }) {
     ] })
   ] });
 }
+var VB_W = 1270;
+var VB_H = 600;
+var BAND_TOP = 0;
+var OVERHANG = "0.5rem";
+var OVERSHOOT = 60;
+var BAND_X = -OVERSHOOT;
+var BAND_W = VB_W + OVERSHOOT * 2;
+var BAND_H = VB_H + OVERSHOOT;
+var HUES = [188, 210, 232, 250, 262, 285, 308, 330, 350];
+var ARCH_RX = VB_W * 1.35;
+var FADE_STOPS = [
+  { offset: 0, opacity: 1 },
+  { offset: 0.62, opacity: 1 },
+  { offset: 0.81, opacity: 0.8 },
+  { offset: 0.93, opacity: 0.35 },
+  { offset: 1, opacity: 0 }
+];
+var MAX_OPACITY = 0.85;
+function FadeStops() {
+  return FADE_STOPS.map(({ offset, opacity }) => /* @__PURE__ */ jsxRuntime.jsx("stop", { offset, style: { stopColor: "#fff", stopOpacity: opacity } }, offset));
+}
+function FooterGlow() {
+  const ref = react.useRef(null);
+  const reduce = framerMotion.useReducedMotion();
+  const uid = react.useId();
+  const hueId = `footer-glow-hue-${uid}`;
+  const flatFadeId = `footer-glow-fade-flat-${uid}`;
+  const archFadeId = `footer-glow-fade-arch-${uid}`;
+  const flatMaskId = `footer-glow-mask-flat-${uid}`;
+  const archMaskId = `footer-glow-mask-arch-${uid}`;
+  const { scrollYProgress } = framerMotion.useScroll({ target: ref, offset: ["start end", "start center"] });
+  const y = framerMotion.useTransform(scrollYProgress, [0, 0.7, 1], ["55%", "5%", "2%"]);
+  const opacity = framerMotion.useTransform(scrollYProgress, [0, 0.65], [0, MAX_OPACITY]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "aria-hidden": "true",
+      className: "pointer-events-none absolute inset-x-0 bottom-0 overflow-hidden",
+      style: { height: `calc(100% + ${OVERHANG})` },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        framerMotion.motion.svg,
+        {
+          viewBox: `0 0 ${VB_W} ${VB_H}`,
+          preserveAspectRatio: "none",
+          className: "h-full w-full",
+          overflow: "visible",
+          style: reduce ? { opacity: MAX_OPACITY } : { y, opacity },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("linearGradient", { id: hueId, x1: "0", y1: "0", x2: "1", y2: "0", children: HUES.map((hue, i) => /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: i / (HUES.length - 1), style: { stopColor: `hsl(${hue} 95% 55%)` } }, hue)) }),
+              /* @__PURE__ */ jsxRuntime.jsx("linearGradient", { id: flatFadeId, gradientUnits: "userSpaceOnUse", x1: "0", y1: VB_H, x2: "0", y2: BAND_TOP, children: /* @__PURE__ */ jsxRuntime.jsx(FadeStops, {}) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "radialGradient",
+                {
+                  id: archFadeId,
+                  gradientUnits: "userSpaceOnUse",
+                  cx: VB_W / 2,
+                  cy: VB_H,
+                  r: VB_H - BAND_TOP,
+                  gradientTransform: `translate(${VB_W / 2} 0) scale(${ARCH_RX / (VB_H - BAND_TOP)} 1) translate(${-VB_W / 2} 0)`,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(FadeStops, {})
+                }
+              ),
+              [
+                { id: flatMaskId, fill: flatFadeId },
+                { id: archMaskId, fill: archFadeId }
+              ].map(({ id, fill }) => /* @__PURE__ */ jsxRuntime.jsx("mask", { id, maskUnits: "userSpaceOnUse", x: BAND_X, y: "0", width: BAND_W, height: BAND_H, children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: BAND_X, y: "0", width: BAND_W, height: BAND_H, fill: `url(#${fill})` }) }, id))
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                x: BAND_X,
+                y: "0",
+                width: BAND_W,
+                height: BAND_H,
+                fill: `url(#${hueId})`,
+                mask: `url(#${flatMaskId})`,
+                className: "md:hidden"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                x: BAND_X,
+                y: "0",
+                width: BAND_W,
+                height: BAND_H,
+                fill: `url(#${hueId})`,
+                mask: `url(#${archMaskId})`,
+                className: "hidden md:block"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
 var glossLayer = cn(
   "pointer-events-none absolute inset-0 z-[-1] rounded-[inherit]",
   "[background-color:var(--btn-face)] [box-shadow:var(--shadow-button)]",
@@ -2672,6 +2771,7 @@ exports.FeatureCard = FeatureCard;
 exports.FlowDiamond = FlowDiamond;
 exports.FlowNode = FlowNode;
 exports.FlowPill = FlowPill;
+exports.FooterGlow = FooterGlow;
 exports.GlossyButton = GlossyButton;
 exports.Grainient = grainient_default;
 exports.Highlighter = Highlighter;