From 22e2e4b80c5007e8c4bcf75fb54efe439d55fd9f Mon Sep 17 00:00:00 2001 From: sasha-astiadi Date: Sat, 8 Nov 2025 00:56:07 +0100 Subject: [PATCH] feat: replace static icons with animated SVG components in GPU capabilities - Replaced Heroicons with custom animated SVG components for each GPU capability card - Added four new animation components: InterferenceAnimation, KubernetesAcceleration, RenderingSimulation, and RAGPipeline - Updated card layout to accommodate full-width animations above text content --- src/pages/gpu/GpuCapabilities.tsx | 54 ++-- .../gpu/animations/InterferenceAnimation.tsx | 296 ++++++++++++++++++ .../gpu/animations/KubernetesAcceleration.tsx | 124 ++++++++ src/pages/gpu/animations/RAGPipeline.tsx | 144 +++++++++ .../gpu/animations/RenderingSimulation.tsx | 101 ++++++ tsconfig.app.json | 2 +- 6 files changed, 698 insertions(+), 23 deletions(-) create mode 100644 src/pages/gpu/animations/InterferenceAnimation.tsx create mode 100644 src/pages/gpu/animations/KubernetesAcceleration.tsx create mode 100644 src/pages/gpu/animations/RAGPipeline.tsx create mode 100644 src/pages/gpu/animations/RenderingSimulation.tsx diff --git a/src/pages/gpu/GpuCapabilities.tsx b/src/pages/gpu/GpuCapabilities.tsx index 4797266..54fd31b 100644 --- a/src/pages/gpu/GpuCapabilities.tsx +++ b/src/pages/gpu/GpuCapabilities.tsx @@ -4,12 +4,12 @@ import { useRef } from "react"; import { Eyebrow, CP, CT, H5 } from "@/components/Texts"; import { IoArrowBackOutline, IoArrowForwardOutline } from "react-icons/io5"; -import { - SparklesIcon, - Cog6ToothIcon, - CubeTransparentIcon, - CpuChipIcon, -} from "@heroicons/react/24/solid"; +// ✅ Import animations + +import KubernetesAcceleration from "./animations/KubernetesAcceleration"; +import RenderingSimulation from "./animations/RenderingSimulation"; +import RAGPipeline from "./animations/RAGPipeline"; +import InterferenceAnimation from "./animations/InterferenceAnimation"; const gpuCapabilities = [ { @@ -22,31 +22,33 @@ const gpuCapabilities = [ { name: "AI / ML Inference & Training", description: "LLMs, embeddings, transformers, fine-tuning", - icon: SparklesIcon, + animation: InterferenceAnimation, }, { name: "Acceleration in Kubernetes Workloads", description: "GPU-backed deployments on Mycelium Cloud", - icon: Cog6ToothIcon, + animation: KubernetesAcceleration, }, { name: "Rendering & Simulation", description: "Scientific visualization, VFX, real-time 3D", - icon: CubeTransparentIcon, + animation: RenderingSimulation, }, { name: "Agent Compute & RAG Pipelines", description: "Vector memory + model execution on sovereign hardware", - icon: CpuChipIcon, + animation: RAGPipeline, }, ]; export function GpuCapabilities() { const sliderRef = useRef(null); - const scrollLeft = () => sliderRef.current?.scrollBy({ left: -400, behavior: "smooth" }); - const scrollRight = () => sliderRef.current?.scrollBy({ left: 400, behavior: "smooth" }); + const scrollLeft = () => + sliderRef.current?.scrollBy({ left: -400, behavior: "smooth" }); + const scrollRight = () => + sliderRef.current?.scrollBy({ left: 400, behavior: "smooth" }); return (
@@ -63,16 +65,17 @@ export function GpuCapabilities() { {gpuCapabilities.map((item, idx) => (
  • - {/* ✅ First intro card with arrows */} {item.isIntro ? (
    {item.eyebrow} -
    {item.title}
    +
    + {item.title} +

    {item.description}

    @@ -102,14 +105,21 @@ export function GpuCapabilities() {
    ) : ( -
    -
    - + <> + {/* ✅ STREAMING ANIMATION REPLACES ICON */} +
    + {item.animation && }
    - {item.name} - {item.description} -
    +
    + + {item.name} + + + {item.description} + +
    + )}
    • ))} diff --git a/src/pages/gpu/animations/InterferenceAnimation.tsx b/src/pages/gpu/animations/InterferenceAnimation.tsx new file mode 100644 index 0000000..09c977e --- /dev/null +++ b/src/pages/gpu/animations/InterferenceAnimation.tsx @@ -0,0 +1,296 @@ +"use client"; + +export default function InferenceAnimation() { + return ( + + AI / ML Inference & Training Animation + + Animated neural graph sending signals to a glowing GPU chip on a dark + background. + + + {/* ---------- DEFINITIONS ---------- */} + + {/* Dark grid pattern */} + + + + + {/* Cyan gradient */} + + + + + + + + + + {/* Soft outer glow */} + + + + + + + + + {/* Sharper glow for nodes */} + + + + + + + + + {/* Dashed link style */} + + + {/* Reusable motion path for packet */} + + + + + {/* ---------- BACKGROUND ---------- */} + + + + {/* ---------- GPU CHIP (RIGHT) ---------- */} + + {/* Outer casing */} + + {/* Inner frame */} + + {/* Matrix / cores */} + {[...Array(5)].map((_, r) => ( + + ))} + {[...Array(6)].map((_, c) => ( + + ))} + + {/* Pulsing GPU die */} + + + + + {/* Glow ring */} + + + + + + {/* ---------- NEURAL GRAPH (LEFT/MID) ---------- */} + + {/* Links */} + + {/* lower cluster to chip */} + + + + + + + + + + + {/* upper cluster to mid */} + + + + + + + + + + + {/* vertical cross links */} + + + + + + + + + {/* Nodes */} + {[ + { x: 36, y: 148, r: 6 }, + { x: 40, y: 76, r: 6 }, + { x: 96, y: 124, r: 7 }, + { x: 92, y: 88, r: 7 }, + { x: 140, y: 96, r: 7 }, + { x: 152, y: 138, r: 7 }, + { x: 206, y: 106, r: 6.5 }, + { x: 212, y: 132, r: 6.5 }, + ].map((n, i) => ( + + + + + + + ))} + + {/* Data packets moving along paths */} + + + + + + + + + + + + + + + {/* ---------- LABELS ---------- */} + + ); +} diff --git a/src/pages/gpu/animations/KubernetesAcceleration.tsx b/src/pages/gpu/animations/KubernetesAcceleration.tsx new file mode 100644 index 0000000..0c7ed7f --- /dev/null +++ b/src/pages/gpu/animations/KubernetesAcceleration.tsx @@ -0,0 +1,124 @@ +"use client"; + +export default function KubernetesAcceleration() { + return ( + + Acceleration in Kubernetes + Pods spin up on a grid and get GPU badges. + + + {/* Dark grid */} + + + + + {/* Cyan gradient */} + + + + + + + + + + + + + + + + + + + + + {/* Background */} + + + + {/* Cluster grid */} + + {/* 4 rows × 6 cols */} + {Array.from({ length: 4 }).map((_, r) => + Array.from({ length: 6 }).map((__, c) => { + const x = 18 + c * 48; + const y = 24 + r * 46; + const delay = (r * 6 + c) * 0.06; + const on = (r + c) % 2 === 0; // mark some pods "on" + return ( + + {/* Pod */} + + + + + + {/* GPU badge (appears on powered pods) */} + {on && ( + + {/* small chip */} + + + + + {/* pins */} + {[-10, 10].map((px, i) => ( + 0 ? 6 : -6)} y2="0" stroke="#93c5fd" strokeWidth="1" /> + ))} + {/* pop-in */} + + + )} + + ); + }) + )} + + + + ); +} diff --git a/src/pages/gpu/animations/RAGPipeline.tsx b/src/pages/gpu/animations/RAGPipeline.tsx new file mode 100644 index 0000000..0ff9fc5 --- /dev/null +++ b/src/pages/gpu/animations/RAGPipeline.tsx @@ -0,0 +1,144 @@ +"use client"; + +export default function RAGPipeline() { + return ( + + Agent Compute & RAG Pipelines + Documents flow into a vector DB, then a model, and finally an answer bubble. + + + + + + + + + + + + + + + + + + + + + + + + + + {/* Arrowhead */} + + + + + {/* Paths for packets */} + + + + + {/* Background */} + + + + {/* Documents (left) */} + + {[-16, 0, 16].map((dy, i) => ( + + + + + + + + + + ))} + + + {/* Arrow: docs -> vector DB */} + + + + {/* Vector DB (middle cylinder stack) */} + + {/* cylinder 1 */} + + + {/* cylinder 2 */} + + + {/* cylinder 3 */} + + + + + {/* pulse */} + + + + + + {/* Arrow: DB -> model */} + + + {/* Model (right) */} + + {/* brain-ish blob */} + + {/* inner highlight */} + + + + + + {/* Output bubble */} + + + Answer ✓ + + + + {/* Packets along paths */} + + + + + + + + + + + + + + ); +} diff --git a/src/pages/gpu/animations/RenderingSimulation.tsx b/src/pages/gpu/animations/RenderingSimulation.tsx new file mode 100644 index 0000000..82b7908 --- /dev/null +++ b/src/pages/gpu/animations/RenderingSimulation.tsx @@ -0,0 +1,101 @@ +"use client"; + +export default function RenderingSimulation() { + return ( + + Rendering & Simulation + Wireframe mesh animates and resolves into a shaded render. + + + + + + + + + + + + + + + + + + + + + + + + + + + {/* Background */} + + + + {/* Mesh group */} + + {/* Orbit rotation for the model */} + + {/* Wireframe: icosahedron-like */} + {/* Outer ring */} + + + + {/* Cross rings */} + + + + + + + + {/* Connecting chords */} + {[-80, -40, 0, 40, 80].map((a, i) => ( + + ))} + + {/* Triangles that fade in to "render" */} + + {/* central tri */} + + + + {/* lower tri */} + + + + {/* side tris */} + + + + + + + + + + + + ); +} diff --git a/tsconfig.app.json b/tsconfig.app.json index 9d1235a..6779d32 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -14,7 +14,7 @@ /* Bundler mode */ "moduleResolution": "bundler", - "allowImportingTsExtensions": true, + "allowImportingTsExtensions": false, "verbatimModuleSyntax": true, "moduleDetection": "force", "noEmit": true,