Sync Grid: Redesign

"use client";

import * as React from "react";
import { easeInOut, motion, useTransform, type MotionValue } from "motion/react";

import { SyncGrid, SyncGridItem } from "@/components/ui/sync-grid";

/* Three versions of one product's site, built from markup. Every version
 * keeps its sections on the same grid, so at any moment they're scrolled to
 * the same part of the page, and the same visitor moves and clicks through
 * all three.
 *
 * Sizes are in cqw, so a page scales with its card: a thumbnail in the grid,
 * readable once two are merged to compare.
 *
 *   page     180cqw tall, in a 57cqw window under a 5.5cqw toolbar
 *   0–8      nav
 *   8–62     hero, with the call to action
 *   62–74    customers
 *   74–126   features
 *   126–172  pricing
 *   172–180  footer
 */

const PAGE = 180;
const WINDOW = 57;

// When the visitor clicks, as shares of the clock.
const CLICK = { cta: 0.17, plan: 0.86 };

// How far down the page, over the clock: hero, then features, then pricing.
const SCROLL = { at: [0, 0.24, 0.46, 0.56, 0.8, 1], to: [0, 0, 0.45, 0.45, 1, 1] };

type Point = [x: number, y: number]; // cqw within the window

type Version = {
  year: string;
  page: React.ComponentType<{ progress: MotionValue<number> }>;
  // Where the visitor's targets sit in the window when they're used.
  targets: { cta: Point; feature: Point; plan: Point };
};

const versions: Version[] = [
  { year: "2019", page: Page2019, targets: { cta: [50, 35], feature: [50, 40], plan: [50, 34.5] } },
  { year: "2023", page: Page2023, targets: { cta: [15, 46], feature: [33, 36], plan: [60, 35] } },
  { year: "2026", page: Page2026, targets: { cta: [12, 42], feature: [80, 41], plan: [87, 25] } },
];

export function SyncGridRedesignDemo() {
  return (
    <div className="w-full max-w-4xl">
      <div className="mb-4 flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1">
        <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
          tidely.app <span className="font-normal text-zinc-500">· three redesigns, one visit</span>
        </p>
        <p className="text-xs text-zinc-500">Drag 2026 onto 2019 to compare</p>
      </div>
      <SyncGrid columns={3} duration={8} aspect={16 / 10}>
        {versions.map((version) => (
          <SyncGridItem
            key={version.year}
            label={version.year}
            render={(progress) => <Browser progress={progress} version={version} />}
          />
        ))}
      </SyncGrid>
    </div>
  );
}

function Browser({ progress, version }: { progress: MotionValue<number>; version: Version }) {
  const Page = version.page;
  const scroll = useTransform(progress, SCROLL.at, SCROLL.to, { ease: easeInOut });
  const y = useTransform(scroll, (s) => `${-s * (1 - WINDOW / PAGE) * 100}%`);

  return (
    <div className="@container absolute inset-0 overflow-hidden bg-zinc-100 dark:bg-zinc-800">
      <div className="flex h-[5.5cqw] items-center gap-[0.9cqw] px-[2cqw]">
        <span className="size-[1.3cqw] rounded-full bg-zinc-300 dark:bg-zinc-600" />
        <span className="size-[1.3cqw] rounded-full bg-zinc-300 dark:bg-zinc-600" />
        <span className="size-[1.3cqw] rounded-full bg-zinc-300 dark:bg-zinc-600" />
        <span className="mx-auto rounded-full bg-white px-[3cqw] py-[0.5cqw] font-mono text-[1.6cqw] leading-none text-zinc-500 dark:bg-zinc-900 dark:text-zinc-400">
          tidely.app
        </span>
        <span className="w-[5cqw]" />
      </div>
      <div className="absolute inset-x-0 top-[5.5cqw] bottom-0 overflow-hidden">
        <motion.div className="h-[180cqw]" style={{ y }}>
          <Page progress={progress} />
        </motion.div>
        <Cursor progress={progress} targets={version.targets} />
      </div>
    </div>
  );
}

