feat: add interactive stacked cube components with hover descriptions
This commit is contained in:
308
src/components/ui/dotted-glow-background.tsx
Normal file
308
src/components/ui/dotted-glow-background.tsx
Normal file
@@ -0,0 +1,308 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
|
||||
type DottedGlowBackgroundProps = {
|
||||
className?: string;
|
||||
/** distance between dot centers in pixels */
|
||||
gap?: number;
|
||||
/** base radius of each dot in CSS px */
|
||||
radius?: number;
|
||||
/** dot color (will pulse by alpha) */
|
||||
color?: string;
|
||||
/** optional dot color for dark mode */
|
||||
darkColor?: string;
|
||||
/** shadow/glow color for bright dots */
|
||||
glowColor?: string;
|
||||
/** optional glow color for dark mode */
|
||||
darkGlowColor?: string;
|
||||
/** optional CSS variable name for light dot color (e.g. --color-zinc-900) */
|
||||
colorLightVar?: string;
|
||||
/** optional CSS variable name for dark dot color (e.g. --color-zinc-100) */
|
||||
colorDarkVar?: string;
|
||||
/** optional CSS variable name for light glow color */
|
||||
glowColorLightVar?: string;
|
||||
/** optional CSS variable name for dark glow color */
|
||||
glowColorDarkVar?: string;
|
||||
/** global opacity for the whole layer */
|
||||
opacity?: number;
|
||||
/** background radial fade opacity (0 = transparent background) */
|
||||
backgroundOpacity?: number;
|
||||
/** minimum per-dot speed in rad/s */
|
||||
speedMin?: number;
|
||||
/** maximum per-dot speed in rad/s */
|
||||
speedMax?: number;
|
||||
/** global speed multiplier for all dots */
|
||||
speedScale?: number;
|
||||
};
|
||||
|
||||
/**
|
||||
* Canvas-based dotted background that randomly glows and dims.
|
||||
* - Uses a stable grid of dots.
|
||||
* - Each dot gets its own phase + speed producing organic shimmering.
|
||||
* - Handles high-DPI and resizes via ResizeObserver.
|
||||
*/
|
||||
export function DottedGlowBackground({
|
||||
className,
|
||||
gap = 12,
|
||||
radius = 2,
|
||||
color = "rgba(0,0,0,0.7)",
|
||||
darkColor,
|
||||
glowColor = "rgba(0, 170, 255, 0.85)",
|
||||
darkGlowColor,
|
||||
colorLightVar,
|
||||
colorDarkVar,
|
||||
glowColorLightVar,
|
||||
glowColorDarkVar,
|
||||
opacity = 0.6,
|
||||
backgroundOpacity = 0,
|
||||
speedMin = 0.4,
|
||||
speedMax = 1.3,
|
||||
speedScale = 1,
|
||||
}: DottedGlowBackgroundProps) {
|
||||
const canvasRef = useRef<HTMLCanvasElement | null>(null);
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
const [resolvedColor, setResolvedColor] = useState<string>(color);
|
||||
const [resolvedGlowColor, setResolvedGlowColor] = useState<string>(glowColor);
|
||||
|
||||
// Resolve CSS variable value from the container or root
|
||||
const resolveCssVariable = (
|
||||
el: Element,
|
||||
variableName?: string,
|
||||
): string | null => {
|
||||
if (!variableName) return null;
|
||||
const normalized = variableName.startsWith("--")
|
||||
? variableName
|
||||
: `--${variableName}`;
|
||||
const fromEl = getComputedStyle(el as Element)
|
||||
.getPropertyValue(normalized)
|
||||
.trim();
|
||||
if (fromEl) return fromEl;
|
||||
const root = document.documentElement;
|
||||
const fromRoot = getComputedStyle(root).getPropertyValue(normalized).trim();
|
||||
return fromRoot || null;
|
||||
};
|
||||
|
||||
const detectDarkMode = (): boolean => {
|
||||
const root = document.documentElement;
|
||||
if (root.classList.contains("dark")) return true;
|
||||
if (root.classList.contains("light")) return false;
|
||||
return (
|
||||
window.matchMedia &&
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
);
|
||||
};
|
||||
|
||||
// Keep resolved colors in sync with theme changes and prop updates
|
||||
useEffect(() => {
|
||||
const container = containerRef.current ?? document.documentElement;
|
||||
|
||||
const compute = () => {
|
||||
const isDark = detectDarkMode();
|
||||
|
||||
let nextColor: string = color;
|
||||
let nextGlow: string = glowColor;
|
||||
|
||||
if (isDark) {
|
||||
const varDot = resolveCssVariable(container, colorDarkVar);
|
||||
const varGlow = resolveCssVariable(container, glowColorDarkVar);
|
||||
nextColor = varDot || darkColor || nextColor;
|
||||
nextGlow = varGlow || darkGlowColor || nextGlow;
|
||||
} else {
|
||||
const varDot = resolveCssVariable(container, colorLightVar);
|
||||
const varGlow = resolveCssVariable(container, glowColorLightVar);
|
||||
nextColor = varDot || nextColor;
|
||||
nextGlow = varGlow || nextGlow;
|
||||
}
|
||||
|
||||
setResolvedColor(nextColor);
|
||||
setResolvedGlowColor(nextGlow);
|
||||
};
|
||||
|
||||
compute();
|
||||
|
||||
const mql = window.matchMedia
|
||||
? window.matchMedia("(prefers-color-scheme: dark)")
|
||||
: null;
|
||||
const handleMql = () => compute();
|
||||
mql?.addEventListener?.("change", handleMql);
|
||||
|
||||
const mo = new MutationObserver(() => compute());
|
||||
mo.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ["class", "style"],
|
||||
});
|
||||
|
||||
return () => {
|
||||
mql?.removeEventListener?.("change", handleMql);
|
||||
mo.disconnect();
|
||||
};
|
||||
}, [
|
||||
color,
|
||||
darkColor,
|
||||
glowColor,
|
||||
darkGlowColor,
|
||||
colorLightVar,
|
||||
colorDarkVar,
|
||||
glowColorLightVar,
|
||||
glowColorDarkVar,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
const el = canvasRef.current;
|
||||
const container = containerRef.current;
|
||||
if (!el || !container) return;
|
||||
|
||||
const ctx = el.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
let raf = 0;
|
||||
let stopped = false;
|
||||
|
||||
const dpr = Math.max(1, window.devicePixelRatio || 1);
|
||||
|
||||
const resize = () => {
|
||||
const { width, height } = container.getBoundingClientRect();
|
||||
el.width = Math.max(1, Math.floor(width * dpr));
|
||||
el.height = Math.max(1, Math.floor(height * dpr));
|
||||
el.style.width = `${Math.floor(width)}px`;
|
||||
el.style.height = `${Math.floor(height)}px`;
|
||||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||
};
|
||||
|
||||
const ro = new ResizeObserver(resize);
|
||||
ro.observe(container);
|
||||
resize();
|
||||
|
||||
// Precompute dot metadata for a medium-sized grid and regenerate on resize
|
||||
let dots: { x: number; y: number; phase: number; speed: number }[] = [];
|
||||
|
||||
const regenDots = () => {
|
||||
dots = [];
|
||||
const { width, height } = container.getBoundingClientRect();
|
||||
const cols = Math.ceil(width / gap) + 2;
|
||||
const rows = Math.ceil(height / gap) + 2;
|
||||
const min = Math.min(speedMin, speedMax);
|
||||
const max = Math.max(speedMin, speedMax);
|
||||
for (let i = -1; i < cols; i++) {
|
||||
for (let j = -1; j < rows; j++) {
|
||||
const x = i * gap + (j % 2 === 0 ? 0 : gap * 0.5); // offset every other row
|
||||
const y = j * gap;
|
||||
// Randomize phase and speed slightly per dot
|
||||
const phase = Math.random() * Math.PI * 2;
|
||||
const span = Math.max(max - min, 0);
|
||||
const speed = min + Math.random() * span; // configurable rad/s
|
||||
dots.push({ x, y, phase, speed });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const regenThrottled = () => {
|
||||
regenDots();
|
||||
};
|
||||
|
||||
regenDots();
|
||||
|
||||
let last = performance.now();
|
||||
|
||||
const draw = (now: number) => {
|
||||
if (stopped) return;
|
||||
const dt = (now - last) / 1000; // seconds
|
||||
last = now;
|
||||
const { width, height } = container.getBoundingClientRect();
|
||||
|
||||
ctx.clearRect(0, 0, el.width, el.height);
|
||||
ctx.globalAlpha = opacity;
|
||||
|
||||
// optional subtle background fade for depth (defaults to 0 = transparent)
|
||||
if (backgroundOpacity > 0) {
|
||||
const grad = ctx.createRadialGradient(
|
||||
width * 0.5,
|
||||
height * 0.4,
|
||||
Math.min(width, height) * 0.1,
|
||||
width * 0.5,
|
||||
height * 0.5,
|
||||
Math.max(width, height) * 0.7,
|
||||
);
|
||||
grad.addColorStop(0, "rgba(0,0,0,0)");
|
||||
grad.addColorStop(
|
||||
1,
|
||||
`rgba(0,0,0,${Math.min(Math.max(backgroundOpacity, 0), 1)})`,
|
||||
);
|
||||
ctx.fillStyle = grad as unknown as CanvasGradient;
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
}
|
||||
|
||||
// animate dots
|
||||
ctx.save();
|
||||
ctx.fillStyle = resolvedColor;
|
||||
|
||||
const time = (now / 1000) * Math.max(speedScale, 0);
|
||||
for (let i = 0; i < dots.length; i++) {
|
||||
const d = dots[i];
|
||||
// Linear triangle wave 0..1..0 for linear glow/dim
|
||||
const mod = (time * d.speed + d.phase) % 2;
|
||||
const lin = mod < 1 ? mod : 2 - mod; // 0..1..0
|
||||
const a = 0.25 + 0.55 * lin; // 0.25..0.8 linearly
|
||||
|
||||
// draw glow when bright
|
||||
if (a > 0.6) {
|
||||
const glow = (a - 0.6) / 0.4; // 0..1
|
||||
ctx.shadowColor = resolvedGlowColor;
|
||||
ctx.shadowBlur = 6 * glow;
|
||||
} else {
|
||||
ctx.shadowColor = "transparent";
|
||||
ctx.shadowBlur = 0;
|
||||
}
|
||||
|
||||
ctx.globalAlpha = a * opacity;
|
||||
ctx.beginPath();
|
||||
ctx.arc(d.x, d.y, radius, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
ctx.restore();
|
||||
|
||||
raf = requestAnimationFrame(draw);
|
||||
};
|
||||
|
||||
const handleResize = () => {
|
||||
resize();
|
||||
regenThrottled();
|
||||
};
|
||||
|
||||
window.addEventListener("resize", handleResize);
|
||||
raf = requestAnimationFrame(draw);
|
||||
|
||||
return () => {
|
||||
stopped = true;
|
||||
cancelAnimationFrame(raf);
|
||||
window.removeEventListener("resize", handleResize);
|
||||
ro.disconnect();
|
||||
};
|
||||
}, [
|
||||
gap,
|
||||
radius,
|
||||
resolvedColor,
|
||||
resolvedGlowColor,
|
||||
opacity,
|
||||
backgroundOpacity,
|
||||
speedMin,
|
||||
speedMax,
|
||||
speedScale,
|
||||
]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={className}
|
||||
style={{ position: "absolute", inset: 0 }}
|
||||
>
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
style={{ display: "block", width: "100%", height: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DottedGlowBackground;
|
||||
Reference in New Issue
Block a user