@allbluecn/web-app 0.3.0

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

@@ -0,0 +1,173 @@
+// 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, { useEffect, useId, useRef, useState } from "react"
+import { m } from "motion/react"
+
+import { cn } from "@/lib/utils"
+
+/**
+ *  DotPattern Component Props
+ *
+ * @param {number} [width=16] - The horizontal spacing between dots
+ * @param {number} [height=16] - The vertical spacing between dots
+ * @param {number} [x=0] - The x-offset of the entire pattern
+ * @param {number} [y=0] - The y-offset of the entire pattern
+ * @param {number} [cx=1] - The x-offset of individual dots
+ * @param {number} [cy=1] - The y-offset of individual dots
+ * @param {number} [cr=1] - The radius of each dot
+ * @param {string} [className] - Additional CSS classes to apply to the SVG container
+ * @param {boolean} [glow=false] - Whether dots should have a glowing animation effect
+ */
+interface DotPatternProps extends React.SVGProps<SVGSVGElement> {
+  width?: number
+  height?: number
+  x?: number
+  y?: number
+  cx?: number
+  cy?: number
+  cr?: number
+  className?: string
+  glow?: boolean
+  [key: string]: unknown
+}
+
+/**
+ * DotPattern Component
+ *
+ * A React component that creates an animated or static dot pattern background using SVG.
+ * The pattern automatically adjusts to fill its container and can optionally display glowing dots.
+ *
+ * @component
+ *
+ * @see DotPatternProps for the props interface.
+ *
+ * @example
+ * // Basic usage
+ * <DotPattern />
+ *
+ * // With glowing effect and custom spacing
+ * <DotPattern
+ *   width={20}
+ *   height={20}
+ *   glow={true}
+ *   className="opacity-50"
+ * />
+ *
+ * @notes
+ * - The component is client-side only ("use client")
+ * - Automatically responds to container size changes
+ * - When glow is enabled, dots will animate with random delays and durations
+ * - Uses Motion for animations
+ * - Dots color can be controlled via the text color utility classes
+ */
+
+export function DotPattern({
+  width = 16,
+  height = 16,
+  x = 0,
+  y = 0,
+  cx = 1,
+  cy = 1,
+  cr = 1,
+  className,
+  glow = false,
+  ...props
+}: DotPatternProps) {
+  const id = useId()
+  const containerRef = useRef<SVGSVGElement>(null)
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
+
+  useEffect(() => {
+    const updateDimensions = () => {
+      if (containerRef.current) {
+        const { width, height } = containerRef.current.getBoundingClientRect()
+        setDimensions({ width, height })
+      }
+    }
+
+    updateDimensions()
+    window.addEventListener("resize", updateDimensions)
+    return () => window.removeEventListener("resize", updateDimensions)
+  }, [])
+
+  const dots = Array.from(
+    {
+      length:
+        Math.ceil(dimensions.width / width) *
+        Math.ceil(dimensions.height / height),
+    },
+    (_, i) => {
+      const col = i % Math.ceil(dimensions.width / width)
+      const row = Math.floor(i / Math.ceil(dimensions.width / width))
+      return {
+        x: col * width + cx + x,
+        y: row * height + cy + y,
+        delay: Math.random() * 5,
+        duration: Math.random() * 3 + 2,
+      }
+    }
+  )
+
+  return (
+    <svg
+      ref={containerRef}
+      aria-hidden="true"
+      className={cn(
+        "pointer-events-none absolute inset-0 h-full w-full text-neutral-400/80",
+        className
+      )}
+      {...props}
+    >
+      <defs>
+        <radialGradient id={`${id}-gradient`}>
+          <stop offset="0%" stopColor="currentColor" stopOpacity="1" />
+          <stop offset="100%" stopColor="currentColor" stopOpacity="0" />
+        </radialGradient>
+      </defs>
+      {dots.map((dot) => (
+        <m.circle
+          key={`${dot.x}-${dot.y}`}
+          cx={dot.x}
+          cy={dot.y}
+          r={cr}
+          fill={glow ? `url(#${id}-gradient)` : "currentColor"}
+          initial={glow ? { opacity: 0.4, scale: 1 } : {}}
+          animate={
+            glow
+              ? {
+                  opacity: [0.4, 1, 0.4],
+                  scale: [1, 1.5, 1],
+                }
+              : {}
+          }
+          transition={
+            glow
+              ? {
+                  duration: dot.duration,
+                  repeat: Infinity,
+                  repeatType: "reverse",
+                  delay: dot.delay,
+                  ease: "easeInOut",
+                }
+              : {}
+          }
+        />
+      ))}
+    </svg>
+  )
+}

