---
title: Dream W
colorFrom: blue
colorTo: indigo
sdk: static
pinned: true
---

<div class="dreamw">

<style>
.dreamw,
.dreamw * {
  box-sizing: border-box;
}

.dreamw {
  --midnight: #030616;
  --deep-blue: #07132e;
  --twilight: #151447;
  --violet-night: #32134c;

  --ivory: #fffaf3;
  --body: #d8daeb;
  --muted: #aeb3cc;

  --sky: #89caff;
  --periwinkle: #929cff;
  --lilac: #c1a7ff;
  --rose: #eeacd2;
  --sunrise: #ffd3ba;

  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 1120px;
  min-height: 575px;
  margin: 0 auto;
  padding: 34px 46px 27px;
  overflow: hidden;

  color: var(--body);

  border: 1px solid rgba(219, 225, 255, 0.12);
  border-radius: 38px;

  background:
    radial-gradient(
      ellipse 82% 35% at 50% 112%,
      rgba(255, 194, 184, 0.19),
      transparent 66%
    ),
    radial-gradient(
      ellipse 47% 60% at 105% 72%,
      rgba(192, 91, 228, 0.15),
      transparent 70%
    ),
    radial-gradient(
      ellipse 58% 62% at -7% 18%,
      rgba(64, 127, 224, 0.22),
      transparent 70%
    ),
    linear-gradient(
      148deg,
      var(--midnight) 0%,
      var(--deep-blue) 34%,
      var(--twilight) 68%,
      var(--violet-night) 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -100px 150px rgba(116, 46, 154, 0.07),
    0 30px 90px rgba(0,0,0,0.28);
}

.dw-sky,
.dw-aurora,
.dw-mist,
.dw-clouds,
.dw-horizon,
.dw-water,
.dw-stars-a,
.dw-stars-b,
.dw-stars-c,
.dw-stars-d {
  position: absolute;
  pointer-events: none;
}

.dw-sky {
  z-index: -8;
  inset: 0;

  background:
    radial-gradient(
      ellipse 42% 28% at 24% 21%,
      rgba(112, 171, 255, 0.10),
      transparent 72%
    ),
    radial-gradient(
      ellipse 39% 30% at 77% 25%,
      rgba(197, 135, 255, 0.09),
      transparent 72%
    );
}

.dw-aurora {
  z-index: -7;
  top: -36%;
  left: -15%;
  width: 130%;
  height: 90%;

  background:
    radial-gradient(
      ellipse at 25% 54%,
      rgba(87, 164, 255, 0.20),
      transparent 32%
    ),
    radial-gradient(
      ellipse at 54% 37%,
      rgba(131, 128, 255, 0.17),
      transparent 33%
    ),
    radial-gradient(
      ellipse at 77% 51%,
      rgba(219, 119, 211, 0.15),
      transparent 31%
    );

  filter: blur(72px);
  transform: rotate(-8deg);
  animation: dw-aurora-drift 18s ease-in-out infinite alternate;
}

.dw-mist {
  z-index: -6;
  inset: 18% -15% auto;
  height: 44%;

  background:
    radial-gradient(
      ellipse 35% 46% at 17% 60%,
      rgba(95, 161, 255, 0.08),
      transparent 72%
    ),
    radial-gradient(
      ellipse 36% 44% at 51% 46%,
      rgba(187, 152, 255, 0.07),
      transparent 72%
    ),
    radial-gradient(
      ellipse 34% 48% at 86% 65%,
      rgba(232, 147, 204, 0.07),
      transparent 72%
    );

  filter: blur(34px);
  animation: dw-mist-drift 22s ease-in-out infinite alternate;
}

.dw-clouds {
  z-index: -5;
  left: -8%;
  right: -8%;
  bottom: 4%;
  height: 32%;

  background:
    radial-gradient(
      ellipse 24% 46% at 10% 72%,
      rgba(203, 216, 255, 0.08),
      transparent 72%
    ),
    radial-gradient(
      ellipse 31% 52% at 31% 84%,
      rgba(233, 204, 255, 0.09),
      transparent 72%
    ),
    radial-gradient(
      ellipse 29% 48% at 56% 80%,
      rgba(255, 214, 226, 0.08),
      transparent 72%
    ),
    radial-gradient(
      ellipse 27% 49% at 82% 78%,
      rgba(213, 180, 255, 0.09),
      transparent 72%
    );

  filter: blur(30px);
  animation: dw-cloud-drift 20s ease-in-out infinite alternate;
}

.dw-horizon {
  z-index: -4;
  left: 50%;
  bottom: -58px;
  width: 78%;
  height: 180px;
  transform: translateX(-50%);

  background:
    radial-gradient(
      ellipse,
      rgba(255, 224, 196, 0.24) 0%,
      rgba(242, 166, 203, 0.14) 34%,
      rgba(184, 121, 255, 0.07) 56%,
      transparent 74%
    );

  filter: blur(26px);
  animation: dw-horizon-breathe 9s ease-in-out infinite alternate;
}

.dw-water {
  z-index: -3;
  left: 11%;
  right: 11%;
  bottom: -36px;
  height: 112px;
  opacity: 0.30;

  background:
    repeating-linear-gradient(
      179deg,
      rgba(226, 229, 255, 0.11) 0 1px,
      transparent 1px 7px
    ),
    linear-gradient(
      180deg,
      rgba(196, 159, 237, 0.14),
      transparent 78%
    );

  filter: blur(7px);
  transform: perspective(300px) rotateX(64deg);
}

/* Fine star layer */
.dw-stars-a {
  z-index: -2;
  inset: 0;

  background-image:
    radial-gradient(
      circle,
      rgba(255,255,255,0.72) 0 0.7px,
      transparent 1px
    );

  background-size: 73px 79px;
  background-position: 19px 13px;
  opacity: 0.46;

  animation: dw-stars-a 24s ease-in-out infinite alternate;
}

/* Smaller, denser stars */
.dw-stars-b {
  z-index: -2;
  inset: 0;

  background-image:
    radial-gradient(
      circle,
      rgba(187, 214, 255, 0.55) 0 0.55px,
      transparent 0.9px
    );

  background-size: 113px 97px;
  background-position: 53px 37px;
  opacity: 0.42;

  animation: dw-stars-b 31s ease-in-out infinite alternate;
}

/* Violet stars */
.dw-stars-c {
  z-index: -2;
  inset: 0;

  background-image:
    radial-gradient(
      circle,
      rgba(224, 191, 255, 0.52) 0 0.65px,
      transparent 1px
    );

  background-size: 167px 137px;
  background-position: 91px 64px;
  opacity: 0.34;

  animation: dw-stars-c 28s ease-in-out infinite alternate;
}

/* Irregular bright stars */
.dw-stars-d {
  z-index: -1;
  inset: 0;

  background:
    radial-gradient(circle at 7% 19%, rgba(255,255,255,.90) 0 1px, transparent 1.8px),
    radial-gradient(circle at 16% 37%, rgba(158,205,255,.78) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 28% 13%, rgba(255,255,255,.76) 0 .9px, transparent 1.7px),
    radial-gradient(circle at 39% 29%, rgba(206,222,255,.68) 0 .8px, transparent 1.6px),
    radial-gradient(circle at 52% 12%, rgba(255,255,255,.78) 0 .9px, transparent 1.7px),
    radial-gradient(circle at 64% 31%, rgba(186,211,255,.70) 0 1px, transparent 1.8px),
    radial-gradient(circle at 75% 17%, rgba(228,196,255,.76) 0 .9px, transparent 1.7px),
    radial-gradient(circle at 88% 29%, rgba(255,255,255,.72) 0 1px, transparent 1.8px),
    radial-gradient(circle at 95% 11%, rgba(201,224,255,.72) 0 .8px, transparent 1.6px),

    radial-gradient(circle at 12% 68%, rgba(255,255,255,.43) 0 .8px, transparent 1.6px),
    radial-gradient(circle at 25% 81%, rgba(178,205,255,.44) 0 .8px, transparent 1.6px),
    radial-gradient(circle at 44% 72%, rgba(255,255,255,.40) 0 .8px, transparent 1.6px),
    radial-gradient(circle at 61% 84%, rgba(224,197,255,.45) 0 .8px, transparent 1.6px),
    radial-gradient(circle at 78% 72%, rgba(255,255,255,.38) 0 .8px, transparent 1.6px),
    radial-gradient(circle at 92% 82%, rgba(205,220,255,.42) 0 .8px, transparent 1.6px);

  opacity: 0.78;
  animation: dw-twinkle 6s ease-in-out infinite alternate;
}

.dw-nav {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 29px;
}

.dw-nav a {
  position: relative;

  color: rgba(225, 228, 245, 0.78);

  font-family:
    Geist,
    "Avenir Next",
    "Segoe UI Variable",
    "Segoe UI",
    Arial,
    sans-serif;

  font-size: 10px;
  font-weight: 560;
  letter-spacing: 0.20em;
  text-decoration: none;
  text-transform: uppercase;

  transition:
    color 260ms ease,
    transform 260ms ease;
}

.dw-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -7px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--sky),
      var(--rose)
    );

  transition:
    right 380ms cubic-bezier(.2,.8,.2,1);
}

