Perspective grid

<div class="sun" aria-hidden="true"></div>
<div class="floor" aria-hidden="true"><div class="plane"></div></div>
<h1>Grid</h1>

body{overflow:hidden;background:linear-gradient(#140807 40%,#2a0f0b)}
.sun{position:fixed;left:50%;top:22%;width:min(220px,40vw);aspect-ratio:1;margin-left:calc(min(220px,40vw) / -2);border-radius:50%;
  background:linear-gradient(#ffd166,#f08a5d);box-shadow:0 0 80px rgba(240,138,93,.6)}
.floor{position:fixed;left:-50%;right:-50%;bottom:0;height:55%;perspective:300px;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 45%);mask-image:linear-gradient(transparent,#000 45%)}
.plane{position:absolute;inset:-50% 0 0 0;transform:rotateX(62deg);transform-origin:50% 100%;
  background-image:linear-gradient(#f08a5d 2px,transparent 2px),linear-gradient(90deg,#f08a5d 2px,transparent 2px);
  background-size:70px 70px;animation:rush 1.6s linear infinite}
@keyframes rush{to{background-position:0 70px}}
h1{position:relative;margin:0;font-size:clamp(2rem,8vw,3.4rem);letter-spacing:.08em;text-transform:uppercase;text-shadow:0 0 24px rgba(240,138,93,.8)}
@media (prefers-reduced-motion:reduce){.plane{animation:none}}

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Perspective grid</title>
<style>
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{display:grid;place-items:center;background:#140807;color:#fffffc;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
body{overflow:hidden;background:linear-gradient(#140807 40%,#2a0f0b)}
.sun{position:fixed;left:50%;top:22%;width:min(220px,40vw);aspect-ratio:1;margin-left:calc(min(220px,40vw) / -2);border-radius:50%;
  background:linear-gradient(#ffd166,#f08a5d);box-shadow:0 0 80px rgba(240,138,93,.6)}
.floor{position:fixed;left:-50%;right:-50%;bottom:0;height:55%;perspective:300px;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 45%);mask-image:linear-gradient(transparent,#000 45%)}
.plane{position:absolute;inset:-50% 0 0 0;transform:rotateX(62deg);transform-origin:50% 100%;
  background-image:linear-gradient(#f08a5d 2px,transparent 2px),linear-gradient(90deg,#f08a5d 2px,transparent 2px);
  background-size:70px 70px;animation:rush 1.6s linear infinite}
@keyframes rush{to{background-position:0 70px}}
h1{position:relative;margin:0;font-size:clamp(2rem,8vw,3.4rem);letter-spacing:.08em;text-transform:uppercase;text-shadow:0 0 24px rgba(240,138,93,.8)}
@media (prefers-reduced-motion:reduce){.plane{animation:none}}
</style></head>
<body>
<div class="sun" aria-hidden="true"></div>
<div class="floor" aria-hidden="true"><div class="plane"></div></div>
<h1>Grid</h1>
</body></html>