@caffeinebounce/ui 0.62.2

package/dist/marketing-3d.mjs

@@ -0,0 +1,526 @@
+import { cx, sectionToneClasses, sectionPaddingClasses } from './chunk-T5R6HUDG.mjs';
+import { Button } from './chunk-VBD4Q5LL.mjs';
+import './chunk-MHZXUOGN.mjs';
+import { cn } from './chunk-IMKLN273.mjs';
+import { Canvas, useThree, useFrame } from '@react-three/fiber';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import * as THREE from 'three';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMotionValue, motion, useMotionTemplate } from 'motion/react';
+
+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__ */ jsxs(
+    "div",
+    {
+      className: cn("h-full relative w-full", containerClassName),
+      style: { backgroundColor: "transparent" },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "h-full w-full", children: /* @__PURE__ */ 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__ */ 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.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__ */ 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 } = useThree();
+  const ref = useRef(null);
+  let lastFrameTime = 0;
+  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.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.Vector3().fromArray(v)
+            ),
+            type: "3fv"
+          };
+          break;
+        case "uniform2f":
+          preparedUniforms[uniformName] = {
+            value: new THREE.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.Vector2(size.width * 2, size.height * 2)
+    };
+    return preparedUniforms;
+  };
+  const material = useMemo(() => {
+    const materialObject = new THREE.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.GLSL3,
+      blending: THREE.CustomBlending,
+      blendSrc: THREE.SrcAlphaFactor,
+      blendDst: THREE.OneFactor
+    });
+    return materialObject;
+  }, [size.width, size.height, source]);
+  return React.createElement(
+    "mesh",
+    { ref },
+    React.createElement("planeGeometry", { args: [2, 2] }),
+    React.createElement("primitive", {
+      object: material,
+      attach: "material"
+    })
+  );
+};
+var Shader = ({ source, uniforms, maxFps = 60 }) => {
+  return /* @__PURE__ */ jsx(
+    Canvas,
+    {
+      className: "absolute inset-0  h-full w-full",
+      gl: { alpha: true },
+      style: { background: "transparent" },
+      children: /* @__PURE__ */ jsx(ShaderMaterial2, { source, uniforms, maxFps })
+    }
+  );
+};
+var CardSpotlight = ({
+  children,
+  radius = 350,
+  color,
+  className,
+  ...props
+}) => {
+  const mouseX = useMotionValue(0);
+  const mouseY = useMotionValue(0);
+  const [isDark, setIsDark] = useState(true);
+  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] = 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__ */ jsxs(
+      "div",
+      {
+        className: 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__ */ jsx(
+            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: useMotionTemplate`
+            radial-gradient(
+              ${radius}px circle at ${mouseX}px ${mouseY}px,
+              white,
+              transparent 80%
+            )
+          `
+              },
+              children: isHovering && /* @__PURE__ */ 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__ */ jsx(
+    "section",
+    {
+      className: cx(
+        sectionToneClasses[tone],
+        sectionPaddingClasses[padding],
+        className
+      ),
+      "data-slot": "bento-grid-section",
+      children: /* @__PURE__ */ jsxs("div", { className: cx("mx-auto max-w-6xl px-6", containerClassName), children: [
+        heading ? /* @__PURE__ */ jsxs("div", { className: "mx-auto mb-10 max-w-2xl text-center", children: [
+          /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: "text-3xl font-semibold tracking-tight md:text-4xl",
+              style: {
+                color: "var(--color-foreground, hsl(var(--foreground)))"
+              },
+              children: heading
+            }
+          ),
+          subheading ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "mt-3",
+              style: {
+                color: "var(--color-foreground, hsl(var(--foreground)))"
+              },
+              children: subheading
+            }
+          ) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3 auto-rows-[minmax(11rem,auto)]", children: items.map(
+          (item) => spotlight ? /* @__PURE__ */ jsx(
+            CardSpotlight,
+            {
+              className: cx(
+                "rounded-xl p-0 flex flex-col",
+                item.colSpan === 2 && "md:col-span-2",
+                item.rowSpan === 2 && "md:row-span-2"
+              ),
+              children: /* @__PURE__ */ jsxs("div", { className: "relative z-20 flex flex-col flex-1", children: [
+                item.illustration ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cx(
+                      "w-full overflow-hidden",
+                      item.headerClassName
+                    ),
+                    "aria-hidden": "true",
+                    children: item.illustration
+                  }
+                ) : null,
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col p-5", children: [
+                  item.icon ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "mb-3",
+                      style: {
+                        color: "var(--color-foreground, hsl(var(--foreground)))"
+                      },
+                      "aria-hidden": "true",
+                      children: item.icon
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsx(
+                    "h3",
+                    {
+                      className: "text-lg font-medium",
+                      style: {
+                        color: "var(--color-foreground, hsl(var(--foreground)))"
+                      },
+                      children: item.title
+                    }
+                  ),
+                  /* @__PURE__ */ 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__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", size: "sm", children: /* @__PURE__ */ jsx("a", { href: item.cta.href, children: item.cta.label }) }) }) : null
+                ] })
+              ] })
+            },
+            item.id
+          ) : /* @__PURE__ */ jsxs(
+            "article",
+            {
+              className: 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__ */ jsx(
+                  "div",
+                  {
+                    className: cx(
+                      "w-full overflow-hidden",
+                      item.headerClassName
+                    ),
+                    "aria-hidden": "true",
+                    children: item.illustration
+                  }
+                ) : null,
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col p-5", children: [
+                  item.icon ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "mb-3",
+                      style: {
+                        color: "var(--color-foreground, hsl(var(--foreground)))"
+                      },
+                      "aria-hidden": "true",
+                      children: item.icon
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsx(
+                    "h3",
+                    {
+                      className: "text-lg font-medium",
+                      style: {
+                        color: "var(--color-foreground, hsl(var(--foreground)))"
+                      },
+                      children: item.title
+                    }
+                  ),
+                  /* @__PURE__ */ 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__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", size: "sm", children: /* @__PURE__ */ jsx("a", { href: item.cta.href, children: item.cta.label }) }) }) : null
+                ] })
+              ]
+            },
+            item.id
+          )
+        ) })
+      ] })
+    }
+  );
+}
+
+export { BentoGridSection, CanvasRevealEffect, CardSpotlight };