.dw-nav a:hover {
  color: #ffffff;
  transform: translateY(-1px);
}

.dw-nav a:hover::after {
  right: 0;
}

.dw-hero {
  position: relative;
  z-index: 4;
  padding: 28px 0 29px;
  text-align: center;
}

.dw-wordmark {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  white-space: nowrap;
  line-height: 0.86;
}

.dw-dream {
  position: relative;

  color: var(--ivory);

  font-family:
    Didot,
    "Bodoni 72",
    "Bodoni MT",
    "Times New Roman",
    serif;

  font-size:
    clamp(62px, 7.7vw, 94px);

  font-weight: 500;
  letter-spacing: -0.065em;

  text-shadow:
    0 1px 0 rgba(255,255,255,.08),
    0 12px 32px rgba(0,0,0,.16);
}

.dw-symbol {
  position: relative;
  display: inline-block;
  margin-left: 22px;

  font-family:
    Didot,
    "Bodoni 72",
    "Bodoni MT",
    "Times New Roman",
    serif;

  font-size:
    clamp(104px, 11.8vw, 146px);

  font-weight: 600;
  letter-spacing: -0.11em;
  line-height: 0.80;

  background:
    linear-gradient(
      158deg,
      #ffffff 0%,
      #dceeff 16%,
      #89caff 38%,
      #8e9cff 58%,
      #c0a8ff 78%,
      #eca8d0 100%
    );

  background-size: 190% 190%;
  background-position: 8% 18%;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  filter:
    drop-shadow(
      0 14px 26px
      rgba(81, 118, 217, 0.15)
    );

  animation:
    dw-symbol-drift 8s ease-in-out infinite,
    dw-symbol-color 11s ease-in-out infinite alternate;
}

