feat: animate Meshery Architecture Diagram and add GIF export

[mishradwaterlaw]

Description

This PR fixes #7661

This Pull Request implements the animated Meshery Architecture Diagram and a dynamic high-fidelity GIF export feature on the Layer5.io website.

The implementation respects all original node coordinates, styles, and pixel alignments exactly as defined in meshery-architecture.svg, while introducing dynamic interactive elements, responsive controls, and custom browser-based rendering exports.

Notes for Reviewers

Here is a breakdown of the key architecture changes introduced for your review:

• Pixel-Perfect Grouped SVG (MesheryArchitectureSVG.js):
  • Programmatically grouped all 136 vector path nodes into 15 logical animation group IDs (#arch-*).
  • Resolved contrast legibility by introducing .arch-channel-label styling to path-drawn letters inside the dark channel (HTTP/gRPC and HTTP labels), rendering them in bright neon green (#00d3a9) to match brand accents.
  • Folded internal card backdrops, Ingress, and Egress containers inside #arch-adapters-cluster so they scale and fade in collectively at Step 7 instead of causing pre-rendering float bugs.
• 15-Step GSAP Timeline Sequence (index.js):
  • Scroll-triggered via GSAP ScrollTrigger to fire once at 65% viewport scroll.
  • Staggered entrances for metrics modules, adapters, K8s operators, metrics engines, and load generators.
  • Network connectivity lines drawn via strokeDashoffset transition.
  • Infinite idle loop pulsing connection lines (1.0 to 0.35 opacity) on a 2.8s yoyo cycle.
• Responsive Dark Glassmorphism Container (meshery-architecture.style.js):
  • Translucent glass styling (rgba(30, 33, 23, 0.88) with backdrop-filter: blur(14px) and glowing brand borders).
  • Mobile-responsive horizontal scroll lock preventing text from scaling below legibility limits.
  • Elegant right-aligned Replay and Brand-Colored Export buttons.
• Lazy-Loaded Dynamic GIF Export:
  • Lazily imports heavy dependencies (html2canvas, gifshot) only when requested by the user.
  • Scrubs the timeline across 98 points (6.5s at 15fps) while displaying an interactive progress spinner overlay.
  • Employs double requestAnimationFrame (waitForPaint) checks to allow browser draw-calls to fully paint before canvas snapshots are captured.

Verification and Quality Checks Done:

• ESLint Validated: Verified with npx eslint, passing with 0 errors and 0 warnings.
• SSR/SSG Build Safety: Cleaned and check-wrapped all window/document dependencies (typeof window !== "undefined"), ensuring perfect Gatsby SSR/SSG compatibility.
• Responsive Mobile Layout: Tested mobile viewport layout.

Signed commits

• Yes, I signed my commits.

[github-actions]

🚀 Preview deployment: https://layer5.io/pr-preview/pr-7758/

Note: Preview may take a moment (GitHub Pages deployment in progress). Please wait and refresh. Track deployment here

[saurabhraghuvanshii]

@mishradwaterlaw Please attach screen recording of your changes.

[mishradwaterlaw]

screen-capture.6.webm

Let me know if this aligns with the desired behavior or if you'd like any adjustments to the animation timing

[mishradwaterlaw]

hi @saurabhraghuvanshii @Rajesh-Nagarajan-11 (for some reason I can't see the previous comment where you linked the docs, but here is my update):

thanks for pointing me to the documentation.. I apologize for the misunderstanding regarding the original issue description. I've completely scrapped the custom GSAP/SVG animation and refactored the component to natively embed the design using the component, as per the Kanvas embedding docs. (Could you please confirm if this aligns with what you had in mind?)

my code is ready, but I currently have placeholders for the embedScriptSrc and embedId. Could you provide the exported .js script and ID for the Meshery Architecture design, or grant me access to it in Kanvas or point me on how to do it..so I can export it myself? Once I have those, i can plug them in and finalize the PR

[saurabhraghuvanshii]

@mishradwaterlaw I don't know why but, I'm not able to see your changes here https://layer5.io/pr-preview/pr-7758/cloud-native-management/meshery

[mishradwaterlaw]

my code is ready, but I currently have placeholders for the embedScriptSrc and embedId. Could you provide the exported .js script and ID for the Meshery Architecture design, or grant me access to it in Kanvas or point me on how to do it..so I can export it myself? Once I have those, i can plug them in and finalize the PR

hi @saurabhraghuvanshii sooo, the changes wont be visible on the preview just yet because i am currently using placeholder values for the embedScriptSrc and embedId, to get the diagram rendering properly, could you either provide the exported .js script and ID for the Meshery Architecture design, or grant me access to the design in Kanvas (with a quick pointer on how to export it) so I can grab it myself?... once I have the real script and ID plugged in, the embedded architecture diagram will show up perfectly