@allbluecn/web-app 0.3.0

package/src/components/magicui/hexagon-pattern.tsx

@@ -0,0 +1,328 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useId } from "react"
+
+import { cn } from "@/lib/utils"
+
+interface HexagonPatternProps extends React.SVGProps<SVGSVGElement> {
+  /**
+   * The radius of each hexagon (center to vertex).
+   * @default 40
+   */
+  radius?: number
+  /**
+   * Spacing in pixels between adjacent hexagons.
+   * The tile grows by this amount while the visual radius stays fixed,
+   * so the gap is evenly distributed on all sides of each hexagon.
+   * @default 0
+   */
+  gap?: number
+  /**
+   * Offset applied to the pattern origin on the x-axis.
+   * @default -1
+   */
+  x?: number
+  /**
+   * Offset applied to the pattern origin on the y-axis.
+   * @default -1
+   */
+  y?: number
+  /**
+   * Controls the orientation of the hexagons.
+   * - `"horizontal"` — flat-top hexagons tiled in a horizontal honeycomb grid.
+   * - `"vertical"` — pointy-top hexagons tiled in a vertical honeycomb grid.
+   * @default "horizontal"
+   */
+  direction?: "horizontal" | "vertical"
+  /**
+   * SVG stroke-dasharray applied to each hexagon outline.
+   * @default "0"
+   */
+  strokeDasharray?: string
+  /**
+   * Array of [col, row] coordinates for hexagons that should be highlighted
+   * (filled) on top of the repeating pattern — mirrors the `squares` prop of
+   * GridPattern.
+   */
+  hexagons?: Array<[col: number, row: number]>
+  /**
+   * Tailwind fill class for highlighted hexagons.
+   * @default "fill-gray-400/30"
+   */
+  hexagonFill?: string
+  className?: string
+  [key: string]: unknown
+}
+
+type HexPoint = readonly [number, number]
+
+function hexVertexList(
+  cx: number,
+  cy: number,
+  r: number,
+  direction: "horizontal" | "vertical"
+): HexPoint[] {
+  const startAngle = direction === "horizontal" ? 0 : 30
+  return Array.from({ length: 6 }, (_, i) => {
+    const angle = ((startAngle + i * 60) * Math.PI) / 180
+    const x = cx + r * Math.cos(angle)
+    const y = cy + r * Math.sin(angle)
+    return [Math.round(x * 1e10) / 1e10, Math.round(y * 1e10) / 1e10] as const
+  })
+}
+
+function hexPoints(
+  cx: number,
+  cy: number,
+  r: number,
+  direction: "horizontal" | "vertical"
+): string {
+  return hexVertexList(cx, cy, r, direction)
+    .map(([px, py]) => `${px},${py}`)
+    .join(" ")
+}
+
+function edgeLexKey(a: HexPoint, b: HexPoint): string {
+  const [p, q] =
+    a[0] < b[0] || (a[0] === b[0] && a[1] <= b[1]) ? [a, b] : [b, a]
+  return `${p[0].toFixed(6)},${p[1].toFixed(6)}|${q[0].toFixed(6)},${q[1].toFixed(6)}`
+}
+
+function collectUniqueHexEdges(
+  centers: [number, number][],
+  r: number,
+  direction: "horizontal" | "vertical"
+): [HexPoint, HexPoint][] {
+  const seen = new Set<string>()
+  const edges: [HexPoint, HexPoint][] = []
+  for (const [cx, cy] of centers) {
+    const verts = hexVertexList(cx, cy, r, direction)
+    for (let i = 0; i < 6; i++) {
+      const a = verts[i]
+      const b = verts[(i + 1) % 6]
+      const key = edgeLexKey(a, b)
+      if (!seen.has(key)) {
+        seen.add(key)
+        edges.push([a, b])
+      }
+    }
+  }
+  return edges
+}
+
+function isSolidStrokeDasharray(strokeDasharray: string): boolean {
+  const t = strokeDasharray.trim()
+  return t === "" || t === "none" || t === "0"
+}
+
+function getHexSpacing(
+  r: number,
+  direction: "horizontal" | "vertical",
+  gap: number
+): {
+  colStep: number
+  rowStep: number
+  tileW: number
+  tileH: number
+} {
+  const sqrt3 = Math.sqrt(3)
+
+  // `gap` should match the visible edge-to-edge spacing, so we add it along
+  // the shared-edge normal instead of directly on the raw x/y axes.
+  if (direction === "horizontal") {
+    const colStep = (3 * r) / 2 + (sqrt3 * gap) / 2
+    const rowStep = sqrt3 * r + gap
+
+    return {
+      colStep,
+      rowStep,
+      tileW: colStep * 2,
+      tileH: rowStep,
+    }
+  }
+
+  const colStep = sqrt3 * r + gap
+  const rowStep = (3 * r) / 2 + (sqrt3 * gap) / 2
+
+  return {
+    colStep,
+    rowStep,
+    tileW: colStep,
+    tileH: rowStep * 2,
+  }
+}
+
+function getTileGeometry(
+  r: number,
+  direction: "horizontal" | "vertical",
+  gap: number
+): {
+  tileW: number
+  tileH: number
+  centers: [number, number][]
+} {
+  if (direction === "horizontal") {
+    const { colStep, rowStep, tileW, tileH } = getHexSpacing(r, direction, gap)
+
+    const canonical: [number, number][] = [
+      [colStep / 2, rowStep / 2],
+      [(colStep * 3) / 2, rowStep],
+    ]
+
+    const centers: [number, number][] = []
+    for (const [cx, cy] of canonical) {
+      centers.push([cx, cy])
+      if (cy - r < 0) centers.push([cx, cy + tileH])
+      if (cy + r > tileH) centers.push([cx, cy - tileH])
+      if (cx - r < 0) centers.push([cx + tileW, cy])
+      if (cx + r > tileW) centers.push([cx - tileW, cy])
+      if (cy - r < 0 && cx - r < 0) centers.push([cx + tileW, cy + tileH])
+      if (cy - r < 0 && cx + r > tileW) centers.push([cx - tileW, cy + tileH])
+      if (cy + r > tileH && cx - r < 0) centers.push([cx + tileW, cy - tileH])
+      if (cy + r > tileH && cx + r > tileW)
+        centers.push([cx - tileW, cy - tileH])
+    }
+
+    return { tileW, tileH, centers }
+  } else {
+    const { colStep, rowStep, tileW, tileH } = getHexSpacing(r, direction, gap)
+
+    const canonical: [number, number][] = [
+      [colStep / 2, rowStep / 2],
+      [colStep, (rowStep * 3) / 2],
+    ]
+
+    const centers: [number, number][] = []
+    for (const [cx, cy] of canonical) {
+      centers.push([cx, cy])
+      if (cy - r < 0) centers.push([cx, cy + tileH])
+      if (cy + r > tileH) centers.push([cx, cy - tileH])
+      if (cx - r < 0) centers.push([cx + tileW, cy])
+      if (cx + r > tileW) centers.push([cx - tileW, cy])
+      if (cy - r < 0 && cx - r < 0) centers.push([cx + tileW, cy + tileH])
+      if (cy - r < 0 && cx + r > tileW) centers.push([cx - tileW, cy + tileH])
+      if (cy + r > tileH && cx - r < 0) centers.push([cx + tileW, cy - tileH])
+      if (cy + r > tileH && cx + r > tileW)
+        centers.push([cx - tileW, cy - tileH])
+    }
+
+    return { tileW, tileH, centers }
+  }
+}
+
+function hexCenter(
+  col: number,
+  row: number,
+  r: number,
+  direction: "horizontal" | "vertical",
+  gap: number
+): [number, number] {
+  if (direction === "horizontal") {
+    const { colStep, rowStep } = getHexSpacing(r, direction, gap)
+    const x = col * colStep + colStep / 2
+    const y = row * rowStep + rowStep / 2 + (col % 2 !== 0 ? rowStep / 2 : 0)
+    return [x, y]
+  } else {
+    const { colStep, rowStep } = getHexSpacing(r, direction, gap)
+    const x = col * colStep + colStep / 2 + (row % 2 !== 0 ? colStep / 2 : 0)
+    const y = row * rowStep + rowStep / 2
+    return [x, y]
+  }
+}
+
+export function HexagonPattern({
+  radius = 40,
+  gap = 0,
+  x = -1,
+  y = -1,
+  strokeDasharray = "0",
+  direction = "horizontal",
+  hexagons,
+  hexagonFill,
+  className,
+  ...props
+}: HexagonPatternProps) {
+  const id = useId()
+
+  const { tileW, tileH, centers } = getTileGeometry(radius, direction, gap)
+  const solidStroke = isSolidStrokeDasharray(strokeDasharray)
+  const dashedEdges = solidStroke
+    ? null
+    : collectUniqueHexEdges(centers, radius, direction)
+
+  return (
+    <svg
+      aria-hidden="true"
+      className={cn(
+        "pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/20",
+        className
+      )}
+      {...props}
+    >
+      <defs>
+        <pattern
+          id={id}
+          width={tileW}
+          height={tileH}
+          patternUnits="userSpaceOnUse"
+          x={x}
+          y={y}
+        >
+          {solidStroke
+            ? centers.map(([cx, cy]) => (
+                <polygon
+                  className="fill-none"
+                  key={`${cx}-${cy}`}
+                  points={hexPoints(cx, cy, radius, direction)}
+                  strokeDasharray={strokeDasharray}
+                />
+              ))
+            : dashedEdges?.map(([a, b]) => (
+                <line
+                  className="fill-none"
+                  key={edgeLexKey(a, b)}
+                  x1={a[0]}
+                  x2={b[0]}
+                  y1={a[1]}
+                  y2={b[1]}
+                  strokeDasharray={strokeDasharray}
+                />
+              ))}
+        </pattern>
+      </defs>
+
+      <rect width="100%" height="100%" fill={`url(#${id})`} stroke="none" />
+
+      {hexagons && hexagons.length > 0 && (
+        <svg aria-hidden="true" className="overflow-visible" x={x} y={y}>
+          {hexagons.map(([col, row]) => {
+            const [cx, cy] = hexCenter(col, row, radius, direction, gap)
+            return (
+              <polygon
+                key={`${col}-${row}`}
+                points={hexPoints(cx, cy, radius - 1, direction)}
+                strokeWidth="0"
+                className={cn(hexagonFill ?? "fill-gray-400/30")}
+              />
+            )
+          })}
+        </svg>
+      )}
+    </svg>
+  )
+}

