Marketing
Feature Tile Grid

Six tiles arriving as a wave across the grid, each lifting on hover.
Canvas
Timeline
Easing
States
Export
Import
Elements
Groups
Hover states
1465ms
Duration
Open this scene in the editor All templates
Why it is timed this way

The reasoning

Forty-five milliseconds between tiles. Much more and the last one feels forgotten; much less and the wave collapses into a single flash. The offset runs in reading order, so the eye is carried across the grid rather than pulled around it.
18 elements move, the first at 0ms and the last starting at 765ms — the whole scene settles by 1465ms. Every bar below is one element's animation window.
Canvas Icon
Canvas Title
Canvas Line
Timeline Icon
Timeline Title
Timeline Line
Easing Icon
Easing Title
Easing Line
States Icon
States Title
States Line
Export Icon
Export Title
Export Line
Import Icon
Import Title
Import Line
0ms733ms1465ms
The code

Everything the scene needs, in whichever format you ship. Entrances compile to@keyframesand hover states totransition, with a reduced-motion guard on both.
740 lines
.features {
  transform: translate3d(0px, 0px, 0);
  width: 960px;
  height: 480px;
  transform-origin: 470px 146px;
}

.canvas-tile {
  transform: translate3d(0px, 0px, 0);
  width: 200px;
  height: 96px;
  background: #171a24;
  border-radius: 18px;
  transform-origin: 124px 72px;
  transition: transform 200ms ease-out, background 200ms ease-out;
}

.canvas-tile:hover {
  transform: translate3d(16px, -5px, 0);
  background: #1f2331;
  transition: transform 180ms ease-out, background 180ms ease-out;
}

.timeline-tile {
  transform: translate3d(0px, 0px, 0);
  width: 200px;
  height: 96px;
  background: #171a24;
  border-radius: 18px;
  transform-origin: 124px 72px;
  transition: transform 200ms ease-out, background 200ms ease-out;
}

.timeline-tile:hover {
  transform: translate3d(236px, -5px, 0);
  background: #1f2331;
  transition: transform 180ms ease-out, background 180ms ease-out;
}

.easing-tile {
  transform: translate3d(0px, 0px, 0);
  width: 200px;
  height: 96px;
  background: #171a24;
  border-radius: 18px;
  transform-origin: 124px 72px;
  transition: transform 200ms ease-out, background 200ms ease-out;
}

.easing-tile:hover {
  transform: translate3d(456px, -5px, 0);
  background: #1f2331;
  transition: transform 180ms ease-out, background 180ms ease-out;
}

.states-tile {
  transform: translate3d(0px, 0px, 0);
  width: 200px;
  height: 96px;
  background: #171a24;
  border-radius: 18px;
  transform-origin: 124px 72px;
  transition: transform 200ms ease-out, background 200ms ease-out;
}

.states-tile:hover {
  transform: translate3d(676px, -5px, 0);
  background: #1f2331;
  transition: transform 180ms ease-out, background 180ms ease-out;
}

.export-tile {
  transform: translate3d(0px, 0px, 0);
  width: 200px;
  height: 96px;
  background: #171a24;
  border-radius: 18px;
  transform-origin: 124px 72px;
  transition: transform 200ms ease-out, background 200ms ease-out;
}

.export-tile:hover {
  transform: translate3d(16px, -5px, 0);
  background: #1f2331;
  transition: transform 180ms ease-out, background 180ms ease-out;
}

.import-tile {
  transform: translate3d(0px, 0px, 0);
  width: 200px;
  height: 96px;
  background: #171a24;
  border-radius: 18px;
  transform-origin: 124px 72px;
  transition: transform 200ms ease-out, background 200ms ease-out;
}

.import-tile:hover {
  transform: translate3d(236px, -5px, 0);
  background: #1f2331;
  transition: transform 180ms ease-out, background 180ms ease-out;
}

