<div class="spinner"></div>

.spinner {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.1);  /* faint ring */
  border-top-color: #10b981;                /* colored top */
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

<div class="dots">
  <span></span>
  <span></span>
  <span></span>
</div>

.dots { display: flex; gap: 8px; }

.dots span {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #10b981;
  animation: dotBounce 1.1s ease-in-out infinite;
}
/* Each dot gets a different start offset */
.dots span:nth-child(2) { animation-delay: .15s; }
.dots span:nth-child(3) { animation-delay: .3s;  }

@keyframes dotBounce {
  0%, 80%, 100% { transform: scale(.5); opacity: .4; }
  40%           { transform: scale(1);  opacity: 1;  }
}

<div class="bars">
  <span></span><span></span><span></span>
  <span></span><span></span>
</div>

.bars {
  display: flex;
  gap: 4px;
  align-items: end;
  height: 40px;
}
.bars span {
  width: 5px; height: 100%;
  background: linear-gradient(180deg, #10b981, #059669);
  border-radius: 3px;
  transform-origin: bottom;       /* anchor at the bottom */
  animation: barWave 1s ease-in-out infinite;
}
.bars span:nth-child(1) { animation-delay: 0s;  }
.bars span:nth-child(2) { animation-delay: .1s; }
.bars span:nth-child(3) { animation-delay: .2s; }
.bars span:nth-child(4) { animation-delay: .3s; }
.bars span:nth-child(5) { animation-delay: .4s; }

@keyframes barWave {
  0%, 100% { transform: scaleY(.3); }
  50%      { transform: scaleY(1);  }
}

<div class="fade-card">I fade and rise into place.</div>

.fade-card {
  /* Starting state: invisible and 20px below */
  opacity: 0;
  transform: translateY(20px);
  /* Animate to the final state and STAY there (forwards) */
  animation: fadeIn .8s cubic-bezier(.2,.8,.2,1) .1s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

<div class="slide-card">I slide in from the left.</div>

.slide-card {
  opacity: 0;
  transform: translateX(-60px);
  animation: slideIn .6s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

<ul class="stagger-list">
  <li>First item appears</li>
  <li>Second comes next</li>
  <li>Third follows</li>
  <li>Fourth arrives</li>
  <li>Fifth lands last</li>
</ul>

.stagger-list li {
  opacity: 0;
  transform: translateY(12px);
  animation: staggerIn .5s ease forwards;
}
/* Each item starts 100ms after the one before */
.stagger-list li:nth-child(1) { animation-delay: .1s; }
.stagger-list li:nth-child(2) { animation-delay: .2s; }
.stagger-list li:nth-child(3) { animation-delay: .3s; }
.stagger-list li:nth-child(4) { animation-delay: .4s; }
.stagger-list li:nth-child(5) { animation-delay: .5s; }

@keyframes staggerIn {
  to { opacity: 1; transform: translateY(0); }
}

<h2 class="gradient-text">Make it flow.</h2>

.gradient-text {
  font-size: 3rem;
  font-weight: 700;
  /* Start and end with the same color so the loop seams */
  background: linear-gradient(90deg,
    #10b981, #06b6d4, #8b5cf6, #ec4899, #10b981);
  background-size: 300% 100%;     /* canvas wider than visible */
  /* Clip the gradient to the text shape */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientFlow 6s linear infinite;
}
@keyframes gradientFlow {
  0%   { background-position:   0% 50%; }
  100% { background-position: 300% 50%; }
}

<div class="float-wrap">
  <div class="float-obj"></div>
</div>

.float-obj {
  width: 80px; height: 80px;
  border-radius: 24px;
  background: linear-gradient(135deg, #10b981, #06b6d4);
  box-shadow: 0 30px 60px -10px rgba(16,185,129,.4);
  animation: levitate 3.5s ease-in-out infinite;
}
@keyframes levitate {
  0%, 100% { transform: translateY(0)     rotate(0deg); }
  50%      { transform: translateY(-18px) rotate(4deg); }
}

/* Ground shadow — inverted: shrinks when object rises */
.float-wrap { display: flex; flex-direction: column; gap: 20px; align-items: center; }
.float-wrap::after {
  content: '';
  width: 70px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.6), transparent 70%);
  animation: shadowPulse 3.5s ease-in-out infinite;
}
@keyframes shadowPulse {
  0%, 100% { transform: scale(1);  opacity: .7; }
  50%      { transform: scale(.6); opacity: .35; }
}

<div class="neon">Glow up.</div>

.neon {
  font-size: 2.2rem;
  font-weight: 700;
  color: #fff;
  /* alternate flips the direction every cycle, giving a pulse */
  animation: neonPulse 2s ease-in-out infinite alternate;
}
@keyframes neonPulse {
  from {
    /* Tighter, dimmer glow */
    text-shadow:
      0 0 4px  #fff,
      0 0 10px #10b981,
      0 0 20px #10b981,
      0 0 40px #10b981;
  }
  to {
    /* Looser, brighter glow */
    text-shadow:
      0 0 8px  #fff,
      0 0 16px #10b981,
      0 0 32px #10b981,
      0 0 60px #059669,
      0 0 80px #059669;
  }
}

<div class="typer">Hello, I'm typing...</div>

.typer {
  font-family: monospace;
  font-size: 20px;
  color: #10b981;
  /* The blinking caret is a right border */
  border-right: 3px solid #10b981;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  /* Two animations run together: typing + caret blink */
  animation:
    typeIt    3s steps(28, end) forwards,  /* 28 steps of typing */
    blinkCaret .7s step-end infinite;
}
@keyframes typeIt {
  to { width: 18ch; }         /* end width = # of chars */
}
@keyframes blinkCaret {
  50% { border-color: transparent; }
}

<div class="marquee">
  <div class="marquee-track">
    <span>DESIGN</span>
    <span>BUILD</span>
    <span>SHIP</span>
    <!-- IMPORTANT: duplicate the same content
         so translating -50% loops seamlessly -->
    <span>DESIGN</span>
    <span>BUILD</span>
    <span>SHIP</span>
  </div>
</div>

.marquee {
  width: 100%;
  overflow: hidden;
  /* Fade the left & right edges */
  mask-image: linear-gradient(
    90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track {
  display: flex;
  gap: 48px;
  width: max-content;         /* size to its contents */
  animation: marquee 20s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* half, since we duplicate */
}

<svg class="signature" viewBox="0 0 240 110">
  <path d="M 20 70 C 30 20, 55 10, 70 60
           S 95 90, 110 60
           Q 125 25, 140 55
           T 170 65 L 210 30"/>
</svg>

.signature path {
  fill: none;
  stroke: #10b981;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* The trick: dash length equals total path length,
     dashoffset starts at that length (fully hidden),
     animates down to 0 (fully drawn). */
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: drawPath 3s ease forwards;
}
@keyframes drawPath {
  to { stroke-dashoffset: 0; }
}

/* TIP: to find your path length exactly, use
   pathEl.getTotalLength() in the console. */