<div class="header">
    <div>
      <div class="eyebrow">CSS ANIMATION LAB</div>
      <h1>Motion Lab</h1>
    </div>

<div class="preview">

<div class="hint">
        MOVE YOUR MOUSE OVER THE ORB
      </div>

</div>

<aside class="controls">

<div class="control-section">
        <label>ANIMATION</label>

<div class="buttons">
          <button class="motion active" data-motion="float">
            Float
          </button>

<button class="motion" data-motion="pulse">
            Pulse
          </button>

<button class="motion" data-motion="bounce">
            Bounce
          </button>
        </div>
      </div>

<div class="label-row">
          <label>SPEED</label>
          <strong id="speedValue">1.0x</strong>
        </div>

</div>

</div>

</div>

<label>INTERACTION</label>

<button
          id="mouseToggle"
          class="wide-button active"
        >
          Mouse Interaction
          <span>ON</span>
        </button>

</div>

<div class="code-box">
        <div class="code-title">
          CURRENT ANIMATION
        </div>

<code id="codeOutput">
          animation: float 4s ease-in-out infinite;
        </code>
      </div>

</aside>

</div>

* {
  box-sizing: border-box;
}

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

body {
  overflow: hidden;

font-family:
    Inter,
    Arial,
    sans-serif;

color: #f4f6f8;

background:
    radial-gradient(
      circle at 50% 30%,
      #1c2433,
      #090d14 65%,
      #05070b
    );
}

/* =================================
   APP
================================= */

.app {
  width: 100%;
  height: 100%;

padding: 30px;

display: flex;
  flex-direction: column;
}

/* =================================
   HEADER
================================= */

.header {
  display: flex;

align-items: center;
  justify-content: space-between;

margin-bottom: 25px;
}

.eyebrow {
  color: #697689;

font-size: 9px;

letter-spacing: 3px;

margin-bottom: 7px;
}

h1 {
  margin: 0;

font-size: 34px;

letter-spacing: -1.5px;
}

.status {
  display: flex;

align-items: center;

gap: 8px;

color: #7f8b9b;

font-size: 9px;

letter-spacing: 2px;
}

.status span {
  width: 7px;
  height: 7px;

border-radius: 50%;

background: #a7ed72;

box-shadow:
    0 0 12px rgba(167,237,114,.8);

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

/* =================================
   WORKSPACE
================================= */

.workspace {
  flex: 1;

min-height: 0;

display: grid;

grid-template-columns:
    minmax(0, 1fr)
    300px;

gap: 18px;
}

/* =================================
   PREVIEW
================================= */

.preview {
  position: relative;

overflow: hidden;

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

border-radius: 24px;

background:
    radial-gradient(
      circle at 50% 45%,
      rgba(52,89,145,.25),
      rgba(9,13,20,.95) 55%
    );

display: flex;

align-items: center;
  justify-content: center;
}

/* =================================
   GRID
================================= */

.grid {
  position: absolute;

inset: -50%;

opacity: .15;

background-image:
    linear-gradient(
      rgba(255,255,255,.08) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.08) 1px,
      transparent 1px
    );

background-size:
    45px 45px;

transform:
    perspective(500px)
    rotateX(62deg)
    translateY(32%);

transform-origin: center;
}

/* =================================
   ORB
================================= */

.orb-wrap {
  position: relative;

width: 260px;
  height: 260px;

display: flex;

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

z-index: 5;

transition:
    transform .25s ease;
}

.orb {
  --size: 100%;
  --glow: .6;
  --duration: 4s;

width: var(--size);
  height: var(--size);

position: relative;

border-radius: 50%;

background:
    radial-gradient(
      circle at 30% 25%,
      #e8fbff 0%,
      #8be6ff 14%,
      #329acb 37%,
      #15517d 65%,
      #09253d 100%
    );

box-shadow:
    0 0 calc(45px * var(--glow))
    rgba(71,208,255,var(--glow)),

inset -25px -25px 45px
    rgba(0,0,0,.45),

inset 15px 12px 25px
    rgba(255,255,255,.25);

transform-style: preserve-3d;

animation:
    float var(--duration)
    ease-in-out
    infinite;
}

