Components
3D Adaptive Navigation Bar
A stunning 3D navigation component with ultra-realistic depth, lighting, and material effects. Features:
• Premium 3D design with photorealistic shadows and gradients • Smooth hover-to-expand interaction with staggered animations • Click-to-select behavior with automatic collapse • Elegant text transitions with subtle lighting pulses • Fully responsive and optimized for modern web apps • Built with React, TypeScript, and Framer Motion
import { PillBase } from '@/components/ui/3d-adaptive-navigation-bar'
/**
* Demo file - Default export is required
* This is what users and moderators see in preview
*/
export default function Demo() {
return (
<div
style={{
background: '#ffffff',
minHeight: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<PillBase />
</div>
)
}