240 lines
8.3 KiB
TypeScript
240 lines
8.3 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useRef } from "react"
|
|
import { useSectionReveal } from "@/hooks/use-section-reveal"
|
|
|
|
export function AnastomosisSection() {
|
|
const sectionRef = useSectionReveal()
|
|
const svgRef = useRef<SVGSVGElement>(null)
|
|
|
|
useEffect(() => {
|
|
const svg = svgRef.current
|
|
if (!svg) return
|
|
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
svg.querySelectorAll(".draw-line").forEach((el) => {
|
|
el.classList.add("animate")
|
|
})
|
|
svg.querySelector(".merge-dot")?.classList.add("merge-pulse")
|
|
}
|
|
})
|
|
},
|
|
{ threshold: 0.3 }
|
|
)
|
|
|
|
observer.observe(svg)
|
|
return () => observer.disconnect()
|
|
}, [])
|
|
|
|
return (
|
|
<section ref={sectionRef} className="relative py-20 px-6 noise-overlay">
|
|
<div className="mycelial-divider mb-12" />
|
|
|
|
<div className="max-w-4xl mx-auto space-y-16">
|
|
<div className="section-reveal space-y-6 text-center">
|
|
<h2 className="font-serif text-4xl sm:text-5xl md:text-6xl font-bold">
|
|
Anastomosis
|
|
</h2>
|
|
<p className="font-mono text-sm opacity-40">
|
|
/uh-nas-tuh-MOH-sis/
|
|
</p>
|
|
<p className="text-lg sm:text-xl opacity-70 max-w-2xl mx-auto leading-relaxed">
|
|
When separate mycelial networks discover each other and merge,
|
|
forming new connections. The moment distinct systems recognize their
|
|
shared purpose and become one.
|
|
</p>
|
|
</div>
|
|
|
|
{/* SVG Animation: Two networks merging */}
|
|
<div className="section-reveal">
|
|
<svg
|
|
ref={svgRef}
|
|
viewBox="0 0 800 300"
|
|
className="w-full max-w-3xl mx-auto"
|
|
fill="none"
|
|
>
|
|
{/* Left network */}
|
|
<g>
|
|
{/* Main trunk */}
|
|
<path
|
|
d="M60,150 Q120,130 180,145 Q240,155 290,140"
|
|
className="draw-line"
|
|
stroke="var(--scroll-accent)"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
style={{ animationDelay: "0s" }}
|
|
/>
|
|
{/* Branch up */}
|
|
<path
|
|
d="M140,138 Q160,100 200,85 Q230,75 260,90"
|
|
className="draw-line"
|
|
stroke="var(--scroll-accent)"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
style={{ animationDelay: "0.3s" }}
|
|
/>
|
|
{/* Branch down */}
|
|
<path
|
|
d="M180,145 Q200,180 240,195 Q270,205 300,190"
|
|
className="draw-line"
|
|
stroke="var(--scroll-accent)"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
style={{ animationDelay: "0.5s" }}
|
|
/>
|
|
{/* Sub-branch */}
|
|
<path
|
|
d="M200,85 Q220,60 250,55"
|
|
className="draw-line"
|
|
stroke="var(--scroll-accent)"
|
|
strokeWidth="1"
|
|
strokeLinecap="round"
|
|
style={{ animationDelay: "0.7s" }}
|
|
/>
|
|
{/* Small nodes */}
|
|
<circle cx="60" cy="150" r="3" fill="var(--scroll-accent)" opacity="0.5" />
|
|
<circle cx="180" cy="145" r="2.5" fill="var(--scroll-accent)" opacity="0.4" />
|
|
<circle cx="200" cy="85" r="2" fill="var(--scroll-accent)" opacity="0.4" />
|
|
<circle cx="240" cy="195" r="2" fill="var(--scroll-accent)" opacity="0.4" />
|
|
</g>
|
|
|
|
{/* Right network */}
|
|
<g>
|
|
{/* Main trunk */}
|
|
<path
|
|
d="M740,150 Q680,135 620,148 Q560,155 510,142"
|
|
className="draw-line"
|
|
stroke="var(--scroll-accent)"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
style={{ animationDelay: "0.2s" }}
|
|
/>
|
|
{/* Branch up */}
|
|
<path
|
|
d="M660,140 Q640,105 600,90 Q570,78 540,92"
|
|
className="draw-line"
|
|
stroke="var(--scroll-accent)"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
style={{ animationDelay: "0.4s" }}
|
|
/>
|
|
{/* Branch down */}
|
|
<path
|
|
d="M620,148 Q600,182 560,198 Q530,208 500,192"
|
|
className="draw-line"
|
|
stroke="var(--scroll-accent)"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
style={{ animationDelay: "0.6s" }}
|
|
/>
|
|
{/* Sub-branch */}
|
|
<path
|
|
d="M600,90 Q580,62 550,58"
|
|
className="draw-line"
|
|
stroke="var(--scroll-accent)"
|
|
strokeWidth="1"
|
|
strokeLinecap="round"
|
|
style={{ animationDelay: "0.8s" }}
|
|
/>
|
|
{/* Small nodes */}
|
|
<circle cx="740" cy="150" r="3" fill="var(--scroll-accent)" opacity="0.5" />
|
|
<circle cx="620" cy="148" r="2.5" fill="var(--scroll-accent)" opacity="0.4" />
|
|
<circle cx="600" cy="90" r="2" fill="var(--scroll-accent)" opacity="0.4" />
|
|
<circle cx="560" cy="198" r="2" fill="var(--scroll-accent)" opacity="0.4" />
|
|
</g>
|
|
|
|
{/* Merge connections (appear last) */}
|
|
<g>
|
|
<path
|
|
d="M290,140 Q340,145 400,150"
|
|
className="draw-line"
|
|
stroke="var(--scroll-accent)"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
style={{ animationDelay: "1.8s" }}
|
|
/>
|
|
<path
|
|
d="M510,142 Q460,146 400,150"
|
|
className="draw-line"
|
|
stroke="var(--scroll-accent)"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
style={{ animationDelay: "1.8s" }}
|
|
/>
|
|
<path
|
|
d="M260,90 Q330,95 400,120"
|
|
className="draw-line"
|
|
stroke="var(--scroll-accent)"
|
|
strokeWidth="1"
|
|
strokeLinecap="round"
|
|
opacity="0.5"
|
|
style={{ animationDelay: "2.2s" }}
|
|
/>
|
|
<path
|
|
d="M540,92 Q470,95 400,120"
|
|
className="draw-line"
|
|
stroke="var(--scroll-accent)"
|
|
strokeWidth="1"
|
|
strokeLinecap="round"
|
|
opacity="0.5"
|
|
style={{ animationDelay: "2.2s" }}
|
|
/>
|
|
<path
|
|
d="M300,190 Q350,185 400,175"
|
|
className="draw-line"
|
|
stroke="var(--scroll-accent)"
|
|
strokeWidth="1"
|
|
strokeLinecap="round"
|
|
opacity="0.5"
|
|
style={{ animationDelay: "2.4s" }}
|
|
/>
|
|
<path
|
|
d="M500,192 Q450,185 400,175"
|
|
className="draw-line"
|
|
stroke="var(--scroll-accent)"
|
|
strokeWidth="1"
|
|
strokeLinecap="round"
|
|
opacity="0.5"
|
|
style={{ animationDelay: "2.4s" }}
|
|
/>
|
|
</g>
|
|
|
|
{/* Center merge point */}
|
|
<circle
|
|
cx="400"
|
|
cy="150"
|
|
r="0"
|
|
className="merge-dot"
|
|
fill="var(--scroll-accent)"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div className="section-reveal space-y-6 text-center max-w-2xl mx-auto">
|
|
<p className="text-lg leading-relaxed opacity-75">
|
|
We are the connections between movements. Commons Stack, MycoFi, the
|
|
Undernet — separate networks finding each other, merging, growing
|
|
stronger together. The boundaries between projects dissolve. What
|
|
remains is the shared mycelium.
|
|
</p>
|
|
<p className="text-base opacity-50">
|
|
A space that belongs to its communities, not its platforms. Find{" "}
|
|
<a
|
|
href="https://yourspace.online"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="domain-link"
|
|
>
|
|
rSpace.online
|
|
</a>{" "}
|
|
and start anastomosing.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|