emre/www_projectmycelium_com
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: replace static icons with animated SVG components in GPU capabilities

Browse Source 
- 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
This commit is contained in:
sasha-astiadi
2025-11-08 00:56:07 +01:00
parent 5ab909bd12
commit 22e2e4b80c
6 changed files with 698 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/pages/gpu/animations/RAGPipeline.tsx Normal file
View File

@@ -0,0 +1,144 @@
"use client";
export default function RAGPipeline() {
return (
<svg
width="382"
height="282"
viewBox="0 0 382 282"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-labelledby="title desc"
>
<title id="title">Agent Compute & RAG Pipelines</title>
<desc id="desc">Documents flow into a vector DB, then a model, and finally an answer bubble.</desc>
<defs>
<pattern id="grid" width="16" height="16" patternUnits="userSpaceOnUse">
<path d="M16 0H0V16" fill="none" stroke="#0f1621" strokeWidth="1" />
</pattern>
<linearGradient id="cyanglow" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stopColor="#00E5FF">
<animate attributeName="stop-color" values="#00E5FF;#00B8DB;#00E5FF" dur="4s" repeatCount="indefinite" />
</stop>
<stop offset="100%" stopColor="#00B8DB">
<animate attributeName="stop-color" values="#00B8DB;#00E5FF;#00B8DB" dur="4s" repeatCount="indefinite" />
</stop>
</linearGradient>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="4" result="b" />
<feMerge>
<feMergeNode in="b" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<style>{`
.label { fill: #8ea2b2; font-weight: 600; letter-spacing: .06em; font-size: 12px; }
.box { fill: #0e1724; stroke: #163447; stroke-width: 1.5; }
.cyl { fill: #0b1320; stroke: url(#cyanglow); stroke-width: 2; }
.brain{ fill: #09131c; stroke: url(#cyanglow); stroke-width: 2; }
.arrow{ stroke: #11cdef; stroke-width: 2; fill: none; stroke-linecap: round; marker-end: url(#arrowhead); }
.pkt { fill: url(#cyanglow); }
.doc { fill: #0b1320; stroke: #2a4253; stroke-width: 1.2; }
`}</style>
{/* Arrowhead */}
<marker id="arrowhead" markerWidth="8" markerHeight="8" refX="6" refY="3.5" orient="auto">
<polygon points="0 0, 7 3.5, 0 7" fill="#11cdef" />
</marker>
{/* Paths for packets */}
<path id="p1" d="M 96 132 C 140 132, 164 132, 200 132" fill="none" />
<path id="p2" d="M 240 132 C 270 132, 300 132, 328 116" fill="none" />
</defs>
{/* Background */}
<rect width="382" height="282" fill="transparent" />
<rect width="382" height="282" fill="url(#grid)" opacity="0.55" />
{/* Documents (left) */}
<g transform="translate(36,84)">
{[-16, 0, 16].map((dy, i) => (
<g key={i} transform={`translate(0,${dy})`} filter="url(#glow)">
<rect x="0" y="0" width="56" height="70" rx="6" className="doc" />
<rect x="0" y="10" width="56" height="10" fill="#0f1b27" />
<line x1="10" y1="28" x2="46" y2="28" stroke="#294155" strokeWidth="2" />
<line x1="10" y1="38" x2="40" y2="38" stroke="#294155" strokeWidth="2" />
<line x1="10" y1="48" x2="44" y2="48" stroke="#294155" strokeWidth="2" />
<animateTransform attributeName="transform" type="translate" values="0,8;0,0;0,8" dur="4s" begin={`${i * 0.25}s`} repeatCount="indefinite" />
<animate attributeName="opacity" values="0.8;1;0.8" dur="3.2s" begin={`${i * 0.25}s`} repeatCount="indefinite" />
</g>
))}
</g>
{/* Arrow: docs -> vector DB */}
<path className="arrow" d="M 96 120 L 190 120" opacity="0.7" />
<path className="arrow" d="M 96 144 L 190 144" opacity="0.7" />
{/* Vector DB (middle cylinder stack) */}
<g transform="translate(190,84)" filter="url(#glow)">
{/* cylinder 1 */}
<ellipse cx="50" cy="12" rx="50" ry="12" className="cyl" fillOpacity="0.9" />
<rect x="0" y="12" width="100" height="22" className="cyl" fillOpacity="0.9" />
{/* cylinder 2 */}
<ellipse cx="50" cy="34" rx="50" ry="12" className="cyl" fillOpacity="0.9" />
<rect x="0" y="34" width="100" height="22" className="cyl" fillOpacity="0.9" />
{/* cylinder 3 */}
<ellipse cx="50" cy="56" rx="50" ry="12" className="cyl" fillOpacity="0.9" />
<rect x="0" y="56" width="100" height="22" className="cyl" fillOpacity="0.9" />
<ellipse cx="50" cy="78" rx="50" ry="12" className="cyl" />
{/* pulse */}
<rect x="0" y="12" width="100" height="68" fill="url(#cyanglow)" opacity="0.0">
<animate attributeName="opacity" values="0;0.12;0" dur="2.4s" repeatCount="indefinite" />
</rect>
</g>
{/* Arrow: DB -> model */}
<path className="arrow" d="M 290 132 L 332 112" />
{/* Model (right) */}
<g transform="translate(300,84)" filter="url(#glow)">
{/* brain-ish blob */}
<path
d="M 32 30
c 10 -16, 28 -12, 30 6
c 12 2, 14 18, 2 26
c -2 16, -18 20, -28 10
c -10 10, -28 4, -26 -12
c -12 -6, -10 -22, 6 -28
c 2 -12, 16 -12, 16 -2 z"
className="brain"
/>
{/* inner highlight */}
<circle cx="42" cy="46" r="10" fill="url(#cyanglow)" opacity="0.85">
<animate attributeName="r" values="9;12;9" dur="2.2s" repeatCount="indefinite" />
</circle>
</g>
{/* Output bubble */}
<g transform="translate(312,54)">
<rect x="-6" y="-6" width="64" height="28" rx="8" fill="#0e1724" stroke="url(#cyanglow)" strokeWidth="1.5" opacity="0.95" />
<text x="6" y="13" fontSize="10" fill="#cbe7f3" fontFamily="ui-sans-serif, system-ui">Answer ✓</text>
<animateTransform attributeName="transform" type="translate" values="312,64;312,54;312,64" dur="3.4s" repeatCount="indefinite" />
</g>
{/* Packets along paths */}
<g>
<circle r="3.2" className="pkt">
<animateMotion dur="2.4s" repeatCount="indefinite">
<mpath href="#p1" />
</animateMotion>
</circle>
<circle r="3.2" className="pkt" opacity="0.85">
<animateMotion dur="2.0s" begin="0.35s" repeatCount="indefinite">
<mpath href="#p2" />
</animateMotion>
</circle>
</g>
</svg>
);
}