Showcase

Four weather cards — CSS only, built by Ling 3.1 Flash

Hostedvia OpenCodeOpenRouter
Running live in your browserNew tab
Show the code the model wrote
HTML23,519 characters
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Weather — four pure-CSS cards</title>
<style>
/* ============================================================
   Design system — one size, one radius, one typeface
   ============================================================ */
:root {
  --card-h: 344px;
  --radius: 22px;
  --font: "Avenir Next", Futura, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  min-height: 100vh;
  font-family: var(--font);
  background: radial-gradient(120% 90% at 50% -10%, #1c2534 0%, #0e131b 55%, #0a0e13 100%);
  color: #e9eff5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 54px 24px 56px;
  user-select: none;
}

header { text-align: center; margin-bottom: 38px; }
header h1 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .36em;
  text-indent: .36em; /* optically re-centre tracked caps */
  opacity: .92;
}
header p {
  margin-top: 11px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .45;
}

/* ============================================================
   Responsive row → 2×2 grid → single column
   ============================================================ */
.sky {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  width: 100%;
  max-width: 1180px;
}
@media (max-width: 1024px) { .sky { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .sky { grid-template-columns: 1fr; } }

/* ============================================================
   Card shell + breathing aura (staggered so cards never pulse in unison)
   ============================================================ */
.card {
  position: relative;
  width: 100%;
  max-width: 292px;
  height: var(--card-h);
  margin: 0 auto;
  border-radius: var(--radius);
  box-shadow:
    0 26px 48px -18px rgba(0, 0, 0, .55),
    inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.card::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: calc(var(--radius) + 14px);
  background: radial-gradient(closest-side, var(--aura), rgba(0, 0, 0, 0) 78%);
  filter: blur(18px);
  z-index: -1;
  animation: aura var(--ad) ease-in-out infinite alternate;
  animation-delay: var(--adl);
}
@keyframes aura {
  from { opacity: var(--ao); transform: scale(1); }
  to   { opacity: calc(var(--ao) + .16); transform: scale(1.045); }
}

.card--sun   { --aura: rgba(255, 186, 64, .55);    --ao: .30; --ad: 6.4s; --adl: -1.2s; }
.card--rain  { --aura: rgba(110, 150, 195, .50); --ao: .28; --ad: 7.6s; --adl: -3.1s; }
.card--snow  { --aura: rgba(190, 215, 240, .45); --ao: .26; --ad: 6.9s; --adl: -5.2s; }
.card--storm { --aura: rgba(96, 116, 190, .50);  --ao: .30; --ad: 8.3s; --adl: -2.4s; }

.clip  { position: absolute; inset: 0; border-radius: var(--radius); overflow: hidden; }
.scene { position: absolute; left: 0; right: 0; top: 0; bottom: 84px; } /* 260px stage */

/* Card skies — day versus storm moods */
.card--sun   .clip { background: linear-gradient(180deg, #3f9fe6 0%, #6fbdee 46%, #bfe4f7 100%); }
.card--rain  .clip { background: linear-gradient(180deg, #576b80 0%, #7e93a7 52%, #a4b5c2 100%); }
.card--snow  .clip { background: linear-gradient(180deg, #93abbc 0%, #bccdd9 55%, #e2ebf2 100%); }
.card--storm .clip { background: linear-gradient(180deg, #121924 0%, #22303f 52%, #33465e 100%); }

/* Sun card: warm horizon glow */
.card--sun .scene {
  background: radial-gradient(130% 90% at 50% 108%, rgba(255, 214, 120, .55), rgba(255, 214, 120, 0) 62%);
}

/* ============================================================
   Meta bar — label, caption, temperature
   ============================================================ */
.meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 18px 20px;
  background: linear-gradient(to top, rgba(8, 14, 22, .42), rgba(8, 14, 22, 0));
}
.meta .label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .24em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.meta .caption {
  display: block;
  margin-top: 5px;
  font-size: 9.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .68;
}
.meta .temp {
  font-size: 31px;
  font-weight: 300;
  line-height: 1;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .3);
}

/* ============================================================
   Cloud — one element plus two pseudo-element bumps
   ============================================================ */
.cloud { position: absolute; width: 96px; height: 30px; border-radius: 999px; }
.cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.cloud::before { width: 46px; height: 46px; top: -23px; left: 15px; }
.cloud::after  { width: 33px; height: 33px; top: -15px; right: 15px; }
.cloud--sm { width: 78px; height: 24px; }
.cloud--sm::before { width: 38px; height: 38px; top: -19px; left: 12px; }
.cloud--sm::after  { width: 27px; height: 27px; top: -12px; right: 12px; }
.cloud--lg { width: 118px; height: 34px; }
.cloud--lg::before { width: 56px; height: 56px; top: -28px; left: 18px; }
.cloud--lg::after  { width: 40px; height: 40px; top: -18px; right: 18px; }

.cloud--drift {
  top: 27%;
  left: 112%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(226, 237, 246, .94));
  filter: drop-shadow(0 8px 10px rgba(40, 70, 100, .16));
  opacity: 0;
  z-index: 3; /* crosses in front of the sun, briefly dimming it */
  animation: drift 19s linear infinite;
  animation-delay: -7s;
}
@keyframes drift {
  0%   { left: 112%; opacity: 0; transform: translateY(0) scale(.94); }
  9%   { opacity: .97; }
  50%  { transform: translateY(6px) scale(1); }
  91%  { opacity: .93; }
  100% { left: -64%; opacity: 0; transform: translateY(10px) scale(1.07); }
}

.cloud--rain {
  top: 12%;
  left: 50%;
  margin-left: -48px;
  background: linear-gradient(180deg, #ffffff, #dbe4ec);
  filter: drop-shadow(0 8px 8px rgba(25, 40, 55, .22));
  z-index: 2;
  animation: bob 5.4s ease-in-out infinite alternate;
  animation-delay: -2.2s;
}

.cloud--snow {
  top: 13%;
  left: 50%;
  margin-left: -39px;
  background: linear-gradient(180deg, #fbfdff, #dde7f0);
  filter: drop-shadow(0 6px 7px rgba(60, 80, 105, .18));
  z-index: 2;
  animation: bob 6.2s ease-in-out infinite alternate;
  animation-delay: -3.5s;
}

.cloud--storm, .cloud--storm-wisp {
  background: linear-gradient(180deg, #46566a, #2e3a49);
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .35));
}
.cloud--storm {
  top: 9%;
  left: 50%;
  margin-left: -59px;
  z-index: 2;
  animation: bob 4.8s ease-in-out infinite alternate;
  animation-delay: -1.6s;
}
.cloud--storm-wisp {
  top: 6%;
  left: 16%;
  opacity: .8;
  z-index: 1;
  animation: bob 6.6s ease-in-out infinite alternate;
  animation-delay: -1.1s;
}

@keyframes bob {
  from { transform: translateY(0); }
  to   { transform: translateY(5px); }
}

/* ============================================================
   SUN — radiant disc, rotating rays, pulsing glow
   ============================================================ */
.sun-glow {
  position: absolute;
  left: 50%;
  top: 37%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 205, 90, .5), rgba(255, 190, 70, .18) 45%, rgba(255, 190, 70, 0) 70%);
  transform: translate(-50%, -50%);
  animation: glow-pulse 6.2s ease-in-out infinite alternate;
  animation-delay: -2.1s;
}
@keyframes glow-pulse {
  from { transform: translate(-50%, -50%) scale(.94); opacity: .75; }
  to   { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
}

.sun-rays {
  position: absolute;
  left: 50%;
  top: 37%;
  width: 236px;
  height: 236px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 208, 84, .85) 0deg 8deg,
    rgba(255, 208, 84, .3) 10deg,
    rgba(255, 208, 84, 0) 13deg 30deg
  );
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0 35%, #000 45%, #000 62%, rgba(0, 0, 0, 0) 79%);
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0 35%, #000 45%, #000 62%, rgba(0, 0, 0, 0) 79%);
  transform: translate(-50%, -50%);
  animation: spin 52s linear infinite;
}
@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.sun-disc {
  position: absolute;
  left: 50%;
  top: 37%;
  width: 106px;
  height: 106px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fffbe0 0%, #ffe27a 46%, #ffb63d 78%, #ff9d2e 100%);
  transform: translate(-50%, -50%);
  animation: disc-pulse 4.6s ease-in-out infinite alternate;
  animation-delay: -1.4s;
}
@keyframes disc-pulse {
  from {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 26px 6px rgba(255, 197, 70, .45), 0 0 70px 20px rgba(255, 176, 54, .22);
  }
  to {
    transform: translate(-50%, -50%) scale(1.055);
    box-shadow: 0 0 38px 12px rgba(255, 205, 90, .7), 0 0 96px 34px rgba(255, 186, 64, .34);
  }
}

/* ============================================================
   RAIN — staggered drops, synced splashes, puddle line
   ============================================================ */
.puddle {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 80%;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(150, 180, 215, .45), rgba(150, 180, 215, 0) 70%);
  transform: translateX(-50%);
  animation: puddle 4.2s ease-in-out infinite alternate;
}
@keyframes puddle {
  from { transform: translateX(-50%) scaleX(.94); opacity: .65; }
  to   { transform: translateX(-50%) scaleX(1.05); opacity: 1; }
}

.drop {
  position: absolute;
  top: var(--top, 62px);
  left: var(--x);
  width: 2.5px;
  height: 13px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(170, 195, 225, 0), rgba(150, 180, 220, .95) 60%, rgba(190, 215, 245, .95));
  transform: rotate(var(--tilt, 8deg));
  opacity: 0;
  animation: fall var(--d, 1.2s) cubic-bezier(.45, .02, .7, .4) infinite;
  animation-delay: var(--dl, 0s);
}
/* Splash core + ripple ring — same duration/delay as the fall, so they fire the instant the drop lands */
.drop::before, .drop::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  border-radius: 50%;
  transform: translateX(-50%) scale(0);
  opacity: 0;
}
.drop::before {
  width: 8px;
  height: 3px;
  background: rgba(200, 222, 248, .95);
  animation: splash var(--d, 1.2s) linear infinite;
  animation-delay: var(--dl, 0s);
}
.drop::after {
  width: 13px;
  height: 5px;
  border: 1px solid rgba(200, 222, 248, .55);
  animation: splash-ring var(--d, 1.2s) linear infinite;
  animation-delay: var(--dl, 0s);
}

@keyframes fall {
  0%   { transform: translateY(-24px) rotate(var(--tilt, 8deg)); opacity: 0; }
  12%  { opacity: 1; }
  86%  { opacity: 1; }
  93%  { transform: translateY(var(--fall, 150px)) rotate(var(--tilt, 8deg)); opacity: 1; }
  99%  { transform: translateY(calc(var(--fall, 150px) + 4px)) rotate(var(--tilt, 8deg)); opacity: 0; }
  100% { transform: translateY(calc(var(--fall, 150px) + 4px)) rotate(var(--tilt, 8deg)); opacity: 0; }
}
@keyframes splash {
  0%, 91% { transform: translateX(-50%) scale(0); opacity: 0; }
  94% { transform: translateX(-50%) scale(.75); opacity: .95; }
  98% { transform: translateX(-50%) scale(1.15); opacity: 0; }
  100% { transform: translateX(-50%) scale(1.15); opacity: 0; }
}
@keyframes splash-ring {
  0%, 92% { transform: translateX(-50%) scale(0); opacity: 0; }
  95% { transform: translateX(-50%) scale(.5); opacity: .6; }
  100% { transform: translateX(-50%) scale(1.3); opacity: 0; }
}

/* ============================================================
   SNOW — swaying flakes, soft accumulation
   ============================================================ */
.flake {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--s, 6px);
  height: var(--s, 6px);
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 35%, rgba(255, 255, 255, .55) 70%, rgba(255, 255, 255, 0));
  box-shadow: 0 0 5px rgba(255, 255, 255, .45);
  opacity: 0;
  animation: snow var(--d, 8s) ease-in-out infinite;
  animation-delay: var(--dl, 0s);
}
@keyframes snow {
  0%   { transform: translate(0, -14px) rotate(0deg); opacity: 0; }
  7%   { opacity: var(--so, 1); }
  25%  { transform: translate(var(--sw, 16px), 64px) rotate(150deg); }
  50%  { transform: translate(calc(var(--sw, 16px) * -.55), 130px) rotate(300deg); }
  75%  { transform: translate(var(--sw, 16px), 196px) rotate(450deg); }
  93%  { opacity: var(--so, 1); }
  100% { transform: translate(0, 254px) rotate(570deg); opacity: 0; }
}

