Name: Liveweave
Author: Liveweave

<div class="card-content">
        <div class="eyebrow">CREATIVE</div>
        <h2>Ideas<br>Become<br>Real.</h2>
        <p>Explore the next dimension of digital experiences.</p>
      </div>

<div class="card-footer">
        <span>LIVEWEAVE</span>
        <span>↗</span>
      </div>
    </div>

<div class="card-content">
        <div class="eyebrow">DESIGN</div>
        <h2>Shape<br>What<br>Comes Next.</h2>
        <p>Build interfaces that feel tactile, fluid and alive.</p>
      </div>

<div class="card-footer">
        <span>CREATIVE LAB</span>
        <span>↗</span>
      </div>
    </div>

<div class="card-content">
        <div class="eyebrow">TECHNOLOGY</div>
        <h2>Make The<br>Impossible<br>Possible.</h2>
        <p>Technology becomes powerful when it disappears into the experience.</p>
      </div>

<div class="card-footer">
        <span>FUTURE SYSTEMS</span>
        <span>↗</span>
      </div>
    </div>

<div class="card-content">
        <div class="eyebrow">MOTION</div>
        <h2>Designed<br>To<br>Move.</h2>
        <p>Motion gives interaction a sense of depth and personality.</p>
      </div>

<div class="card-footer">
        <span>INTERACTION</span>
        <span>↗</span>
      </div>
    </div>

</div>

* {
  box-sizing: border-box;
}

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

body {
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 35%,
      #202630 0%,
      #10141a 45%,
      #07090c 100%
    );

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

color: white;
}

/* ==============================
   SCENE
============================== */

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

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

position: relative;

perspective: 1400px;
}

/* ==============================
   STACK
============================== */

.stack {
  width: 340px;
  height: 460px;

position: relative;

transform-style: preserve-3d;
}

/* ==============================
   CARD
============================== */

.card {
  width: 340px;
  height: 460px;

position: absolute;

top: 0;
  left: 0;

padding: 26px;

border-radius: 24px;

overflow: hidden;

transform-style: preserve-3d;

cursor: grab;

user-select: none;

transition:
    transform 0.55s cubic-bezier(.22,.8,.2,1),
    opacity 0.35s ease,
    box-shadow 0.4s ease;

box-shadow:
    0 40px 80px rgba(0,0,0,.45),
    0 10px 20px rgba(0,0,0,.25);

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

.card:active {
  cursor: grabbing;
}

/* ==============================
   CARD LIGHT
============================== */

.card::before {

content: "";

position: absolute;

width: 300px;
  height: 300px;

top: -130px;
  right: -100px;

border-radius: 50%;

background:
    radial-gradient(
      circle,
      rgba(255,255,255,.3),
      rgba(255,255,255,0) 70%
    );

filter: blur(15px);

pointer-events: none;
}

/* ==============================
   CARD 1
============================== */

.card-1 {
  background:
    linear-gradient(
      145deg,
      #3b495b,
      #171d26 55%,
      #0d1117
    );
}

/* ==============================
   CARD 2
============================== */

.card-2 {
  background:
    linear-gradient(
      145deg,
      #5b493b,
      #231b17 55%,
      #110c0a
    );
}

/* ==============================
   CARD 3
============================== */

.card-3 {
  background:
    linear-gradient(
      145deg,
      #3e554a,
      #18231e 55%,
      #0c110e
    );
}

/* ==============================
   CARD 4
============================== */

.card-4 {
  background:
    linear-gradient(
      145deg,
      #51425d,
      #201a25 55%,
      #0e0a12
    );
}

/* ==============================
   TOP
============================== */

.card-top {
  display: flex;

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

position: relative;
  z-index: 2;
}

.card-number {
  font-size: 12px;

font-weight: 700;

letter-spacing: 2px;

opacity: .55;
}

.card-dot {
  width: 9px;
  height: 9px;

border-radius: 50%;

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

box-shadow:
    0 0 12px rgba(255,255,255,.35);
}

/* ==============================
   CONTENT
============================== */

.card-content {
  position: absolute;

left: 26px;
  right: 26px;
  bottom: 92px;

transform: translateZ(25px);
}

.eyebrow {
  font-size: 10px;

letter-spacing: 3px;

font-weight: 700;

opacity: .45;

margin-bottom: 16px;
}

.card h2 {

margin: 0;

font-size: 49px;

line-height: .92;

letter-spacing: -3px;

font-weight: 700;

text-shadow:
    0 5px 20px rgba(0,0,0,.2);
}

.card p {

max-width: 230px;

margin-top: 22px;

margin-bottom: 0;

font-size: 13px;

line-height: 1.55;

color: rgba(255,255,255,.55);
}

/* ==============================
   FOOTER
============================== */

.card-footer {

position: absolute;

bottom: 26px;
  left: 26px;
  right: 26px;

display: flex;

justify-content: space-between;

align-items: center;

font-size: 10px;

letter-spacing: 2px;

opacity: .45;
}

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

.controls {

position: absolute;

bottom: 42px;

display: flex;

gap: 10px;
}

.controls button {

width: 44px;
  height: 44px;

border-radius: 50%;

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

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

color: white;

font-size: 18px;

cursor: pointer;

backdrop-filter: blur(10px);

transition:
    background .2s,
    transform .2s;
}

.controls button:hover {

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

transform: translateY(-2px);
}

/* ==============================
   INSTRUCTION
============================== */

.instruction {

position: absolute;

bottom: 18px;

font-size: 10px;

letter-spacing: 1.5px;

text-transform: uppercase;

color: rgba(255,255,255,.28);
}

var stack = document.getElementById("stack");
var cards = Array.from(
  stack.querySelectorAll(".card")
);

var nextButton =
  document.getElementById("next");

var prevButton =
  document.getElementById("prev");

var dragging = false;
var startX = 0;
var currentX = 0;

/* =================================
   POSITION CARDS
================================= */

function renderCards() {

cards.forEach(function(card, index) {

var depth = index;

if (depth === 0) {

card.style.transform =
        "translate3d(0,0,60px) " +
        "rotateX(0deg) " +
        "rotateY(0deg) " +
        "rotateZ(0deg)";

card.style.opacity = "1";

card.style.zIndex =
        cards.length;

card.style.filter =
        "brightness(1)";

} else {

var x = depth * 11;
      var y = depth * 8;

var z = 60 - depth * 45;

var rotate =
        depth * 3;

var scale =
        1 - depth * 0.035;

card.style.transform =
        "translate3d(" +
        x +
        "px," +
        y +
        "px," +
        z +
        "px) " +
        "rotateZ(" +
        rotate +
        "deg) " +
        "scale(" +
        scale +
        ")";

card.style.opacity =
        Math.max(
          .65,
          1 - depth * .12
        );

card.style.zIndex =
        cards.length - depth;

card.style.filter =
        "brightness(" +
        (1 - depth * .08) +
        ")";
    }
  });
}

/* =================================
   NEXT
================================= */

function nextCard() {

var card =
    cards.shift();

cards.push(card);

card.style.transform =
    "translate3d(100px,-40px,100px) " +
    "rotateZ(14deg) " +
    "rotateY(-18deg)";

card.style.opacity = "0";

setTimeout(function() {

renderCards();

}, 100);
}

/* =================================
   PREVIOUS
================================= */

function previousCard() {

var card =
    cards.pop();

cards.unshift(card);

renderCards();

card.style.transform =
    "translate3d(-80px,30px,100px) " +
    "rotateZ(-12deg)";

card.style.opacity = "0";

setTimeout(function() {

renderCards();

}, 50);
}

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

nextButton.addEventListener(
  "click",
  nextCard
);

prevButton.addEventListener(
  "click",
  previousCard
);

/* =================================
   POINTER DOWN
================================= */

stack.addEventListener(
  "pointerdown",
  function(event) {

if (cards[0] !== event.target.closest(".card")) {
      return;
    }

dragging = true;

startX =
      event.clientX;

currentX =
      event.clientX;

cards[0].style.transition =
      "none";

stack.setPointerCapture(
      event.pointerId
    );
  }
);

/* =================================
   POINTER MOVE
================================= */

stack.addEventListener(
  "pointermove",
  function(event) {

if (!dragging) return;

currentX =
      event.clientX;

var delta =
      currentX - startX;

var rotate =
      delta * 0.08;

var lift =
      Math.abs(delta) * .12;

cards[0].style.transform =
      "translate3d(" +
      delta +
      "px," +
      (-lift) +
      "px," +
      "80px) " +
      "rotateZ(" +
      rotate +
      "deg)";
  }
);

/* =================================
   POINTER UP
================================= */

stack.addEventListener(
  "pointerup",
  function() {

if (!dragging) return;

dragging = false;

var delta =
      currentX - startX;

cards[0].style.transition =
      "transform .55s cubic-bezier(.22,.8,.2,1)";

/* Swipe threshold */

if (Math.abs(delta) > 100) {

if (delta < 0) {
        nextCard();
      } else {
        previousCard();
      }

} else {

renderCards();
    }
  }
);

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

renderCards();

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