forked from emre/www_projectmycelium_com
feat: add dark theme support and update homepage content
- Integrated next-themes for dark mode theming with default dark theme - Added new UI components (GridBlink, Spotlight) and enhanced world map with cyan glow effects - Updated homepage messaging to emphasize Mycelium as a living network with new audience imagery
This commit is contained in:
64
src/components/ui/GridBlink.tsx
Normal file
64
src/components/ui/GridBlink.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
export function GridBlink() {
|
||||
const svgRef = useRef<SVGSVGElement>(null);
|
||||
const maxActive = 3; // ✅ limit active squares
|
||||
|
||||
useEffect(() => {
|
||||
const svg = svgRef.current;
|
||||
if (!svg) return;
|
||||
|
||||
const squares = Array.from(svg.querySelectorAll<SVGRectElement>(".blink-square"));
|
||||
|
||||
function scheduleBlink() {
|
||||
// ✅ only blink if we have too few active
|
||||
const currentlyActive = squares.filter(sq => sq.classList.contains("active"));
|
||||
if (currentlyActive.length < maxActive) {
|
||||
const sq = squares[Math.floor(Math.random() * squares.length)];
|
||||
sq.classList.add("active");
|
||||
|
||||
const duration = 800 + Math.random() * 1000; // ✅ slower fade-out
|
||||
setTimeout(() => {
|
||||
sq.classList.remove("active");
|
||||
}, duration);
|
||||
}
|
||||
|
||||
// ✅ slower scheduling
|
||||
setTimeout(scheduleBlink, 300 + Math.random() * 600);
|
||||
}
|
||||
|
||||
scheduleBlink();
|
||||
}, []);
|
||||
|
||||
const rows = 20;
|
||||
const cols = 32;
|
||||
const size = 40;
|
||||
|
||||
return (
|
||||
<svg
|
||||
ref={svgRef}
|
||||
className="pointer-events-none absolute inset-0 z-0"
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
>
|
||||
{Array.from({ length: rows * cols }).map((_, i) => {
|
||||
const x = (i % cols) * size;
|
||||
const y = Math.floor(i / cols) * size;
|
||||
return (
|
||||
<rect
|
||||
key={i}
|
||||
className="blink-square"
|
||||
x={x}
|
||||
y={y}
|
||||
width={size}
|
||||
height={size}
|
||||
fill="transparent"
|
||||
stroke="#efefef"
|
||||
strokeWidth="1"
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
63
src/components/ui/spotlight.tsx
Normal file
63
src/components/ui/spotlight.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type SpotlightProps = {
|
||||
className?: string;
|
||||
fill?: string;
|
||||
};
|
||||
|
||||
export const Spotlight = ({ className, fill }: SpotlightProps) => {
|
||||
return (
|
||||
<svg
|
||||
className={cn(
|
||||
"animate-spotlight pointer-events-none absolute z-[1] h-[169%] w-[138%] lg:w-[84%] opacity-100 mix-blend-screen",
|
||||
className
|
||||
)}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 3787 2842"
|
||||
fill="none"
|
||||
>
|
||||
<g filter="url(#filter)">
|
||||
<ellipse
|
||||
cx="1924.71"
|
||||
cy="273.501"
|
||||
rx="1924.71"
|
||||
ry="273.501"
|
||||
transform="matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)"
|
||||
fill={fill || "url(#spotlightGradient)"}
|
||||
fillOpacity="1"
|
||||
/>
|
||||
</g>
|
||||
|
||||
<defs>
|
||||
{/* ✅ Cyan radial gradient */}
|
||||
<radialGradient
|
||||
id="spotlightGradient"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(2200 1600) rotate(90) scale(1800 2800)"
|
||||
>
|
||||
<stop offset="0%" stopColor="#00eaff" stopOpacity="0.95" />
|
||||
<stop offset="40%" stopColor="#00eaff" stopOpacity="0.35" />
|
||||
<stop offset="100%" stopColor="#00eaff" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
|
||||
<filter
|
||||
id="filter"
|
||||
x="0.860352"
|
||||
y="0.838989"
|
||||
width="3785.16"
|
||||
height="2840.26"
|
||||
filterUnits="userSpaceOnUse"
|
||||
colorInterpolationFilters="sRGB"
|
||||
>
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="151" result="effect1_foregroundBlur" />
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
@@ -14,152 +14,111 @@ interface MapProps {
|
||||
|
||||
export default function WorldMap({
|
||||
dots = [],
|
||||
lineColor = "#06b6d4",
|
||||
lineColor = "#06b6d4", // cyan-500
|
||||
}: MapProps) {
|
||||
const svgRef = useRef<SVGSVGElement>(null);
|
||||
const map = new DottedMap({ height: 100, grid: "diagonal" });
|
||||
|
||||
// ✅ Force dark-dotted map theme
|
||||
const map = new DottedMap({ height: 100, grid: "diagonal" });
|
||||
const svgMap = map.getSVG({
|
||||
radius: 0.22,
|
||||
color: "#FFFFFF40", // Hardcoded for dark theme
|
||||
color: "#06b6d480", // cyan-500 at 50% opacity
|
||||
shape: "circle",
|
||||
backgroundColor: "black", // Hardcoded for dark theme
|
||||
backgroundColor: "#111111",
|
||||
});
|
||||
|
||||
// ✅ Point projection stays the same
|
||||
const projectPoint = (lat: number, lng: number) => {
|
||||
const x = (lng + 180) * (800 / 360);
|
||||
const y = (90 - lat) * (400 / 180);
|
||||
return { x, y };
|
||||
};
|
||||
|
||||
const createCurvedPath = (
|
||||
start: { x: number; y: number },
|
||||
end: { x: number; y: number }
|
||||
) => {
|
||||
const createCurvedPath = (start: any, end: any) => {
|
||||
const midX = (start.x + end.x) / 2;
|
||||
const midY = Math.min(start.y, end.y) - 50;
|
||||
return `M ${start.x} ${start.y} Q ${midX} ${midY} ${end.x} ${end.y}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full aspect-[2/1] dark:bg-black bg-white rounded-lg relative font-sans">
|
||||
<div className="w-full aspect-[2/1] bg-[#111111] rounded-lg relative font-sans">
|
||||
<img
|
||||
src={`data:image/svg+xml;utf8,${encodeURIComponent(svgMap)}`}
|
||||
className="h-full w-full [mask-image:linear-gradient(to_bottom,transparent,white_10%,white_90%,transparent)] pointer-events-none select-none"
|
||||
className="h-full w-full pointer-events-none select-none opacity-[0.6]"
|
||||
alt="world map"
|
||||
height="495"
|
||||
width="1056"
|
||||
draggable={false}
|
||||
/>
|
||||
|
||||
{/* ✅ Lines + points */}
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox="0 0 800 400"
|
||||
className="w-full h-full absolute inset-0 pointer-events-none select-none"
|
||||
>
|
||||
{/* ✅ animated curved travel lines */}
|
||||
{dots.map((dot, i) => {
|
||||
const startPoint = projectPoint(dot.start.lat, dot.start.lng);
|
||||
const endPoint = projectPoint(dot.end.lat, dot.end.lng);
|
||||
|
||||
return (
|
||||
<g key={`path-group-${i}`}>
|
||||
<motion.path
|
||||
d={createCurvedPath(startPoint, endPoint)}
|
||||
fill="none"
|
||||
stroke="url(#path-gradient)"
|
||||
strokeWidth="1"
|
||||
initial={{
|
||||
pathLength: 0,
|
||||
}}
|
||||
animate={{
|
||||
pathLength: 1,
|
||||
}}
|
||||
transition={{
|
||||
duration: 1,
|
||||
delay: 0.5 * i,
|
||||
ease: "easeOut",
|
||||
}}
|
||||
key={`start-upper-${i}`}
|
||||
></motion.path>
|
||||
</g>
|
||||
<motion.path
|
||||
key={`path-${i}`}
|
||||
d={createCurvedPath(startPoint, endPoint)}
|
||||
fill="none"
|
||||
stroke="url(#path-gradient)"
|
||||
strokeWidth="1"
|
||||
initial={{ pathLength: 0 }}
|
||||
animate={{ pathLength: 1 }}
|
||||
transition={{
|
||||
duration: 1,
|
||||
delay: 0.5 * i,
|
||||
ease: "easeOut",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* ✅ glowing path gradient */}
|
||||
<defs>
|
||||
<linearGradient id="path-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="white" stopOpacity="0" />
|
||||
<stop offset="0%" stopColor="black" stopOpacity="0" />
|
||||
<stop offset="5%" stopColor={lineColor} stopOpacity="1" />
|
||||
<stop offset="95%" stopColor={lineColor} stopOpacity="1" />
|
||||
<stop offset="100%" stopColor="white" stopOpacity="0" />
|
||||
<stop offset="100%" stopColor="black" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
{dots.map((dot, i) => (
|
||||
<g key={`points-group-${i}`}>
|
||||
<g key={`start-${i}`}>
|
||||
<circle
|
||||
cx={projectPoint(dot.start.lat, dot.start.lng).x}
|
||||
cy={projectPoint(dot.start.lat, dot.start.lng).y}
|
||||
r="2"
|
||||
fill={lineColor}
|
||||
/>
|
||||
<circle
|
||||
cx={projectPoint(dot.start.lat, dot.start.lng).x}
|
||||
cy={projectPoint(dot.start.lat, dot.start.lng).y}
|
||||
r="2"
|
||||
fill={lineColor}
|
||||
opacity="0.5"
|
||||
>
|
||||
<animate
|
||||
attributeName="r"
|
||||
from="2"
|
||||
to="8"
|
||||
dur="1.5s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
from="0.5"
|
||||
to="0"
|
||||
dur="1.5s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
{/* ✅ start & end points with pulsing cyan glow */}
|
||||
{dots.map((dot, i) => {
|
||||
const s = projectPoint(dot.start.lat, dot.start.lng);
|
||||
const e = projectPoint(dot.end.lat, dot.end.lng);
|
||||
|
||||
return (
|
||||
<g key={`points-${i}`}>
|
||||
{[s, e].map((p, idx) => (
|
||||
<g key={idx}>
|
||||
<circle cx={p.x} cy={p.y} r="2" fill={lineColor} />
|
||||
<circle cx={p.x} cy={p.y} r="2" fill={lineColor} opacity="0.5">
|
||||
<animate
|
||||
attributeName="r"
|
||||
from="2"
|
||||
to="7"
|
||||
dur="1.4s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
from="0.6"
|
||||
to="0"
|
||||
dur="1.4s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
</g>
|
||||
))}
|
||||
</g>
|
||||
<g key={`end-${i}`}>
|
||||
<circle
|
||||
cx={projectPoint(dot.end.lat, dot.end.lng).x}
|
||||
cy={projectPoint(dot.end.lat, dot.end.lng).y}
|
||||
r="2"
|
||||
fill={lineColor}
|
||||
/>
|
||||
<circle
|
||||
cx={projectPoint(dot.end.lat, dot.end.lng).x}
|
||||
cy={projectPoint(dot.end.lat, dot.end.lng).y}
|
||||
r="2"
|
||||
fill={lineColor}
|
||||
opacity="0.5"
|
||||
>
|
||||
<animate
|
||||
attributeName="r"
|
||||
from="2"
|
||||
to="8"
|
||||
dur="1.5s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
from="0.5"
|
||||
to="0"
|
||||
dur="1.5s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user