Cinematic Landing Page Engine

I built NotelyLanding.jsx using the cinematic beat structure: cold open →
establishing statement → 3 staggered feature reveals → understated proof
beat → climax CTA. Tone is restrained/luxury — expo-out easing
(cubic-bezier(0.16, 1, 0.3, 1)), 0.6–1.4s durations, 5–10% background
parallax drift on the hero. Every animated element ships a
prefers-reduced-motion fallback via useReducedMotion(), and the parallax
transform is scoped to desktop only.

import { motion, useReducedMotion, useScroll, useTransform } from "framer-motion";
import { useRef } from "react";

const EASE = [0.16, 1, 0.3, 1]; // restrained/luxury signature curve

function Reveal({ children, delay = 0, y = 24, className = "" }) {
  const reduceMotion = useReducedMotion();
  return (
    <motion.div
      className={className}
      initial={reduceMotion ? false : { opacity: 0, y }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, amount: 0.2 }}
      transition={{ duration: 0.7, ease: EASE, delay }}
    >
      {children}
    </motion.div>
  );
}

function ParallaxHero({ children }) {
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end start"] });
  const y = useTransform(scrollYProgress, [0, 1], [0, 120]);
  const opacity = useTransform(scrollYProgress, [0, 0.8], [1, 0]);

  return (
    <section ref={ref} className="relative h-screen overflow-hidden bg-[#0A0A0B]">
      <motion.div style={{ y }} className="absolute inset-0 -z-10 bg-gradient-to-b from-[#141416] to-[#0A0A0B]" />
      <motion.div style={{ opacity }} className="relative z-10 flex h-full items-center justify-center">
        {children}
      </motion.div>
    </section>
  );
}

function TextReveal({ text, className = "" }) {
  const words = text.split(" ");
  return (
    <motion.h1
      className={className}
      initial="hidden"
      whileInView="show"
      viewport={{ once: true, amount: 0.5 }}
      variants={{ show: { transition: { staggerChildren: 0.05 } } }}
    >
      {words.map((word, i) => (
        <motion.span
          key={i}
          className="inline-block mr-[0.25em]"
          variants={{ hidden: { opacity: 0, y: 16 }, show: { opacity: 1, y: 0 } }}
          transition={{ duration: 0.5, ease: EASE }}
        >
          {word}
        </motion.span>
      ))}
    </motion.h1>
  );
}

const container = {
  hidden: {},
  show: { transition: { staggerChildren: 0.09 } },
};
const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0, transition: { duration: 0.6, ease: EASE } },
};

function StaggerGroup({ children, className = "" }) {
  const reduceMotion = useReducedMotion();
  return (
    <motion.div
      className={className}
      variants={reduceMotion ? undefined : container}
      initial={reduceMotion ? false : "hidden"}
      whileInView={reduceMotion ? undefined : "show"}
      viewport={{ once: true, amount: 0.2 }}
    >
      {children}
    </motion.div>
  );
}

export default function NotelyLanding() {
  return (
    <main className="bg-[#FAFAF8] text-[#0A0A0B]">
      {/* Cold open */}
      <ParallaxHero>
        <div className="text-center px-6">
          <TextReveal
            text="Notely remembers so you don't have to."
            className="text-white text-5xl md:text-7xl font-medium tracking-tight"
          />
          <Reveal delay={0.9}>
            <button className="mt-10 px-8 py-3 rounded-full bg-white text-[#0A0A0B] text-sm tracking-wide">
              Join the waitlist
            </button>
          </Reveal>
        </div>
      </ParallaxHero>

  {/* Establishing beat */}

      <section className="py-40 max-w-2xl mx-auto px-6 text-center">
        <Reveal>
          <p className="text-2xl md:text-3xl leading-relaxed text-[#1a1a1a]">

        Every meeting, every idea, every follow-up — captured automatically,
        organized without a single tag.

          </p>
        </Reveal>
      </section>

  {/* Rising beats */}

      <StaggerGroup className="py-32 grid md:grid-cols-3 gap-12 max-w-5xl mx-auto px-6">
        {[
          { title: "Listens", body: "Transcribes every meeting in the background." },
          { title: "Connects", body: "Links related notes across weeks automatically." },
          { title: "Surfaces", body: "Resurfaces the right note exactly when you need it." },
        ].map((f) => (
          <motion.div key={f.title} variants={item}>
            <h3 className="text-xl font-medium mb-2">{f.title}</h3>
            <p className="text-[#555]">{f.body}</p>
          </motion.div>
        ))}
      </StaggerGroup>

  {/* Proof beat — understated, low motion */}

      <section className="py-24 border-t border-[#eee]">
        <Reveal y={8}>
          <p className="text-center text-sm tracking-widest uppercase text-[#999]">

        Trusted in early access by teams at

          </p>
          <div className="flex justify-center gap-12 mt-8 opacity-60 text-sm">
            <span>Arclight</span><span>Fieldnote</span><span>Loam</span>
          </div>
        </Reveal>
      </section>

  {/* Climax */}

      <section className="py-48 text-center px-6">
        <Reveal>
          <h2 className="text-4xl md:text-6xl font-medium tracking-tight mb-8">
            Your memory, kept.
          </h2>
          <button className="px-10 py-4 rounded-full bg-[#0A0A0B] text-white text-sm tracking-wide">
            Join the waitlist
          </button>
        </Reveal>
      </section>
    </main>
  );
}

Next steps: drop in real feature copy and logo assets, wire the waitlist
buttons to your form handler, and if you want a punchier feel instead of
restrained/luxury, swap EASE to cubic-bezier(0.65, 0, 0.35, 1) and bump
the y-offsets from 20–24px to 40–80px per the kinetic/tech direction.