Hero

Launch Hero

A product hero whose copy, buttons and panel arrive in sequence.

Now in beta
Ship motion
that feels right.
Design it, tune it, export the CSS.
11
Elements
6
Groups
2
Hover states
1360ms
Duration
Open this scene in the editorAll templates

Why it is timed this way

The reasoning

The copy leads and the panel follows two hundred milliseconds later, because a reader looks left first. Every element uses the same fade-and-rise — the sequence is doing the work, not a different animation per item, which is what keeps a hero from looking like a slideshow.

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

Eyebrow Label
Headline A
Headline B
Panel Bar
Subhead
Panel Line 1
Primary CTA
Panel Line 2
Secondary CTA
Panel Chip
Panel Chip 2
0ms680ms1360ms

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.

413 lines
.hero {
  transform: translate3d(0px, 0px, 0);
  width: 960px;
  height: 480px;
  transform-origin: 400px 240px;
}

.hero-copy {
  transform: translate3d(0px, 0px, 0);
  height: 272px;
  transform-origin: 210px 136px;
}

.eyebrow {
  transform: translate3d(0px, 0px, 0);
  width: 168px;
  height: 30px;
  background: #1f2331;
  border-radius: 999px;
  transform-origin: 92px 23px;
}

.actions {
  transform: translate3d(0px, 0px, 0);
  width: 276px;
  height: 42px;
  transform-origin: 138px 21px;
}

.panel {
  transform: translate3d(0px, 0px, 0);
  height: 114px;
  background: #171a24;
  border-radius: 18px;
  transform-origin: 146px 83px;
}

.panel-chips {
  transform: translate3d(0px, 0px, 0);
  width: 204px;
  height: 34px;
  transform-origin: 102px 17px;
}

.eyebrow-label {
  transform: translate3d(0px, 0px, 0);
  width: 168px;
  height: 30px;
  background: #00000000;
  color: #8b7bff;
  font-size: 13px;
  font-weight: 600;
  animation: eyebrow-label-anim 1360ms linear 0ms infinite both;
  will-change: transform, opacity;
}

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

.headline-a {
  transform: translate3d(0px, 0px, 0);
  width: 420px;
  height: 52px;
  background: #00000000;
  color: #eceef4;
  font-size: 44px;
  font-weight: 800;
  animation: headline-a-anim 1360ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes headline-a-anim {
  0% {
    transform: translate3d(0px, 48px, 0);
    opacity: 0;
  }
  5.88% {
    transform: translate3d(0px, 48px, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  57.35% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.headline-b {
  transform: translate3d(0px, 0px, 0);
  width: 420px;
  height: 52px;
  background: #00000000;
  color: #8b7bff;
  font-size: 44px;
  font-weight: 800;
  animation: headline-b-anim 1360ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes headline-b-anim {
  0% {
    transform: translate3d(0px, 48px, 0);
    opacity: 0;
  }
  11.76% {
    transform: translate3d(0px, 48px, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  63.24% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.subhead {
  transform: translate3d(0px, 0px, 0);
  width: 420px;
  height: 24px;
  background: #00000000;
  color: #98a1b5;
  font-size: 17px;
  font-weight: 500;
  animation: subhead-anim 1360ms linear 0ms infinite both;
  will-change: transform, opacity;
}

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

.primary-cta {
  transform: translate3d(0px, 0px, 0);
  width: 132px;
  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: primary-cta-anim 1360ms linear 0ms infinite both;
  will-change: transform, opacity;
}

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

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

.secondary-cta {
  transform: translate3d(0px, 0px, 0);
  width: 132px;
  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: secondary-cta-anim 1360ms linear 0ms infinite both;
  will-change: transform, opacity;
}

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

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

.panel-bar {
  transform: translate3d(0px, 0px, 0);
  width: 120px;
  height: 12px;
  background: #6366f1;
  border-radius: 999px;
  animation: panel-bar-anim 1360ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes panel-bar-anim {
  0% {
    transform: translate3d(64px, 0px, 0);
    opacity: 0;
  }
  16.18% {
    transform: translate3d(64px, 0px, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  67.65% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

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

@keyframes panel-line-1-anim {
  0% {
    transform: translate3d(64px, 0px, 0);
    opacity: 0;
  }
  20.59% {
    transform: translate3d(64px, 0px, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  72.06% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

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

@keyframes panel-line-2-anim {
  0% {
    transform: translate3d(64px, 0px, 0);
    opacity: 0;
  }
  25% {
    transform: translate3d(64px, 0px, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  76.47% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.panel-chip {
  transform: translate3d(0px, 0px, 0);
  width: 96px;
  height: 34px;
  background: #1f2331;
  border-radius: 10px;
  animation: panel-chip-anim 1360ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes panel-chip-anim {
  0% {
    transform: translate3d(64px, 0px, 0);
    opacity: 0;
  }
  29.41% {
    transform: translate3d(64px, 0px, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  80.88% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

.panel-chip-2 {
  transform: translate3d(0px, 0px, 0);
  width: 96px;
  height: 34px;
  background: #1f2331;
  border-radius: 10px;
  animation: panel-chip-2-anim 1360ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes panel-chip-2-anim {
  0% {
    transform: translate3d(64px, 0px, 0);
    opacity: 0;
  }
  33.82% {
    transform: translate3d(64px, 0px, 0);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  85.29% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eyebrow-label,
  .headline-a,
  .headline-b,
  .subhead,
  .primary-cta,
  .secondary-cta,
  .panel-bar,
  .panel-line-1,
  .panel-line-2,
  .panel-chip,
  .panel-chip-2 {
    animation: none;
    transition: none;
  }
}

More scenes

Starter
$0
Pro
$12
Team
$40

Three-Plan Pricing

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

Canvas
Timeline
Easing
States
Export
Import

Feature Tile Grid

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

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.