feat: Redesign the home page with Remotion

[vernonthedev]

Area

HomePage

NestForge Version

2.0

Rust Version

1.87

Summary

To truly showcase the high-performance and modular nature of NestForge, we are redesigning the home page using Remotion. Instead of static screenshots, the landing page will feature programmatic, high-fidelity animations of code execution, module injection, and performance benchmarks—all rendered via React/Remotion to ensure pixel-perfect clarity and smooth frame rates.

Technical Spec

• Tech Stack: Integration of Remotion within the existing Next.js frontend.
• API Surface: Implementation of a HeroVideo component that takes NestForge-specific JSON (e.g., benchmark data or code snippets) and animates the "NestForge CLI" workflow.
• Component Boundaries: - RemotionPlayer: A wrapper to handle client-side rendering of the video sequences.
  • CodeHighlighter: A component to animate the transition from raw Rust code to modular backend structures.
• Integration Points: The landing page will fetch the latest performance metrics from the core framework tests to dynamically update the Remotion video content.

Breaking Change Analysis

• None for the Core Framework: This change is isolated to the project's web presence.
• Frontend Dependencies: Adds remotion, @remotion/player, and @remotion/cli to the documentation site's package.json.

Performance Impact

• Runtime: Since Remotion is used for rendering, we must ensure that the video player uses "lazy loading" to prevent a high LCP (Largest Contentful Paint) score.
• Static Assets: Video frames will be pre-rendered or served as an optimized MP4/WebM loop for users without high-end GPUs, ensuring the site stays as fast as the framework itself.

Alternatives Considered

1. Lottie Files: Rejected due to limited support for complex code syntax highlighting and dynamic data-driven animations.
2. Standard MP4 Exports: Rejected because we want the ability to update the code snippets and benchmark numbers in the video without re-exporting from a video editor manually.
3. Framer Motion: While great for UI, it lacks the "frame-by-frame" rendering precision that Remotion provides for high-fidelity technical explainers.