.dw-symbol::before {
  content: "W";
  position: absolute;
  inset: 0;

  font: inherit;
  letter-spacing: inherit;

  background:
    linear-gradient(
      108deg,
      transparent 22%,
      rgba(255,255,255,0.85) 45%,
      rgba(255,255,255,0.15) 52%,
      transparent 68%
    );

  background-size: 230% 100%;
  background-position: -150% 0;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  opacity: 0.38;
  animation: dw-symbol-sweep 7.5s ease-in-out infinite;
}

.dw-symbol::after {
  content: "";
  position: absolute;
  left: 17%;
  right: 17%;
  bottom: -13%;
  height: 17%;

  background:
    radial-gradient(
      ellipse,
      rgba(139, 169, 255, 0.18),
      transparent 72%
    );

  filter: blur(13px);
}

.dw-subtitle {
  margin-top: 19px;

  color: #dec5ff;

  font-family:
    Geist,
    "Avenir Next",
    "Segoe UI Variable",
    "Segoe UI",
    Arial,
    sans-serif;

  font-size: 10px;
  font-weight: 580;
  letter-spacing: 0.49em;
  line-height: 1.8;
  text-transform: uppercase;
}

.dw-lead {
  width: min(100%, 850px);
  margin: 22px auto 0;

  color: rgba(225, 227, 240, 0.88);

  font-family:
    Geist,
    "Avenir Next",
    "Segoe UI Variable",
    "Segoe UI",
    Arial,
    sans-serif;

  font-size: 16px;
  font-weight: 390;
  letter-spacing: -0.015em;
  line-height: 1.74;
}

