import { motion, useInView, useReducedMotion } from 'framer-motion';
import { useRef } from 'react';
const ease = [0.16, 1, 0.3, 1] as const;
/* ── Palette — shared with the other family illustrations ── */
const TEAL_LINE = '#2EB4AE';
const ORANGE_LINE = '#FB6B2C';
const NAVY_LINE = '#6B92C7';
type Tone = 'platform' | 'teal' | 'orange' | 'navy';
const TONES: Record<
Tone,
{ line: string; deep: string; top: string; body: string }
> = {
platform: {
line: TEAL_LINE,
deep: '#0D3350',
top: 'url(#dbxTopPlat)',
body: 'url(#dbxBodyPlat)',
},
teal: {
line: TEAL_LINE,
deep: '#093A40',
top: 'url(#dbxTopTeal)',
body: 'url(#dbxBodyTeal)',
},
orange: {
line: ORANGE_LINE,
deep: '#732A04',
top: 'url(#dbxTopOrange)',
body: 'url(#dbxBodyOrange)',
},
navy: {
line: NAVY_LINE,
deep: '#16294A',
top: 'url(#dbxTopNavy)',
body: 'url(#dbxBodyNavy)',
},
};
/* ── Scene layout ─────────────────────────────────────────── */
const CX = 200,
CY = 118; // central platform DB
const C_BOT = 151; // connector start (below central DB)
const TENANTS: Array<{ cx: number; cy: number; tone: Tone; label: string }> = [
{ cx: 80, cy: 285, tone: 'teal', label: 'Kilimo' },
{ cx: 200, cy: 308, tone: 'orange', label: 'Maziwa' },
{ cx: 320, cy: 285, tone: 'navy', label: 'Savana' },
];
/* Cubic bezier keyframes for packet path following */
function connKF(x1: number, y1: number, x2: number, y2: number) {
const p1 = { x: x1, y: y1 + 45 };
const p2 = { x: x2, y: y2 - 55 };
return [0, 1 / 3, 2 / 3, 1].map((t) => {
const mt = 1 - t;
return {
x: parseFloat(
(
mt ** 3 * x1 +
3 * mt ** 2 * t * p1.x +
3 * mt * t ** 2 * p2.x +
t ** 3 * x2
).toFixed(1),
),
y: parseFloat(
(
mt ** 3 * y1 +
3 * mt ** 2 * t * p1.y +
3 * mt * t ** 2 * p2.y +
t ** 3 * y2
).toFixed(1),
),
};
});
}
/* ── Glossy 3D database cylinder ──────────────────────────── */
function GlassDb({
cx,
cy,
w,
h,
tone,
label,
delay,
index,
inView,
reduce,
}: {
cx: number;
cy: number;
w: number;
h: number;
tone: Tone;
label: string;
delay: number;
index: number;
inView: boolean;
reduce: boolean;
}): JSX.Element {
const t = TONES[tone];
const rx = w / 2;
const ry = rx * 0.32;
const yTop = cy - h / 2 + ry; // top ellipse centre
const yBot = cy + h / 2 - ry; // bottom arc centre
const grooves = [0.48, 0.82].map((f) => yTop + (yBot - yTop) * f);
return (
{/* Ground shadow + tone glow — static */}
{/* Cylinder — gentle float */}
{/* Ambient glow */}
{/* Body with rounded bottom */}
{/* Disk grooves */}
{grooves.map((gy, i) => (
))}
{/* Gloss streak down the lit side */}
{/* Top face */}
{/* Top-face sheen */}
{/* Label on the body */}
{label.toUpperCase()}
);
}
/* ── Data packet travelling along a connector ─────────────── */
function Packet({
x1,
y1,
x2,
y2,
color,
delay,
inView,
}: {
x1: number;
y1: number;
x2: number;
y2: number;
color: string;
delay: number;
inView: boolean;
}): JSX.Element {
const pts = connKF(x1, y1, x2, y2);
const kfTimes = [0, 1 / 3, 2 / 3, 1];
return (
p.x),
cy: pts.map((p) => p.y),
opacity: [0, 1, 1, 0],
}
: {}
}
transition={{
cx: {
duration: 1.4,
delay,
repeat: Infinity,
repeatDelay: 3.4,
ease: 'easeInOut',
times: kfTimes,
},
cy: {
duration: 1.4,
delay,
repeat: Infinity,
repeatDelay: 3.4,
ease: 'easeInOut',
times: kfTimes,
},
opacity: {
duration: 1.4,
delay,
repeat: Infinity,
repeatDelay: 3.4,
times: [0, 0.15, 0.85, 1],
},
}}
/>
);
}
/* ── Component ────────────────────────────────────────────── */
interface Props {
className?: string;
}
export function DatabaseIsolationIllustration({ className = '' }: Props) {
const ref = useRef(null);
const inView = useInView(ref, { once: true, margin: '-60px' });
const reduce = useReducedMotion() ?? false;
return (
);
}