Skip to main content

​
Insight

A Next.js landing page with GSAP, Lenis smooth scrolling, and React component architecture can be matched in feel — if not exact feature parity — using pure CSS animations and a single IntersectionObserver in an embedded HTML template. The key techniques:
  1. Multi-layered radial gradients on the body create atmospheric depth without canvas or WebGL. Stacking 3 elliptical gradients at different positions (blue top-left, iron oxide top-right, dust bottom-center) creates perceived 3D space.
  2. 24 CSS-animated particles with randomized sizes (1-3px), blur (depth-of-field), negative animation delays (staggered start), and 3 distinct drift keyframe patterns feel organic rather than mechanical.
  3. Visor opacity escalation (background 0.65→0.88 on hover, border opacity 0.18→0.32) gives glass-morphism cards a tactile “pressurization” response that flat hover states lack.
  4. Concentrated telemetry flicker — placing the glitch at 96-99% of the animation cycle (not evenly distributed) creates “almost stable with brief CRT artifacts” that reads as authentic rather than broken.
  5. IntersectionObserver scroll reveals with scale(0.98) + translateY(24px) + opacity transition replicate GSAP’s “pressure pulse” section entrance effect at near-zero JS cost.

​
Why this matters

Not every surface needs a React build pipeline. Backend services on branded domains benefit from polished landing pages, but adding Next.js deployment complexity for a single HTML page is overkill. CSS-only atmospheric effects compile into a standalone binary alongside the API — zero runtime overhead, zero separate deployments.

​
Applicable to

Any compiled backend serving HTML via template strings. The pattern works with Hono, Express, Fastify, or any framework that supports text/html responses.