.drift-mound {
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 150%;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 110%, #ffffff 18%, rgba(252, 254, 255, .9) 42%, rgba(255, 255, 255, 0) 70%);
  transform: translateX(-50%);
  animation: settle 6.8s ease-in-out infinite alternate;
  animation-delay: -1.9s;
}
.drift-mound--2 {
  width: 96%;
  height: 44px;
  bottom: -6px;
  opacity: .8;
  animation-duration: 8.4s;
  animation-delay: -4.4s;
}
@keyframes settle {
  from { transform: translateX(-50%) scaleX(.97); }
  to   { transform: translateX(-50%) scaleX(1.03); }
}

/* ============================================================
   STORM — heavy slanted rain, chained lightning on an 11s loop
   (flashes at ~0.7s / 3.7s / 5.7s / 7.8s / 9.7s with restrikes)
   ============================================================ */
.bolt {
  position: absolute;
  top: 9%;
  left: 57%;
  width: 26px;
  height: 172px;
  background: linear-gradient(180deg, #fffbe8, #ffe98a);
  clip-path: polygon(58% 0, 100% 0, 71% 35%, 95% 35%, 27% 100%, 47% 57%, 23% 57%);
  filter: drop-shadow(0 0 14px rgba(255, 244, 175, .95)) drop-shadow(0 0 34px rgba(255, 240, 160, .5));
  opacity: 0;
  z-index: 1; /* emerges from behind the cloud */
  animation: bolt 11s linear infinite;
}
@keyframes bolt {
  0%, 5.7% { opacity: 0; }
  5.9%  { opacity: 1; }
  6.3%  { opacity: .1; }
  6.6%  { opacity: .85; }
  7.2%, 33.6% { opacity: 0; }
  33.9% { opacity: .95; }
  34.5% { opacity: 0; }
  51.7%, 51.9% { opacity: 0; }
  52%   { opacity: .75; }
  52.6%, 70.6% { opacity: 0; }
  70.9% { opacity: 1; }
  71.5% { opacity: .2; }
  71.9% { opacity: .9; }
  72.7%, 87.7% { opacity: 0; }
  88%   { opacity: .6; }
  88.6%, 100% { opacity: 0; }
}

/* Whole-card flash */
.flash {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: radial-gradient(130% 100% at 58% -6%, rgba(255, 252, 230, .98) 0%, rgba(214, 228, 255, .72) 38%, rgba(150, 180, 220, .25) 62%, rgba(150, 180, 220, 0) 82%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  animation: flash 11s linear infinite;
}
@keyframes flash {
  0%, 5.6% { opacity: 0; }
  6%    { opacity: .55; }
  6.5%  { opacity: .08; }
  6.9%  { opacity: .4; }
  7.5%, 33.4% { opacity: 0; }
  33.8% { opacity: .92; }
  34.7% { opacity: .05; }
  35.1% { opacity: .3; }
  35.8%, 51.5% { opacity: 0; }
  51.9% { opacity: .5; }
  52.5%, 70.4% { opacity: 0; }
  70.8% { opacity: .95; }
  71.4% { opacity: .15; }
  71.8% { opacity: .8; }
  72.9%, 87.4% { opacity: 0; }
  87.8% { opacity: .45; }
  88.4%, 100% { opacity: 0; }
}

/* The storm sky itself brightens with the same chained timing */
.card--storm .scene { animation: scene-flash 11s linear infinite; }
@keyframes scene-flash {
  0%, 5.8% { filter: brightness(1); }
  6.2%  { filter: brightness(1.5); }
  6.8%  { filter: brightness(1.08); }
  7.2%, 33.6% { filter: brightness(1); }
  34%   { filter: brightness(1.75); }
  34.9% { filter: brightness(1.1); }
  35.4%, 51.7% { filter: brightness(1); }
  52.1% { filter: brightness(1.4); }
  52.8%, 70.6% { filter: brightness(1); }
  71%   { filter: brightness(1.8); }
  71.6% { filter: brightness(1.15); }
  72%   { filter: brightness(1.55); }
  73%, 87.6% { filter: brightness(1); }
  88%   { filter: brightness(1.35); }
  88.6%, 100% { filter: brightness(1); }
}

/* ============================================================
   Accessibility — honour reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .drop, .flake, .bolt, .flash, .cloud--drift { opacity: 0; }
}
</style>
</head>
<body>

<header>
  <h1>Weather</h1>
  <p>four forecasts &middot; pure css &middot; no javascript, svg or images</p>
</header>

<main class="sky">

  <!-- ================= SUN ================= -->
  <section class="card card--sun" aria-label="Sunny, 24 degrees">
    <div class="clip">
      <div class="scene">
        <div class="sun-glow"></div>
        <div class="sun-rays"></div>
        <div class="sun-disc"></div>
        <div class="cloud cloud--drift"></div>
      </div>
    </div>
    <div class="meta">
      <div>
        <span class="label">Sun</span>
        <span class="caption">clear &middot; calm</span>
      </div>
      <span class="temp">24&deg;</span>
    </div>
  </section>

  <!-- ================= RAIN ================= -->
  <section class="card card--rain" aria-label="Rain, 12 degrees">
    <div class="clip">
      <div class="scene">
        <div class="cloud cloud--rain"></div>
        <div class="puddle"></div>
        <span class="drop" style="--x:8%;  --d:1.24s; --dl:-.18s; --fall:152px; --tilt:8deg"></span>
        <span class="drop" style="--x:15%; --d:1.06s; --dl:-.72s; --fall:160px; --tilt:11deg"></span>
        <span class="drop" style="--x:22%; --d:1.38s; --dl:-.09s; --fall:146px; --tilt:7deg"></span>
        <span class="drop" style="--x:30%; --d:1.14s; --dl:-.95s; --fall:163px; --tilt:12deg"></span>
        <span class="drop" style="--x:38%; --d:1.31s; --dl:-.48s; --fall:150px; --tilt:9deg"></span>
        <span class="drop" style="--x:46%; --d:1.02s; --dl:-.33s; --fall:157px; --tilt:12deg"></span>
        <span class="drop" style="--x:54%; --d:1.44s; --dl:-1.12s; --fall:144px; --tilt:7deg"></span>
        <span class="drop" style="--x:62%; --d:1.10s; --dl:-.62s; --fall:162px; --tilt:10deg"></span>
        <span class="drop" style="--x:70%; --d:1.27s; --dl:-.14s; --fall:149px; --tilt:8deg"></span>
        <span class="drop" style="--x:78%; --d:1.04s; --dl:-.86s; --fall:159px; --tilt:11deg"></span>
        <span class="drop" style="--x:86%; --d:1.36s; --dl:-.42s; --fall:145px; --tilt:9deg"></span>
        <span class="drop" style="--x:93%; --d:1.17s; --dl:-1.24s; --fall:154px; --tilt:10deg"></span>
      </div>
    </div>
    <div class="meta">
      <div>
        <span class="label">Rain</span>
        <span class="caption">steady shower</span>
      </div>
      <span class="temp">12&deg;</span>
    </div>
  </section>

  <!-- ================= SNOW ================= -->
  <section class="card card--snow" aria-label="Snow, minus 2 degrees">
    <div class="clip">
      <div class="scene">
        <div class="cloud cloud--sm cloud--snow"></div>
        <div class="drift-mound"></div>
        <div class="drift-mound drift-mound--2"></div>
        <span class="flake" style="--x:6%;  --s:5px; --d:7.4s;  --dl:-2.2s; --sw:14px; --so:.9"></span>
        <span class="flake" style="--x:13%; --s:7px; --d:9.1s;  --dl:-6.8s; --sw:22px; --so:1"></span>
        <span class="flake" style="--x:20%; --s:4px; --d:6.6s;  --dl:-.9s;  --sw:12px; --so:.8; filter:blur(.4px)"></span>
        <span class="flake" style="--x:28%; --s:8px; --d:10.3s; --dl:-8.4s; --sw:26px; --so:1"></span>
        <span class="flake" style="--x:35%; --s:5px; --d:8.2s;  --dl:-4.1s; --sw:16px; --so:.9"></span>
        <span class="flake" style="--x:42%; --s:6px; --d:7.8s;  --dl:-1.3s; --sw:18px; --so:.95"></span>
        <span class="flake" style="--x:50%; --s:4px; --d:6.9s;  --dl:-5.6s; --sw:11px; --so:.75; filter:blur(.4px)"></span>
        <span class="flake" style="--x:58%; --s:7px; --d:9.6s;  --dl:-3.3s; --sw:24px; --so:1"></span>
        <span class="flake" style="--x:66%; --s:5px; --d:7.1s;  --dl:-7.7s; --sw:15px; --so:.9"></span>
        <span class="flake" style="--x:73%; --s:8px; --d:10.8s; --dl:-2.9s; --sw:26px; --so:1"></span>
        <span class="flake" style="--x:81%; --s:6px; --d:8.6s;  --dl:-6.1s; --sw:19px; --so:.95"></span>
        <span class="flake" style="--x:88%; --s:4px; --d:6.4s;  --dl:-1.8s; --sw:10px; --so:.8; filter:blur(.4px)"></span>
        <span class="flake" style="--x:94%; --s:7px; --d:9.9s;  --dl:-4.9s; --sw:23px; --so:1"></span>
        <span class="flake" style="--x:40%; --s:5px; --d:7.6s;  --dl:-9.2s; --sw:17px; --so:.9"></span>
      </div>
    </div>
    <div class="meta">
      <div>
        <span class="label">Snow</span>
        <span class="caption">light flurries</span>
      </div>
      <span class="temp">&minus;2&deg;</span>
    </div>
  </section>

  <!-- ================= STORM ================= -->
  <section class="card card--storm" aria-label="Thunderstorm, 9 degrees">
    <div class="clip">
      <div class="scene">
        <div class="cloud cloud--sm cloud--storm-wisp"></div>
        <div class="bolt"></div>
        <div class="cloud cloud--lg cloud--storm"></div>
        <div class="puddle"></div>
        <span class="drop" style="--top:60px; --x:3%;  --d:.78s; --dl:-.22s; --fall:160px; --tilt:16deg"></span>
        <span class="drop" style="--top:60px; --x:9%;  --d:.68s; --dl:-.51s; --fall:166px; --tilt:19deg"></span>
        <span class="drop" style="--top:60px; --x:15%; --d:.88s; --dl:-.07s; --fall:152px; --tilt:15deg"></span>
        <span class="drop" style="--top:60px; --x:22%; --d:.74s; --dl:-.66s; --fall:163px; --tilt:18deg"></span>
        <span class="drop" style="--top:60px; --x:26%; --d:.79s; --dl:-.92s; --fall:158px; --tilt:17deg"></span>
        <span class="drop" style="--top:60px; --x:29%; --d:.93s; --dl:-.38s; --fall:149px; --tilt:14deg"></span>
        <span class="drop" style="--top:60px; --x:36%; --d:.71s; --dl:-.84s; --fall:165px; --tilt:20deg"></span>
        <span class="drop" style="--top:60px; --x:43%; --d:.82s; --dl:-.15s; --fall:156px; --tilt:16deg"></span>
        <span class="drop" style="--top:60px; --x:50%; --d:.67s; --dl:-.47s; --fall:162px; --tilt:19deg"></span>
        <span class="drop" style="--top:60px; --x:57%; --d:.90s; --dl:-.73s; --fall:150px; --tilt:15deg"></span>
        <span class="drop" style="--top:60px; --x:64%; --d:.76s; --dl:-.05s; --fall:164px; --tilt:18deg"></span>
        <span class="drop" style="--top:60px; --x:71%; --d:.86s; --dl:-.58s; --fall:154px; --tilt:16deg"></span>
        <span class="drop" style="--top:60px; --x:78%; --d:.69s; --dl:-.31s; --fall:161px; --tilt:20deg"></span>
        <span class="drop" style="--top:60px; --x:85%; --d:.84s; --dl:-.79s; --fall:151px; --tilt:15deg"></span>
        <span class="drop" style="--top:60px; --x:91%; --d:.73s; --dl:-.19s; --fall:163px; --tilt:18deg"></span>
        <span class="drop" style="--top:60px; --x:97%; --d:.91s; --dl:-.55s; --fall:148px; --tilt:14deg"></span>
      </div>
      <div class="flash"></div>
    </div>
    <div class="meta">
      <div>
        <span class="label">Storm</span>
        <span class="caption">t-storm rolling in</span>
      </div>
      <span class="temp">9&deg;</span>
    </div>
  </section>

</main>

</body>
</html>

Same prompt, other models

8 more
Compare side by side

One email when a new model lands on the board or in the showcase. Unsubscribe anytime.