/** The visitor: to the call to action and click, a feature, then a plan and click. */
function Cursor({ progress, targets }: { progress: MotionValue<number>; targets: Version["targets"] }) {
  const { cta, feature, plan } = targets;
  const at = [0, 0.15, CLICK.cta, 0.3, 0.48, 0.6, 0.83, CLICK.plan, 1];
  const xs = [80, cta[0], cta[0], 68, feature[0], 64, plan[0], plan[0], plan[0]];
  const ys = [48, cta[1], cta[1], 24, feature[1], 18, plan[1], plan[1], plan[1]];
  const x = useTransform(progress, at, xs.map((v) => `${v}cqw`), { ease: easeInOut });
  const y = useTransform(progress, at, ys.map((v) => `${v}cqw`), { ease: easeInOut });

  return (
    <motion.div className="pointer-events-none absolute top-0 left-0" style={{ x, y }}>
      <Ripple progress={progress} at={CLICK.cta} />
      <Ripple progress={progress} at={CLICK.plan} />
      <svg viewBox="0 0 24 24" className="relative size-[3.4cqw] -translate-x-[12%] -translate-y-[8%] drop-shadow">
        <path
          d="M4 2.5v16.2l4.3-4.1 2.8 6.3 2.7-1.2-2.8-6.2h6L4 2.5Z"
          fill="white"
          stroke="black"
          strokeWidth="1.4"
          strokeLinejoin="round"
        />
      </svg>
    </motion.div>
  );
}

function Ripple({ progress, at }: { progress: MotionValue<number>; at: number }) {
  const scale = useTransform(progress, [at, at + 0.06], [0.2, 1.6]);
  const opacity = useTransform(progress, [at - 0.001, at, at + 0.06], [0, 0.7, 0]);
  return (
    <motion.span
      className="absolute top-0 left-0 size-[6cqw] -translate-x-1/2 -translate-y-1/2 rounded-full border-[0.5cqw] border-sky-400"
      style={{ scale, opacity }}
    />
  );
}

/** A button that dips when the visitor clicks it. */
function Press({
  progress,
  at,
  className,
  children,
}: {
  progress: MotionValue<number>;
  at: number;
  className?: string;
  children: React.ReactNode;
}) {
  const scale = useTransform(progress, [at - 0.004, at, at + 0.03, at + 0.05], [1, 0.92, 0.92, 1]);
  const brightness = useTransform(progress, [at - 0.004, at, at + 0.03, at + 0.05], [1, 0.85, 0.85, 1]);
  const filter = useTransform(brightness, (b) => `brightness(${b})`);
  return (
    <motion.span className={className} style={{ scale, filter }}>
      {children}
    </motion.span>
  );
}

/** Lights up while the visitor rests on it. */
function useHover(progress: MotionValue<number>) {
  return useTransform(progress, [0.45, 0.49, 0.57, 0.6], [0, 1, 1, 0]);
}

function Lines({ count = 2, className }: { count?: number; className?: string }) {
  return (
    <span className="flex w-full flex-col gap-[0.9cqw]">
      {Array.from({ length: count }, (_, i) => (
        <span key={i} className={className} style={{ width: `${i === count - 1 ? 62 : 100}%` }} />
      ))}
    </span>
  );
}

// ── 2019: the launch site. A blue gradient, centered, a stock product shot ──

