Dimensions
Multi-dimensional landing page with depth and perspective effects.
Main Features of Dimensions
How to Use Dimensions in Next.js
Installation Guide for Dimensions
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
primaryColor | string | #3b82f6 | Primary color for dimensional elements. |
depthIntensity | number | 1 | Intensity of depth/perspective effects (0-2). |
enable3D | boolean | true | Enable 3D transformation effects. |
animationSpeed | number | 1 | Speed of dimensional animations. |
Related Components
Cartoonish
Playful cartoon-style hero section with fun animations and vibrant colors.
Draggable
Interactive hero section with draggable elements and smooth physics-based interactions.
Glass Operating System
Glassmorphism hero section with frosted glass effects and modern OS-inspired design.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QIs the 3D real?
The component features stylized 3D perspective shifts (`enable3D`) that respond to environmental light and scroll position for a deep spatial feel.
QCan I adjust the depth?
Yes, the `depthIntensity` prop allows you to control how 'thick' the dimensional sections appear, ranging from flat grid-work to extreme 3D stacks.
QIs it good for mobile?
The perspective shifts are subtly scaled down on mobile to ensure that text remains legible while maintaining the atmospheric depth.