Scroll Cards Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306

"use client";

import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Image from "next/image";
import { useRef, useState } from "react";

gsap.registerPlugin(useGSAP, ScrollTrigger);

interface CardItem {
  title: string;
  copy: string;
  imgUrl: string;
  bgColor: string;
  textColor: string;
  accentHex: string;
  themeColor: string; // Tailwind class
  statLabel?: string;
}

const cardsData: CardItem[] = [
  {
    title: "PLAN & CONCEPT",
    copy: "Aligning architectural frameworks with dynamic visual assets to establish high-fidelity mockups.",
    imgUrl: "/Untitled design.png",
    bgColor: "bg-white",
    textColor: "text-[#2a2a2a]",
    accentHex: "229, 91, 60", // orange
    themeColor: "bg-wtf-orange",
  },
  {
    title: "CREATIVE SYSTEM",
    copy: "Constructing interactive color tokens, asymmetric border structures, and custom tactile overlays.",
    imgUrl: "/Untitled design (1).png",
    bgColor: "bg-white",
    textColor: "text-[#2a2a2a]",
    accentHex: "12, 147, 103", // green
    themeColor: "bg-wtf-green",
  },
  {
    title: "MOTION PHYSICS",
    copy: "Leveraging spring momentum and coordinate-based tracking to create reactive web experiences.",
    imgUrl: "/Untitled design (2).png",
    bgColor: "bg-white",
    textColor: "text-[#2a2a2a]",
    accentHex: "241, 179, 51", // yellow
    themeColor: "bg-wtf-yellow",
  },
  {
    title: "DEPLOY ENGINE",
    copy: "Bundling static layouts and hydration-safe route pipelines to execute at 60 frames per second.",
    imgUrl: "/Untitled design (3).png",
    bgColor: "bg-white",
    textColor: "text-[#2a2a2a]",
    accentHex: "103, 88, 165", // purple
    themeColor: "bg-wtf-purple",
  },
];

