Stacking Cards

DemoCode

Open in

Scroll down ↓

The Guiding Light

Lighthouses have stood as beacons of hope for centuries, guiding sailors safely through treacherous waters. Their glowing light and towering presence serve as a reminder of humanity’s connection to the sea.

Life Beneath the Waves

From shimmering schools of fish to solitary hunters, the ocean is home to an incredible variety of marine life. Each species plays a vital role in maintaining the balance of underwater ecosystems.

Alone on the Open Sea

Drifting across the endless horizon, traveling alone on the sea is a test of courage and resilience. With nothing but the waves and the sky, solitude becomes both a challenge and a source of deep reflection.

The Art of Sailing

Harnessing the power of the wind, sailing is both a skill and an adventure. Whether racing across the waves or leisurely cruising, it’s a timeless way to explore the vast blue expanse.

The Era of Whaling

Once a thriving industry, whale hunting shaped economies and cultures across the world. Today, efforts to protect these majestic creatures highlight the shift toward conservation and respect for marine life.

fancy

npx shadcn@latest add "https://fancycomponents.dev/r/stacking-cards.json"

Wrap StackingCards around the content you want to animate and StackingCardItem around each card you want to animate. The structure looks like this:

<StackingCards>
  <StackingCardItem>
      {/* Your card go here */}
  </StackingCardItem>
</StackingCards>

The component utilizes scroll progress to determine the scale of each element. The first element has the highest scale multiplier, making it the smallest when it reaches the bottom of the container's scroll area, while the last element follows the opposite pattern, creating a layered effect.

To achieve this, I use each element's index to calculate its scale multiplier. Just simple as that! 😀

• By default, this component uses the window to track scroll progress. However, in some cases, you may want to wrap it inside another scrollable container. To achieve this, simply define the container for useScroll from motion. In the Demo above, I defined the containerRef and passed it to the scrollOptions prop of the StackingCards component.

• To ensure StackingCardItem works correctly, you need to define its height. This allows the wrapper to have a larger height than the card itself, ensuring that the topPosition functions properly.

StackingCards

StackingCardItem