.dw-lens {
  position: relative;
  display: inline-block;

  width: 46px;
  height: 14px;
  margin: 0 10px;
  overflow: hidden;
  vertical-align: 1px;

  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #77c4ff,
      #9ba7ff 50%,
      #efa9d2
    );

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.44),
    0 7px 18px rgba(104, 123, 226, 0.11);
}

.dw-lens::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -50%;
  width: 30%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.80),
      transparent
    );

  transform: skewX(-18deg);
  animation: dw-lens-sweep 5.5s ease-in-out infinite;
}

/* One continuous research constellation, not three cards */
.dw-constellation {
  position: relative;
  z-index: 4;

  display: flex;
  width: 100%;
  min-height: 150px;
  margin-top: 28px;

  border-top:
    1px solid rgba(220, 225, 255, 0.11);

  border-bottom:
    1px solid rgba(220, 225, 255, 0.09);
}

.dw-path {
  position: relative;

  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;

  min-width: 0;
  padding: 27px 28px 25px;

  color: inherit;
  text-align: left;
  text-decoration: none;

  background:
    radial-gradient(
      ellipse at 50% 100%,
      rgba(165, 123, 255, 0),
      transparent 70%
    );

  transition:
    flex 650ms cubic-bezier(.2,.8,.2,1),
    background 500ms ease,
    transform 650ms cubic-bezier(.2,.8,.2,1);
}

.dw-path + .dw-path {
  border-left:
    1px solid rgba(220, 225, 255, 0.09);
}

.dw-path::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 28px;
  right: calc(100% - 34px);
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--sky),
      var(--rose)
    );

  transition:
    right 620ms cubic-bezier(.2,.8,.2,1);
}

.dw-path:hover {
  flex: 1.16 1 0;
  transform: translateY(-3px);

  background:
    radial-gradient(
      ellipse at 50% 100%,
      rgba(160, 111, 240, 0.09),
      transparent 72%
    );
}

.dw-path:hover::before {
  right: 28px;
}

.dw-node {
  position: absolute;
  top: -4px;
  left: 28px;

  width: 7px;
  height: 7px;

  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      var(--sky),
      var(--rose)
    );

  box-shadow:
    0 0 14px rgba(141, 167, 255, 0.24);

  transition:
    transform 500ms ease,
    box-shadow 500ms ease;
}

.dw-path:hover .dw-node {
  transform: scale(1.35);
  box-shadow:
    0 0 20px rgba(163, 155, 255, 0.38);
}

.dw-path-name {
  display: block;
  margin-bottom: 11px;

  color: #f4f0ff;

  font-family:
    "Avenir Next",
    "Segoe UI Variable",
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 14px;
  font-weight: 560;
  letter-spacing: -0.012em;
  line-height: 1.35;
}

