# 3D Interactive Timeline

> Usage Instructions Install required dependencies: bash npm install framer-motion react-intersection-observer react-icons # or with yarn yarn add framer-motion react-intersection-observer react-icons Make sure you have Tailwind CSS set up in your project. If not, follow the official Tailwind installation guide.  Copy both component files into your project.  Import and use the component:  jsx import TimelineDemo from './path/to/TimelineDemo';  function App() {   return (     <div className="App">       <TimelineDemo />     </div>   ); } Key Features Immersive 3D Effects: Parallax movement and perspective transformations create a sense of depth Interactive Elements: Cards respond to mouse hover with subtle 3D rotations Animated Timeline Nodes: Visual indicators pulse when active Responsive Design: Adapts beautifully from mobile to desktop Customizable: Easy theming via props for colors and styling Performance Optimized: Uses Intersection Observer for efficient rendering Animated Backgrounds: Subtle floating elements create depth Dynamic Content Reveal: Description text expands on interaction Image Support: Optional image display with hover effects Accessibility: Proper keyboard navigation and semantic markup This timeline component creates an immersive storytelling experience that will captivate users with its depth, interactivity, and visual polish.

- Author: [Dhileep Kumar GM](https://21st.dev/@dhileepkumargm)
- License: unknown
- npm dependencies: framer-motion, react-intersection-observer
- Live preview: https://21st.dev/@dhileepkumargm/components/3d-interactive-timeline

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhileepkumargm/3d-interactive-timeline?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt