Blenra
Optimized for: Gemini / ChatGPT / Claude

Expert Prompt for 3D Perspective Scroll Rotation Components

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

Required Variables

  • ✦[ROTATION_AXIS]
  • ✦[MAX_DEGREE]
  • ✦[PERSPECTIVE_VALUE]
  • ✦[CONTENT_TYPE]
3d-perspective-scroll-rotation-framer-motion.txt
Construct a 3D transformation component in React using Framer Motion. Target a [CONTENT_TYPE] (e.g., an image or a product card) and apply a scroll-driven [ROTATION_AXIS] rotation. Use useTransform to map scrollYProgress (0 to 1) to a rotation range of 0 to [MAX_DEGREE]. Set the parent container's perspective to [PERSPECTIVE_VALUE]. Include a subtle 'glint' or lighting effect that also changes based on the rotation angle using a dynamic CSS gradient linked to the same scroll progress. Ensure smooth interpolation by wrapping the transform in useSpring with custom stiffness and damping settings.

Example Output

"The AI will output a React component that tilts an element in 3D space as it enters the viewport, creating a professional 'Apple-style' product showcase effect."