package/src/components/magicui/interactive-grid-pattern.tsx

@@ -0,0 +1,118 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import React, { useState, useRef, useEffect } from "react"
+
+import { cn } from "@/lib/utils"
+
+/**
+ * InteractiveGridPattern is a component that renders a grid pattern with interactive squares.
+ *
+ * @param width - The width of each square.
+ * @param height - The height of each square.
+ * @param squares - The number of squares in the grid. The first element is the number of horizontal squares, and the second element is the number of vertical squares.
+ * @param className - The class name of the grid.
+ * @param squaresClassName - The class name of the squares.
+ */
+interface InteractiveGridPatternProps extends React.SVGProps<SVGSVGElement> {
+  width?: number
+  height?: number
+  squares?: [number, number] // [horizontal, vertical]
+  className?: string
+  squaresClassName?: string
+}
+
+/**
+ * The InteractiveGridPattern component.
+ *
+ * @see InteractiveGridPatternProps for the props interface.
+ * @returns A React component.
+ */
+export function InteractiveGridPattern({
+  width = 40,
+  height = 40,
+  squares = [24, 24],
+  className,
+  squaresClassName,
+  ...props
+}: InteractiveGridPatternProps) {
+  const [horizontal, vertical] = squares
+  const [hoveredSquare, setHoveredSquare] = useState<number | null>(null)
+  const svgRef = useRef<SVGSVGElement>(null)
+
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      const svg = svgRef.current
+      if (!svg) return
+      const rect = svg.getBoundingClientRect()
+      const x = e.clientX - rect.left
+      const y = e.clientY - rect.top
+      if (x < 0 || y < 0 || x > rect.width || y > rect.height) {
+        setHoveredSquare(null)
+        return
+      }
+      const scaleX = (width * horizontal) / rect.width
+      const scaleY = (height * vertical) / rect.height
+      const col = Math.floor((x * scaleX) / width)
+      const row = Math.floor((y * scaleY) / height)
+      if (col >= 0 && col < horizontal && row >= 0 && row < vertical) {
+        setHoveredSquare(row * horizontal + col)
+      } else {
+        setHoveredSquare(null)
+      }
+    }
+    const onLeave = () => setHoveredSquare(null)
+    window.addEventListener("mousemove", onMove)
+    document.addEventListener("mouseleave", onLeave)
+    return () => {
+      window.removeEventListener("mousemove", onMove)
+      document.removeEventListener("mouseleave", onLeave)
+    }
+  }, [width, height, horizontal, vertical])
+
+  return (
+    <svg
+      ref={svgRef}
+      viewBox={`0 0 ${width * horizontal} ${height * vertical}`}
+      preserveAspectRatio="xMidYMid slice"
+      className={cn(
+        "absolute inset-0 h-full w-full",
+        className
+      )}
+      {...props}
+    >
+      {Array.from({ length: horizontal * vertical }).map((_, index) => {
+        const x = (index % horizontal) * width
+        const y = Math.floor(index / horizontal) * height
+        return (
+          <rect
+            key={index}
+            x={x}
+            y={y}
+            width={width}
+            height={height}
+            className={cn(
+              "transition-all duration-100 ease-in-out not-[&:hover]:duration-1000",
+              hoveredSquare === index ? "fill-primary/20" : "fill-transparent",
+              squaresClassName
+            )}
+          />
+        )
+      })}
+    </svg>
+  )
+}

