Marketing

Three-Plan Pricing

Three plans that pop in, with the featured column raised and hover lifts on every card.

Starter
$0
Pro
$12
Team
$40
18
Elements
4
Groups
3
Hover states
1380ms
Duration
Open this scene in the editorAll templates

Why it is timed this way

The reasoning

Cards land first and their contents follow, so each column reads as a single object being placed rather than seven pieces appearing at once. The middle plan sits higher and is taller: emphasis comes from layout, and the motion just delivers it.

18 elements move, the first at 0ms and the last starting at 480ms — the whole scene settles by 1380ms. Every bar below is one element's animation window.

Starter Name
Starter Price
Starter CTA
Starter Line 1
Pro Name
Starter Line 2
Starter Line 3
Pro Price
Pro Line 1
Pro Line 2
Pro CTA
Pro Line 3
Team Name
Team Line 1
Team Line 2
Team Price
Team Line 3
Team CTA
0ms690ms1380ms

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.

584 lines
.pricing {
  transform: translate3d(0px, 0px, 0);
  width: 960px;
  height: 480px;
  transform-origin: 452px 240.5px;
}

.starter-card {
  transform: translate3d(0px, 0px, 0);
  height: 207px;
  background: #171a24;
  transform-origin: 136px 131.5px;
}

.pro-card {
  transform: translate3d(0px, 0px, 0);
  height: 207px;
  background: #1f2331;
  transform-origin: 136px 131.5px;
}

.team-card {
  transform: translate3d(0px, 0px, 0);
  height: 207px;
  background: #171a24;
  transform-origin: 136px 131.5px;
}

