신스웨이브

<div class="scene">
  <div class="sun"></div>
  <div class="grid"></div>
  <h1>SYNTHWAVE</h1>
</div>

.scene{position:relative;width:100%;height:100%;overflow:hidden;
  background:linear-gradient(180deg,#1a0e3d 0%,#5c1e6b 42%,#ff6a3d 72%,#2a0f3d 72%)}
.sun{position:absolute;left:50%;top:34%;width:38%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  background:linear-gradient(#ffd23f,#ff6a3d 55%,#ff2f8f);
  background:repeating-linear-gradient(180deg,#ffd23f 0 4%,#ff6a3d 4% 8%,transparent 8% 10%),
    radial-gradient(circle,#ffdd6a,#ff5b8a 70%);
  box-shadow:0 0 60px rgba(255,110,150,.6)}
.grid{position:absolute;left:0;right:0;bottom:0;height:46%;
  background-image:linear-gradient(rgba(255,80,220,.7) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,80,220,.7) 1px,transparent 1px);
  background-size:10% 16px,7% 100%;
  transform:perspective(220px) rotateX(58deg);transform-origin:bottom;
  animation:scroll 1.2s linear infinite}
@keyframes scroll{to{background-position:0 16px,0 0}}
h1{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);margin:0;color:#fff;
  font-family:"Arial Black",sans-serif;font-style:italic;font-weight:900;letter-spacing:.06em;
  font-size:clamp(16px,4.4vmin,26px);text-shadow:0 0 8px #ff5eea,0 0 20px #6a3dff}