3D Door

1npm install next-transition-router gsap

1'use client'
2
3import { useRef } from 'react'
4import { TransitionRouter } from 'next-transition-router'
5import gsap from 'gsap'
6
7export default function DoorProvider({ children }: { children: React.ReactNode }) {
8  const wrapperRef = useRef<HTMLDivElement>(null)
9
10  return (
11    <div style={{
12      perspective: '1500px',
13      perspectiveOrigin: 'center center',
14      overflow: 'hidden',
15    }}>
16      <TransitionRouter
17        auto
18        leave={(next) => {
19          const tl = gsap.timeline({ onComplete: next })
20          const wrapper = wrapperRef.current
21
22          // Door swings open (rotates on left edge)
23          tl.to(wrapper, {
24            rotateY: -105,
25            opacity: 0,
26            duration: 0.6,
27            ease: 'power3.in',
28            transformOrigin: 'left center',
29          })
30        }}
31        enter={(next) => {
32          const tl = gsap.timeline({ onComplete: next })
33          const wrapper = wrapperRef.current
34
35          // Door starts closed from right
36          gsap.set(wrapper, {
37            rotateY: 105,
38            opacity: 0,
39            transformOrigin: 'right center',
40          })
41
42          // Door swings closed (into view)
43          tl.to(wrapper, {
44            rotateY: 0,
45            opacity: 1,
46            duration: 0.6,
47            ease: 'power3.out',
48          })
49        }}
50      >
51        <div ref={wrapperRef} style={{ transformStyle: 'preserve-3d' }}>
52          {children}
53        </div>
54      </TransitionRouter>
55    </div>
56  )
57}