Floating shapes

<ul class="shapes" aria-hidden="true">
  <li style="--x:8%;--s:34px;--t:14s;--d:0s"></li><li style="--x:20%;--s:22px;--t:11s;--d:-4s"></li>
  <li style="--x:33%;--s:50px;--t:17s;--d:-9s"></li><li style="--x:46%;--s:26px;--t:12s;--d:-2s"></li>
  <li style="--x:58%;--s:40px;--t:15s;--d:-7s"></li><li style="--x:70%;--s:20px;--t:10s;--d:-5s"></li>
  <li style="--x:82%;--s:56px;--t:19s;--d:-12s"></li><li style="--x:92%;--s:30px;--t:13s;--d:-1s"></li>
</ul>
<h1>Drift</h1>

body{overflow:hidden;background:#140807}
.shapes{position:fixed;inset:0;overflow:hidden;margin:0;padding:0;list-style:none}
.shapes li{position:absolute;bottom:-120px;left:var(--x);width:var(--s);height:var(--s);border:2px solid #f08a5d;opacity:.5;
  animation:float var(--t) linear infinite;animation-delay:var(--d)}
.shapes li:nth-child(3n){border-radius:50%;border-color:#f3d9c8}
.shapes li:nth-child(3n+1){border-radius:6px}
.shapes li:nth-child(5n){border-color:#d98a8a}
@keyframes float{
  from{transform:translateY(0) rotate(0);opacity:0}
  10%{opacity:.5}
  90%{opacity:.5}
  to{transform:translateY(-120vh) rotate(360deg);opacity:0}
}
h1{position:relative;margin:0;font-size:clamp(2rem,8vw,3.6rem);letter-spacing:-.03em}
@media (prefers-reduced-motion:reduce){.shapes li{animation:none;bottom:30%}}

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Floating shapes</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:#140807}
.shapes{position:fixed;inset:0;overflow:hidden;margin:0;padding:0;list-style:none}
.shapes li{position:absolute;bottom:-120px;left:var(--x);width:var(--s);height:var(--s);border:2px solid #f08a5d;opacity:.5;
  animation:float var(--t) linear infinite;animation-delay:var(--d)}
.shapes li:nth-child(3n){border-radius:50%;border-color:#f3d9c8}
.shapes li:nth-child(3n+1){border-radius:6px}
.shapes li:nth-child(5n){border-color:#d98a8a}
@keyframes float{
  from{transform:translateY(0) rotate(0);opacity:0}
  10%{opacity:.5}
  90%{opacity:.5}
  to{transform:translateY(-120vh) rotate(360deg);opacity:0}
}
h1{position:relative;margin:0;font-size:clamp(2rem,8vw,3.6rem);letter-spacing:-.03em}
@media (prefers-reduced-motion:reduce){.shapes li{animation:none;bottom:30%}}
</style></head>
<body>
<ul class="shapes" aria-hidden="true">
  <li style="--x:8%;--s:34px;--t:14s;--d:0s"></li><li style="--x:20%;--s:22px;--t:11s;--d:-4s"></li>
  <li style="--x:33%;--s:50px;--t:17s;--d:-9s"></li><li style="--x:46%;--s:26px;--t:12s;--d:-2s"></li>
  <li style="--x:58%;--s:40px;--t:15s;--d:-7s"></li><li style="--x:70%;--s:20px;--t:10s;--d:-5s"></li>
  <li style="--x:82%;--s:56px;--t:19s;--d:-12s"></li><li style="--x:92%;--s:30px;--t:13s;--d:-1s"></li>
</ul>
<h1>Drift</h1>
</body></html>