Animation & Tech Brief

// App.tsx: smooth momentum scrolling, synced to GSAP's ticker
import Lenis from "lenis";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

const lenis = new Lenis({ lerp: 0.09, smoothWheel: true });
lenis.on("scroll", ScrollTrigger.update);
gsap.ticker.add((time) => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0);

// Kinetic hero: masked line-by-line reveal (Framer Motion)
const EASE = [0.22, 1, 0.36, 1];

{lines.map((line, i) => (
  <span className="block overflow-hidden" key={line}>
    <motion.span
      className="block"
      initial={{ y: "115%" }}
      animate={{ y: 0 }}
      transition={{ duration: 0.95, delay: 0.25 + i * 0.14, ease: EASE }}
    >
      {line}
    </motion.span>
  </span>
))}

// Parallax depth: background drifts slower than foreground UI
const { scrollYProgress } = useScroll({
  target: sectionRef,
  offset: ["start end", "end start"],
});
const phoneY = useTransform(scrollYProgress, [0, 1], [70, -70]);
const chipY  = useTransform(scrollYProgress, [0, 1], [140, -60]);
const blobY  = useTransform(scrollYProgress, [0, 1], [0, -110]);

<motion.div style={{ y: phoneY }}><PhoneMockup /></motion.div>

// Scroll-scrub route drawing: GSAP ScrollTrigger + MotionPath
gsap.registerPlugin(ScrollTrigger, MotionPathPlugin);

const len = path.getTotalLength();
gsap.set(path, { strokeDasharray: len, strokeDashoffset: len });

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: section,       // the map section element
    start: "top 72%",       // begin when section top hits 72% viewport
    end: "bottom 62%",      // finish near the section bottom
    scrub: 1,               // 1s catch-up smoothing; butter, not jitter
  },
});
tl.to(path, { strokeDashoffset: 0, ease: "none" }, 0);
tl.to(dot, {
  motionPath: { path, align: path, alignOrigin: [0.5, 0.5] },
  ease: "none",
}, 0);
tl.to(pins, { opacity: 1, scale: 1, stagger: 0.18, ease: "back.out(2.2)" }, 0.08);

// Looping explainer: lottie-react with a self-hosted JSON
import Lottie from "lottie-react";

const [data, setData] = useState(null);
useEffect(() => {
  fetch("/lottie/delivery.json")   // drop any LottieFiles JSON in /public/lottie
    .then((r) => r.json())
    .then(setData);
}, []);

<Lottie animationData={data} loop autoplay className="h-64 w-full" />

// Fallback pattern: pure SVG + Framer Motion loops (see src/components/StepAnims.tsx)
<motion.path
  initial={{ pathLength: 0 }}
  animate={{ pathLength: [0, 1, 1] }}
  transition={{ duration: 3, repeat: Infinity, repeatDelay: 0.7 }}
/>

/* Editorial marquee: pure CSS, pauses on hover */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* content is duplicated once */
}
.animate-marquee { animation: marquee 48s linear infinite; }
.marquee-paused:hover .animate-marquee { animation-play-state: paused; }