Magnetic Tilt Button
A production-ready magnetic tilt button component for your Next.js application. Accessible, customizable, and built with modern standards.
Premium Magnetic Tilt Button
A 3D, pointer‑reactive button designed for premium actions. The surface tilts toward the cursor with spring‑smoothed physics and adds a specular highlight and thin etched light beam for a refined gloss effect.
- Motion: Spring smoothed tilt based on pointer position.
- Lighting: Specular glint follows pointer in 3D.
- Depth: Content moves on a separate z‑layer for real depth.
- Checkout confirmation surfaces
- Premium call‑to‑action bars
- Download/authenticated actions
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | — | Custom className for the button. |
| children | ReactNode | — | Button label; defaults to 'Secure Access'. |
| motionProps | React.ComponentPropsWithoutRef<typeof motion.button> | — | All Framer Motion button props are supported (whileTap, onClick, etc.). |
Most components here are inspired by outstanding libraries and creators in the ecosystem. I don’t claim to be the original author — this is my space for learning, rebuilding, and understanding great work at a deeper level.
I’m still a student of the craft, constantly studying the best and translating what I learn through my own perspective. Every piece reflects curiosity, respect for the community, and small creative touches that feel true to me.
I’ve done my best to credit inspirations properly. If anything is missing or inaccurate, I truly appreciate a message so it can be corrected with care.