"use client"; import React from "react"; import { motion, useTransform, type MotionValue } from "motion/react"; import { Pin } from "@/components/parallax/Pin"; import { Parallax } from "@/components/parallax/Parallax"; import { TRANSITIONS } from "@/lib/animation"; export function WorkSection() { return (
{/* Subtle ambient background */}
{(progress) => }
); } function WorkPinnedContent({ progress }: { progress: MotionValue }) { // Safe to use React hooks here (top-level of a component) const x = useTransform(progress, [0, 1], ["0%", "-400%"]); return (
{/* Section header overlays the sticky area */}
Highlights A scroll-pinned horizontal showcase powered by Lenis + Framer Motion.
{/* Horizontal track */} {/* Edge gradient masks for an infinite feel */}
); } function WorkCard({ title, subtitle, }: { title: string; subtitle: string; }) { return ( {/* Accent background layers with parallax depth */}
{/* Content */}
{title} {subtitle}
{/* Placeholder visual block; replace with Next/Image for real work later */}
Project visual placeholder
{/* Footer */}
Scroll to explore → View case
); }