package/src/components/magicui/flickering-grid.tsx

@@ -0,0 +1,213 @@
+// 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, { useCallback, useEffect, useMemo, useRef, useState } from "react"
+
+import { cn } from "@/lib/utils"
+
+interface FlickeringGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  squareSize?: number
+  gridGap?: number
+  flickerChance?: number
+  color?: string
+  width?: number
+  height?: number
+  className?: string
+  maxOpacity?: number
+}
+
+export const FlickeringGrid: React.FC<FlickeringGridProps> = ({
+  squareSize = 4,
+  gridGap = 6,
+  flickerChance = 0.3,
+  color = "rgb(0, 0, 0)",
+  width,
+  height,
+  className,
+  maxOpacity = 0.3,
+  ...props
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [isInView, setIsInView] = useState(false)
+  const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 })
+
+  const memoizedColor = useMemo(() => {
+    const toRGBA = (color: string) => {
+      if (typeof window === "undefined") {
+        return `rgba(0, 0, 0,`
+      }
+      const canvas = document.createElement("canvas")
+      canvas.width = canvas.height = 1
+      const ctx = canvas.getContext("2d")
+      if (!ctx) return "rgba(255, 0, 0,"
+      ctx.fillStyle = color
+      ctx.fillRect(0, 0, 1, 1)
+      const [r, g, b] = Array.from(ctx.getImageData(0, 0, 1, 1).data)
+      return `rgba(${r}, ${g}, ${b},`
+    }
+    return toRGBA(color)
+  }, [color])
+
+  const setupCanvas = useCallback(
+    (canvas: HTMLCanvasElement, width: number, height: number) => {
+      const dpr = window.devicePixelRatio || 1
+      canvas.width = width * dpr
+      canvas.height = height * dpr
+      canvas.style.width = `${width}px`
+      canvas.style.height = `${height}px`
+      const cols = Math.ceil(width / (squareSize + gridGap))
+      const rows = Math.ceil(height / (squareSize + gridGap))
+
+      const squares = new Float32Array(cols * rows)
+      for (let i = 0; i < squares.length; i++) {
+        squares[i] = Math.random() * maxOpacity
+      }
+
+      return { cols, rows, squares, dpr }
+    },
+    [squareSize, gridGap, maxOpacity]
+  )
+
+  const updateSquares = useCallback(
+    (squares: Float32Array, deltaTime: number) => {
+      for (let i = 0; i < squares.length; i++) {
+        if (Math.random() < flickerChance * deltaTime) {
+          squares[i] = Math.random() * maxOpacity
+        }
+      }
+    },
+    [flickerChance, maxOpacity]
+  )
+
+  const drawGrid = useCallback(
+    (
+      ctx: CanvasRenderingContext2D,
+      width: number,
+      height: number,
+      cols: number,
+      rows: number,
+      squares: Float32Array,
+      dpr: number
+    ) => {
+      ctx.clearRect(0, 0, width, height)
+      ctx.fillStyle = "transparent"
+      ctx.fillRect(0, 0, width, height)
+
+      for (let i = 0; i < cols; i++) {
+        for (let j = 0; j < rows; j++) {
+          const opacity = squares[i * rows + j]
+          ctx.fillStyle = `${memoizedColor}${opacity})`
+          ctx.fillRect(
+            i * (squareSize + gridGap) * dpr,
+            j * (squareSize + gridGap) * dpr,
+            squareSize * dpr,
+            squareSize * dpr
+          )
+        }
+      }
+    },
+    [memoizedColor, squareSize, gridGap]
+  )
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    const container = containerRef.current
+    const ctx = canvas?.getContext("2d") ?? null
+    let animationFrameId: number | null = null
+    let resizeObserver: ResizeObserver | null = null
+    let intersectionObserver: IntersectionObserver | null = null
+    let gridParams: ReturnType<typeof setupCanvas> | null = null
+
+    if (canvas && container && ctx) {
+      const updateCanvasSize = () => {
+        const newWidth = width || container.clientWidth
+        const newHeight = height || container.clientHeight
+        setCanvasSize({ width: newWidth, height: newHeight })
+        gridParams = setupCanvas(canvas, newWidth, newHeight)
+      }
+
+      updateCanvasSize()
+
+      let lastTime = 0
+      const animate = (time: number) => {
+        if (!isInView || !gridParams) return
+
+        const deltaTime = (time - lastTime) / 1000
+        lastTime = time
+
+        updateSquares(gridParams.squares, deltaTime)
+        drawGrid(
+          ctx,
+          canvas.width,
+          canvas.height,
+          gridParams.cols,
+          gridParams.rows,
+          gridParams.squares,
+          gridParams.dpr
+        )
+        animationFrameId = requestAnimationFrame(animate)
+      }
+
+      resizeObserver = new ResizeObserver(() => {
+        updateCanvasSize()
+      })
+      resizeObserver.observe(container)
+
+      intersectionObserver = new IntersectionObserver(
+        ([entry]) => {
+          setIsInView(entry.isIntersecting)
+        },
+        { threshold: 0 }
+      )
+      intersectionObserver.observe(canvas)
+
+      if (isInView) {
+        animationFrameId = requestAnimationFrame(animate)
+      }
+    }
+
+    return () => {
+      if (animationFrameId !== null) {
+        cancelAnimationFrame(animationFrameId)
+      }
+      if (resizeObserver) {
+        resizeObserver.disconnect()
+      }
+      if (intersectionObserver) {
+        intersectionObserver.disconnect()
+      }
+    }
+  }, [setupCanvas, updateSquares, drawGrid, width, height, isInView])
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(`h-full w-full ${className}`)}
+      {...props}
+    >
+      <canvas
+        ref={canvasRef}
+        className="pointer-events-none"
+        style={{
+          width: canvasSize.width,
+          height: canvasSize.height,
+        }}
+      />
+    </div>
+  )
+}