/* =================================
   ORB DETAILS
================================= */

.orb-highlight {
  position: absolute;

width: 35%;
  height: 35%;

top: 12%;
  left: 14%;

border-radius: 50%;

background:
    radial-gradient(
      circle,
      rgba(255,255,255,.65),
      transparent 70%
    );

filter: blur(5px);
}

.orb-core {
  position: absolute;

width: 28%;
  height: 28%;

left: 50%;
  top: 50%;

transform:
    translate(-50%, -50%);

border-radius: 50%;

background:
    radial-gradient(
      circle,
      rgba(255,255,255,.8),
      rgba(80,215,255,.2) 50%,
      transparent 75%
    );

animation:
    corePulse 2s
    ease-in-out
    infinite;
}

/* =================================
   SHADOW
================================= */

.orb-shadow {
  position: absolute;

width: 155px;
  height: 30px;

bottom: 15px;

border-radius: 50%;

background:
    rgba(0,0,0,.5);

filter: blur(15px);

animation:
    shadowFloat 4s
    ease-in-out
    infinite;
}

/* =================================
   TRAILS
================================= */

.trail {
  position: absolute;

width: 6px;
  height: 6px;

border-radius: 50%;

background: #83e8ff;

box-shadow:
    0 0 15px #83e8ff;

opacity: .4;
}

.t1 {
  top: 32%;
  left: 25%;

animation:
    particle 3s 0s
    ease-in-out infinite;
}

.t2 {
  top: 25%;
  right: 28%;

animation:
    particle 3s 1s
    ease-in-out infinite;
}

.t3 {
  bottom: 28%;
  right: 21%;

animation:
    particle 3s 2s
    ease-in-out infinite;
}

/* =================================
   HINT
================================= */

.hint {
  position: absolute;

bottom: 22px;

color: #566174;

font-size: 8px;

letter-spacing: 2px;
}

/* =================================
   CONTROLS
================================= */

.controls {
  padding: 23px;

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

border-radius: 20px;

background:
    rgba(14,18,25,.82);

backdrop-filter:
    blur(20px);

overflow-y: auto;
}

.control-section {
  padding-bottom: 24px;

margin-bottom: 24px;

border-bottom:
    1px solid
    rgba(255,255,255,.07);
}

.control-section:last-of-type {
  border-bottom: 0;
}

label {
  display: block;

color: #687587;

font-size: 8px;

letter-spacing: 2px;

margin-bottom: 12px;
}

/* =================================
   MOTION BUTTONS
================================= */

.buttons {
  display: grid;

grid-template-columns:
    1fr 1fr;

gap: 7px;
}

.motion {
  padding: 10px;

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

border-radius: 9px;

background:
    rgba(255,255,255,.035);

color: #8e99a9;

font-size: 10px;

cursor: pointer;

transition:
    all .2s ease;
}

.motion:hover {
  background:
    rgba(255,255,255,.07);

color: white;
}

.motion.active {
  background: #c9ed73;

color: #12170c;

border-color:
    #c9ed73;
}

/* =================================
   RANGE
================================= */

.label-row {
  display: flex;

justify-content: space-between;

align-items: center;
}

.label-row label {
  margin: 0;
}

.label-row strong {
  color: #cbd3dc;

font-size: 10px;
}

input[type="range"] {
  width: 100%;

appearance: none;

height: 3px;

background: #2b3440;

border-radius: 4px;

outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;

width: 13px;
  height: 13px;

border-radius: 50%;

background: #c9ed73;

border: 0;

cursor: pointer;

box-shadow:
    0 0 12px
    rgba(201,237,115,.35);
}

input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 13px;

border-radius: 50%;

background: #c9ed73;

border: 0;

cursor: pointer;
}

/* =================================
   TOGGLE
================================= */