.dw-path-copy {
  display: block;
  max-width: 31ch;

  color: rgba(216, 219, 234, 0.80);

  font-family:
    "Avenir Next",
    "Segoe UI Variable",
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 13px;
  font-weight: 390;
  letter-spacing: -0.006em;
  line-height: 1.65;
}

.dw-signal {
  position: relative;
  z-index: 4;

  width: 100%;
  margin-top: 20px;
  overflow: hidden;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 8%,
      #000 92%,
      transparent
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 8%,
      #000 92%,
      transparent
    );
}

.dw-signal-track {
  display: flex;
  width: max-content;
  padding: 8px 0;

  animation:
    dw-signal 34s linear infinite;
}

.dw-signal:hover .dw-signal-track {
  animation-play-state: paused;
}

.dw-signal-track span {
  padding-right: 72px;

  color: rgba(208, 213, 236, 0.68);

  font-family:
    Geist,
    "Avenir Next",
    "Segoe UI",
    Arial,
    sans-serif;

  font-size: 9px;
  font-weight: 520;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
}

.dw-footer {
  position: relative;
  z-index: 4;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;

  padding-top: 15px;

  font-family:
    Geist,
    "Avenir Next",
    "Segoe UI",
    Arial,
    sans-serif;

  font-size: 12px;
}

.dw-footer a {
  position: relative;

  color: rgba(226, 229, 242, 0.82);
  text-decoration: none;

  transition:
    color 250ms ease,
    transform 250ms ease;
}

.dw-footer a:hover {
  color: #ffffff;
  transform: translateY(-1px);
}

.dw-separator {
  color: rgba(218, 222, 241, 0.22);
}

@keyframes dw-aurora-drift {
  from {
    transform:
      translate3d(-2%, -1%, 0)
      rotate(-8deg)
      scale(1);
  }

  to {
    transform:
      translate3d(3%, 3%, 0)
      rotate(-5deg)
      scale(1.07);
  }
}

@keyframes dw-mist-drift {
  from {
    transform:
      translate3d(-2%, 0, 0);
  }

  to {
    transform:
      translate3d(3%, 3%, 0);
  }
}

@keyframes dw-cloud-drift {
  from {
    transform:
      translate3d(-1.5%, 0, 0)
      scale(1);
  }

  to {
    transform:
      translate3d(2%, -2%, 0)
      scale(1.04);
  }
}

@keyframes dw-horizon-breathe {
  from {
    opacity: 0.72;
    transform:
      translateX(-50%)
      scale(0.97);
  }

  to {
    opacity: 0.96;
    transform:
      translateX(-50%)
      scale(1.05);
  }
}

@keyframes dw-stars-a {
  from {
    background-position:
      19px 13px;
    opacity: 0.36;
  }

  to {
    background-position:
      24px 21px;
    opacity: 0.52;
  }
}

@keyframes dw-stars-b {
  from {
    background-position:
      53px 37px;
  }

  to {
    background-position:
      47px 45px;
  }
}

@keyframes dw-stars-c {
  from {
    background-position:
      91px 64px;
  }

  to {
    background-position:
      97px 57px;
  }
}

@keyframes dw-twinkle {
  from {
    opacity: 0.60;
  }

  to {
    opacity: 0.88;
  }
}

@keyframes dw-symbol-drift {
  0%,
  100% {
    transform:
      translateY(0)
      rotate(0deg);
  }

  50% {
    transform:
      translateY(-4px)
      rotate(-0.35deg);
  }
}

@keyframes dw-symbol-color {
  from {
    background-position:
      8% 18%;
  }

  to {
    background-position:
      94% 82%;
  }
}

@keyframes dw-symbol-sweep {
  0%,
  28% {
    background-position:
      -150% 0;
  }

  58%,
  100% {
    background-position:
      155% 0;
  }
}

@keyframes dw-lens-sweep {
  0%,
  25% {
    left: -50%;
  }

  65%,
  100% {
    left: 135%;
  }
}

