import React from 'react';
import { motion } from 'framer-motion';
import { VisualProps } from '../types';
// ============================================================================
// 🔒 BASELINE CONFIGURATION - DO NOT REDUCE 🔒
// ============================================================================
// STATUS: GOLD STANDARD (51 Metaphors)
// STYLE: Cinematic / Operational Swiss (High Fidelity)
// LAYERS: BlurObject, Atmosphere, ParticleSystem, CinemaDefs (Glow/Noise)
//
// RULE: Future updates may ADD new metaphors or TWEAK styling,
// but MUST NOT reduce the metaphor count or remove the complex rendering layers.
// This file represents the minimum acceptable quality bar.
// ============================================================================
// --- PHYSICS CONFIG ---
const SPIN_SLOW = { duration: 10, repeat: Infinity, ease: "linear" as const };
const SPIN_MID = { duration: 4, repeat: Infinity, ease: "linear" as const };
const SPIN_FAST = { duration: 1.5, repeat: Infinity, ease: "linear" as const };
const PULSE_FAST = { duration: 0.6, repeat: Infinity, repeatType: "mirror" as const, ease: "easeInOut" as const };
const PULSE_SLOW = { duration: 2, repeat: Infinity, repeatType: "mirror" as const, ease: "easeInOut" as const };
const FLOAT = { duration: 3, repeat: Infinity, repeatType: "mirror" as const, ease: "easeInOut" as const };
const SCAN_X = { duration: 2, repeat: Infinity, repeatType: "mirror" as const, ease: "linear" as const };
const SCAN_Y = { duration: 2.5, repeat: Infinity, repeatType: "mirror" as const, ease: "linear" as const };
const RED = "var(--accent-red, #FF00E5)"; // Neon Magenta
const BLUE = "var(--accent-blue, #00F2FF)"; // Neon Cyan
const LIME = "#C1FF00"; // Acid Lime
const PURPLE = "#9D00FF"; // Cyber Purple
const DARK = "#050508"; // Deep Space Background
// --- PARAMETRIC UTILS ---
const ParametricSurface: React.FC<{
points: number;
segments: number;
fn: (u: number, v: number, t: number) => { x: number, y: number, z: number };
color?: string;
opacity?: number;
strokeWidth?: number;
fill?: boolean;
animate?: boolean;
}> = ({ points = 10, segments = 10, fn, color = BLUE, opacity = 0.6, strokeWidth = 0.3, fill = false, animate = true }) => {
const [t, setT] = React.useState(0);
React.useEffect(() => {
if (!animate) return;
let frame = 0;
const loop = () => {
setT(prev => prev + 0.02);
frame = requestAnimationFrame(loop);
};
loop();
return () => cancelAnimationFrame(frame);
}, [animate]);
const paths: string[] = [];
for (let i = 0; i <= points; i++) {
let d = "";
for (let j = 0; j <= segments; j++) {
const u = i / points;
const v = j / segments;
const { x, y } = fn(u, v, t);
d += (j === 0 ? "M" : "L") + ` ${x} ${y}`;
}
paths.push(d);
}
const crossPaths: string[] = [];
for (let j = 0; j <= segments; j++) {
let d = "";
for (let i = 0; i <= points; i++) {
const u = i / points;
const v = j / segments;
const { x, y } = fn(u, v, t);
d += (i === 0 ? "M" : "L") + ` ${x} ${y}`;
}
crossPaths.push(d);
}
return (
{paths.map((d, i) => (
))}
{crossPaths.map((d, i) => (
))}
);
};
// --- CINEMATIC UTILS ---
const ParticleSystem: React.FC<{ count: number; spread: number; color?: string }> = ({ count, spread, color = RED }) => (
{Array.from({ length: count }).map((_, i) => {
const r = Math.random() * 1.5 + 0.5;
const x = 50 + (Math.random() - 0.5) * spread;
const y = 50 + (Math.random() - 0.5) * spread;
return (
0.8 ? color : "currentColor"}
opacity={Math.random() * 0.5}
animate={{ y: [y, y - 10, y], opacity: [0, 0.8, 0] }}
transition={{ duration: 3 + Math.random() * 4, delay: Math.random() * 5, repeat: Infinity, ease: "easeInOut" }}
/>
);
})}
);
const BlurObject: React.FC<{ children: React.ReactNode }> = ({ children }) => (
{children}
);
const AtmosphereLayer: React.FC<{ color?: string }> = ({ color = RED }) => {
const colorId = color.replace(/[^a-zA-Z0-9]/g, '');
return (
);
};
const CinemaDefs: React.FC<{ color?: string }> = ({ color = RED }) => {
const colorId = color.replace(/[^a-zA-Z0-9]/g, '');
return (
{/* Cyber Bloom Filter */}
{/* Tangible Shading Filter */}
{/* Holographic Gradients */}
{/* Digital Grid Pattern */}
{/* Chromatic Aberration Filter */}
);
};
const VisualWrapper: React.FC<{ children: React.ReactNode; variant?: 'simple'|'complex'; accentColor?: string }> = ({ children, variant, accentColor = RED }) => {
const isComplex = variant === 'complex';
const colorId = accentColor.replace(/[^a-zA-Z0-9]/g, '');
return (
);
};
// ============================================================================
// NEW EXPANSION VISUALS
// ============================================================================
export const BalanceVisual: React.FC = ({ variant }) => {
const colorId = RED.replace(/[^a-zA-Z0-9]/g, '');
return (
({
x: 20 + u * 60 + Math.sin(v * Math.PI * 2 + t) * 2,
y: 80 - v * 10 + Math.cos(u * Math.PI * 2 + t) * 2,
z: 0
})}
color={RED} opacity={0.1}
/>
);
};
export const PerspectiveVisual: React.FC = ({ variant }) => {
const colorId = BLUE.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const x = u * 100;
const y = v * 100;
const dist = Math.sqrt((x-50)**2 + (y-50)**2);
const z = Math.sin(dist * 0.2 - t) * 5;
// Project 3D to 2D
const scale = 1 / (1 + z * 0.01);
return {
x: 50 + (x - 50) * scale,
y: 50 + (y - 50) * scale,
z
};
}}
color={BLUE} opacity={0.15}
/>
);
};
export const KnotVisual: React.FC = ({ variant }) => {
const colorId = RED.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const angle = v * Math.PI * 2;
const r = 20 + Math.sin(angle * 3 + t) * 5;
const x = 50 + Math.cos(angle) * r + Math.cos(u * Math.PI * 2) * 2;
const y = 50 + Math.sin(angle) * r + Math.sin(u * Math.PI * 2) * 2;
return { x, y, z: 0 };
}}
color={RED} opacity={0.4}
/>
);
};
export const VelocityVisual: React.FC = ({ variant }) => {
const colorId = RED.replace(/[^a-zA-Z0-9]/g, '');
return (
({
x: -20 + v * 140,
y: 20 + u * 60 + Math.sin(v * 10 + t * 5) * 2,
z: 0
})}
color={RED} opacity={0.3}
/>
{[10, 30, 70, 90].map((y, i) => (
))}
);
};
// ============================================================================
// BODY & MOVEMENT (BLUE SERIES)
// ============================================================================
export const OriginVisual: React.FC = ({ variant }) => {
const colorId = BLUE.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const r = u * 40;
const angle = v * Math.PI * 2 + t;
return {
x: 50 + Math.cos(angle) * r,
y: 50 + Math.sin(angle) * r,
z: 0
};
}}
color={BLUE} opacity={0.3}
/>
{[0, 120, 240].map(rot => (
))}
);
};
export const PostureVisual: React.FC = ({ variant }) => {
const colorId = BLUE.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const y = 10 + v * 80;
const offset = Math.sin(v * Math.PI + t) * 5;
return {
x: 50 + (u - 0.5) * 10 + offset,
y,
z: 0
};
}}
color={BLUE} opacity={0.4}
/>
);
};
export const RhythmVisual: React.FC = ({ variant }) => {
const colorId = BLUE.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const angle = u * Math.PI * 2;
const r = 10 + v * 30 + Math.sin(angle * 4 + t * 2) * 2;
return {
x: 50 + Math.cos(angle) * r,
y: 50 + Math.sin(angle) * r,
z: 0
};
}}
color={BLUE} opacity={0.3}
/>
{[0, 1, 2, 3].map(i => (
))}
);
};
export const TensionVisual: React.FC = ({ variant }) => {
const colorId = BLUE.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const x = 20 + v * 60;
const tension = Math.sin(t * 2) * 5;
const y = 50 + (u - 0.5) * 10 + Math.sin(v * Math.PI) * tension;
return { x, y, z: 0 };
}}
color={BLUE} opacity={0.4}
/>
);
};
export const FlowVisual: React.FC = ({ variant }) => {
const colorId = BLUE.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const x = 10 + v * 80;
const y = 50 + Math.sin(v * 5 + t) * 10 + (u - 0.5) * 5;
return { x, y, z: 0 };
}}
color={BLUE} opacity={0.3}
/>
{[0, 1, 2].map(i => (
))}
);
};
export const ResistanceVisual: React.FC = ({ variant }) => {
const colorId = BLUE.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const x = 30 + u * 40;
const y = 20 + v * 10 + Math.sin(u * Math.PI + t) * 2;
return { x, y, z: 0 };
}}
color={BLUE} opacity={0.4}
/>
{/* Meaning: A wall being pushed against */}
);
};
export const SymmetryVisual: React.FC = ({ variant }) => {
const colorId = BLUE.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const y = 10 + v * 80;
const x = 50 + (u - 0.5) * 5 * Math.sin(v * Math.PI + t);
return { x, y, z: 0 };
}}
color={BLUE} opacity={0.3}
/>
);
};
export const RangeVisual: React.FC = ({ variant }) => {
const colorId = BLUE.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const angle = v * Math.PI;
const r = 30 + u * 10 + Math.sin(t) * 2;
return {
x: 50 + Math.cos(angle) * r,
y: 50 - Math.sin(angle) * r,
z: 0
};
}}
color={BLUE} opacity={0.3}
/>
);
};
export const RespirationVisual: React.FC = ({ variant }) => {
const colorId = BLUE.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const angle = u * Math.PI * 2;
const r = (10 + v * 30) * (1 + Math.sin(t) * 0.2);
return {
x: 50 + Math.cos(angle) * r,
y: 50 + Math.sin(angle) * r,
z: 0
};
}}
color={BLUE} opacity={0.3}
/>
);
};
export const ContractionVisual: React.FC = ({ variant }) => {
const colorId = BLUE.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const x = 30 + v * 40;
const contraction = Math.sin(t * 2) * 5;
const y = 50 + (u - 0.5) * (20 - contraction);
return { x, y, z: 0 };
}}
color={BLUE} opacity={0.4}
/>
);
};
export const GaitVisual: React.FC = ({ variant }) => {
const colorId = BLUE.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const x = v * 100;
const y = 70 + Math.sin(v * 10 + t * 2) * 2;
return { x, y, z: 0 };
}}
color={BLUE} opacity={0.3}
/>
);
};
// ============================================================================
// VISUALS (RED SERIES - UTILITIES & LOOPS)
// ============================================================================
export const OrbitVisual: React.FC = ({ variant }) => {
const colorId = PURPLE.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const r = 30 + u * 10;
const angle = v * Math.PI * 2 + t;
return {
x: 50 + Math.cos(angle) * r,
y: 50 + Math.sin(angle) * r,
z: 0
};
}}
color={PURPLE} opacity={0.3}
/>
);
};
export const FilterVisual: React.FC = ({ variant }) => {
const colorId = LIME.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const x = 30 + v * 40;
const y = 20 + u * 40 * v;
return { x, y, z: 0 };
}}
color={LIME} opacity={0.3}
/>
{[0, 1, 2].map(i => (
))}
);
};
export const TargetVisual: React.FC = ({ variant }) => {
const colorId = RED.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const angle = u * Math.PI * 2;
const r = v * 50 + Math.sin(t) * 2;
return {
x: 50 + Math.cos(angle) * r,
y: 50 + Math.sin(angle) * r,
z: 0
};
}}
color={RED} opacity={0.2}
/>
{[20, 35, 50].map((r, i) => (
))}
);
};
export const EchoVisual: React.FC = ({ variant }) => {
const colorId = PURPLE.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const angle = u * Math.PI * 2;
const r = v * 50 * (1 + Math.sin(t) * 0.1);
return {
x: 50 + Math.cos(angle) * r,
y: 50 + Math.sin(angle) * r,
z: 0
};
}}
color={PURPLE} opacity={0.3}
/>
{[1, 2, 3, 4].map(i => (
))}
);
};
export const LayerVisual: React.FC = ({ variant }) => {
const colorId = LIME.replace(/[^a-zA-Z0-9]/g, '');
return (
({
x: 20 + v * 60,
y: 40 + u * 20 + Math.sin(v * 5 + t) * 5,
z: 0
})}
color={LIME} opacity={0.3}
/>
{[0, 1, 2].map(i => (
))}
);
};
export const CycleVisual: React.FC = ({ variant }) => {
const colorId = RED.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const angle = v * Math.PI * 2 + t;
const r = 30 + Math.sin(u * Math.PI) * 5;
return {
x: 50 + Math.cos(angle) * r,
y: 50 + Math.sin(angle) * r,
z: 0
};
}}
color={RED} opacity={0.3}
/>
);
};
export const GrowthVisual: React.FC = ({ variant }) => {
const colorId = PURPLE.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const x = 20 + u * 60;
const y = 80 - v * 60 * (1 + Math.sin(t) * 0.1);
return { x, y, z: 0 };
}}
color={PURPLE} opacity={0.3}
/>
{[0, 1, 2, 3].map(i => (
))}
);
};
export const GlobeVisual: React.FC = ({ variant }) => {
const colorId = RED.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const phi = u * Math.PI;
const theta = v * Math.PI * 2 + t;
const r = 35;
return {
x: 50 + r * Math.sin(phi) * Math.cos(theta),
y: 50 + r * Math.sin(phi) * Math.sin(theta),
z: r * Math.cos(phi)
};
}}
color={RED} opacity={0.4}
/>
{[0, 45, 90, 135].map(rot => (
))}
);
};
export const NetworkVisual: React.FC = ({ variant }) => {
const colorId = LIME.replace(/[^a-zA-Z0-9]/g, '');
const nodes = [
{ x: 30, y: 30 }, { x: 70, y: 30 }, { x: 50, y: 70 }, { x: 50, y: 30 }
];
return (
{
const p1 = nodes[Math.floor(u * 3.99)];
const p2 = nodes[Math.floor(v * 3.99)];
return {
x: p1.x + (p2.x - p1.x) * Math.sin(t),
y: p1.y + (p2.y - p1.y) * Math.cos(t),
z: 0
};
}}
color={LIME} opacity={0.2}
/>
{nodes.map((p, i) => (
{nodes.slice(i + 1).map((p2, j) => (
))}
))}
);
};
export const WhisperVisual: React.FC = ({ variant }) => {
const colorId = PURPLE.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const x = 20 + v * 60;
const y = 50 + Math.sin(v * 10 + t) * (u * 5);
return { x, y, z: 0 };
}}
color={PURPLE} opacity={0.3}
/>
);
};
export const BatteryVisual: React.FC = ({ variant }) => {
const colorId = RED.replace(/[^a-zA-Z0-9]/g, '');
return (
({
x: 25 + v * 50,
y: 35 + u * 30 + Math.sin(v * 10 + t) * 2,
z: 0
})}
color={RED} opacity={0.3}
/>
);
};
export const ScaleVisual: React.FC = ({ variant }) => {
const colorId = LIME.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const x = 20 + v * 60;
const y = 80 - u * 50 * Math.sin(v * Math.PI + t);
return { x, y, z: 0 };
}}
color={LIME} opacity={0.3}
/>
{[20, 35, 50, 65, 80].map(x => (
))}
);
};
export const ShieldVisual: React.FC = ({ variant }) => {
const colorId = RED.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const phi = u * Math.PI;
const theta = v * Math.PI;
const r = 30 + Math.sin(t) * 2;
return {
x: 50 + r * Math.sin(phi) * Math.cos(theta),
y: 50 + r * Math.sin(phi) * Math.sin(theta),
z: 0
};
}}
color={RED} opacity={0.3}
/>
);
};
export const AuditVisual: React.FC = ({ variant }) => {
const colorId = RED.replace(/[^a-zA-Z0-9]/g, '');
return (
({
x: 30 + v * 40,
y: 20 + u * 60 + Math.sin(v * 10 + t) * 2,
z: 0
})}
color={RED} opacity={0.3}
/>
{[30, 45, 60].map(y => (
))}
);
};
export const FactoryVisual: React.FC = ({ variant }) => {
const colorId = LIME.replace(/[^a-zA-Z0-9]/g, '');
return (
({
x: 20 + v * 60,
y: 30 + u * 40 + Math.sin(v * 10 + t) * 5,
z: 0
})}
color={LIME} opacity={0.3}
/>
{[25, 40, 55, 70].map(x => (
))}
);
};
export const SearchVisual: React.FC = ({ variant }) => {
const colorId = PURPLE.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const r = 15 + u * 10;
const angle = v * Math.PI * 2 + t;
return {
x: 45 + Math.cos(angle) * r,
y: 45 + Math.sin(angle) * r,
z: 0
};
}}
color={PURPLE} opacity={0.3}
/>
);
};
export const PenVisual: React.FC = ({ variant }) => {
const colorId = RED.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const x = 30 + v * 40;
const y = 70 - v * 40 + Math.sin(v * 10 + t) * 2;
return { x, y, z: 0 };
}}
color={RED} opacity={0.3}
/>
);
};
export const MeaningVisual: React.FC = ({ variant }) => {
const colorId = LIME.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const angle = u * Math.PI * 2 + t;
const r = v * 40;
return {
x: 50 + Math.cos(angle) * r,
y: 50 + Math.sin(angle) * r,
z: 0
};
}}
color={LIME} opacity={0.3}
/>
);
};
export const DefenseVisual: React.FC = ({ variant }) => {
const colorId = PURPLE.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const phi = u * Math.PI;
const theta = v * Math.PI;
const r = 30 + Math.sin(t) * 2;
return {
x: 50 + r * Math.sin(phi) * Math.cos(theta),
y: 45 + r * Math.sin(phi) * Math.sin(theta),
z: 0
};
}}
color={PURPLE} opacity={0.3}
/>
{/* Meaning: Hexagonal shield structure */}
);
};
export const TangleVisual: React.FC = ({ variant }) => {
const colorId = RED.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const r = 20 + Math.sin(v * 10 + t) * 5;
const angle = v * Math.PI * 2;
return {
x: 50 + Math.cos(angle) * r + Math.sin(u * Math.PI + t) * 10,
y: 50 + Math.sin(angle) * r + Math.cos(u * Math.PI + t) * 10,
z: 0
};
}}
color={RED} opacity={0.3}
/>
{/* Meaning: Knots and tension points in a complex system */}
{[0, 1, 2].map(i => (
))}
);
};
export const MaskVisual: React.FC = ({ variant }) => {
const colorId = LIME.replace(/[^a-zA-Z0-9]/g, '');
return (
({
x: 30 + v * 40,
y: 30 + u * 40 + Math.sin(v * 5 + t) * 5,
z: 0
})}
color={LIME} opacity={0.3}
/>
);
};
export const BottleneckVisual: React.FC = ({ variant }) => {
const colorId = RED.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const x = 20 + v * 60;
const width = 30 - Math.sin(v * Math.PI) * 20;
const y = 50 + (u - 0.5) * width;
return { x, y, z: 0 };
}}
color={RED} opacity={0.3}
/>
{[0, 1, 2].map(i => (
))}
);
};
export const AlignmentVisual: React.FC = ({ variant }) => {
const colorId = PURPLE.replace(/[^a-zA-Z0-9]/g, '');
return (
({
x: 45 + u * 10,
y: 10 + v * 80 + Math.sin(v * 10 + t) * 2,
z: 0
})}
color={PURPLE} opacity={0.3}
/>
{[25, 50, 75].map((y, i) => (
))}
);
};
export const FragmentationVisual: React.FC = ({ variant }) => {
const colorId = LIME.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const r = 10 + v * 30;
const angle = u * Math.PI * 2 + t;
return {
x: 50 + Math.cos(angle) * r * (Math.sin(t) > 0 ? 1 : 0.5),
y: 50 + Math.sin(angle) * r * (Math.sin(t) > 0 ? 1 : 0.5),
z: 0
};
}}
color={LIME} opacity={0.3}
/>
{[
{ x: -10, y: -10 }, { x: 10, y: -10 }, { x: -10, y: 10 }, { x: 10, y: 10 }
].map((p, i) => (
))}
);
};
export const GapVisual: React.FC = ({ variant }) => {
const colorId = RED.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const x = 10 + v * 80;
const y = 70 - (v > 0.4 && v < 0.6 ? 0 : Math.sin(v * Math.PI) * 20) * u;
return { x, y, z: 0 };
}}
color={RED} opacity={0.3}
/>
{/* Meaning: Sparks jumping across the gap */}
{[0, 1, 2].map(i => (
))}
);
};
export const IntegrationVisual: React.FC = ({ variant }) => {
const colorId = PURPLE.replace(/[^a-zA-Z0-9]/g, '');
return (
({
x: 35 + v * 30 + Math.sin(t) * 5,
y: 35 + u * 30 + Math.cos(t) * 5,
z: 0
})}
color={PURPLE} opacity={0.3}
/>
);
};
export const SyncVisual: React.FC = ({ variant }) => {
const colorId = LIME.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const r = 5 + u * 10;
const angle = v * Math.PI * 2 + t;
return {
x: 35 + Math.cos(angle) * r,
y: 50 + Math.sin(angle) * r,
z: 0
};
}}
color={LIME} opacity={0.3}
/>
{
const r = 5 + u * 10;
const angle = v * Math.PI * 2 + t;
return {
x: 65 + Math.cos(angle) * r,
y: 50 + Math.sin(angle) * r,
z: 0
};
}}
color={LIME} opacity={0.3}
/>
);
};
export const SignalVisual: React.FC = ({ variant }) => {
const colorId = RED.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const x = 10 + v * 80;
const y = 50 + Math.sin(v * 10 + t) * (u * 10);
return { x, y, z: 0 };
}}
color={RED} opacity={0.3}
/>
);
};
export const PulseVisual: React.FC = ({ variant }) => {
const colorId = PURPLE.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const r = 10 + Math.sin(t * 2) * 5 + u * 10;
const angle = v * Math.PI * 2;
return {
x: 50 + Math.cos(angle) * r,
y: 50 + Math.sin(angle) * r,
z: 0
};
}}
color={PURPLE} opacity={0.3}
/>
);
};
export const BreathVisual: React.FC = ({ variant }) => {
const colorId = LIME.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const r = 15 + Math.sin(t) * 10 + u * 15;
const angle = v * Math.PI * 2;
return {
x: 50 + Math.cos(angle) * r,
y: 50 + Math.sin(angle) * r,
z: 0
};
}}
color={LIME} opacity={0.3}
/>
);
};
export const StackVisual: React.FC = ({ variant }) => {
const colorId = RED.replace(/[^a-zA-Z0-9]/g, '');
return (
({
x: 30 + v * 40,
y: 60 - u * 40 + Math.sin(v * 10 + t) * 2,
z: 0
})}
color={RED} opacity={0.3}
/>
{[0, 1, 2].map(i => (
))}
);
};
export const GridVisual: React.FC = ({ variant }) => {
const colorId = PURPLE.replace(/[^a-zA-Z0-9]/g, '');
return (
({
x: 30 + v * 40,
y: 30 + u * 40 + Math.sin(v * 5 + u * 5 + t) * 2,
z: 0
})}
color={PURPLE} opacity={0.3}
/>
{/* Meaning: Data packets moving along the grid */}
{Array.from({ length: 9 }).map((_, i) => (
))}
);
};
export const BridgeVisual: React.FC = ({ variant }) => {
const colorId = LIME.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const x = 25 + v * 50;
const y = 50 + Math.sin(v * Math.PI + t) * (u * 10);
return { x, y, z: 0 };
}}
color={LIME} opacity={0.3}
/>
);
};
export const DivergenceVisual: React.FC = ({ variant }) => {
const colorId = RED.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const x = 20 + v * 60;
const y = 50 + (v > 0.3 ? (v - 0.3) * 50 * Math.sin(t) : 0) * (u - 0.5);
return { x, y, z: 0 };
}}
color={RED} opacity={0.3}
/>
);
};
export const VigorVisual: React.FC = ({ variant }) => {
const colorId = BLUE.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const r = 10 + Math.sin(t * 3) * 3 + u * 15;
const angle = v * Math.PI * 2;
return {
x: 50 + Math.cos(angle) * r,
y: 50 + Math.sin(angle) * r,
z: 0
};
}}
color={BLUE} opacity={0.3}
/>
);
};
export const DriveVisual: React.FC = ({ variant }) => {
const colorId = BLUE.replace(/[^a-zA-Z0-9]/g, '');
return (
({
x: 30 + v * 40,
y: 30 + u * 40 + Math.sin(v * 5 + t) * 10,
z: 0
})}
color={BLUE} opacity={0.3}
/>
);
};
// --- EXPORT MAP ---
const BULB_FACE_PATH = "M 50 15 C 30 15 22 35 22 55 C 22 75 35 85 50 85 C 65 85 78 75 78 55 C 78 35 70 15 50 15";
export const MetamorphosisVisual: React.FC = ({ variant }) => {
const colorId = LIME.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const angle = v * Math.PI * 2;
const r = 20 + Math.sin(t + u * 5) * 5;
return {
x: 50 + Math.cos(angle) * r,
y: 50 + Math.sin(angle) * r,
z: 0
};
}}
color={LIME} opacity={0.3}
/>
);
};
export const CognitionVisual: React.FC = ({ variant }) => {
const colorId = BLUE.replace(/[^a-zA-Z0-9]/g, '');
return (
{[...Array(12)].map((_, i) => (
))}
);
};
export const ZenithVisual: React.FC = ({ variant }) => {
const colorId = PURPLE.replace(/[^a-zA-Z0-9]/g, '');
return (
{[1, 2, 3].map(i => (
))}
);
};
export const DualityVisual: React.FC = ({ variant }) => {
const colorId = RED.replace(/[^a-zA-Z0-9]/g, '');
return (
{/* Left: Solid/Organic */}
{/* Right: Digital/Grid */}
{[...Array(15)].map((_, row) => (
[...Array(8)].map((_, col) => (
))
))}
);
};
export const EntropyVisual: React.FC = ({ variant }) => {
const colorId = LIME.replace(/[^a-zA-Z0-9]/g, '');
return (
{/* The face shatters into fragments and reforms */}
{[...Array(20)].map((_, i) => (
))}
);
};
export const ResonanceVisual: React.FC = ({ variant }) => {
const colorId = BLUE.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const angle = u * Math.PI * 2;
const r = 25 + Math.sin(u * 10 + t * 4) * 4;
return {
x: 50 + Math.cos(angle) * r,
y: 50 + Math.sin(angle) * r,
z: 0
};
}}
color={BLUE} opacity={0.4}
/>
);
};
export const OverclockVisual: React.FC = ({ variant }) => {
const colorId = RED.replace(/[^a-zA-Z0-9]/g, '');
return (
{[...Array(10)].map((_, i) => (
))}
);
};
export const VoidVisual: React.FC = ({ variant }) => {
const colorId = PURPLE.replace(/[^a-zA-Z0-9]/g, '');
return (
);
};
export const NexusVisual: React.FC = ({ variant }) => {
const colorId = LIME.replace(/[^a-zA-Z0-9]/g, '');
return (
{/* Multiple overlapping face silhouettes */}
{[0, 1, 2].map(i => (
))}
);
};
export const AuraVisual: React.FC = ({ variant }) => {
const colorId = BLUE.replace(/[^a-zA-Z0-9]/g, '');
return (
);
};
export const EvolutionVisual: React.FC = ({ variant }) => {
const colorId = RED.replace(/[^a-zA-Z0-9]/g, '');
return (
{/* Left: Fluid/Chaos */}
{
const angle = v * Math.PI;
const r = 25 + Math.sin(t + u * 10) * 5;
return { x: 50 - Math.sin(angle) * r, y: 50 + Math.cos(angle) * r, z: 0 };
}}
color={RED} opacity={0.3}
/>
{/* Right: Rigid/Structure */}
{[...Array(18)].map((_, row) => (
[...Array(10)].map((_, col) => {
const x = col * 3.5;
const y = row * 4;
return (
);
})
))}
);
};
export const PresenceVisual: React.FC = ({ variant }) => {
const colorId = RED.replace(/[^a-zA-Z0-9]/g, '');
return (
{
const angle = v * Math.PI * 2;
const r = 22 + Math.sin(t + u * 8) * 4;
return { x: 50 + Math.cos(angle) * r, y: 50 + Math.sin(angle) * r, z: 0 };
}}
color={RED} opacity={0.3}
/>
);
};
export const TengeVisual: React.FC = ({ variant }) => {
const colorId = LIME.replace(/[^a-zA-Z0-9]/g, '');
return (
({
x: 35 + v * 30,
y: 35 + u * 30 + Math.sin(t) * 2,
z: 0
})}
color={LIME} opacity={0.3}
/>
{/* Tenge Symbol (₸) - Meaning: Value and stability */}
);
};
export const VISUAL_MAP: Record> = {
// Originals & Loops
bottleneck: BottleneckVisual,
alignment: AlignmentVisual,
fragmentation: FragmentationVisual,
integration: IntegrationVisual,
network: NetworkVisual,
divergence: DivergenceVisual,
stack: StackVisual,
grid: GridVisual,
bridge: BridgeVisual,
tangle: TangleVisual,
tenge: TengeVisual,
shield: ShieldVisual,
factory: FactoryVisual,
whisper: WhisperVisual,
battery: BatteryVisual,
pen: PenVisual,
globe: GlobeVisual,
scale: ScaleVisual,
mask: MaskVisual,
audit: AuditVisual,
gap: GapVisual,
sync: SyncVisual,
signal: SignalVisual,
pulse: PulseVisual,
breath: BreathVisual,
search: SearchVisual,
meaning: MeaningVisual,
defense: DefenseVisual,
// Classics
origin: OriginVisual,
orbit: OrbitVisual,
filter: FilterVisual,
target: TargetVisual,
echo: EchoVisual,
layer: LayerVisual,
cycle: CycleVisual,
growth: GrowthVisual,
// New Additions
balance: BalanceVisual,
perspective: PerspectiveVisual,
knot: KnotVisual,
velocity: VelocityVisual,
// Blue Series
posture: PostureVisual,
rhythm: RhythmVisual,
tension: TensionVisual,
flow: FlowVisual,
resistance: ResistanceVisual,
symmetry: SymmetryVisual,
range: RangeVisual,
respiration: RespirationVisual,
contraction: ContractionVisual,
gait: GaitVisual,
// Anatomical
vigor: VigorVisual,
drive: DriveVisual,
// Human & AI Faces
metamorphosis: MetamorphosisVisual,
cognition: CognitionVisual,
zenith: ZenithVisual,
duality: DualityVisual,
entropy: EntropyVisual,
resonance: ResonanceVisual,
overclock: OverclockVisual,
void: VoidVisual,
nexus: NexusVisual,
aura: AuraVisual,
evolution: EvolutionVisual,
presence: PresenceVisual,
none: () => null
};