.wide-button {
  width: 100%;

padding: 12px;

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

border-radius: 9px;

background:
    rgba(255,255,255,.04);

color: #8993a1;

font-size: 10px;

display: flex;

justify-content: space-between;

cursor: pointer;
}

.wide-button span {
  color: #6c7582;
}

.wide-button.active {
  color: white;
}

.wide-button.active span {
  color: #c9ed73;
}

/* =================================
   CODE
================================= */

.code-box {
  padding: 14px;

border-radius: 10px;

background:
    #080b10;

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

.code-title {
  color: #4f5b6a;

font-size: 7px;

letter-spacing: 2px;

margin-bottom: 9px;
}

code {
  color: #8ac7ff;

font-size: 9px;

line-height: 1.5;
}

/* =================================
   ANIMATIONS
================================= */

@keyframes float {

0%,
  100% {
    transform:
      translateY(0)
      rotateX(0deg)
      rotateY(0deg);
  }

50% {
    transform:
      translateY(-28px)
      rotateX(4deg)
      rotateY(8deg);
  }
}

@keyframes pulse {

0%,
  100% {
    transform:
      scale(1);
  }

50% {
    transform:
      scale(1.14);
  }
}

@keyframes spin {

0% {
    transform:
      rotateY(0deg)
      rotateX(0deg);
  }

100% {
    transform:
      rotateY(360deg)
      rotateX(18deg);
  }
}

@keyframes bounce {

0%,
  100% {
    transform:
      translateY(0);
  }

30% {
    transform:
      translateY(-50px);
  }

55% {
    transform:
      translateY(0);
  }

70% {
    transform:
      translateY(-18px);
  }
}

@keyframes shadowFloat {

0%,
  100% {
    transform: scaleX(1);

opacity: .55;
  }

50% {
    transform: scaleX(.72);

opacity: .3;
  }
}

@keyframes corePulse {

0%,
  100% {
    transform:
      translate(-50%, -50%)
      scale(.8);
  }

50% {
    transform:
      translate(-50%, -50%)
      scale(1.12);
  }
}

@keyframes particle {

0%,
  100% {
    transform:
      translate(0, 0)
      scale(.6);

opacity: 0;
  }

40% {
    opacity: .7;
  }

50% {
    transform:
      translate(35px, -45px)
      scale(1.2);

opacity: .9;
  }

100% {
    transform:
      translate(55px, -70px)
      scale(.2);

opacity: 0;
  }
}

@keyframes statusPulse {

0%,
  100% {
    opacity: .5;
  }

50% {
    opacity: 1;
  }
}

/* =================================
   RESPONSIVE
================================= */

@media (max-width: 760px) {

body {
    overflow: auto;
  }

.app {
    min-height: 100vh;
    height: auto;

padding: 20px;
  }

.workspace {
    grid-template-columns: 1fr;
  }

.preview {
    min-height: 500px;
  }

.controls {
    overflow: visible;
  }
}

var orb =
  document.querySelector(".orb");

var orbWrap =
  document.querySelector(".orb-wrap");

var motionButtons =
  document.querySelectorAll(".motion");

var speed =
  document.getElementById("speed");

var size =
  document.getElementById("size");

var glow =
  document.getElementById("glow");

var speedValue =
  document.getElementById("speedValue");

var sizeValue =
  document.getElementById("sizeValue");

var glowValue =
  document.getElementById("glowValue");

var codeOutput =
  document.getElementById("codeOutput");

var mouseToggle =
  document.getElementById("mouseToggle");

var mouseInteraction = true;

var currentMotion = "float";

/* =================================
   ANIMATION BUTTONS
================================= */

motionButtons.forEach(
  function(button) {

button.addEventListener(
      "click",
      function() {

motionButtons.forEach(
          function(item) {
            item.classList.remove("active");
          }
        );

button.classList.add("active");

currentMotion =
          button.dataset.motion;

orb.style.animationName =
          currentMotion;

updateCode();
      }
    );
  }
);

/* =================================
   SPEED
================================= */

speed.addEventListener(
  "input",
  function() {

var value =
      parseFloat(
        speed.value
      );

var duration =
      4 / value;

orb.style.setProperty(
      "--duration",
      duration + "s"
    );

speedValue.textContent =
      value.toFixed(1) + "x";

updateCode();
  }
);

/* =================================
   SIZE
================================= */

size.addEventListener(
  "input",
  function() {

var value =
      size.value;

orb.style.setProperty(
      "--size",
      value + "%"
    );

sizeValue.textContent =
      value + "%";
  }
);

/* =================================
   GLOW
================================= */

glow.addEventListener(
  "input",
  function() {

var value =
      parseInt(
        glow.value,
        10
      );

var normalized =
      value / 100;

orb.style.setProperty(
      "--glow",
      normalized
    );

glowValue.textContent =
      value + "%";
  }
);

/* =================================
   MOUSE INTERACTION
================================= */

document
  .querySelector(".preview")
  .addEventListener(
    "mousemove",
    function(event) {

if (!mouseInteraction) {
        return;
      }

var rect =
        this.getBoundingClientRect();

var x =
        (
          event.clientX -
          rect.left
        ) /
        rect.width -
        .5;

var y =
        (
          event.clientY -
          rect.top
        ) /
        rect.height -
        .5;

orbWrap.style.transform =
        "translate(" +
        x * 22 +
        "px," +
        y * 16 +
        "px)";

orb.style.setProperty(
        "--mx",
        x
      );

orb.style.setProperty(
        "--my",
        y
      );
    }
  );

document
  .querySelector(".preview")
  .addEventListener(
    "mouseleave",
    function() {

orbWrap.style.transform =
        "translate(0,0)";
    }
  );

/* =================================
   MOUSE TOGGLE
================================= */

mouseToggle.addEventListener(
  "click",
  function() {

mouseInteraction =
      !mouseInteraction;

mouseToggle.classList.toggle(
      "active",
      mouseInteraction
    );

mouseToggle.querySelector(
      "span"
    ).textContent =
      mouseInteraction
      ? "ON"
      : "OFF";
  }
);

/* =================================
   CODE DISPLAY
================================= */

function updateCode() {

var value =
    parseFloat(
      speed.value
    );

var duration =
    4 / value;

codeOutput.textContent =
    "animation: " +
    currentMotion +
    " " +
    duration.toFixed(1) +
    "s ease-in-out infinite;";
}

/* =================================
   CLICK ORB
================================= */

orb.addEventListener(
  "click",
  function() {

orb.style.animation =
      "none";

orb.offsetHeight;

orb.style.animation =
      currentMotion +
      " " +
      (
        4 /
        parseFloat(speed.value)
      ) +
      "s ease-in-out infinite";

createBurst();
  }
);

/* =================================
   BURST EFFECT
================================= */

function createBurst() {

for (
    var i = 0;
    i < 12;
    i++
  ) {

var particle =
      document.createElement("div");

particle.style.position =
      "absolute";

particle.style.width = "5px";
    particle.style.height = "5px";

particle.style.borderRadius =
      "50%";

particle.style.background =
      "#a8f1ff";

particle.style.boxShadow =
      "0 0 12px #7ce7ff";

particle.style.left =
      "50%";

particle.style.top =
      "50%";

particle.style.pointerEvents =
      "none";

particle.style.zIndex =
      "8";

var angle =
      (
        Math.PI * 2 *
        i / 12
      );

var distance =
      100 +
      Math.random() * 80;

particle.style.transition =
      "transform .6s ease-out, opacity .6s ease-out";

orbWrap.appendChild(
      particle
    );

requestAnimationFrame(
      function(p) {

return function() {

p.style.transform =
            "translate(" +
            Math.cos(angle) *
            distance +
            "px," +
            Math.sin(angle) *
            distance +
            "px)";

p.style.opacity = "0";
        };

}(particle)
    );

setTimeout(
      function(p) {

return function() {
          p.remove();
        };

}(particle),

650
    );
  }
}

/* =================================
   INITIALIZE
================================= */

updateCode();

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