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

app/components/cinematic/ScrollProgress.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { motion, useScroll, useSpring, useTransform } from "framer-motion";
+
+export default function ScrollProgress() {
+  const { scrollYProgress } = useScroll();
+  const scaleX = useSpring(scrollYProgress, {
+    stiffness: 100,
+    damping: 30,
+    restDelta: 0.001,
+  });
+
+  const opacity = useTransform(scrollYProgress, [0, 0.02, 0.98, 1], [0, 1, 1, 0]);
+
+  return (
+    <>
+      {/* Top progress bar */}
+      <motion.div
+        className="fixed left-0 right-0 top-0 z-[9995] h-[2px] origin-left bg-[var(--slash)]"
+        style={{ scaleX, opacity }}
+      />
+
+      {/* Side scroll indicator */}
+      <motion.div
+        className="fixed right-6 top-1/2 z-[9994] hidden -translate-y-1/2 lg:block"
+        style={{ opacity }}
+      >
+        <div className="relative h-[120px] w-px bg-[rgba(255,255,255,0.08)]">
+          <motion.div
+            className="absolute left-0 top-0 w-full origin-top bg-[var(--slash)]"
+            style={{
+              scaleY: scrollYProgress,
+              height: "100%",
+            }}
+          />
+          <motion.div
+            className="absolute left-1/2 -translate-x-1/2 rounded-full bg-[var(--slash)]"
+            style={{
+              width: 6,
+              height: 6,
+              top: useTransform(scrollYProgress, [0, 1], ["0%", "100%"]),
+              boxShadow: "0 0 10px rgba(204, 255, 0, 0.5)",
+            }}
+          />
+        </div>
+      </motion.div>
+    </>
+  );
+}