@keyframes dw-signal {
  from {
    transform:
      translateX(0);
  }

  to {
    transform:
      translateX(-50%);
  }
}

@media (max-width: 760px) {
  .dreamw {
    min-height: auto;
    padding: 24px 20px 22px;
    border-radius: 25px;
  }

  .dw-nav {
    justify-content: center;
    gap: 19px;
  }

  .dw-hero {
    padding-top: 36px;
  }

  .dw-dream {
    font-size:
      clamp(50px, 15vw, 69px);
  }

  .dw-symbol {
    margin-left: 12px;

    font-size:
      clamp(76px, 22vw, 100px);
  }

  .dw-subtitle {
    letter-spacing: 0.28em;
  }

  .dw-lead {
    font-size: 14px;
  }

  .dw-lens {
    width: 32px;
    height: 12px;
    margin: 0 6px;
  }

  .dw-constellation {
    display: grid;
    grid-template-columns: 1fr;
  }

  .dw-path {
    padding: 24px 21px;
  }

  .dw-path + .dw-path {
    border-top:
      1px solid rgba(220, 225, 255, 0.09);

    border-left: 0;
  }

  .dw-path:hover {
    transform: none;
  }
}
</style>

<div class="dw-sky"></div>
<div class="dw-aurora"></div>
<div class="dw-mist"></div>
<div class="dw-clouds"></div>
<div class="dw-horizon"></div>
<div class="dw-water"></div>

<div class="dw-stars-a"></div>
<div class="dw-stars-b"></div>
<div class="dw-stars-c"></div>
<div class="dw-stars-d"></div>

<nav class="dw-nav">
  <a href="YOUR_MODELS_URL">Models</a>
  <a href="YOUR_RESEARCH_URL">Research</a>
  <a href="YOUR_CODE_URL">Code</a>
</nav>

<header class="dw-hero">
  <div class="dw-wordmark">
    <span class="dw-dream">Dream</span>
    <span class="dw-symbol">W</span>
  </div>

  <div class="dw-subtitle">
    Efficient Intelligence Research
  </div>

  <div class="dw-lead">
    Exploring the space between
    <span class="dw-lens"></span>
    imagination and intelligence through compact models,
    unconventional architectures, and better training.
  </div>
</header>

<section class="dw-constellation">
  <a class="dw-path" href="YOUR_MODELS_URL">
    <span class="dw-node"></span>
    <span class="dw-path-name">Small frontier models</span>
    <span class="dw-path-copy">
      Compact language models designed to push capability per parameter.
    </span>
  </a>

  <a class="dw-path" href="YOUR_RESEARCH_URL">
    <span class="dw-node"></span>
    <span class="dw-path-name">Architecture research</span>
    <span class="dw-path-copy">
      Multiscreen attention, memory systems, and efficient neural structures.
    </span>
  </a>

  <a class="dw-path" href="YOUR_CODE_URL">
    <span class="dw-node"></span>
    <span class="dw-path-name">Training experiments</span>
    <span class="dw-path-copy">
      Pretraining, fine-tuning, optimization, and open evaluation.
    </span>
  </a>
</section>

<div class="dw-signal">
  <div class="dw-signal-track">
    <span>Small systems. Expansive possibilities.</span>
    <span>Architecture. Training. Intelligence.</span>
    <span>Beyond parameter count.</span>
    <span>The space between imagination and intelligence.</span>

    <span>Small systems. Expansive possibilities.</span>
    <span>Architecture. Training. Intelligence.</span>
    <span>Beyond parameter count.</span>
    <span>The space between imagination and intelligence.</span>
  </div>
</div>

<footer class="dw-footer">
  <a href="YOUR_MODELS_URL">Models</a>
  <span class="dw-separator">·</span>
  <a href="YOUR_GITHUB_URL">GitHub</a>
  <span class="dw-separator">·</span>
  <a href="YOUR_RESEARCH_URL">Research</a>
</footer>

</div>