export default function ScrollCardsPage() {
  const containerRef = useRef<HTMLDivElement>(null);
  const [activeStep, setActiveStep] = useState(0);

  useGSAP(
    () => {
      const cardEls = gsap.utils.toArray<HTMLElement>(".scroll-card-item");
      if (cardEls.length === 0) return;

      const scroller = containerRef.current?.closest("#main-scroller") || undefined;

      cardEls.forEach((card, index) => {
        // Calculate dynamic pin durations so all cards remain pinned until the last card finishes
        const cardHeight = window.innerHeight * 0.65;
        const baseDuration = 450;
        const pinDuration =
          (cardEls.length - 1 - index) * cardHeight + baseDuration;

        // Pin each card container in place
        ScrollTrigger.create({
          trigger: card,
          scroller: scroller,
          start: "top top",
          end: `+=${pinDuration}`,
          pin: true,
          pinSpacing: false,
          onToggle: (self) => {
            if (self.isActive) {
              setActiveStep(index);
            }
          },
        });
      });
    },
    { scope: containerRef },
  );

  const { contextSafe } = useGSAP({ scope: containerRef });

  // 3D Card Perspective Tilt
  const handleMouseMove = contextSafe((e: React.MouseEvent<HTMLDivElement>) => {
    const card = e.currentTarget;
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    // Set custom coordinates on card for pointer spotlight
    card.style.setProperty("--mouse-x", `${x}px`);
    card.style.setProperty("--mouse-y", `${y}px`);

    const rotateY = ((x - rect.width / 2) / (rect.width / 2)) * 6;
    const rotateX = -((y - rect.height / 2) / (rect.height / 2)) * 6;

    gsap.to(card, {
      rotateX: rotateX,
      rotateY: rotateY,
      transformPerspective: 1000,
      ease: "power1.out",
      duration: 0.35,
      overwrite: "auto",
    });

    // Image offset push
    const img = card.querySelector(".inner-img-frame img");
    if (img) {
      const moveX = ((x - rect.width / 2) / rect.width) * 12;
      const moveY = ((y - rect.height / 2) / rect.height) * 12;
      gsap.to(img, {
        x: moveX,
        y: moveY,
        scale: 1.06,
        duration: 0.4,
        ease: "power1.out",
        overwrite: "auto",
      });
    }
  });

  // Reset 3D Tilt
  const handleMouseLeave = contextSafe(
    (e: React.MouseEvent<HTMLDivElement>) => {
      const card = e.currentTarget;
      gsap.to(card, {
        rotateX: 0,
        rotateY: 0,
        ease: "elastic.out(1.1, 0.4)",
        duration: 0.8,
        overwrite: "auto",
      });

      const img = card.querySelector(".inner-img-frame img");
      if (img) {
        gsap.to(img, {
          x: 0,
          y: 0,
          scale: 1.0,
          duration: 0.6,
          ease: "power2.out",
          overwrite: "auto",
        });
      }
    },
  );

  return (
    <div
      className="relative min-h-screen bg-[#f0eadf] text-[#2a2a2a] flex flex-col selection:bg-wtf-yellow selection:text-black overflow-x-hidden font-sans"
      ref={containerRef}
    >
      {/* Tactile Grids */}
      <div className="absolute inset-0 dot-grid opacity-15 pointer-events-none z-0" />
      <div className="absolute inset-0 noise-overlay pointer-events-none z-10" />

      {/* Floating Dashboard Back Button */}
      <div className="fixed top-6 left-6 z-50 pointer-events-auto">
        <button
          onClick={() =>
            window.history.length > 1
              ? window.history.back()
              : (window.location.href = "/")
          }
          className="brutalist-btn bg-wtf-yellow text-xs font-mono font-bold py-2.5 px-4 rounded-md uppercase cursor-pointer"
        >
          ← Back
        </button>
      </div>

      {/* Page Heading readout (absolute right) */}
      <div className="absolute top-6 right-6 z-30 flex flex-col items-end gap-1 select-none text-right">
        <span className="font-mono text-[10px] font-bold text-zinc-500 uppercase tracking-widest border border-zinc-300 bg-white px-2 py-0.5 rounded">
          Component 16
        </span>
        <h1 className="font-serif font-black text-lg uppercase text-[#2a2a2a]">
          Stacking Cards
        </h1>
      </div>

      {/* Left-Side Fixed Progress Gauge (Only desktop) */}
      <div className="hidden lg:flex fixed left-10 top-1/2 -translate-y-1/2 z-40 flex-col items-center gap-6 select-none pointer-events-none">
        <div className="w-[4px] h-48 bg-zinc-300 relative rounded">
          {/* Active progress fill line */}
          <div
            className="absolute top-0 left-0 w-full bg-[#2a2a2a] rounded transition-all duration-300"
            style={{
              height: `${(activeStep / (cardsData.length - 1)) * 100}%`,
            }}
          />
        </div>
        <div className="flex flex-col gap-5 items-center font-mono text-[10px] font-bold">
          {cardsData.map((card, idx) => (
            <div
              key={idx}
              className={`w-9 h-9 rounded-full border-2 border-[#2a2a2a] flex items-center justify-center transition-all duration-300 shadow-[2px_2px_0px_#2a2a2a] ${
                idx === activeStep
                  ? `${card.themeColor} text-white scale-110`
                  : "bg-white text-zinc-400"
              }`}
            >
              0{idx + 1}
            </div>
          ))}
        </div>
      </div>

      {/* Cards List Section directly (no intro or outro sections) */}
      <section className="relative w-full flex flex-col z-20 pt-28 pb-48">
        {cardsData.map((card, index) => (
          <div
            key={index}
            className="scroll-card-item relative w-full h-[65vh] flex justify-center items-center px-4 md:px-8"
            id={`card-${index + 1}`}
          >
            <div
              onMouseMove={handleMouseMove}
              onMouseLeave={handleMouseLeave}
              className={`scroll-card-inner brutalist-card w-full max-w-4xl p-6 md:p-10 flex flex-col md:flex-row gap-6 md:gap-10 items-center select-none cursor-pointer rounded-2xl will-change-transform relative overflow-hidden ${card.bgColor} ${card.textColor}`}
              style={{
                top: `${index * 44}px`,
                transformStyle: "preserve-3d",
                transform: "perspective(1000px) rotateX(0deg) rotateY(0deg)",
              }}
            >
              {/* Radial Pointer spotlight glow */}
              <div
                className="absolute inset-0 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-2xl z-0"
                style={{
                  background: `radial-gradient(280px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(${card.accentHex}, 0.08), transparent 85%)`,
                }}
              />

              {/* Step info on left */}
              <div className="flex-1 flex flex-col gap-3 relative z-10">
                <div className="flex items-center gap-2">
                  <span className="font-mono text-xs opacity-50 uppercase tracking-widest">
                    [ Step 0{index + 1} ]
                  </span>
                  <span
                    className={`inline-block border border-[#2a2a2a] px-2 py-0.5 rounded-full text-[8px] font-mono font-bold text-white uppercase ${card.themeColor}`}
                  >
                    ACTIVE
                  </span>
                </div>
                <h3 className="text-2xl md:text-4xl font-serif font-black uppercase tracking-tight leading-none text-[#2a2a2a]">
                  {card.title}
                </h3>
                <p className="font-sans font-medium text-xs md:text-sm leading-relaxed text-zinc-650 mt-2">
                  {card.copy}
                </p>

                {/* Spec details readout */}
                <div className="border border-zinc-200 bg-zinc-50 p-2.5 rounded-xl flex items-center justify-between font-mono max-w-[200px] mt-2 shadow-[2px_2px_0px_#2a2a2a]">
                  <div className="flex flex-col">
                    <span className="text-[7px] text-zinc-400 font-bold">
                      METRIC INDEX
                    </span>
                    <span className="text-[9px] font-black text-[#2a2a2a]">
                      {card.statLabel || "NODE CHECK // OK"}
                    </span>
                  </div>
                  <span
                    className={`h-2.5 w-2.5 rounded-full border border-black animate-pulse ${card.themeColor}`}
                  />
                </div>
              </div>

              {/* Framed Image on right */}
              <div
                className="inner-img-frame w-full md:w-80 h-48 md:h-56 relative rounded-xl border-3 border-[#2a2a2a] overflow-hidden shadow-[4px_4px_0px_#2a2a2a] flex-shrink-0 z-10"
                style={{ transform: "translateZ(15px)" }}
              >
                <Image
                  src={card.imgUrl}
                  alt={card.title}
                  fill
                  sizes="320px"
                  className="object-cover transition-transform duration-300"
                />
              </div>
            </div>
          </div>
        ))}
      </section>
    </div>
  );
}