Put your After Effects animation on the web. For real.

/* particle ring — compositor-only transforms */
#orbit { animation: spin 7s linear infinite; }
#orbit .dot {
  animation: pulse 2.2s var(--ease) infinite;
}
@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes pulse {
  0%,100% { transform: scale(.55); opacity: .45; }
  50%     { transform: scale(1);   opacity: 1; }
}

/* Squash keeps AE's eases — compositor-only transform */
#drop-scale { animation: drop 3817ms linear infinite; }
@keyframes drop {
  22.71% { transform: scale(1.16, 1.16); animation-timing-function: ease-in-out; }
  40.19% { transform: scale(0, 0); }
}

/* Splash droplets ride the AE bezier itself — a real CSS motion path */
#droplet { offset-path: path("M 0 0 C -10.7 -29, -59.3 -105, -130 -10"); }

/* Ripples expand through an animated @property mask — no <canvas>, no JS */
@property --r { syntax: '<percentage>'; inherits: false; }
#ring { mask-image: radial-gradient(ellipse closest-side, transparent var(--r), #000 calc(var(--r) + 37.2%)); }

/* each particle wanders on two out-of-phase loops — sway × bob = organic drift */
#field b { animation: sway var(--sx) ease-in-out infinite alternate; }  /* horizontal */
#field i { animation: bob var(--sy) ease-in-out infinite alternate,     /* vertical */
                       twinkle var(--tw) ease-in-out infinite; }          /* opacity */
@keyframes sway    { to { transform: translateX(var(--ax)); } }
@keyframes bob     { to { transform: translateY(var(--ay)); } }
@keyframes twinkle { 50% { opacity: var(--o1); } }
/* every particle has its own periods → the swarm never syncs, so motion stays alive */

/* line 1: letters fly in (springy). line 2: typed by revealing width */
.title-reveal .ch { animation: letterIn 4s infinite;
                    animation-delay: calc(var(--i) * .07s); }  /* stagger */
.typed {
  overflow: hidden; white-space: nowrap;
  border-right: .06em solid #9fc1ff;          /* caret rides the reveal edge */
  animation: typeW 4s steps(1, end) infinite,      /* snap per glyph */
             caretBlink .75s steps(1) infinite;
}
/* one width stop per glyph edge: type in -> hold -> backspace out */
@keyframes typeW {
  8%{width:.53em} 20%{width:3.58em} 47%{width:7.4em}  /* ...type "shipped as code." */
  82.5%{width:7.4em}                       /* hold */
  90.5%{width:0}                          /* ...backspaced to empty */
}