package/src/components/magicui/interactive-hover-button.tsx

@@ -0,0 +1,47 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export function InteractiveHoverButton({
+  children,
+  className,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      className={cn(
+        "group bg-background relative w-auto cursor-pointer overflow-hidden rounded-full border p-2 px-6 text-center font-semibold",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex items-center justify-center gap-2">
+        <div className="bg-primary h-2 w-2 rounded-full scale-100 transition-all duration-300 group-hover:scale-[100.8]"></div>
+        <span className="inline-block translate-x-0 transition-all duration-300 group-hover:translate-x-12 group-hover:opacity-0">
+          {children}
+        </span>
+      </div>
+      <div className="text-primary-foreground absolute top-0 z-10 flex h-full w-full translate-x-12 items-center justify-center gap-2 opacity-0 transition-all duration-300 group-hover:-translate-x-5 group-hover:opacity-100">
+        <span>{children}</span>
+        <ArrowRight />
+      </div>
+    </button>
+  )
+}

package/src/components/magicui/light-rays.tsx

@@ -0,0 +1,164 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useEffect, useState, type CSSProperties } from "react"
+import { m } from "motion/react"
+
+import { cn } from "@/lib/utils"
+
+interface LightRaysProps extends React.HTMLAttributes<HTMLDivElement> {
+  ref?: React.Ref<HTMLDivElement>
+  count?: number
+  color?: string
+  blur?: number
+  speed?: number
+  length?: string
+}
+
+type LightRay = {
+  id: string
+  left: number
+  rotate: number
+  width: number
+  swing: number
+  delay: number
+  duration: number
+  intensity: number
+}
+
+const createRays = (count: number, cycle: number): LightRay[] => {
+  if (count <= 0) return []
+
+  return Array.from({ length: count }, (_, index) => {
+    const left = 8 + Math.random() * 84
+    const rotate = -28 + Math.random() * 56
+    const width = 160 + Math.random() * 160
+    const swing = 0.8 + Math.random() * 1.8
+    const delay = Math.random() * cycle
+    const duration = cycle * (0.75 + Math.random() * 0.5)
+    const intensity = 0.6 + Math.random() * 0.5
+
+    return {
+      id: `${index}-${Math.round(left * 10)}`,
+      left,
+      rotate,
+      width,
+      swing,
+      delay,
+      duration,
+      intensity,
+    }
+  })
+}
+
+const Ray = ({
+  left,
+  rotate,
+  width,
+  swing,
+  delay,
+  duration,
+  intensity,
+}: LightRay) => {
+  return (
+    <m.div
+      className="pointer-events-none absolute -top-[12%] left-[var(--ray-left)] h-[var(--light-rays-length)] w-[var(--ray-width)] origin-top -translate-x-1/2 rounded-full bg-linear-to-b from-[color-mix(in_srgb,var(--light-rays-color)_70%,transparent)] to-transparent opacity-0 mix-blend-screen blur-[var(--light-rays-blur)]"
+      style={
+        {
+          "--ray-left": `${left}%`,
+          "--ray-width": `${width}px`,
+        } as CSSProperties
+      }
+      initial={{ rotate: rotate }}
+      animate={{
+        opacity: [0, intensity, 0],
+        rotate: [rotate - swing, rotate + swing, rotate - swing],
+      }}
+      transition={{
+        duration: duration,
+        repeat: Infinity,
+        ease: "easeInOut",
+        delay: delay,
+        repeatDelay: duration * 0.1,
+      }}
+    />
+  )
+}
+
+export function LightRays({
+  className,
+  style,
+  count = 7,
+  color = "rgba(160, 210, 255, 0.2)",
+  blur = 36,
+  speed = 14,
+  length = "70vh",
+  ref,
+  ...props
+}: LightRaysProps) {
+  const [rays, setRays] = useState<LightRay[]>([])
+  const cycleDuration = Math.max(speed, 0.1)
+
+  useEffect(() => {
+    setRays(createRays(count, cycleDuration))
+  }, [count, cycleDuration])
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "pointer-events-none absolute inset-0 isolate overflow-hidden rounded-[inherit]",
+        className
+      )}
+      style={
+        {
+          "--light-rays-color": color,
+          "--light-rays-blur": `${blur}px`,
+          "--light-rays-length": length,
+          ...style,
+        } as CSSProperties
+      }
+      {...props}
+    >
+      <div className="absolute inset-0 overflow-hidden">
+        <div
+          aria-hidden
+          className="absolute inset-0 opacity-60"
+          style={
+            {
+              background:
+                "radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--light-rays-color) 45%, transparent), transparent 70%)",
+            } as CSSProperties
+          }
+        />
+        <div
+          aria-hidden
+          className="absolute inset-0 opacity-60"
+          style={
+            {
+              background:
+                "radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--light-rays-color) 35%, transparent), transparent 75%)",
+            } as CSSProperties
+          }
+        />
+        {rays.map((ray) => (
+          <Ray key={ray.id} {...ray} />
+        ))}
+      </div>
+    </div>
+  )
+}