Beta

Circle Cards

Circle cards, animated on scroll with circle movement.

Installation

Usage

 <CircleCards spacerClassName="w-full h-[500px]">
      <CircleCardsWrapper yOutput={[0, 500]}>
        <CircleItem outputRange={[30, -20]} inputRange={[0, 0.4]}>
          <CircleCard>
            <img
              src="https://pkmncards.com/wp-content/uploads/sv6-5_en_066_std.jpg"
              width={431}
              height={603}
              className="object-contain max-w-full max-h-full h-full w-full"
              alt="pokemon card"
            />
          </CircleCard>
        </CircleItem>
      <CircleCardsWrapper>
  </CircleCards>

Props

CircleCards

PropTypeDefault
spacerClass?
ClassValue
h-70
offset?
ScrollOffset
["start start", "end end"]

CircleCardsWrapper

PropTypeDefault
yOutput?
number[]
-

CircleItem

PropTypeDefault
inputRange?
MapInputRange
[0, 1]
outputRange?
number
[30, -30]