Rotate3D — This is a 3D Interactive Component.

This is a 3D Interactive Component that transforms any child element into an interactive 3D object that responds to mouse movement. Here’s a comprehensive description: Core Functionality: The component creates a 3D transformation effect on its content, allowing users to rotate and manipulate objects in 3D space using mouse interactions. It supports two interaction modes: drag-to-rotate and hover-to-follow. Key Features: 1. Dual Interaction Modes: - Drag Mode (default): Click and drag to manually rotate the object in any direction with full 360-degree rotation capability - Hover Mode: The object automatically follows your cursor position across the entire viewport, creating a dynamic tracking effect 2. Customizable Controls: - Sensitivity (0.1-5): Adjusts how responsive the rotation is to mouse movement - higher values create more dramatic rotations - Dragging Toggle: Switch between drag-to-rotate and hover-to-follow modes - Rotation Limit (0-180°): Sets maximum rotation angles (though currently allows 360° rotation in practice) - Perspective (100-3000px): Controls the 3D depth effect - lower values create more dramatic perspective, higher values create subtler effects 3. Initial Positioning: - Set starting X and Y rotation angles (-180° to 180°) to position your object at a specific angle when the component loads 4. Visual Customization: - Background Color: Fully customizable background (defaults to transparent) - Content Slot: Insert any Framer component or element as the 3D object - Smooth transitions with easing for natural movement 5. Technical Details: - Uses CSS 3D transforms with `preserve-3d` for authentic 3D rendering - Viewport-wide cursor tracking in hover mode for seamless interaction - Minimum 5×5px size ensures visibility on canvas - Overflow hidden to prevent background elements from appearing outside bounds - Optimized with React transitions for performance Use Cases: Perfect for product showcases, interactive cards, portfolio pieces, hero sections, or any element you want to add engaging 3D interactivity to.