package/src/components/magicui/glyph-matrix.tsx

@@ -0,0 +1,176 @@
+// 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, useRef } from "react"
+
+import { cn } from "@/lib/utils"
+
+interface GlyphMatrixProps extends React.HTMLAttributes<HTMLCanvasElement> {
+  /** Characters to randomly pick from */
+  glyphs?: string
+  /** Cell size in px (also font size) */
+  cellSize?: number
+  /** Probability (0-1) a cell mutates each tick */
+  mutationRate?: number
+  /** Tick interval in ms */
+  interval?: number
+  /** Fade out toward bottom (0 = no fade) */
+  fadeBottom?: number
+  /** Glyph color (any CSS color). Pass a theme-aware value from the consumer. */
+  color?: string
+}
+
+/**
+ * GlyphMatrix — an animated grid of subtly shifting glyphs.
+ * Pass a `color` prop (e.g. driven by next-themes) to adapt it to
+ * light and dark modes.
+ */
+export function GlyphMatrix({
+  glyphs = "01·•+*/\\<>=",
+  cellSize = 14,
+  mutationRate = 0.04,
+  interval = 90,
+  className,
+  fadeBottom = 0.6,
+  color = "#6B7280",
+  style,
+  ...props
+}: GlyphMatrixProps) {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null)
+  // Current glyph color as RGBA (a in 0-1). Kept in a ref so a color change
+  // (e.g. theme toggle) recolors the next frame without restarting the
+  // animation. Defaults to #6B7280.
+  const rgbaRef = useRef({ r: 107, g: 114, b: 128, a: 1 })
+
+  // Resolve the CSS color string to RGBA (handles hex, rgb, hsl, oklch, ...).
+  useEffect(() => {
+    const probe = document.createElement("canvas")
+    probe.width = 1
+    probe.height = 1
+    const probeCtx = probe.getContext("2d")
+    if (!probeCtx) return
+    // Seed with the default so an invalid color falls back to it: the 2d
+    // context keeps the previous fillStyle when assigned an invalid value
+    // instead of silently turning black.
+    probeCtx.fillStyle = "#6B7280"
+    probeCtx.fillStyle = color
+    probeCtx.fillRect(0, 0, 1, 1)
+    const [r, g, b, a] = probeCtx.getImageData(0, 0, 1, 1).data
+    rgbaRef.current = { r, g, b, a: a / 255 }
+  }, [color])
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return
+
+    let cols = 0
+    let rows = 0
+    let cells: string[] = []
+    let alphas: number[] = []
+    let raf = 0
+    let last = 0
+    let stopped = false
+
+    const resize = () => {
+      const dpr = window.devicePixelRatio || 1
+      const { clientWidth: w, clientHeight: h } = canvas
+
+      canvas.width = w * dpr
+      canvas.height = h * dpr
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+
+      cols = Math.ceil(w / cellSize)
+      rows = Math.ceil(h / cellSize)
+
+      cells = new Array(cols * rows)
+        .fill(0)
+        .map(() => glyphs[Math.floor(Math.random() * glyphs.length)])
+      alphas = new Array(cols * rows)
+        .fill(0)
+        .map(() => 0.05 + Math.random() * 0.35)
+    }
+
+    const draw = () => {
+      const { clientWidth: w, clientHeight: h } = canvas
+      ctx.clearRect(0, 0, w, h)
+
+      ctx.font = `${cellSize - 2}px ui-monospace, SFMono-Regular, Menlo, monospace`
+      ctx.textBaseline = "top"
+
+      const { r, g, b, a: colorAlpha } = rgbaRef.current
+      for (let y = 0; y < rows; y++) {
+        const fade = fadeBottom > 0 ? 1 - (y / rows) * fadeBottom : 1
+        for (let x = 0; x < cols; x++) {
+          const i = y * cols + x
+          const a = alphas[i] * fade * colorAlpha
+          ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`
+          ctx.fillText(cells[i], x * cellSize, y * cellSize)
+        }
+      }
+    }
+
+    const tick = (t: number) => {
+      if (stopped) return
+
+      if (t - last >= interval) {
+        last = t
+
+        const total = cols * rows
+        const mutations = Math.max(1, Math.floor(total * mutationRate))
+
+        for (let n = 0; n < mutations; n++) {
+          const i = Math.floor(Math.random() * total)
+          cells[i] = glyphs[Math.floor(Math.random() * glyphs.length)]
+          alphas[i] = 0.05 + Math.random() * 0.45
+        }
+
+        draw()
+      }
+
+      raf = requestAnimationFrame(tick)
+    }
+
+    resize()
+    draw()
+    raf = requestAnimationFrame(tick)
+
+    const ro = new ResizeObserver(() => {
+      resize()
+      draw()
+    })
+    ro.observe(canvas)
+
+    return () => {
+      stopped = true
+      cancelAnimationFrame(raf)
+      ro.disconnect()
+    }
+  }, [glyphs, cellSize, mutationRate, interval, fadeBottom])
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className={cn("pointer-events-none", className)}
+      style={{ width: "100%", height: "100%", display: "block", ...style }}
+      aria-hidden="true"
+      {...props}
+    />
+  )
+}

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

@@ -0,0 +1 @@
+export * from '@allbluecn/ui/grid-pattern'