Showcase

Four weather cards — CSS only, built by GPT-6.1 Sol

Hostedvia Codex CLIOpenRouter
Running live in your browserNew tab
Show the code the model wrote
HTML28,283 characters
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#f5f5ef">
  <meta name="description" content="Four little worlds of weather, brought to life entirely with CSS.">
  <title>Atmos — A little atmosphere</title>
  <style>/* styles.css */
:root {
  color-scheme: light;
  --ink: #2e3c36;
  --muted: #6b746b;
  --paper: #f5f5ef;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family:
    Arial,
    Helvetica,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
.site-header {
  height: 112px;
  max-width: 1360px;
  margin: auto;
  padding: 0 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dddfd5;
}
.wordmark {
  display: flex;
  align-items: center;
  font-size: 31px;
  font-weight: 600;
  letter-spacing: -1.5px;
}
.wordmark-dot {
  color: #8a9e6b;
}
.brand-symbol {
  position: relative;
  width: 26px;
  height: 28px;
  margin-right: 11px;
}
.brand-symbol i {
  position: absolute;
  width: 25px;
  height: 3px;
  border-radius: 2px;
  top: 12px;
  left: 0;
  background: #4d6347;
}
.brand-symbol i:nth-child(2) {
  transform: rotate(45deg);
}
.brand-symbol i:nth-child(3) {
  transform: rotate(90deg);
}
.brand-symbol i:nth-child(4) {
  transform: rotate(135deg);
}
.header-note,
.edition,
.eyebrow,
.live-label,
.card-top,
.card-footer,
.site-footer {
  font-size: 10px;
  letter-spacing: 1.55px;
  font-weight: 500;
}
.header-note {
  color: #626d5c;
  margin-left: 70px;
}
.edition {
  border: 1px solid #d9ddce;
  border-radius: 30px;
  padding: 12px 15px;
  letter-spacing: 1.1px;
  display: flex;
  gap: 9px;
  align-items: center;
  color: #65725a;
}
.edition > span,
.live-label > span,
.status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #84916e;
  display: inline-block;
}
main {
  max-width: 1360px;
  margin: auto;
  padding: 0 64px;
}
.intro {
  padding-top: 67px;
  padding-bottom: 38px;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 9px;
  color: #626d5c;
  letter-spacing: 1.8px;
}
.eyebrow > span {
  width: 18px;
  height: 1px;
  background: #8b987c;
}
h1 {
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: clamp(48px, 5.8vw, 78px);
  font-weight: 400;
  letter-spacing: -3.8px;
  line-height: 1.1;
  margin: 21px 0 23px;
}
h1 em {
  color: #7b8c69;
  font-weight: 400;
}
.intro-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.intro p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #626d5c;
}
.live-label {
  color: #626d5c;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  letter-spacing: 1.4px;
  padding-bottom: 3px;
}
.live-label > span {
  background: #8a9b79;
  box-shadow: 0 0 0 3px #e7ebdf;
}
.weather-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.weather-card {
  position: relative;
  height: 424px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 16px;
  color: #4c4e3e;
  box-shadow: inset 0 0 0 1px #ffffff40, 0 6px 14px -12px #33413540;
}
.sun-card {
  background:
    linear-gradient(
      160deg,
      #f8ebbe 0%,
      #f4dfa4 54%,
      #efdab0 100%);
}
.rain-card {
  background:
    linear-gradient(
      160deg,
      #d5e0e3 0%,
      #bbced5 52%,
      #adc3cd 100%);
  color: #345160;
}
.snow-card {
  background:
    linear-gradient(
      150deg,
      #e6ece6 0%,
      #d6e2dc 58%,
      #c5d6cf 100%);
  color: #3d5a50;
}
.storm-card {
  background:
    linear-gradient(
      155deg,
      #46526b 0%,
      #343e57 50%,
      #293248 100%);
  color: #eff1f6;
}
.card-top {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 23px 23px 0;
  font-size: 8px;
  letter-spacing: 1.45px;
  opacity: 1;
}
.mini-sun {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid currentColor;
  box-shadow: 0 0 0 3px #8d81401a;
}
.mini-drop {
  width: 7px;
  height: 10px;
  border: 1px solid currentColor;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}
.mini-snow {
  font-size: 15px;
  line-height: 10px;
}
.mini-bolt {
  width: 8px;
  height: 13px;
  background: currentColor;
  clip-path: polygon(55% 0, 5% 55%, 46% 55%, 26% 100%, 100% 39%, 62% 39%);
}
.weather-art {
  position: absolute;
  inset: 0 0 auto;
  height: 280px;
  pointer-events: none;
}
.sun-halo {
  position: absolute;
  width: 226px;
  height: 226px;
  top: 37px;
  left: calc(50% - 113px);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      #ffd66c65 0%,
      #f7d78230 42%,
      #ffefb500 70%);
  animation: sun-warmth 6.7s ease-in-out -2.4s infinite;
}
.sun-disc {
  position: absolute;
  top: 106px;
  left: calc(50% - 38px);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 34% 28%,
      #ffe69a 0%,
      #f8cb58 62%,
      #eeb94d 100%);
  box-shadow:
    inset 0 2px 5px #fff3bd80,
    0 0 24px 7px #ffd97260,
    0 8px 18px #dba24920;
  animation: sun-breathe 6.7s ease-in-out -2.4s infinite;
}
.sun-rays {
  position: absolute;
  top: 62px;
  left: calc(50% - 82px);
  width: 164px;
  height: 164px;
  animation: rays-turn 64s linear -13s infinite;
}
.sun-rays i {
  position: absolute;
  width: 3px;
  height: 16px;
  left: 80px;
  top: 0;
  border-radius: 5px;
  background: linear-gradient(#e5b35155, #e5b351bb);
  transform-origin: 1.5px 82px;
  transform: rotate(calc(var(--r) * 30deg));
}
.sky-speck {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff5d4;
}
.speck-one {
  top: 96px;
  left: 21%;
}
.speck-two {
  top: 211px;
  left: 76%;
  width: 2px;
  height: 2px;
}
.cloud {
  position: absolute;
  width: 160px;
  height: 57px;
  left: calc(50% - 80px);
  top: 112px;
  --cloud-light: #e9edef;
  --cloud-mid: #c4d1d7;
  --cloud-dark: #a9bcc7;
  filter: drop-shadow(0 10px 9px #57768318);
  animation: cloud-float 8.3s ease-in-out -3.1s infinite;
}
.cloud i {
  display: block;
  position: absolute;
  background:
    linear-gradient(
      150deg,
      var(--cloud-light) 5%,
      var(--cloud-mid) 66%,
      var(--cloud-dark));
}
.cloud-lobe {
  border-radius: 50%;
  box-shadow: inset 1px 3px 7px #ffffff25;
}
.lobe-one {
  width: 72px;
  height: 73px;
  left: 19px;
  top: -28px;
}
.lobe-two {
  width: 85px;
  height: 87px;
  left: 63px;
  top: -44px;
}
.lobe-three {
  width: 57px;
  height: 57px;
  left: -3px;
  top: -4px;
}
.cloud .cloud-base {
  width: 166px;
  height: 52px;
  left: -3px;
  top: 7px;
  border-radius: 40px;
  background:
    linear-gradient(
      165deg,
      var(--cloud-mid),
      var(--cloud-mid) 46%,
      var(--cloud-dark));
  box-shadow: inset 0 -4px 7px #ffffff12;
}
.sun-cloud {
  top: 166px;
  left: calc(50% + 2px);
  transform: scale(.59);
  transform-origin: left top;
  --cloud-light: #fff9e8;
  --cloud-mid: #f9efd4;
  --cloud-dark: #e7d8b6;
  opacity: .9;
  animation: sunny-cloud-drift 19s ease-in-out -4.8s infinite;
  filter: drop-shadow(0 8px 5px #b4933d13);
}
.rain-cloud {
  --cloud-light: #e3e9eb;
  --cloud-mid: #b7c6ce;
  --cloud-dark: #91a7b4;
}
.snow-cloud {
  top: 107px;
  transform: scale(.93);
  --cloud-light: #f8faf6;
  --cloud-mid: #e7eee8;
  --cloud-dark: #c3d5cc;
  animation-duration: 10.7s;
  animation-delay: -6.2s;
  filter: drop-shadow(0 9px 9px #738d7d10);
}
.storm-cloud {
  top: 108px;
  --cloud-light: #7b879b;
  --cloud-mid: #5b6980;
  --cloud-dark: #414e66;
  animation-duration: 6.9s;
  animation-delay: -1.2s;
  filter: drop-shadow(0 10px 10px #17213a33);
}
.ground {
  position: absolute;
  left: 17%;
  width: 66%;
  top: 262px;
  height: 5px;
  border-radius: 50%;
}
.sun-ground {
  background: #caa75126;
  filter: blur(2px);
  width: 47%;
  left: 27%;
}
.rain-ground {
  background: #6e95a32b;
  box-shadow: 0 0 0 1px #d5e5e73b, 0 6px 13px #6891a21a;
  height: 6px;
}
.storm-ground {
  background: #14233850;
  box-shadow: 0 0 0 1px #8a9bb420;
  height: 6px;
}
.precipitation {
  position: absolute;
  top: 152px;
  height: 112px;
  left: 19%;
  right: 19%;
  --drop-color: #658b9d;
  --drift: -9px;
}
.rain-drop {
  position: absolute;
  left: var(--x);
  top: 0;
  width: 2px;
  height: 100%;
}
.rain-drop::before {
  content: "";
  position: absolute;
  top: 0;
  width: 2px;
  height: 15px;
  border-radius: 100% 100% 50% 50%;
  background: linear-gradient(transparent, var(--drop-color));
  animation: rain-fall var(--duration) linear var(--delay) infinite;
}
.rain-drop::after {
  content: "";
  position: absolute;
  top: 107px;
  left: -7px;
  width: 13px;
  height: 4px;
  border: 1px solid var(--drop-color);
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0;
  animation: rain-splash var(--duration) linear var(--delay) infinite;
}
.faint {
  opacity: .45;
}
.storm-card .precipitation {
  top: 149px;
  height: 115px;
  left: 15%;
  right: 15%;
  --drop-color: #a2b5d0;
  --drift: -19px;
}
.storm-card .rain-drop::before {
  height: 22px;
  width: 1px;
}
.storm-card .rain-drop::after {
  border-color: #8094b4;
  border-top-color: transparent;
}
.snow-haze {
  position: absolute;
  width: 220px;
  height: 200px;
  top: 57px;
  left: calc(50% - 110px);
  background:
    radial-gradient(
      ellipse,
      #ffffff3b,
      transparent 68%);
}
.snowfall {
  position: absolute;
  inset: 74px 13% auto;
  height: 192px;
}
.flake {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  opacity: 0;
  animation: snow-fall var(--duration) linear var(--delay) infinite;
}
.flake b {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: snow-sway 4.7s ease-in-out var(--delay) infinite alternate;
}
.flake b,
.flake b::before,
.flake b::after {
  background:
    linear-gradient(
      transparent calc(50% - .65px),
      #fffffff2 calc(50% - .65px),
      #fffffff2 calc(50% + .65px),
      transparent calc(50% + .65px));
}
.flake b::before,
.flake b::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: rotate(60deg);
}
.flake b::after {
  transform: rotate(-60deg);
}
.snow-ground {
  top: 259px;
  height: 8px;
  background: #f6faf4;
  box-shadow:
    -17px 3px 0 -1px #edf4ed,
    13px 3px 0 -1px #f4f8f0,
    0 5px 12px #9db4a52b;
}
.snow-ground::before {
  content: "";
  position: absolute;
  width: 43%;
  height: 8px;
  left: 17%;
  top: -3px;
  border-radius: 50%;
  background: #f6faf4;
}
.storm-haze {
  position: absolute;
  inset: 42px 0 0;
  background:
    radial-gradient(
      ellipse at 55% 54%,
      #8493bf14,
      transparent 65%);
}
.lightning {
  position: absolute;
  top: 146px;
  left: 48%;
  width: 37px;
  height: 94px;
  background: #f6f5da;
  clip-path: polygon(48% 0, 11% 48%, 45% 48%, 20% 100%, 94% 34%, 59% 34%, 84% 0);
  opacity: 0;
  animation: lightning-strike 23.7s linear -4.1s infinite;
}
.card-flash {
  pointer-events: none;
  position: absolute;
  z-index: 9;
  inset: 0;
  background:
    linear-gradient(
      140deg,
      #fbfdff,
      #dbe4ff);
  mix-blend-mode: screen;
  opacity: 0;
  animation: storm-flash 23.7s linear -4.1s infinite;
}
.card-copy {
  position: absolute;
  z-index: 3;
  top: 278px;
  left: 24px;
  right: 24px;
}
h2 {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.4px;
  margin: 0 0 8px;
}
.temperature {
  font-size: 59px;
  font-weight: 400;
  letter-spacing: -3.5px;
  line-height: .97;
}
.temperature > span {
  vertical-align: top;
  font-size: 46px;
  line-height: 1.03;
  margin-left: 2px;
}
.card-copy p {
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-style: italic;
  font-size: 13px;
  margin: 12px 0 0;
  opacity: 1;
}
.card-footer {
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 24px;
  right: 24px;
  height: 39px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #4e553a18;
  font-size: 6.7px;
  letter-spacing: .75px;
  opacity: 1;
}
.storm-card .card-footer {
  border-color: #d3def322;
}
.collection-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 23px 1px 47px;
  color: #626d5c;
  font-size: 11px;
}
.collection-footer p {
  margin: 0;
  display: flex;
  gap: 9px;
  align-items: center;
}
.status-dot {
  width: 4px;
  height: 4px;
  background: #8e9c7b;
}
.motion-control {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: #626d5c;
  padding: 6px 0 6px 10px;
}
.pause-icon {
  width: 8px;
  height: 9px;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.play-text {
  display: none;
}
.motion-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.motion-input:checked ~ .weather-grid *,
.motion-input:checked ~ .weather-grid *::before,
.motion-input:checked ~ .weather-grid *::after {
  animation-play-state: paused !important;
}
.motion-input:checked ~ .collection-footer .pause-text {
  display: none;
}
.motion-input:checked ~ .collection-footer .play-text {
  display: inline;
}
.motion-input:checked ~ .collection-footer .pause-icon {
  border: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.motion-input:focus-visible ~ .collection-footer .motion-control {
  outline: 2px solid #79886b;
  outline-offset: 5px;
  border-radius: 2px;
}
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #dddfd5;
  padding: 24px 0 30px;
  font-size: 8px;
  letter-spacing: 1.3px;
  color: #626d5c;
}
.footer-star {
  font-size: 18px;
  margin-left: 12px;
  vertical-align: middle;
  color: #819072;
}
@keyframes rays-turn {
  to {
    transform: rotate(360deg);
  }
}
@keyframes sun-warmth {
  0%, 100% {
    opacity: .65;
    transform: scale(.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}
@keyframes sun-breathe {
  0%, 100% {
    box-shadow:
      inset 0 2px 5px #fff3bd80,
      0 0 24px 7px #ffd97260,
      0 8px 18px #dba24920;
  }
  50% {
    box-shadow:
      inset 0 2px 5px #fff3bd80,
      0 0 34px 12px #ffce7880,
      0 8px 18px #dba24920;
  }
}
@keyframes cloud-float {
  0%, 100% {
    translate: -3px 0;
  }
  50% {
    translate: 3px -5px;
  }
}
@keyframes sunny-cloud-drift {
  0%, 100% {
    translate: 19px 4px;
    opacity: .8;
  }
  50% {
    translate: -51px -22px;
    opacity: .97;
  }
}
@keyframes rain-fall {
  0% {
    transform: translate3d(0, -12px, 0) rotate(9deg);
    opacity: 0;
  }
  8% {
    opacity: .75;
  }
  62% {
    transform: translate3d(var(--drift), 101px, 0) rotate(9deg);
    opacity: .8;
  }
  66%, 100% {
    transform: translate3d(var(--drift), 107px, 0) rotate(9deg);
    opacity: 0;
  }
}
@keyframes rain-splash {
  0%, 61% {
    opacity: 0;
    transform: translateX(var(--drift)) scale(.2);
  }
  66% {
    opacity: .55;
    transform: translateX(var(--drift)) scale(.5);
  }
  87%, 100% {
    opacity: 0;
    transform: translateX(var(--drift)) scale(1.7);
  }
}
@keyframes snow-fall {
  0% {
    translate: 0 -12px;
    opacity: 0;
  }
  10% {
    opacity: .85;
  }
  84% {
    opacity: .9;
  }
  97%, 100% {
    translate: 0 185px;
    opacity: 0;
  }
}
@keyframes snow-sway {
  from {
    transform: translateX(calc(var(--sway) * -1)) rotate(-20deg);
  }
  to {
    transform: translateX(var(--sway)) rotate(65deg);
  }
}
@keyframes storm-flash {
  0%, 18.99%, 19.18%, 19.73%, 19.9%, 57.99%, 58.19%, 85.99%, 86.16%, 100% {
    opacity: 0;
  }
  19%, 19.09% {
    opacity: .86;
  }
  19.74%, 19.8% {
    opacity: .43;
  }
  58%, 58.1% {
    opacity: .95;
  }
  86%, 86.08% {
    opacity: .72;
  }
}
@keyframes lightning-strike {
  0%, 18.99%, 19.35%, 19.73%, 20%, 57.99%, 58.35%, 85.99%, 86.35%, 100% {
    opacity: 0;
  }
  19%, 19.15%, 19.74%, 19.85%, 58%, 58.16%, 86%, 86.2% {
    opacity: 1;
  }
}
@media (min-width: 1500px) {
  .site-header {
    margin-top: 15px;
  }
  .intro {
    padding-top: 83px;
  }
  .weather-card {
    height: 450px;
  }
  .card-copy {
    top: 307px;
  }
  .weather-art {
    top: 9px;
  }
  .collection-footer {
    padding-bottom: 65px;
  }
}
@media (max-width: 1050px) {
  .site-header {
    padding: 0 36px;
  }
  main {
    padding: 0 36px;
  }
  .header-note {
    margin-left: 0;
  }
  .weather-grid {
    gap: 14px;
  }
  .card-top {
    margin-left: 19px;
    margin-right: 19px;
    font-size: 7px;
    letter-spacing: .9px;
  }
  .card-copy,
  .card-footer {
    left: 19px;
    right: 19px;
  }
  .card-footer {
    font-size: 6px;
    letter-spacing: .4px;
  }
  .card-copy p {
    font-size: 12px;
  }
}
@media (max-width: 800px) {
  .weather-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .site-header {
    height: 91px;
  }
  .header-note {
    display: none;
  }
  .intro {
    padding-top: 48px;
    padding-bottom: 31px;
  }
  h1 {
    font-size: 63px;
    letter-spacing: -3px;
  }
  .weather-card {
    height: 424px;
  }
  .card-top {
    margin: 23px 24px 0;
    font-size: 8px;
    letter-spacing: 1.45px;
  }
  .card-copy,
  .card-footer {
    left: 24px;
    right: 24px;
  }
  .card-footer {
    font-size: 7px;
    letter-spacing: .7px;
  }
  .card-copy p {
    font-size: 13px;
  }
}
@media (max-width: 480px) {
  main {
    padding: 0 19px;
  }
  .site-header {
    padding: 0 20px;
    height: 78px;
  }
  .wordmark {
    font-size: 28px;
  }
  .edition {
    font-size: 7px;
    padding: 10px;
    letter-spacing: .7px;
  }
  .intro {
    padding-top: 35px;
    padding-bottom: 26px;
  }
  .eyebrow {
    font-size: 7px;
    letter-spacing: 1.3px;
  }
  h1 {
    font-size: 46px;
    letter-spacing: -2.4px;
    margin: 19px 0;
  }
  .intro p {
    font-size: 11px;
  }
  .live-label {
    font-size: 7px;
    letter-spacing: .75px;
    gap: 6px;
  }
  .weather-grid {
    gap: 12px;
  }
  .weather-card {
    height: 366px;
    border-radius: 13px;
  }
  .weather-art {
    width: 235px;
    left: calc(50% - 117.5px);
    transform: scale(.77);
    transform-origin: center 55px;
  }
  .card-top {
    margin: 18px 14px 0;
    font-size: 6px;
    letter-spacing: .5px;
  }
  .card-copy {
    top: 237px;
    left: 15px;
    right: 15px;
  }
  h2 {
    font-size: 8px;
    letter-spacing: 1.7px;
  }
  .temperature {
    font-size: 49px;
  }
  .temperature > span {
    font-size: 36px;
  }
  .card-copy p {
    font-size: 10px;
    margin-top: 10px;
  }
  .card-footer {
    left: 15px;
    right: 15px;
    height: 33px;
    font-size: 5px;
    letter-spacing: .1px;
  }
  .collection-footer {
    padding-top: 19px;
    padding-bottom: 31px;
    font-size: 9px;
  }
  .motion-control {
    font-size: 9px;
    gap: 6px;
  }
  .site-footer {
    font-size: 6px;
    letter-spacing: .7px;
    padding: 20px 0;
    gap: 18px;
    line-height: 1.8;
  }
  .site-footer > span:last-child {
    text-align: right;
  }
  .footer-star {
    font-size: 13px;
    margin-left: 5px;
  }
}
@media (max-width: 360px) {
  .card-copy {
    top: 225px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-play-state: paused !important;
  }
  .card-flash,
  .lightning {
    display: none;
  }
  .motion-input,
  .motion-control {
    display: none;
  }
  .live-label {
    display: none;
  }
}
</style>
</head>
<body>
  <header class="site-header">
    <a class="wordmark" href="./" aria-label="Atmos home"><span class="brand-symbol" aria-hidden="true"><i></i><i></i><i></i><i></i></span>atmos<span class="wordmark-dot">.</span></a>
    <span class="header-note">A STUDY IN WEATHER & MOTION</span>
    <span class="edition"><span></span> ALWAYS IN SEASON</span>
  </header>

  <main>
    <section class="intro" aria-labelledby="page-title">
      <div class="eyebrow"><span></span> FOUR FORECASTS. ONE LITTLE WORLD.</div>
      <h1 id="page-title">A little <em>atmosphere.</em></h1>
      <div class="intro-bottom"><p>A moment under every sky.<br>Slow down. Watch the weather roll in.</p><span class="live-label"><span></span> WEATHER IN MOTION</span></div>
    </section>

    <input class="motion-input" type="checkbox" id="pause-motion" aria-label="Pause weather animations">
    <section class="weather-grid" aria-label="Four animated weather conditions">
      <article class="weather-card sun-card" aria-labelledby="sun-title">
        <div class="card-top"><span>01 / DAYLIGHT</span><span class="mini-sun" aria-hidden="true"></span></div>
        <div class="weather-art" aria-hidden="true">
          <div class="sun-halo"></div>
          <div class="sun-rays"><i style="--r:0"></i><i style="--r:1"></i><i style="--r:2"></i><i style="--r:3"></i><i style="--r:4"></i><i style="--r:5"></i><i style="--r:6"></i><i style="--r:7"></i><i style="--r:8"></i><i style="--r:9"></i><i style="--r:10"></i><i style="--r:11"></i></div>
          <div class="sun-disc"></div>
          <div class="cloud sun-cloud"><i class="cloud-lobe lobe-one"></i><i class="cloud-lobe lobe-two"></i><i class="cloud-lobe lobe-three"></i><i class="cloud-base"></i></div>
          <div class="sky-speck speck-one"></div><div class="sky-speck speck-two"></div>
          <div class="ground sun-ground"></div>
        </div>
        <div class="card-copy"><h2 id="sun-title">SUN</h2><div class="temperature">26<span>°</span></div><p>A little golden hour.</p></div>
        <div class="card-footer"><span>CLEAR & BRIGHT</span><span>FEELS LIKE 28°</span></div>
      </article>

      <article class="weather-card rain-card" aria-labelledby="rain-title">
        <div class="card-top"><span>02 / A SOFT SPELL</span><span class="mini-drop" aria-hidden="true"></span></div>
        <div class="weather-art" aria-hidden="true">
          <div class="cloud rain-cloud"><i class="cloud-lobe lobe-one"></i><i class="cloud-lobe lobe-two"></i><i class="cloud-lobe lobe-three"></i><i class="cloud-base"></i></div>
          <div class="ground rain-ground"></div>
          <div class="precipitation">
            <i class="rain-drop" style="--x:8%;--duration:1.31s;--delay:-.42s"></i><i class="rain-drop" style="--x:17%;--duration:1.57s;--delay:-1.16s"></i><i class="rain-drop" style="--x:25%;--duration:1.18s;--delay:-.83s"></i><i class="rain-drop" style="--x:34%;--duration:1.73s;--delay:-.22s"></i><i class="rain-drop" style="--x:43%;--duration:1.39s;--delay:-.93s"></i><i class="rain-drop" style="--x:52%;--duration:1.61s;--delay:-.36s"></i><i class="rain-drop" style="--x:61%;--duration:1.27s;--delay:-1.08s"></i><i class="rain-drop" style="--x:70%;--duration:1.81s;--delay:-1.43s"></i><i class="rain-drop" style="--x:78%;--duration:1.43s;--delay:-.68s"></i><i class="rain-drop" style="--x:89%;--duration:1.53s;--delay:-1.32s"></i><i class="rain-drop faint" style="--x:12%;--duration:1.91s;--delay:-1.13s"></i><i class="rain-drop faint" style="--x:39%;--duration:1.67s;--delay:-.51s"></i><i class="rain-drop faint" style="--x:66%;--duration:1.47s;--delay:-.17s"></i><i class="rain-drop faint" style="--x:83%;--duration:1.79s;--delay:-.94s"></i>
          </div>
        </div>
        <div class="card-copy"><h2 id="rain-title">RAIN</h2><div class="temperature">14<span>°</span></div><p>The world's softer side.</p></div>
        <div class="card-footer"><span>GENTLE SHOWERS</span><span>FEELS LIKE 12°</span></div>
      </article>

      <article class="weather-card snow-card" aria-labelledby="snow-title">
        <div class="card-top"><span>03 / WINTER QUIET</span><span class="mini-snow" aria-hidden="true">✳</span></div>
        <div class="weather-art" aria-hidden="true">
          <div class="snow-haze"></div>
          <div class="cloud snow-cloud"><i class="cloud-lobe lobe-one"></i><i class="cloud-lobe lobe-two"></i><i class="cloud-lobe lobe-three"></i><i class="cloud-base"></i></div>
          <div class="snowfall">
            <i class="flake" style="--x:8%;--size:5px;--duration:8.7s;--delay:-3.2s;--sway:12px"><b></b></i><i class="flake" style="--x:18%;--size:8px;--duration:10.3s;--delay:-7.6s;--sway:-17px"><b></b></i><i class="flake" style="--x:29%;--size:4px;--duration:7.9s;--delay:-1.8s;--sway:19px"><b></b></i><i class="flake" style="--x:40%;--size:10px;--duration:11.7s;--delay:-5.1s;--sway:-13px"><b></b></i><i class="flake" style="--x:52%;--size:6px;--duration:9.1s;--delay:-7.2s;--sway:16px"><b></b></i><i class="flake" style="--x:62%;--size:4px;--duration:8.3s;--delay:-4.4s;--sway:-20px"><b></b></i><i class="flake" style="--x:74%;--size:9px;--duration:12.1s;--delay:-2.6s;--sway:13px"><b></b></i><i class="flake" style="--x:86%;--size:6px;--duration:9.7s;--delay:-8.1s;--sway:-15px"><b></b></i><i class="flake" style="--x:23%;--size:3px;--duration:10.9s;--delay:-5.2s;--sway:10px"><b></b></i><i class="flake" style="--x:46%;--size:5px;--duration:13.3s;--delay:-10.8s;--sway:-12px"><b></b></i><i class="flake" style="--x:68%;--size:3px;--duration:11.3s;--delay:-6.9s;--sway:14px"><b></b></i><i class="flake" style="--x:92%;--size:4px;--duration:8.9s;--delay:-1.3s;--sway:-16px"><b></b></i>
          </div>
          <div class="ground snow-ground"></div>
        </div>
        <div class="card-copy"><h2 id="snow-title">SNOW</h2><div class="temperature">−2<span>°</span></div><p>A hush over everything.</p></div>
        <div class="card-footer"><span>SLOW FLURRIES</span><span>FEELS LIKE −5°</span></div>
      </article>

      <article class="weather-card storm-card" aria-labelledby="storm-title">
        <div class="card-top"><span>04 / AFTER DARK</span><span class="mini-bolt" aria-hidden="true"></span></div>
        <div class="weather-art" aria-hidden="true">
          <div class="storm-haze"></div>
          <div class="cloud storm-cloud"><i class="cloud-lobe lobe-one"></i><i class="cloud-lobe lobe-two"></i><i class="cloud-lobe lobe-three"></i><i class="cloud-base"></i></div>
          <div class="ground storm-ground"></div>
          <div class="precipitation">
            <i class="rain-drop" style="--x:5%;--duration:.79s;--delay:-.34s"></i><i class="rain-drop" style="--x:12%;--duration:.93s;--delay:-.76s"></i><i class="rain-drop" style="--x:20%;--duration:.71s;--delay:-.12s"></i><i class="rain-drop" style="--x:27%;--duration:.87s;--delay:-.53s"></i><i class="rain-drop" style="--x:34%;--duration:.69s;--delay:-.39s"></i><i class="rain-drop" style="--x:41%;--duration:1.03s;--delay:-.18s"></i><i class="rain-drop" style="--x:48%;--duration:.83s;--delay:-.62s"></i><i class="rain-drop" style="--x:55%;--duration:.73s;--delay:-.28s"></i><i class="rain-drop" style="--x:62%;--duration:.97s;--delay:-.83s"></i><i class="rain-drop" style="--x:69%;--duration:.81s;--delay:-.43s"></i><i class="rain-drop" style="--x:76%;--duration:.67s;--delay:-.54s"></i><i class="rain-drop" style="--x:83%;--duration:.89s;--delay:-.31s"></i><i class="rain-drop" style="--x:91%;--duration:.77s;--delay:-.68s"></i><i class="rain-drop faint" style="--x:16%;--duration:1.11s;--delay:-.46s"></i><i class="rain-drop faint" style="--x:38%;--duration:.91s;--delay:-.71s"></i><i class="rain-drop faint" style="--x:58%;--duration:1.07s;--delay:-.13s"></i><i class="rain-drop faint" style="--x:87%;--duration:.99s;--delay:-.56s"></i>
          </div>
          <div class="lightning"></div>
        </div>
        <div class="card-copy"><h2 id="storm-title">STORM</h2><div class="temperature">18<span>°</span></div><p>A sky with something to say.</p></div>
        <div class="card-footer"><span>THUNDER & RAIN</span><span>FEELS LIKE 16°</span></div>
        <div class="card-flash" aria-hidden="true"></div>
      </article>
    </section>

    <div class="collection-footer"><p><span class="status-dot"></span> A forecast for your state of mind.</p><label class="motion-control" for="pause-motion"><span class="pause-icon" aria-hidden="true"></span><span class="pause-text">Pause the weather</span><span class="play-text">Let it roll</span></label></div>
    <footer class="site-footer"><span>MADE OF NOTHING BUT A LITTLE CSS.</span><span>TAKE A BREATH. STAY A WHILE. <span class="footer-star">✳</span></span></footer>
  </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.