.starter-name {
  transform: translate3d(0px, 0px, 0);
  height: 22px;
  background: #00000000;
  color: #98a1b5;
  font-size: 15px;
  font-weight: 600;
  animation: starter-name-anim 1380ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes starter-name-anim {
  0% {
    transform: translate3d(0px, 48px, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  50.72% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.starter-price {
  transform: translate3d(0px, 0px, 0);
  height: 46px;
  background: #00000000;
  color: #eceef4;
  font-size: 40px;
  font-weight: 800;
  animation: starter-price-anim 1380ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes starter-price-anim {
  0% {
    transform: translate3d(0px, 48px, 0);
    opacity: 0;
  }
  4.35% {
    transform: translate3d(0px, 48px, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  55.07% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.starter-line-1 {
  transform: translate3d(0px, 0px, 0);
  width: 180px;
  height: 9px;
  background: #272c3a;
  border-radius: 999px;
  animation: starter-line-1-anim 1380ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes starter-line-1-anim {
  0% {
    opacity: 0;
  }
  13.04% {
    opacity: 0;
    animation-timing-function: ease-out;
  }
  56.52% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.starter-line-2 {
  transform: translate3d(0px, 0px, 0);
  width: 148px;
  height: 9px;
  background: #272c3a;
  border-radius: 999px;
  animation: starter-line-2-anim 1380ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes starter-line-2-anim {
  0% {
    opacity: 0;
  }
  15.22% {
    opacity: 0;
    animation-timing-function: ease-out;
  }
  58.7% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.starter-line-3 {
  transform: translate3d(0px, 0px, 0);
  width: 164px;
  height: 9px;
  background: #272c3a;
  border-radius: 999px;
  animation: starter-line-3-anim 1380ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes starter-line-3-anim {
  0% {
    opacity: 0;
  }
  17.39% {
    opacity: 0;
    animation-timing-function: ease-out;
  }
  60.87% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.starter-cta {
  transform: translate3d(0px, 0px, 0);
  height: 42px;
  background: #1f2331;
  border-radius: 10px;
  color: #eceef4;
  font-size: 14px;
  font-weight: 600;
  transition: transform 200ms ease-out, background 200ms ease-out;
  animation: starter-cta-anim 1380ms linear 0ms infinite both;
  will-change: transform, opacity;
}

.starter-cta:hover {
  transform: translate3d(28px, 190px, 0);
  background: #272c3a;
  transition: transform 180ms ease-out, background 180ms ease-out;
}

@keyframes starter-cta-anim {
  0% {
    transform: translate3d(0px, 48px, 0);
    opacity: 0;
  }
  8.7% {
    transform: translate3d(0px, 48px, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  59.42% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.pro-name {
  transform: translate3d(0px, 0px, 0);
  height: 22px;
  background: #00000000;
  color: #98a1b5;
  font-size: 15px;
  font-weight: 600;
  animation: pro-name-anim 1380ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes pro-name-anim {
  0% {
    transform: translate3d(0px, 48px, 0);
    opacity: 0;
  }
  13.04% {
    transform: translate3d(0px, 48px, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  63.77% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.pro-price {
  transform: translate3d(0px, 0px, 0);
  height: 46px;
  background: #00000000;
  color: #eceef4;
  font-size: 40px;
  font-weight: 800;
  animation: pro-price-anim 1380ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes pro-price-anim {
  0% {
    transform: translate3d(0px, 48px, 0);
    opacity: 0;
  }
  17.39% {
    transform: translate3d(0px, 48px, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  68.12% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.pro-line-1 {
  transform: translate3d(0px, 0px, 0);
  width: 180px;
  height: 9px;
  background: #272c3a;
  border-radius: 999px;
  animation: pro-line-1-anim 1380ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes pro-line-1-anim {
  0% {
    opacity: 0;
  }
  19.57% {
    opacity: 0;
    animation-timing-function: ease-out;
  }
  63.04% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.pro-line-2 {
  transform: translate3d(0px, 0px, 0);
  width: 148px;
  height: 9px;
  background: #272c3a;
  border-radius: 999px;
  animation: pro-line-2-anim 1380ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes pro-line-2-anim {
  0% {
    opacity: 0;
  }
  21.74% {
    opacity: 0;
    animation-timing-function: ease-out;
  }
  65.22% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.pro-line-3 {
  transform: translate3d(0px, 0px, 0);
  width: 164px;
  height: 9px;
  background: #272c3a;
  border-radius: 999px;
  animation: pro-line-3-anim 1380ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes pro-line-3-anim {
  0% {
    opacity: 0;
  }
  23.91% {
    opacity: 0;
    animation-timing-function: ease-out;
  }
  67.39% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.pro-cta {
  transform: translate3d(0px, 0px, 0);
  height: 42px;
  background: #6366f1;
  border-radius: 10px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  transition: transform 200ms ease-out, background 200ms ease-out;
  animation: pro-cta-anim 1380ms linear 0ms infinite both;
  will-change: transform, opacity;
}

.pro-cta:hover {
  transform: translate3d(28px, 190px, 0);
  background: #8b7bff;
  transition: transform 180ms ease-out, background 180ms ease-out;
}

@keyframes pro-cta-anim {
  0% {
    transform: translate3d(0px, 48px, 0);
    opacity: 0;
  }
  21.74% {
    transform: translate3d(0px, 48px, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  72.46% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.team-name {
  transform: translate3d(0px, 0px, 0);
  height: 22px;
  background: #00000000;
  color: #98a1b5;
  font-size: 15px;
  font-weight: 600;
  animation: team-name-anim 1380ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes team-name-anim {
  0% {
    transform: translate3d(0px, 48px, 0);
    opacity: 0;
  }
  26.09% {
    transform: translate3d(0px, 48px, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  76.81% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.team-price {
  transform: translate3d(0px, 0px, 0);
  height: 46px;
  background: #00000000;
  color: #eceef4;
  font-size: 40px;
  font-weight: 800;
  animation: team-price-anim 1380ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes team-price-anim {
  0% {
    transform: translate3d(0px, 48px, 0);
    opacity: 0;
  }
  30.43% {
    transform: translate3d(0px, 48px, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  81.16% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.team-line-1 {
  transform: translate3d(0px, 0px, 0);
  width: 180px;
  height: 9px;
  background: #272c3a;
  border-radius: 999px;
  animation: team-line-1-anim 1380ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes team-line-1-anim {
  0% {
    opacity: 0;
  }
  26.09% {
    opacity: 0;
    animation-timing-function: ease-out;
  }
  69.57% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.team-line-2 {
  transform: translate3d(0px, 0px, 0);
  width: 148px;
  height: 9px;
  background: #272c3a;
  border-radius: 999px;
  animation: team-line-2-anim 1380ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes team-line-2-anim {
  0% {
    opacity: 0;
  }
  28.26% {
    opacity: 0;
    animation-timing-function: ease-out;
  }
  71.74% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.team-line-3 {
  transform: translate3d(0px, 0px, 0);
  width: 164px;
  height: 9px;
  background: #272c3a;
  border-radius: 999px;
  animation: team-line-3-anim 1380ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes team-line-3-anim {
  0% {
    opacity: 0;
  }
  30.43% {
    opacity: 0;
    animation-timing-function: ease-out;
  }
  73.91% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.team-cta {
  transform: translate3d(0px, 0px, 0);
  height: 42px;
  background: #1f2331;
  border-radius: 10px;
  color: #eceef4;
  font-size: 14px;
  font-weight: 600;
  transition: transform 200ms ease-out, background 200ms ease-out;
  animation: team-cta-anim 1380ms linear 0ms infinite both;
  will-change: transform, opacity;
}

.team-cta:hover {
  transform: translate3d(28px, 190px, 0);
  background: #272c3a;
  transition: transform 180ms ease-out, background 180ms ease-out;
}

@keyframes team-cta-anim {
  0% {
    transform: translate3d(0px, 48px, 0);
    opacity: 0;
  }
  34.78% {
    transform: translate3d(0px, 48px, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  85.51% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .starter-name,
  .starter-price,
  .starter-line-1,
  .starter-line-2,
  .starter-line-3,
  .starter-cta,
  .pro-name,
  .pro-price,
  .pro-line-1,
  .pro-line-2,
  .pro-line-3,
  .pro-cta,
  .team-name,
  .team-price,
  .team-line-1,
  .team-line-2,
  .team-line-3,
  .team-cta {
    animation: none;
    transition: none;
  }
}

More scenes

Canvas
Timeline
Easing
States
Export
Import

Feature Tile Grid

Six tiles arriving as a wave across the grid, each lifting on hover.

58
motion presets
17
components
12
export formats
0
accounts

Stat Row

Four figures dropping in with a small overshoot.

Frontend engineer
Design systems
It replaced three tools and a
folder of half-finished CSS.

Testimonial Card

A quote card that rises into place, avatar first.