@caffeinebounce/ui 0.62.2

package/dist/marketing-3d.js

@@ -0,0 +1,553 @@
+'use strict';
+
+var chunkJAE45W2T_js = require('./chunk-JAE45W2T.js');
+var chunk6TGV2DNP_js = require('./chunk-6TGV2DNP.js');
+require('./chunk-Q256HRYD.js');
+var chunkADIDI7AJ_js = require('./chunk-ADIDI7AJ.js');
+var fiber = require('@react-three/fiber');
+var React = require('react');
+var THREE = require('three');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('motion/react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
+
+var CanvasRevealEffect = ({
+  animationSpeed = 0.4,
+  opacities = [0.3, 0.3, 0.3, 0.5, 0.5, 0.5, 0.8, 0.8, 0.8, 1],
+  colors = [[0, 255, 255]],
+  containerClassName,
+  dotSize,
+  showGradient = true
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkADIDI7AJ_js.cn("h-full relative w-full", containerClassName),
+      style: { backgroundColor: "transparent" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+          DotMatrix,
+          {
+            colors: colors ?? [[0, 255, 255]],
+            dotSize: dotSize ?? 3,
+            opacities: opacities ?? [0.3, 0.3, 0.3, 0.5, 0.5, 0.5, 0.8, 0.8, 0.8, 1],
+            shader: `
+              float animation_speed_factor = ${animationSpeed.toFixed(1)};
+              float intro_offset = distance(u_resolution / 2.0 / u_total_size, st2) * 0.01 + (random(st2) * 0.15);
+              opacity *= step(intro_offset, u_time * animation_speed_factor);
+              opacity *= clamp((1.0 - step(intro_offset + 0.1, u_time * animation_speed_factor)) * 1.25, 1.0, 1.25);
+            `,
+            center: ["x", "y"]
+          }
+        ) }),
+        showGradient && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute inset-0",
+            style: {
+              background: "linear-gradient(to top, var(--color-card, hsl(var(--card))), transparent 84%)"
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+var DotMatrix = ({
+  colors = [[0, 0, 0]],
+  opacities = [0.04, 0.04, 0.04, 0.04, 0.04, 0.08, 0.08, 0.08, 0.08, 0.14],
+  totalSize = 4,
+  dotSize = 2,
+  shader = "",
+  center = ["x", "y"]
+}) => {
+  const uniforms = React__default.default.useMemo(() => {
+    let colorsArray = [
+      colors[0],
+      colors[0],
+      colors[0],
+      colors[0],
+      colors[0],
+      colors[0]
+    ];
+    if (colors.length === 2) {
+      colorsArray = [
+        colors[0],
+        colors[0],
+        colors[0],
+        colors[1],
+        colors[1],
+        colors[1]
+      ];
+    } else if (colors.length === 3) {
+      colorsArray = [
+        colors[0],
+        colors[0],
+        colors[1],
+        colors[1],
+        colors[2],
+        colors[2]
+      ];
+    }
+    return {
+      u_colors: {
+        value: colorsArray.map((color) => [
+          color[0] / 255,
+          color[1] / 255,
+          color[2] / 255
+        ]),
+        type: "uniform3fv"
+      },
+      u_opacities: {
+        value: opacities,
+        type: "uniform1fv"
+      },
+      u_total_size: {
+        value: totalSize,
+        type: "uniform1f"
+      },
+      u_dot_size: {
+        value: dotSize,
+        type: "uniform1f"
+      }
+    };
+  }, [colors, opacities, totalSize, dotSize]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Shader,
+    {
+      source: `
+        precision mediump float;
+        in vec2 fragCoord;
+
+        uniform float u_time;
+        uniform float u_opacities[10];
+        uniform vec3 u_colors[6];
+        uniform float u_total_size;
+        uniform float u_dot_size;
+        uniform vec2 u_resolution;
+        out vec4 fragColor;
+        float PHI = 1.61803398874989484820459;
+        float random(vec2 xy) {
+            return fract(tan(distance(xy * PHI, xy) * 0.5) * xy.x);
+        }
+        float map(float value, float min1, float max1, float min2, float max2) {
+            return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
+        }
+        void main() {
+            vec2 st = fragCoord.xy;
+            ${center.includes("x") ? "st.x -= abs(floor((mod(u_resolution.x, u_total_size) - u_dot_size) * 0.5));" : ""}
+            ${center.includes("y") ? "st.y -= abs(floor((mod(u_resolution.y, u_total_size) - u_dot_size) * 0.5));" : ""}
+      float opacity = step(0.0, st.x);
+      opacity *= step(0.0, st.y);
+
+      vec2 st2 = vec2(int(st.x / u_total_size), int(st.y / u_total_size));
+
+      float frequency = 5.0;
+      float show_offset = random(st2);
+      float rand = random(st2 * floor((u_time / frequency) + show_offset + frequency) + 1.0);
+      opacity *= u_opacities[int(rand * 10.0)];
+      opacity *= 1.0 - step(u_dot_size / u_total_size, fract(st.x / u_total_size));
+      opacity *= 1.0 - step(u_dot_size / u_total_size, fract(st.y / u_total_size));
+
+      vec3 color = u_colors[int(show_offset * 6.0)];
+
+      ${shader}
+
+      fragColor = vec4(color, opacity);
+      fragColor.rgb *= fragColor.a;
+        }`,
+      uniforms,
+      maxFps: 60
+    }
+  );
+};
+var ShaderMaterial2 = ({
+  source,
+  uniforms,
+  maxFps = 60
+}) => {
+  const { size } = fiber.useThree();
+  const ref = React.useRef(null);
+  let lastFrameTime = 0;
+  fiber.useFrame((state) => {
+    if (!ref.current) return;
+    const timestamp = "elapsed" in state ? state.elapsed : state.clock?.getElapsedTime?.() ?? 0;
+    if (timestamp - lastFrameTime < 1 / maxFps) {
+      return;
+    }
+    lastFrameTime = timestamp;
+    const material2 = ref.current.material;
+    const timeLocation = material2.uniforms.u_time;
+    timeLocation.value = timestamp;
+  });
+  const getUniforms = () => {
+    const preparedUniforms = {};
+    for (const uniformName in uniforms) {
+      const uniform = uniforms[uniformName];
+      switch (uniform.type) {
+        case "uniform1f":
+          preparedUniforms[uniformName] = { value: uniform.value, type: "1f" };
+          break;
+        case "uniform3f":
+          preparedUniforms[uniformName] = {
+            value: new THREE__namespace.Vector3().fromArray(uniform.value),
+            type: "3f"
+          };
+          break;
+        case "uniform1fv":
+          preparedUniforms[uniformName] = { value: uniform.value, type: "1fv" };
+          break;
+        case "uniform3fv":
+          preparedUniforms[uniformName] = {
+            value: uniform.value.map(
+              (v) => new THREE__namespace.Vector3().fromArray(v)
+            ),
+            type: "3fv"
+          };
+          break;
+        case "uniform2f":
+          preparedUniforms[uniformName] = {
+            value: new THREE__namespace.Vector2().fromArray(uniform.value),
+            type: "2f"
+          };
+          break;
+        default:
+          console.error(`Invalid uniform type for '${uniformName}'.`);
+          break;
+      }
+    }
+    preparedUniforms["u_time"] = { value: 0, type: "1f" };
+    preparedUniforms["u_resolution"] = {
+      value: new THREE__namespace.Vector2(size.width * 2, size.height * 2)
+    };
+    return preparedUniforms;
+  };
+  const material = React.useMemo(() => {
+    const materialObject = new THREE__namespace.ShaderMaterial({
+      vertexShader: `
+      precision mediump float;
+      in vec2 coordinates;
+      uniform vec2 u_resolution;
+      out vec2 fragCoord;
+      void main(){
+        float x = position.x;
+        float y = position.y;
+        gl_Position = vec4(x, y, 0.0, 1.0);
+        fragCoord = (position.xy + vec2(1.0)) * 0.5 * u_resolution;
+        fragCoord.y = u_resolution.y - fragCoord.y;
+      }
+      `,
+      fragmentShader: source,
+      uniforms: getUniforms(),
+      glslVersion: THREE__namespace.GLSL3,
+      blending: THREE__namespace.CustomBlending,
+      blendSrc: THREE__namespace.SrcAlphaFactor,
+      blendDst: THREE__namespace.OneFactor
+    });
+    return materialObject;
+  }, [size.width, size.height, source]);
+  return React__default.default.createElement(
+    "mesh",
+    { ref },
+    React__default.default.createElement("planeGeometry", { args: [2, 2] }),
+    React__default.default.createElement("primitive", {
+      object: material,
+      attach: "material"
+    })
+  );
+};
+var Shader = ({ source, uniforms, maxFps = 60 }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    fiber.Canvas,
+    {
+      className: "absolute inset-0  h-full w-full",
+      gl: { alpha: true },
+      style: { background: "transparent" },
+      children: /* @__PURE__ */ jsxRuntime.jsx(ShaderMaterial2, { source, uniforms, maxFps })
+    }
+  );
+};
+var CardSpotlight = ({
+  children,
+  radius = 350,
+  color,
+  className,
+  ...props
+}) => {
+  const mouseX = react.useMotionValue(0);
+  const mouseY = react.useMotionValue(0);
+  const [isDark, setIsDark] = React.useState(true);
+  React.useEffect(() => {
+    const html = document.documentElement;
+    const check = () => setIsDark(html.classList.contains("dark"));
+    check();
+    const obs = new MutationObserver(check);
+    obs.observe(html, { attributes: true, attributeFilter: ["class"] });
+    return () => obs.disconnect();
+  }, []);
+  function handleMouseMove({
+    currentTarget,
+    clientX,
+    clientY
+  }) {
+    const { left, top } = currentTarget.getBoundingClientRect();
+    mouseX.set(clientX - left);
+    mouseY.set(clientY - top);
+  }
+  const [isHovering, setIsHovering] = React.useState(false);
+  const handleMouseEnter = () => setIsHovering(true);
+  const handleMouseLeave = () => setIsHovering(false);
+  const resolvedColor = color ?? (isDark ? "#262626" : "rgba(129,140,248,0.08)");
+  const dotColors = isDark ? [
+    [59, 130, 246],
+    [139, 92, 246]
+  ] : [
+    [129, 140, 248],
+    [165, 148, 249]
+  ];
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: spotlight effect requires mouse tracking on the card container
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: chunkADIDI7AJ_js.cn("group/spotlight p-10 rounded-md relative", className),
+        style: {
+          backgroundColor: "var(--color-card, hsl(var(--card)))",
+          borderWidth: "1px",
+          borderStyle: "solid",
+          borderColor: "var(--color-border, hsl(var(--border)))"
+        },
+        onMouseMove: handleMouseMove,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            react.motion.div,
+            {
+              className: "pointer-events-none absolute z-0 -inset-px rounded-md opacity-0 transition duration-300 group-hover/spotlight:opacity-100",
+              style: {
+                backgroundColor: resolvedColor,
+                maskImage: react.useMotionTemplate`
+            radial-gradient(
+              ${radius}px circle at ${mouseX}px ${mouseY}px,
+              white,
+              transparent 80%
+            )
+          `
+              },
+              children: isHovering && /* @__PURE__ */ jsxRuntime.jsx(
+                CanvasRevealEffect,
+                {
+                  animationSpeed: 5,
+                  containerClassName: "bg-transparent absolute inset-0 pointer-events-none",
+                  colors: dotColors,
+                  dotSize: 3,
+                  showGradient: false
+                }
+              )
+            }
+          ),
+          children
+        ]
+      }
+    )
+  );
+};
+function BentoGridSection({
+  heading,
+  subheading,
+  items,
+  tone = "muted",
+  padding = "lg",
+  className,
+  containerClassName,
+  spotlight = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "section",
+    {
+      className: chunkJAE45W2T_js.cx(
+        chunkJAE45W2T_js.sectionToneClasses[tone],
+        chunkJAE45W2T_js.sectionPaddingClasses[padding],
+        className
+      ),
+      "data-slot": "bento-grid-section",
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkJAE45W2T_js.cx("mx-auto max-w-6xl px-6", containerClassName), children: [
+        heading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto mb-10 max-w-2xl text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: "text-3xl font-semibold tracking-tight md:text-4xl",
+              style: {
+                color: "var(--color-foreground, hsl(var(--foreground)))"
+              },
+              children: heading
+            }
+          ),
+          subheading ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "mt-3",
+              style: {
+                color: "var(--color-foreground, hsl(var(--foreground)))"
+              },
+              children: subheading
+            }
+          ) : null
+        ] }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3 auto-rows-[minmax(11rem,auto)]", children: items.map(
+          (item) => spotlight ? /* @__PURE__ */ jsxRuntime.jsx(
+            CardSpotlight,
+            {
+              className: chunkJAE45W2T_js.cx(
+                "rounded-xl p-0 flex flex-col",
+                item.colSpan === 2 && "md:col-span-2",
+                item.rowSpan === 2 && "md:row-span-2"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-20 flex flex-col flex-1", children: [
+                item.illustration ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: chunkJAE45W2T_js.cx(
+                      "w-full overflow-hidden",
+                      item.headerClassName
+                    ),
+                    "aria-hidden": "true",
+                    children: item.illustration
+                  }
+                ) : null,
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col p-5", children: [
+                  item.icon ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "mb-3",
+                      style: {
+                        color: "var(--color-foreground, hsl(var(--foreground)))"
+                      },
+                      "aria-hidden": "true",
+                      children: item.icon
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "h3",
+                    {
+                      className: "text-lg font-medium",
+                      style: {
+                        color: "var(--color-foreground, hsl(var(--foreground)))"
+                      },
+                      children: item.title
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: "mt-2 flex-1 text-sm leading-6",
+                      style: {
+                        color: "var(--color-foreground, hsl(var(--foreground)))",
+                        opacity: 0.75
+                      },
+                      children: item.description
+                    }
+                  ),
+                  item.cta ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntime.jsx(chunk6TGV2DNP_js.Button, { asChild: true, variant: "outline", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.cta.href, children: item.cta.label }) }) }) : null
+                ] })
+              ] })
+            },
+            item.id
+          ) : /* @__PURE__ */ jsxRuntime.jsxs(
+            "article",
+            {
+              className: chunkJAE45W2T_js.cx(
+                "overflow-hidden rounded-xl shadow-sm transition-colors flex flex-col",
+                item.colSpan === 2 && "md:col-span-2",
+                item.rowSpan === 2 && "md:row-span-2"
+              ),
+              style: {
+                backgroundColor: "var(--color-card, hsl(var(--card)))",
+                borderWidth: "1px",
+                borderStyle: "solid",
+                borderColor: "var(--color-border, hsl(var(--border)))"
+              },
+              children: [
+                item.illustration ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: chunkJAE45W2T_js.cx(
+                      "w-full overflow-hidden",
+                      item.headerClassName
+                    ),
+                    "aria-hidden": "true",
+                    children: item.illustration
+                  }
+                ) : null,
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col p-5", children: [
+                  item.icon ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "mb-3",
+                      style: {
+                        color: "var(--color-foreground, hsl(var(--foreground)))"
+                      },
+                      "aria-hidden": "true",
+                      children: item.icon
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "h3",
+                    {
+                      className: "text-lg font-medium",
+                      style: {
+                        color: "var(--color-foreground, hsl(var(--foreground)))"
+                      },
+                      children: item.title
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: "mt-2 flex-1 text-sm leading-6",
+                      style: {
+                        color: "var(--color-foreground, hsl(var(--foreground)))",
+                        opacity: 0.75
+                      },
+                      children: item.description
+                    }
+                  ),
+                  item.cta ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntime.jsx(chunk6TGV2DNP_js.Button, { asChild: true, variant: "outline", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.cta.href, children: item.cta.label }) }) }) : null
+                ] })
+              ]
+            },
+            item.id
+          )
+        ) })
+      ] })
+    }
+  );
+}
+
+exports.BentoGridSection = BentoGridSection;
+exports.CanvasRevealEffect = CanvasRevealEffect;
+exports.CardSpotlight = CardSpotlight;