fix(retro-grid): replace the CSS perspective grid with a WebGL renderer

[Yeom-JinHo]

Description

This PR replaces RetroGrid's CSS-based perspective renderer with a raw WebGL implementation to reduce flickering and aliasing while keeping the original API and overall visual style intact. It also keeps a built-in CSS fallback until WebGL is ready, avoids reinitializing the WebGL pipeline on prop updates, and handles WebGL context loss so the component degrades gracefully instead of going blank.

Changes

• Replaced the CSS perspective + repeating gradient renderer with a raw WebGL shader renderer
• Preserved the existing public API (angle, cellSize, opacity, lightLineColor, darkLineColor)
• Added a built-in CSS fallback that renders on SSR/initial hydration and remains visible when WebGL is unavailable
• Made the scrolling motion seamless instead of snapping at the end of each cycle
• Tuned line rendering to better match the original CSS version, including line thickness, anti-aliasing, horizon smoothing, and reduced top-edge density
• Kept the WebGL pipeline stable across prop updates by updating uniforms/redrawing instead of tearing down and recreating the renderer
• Added viewport resize re-syncs so the projection stays correct even when the animation loop is paused
• Handled webglcontextlost / webglcontextrestored by falling back to CSS on loss and rebuilding the pipeline on restore
• Normalized fallback angle and cellSize values so the CSS fallback matches the WebGL renderer’s bounds and edge-case behavior
• Removed the old animate-grid registry/global CSS metadata and updated the docs/generated registry artifacts

Motivation

The previous implementation relied on perspective-transformed 1px CSS gradients, which caused noticeable flickering and aliasing, especially near the horizon and top edges of the grid. WebGL gives us finer control over projection, sampling, anti-aliasing, and distance-based detail reduction, while the CSS fallback preserves first-paint behavior and compatibility for unsupported or recovering environments.

Breaking Changes

None.

Screenshots

BEFORE

2026-03-18.8.27.57.mov

AFTER

2026-03-18.8.29.32.mov

[vercel]

@Yeom-JinHo is attempting to deploy a commit to the product-studio Team on Vercel.

A member of the Team first needs to authorize it.