Cosmic Tilt
Cosmic tilt pricing section with 3D perspective effects.
Main Features of Cosmic Tilt
How to Use Cosmic Tilt in Next.js
Installation Guide for Cosmic Tilt
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
plans | Array<{name: string, price: number, features?: string[]}> | [] | Array of pricing plans with name, price, and optional features. |
features | string[] | [] | Array of feature strings to display. |
backgroundColor | string | #0B0B0F | Background color (hex, rgb, or hsl). |
patternColor | string | rgba(255,255,255,0.03) | Grid pattern color. |
glowColor | string | rgba(147, 51, 234, 0.2) | Glow effect color. |
cardBgFromColor | string | rgba(255,255,255,0.1) | Card gradient start color. |
cardBgToColor | string | rgba(255,255,255,0.05) | Card gradient end color. |
cardBorderColor | string | rgba(255,255,255,0.1) | Card border color. |
titleColor | string | #c084fc | Title text color. |
priceColor | string | #ffffff | Price text color. |
featureColor | string | rgba(196, 181, 253, 0.7) | Feature text color. |
featureDotColor | string | #a855f7 | Feature dot color. |
buttonBgColor | string | #ffffff | Button background color. |
buttonTextColor | string | #000000 | Button text color. |
buttonShadowColor | string | rgba(255,255,255,0.3) | Button shadow color. |
buttonText | string | Launch | Button text. |
Related Components
When to Use
Perfect for deep-tech brands, space exploration sites, and Next.js applications that want a mysterious, the volumetric feel. Use this React component for a cosmic-themed pricing section with 3D tilt effects and glowing card borders.
Best Practices
Maintain scalable component architecture by keeping foreground text bright and readable. Follow React best practices by pairing this with dark-themed layouts. Optimize for performance by managed the transition effects for mobile views.
Why This Component Matters in Modern UI Development
3D tilt effects increase the perceived value and interactivity of a digital interface. This production-ready component helpsคุณ build an interface that feels deep and tangible, turning standard pricing into an interactive 3D experience.
Frequently Asked Questions
QHow does the tilt work?
It uses Framer Motion's `useMotionValue` and `useTransform` to rotate the card on the X and Y axes based on the mouse position.
QCan I adjust the tilt intensity?
The internal rotation curves are tuned for a subtle, premium feel, but can be easily amplified for a more dramatic 'gaming' look.
QIs it mobile friendly?
On mobile, the tilt is typically disabled or reduced to a static hover state to ensure usability on touch devices.