<div class="hero">
    <span class="eyebrow">INTERACTIVE UI</span>
    <h1>Magnetic Dock</h1>
    <p>Move your cursor across the dock.</p>
  </div>

<button class="dock-item">
      <span class="icon">✦</span>
      <span class="label">Explore</span>
    </button>

<button class="dock-item">
      <span class="icon">◫</span>
      <span class="label">Projects</span>
    </button>

<button class="dock-item">
      <span class="icon">♫</span>
      <span class="label">Music</span>
    </button>

<button class="dock-item">
      <span class="icon">✉</span>
      <span class="label">Messages</span>
    </button>

<button class="dock-item">
      <span class="icon">⚙</span>
      <span class="label">Settings</span>
    </button>

</div>

<div class="status">
    <span class="status-dot"></span>
    System online
  </div>

</div>

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  overflow: hidden;

font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

background:
    #050609;

color: white;
}

/* STAGE */

.stage {
  position: relative;

width: 100vw;
  height: 100vh;

display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

overflow: hidden;

background:
    radial-gradient(
      circle at 50% 40%,
      #11162a 0%,
      #080a11 38%,
      #030406 80%
    );
}

/* AMBIENT LIGHT */

.ambient {
  position: absolute;

border-radius: 50%;

filter: blur(90px);

opacity: .45;

pointer-events: none;
}

.ambient-one {
  width: 420px;
  height: 420px;

left: 10%;
  top: 15%;

background:
    #6246ff;

animation:
    floatOne
    9s
    ease-in-out
    infinite alternate;
}

.ambient-two {
  width: 360px;
  height: 360px;

right: 8%;
  bottom: 10%;

background:
    #00c8ff;

animation:
    floatTwo
    11s
    ease-in-out
    infinite alternate;
}

@keyframes floatOne {
  from {
    transform:
      translate(-30px, 20px)
      scale(.9);
  }

to {
    transform:
      translate(70px, -45px)
      scale(1.15);
  }
}

@keyframes floatTwo {
  from {
    transform:
      translate(20px, 20px)
      scale(1);
  }

to {
    transform:
      translate(-80px, -30px)
      scale(1.25);
  }
}

/* HERO */

.hero {
  position: relative;
  z-index: 5;

text-align: center;

margin-bottom: 70px;
}

.eyebrow {
  display: block;

margin-bottom: 12px;

color:
    rgba(255,255,255,.4);

font-size: 10px;
  font-weight: 700;

letter-spacing: 3px;
}

.hero h1 {
  margin: 0;

font-size:
    clamp(38px, 6vw, 76px);

font-weight: 650;

letter-spacing:
    -3px;

background:
    linear-gradient(
      180deg,
      #ffffff,
      #9ba5c3
    );

-webkit-background-clip: text;
  background-clip: text;

color: transparent;
}

.hero p {
  margin:
    15px 0 0;

color:
    rgba(255,255,255,.42);

font-size: 14px;
}

/* DOCK */

.dock {
  position: relative;
  z-index: 10;

display: flex;
  align-items: flex-end;

gap: 9px;

padding:
    11px 13px;

border:
    1px solid
    rgba(255,255,255,.13);

border-radius:
    24px;

background:
    rgba(15,18,28,.58);

backdrop-filter:
    blur(28px)
    saturate(140%);

box-shadow:
    0 25px 70px
      rgba(0,0,0,.5),

inset 0 1px 0
      rgba(255,255,255,.08);
}

/* DOCK ITEM */

.dock-item {
  position: relative;

width: 58px;
  height: 58px;

display: flex;
  align-items: center;
  justify-content: center;

padding: 0;

border:
    1px solid
    rgba(255,255,255,.10);

border-radius: 16px;

background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.035)
    );

color: white;

cursor: pointer;

transform-origin:
    center bottom;

transition:
    background .18s,
    border-color .18s;

will-change:
    transform;
}

.dock-item:hover {
  background:
    rgba(255,255,255,.14);

border-color:
    rgba(255,255,255,.25);
}

.dock-item.active {
  background:
    linear-gradient(
      145deg,
      rgba(115,89,255,.45),
      rgba(35,199,255,.18)
    );

border-color:
    rgba(145,130,255,.45);

box-shadow:
    0 8px 24px
      rgba(94,74,255,.25);
}

/* ICON */

.icon {
  font-size: 23px;

line-height: 1;

pointer-events: none;
}

/* TOOLTIP */

.label {
  position: absolute;

left: 50%;
  bottom: calc(100% + 14px);

transform:
    translateX(-50%)
    translateY(6px);

padding:
    6px 9px;

border:
    1px solid
    rgba(255,255,255,.12);

border-radius: 7px;

background:
    rgba(10,12,18,.9);

color:
    rgba(255,255,255,.85);

font-size: 10px;

white-space: nowrap;

opacity: 0;

pointer-events: none;

transition:
    opacity .15s,
    transform .15s;
}

.dock-item:hover .label {
  opacity: 1;

transform:
    translateX(-50%)
    translateY(0);
}

/* STATUS */

.status {
  position: absolute;

left: 28px;
  bottom: 25px;

display: flex;
  align-items: center;

gap: 8px;

color:
    rgba(255,255,255,.4);

font-size: 10px;

letter-spacing: 1px;
}

.status-dot {
  width: 6px;
  height: 6px;

border-radius: 50%;

background:
    #5cff9a;

box-shadow:
    0 0 10px
    rgba(92,255,154,.8);

animation:
    pulse
    1.8s
    ease-in-out
    infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: .45;
  }

50% {
    opacity: 1;
  }
}

/* MOBILE */

@media (
  max-width: 650px
) {

.dock {
    gap: 5px;

padding:
      9px;

border-radius:
      20px;
  }

.dock-item {
    width: 43px;
    height: 43px;

border-radius:
      12px;
  }

.icon {
    font-size:
      18px;
  }

.hero {
    margin-bottom:
      55px;
  }

}

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground