iPad Style Hover
A component that creates a subtle hover effect similar to iPadOS, with a background that follows cursor movement and customizable appearance properties.
Make it with Workshop
Build your own component with AI
Description
iPad Hover replicates the distinctive hover effect seen in iPadOS interfaces. When users hover over the component, it displays a subtle background that follows the cursor movement with a slight parallax effect. The component wraps around its children, making it easy to apply this effect to any content.
Use Cases
1. Buttons - Enhanced interactive feedback for clickable elements
2. Navigation Items - Highlight menu options with subtle movement
3. Cards - Add depth to information cards on hover
4. Interactive Elements - Improve user experience for clickable components
5. Touch-Inspired Interfaces - Create iPad-like interfaces on desktop
Customizations
• Hover Color - Background color that appears on hover
• Opacity - Transparency level of the hover effect
• Radius - Corner roundness of the hover background
• Border - Color and thickness of the optional border
• Content - Accepts any child components to wrap with the effect