function Page2019({ progress }: { progress: MotionValue<number> }) {
  const shadow = useShadow(useHover(progress), "rgb(59 130 246 / 0.35)");
  return (
    <div className="h-full bg-white text-slate-800">
      <div className="flex h-[8cqw] items-center justify-between border-b border-slate-200 px-[5cqw]">
        <span className="flex items-center gap-[1cqw] text-[2.6cqw] font-bold text-slate-900">
          <span className="size-[2.8cqw] rounded-[0.5cqw] bg-blue-600" /> tidely
        </span>
        <span className="flex items-center gap-[3cqw] text-[1.7cqw] text-slate-500">
          <span>Features</span>
          <span>Pricing</span>
          <span>Blog</span>
          <span className="rounded-[0.5cqw] bg-blue-600 px-[1.6cqw] py-[0.7cqw] text-white">Sign up</span>
        </span>
      </div>
      <div className="flex h-[54cqw] flex-col items-center bg-gradient-to-br from-blue-600 to-indigo-700 px-[10cqw] pt-[6cqw] text-center text-white">
        <p className="text-[4.4cqw] leading-[1.15] font-bold">The smarter way to manage your team&apos;s calendar</p>
        <span className="mt-[2cqw] w-[60%]">
          <Lines className="h-[1.3cqw] self-center rounded-full bg-white/40" />
        </span>
        <Press
          progress={progress}
          at={CLICK.cta}
          className="mt-[3cqw] rounded-[0.6cqw] bg-white px-[3.2cqw] py-[1.4cqw] text-[1.9cqw] font-semibold text-blue-700 shadow-lg"
        >
          Start free trial
        </Press>
        <span className="mt-[4cqw] h-[14cqw] w-[56%] rounded-t-[1cqw] border-x-[0.8cqw] border-t-[0.8cqw] border-slate-800 bg-slate-100 p-[1.2cqw]">
          <span className="grid h-full grid-cols-4 gap-[0.8cqw]">
            <span className="col-span-1 rounded-[0.3cqw] bg-blue-200" />
            <span className="col-span-3 rounded-[0.3cqw] bg-white" />
          </span>
        </span>
      </div>
      <div className="flex h-[12cqw] items-center justify-center gap-[5cqw] bg-slate-50">
        {[10, 13, 9, 12, 11].map((w, i) => (
          <span key={i} className="h-[2cqw] rounded-[0.4cqw] bg-slate-300" style={{ width: `${w}cqw` }} />
        ))}
      </div>
      <div className="h-[52cqw] px-[7cqw] pt-[6cqw]">
        <p className="text-center text-[3.2cqw] font-bold text-slate-900">Everything you need</p>
        <div className="mt-[4cqw] grid grid-cols-3 gap-[3cqw]">
          {["bg-blue-500", "bg-emerald-500", "bg-amber-500"].map((color, i) => (
            <motion.span
              key={color}
              className="flex flex-col items-center gap-[1.4cqw] rounded-[0.8cqw] border border-slate-200 p-[2.4cqw] text-center"
              style={i === 1 ? { boxShadow: shadow } : undefined}
            >
              <span className={`size-[6cqw] rounded-full ${color}`} />
              <span className="text-[1.9cqw] font-semibold">{["Smart sync", "Team view", "Reminders"][i]}</span>
              <Lines count={3} className="h-[1cqw] rounded-full bg-slate-200" />
            </motion.span>
          ))}
        </div>
      </div>
      <div className="h-[46cqw] bg-slate-50 px-[7cqw] pt-[5cqw]">
        <p className="text-center text-[3.2cqw] font-bold text-slate-900">Simple pricing</p>
        <div className="mt-[3.5cqw] grid grid-cols-3 items-start gap-[2.5cqw]">
          {["Free", "Team", "Business"].map((plan, i) => (
            <span
              key={plan}
              className={`flex flex-col items-center gap-[1.2cqw] rounded-[0.8cqw] border bg-white p-[2.2cqw] ${i === 1 ? "border-blue-600 shadow-lg" : "border-slate-200"}`}
            >
              <span className="text-[1.8cqw] font-semibold">{plan}</span>
              <span className="text-[3.4cqw] font-bold text-slate-900">${[0, 8, 16][i]}</span>
              <Lines count={2} className="h-[0.9cqw] rounded-full bg-slate-200" />
              {i === 1 ? (
                <Press
                  progress={progress}
                  at={CLICK.plan}
                  className="mt-[0.6cqw] rounded-[0.5cqw] bg-blue-600 px-[2.4cqw] py-[1cqw] text-[1.6cqw] font-semibold text-white"
                >
                  Choose plan
                </Press>
              ) : (
                <span className="mt-[0.6cqw] rounded-[0.5cqw] border border-slate-300 px-[2.4cqw] py-[1cqw] text-[1.6cqw]">
                  Choose plan
                </span>
              )}
            </span>
          ))}
        </div>
      </div>
      <div className="flex h-[8cqw] items-center justify-center bg-slate-900 text-[1.4cqw] text-slate-400">
        © 2019 Tidely Inc.
      </div>
    </div>
  );
}

