Improve undernet readability and add faded rainbow color gradient
Brighten undernet section text (opacity bumps across 4 elements), increase background lightness, and rework scroll color stops to cycle through a full faded rainbow (red→orange→amber→green→blue→ violet→rose→warm). Also improve glass-card visibility and update "birthing" → "inoculating" language for P4P movement. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
465320623e
commit
8999d27492
|
|
@ -17,8 +17,8 @@
|
|||
--forest-deep: oklch(0.16 0.05 150);
|
||||
--mycelium-green: oklch(0.55 0.18 155);
|
||||
--mycelium-glow: oklch(0.72 0.20 135);
|
||||
--undernet-dark: oklch(0.22 0.04 200);
|
||||
--undernet-teal: oklch(0.50 0.14 220);
|
||||
--undernet-dark: oklch(0.26 0.03 230);
|
||||
--undernet-teal: oklch(0.55 0.10 225);
|
||||
--emergence-gold: oklch(0.60 0.16 90);
|
||||
--canopy-light: oklch(0.94 0.02 110);
|
||||
--mycopunk-orange: oklch(0.60 0.16 55);
|
||||
|
|
@ -229,9 +229,9 @@
|
|||
|
||||
/* Card glass effect */
|
||||
.glass-card {
|
||||
background: oklch(0.5 0 0 / 0.08);
|
||||
background: oklch(0.5 0 0 / 0.12);
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid oklch(0.5 0 0 / 0.12);
|
||||
border: 1px solid oklch(0.5 0 0 / 0.16);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -171,13 +171,13 @@ export function LegacySection() {
|
|||
style={{ transitionDelay: "0.24s" }}
|
||||
>
|
||||
<h3 className="font-serif text-3xl sm:text-4xl md:text-5xl font-bold text-center">
|
||||
The Birth of the
|
||||
The Inoculation of the
|
||||
<br />
|
||||
Peer-for-Peer (P4P) Movement
|
||||
</h3>
|
||||
<div className="space-y-4 text-base leading-relaxed opacity-80">
|
||||
<p>
|
||||
MycoStack carries this legacy forward by giving birth to a
|
||||
MycoStack carries this legacy forward by inoculating a
|
||||
movement: <strong>Peer-for-Peer (P4P)</strong> — an
|
||||
evolution of P2P thinking that shifts from peers exchanging{" "}
|
||||
<em>with</em> each other to peers acting <em>for</em> each other.
|
||||
|
|
|
|||
|
|
@ -6,14 +6,14 @@ import { useEffect } from "react"
|
|||
// Color stops: [scrollPos, bg-L, bg-C, bg-H, fg-L, fg-C, fg-H, accent-L, accent-C, accent-H]
|
||||
// 8 sections: Hero → Legacy → Compost → Mycelium → Undernet → Anastomosis → Emergence → Network Map
|
||||
const COLOR_STOPS: number[][] = [
|
||||
[0.0, 0.08, 0.02, 30, 0.85, 0.03, 80, 0.45, 0.12, 60 ], // Hero: deep soil
|
||||
[0.10, 0.10, 0.03, 35, 0.84, 0.03, 80, 0.50, 0.13, 50 ], // Legacy: dark warm earth
|
||||
[0.20, 0.12, 0.04, 40, 0.82, 0.04, 80, 0.55, 0.15, 45 ], // Compost: earth brown
|
||||
[0.35, 0.16, 0.05, 150, 0.88, 0.05, 145, 0.55, 0.18, 155], // Mycelium: forest green
|
||||
[0.48, 0.22, 0.04, 200, 0.90, 0.03, 200, 0.50, 0.14, 220], // Undernet: deep blue
|
||||
[0.60, 0.45, 0.06, 140, 0.15, 0.03, 150, 0.65, 0.18, 145], // Anastomosis: transition
|
||||
[0.78, 0.85, 0.04, 110, 0.15, 0.04, 100, 0.60, 0.16, 90 ], // Emergence: golden light
|
||||
[0.92, 0.94, 0.02, 110, 0.12, 0.03, 100, 0.55, 0.18, 155], // Network Map: canopy
|
||||
[0.0, 0.08, 0.02, 10, 0.85, 0.02, 10, 0.45, 0.08, 10 ], // Hero: warm red-brown
|
||||
[0.10, 0.10, 0.03, 40, 0.84, 0.02, 40, 0.50, 0.10, 40 ], // Legacy: faded orange
|
||||
[0.20, 0.12, 0.03, 70, 0.82, 0.03, 70, 0.55, 0.10, 65 ], // Compost: faded amber
|
||||
[0.35, 0.16, 0.04, 145, 0.88, 0.03, 145, 0.55, 0.12, 150], // Mycelium: faded green
|
||||
[0.48, 0.26, 0.03, 230, 0.92, 0.02, 230, 0.55, 0.10, 225], // Undernet: faded blue
|
||||
[0.60, 0.45, 0.04, 290, 0.15, 0.02, 290, 0.55, 0.10, 285], // Anastomosis: faded violet
|
||||
[0.78, 0.85, 0.03, 345, 0.15, 0.02, 345, 0.60, 0.10, 340], // Emergence: faded rose
|
||||
[0.92, 0.94, 0.02, 30, 0.12, 0.02, 30, 0.55, 0.08, 25 ], // Network Map: back to warm
|
||||
]
|
||||
|
||||
function lerp(a: number, b: number, t: number) {
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export function UndernetSection() {
|
|||
<h3 className="font-serif text-2xl font-semibold">
|
||||
Community-Owned Infrastructure
|
||||
</h3>
|
||||
<div className="space-y-4 text-base leading-relaxed opacity-75">
|
||||
<div className="space-y-4 text-base leading-relaxed opacity-85">
|
||||
<p>
|
||||
Beneath the extractive platforms, a different kind of
|
||||
infrastructure is growing. Self-provisioned. Privacy-first.
|
||||
|
|
@ -77,7 +77,7 @@ export function UndernetSection() {
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div className="glass-card p-4 space-y-2 font-mono text-xs opacity-60">
|
||||
<div className="glass-card p-4 space-y-2 font-mono text-xs opacity-80">
|
||||
<div>
|
||||
<span className="opacity-50">protocol:</span> fog computing
|
||||
</div>
|
||||
|
|
@ -100,10 +100,10 @@ export function UndernetSection() {
|
|||
className="section-reveal glass-card p-6 overflow-x-auto"
|
||||
style={{ transitionDelay: "0.2s" }}
|
||||
>
|
||||
<div className="font-mono text-xs sm:text-sm leading-relaxed opacity-60 whitespace-pre">
|
||||
<div className="font-mono text-xs sm:text-sm leading-relaxed opacity-80 whitespace-pre">
|
||||
{ASCII_NETWORK}
|
||||
</div>
|
||||
<p className="mt-4 font-mono text-xs opacity-40">
|
||||
<p className="mt-4 font-mono text-xs opacity-60">
|
||||
// every node is sovereign
|
||||
<br />
|
||||
// every connection is encrypted
|
||||
|
|
|
|||
Loading…
Reference in New Issue