I recently built a dynamic testimonials component for my project at Coloring Maker and wanted to give it a little extra "magic." This is how I did it.

1. The HTML Structure

The structure is quite simple. We need a main wrapper that acts as our "sky" and a series of div elements that will become our hearts.

It is crucial that the main container has the position: relative; and overflow: hidden; properties. This ensures the hearts stay contained within the section and disappear smoothly as they cross the top boundary.

<div class= "relative overflow-hidden min-h-80" style= "position: relative; overflow: hidden; min-height: 20rem; background-color: #f8f9fa;" >

<div class= "heart-animation" > <div class= "heart x1" ></div> <div class= "heart x2" ></div> <div class= "heart x3" ></div> <div class= "heart x16" ></div> </div>

<div style= "position: relative; z-index: 10;" > <h1> Our customers love us! </h1> </div>

</div>

Enter fullscreen mode

Exit fullscreen mode

2.…