Kinetic Type Hero — Playground

{CF} CodeFronts Back to CSS Hero Sections Kinetic Type Hero Pure CSS

Edit any tab — preview updates live

.hs-kin {
  width: 100%;
  min-height: clamp(220px, 28vh, 100vh);
  padding: clamp(20px, 4vh, 60px) clamp(16px, 4vw, 40px);
  background: radial-gradient(60% 60% at 50% 50%, #1a1438, #0a0a14);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #f0eeff; text-align: center;
}
.hs-kin-h {
  margin: 0;
  font-size: clamp(40px, 11vw, 140px);
  font-weight: 900; line-height: 1; letter-spacing: -0.04em;
  display: inline-flex; flex-wrap: wrap; justify-content: center;
}
.hs-kin-h span {
  display: inline-block;
  background: linear-gradient(135deg, #fff 30%, #a78bfa 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: hs-kin-float 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 100ms);
}
.hs-kin-sp { width: 0.4em; }
.hs-kin p { margin: 0; font-size: clamp(11px, 1.5vw, 16px); color: #b8b6d4; }
.hs-kin-cta {
  padding: 9px 20px; border-radius: 7px;
  background: linear-gradient(135deg, #7c6cff, #a78bfa); color: #fff;
  font-size: clamp(11px, 1.5vw, 14px); font-weight: 700;
  text-decoration: none; transition: filter 0.15s;
}
.hs-kin-cta:hover { filter: brightness(1.12); }
@keyframes hs-kin-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-8px) rotate(-2deg); }
  75%      { transform: translateY(4px) rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hs-kin-h span { animation: none; }
}

Live preview Ready