Orchestrated Reveal

Five-phase entrance sequence: eyebrow → headline → body → items → CTA. Each element enters on a calculated offset so the section reads as a single choreographed motion.

Motion One Scroll

Live Preview

Dependencies

Motion v11.11.13

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Orchestrated Reveal — Motion Recipe</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdn.jsdelivr.net/npm/motion@11.11.13/dist/motion.js"></script>
  <style>
    .orch-eyebrow,
    .orch-line,
    .orch-body,
    .orch-item,
    .orch-cta {
      opacity: 0;
    }
    @media (prefers-reduced-motion: reduce) {
      .orch-eyebrow,
      .orch-line,
      .orch-body,
      .orch-item,
      .orch-cta {
        opacity: 1 !important;
        transform: none !important;
      }
    }
  </style>
</head>
<body class="bg-slate-950 text-slate-200 font-sans">

  <!-- Intro -->
  <div class="mx-auto max-w-3xl px-8 pt-20 pb-32 text-center">
    <span class="mb-6 inline-block rounded-full border border-violet-500/20 bg-violet-500/10 px-3.5 py-1 text-[0.7rem] font-semibold uppercase tracking-widest text-violet-400">Orchestrated Reveal</span>
    <h1 class="mb-5 text-5xl font-black leading-[1.08] text-slate-100">Phase-by-phase<br>section entrance.</h1>
    <p class="mx-auto max-w-sm text-base leading-relaxed text-slate-400">Each element enters in sequence: eyebrow → headline → body → features → CTA. Scroll to the sections below to see the choreography.</p>
  </div>

  <!-- Section A — Feature section -->
  <div class="orch-section mx-auto mb-40 max-w-3xl px-8 py-16">
    <div class="grid gap-12 md:grid-cols-2 md:items-center">
      <div>
        <p class="orch-eyebrow mb-4 text-xs font-semibold uppercase tracking-[0.2em] text-violet-400">Ship faster</p>
        <h2 class="mb-5 text-3xl font-black leading-tight text-slate-100 sm:text-4xl">
          <span class="orch-line block">Build the thing.</span>
          <span class="orch-line block text-slate-500">Skip the ceremony.</span>
        </h2>
        <p class="orch-body mb-8 text-base leading-relaxed text-slate-400">One command installs the pattern. Copy the HTML. Done. No build pipeline, no token wrangling, no framework lock-in.</p>
        <a href="#" class="orch-cta inline-flex items-center gap-2 rounded-xl bg-violet-600 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-violet-500">
          Get started
          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
        </a>
      </div>

      <ul class="flex flex-col gap-4">
        <li class="orch-item flex items-start gap-3 rounded-xl border border-slate-800 bg-slate-900 px-5 py-4">
          <span class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-violet-500/15">
            <svg class="h-4 w-4 text-violet-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 8.688c0-.864.933-1.405 1.683-.977l7.108 4.062a1.125 1.125 0 010 1.953l-7.108 4.062A1.125 1.125 0 013 16.81V8.688zM12.75 8.688c0-.864.933-1.405 1.683-.977l7.108 4.062a1.125 1.125 0 010 1.953l-7.108 4.062a1.125 1.125 0 01-1.683-.977V8.688z"/></svg>
          </span>
          <div>
            <p class="text-sm font-semibold text-slate-100">Ready to copy</p>
            <p class="mt-0.5 text-xs leading-relaxed text-slate-500">Pure HTML + Tailwind. No framework, no dependencies.</p>
          </div>
        </li>
        <li class="orch-item flex items-start gap-3 rounded-xl border border-slate-800 bg-slate-900 px-5 py-4">
          <span class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-emerald-500/15">
            <svg class="h-4 w-4 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
          </span>
          <div>
            <p class="text-sm font-semibold text-slate-100">Token-based theming</p>
            <p class="mt-0.5 text-xs leading-relaxed text-slate-500">Maps to your brand tokens in minutes, not hours.</p>
          </div>
        </li>
        <li class="orch-item flex items-start gap-3 rounded-xl border border-slate-800 bg-slate-900 px-5 py-4">
          <span class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-sky-500/15">
            <svg class="h-4 w-4 text-sky-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>
          </span>
          <div>
            <p class="text-sm font-semibold text-slate-100">Semantic &amp; accessible</p>
            <p class="mt-0.5 text-xs leading-relaxed text-slate-500">ARIA roles, keyboard nav, and reduced-motion built in.</p>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <!-- Section B — Stat cards -->
  <div class="orch-section mx-auto mb-40 max-w-3xl px-8 py-16">
    <p class="orch-eyebrow mb-4 text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">By the numbers</p>
    <h2 class="mb-12 text-3xl font-black leading-tight text-slate-100 sm:text-4xl">
      <span class="orch-line block">Results that speak</span>
      <span class="orch-line block text-slate-500">for themselves.</span>
    </h2>
    <div class="grid gap-6 sm:grid-cols-3">
      <div class="orch-item rounded-2xl border border-slate-800 bg-slate-900 px-6 py-8">
        <p class="mb-1 text-4xl font-black text-slate-100">143</p>
        <p class="text-sm font-semibold text-slate-400">CSS snippets</p>
        <p class="mt-2 text-xs text-slate-600">Polished effects, Tailwind-only</p>
      </div>
      <div class="orch-item rounded-2xl border border-slate-800 bg-slate-900 px-6 py-8">
        <p class="mb-1 text-4xl font-black text-slate-100">500+</p>
        <p class="text-sm font-semibold text-slate-400">UI patterns</p>
        <p class="mt-2 text-xs text-slate-600">Sections, components, templates</p>
      </div>
      <div class="orch-item rounded-2xl border border-slate-800 bg-slate-900 px-6 py-8">
        <p class="mb-1 text-4xl font-black text-slate-100">12</p>
        <p class="text-sm font-semibold text-slate-400">Semantic domains</p>
        <p class="mt-2 text-xs text-slate-600">AI-composable by tone &amp; goal</p>
      </div>
    </div>
    <p class="orch-body mt-8 max-w-lg text-sm leading-relaxed text-slate-500">Every pattern is tagged with domain, tone, and UX-goal so AI assistants can compose full page layouts automatically — not just suggest components.</p>
  </div>

  <div class="h-16"></div>

  <script>
    var { animate, inView, stagger } = Motion;
    var EASE   = [0.22, 1, 0.36, 1];
    var SPRING = [0.16, 1, 0.3, 1];

    if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      document.querySelectorAll('.orch-section:not([data-animated])').forEach(function(section) {
        inView(section, function() {
          section.setAttribute('data-animated', '');

          var eyebrow = section.querySelector('.orch-eyebrow');
          var lines   = section.querySelectorAll('.orch-line');
          var body    = section.querySelector('.orch-body');
          var items   = section.querySelectorAll('.orch-item');
          var cta     = section.querySelector('.orch-cta');

          var t = 0;

          // Phase 1: eyebrow
          if (eyebrow) {
            animate(eyebrow, { opacity: [0, 1], y: [10, 0] }, { duration: 0.45, easing: EASE, delay: t });
            t += 0.1;
          }

          // Phase 2: headline lines
          if (lines.length) {
            animate(lines, { opacity: [0, 1], y: [16, 0] }, {
              duration: 0.55,
              easing: SPRING,
              delay: stagger(0.1, { startDelay: t }),
            });
            t += lines.length * 0.1 + 0.15;
          }

          // Phase 3: body text
          if (body) {
            animate(body, { opacity: [0, 1], y: [8, 0] }, { duration: 0.5, easing: EASE, delay: t });
            t += 0.15;
          }

          // Phase 4: feature items / cards
          if (items.length) {
            animate(items, { opacity: [0, 1], y: [12, 0] }, {
              duration: 0.45,
              easing: EASE,
              delay: stagger(0.08, { startDelay: t }),
            });
            t += items.length * 0.08 + 0.1;
          }

          // Phase 5: CTA
          if (cta) {
            animate(cta, { opacity: [0, 1], y: [8, 0] }, { duration: 0.4, easing: EASE, delay: t });
          }
        }, { amount: 0.15 });
      });
    }
  </script>
</body>
</html>

The core idea is a running offset t that accumulates as each phase completes. Each element group starts at delay: t and adds its own duration + a gap before handing off to the next phase. The result is a continuous wave through the section rather than everything appearing at once.

var t = 0;
// eyebrow enters at t=0, takes 0.45s → next phase starts at t=0.1
animate(eyebrow, { opacity: [0,1], y: [10,0] }, { duration: 0.45, delay: t });
t += 0.1;
// headline lines stagger from t=0.1
animate(lines, { opacity: [0,1], y: [16,0] }, { delay: stagger(0.1, { startDelay: t }) });
t += lines.length * 0.1 + 0.15;
// … and so on

The gap between phases is intentionally shorter than the animation duration — elements overlap in time. Eyebrow is still moving when the headline starts, headline is landing when body begins. This creates the fluid “wave” feel vs. a rigid sequential queue.

Use amount: 0.15 on inView so the section triggers when just 15% is visible — the animation plays while the user scrolls into the section rather than after they’ve stopped.

All five phases are optional: the script guards each with if (eyebrow), if (lines.length), etc. Drop the .orch-cta class and the CTA phase simply doesn’t run.