1Views

0Likes

0Downloads

Code · Live Preview

Componenthtml

/* style.css */
.text-animation {
  font-size: 3rem;
  font-weight: bold;
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
}

.text-animation {
  display: flex;
}

.char {
  display: inline-block;
  animation: wave 1.5s ease-in-out infinite;
}

@keyframes wave {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

Detecting libraries...

Component details

Overview, install command, dependencies, and project links.

// app.js // Wave animation const text = "Build Faster with Codekk"; const element = document.getElementById("animated-text"); const chars = text.split(""); // Create spans for each character with wave animation chars.forEach((char, index) => { const span = document.createElement("span"); span.className = "char"; span.textContent = char === " " ? "\u00A0" : char; span.style.animationDelay = `${index * 0.18}s`; element.appendChild(span); });

Added May 17, 2026

Discussion

Feedback, implementation tips, and usage notes.

0 threads

Component details

Discussion

Comments