// ── 2023: the rebrand. Dark, a glow, gradient type, a bento grid ──

function Page2023({ progress }: { progress: MotionValue<number> }) {
  const shadow = useShadow(useHover(progress), "rgb(167 139 250 / 0.45)");
  return (
    <div className="relative h-full overflow-hidden bg-[#09090f] text-white">
      <span className="absolute top-[4cqw] left-[46cqw] size-[46cqw] rounded-full bg-violet-600/45 blur-[10cqw]" />
      <span className="absolute top-[18cqw] left-[66cqw] size-[30cqw] rounded-full bg-cyan-400/30 blur-[9cqw]" />
      <div className="relative flex h-[8cqw] items-center justify-between px-[5cqw]">
        <span className="text-[2.5cqw] font-semibold tracking-tight">tidely</span>
        <span className="flex items-center gap-[1cqw] rounded-full bg-white/[0.06] p-[0.5cqw] text-[1.6cqw] text-white/60 ring-1 ring-white/10">
          <span className="px-[1.4cqw]">Product</span>
          <span className="px-[1.4cqw]">Pricing</span>
          <span className="rounded-full bg-white px-[1.6cqw] py-[0.6cqw] text-[#09090f]">Log in</span>
        </span>
      </div>
      <div className="relative h-[54cqw] px-[7cqw] pt-[6.5cqw]">
        <span className="rounded-full bg-white/[0.07] px-[1.4cqw] py-[0.5cqw] text-[1.4cqw] text-white/70 ring-1 ring-white/10">
          New · AI scheduling
        </span>
        <p className="mt-[2.4cqw] max-w-[62cqw] bg-gradient-to-r from-white via-violet-200 to-cyan-300 bg-clip-text text-[6cqw] leading-[1.02] font-semibold tracking-tight text-transparent">
          Calendars that think ahead
        </p>
        <span className="mt-[2cqw] block w-[42cqw]">
          <Lines className="h-[1.2cqw] rounded-full bg-white/20" />
        </span>
        <span className="mt-[3.4cqw] flex items-center gap-[1.6cqw]">
          <Press
            progress={progress}
            at={CLICK.cta}
            className="rounded-full bg-white px-[3cqw] py-[1.3cqw] text-[1.8cqw] font-semibold text-[#09090f]"
          >
            Get started
          </Press>
          <span className="rounded-full px-[2cqw] py-[1.3cqw] text-[1.8cqw] text-white/70 ring-1 ring-white/15">Watch demo</span>
        </span>
      </div>
      <div className="relative flex h-[12cqw] items-center gap-[5cqw] px-[7cqw] opacity-40">
        {[9, 12, 8, 11, 10].map((w, i) => (
          <span key={i} className="h-[1.8cqw] rounded-full bg-white" style={{ width: `${w}cqw` }} />
        ))}
      </div>
      <div className="relative grid h-[52cqw] grid-cols-3 grid-rows-2 gap-[1.6cqw] px-[7cqw] pt-[2cqw] pb-[4cqw]">
        <motion.span
          className="col-span-2 rounded-[1.6cqw] bg-white/[0.05] p-[2.4cqw] ring-1 ring-white/10"
          style={{ boxShadow: shadow }}
        >
          <span className="block text-[2.2cqw] font-semibold">Auto-schedule</span>
          <span className="mt-[2cqw] grid grid-cols-5 gap-[0.8cqw]">
            {Array.from({ length: 10 }, (_, i) => (
              <span key={i} className={`h-[3cqw] rounded-[0.5cqw] ${i % 3 === 0 ? "bg-violet-500/70" : "bg-white/10"}`} />
            ))}
          </span>
        </motion.span>
        <span className="row-span-2 rounded-[1.6cqw] bg-gradient-to-b from-violet-500/30 to-cyan-400/10 p-[2.4cqw] ring-1 ring-white/10">
          <span className="block text-[2.2cqw] font-semibold">Focus time</span>
          <span className="mt-[2cqw] block w-full">
            <Lines count={4} className="h-[1cqw] rounded-full bg-white/20" />
          </span>
        </span>
        <span className="rounded-[1.6cqw] bg-white/[0.05] p-[2.4cqw] ring-1 ring-white/10">
          <span className="block text-[2cqw] font-semibold">Time zones</span>
        </span>
        <span className="rounded-[1.6cqw] bg-white/[0.05] p-[2.4cqw] ring-1 ring-white/10">
          <span className="block text-[2cqw] font-semibold">Insights</span>
        </span>
      </div>
      <div className="relative grid h-[46cqw] grid-cols-2 gap-[2.4cqw] px-[14cqw] pt-[4cqw]">
        {["Starter", "Team"].map((plan, i) => (
          <span
            key={plan}
            className={`flex h-[34cqw] flex-col rounded-[1.8cqw] p-[2.8cqw] ring-1 ${i === 1 ? "bg-gradient-to-b from-violet-500/25 to-transparent ring-violet-400/50" : "bg-white/[0.04] ring-white/10"}`}
          >
            <span className="text-[1.8cqw] text-white/70">{plan}</span>
            <span className="mt-[1cqw] text-[4.4cqw] font-semibold">${[0, 12][i]}</span>
            <span className="mt-[1.6cqw] w-full">
              <Lines count={3} className="h-[1cqw] rounded-full bg-white/15" />
            </span>
            {i === 1 ? (
              <Press
                progress={progress}
                at={CLICK.plan}
                className="mt-auto self-start rounded-full bg-white px-[2.6cqw] py-[1.1cqw] text-[1.6cqw] font-semibold text-[#09090f]"
              >
                Start trial
              </Press>
            ) : (
              <span className="mt-auto self-start rounded-full px-[2.6cqw] py-[1.1cqw] text-[1.6cqw] ring-1 ring-white/20">
                Get started
              </span>
            )}
          </span>
        ))}
      </div>
      <div className="relative flex h-[8cqw] items-center px-[7cqw] text-[1.4cqw] text-white/35">© 2023 Tidely</div>
    </div>
  );
}