.canvas-icon {
  transform: translate3d(0px, 0px, 0);
  width: 38px;
  height: 38px;
  background: #6366f1;
  border-radius: 10px;
  animation: canvas-icon-anim 1465ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes canvas-icon-anim {
  0% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  13.65% {
    transform: translate3d(0px, 0px, 0) scale(1.029, 1.029);
    opacity: 1;
  }
  34.13% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.canvas-title {
  transform: translate3d(0px, 0px, 0);
  height: 22px;
  background: #00000000;
  color: #eceef4;
  font-size: 16px;
  font-weight: 700;
  animation: canvas-title-anim 1465ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes canvas-title-anim {
  0% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
  }
  3.07% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  16.72% {
    transform: translate3d(0px, 0px, 0) scale(1.029, 1.029);
    opacity: 1;
  }
  37.2% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.canvas-line {
  transform: translate3d(0px, 0px, 0);
  height: 8px;
  background: #272c3a;
  border-radius: 999px;
  animation: canvas-line-anim 1465ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes canvas-line-anim {
  0% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
  }
  6.14% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  19.8% {
    transform: translate3d(0px, 0px, 0) scale(1.029, 1.029);
    opacity: 1;
  }
  40.27% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.timeline-icon {
  transform: translate3d(0px, 0px, 0);
  width: 38px;
  height: 38px;
  background: #22d3ee;
  border-radius: 10px;
  animation: timeline-icon-anim 1465ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes timeline-icon-anim {
  0% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
  }
  9.22% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  22.87% {
    transform: translate3d(0px, 0px, 0) scale(1.029, 1.029);
    opacity: 1;
  }
  43.34% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.timeline-title {
  transform: translate3d(0px, 0px, 0);
  height: 22px;
  background: #00000000;
  color: #eceef4;
  font-size: 16px;
  font-weight: 700;
  animation: timeline-title-anim 1465ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes timeline-title-anim {
  0% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
  }
  12.29% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  25.94% {
    transform: translate3d(0px, 0px, 0) scale(1.029, 1.029);
    opacity: 1;
  }
  46.42% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.timeline-line {
  transform: translate3d(0px, 0px, 0);
  height: 8px;
  background: #272c3a;
  border-radius: 999px;
  animation: timeline-line-anim 1465ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes timeline-line-anim {
  0% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
  }
  15.36% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  29.01% {
    transform: translate3d(0px, 0px, 0) scale(1.029, 1.029);
    opacity: 1;
  }
  49.49% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.easing-icon {
  transform: translate3d(0px, 0px, 0);
  width: 38px;
  height: 38px;
  background: #6366f1;
  border-radius: 10px;
  animation: easing-icon-anim 1465ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes easing-icon-anim {
  0% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
  }
  18.43% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  32.08% {
    transform: translate3d(0px, 0px, 0) scale(1.029, 1.029);
    opacity: 1;
  }
  52.56% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.easing-title {
  transform: translate3d(0px, 0px, 0);
  height: 22px;
  background: #00000000;
  color: #eceef4;
  font-size: 16px;
  font-weight: 700;
  animation: easing-title-anim 1465ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes easing-title-anim {
  0% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
  }
  21.5% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  35.15% {
    transform: translate3d(0px, 0px, 0) scale(1.029, 1.029);
    opacity: 1;
  }
  55.63% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.easing-line {
  transform: translate3d(0px, 0px, 0);
  height: 8px;
  background: #272c3a;
  border-radius: 999px;
  animation: easing-line-anim 1465ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes easing-line-anim {
  0% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
  }
  24.57% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  38.23% {
    transform: translate3d(0px, 0px, 0) scale(1.029, 1.029);
    opacity: 1;
  }
  58.7% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.states-icon {
  transform: translate3d(0px, 0px, 0);
  width: 38px;
  height: 38px;
  background: #22d3ee;
  border-radius: 10px;
  animation: states-icon-anim 1465ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes states-icon-anim {
  0% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
  }
  27.65% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  41.3% {
    transform: translate3d(0px, 0px, 0) scale(1.029, 1.029);
    opacity: 1;
  }
  61.77% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.states-title {
  transform: translate3d(0px, 0px, 0);
  height: 22px;
  background: #00000000;
  color: #eceef4;
  font-size: 16px;
  font-weight: 700;
  animation: states-title-anim 1465ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes states-title-anim {
  0% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
  }
  30.72% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  44.37% {
    transform: translate3d(0px, 0px, 0) scale(1.029, 1.029);
    opacity: 1;
  }
  64.85% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.states-line {
  transform: translate3d(0px, 0px, 0);
  height: 8px;
  background: #272c3a;
  border-radius: 999px;
  animation: states-line-anim 1465ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes states-line-anim {
  0% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
  }
  33.79% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  47.44% {
    transform: translate3d(0px, 0px, 0) scale(1.029, 1.029);
    opacity: 1;
  }
  67.92% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.export-icon {
  transform: translate3d(0px, 0px, 0);
  width: 38px;
  height: 38px;
  background: #6366f1;
  border-radius: 10px;
  animation: export-icon-anim 1465ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes export-icon-anim {
  0% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
  }
  36.86% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  50.51% {
    transform: translate3d(0px, 0px, 0) scale(1.029, 1.029);
    opacity: 1;
  }
  70.99% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.export-title {
  transform: translate3d(0px, 0px, 0);
  height: 22px;
  background: #00000000;
  color: #eceef4;
  font-size: 16px;
  font-weight: 700;
  animation: export-title-anim 1465ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes export-title-anim {
  0% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
  }
  39.93% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  53.58% {
    transform: translate3d(0px, 0px, 0) scale(1.029, 1.029);
    opacity: 1;
  }
  74.06% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.export-line {
  transform: translate3d(0px, 0px, 0);
  height: 8px;
  background: #272c3a;
  border-radius: 999px;
  animation: export-line-anim 1465ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes export-line-anim {
  0% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
  }
  43% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  56.66% {
    transform: translate3d(0px, 0px, 0) scale(1.029, 1.029);
    opacity: 1;
  }
  77.13% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.import-icon {
  transform: translate3d(0px, 0px, 0);
  width: 38px;
  height: 38px;
  background: #22d3ee;
  border-radius: 10px;
  animation: import-icon-anim 1465ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes import-icon-anim {
  0% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
  }
  46.08% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  59.73% {
    transform: translate3d(0px, 0px, 0) scale(1.029, 1.029);
    opacity: 1;
  }
  80.2% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.import-title {
  transform: translate3d(0px, 0px, 0);
  height: 22px;
  background: #00000000;
  color: #eceef4;
  font-size: 16px;
  font-weight: 700;
  animation: import-title-anim 1465ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes import-title-anim {
  0% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
  }
  49.15% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  62.8% {
    transform: translate3d(0px, 0px, 0) scale(1.029, 1.029);
    opacity: 1;
  }
  83.28% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.import-line {
  transform: translate3d(0px, 0px, 0);
  height: 8px;
  background: #272c3a;
  border-radius: 999px;
  animation: import-line-anim 1465ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes import-line-anim {
  0% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
  }
  52.22% {
    transform: translate3d(0px, 0px, 0) scale(0, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  65.87% {
    transform: translate3d(0px, 0px, 0) scale(1.029, 1.029);
    opacity: 1;
  }
  86.35% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .canvas-tile,
  .timeline-tile,
  .easing-tile,
  .states-tile,
  .export-tile,
  .import-tile,
  .canvas-icon,
  .canvas-title,
  .canvas-line,
  .timeline-icon,
  .timeline-title,
  .timeline-line,
  .easing-icon,
  .easing-title,
  .easing-line,
  .states-icon,
  .states-title,
  .states-line,
  .export-icon,
  .export-title,
  .export-line,
  .import-icon,
  .import-title,
  .import-line {
    animation: none;
    transition: none;
  }
}