feat: Implement initial cinematic portfolio UI with animated components and page structure.

2026-03-18 06:45:42 -03:00
1 parent 9d779390e5
commit 2ede7e98f9
@@ -0,0 +1,119 @@
+"use client";
+
+import { useRef, useEffect } from "react";
+
+interface CinematicTextProps {
+  text: string;
+  className?: string;
+  tag?: "h1" | "h2" | "h3" | "p" | "span";
+  delay?: number;
+  splitBy?: "chars" | "words" | "lines";
+}
+
+export default function CinematicText({
+  text,
+  className = "",
+  tag: Tag = "h2",
+  delay = 0,
+  splitBy = "chars",
+}: CinematicTextProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+
+    let cleanup: (() => void) | undefined;
+
+    const setup = async () => {
+      const [{ gsap }, { ScrollTrigger }] = await Promise.all([
+        import("gsap"),
+        import("gsap/ScrollTrigger"),
+      ]);
+
+      gsap.registerPlugin(ScrollTrigger);
+
+      const spans = el.querySelectorAll("[data-char]");
+      if (spans.length === 0) return;
+
+      gsap.set(spans, {
+        opacity: 0,
+        y: 60,
+        rotateX: -90,
+        transformOrigin: "center bottom",
+        transformPerspective: 600,
+      });
+
+      const tl = gsap.timeline({
+        scrollTrigger: {
+          trigger: el,
+          start: "top 80%",
+          toggleActions: "play none none none",
+        },
+      });
+
+      tl.to(spans, {
+        opacity: 1,
+        y: 0,
+        rotateX: 0,
+        duration: 0.8,
+        ease: "back.out(1.2)",
+        stagger: splitBy === "chars" ? 0.02 : splitBy === "words" ? 0.06 : 0.12,
+        delay,
+      });
+
+      cleanup = () => {
+        tl.scrollTrigger?.kill();
+        tl.kill();
+      };
+    };
+
+    void setup();
+
+    return () => {
+      cleanup?.();
+    };
+  }, [text, delay, splitBy]);
+
+  const renderContent = () => {
+    if (splitBy === "chars") {
+      return text.split("").map((char, i) => (
+        <span
+          key={`${char}-${i}`}
+          data-char
+          className="inline-block will-change-transform"
+          style={{ whiteSpace: char === " " ? "pre" : undefined }}
+        >
+          {char === " " ? "\u00A0" : char}
+        </span>
+      ));
+    }
+
+    if (splitBy === "words") {
+      return text.split(" ").map((word, i) => (
+        <span key={`${word}-${i}`} className="inline-block overflow-hidden">
+          <span data-char className="inline-block will-change-transform">
+            {word}
+          </span>
+          {i < text.split(" ").length - 1 && "\u00A0"}
+        </span>
+      ));
+    }
+
+    // lines
+    return text.split("\n").map((line, i) => (
+      <span key={`${line}-${i}`} className="block overflow-hidden">
+        <span data-char className="block will-change-transform">
+          {line}
+        </span>
+      </span>
+    ));
+  };
+
+  return (
+    <div ref={containerRef} className="overflow-hidden">
+      <Tag className={className}>{renderContent()}</Tag>
+    </div>
+  );
+}