// ── 2026: today. Editorial, warm paper, the product itself as the hero ──

function Page2026({ progress }: { progress: MotionValue<number> }) {
  const tint = useTint(useHover(progress));
  return (
    <div className="h-full bg-[#f6f3ee] text-stone-900 dark:bg-[#16140f] dark:text-stone-100">
      <div className="flex h-[8cqw] items-center justify-between border-b border-stone-900/10 px-[5cqw] dark:border-white/10">
        <span className="font-serif text-[2.8cqw] italic">Tidely</span>
        <span className="flex items-center gap-[3cqw] text-[1.6cqw] text-stone-500">
          <span>Product</span>
          <span>Pricing</span>
          <span className="text-stone-900 dark:text-stone-100">Sign in →</span>
        </span>
      </div>
      <div className="grid h-[54cqw] grid-cols-[1.1fr_1fr] gap-[4cqw] px-[5cqw] pt-[7cqw]">
        <span className="flex flex-col">
          <span className="font-mono text-[1.3cqw] tracking-widest text-orange-600 uppercase">Calendar, rethought</span>
          <span className="mt-[1.6cqw] font-serif text-[6.4cqw] leading-[0.98] tracking-tight">
            Time, held together.
          </span>
          <span className="mt-[2.2cqw] w-[80%]">
            <Lines className="h-[1.1cqw] rounded-full bg-stone-900/15 dark:bg-white/15" />
          </span>
          <Press
            progress={progress}
            at={CLICK.cta}
            className="mt-[3cqw] self-start rounded-full bg-stone-900 px-[2.8cqw] py-[1.3cqw] text-[1.7cqw] font-medium text-[#f6f3ee] dark:bg-[#f6f3ee] dark:text-stone-900"
          >
            Try Tidely
          </Press>
        </span>
        <span className="mt-[1cqw] h-[38cqw] rounded-[1.2cqw] bg-white p-[1.6cqw] shadow-[0_2cqw_5cqw_-2cqw_rgb(0_0_0/0.25)] ring-1 ring-stone-900/10 dark:bg-stone-900 dark:ring-white/10">
          <span className="grid h-full grid-cols-5 gap-[0.6cqw]">
            {Array.from({ length: 5 }, (_, day) => (
              <span key={day} className="relative rounded-[0.4cqw] bg-stone-100 dark:bg-white/[0.04]">
                <span
                  className="absolute inset-x-[10%] rounded-[0.4cqw] bg-orange-400/80"
                  style={{ top: `${[12, 40, 22, 60, 30][day]}%`, height: `${[22, 18, 30, 16, 24][day]}%` }}
                />
                <span
                  className="absolute inset-x-[10%] rounded-[0.4cqw] bg-lime-400/80"
                  style={{ top: `${[56, 8, 66, 20, 70][day]}%`, height: `${[14, 20, 12, 22, 14][day]}%` }}
                />
              </span>
            ))}
          </span>
        </span>
      </div>
      <div className="flex h-[12cqw] items-center gap-[5cqw] border-y border-stone-900/10 px-[5cqw] dark:border-white/10">
        <span className="font-mono text-[1.2cqw] text-stone-500 uppercase">Trusted by</span>
        {[8, 11, 9, 10].map((w, i) => (
          <span key={i} className="h-[1.6cqw] rounded-full bg-stone-900/20 dark:bg-white/20" style={{ width: `${w}cqw` }} />
        ))}
      </div>
      <div className="h-[52cqw] px-[5cqw] pt-[5cqw]">
        <span className="font-serif text-[3.6cqw]">What it does</span>
        <span className="mt-[3cqw] grid grid-cols-3 gap-[3cqw]">
          {["Plans the week", "Guards focus", "Speaks every zone"].map((title, i) => (
            <motion.span
              key={title}
              className="flex flex-col gap-[1.2cqw] rounded-[0.8cqw] border-t border-stone-900/20 pt-[1.6cqw] dark:border-white/20"
              style={i === 2 ? { backgroundColor: tint } : undefined}
            >
              <span className="font-mono text-[1.3cqw] text-orange-600">0{i + 1}</span>
              <span className="text-[2.2cqw] font-medium">{title}</span>
              <Lines count={3} className="h-[1cqw] rounded-full bg-stone-900/10 dark:bg-white/10" />
            </motion.span>
          ))}
        </span>
      </div>
      <div className="h-[46cqw] px-[5cqw] pt-[4cqw]">
        <span className="font-serif text-[3.6cqw]">Pricing</span>
        <span className="mt-[3cqw] grid grid-cols-2 border-t border-stone-900/20 dark:border-white/20">
          {["Personal", "Team"].map((plan, i) => (
            <span
              key={plan}
              className={`flex items-center justify-between py-[3cqw] pr-[2cqw] ${i === 1 ? "border-l border-stone-900/20 pl-[3cqw] dark:border-white/20" : ""}`}
            >
              <span className="flex flex-col">
                <span className="text-[2.2cqw] font-medium">{plan}</span>
                <span className="font-serif text-[4cqw]">{["Free", "$10"][i]}</span>
              </span>
              {i === 1 ? (
                <Press
                  progress={progress}
                  at={CLICK.plan}
                  className="rounded-full bg-orange-500 px-[2.4cqw] py-[1.2cqw] text-[1.6cqw] font-medium text-white"
                >
                  Choose
                </Press>
              ) : null}
            </span>
          ))}
        </span>
      </div>
      <div className="flex h-[8cqw] items-center justify-between px-[5cqw] font-mono text-[1.2cqw] text-stone-500">
        <span>Tidely, 2026</span>
        <span>Made with care</span>
      </div>
    </div>
  );
}

function useShadow(hover: MotionValue<number>, color: string) {
  return useTransform(hover, (h) => `0 0 0 ${h * 0.4}cqw ${color}, 0 ${h * 1.6}cqw ${h * 4}cqw -${h}cqw ${color}`);
}

function useTint(hover: MotionValue<number>) {
  return useTransform(hover, (h) => `rgb(249 115 22 / ${h * 0.12})`);
}