Blenra
Optimized for: Gemini / ChatGPT / Claude

Advanced Prompt for Sticky Reveal Stacking Card Components

Use this engineered prompt to drastically optimize your workflow and output.

Required Variables

  • [CARD_COUNT]
  • [STACK_SPACING]
  • [SCALE_FACTOR]
  • [OPACITY_GRADIENT]
sticky-reveal-stacking-cards-framer-motion.txt
Create an advanced 'Stacking Cards' scroll interaction in React using Framer Motion. As the user scrolls, [CARD_COUNT] cards should stick to the top of the viewport one by one, with subsequent cards appearing to slide over the previous ones. Use useTransform to reduce the scale of underlying cards to [SCALE_FACTOR] and apply an [OPACITY_GRADIENT] as they are covered. Implement a logic where each card's 'top' position is offset by [STACK_SPACING] pixels. Use the 'whileInView' prop for initial entry and 'useScroll' for the stacking transition logic. Ensure the container has enough padding to account for the sticky duration.

Example Output

"The AI will produce a layout where cards stack on top of each other during scroll, with the previous card shrinking and dimming to create a sense of depth and focus on the current item."