Setting the file. One moment. Gsap Min
(opens in a new tab)
references/motion-primitives/3d-card-flip/scene.html
HTML·119 lines·3 KB
7 --hg-bg: #0a0a0f;
8 --hg-fg: #f5f5fa;
9 --hg-dim: #6b6b78;
10 }
11 * {
12 margin: 0;
13 padding: 0;
14 box-sizing: border-box;
15 }
16 .card-stage {
17 position: absolute;
18 inset: 0;
19 display: flex;
20 align-items: center;
21 justify-content: center;
22 perspective: 2400px;
23 }
24 .card {
25 position: relative;
26 width: 1000px;
27 height: 580px;
28 transform-style: preserve-3d;
29 will-change: transform;
30 }
31 .face {
32 position: absolute;
33 inset: 0;
34 backface-visibility: hidden;
35 display: flex;
36 align-items: center;
37 justify-content: center;
38 font-weight: 900;
39 font-size: 200px;
40 letter-spacing: -0.04em;
41 border-radius: 24px;
42 box-shadow:
43 0 40px 80px rgba(0, 0, 0, 0.5),
44 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
45 }
46 .face.front {
47 background: linear-gradient(135deg, #1e1b3a 0%, #0a0a0f 100%);
48 color: var(--hg-fg);
49 }
50 .face.back {
51 background: linear-gradient(135deg, #7c3aed 0%, #a855f7 60%, #d946ef 100%);
52 color: var(--hg-fg);
53 transform: rotateY(180deg);
54 }
55 .face .meta {
56 position: absolute;
57 top: 36px;
58 left: 40px;
59 font-family: "JetBrains Mono", monospace;
60 font-weight: 600;
61 font-size: 18px;
62 letter-spacing: 0.16em;
63 opacity: 0.6;
64 }
65 .card-shadow {
66 position: absolute;
67 left: 50%;
68 bottom: 22%;
69 width: 1000px;
70 height: 80px;
71 background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, transparent 70%);
72 transform: translateX(-50%);
73 filter: blur(12px);
74 will-change: opacity, transform;
75 }
76 </style>
77 <div class="card-shadow"></div>
78 <div class="card-stage">
79 <div class="card" id="card">
80 <div class="face front">
81 <div class="meta">v4 · CURRENT</div>
82 PRODUCT
83 </div>
84 <div class="face back">
85 <div class="meta">v5 · LAUNCH</div>
86 v5.0
87 </div>
88 </div>
89 </div>
90 <script>
91 window.__timelines = window.__timelines || {};
92 const tl = gsap.timeline({ paused: true });
93
94 tl.fromTo(
95 "#card",
96 { rotateY: 0, scale: 0.92, opacity: 0 },
97 { rotateY: 0, scale: 1, opacity: 1, duration: 0.45, ease: "power3.out" },
98 0.15,
99 );
100
101 // Hold then flip
102 tl.to("#card", { rotateY: 180, duration: 1.0, ease: "power3.inOut" }, 0.7);
103
104 // Shadow squishes mid-flip
105 tl.to(
106 ".card-shadow",
107 { scaleX: 0.6, opacity: 0.4, duration: 0.5, ease: "power2.inOut" },
108 0.7,
109 );
110 tl.to(".card-shadow", { scaleX: 1, opacity: 0.7, duration: 0.5, ease: "power2.inOut" }, 1.2);
111
112 // Tiny landing settle
113 tl.to("#card", { scale: 1.02, duration: 0.12, ease: "power2.out" }, 1.68);
114 tl.to("#card", { scale: 1, duration: 0.3, ease: "elastic.out(1, 0.5)" }, 1.8);
115
116 window.__timelines["3d-card-flip"] = tl;
117 </script>
118 </div>
119</template>