Building a Dynamic Word Carousel Card with Pure CSS

A Dynamic Word Carousel Card created with only CSS

I rarely browse Product Hunt, so I was surprised to find myself there today discovering UIverse. While exploring their collection of components, a rotating word carousel caught my eye. Looking at @kennyotsu’s post, I wondered: could I recreate this using just semantic markup and basic CSS?

On my previous v3 Robleto.com homepage (now in v4), I used typewriter text to write and remove the many titles I hold professionally and personally. While I’ve moved away from this design, I wanted to revisit this concept with rotating words, creating a reusable component for my toolkit.

The Idea: A Versatile Role Showcase

This component serves as a dynamic way to display multiple optoinsin a single, elegant space. Using smooth animations, it rotates through different text elements to create an engaging presentation that captures attention while maintaining a clean, professional appearance.

The Process: HTML and CSS Magic

HTML

The structure is elegantly simple — semantic HTML with a div for the card and a rotating <li> list of options.

<div class="card">
  CSS is
  <ul>
    <li>Awesome</li>
    <li>Exhausting</li>
    <li>Frustrating</li>
    <li>Satisfying</li>
    <li>Challenging</li>
    <li>Confusing</li>
    <li>Rewarding</li>
    <li>Overwhelming</li>
    <li>Liberating</li>
    <li>Irritating</li>
  </ul>
</div>

CSS (SCSS)

Using keyframes, I created a smooth word rotation where each title flows naturally into the next. The card maintains a clean, modern aesthetic with a responsive layout.

Key highlights:

• Flexbox for layout and alignment.
• Custom animations via @keyframes for vertical text transitions.
• A basic responsive element for smaller screens.

// Global Variables for colors and text size
$bg-color: #fff;
$highlight: #316FA1;
$text-size: 2.2rem;

body {
  background: lighten($highlight, 40%);
  background-image: repeating-linear-gradient(45deg, rgba(#FFF, .1), rgba(#FFF, .1) 30px, transparent 0, transparent 60px);
  font-size: $text-size;
  font-weight: 600;
  font-family: 'Bebas Neue', sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 0.3rem;
  padding: 5rem 3rem;
  box-shadow: 0 5px 5px #0005;
  
}

// Animated List
.card ul {
  overflow: hidden;
  position: relative;
  font-size: $text-size;
  height: ($text-size + ($text-size * 0));
}

// List items
li {
  display: block;
  height: 100%;
  padding-left: .5rem;
  color: $highlight;
  animation: rotate-the-words 10s infinite;
}


// Responsive stacking for small screens
@media (max-width: 600px) {
  .card {
    flex-direction: column;
  }
}

// Animated vertical list rotation
@keyframes rotate-the-words {
  0% { transform: translateY(100%); }
  2%, 10% { transform: translateY(-0%); }
  12%, 20% { transform: translateY(-100%); }
  /* and so on */
}

The Result: A Reusable, Elegant Component

The final product is a clean, visually dynamic card where items rotate smoothly to capture attention without overwhelming the viewer. It’s perfect for:

• Portfolio sites: Highlight your skills in a compact, polished design.
• Landing pages: Showcase key features, product benefits, or roles.
• Storytelling elements: Use text animations to guide the narrative.

The best part?

It’s pure CSS — no JavaScript bloat, just clean, efficient code.

What I Learned

• Revisiting CSS’s capabilities reminded me that simple solutions often deliver the strongest impact.
• Working with keyframes creatively and combining text animations with flexible layouts sparked ideas for similar components.
• Best of all, it’s deeply satisfying to create something both visually appealing and functional.

Try It Yourself

The code is lightweight, customizable, and ready for your own creative spin. Want faster animations? Adjust the duration. Need more roles? Simply add more <li> tags.

Here’s the Pen for you to explore: Dynamic Word Carousel Card on CodePen
(Feel free to fork, tweak, and make it yours!)

Let’s keep the creative coding momentum going. What small idea can you transform into something remarkable today?

Key Takeaway

This isn’t just a rotating list; it’s a demonstration of how clean design and simple CSS can tell a story. Whether it’s your roles, features, or favorite quotes, the possibilities are endless.

More abstracted takeaway… it’s good to explore, sometimes inspiration comes from the most unexpected places.

Disclaimer: As always, all thoughts are my own and not my employer, who does not pay me to code my feelings about CSS that I probably should just be sharing in therapy instead of in a CodePen solution. Thanks to Kenny Otsu for the inspiration. While they do look a lot alike, once reverse-engineered, every line of code was crafted by hand by Greg Robleto.

Greg Robleto — robleto.com