3D Cube

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 CubeProvider({ children }: { children: React.ReactNode }) {
8  const wrapperRef = useRef<HTMLDivElement>(null)
9
10  return (
11    <div style={{
12      perspective: '1200px',
13      perspectiveOrigin: 'center center',
14      overflow: 'hidden',
15      minHeight: '100vh',
16    }}>
17      <TransitionRouter
18        auto
19        leave={(next) => {
20          const tl = gsap.timeline({ onComplete: next })
21          const wrapper = wrapperRef.current
22
23          // Vertical cube rotation - rotate UP (rotateX)
24          tl.to(wrapper, {
25            rotateX: 90,
26            y: -100,
27            opacity: 0,
28            duration: 0.6,
29            ease: 'power3.inOut',
30            transformOrigin: 'center top',
31          })
32        }}
33        enter={(next) => {
34          const tl = gsap.timeline({ onComplete: next })
35          const wrapper = wrapperRef.current
36
37          // Coming from below (vertical cube)
38          gsap.set(wrapper, {
39            rotateX: -90,
40            y: 100,
41            opacity: 0,
42            transformOrigin: 'center bottom',
43          })
44
45          // Rotate into view vertically
46          tl.to(wrapper, {
47            rotateX: 0,
48            y: 0,
49            opacity: 1,
50            duration: 0.6,
51            ease: 'power3.inOut',
52          })
53        }}
54      >
55        <div ref={wrapperRef} style={{ transformStyle: 'preserve-3d' }}>
56          {children}
57        </div>
58      </TransitionRouter>
59    </div>
60  )
61}