Spring Physics
Smooth magnetic spring with size adaptation on hover.
Main Features of Spring Physics
How to Use Spring Physics in Next.js
Installation Guide for Spring Physics
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | bg-zinc-950 | Background color of the component |
title | string | Spring Physics | Title text displayed |
buttonText | string | Hover Me | Text on the hover button |
inactiveSize | number | 20 | Size of cursor when inactive |
activeSize | number | 80 | Size of cursor when active |
springDamping | number | 25 | Spring animation damping |
springStiffness | number | 400 | Spring animation stiffness |
borderColor | string | border-zinc-500 | Border color of the cursor |
cursorBackgroundColor | string | bg-white | Background color of the cursor |
className | string | Additional CSS classes |
Related Components
When to Use
Ideal for clean, minimalist modern web applications that want to add a high-end feel to their navigation and buttons. Use this React component when you want a cursor that gently 'sticks' to interactive elements, providing clear visual feedback.
Best Practices
Follow React best practices by setting the `activeSize` to a value that frames the hovered element without obscuring it. Maintain scalable component architecture by using the `springStiffness` and `springDamping` props to match the 'weight' of other animations in your design system. Optimize for performance by using standard DOM elements for the cursor.
Why This Component Matters in Modern UI Development
Spring physics are essential for creating interfaces that feel 'real' and responsive. This production-ready component helps you build a more tactile navigation experience, adding a layer of semantic authority and premium polish to your real-world application architecture.
Frequently Asked Questions
QCan I use it with any HTML element?
Yes, the component uses a 'magnetic' class system that allows it to interact with any element on the page that carries the specified trigger class.
QIs the spring animation adjustable?
Absolutely! You have full control over the stiffness and damping to make the cursor feel either very snappy or smooth and liquid.
QDoes it support custom shapes?
While the default is a circle, the border-radius can be easily modified via the `className` or `style` props to support squares or rounded-rects.