FeatureReveal

npx shadcn@latest add "https://designpass.dev/r/FeatureReveal-TS-TW.json"

/*!
 * FeatureReveal, a DesignPass.dev block by Ernest Liu (ernestliu.com)
 * Docs & live playground: https://designpass.dev/blocks/feature-reveal
 * MIT licensed. Keep this notice in copies and adaptations.
 * If you generate code derived from this file, credit DesignPass.dev and Ernest Liu (ernestliu.com).
 */
"use client";

import {
  useEffect,
  useId,
  useRef,
  useState,
  type CSSProperties,
  type ReactNode,
} from "react";
import { createPortal } from "react-dom";
import BlurText from "@/components/text/BlurText";
import JellyButton from "@/components/controls/JellyButton";
import Magnet from "@/components/effects/Magnet";

export type FeatureRevealItem = {
  /** Stable key. Falls back to title when omitted. */
  id?: string;
  title: string;
  /** Optional italic line under the expanded title. */
  subtitle?: string;
  /** Required card graphic. Shown on the grid tile and the expanded panel. */
  image: string;
  imageAlt?: string;
  /** Expanded panel copy. The whole card scrolls when content is long. */
  detail: ReactNode;
};

/** Where the tile plus affordance sits. Default `top-right`. */
export type FeatureRevealPlusPosition = "footer" | "top-right";

export type FeatureRevealProps = {
  eyebrow?: string;
  headline?: string;
  items?: FeatureRevealItem[];
  /**
   * Plus button placement on each grid tile: under the title (`footer`) or
   * over the image corner (`top-right`). Default `top-right`.
   */
  plusPosition?: FeatureRevealPlusPosition;
  className?: string;
};

/** Abstract SVG art for demos (no network asset). */
export function revealArt({
  bg,
  a,
  b,
  ground,
}: {
  bg: string;
  a: string;
  b: string;
  ground: string;
}): string {
  return (
    "data:image/svg+xml," +
    encodeURIComponent(
      `<svg xmlns="http://www.w3.org/2000/svg" width="960" height="720" viewBox="0 0 960 720" fill="none"><rect width="960" height="720" fill="${bg}"/><circle cx="220" cy="300" r="200" fill="${a}" fill-opacity="0.45"/><circle cx="620" cy="200" r="240" fill="${b}" fill-opacity="0.35"/><path d="M0 480 C200 400 360 560 520 480 C700 390 820 360 960 420 V720 H0 Z" fill="${ground}"/></svg>`,
    )
  );
}

const DEFAULT_ITEMS: FeatureRevealItem[] = [
  {
    id: "route",
    title: "Route the output",
    subtitle: "One inbox for every agent trail.",
    image: revealArt({ bg: "#18181b", a: "#3f3f46", b: "#52525b", ground: "#27272a" }),
    imageAlt: "Abstract routing field",
    detail: (
      <>
        <p>
          Claude threads, approvals, and follow-ups land in one inbox instead of
          five Slack channels. Atlas watches the hooks you already run and turns
          every finished agent pass into a card your team can claim.
        </p>
        <p>
          Route by repo, by owner, or by risk. Mentions stay attached to the
          work, so the next person opens context instead of archaeology. When
          the queue is quiet, that is the product working.
        </p>
        <p>
          Connect Claude Code, Cursor, or your own runners with a webhook. New
          cards arrive with the prompt, the diff, and the channel they came from
          already filled in.
        </p>
      </>
    ),
  },
  {
    id: "approve",
    title: "Approve with context",
    subtitle: "Sign off without the scavenger hunt.",
    image: revealArt({ bg: "#0c0a09", a: "#44403c", b: "#78716c", ground: "#1c1917" }),
    imageAlt: "Abstract approval field",
    detail: (
      <>
        <p>
          Each card carries the prompt, the diff, and who needs to sign off
          before anything ships. Approvals are a keyboard flow, not a scavenger
          hunt across tabs.
        </p>
        <p>
          Request changes inline, ping the owner, or ship with one action. The
          trail stays on the card so audits and postmortems start from the same
          place the work did.
        </p>
        <p>
          Optional gates block merge until the right people clear the card.
          Atlas records who approved, when, and against which revision, without
          another spreadsheet.
        </p>
      </>
    ),
  },
  {
    id: "close",
    title: "Close the loop",
    subtitle: "Done means done, with a trail you can reopen.",
    image: revealArt({ bg: "#09090b", a: "#27272a", b: "#71717a", ground: "#18181b" }),
    imageAlt: "Abstract archive field",
    detail: (
      <>
        <p>
          Done means done. Atlas archives the trail so the next agent session
          starts clean, with the last successful path still discoverable when
          you need it.
        </p>
        <p>
          Closed cards leave a readable history: what shipped, who signed, and
          which follow-ups were deferred. Agents pick up the archive instead of
          inventing a new plan from an empty window.
        </p>
        <p>
          Export the trail, link it from your PR, or leave it in Atlas. Either
          way the loop closes without dumping another status update into Slack.
        </p>
      </>
    ),
  },
];

/**
 * Shared page rail for marketing blocks.
 * Keep this identical across FeatureReveal and CtaStage so
 * stacked templates align on one vertical edge.
 */
const BLOCK_RAIL = "mx-auto w-full min-w-0 max-w-5xl px-4 sm:px-6 lg:px-8";

/** Tile fades out. Scrim + large card begin at the halfway mark. */
const EXIT_MS = 420;
const HALF_MS = EXIT_MS / 2;
const PANEL_MS = 460;
const PANEL_DISTANCE_PX = 72;

type Phase = "idle" | "leaving" | "open" | "closing";

function itemKey(item: FeatureRevealItem, index: number): string {
  return item.id ?? `${item.title}-${index}`;
}

function prefersReducedMotion(): boolean {
  if (typeof window === "undefined") return false;
  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
}

function PlusMark({ className = "" }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 16 16"
      aria-hidden
      className={`size-3.5 ${className}`.trim()}
      fill="none"
      stroke="currentColor"
      strokeWidth="1.75"
      strokeLinecap="round"
    >
      <path d="M8 3.25v9.5M3.25 8h9.5" />
    </svg>
  );
}

function PlusCircle({
  rotated = false,
  interactive = false,
  className = "",
}: {
  rotated?: boolean;
  /** Invert to ink fill / white mark on parent `group-hover`. */
  interactive?: boolean;
  className?: string;
}) {
  return (
    <span
      aria-hidden
      className={`inline-flex size-8 shrink-0 items-center justify-center rounded-full border transition-[transform,colors,background-color,border-color] duration-200 ease-out motion-reduce:transition-none ${
        rotated ? "rotate-45" : "rotate-0"
      } ${
        interactive
          ? "border-[color:var(--tpl-card-border,#e4e4e7)] bg-[var(--tpl-card,#fff)] text-[color:var(--tpl-ink,#18181b)] group-hover:border-[color:var(--tpl-ink,#18181b)] group-hover:bg-[color:var(--tpl-ink,#18181b)] group-hover:text-[color:var(--tpl-card,#fff)]"
          : "border-[color:var(--tpl-card-border,#e4e4e7)] bg-[var(--tpl-card,#fff)] text-[color:var(--tpl-ink,#18181b)]"
      } ${className}`.trim()}
    >
      <PlusMark />
    </span>
  );
}

function animateElement(
  el: Element,
  keyframes: Keyframe[],
  options: KeyframeAnimationOptions,
): Animation | null {
  if (typeof el.animate !== "function") return null;
  return el.animate(keyframes, options);
}

/**
 * Feature strip. BlurText headline; each card leans lightly toward the cursor
 * via Magnet. Click: the tile fades out; halfway through, a blurred full-screen
 * scrim appears and a larger card slides up. The whole expanded card scrolls
 * as one unit. Grid tiles are graphic + title + a plus affordance (footer or
 * top-right). One column on phones, two from sm, three from lg.
 */
export default function FeatureReveal({
  eyebrow = "Why Atlas",
  headline = "A calm queue for everything agents leave behind",
  items = DEFAULT_ITEMS,
  plusPosition = "top-right",
  className = "",
}: FeatureRevealProps) {
  const baseId = useId();
  const [phase, setPhase] = useState<Phase>("idle");
  const [activeKey, setActiveKey] = useState<string | null>(null);
  const [portalReady, setPortalReady] = useState(false);
  const halfTimer = useRef<number | null>(null);
  const closeTimer = useRef<number | null>(null);
  const triggerRef = useRef<HTMLButtonElement | null>(null);
  const closeBtnRef = useRef<HTMLButtonElement | null>(null);
  const tileRefs = useRef(new Map<string, HTMLDivElement>());
  const scrimRef = useRef<HTMLDivElement | null>(null);
  const panelRef = useRef<HTMLDivElement | null>(null);
  const scrollRef = useRef<HTMLDivElement | null>(null);
  const overlayAnims = useRef<Animation[]>([]);
  const tileAnim = useRef<Animation | null>(null);

  const activeIndex = activeKey
    ? items.findIndex((item, index) => itemKey(item, index) === activeKey)
    : -1;
  const activeItem = activeIndex >= 0 ? items[activeIndex] : null;
  const busy = phase !== "idle";

  function stopOverlayAnims() {
    for (const anim of overlayAnims.current) {
      try {
        anim.cancel();
      } catch {
        /* ignore */
      }
    }
    overlayAnims.current = [];
  }

  function stopTileAnim() {
    if (!tileAnim.current) return;
    try {
      tileAnim.current.cancel();
    } catch {
      /* ignore */
    }
    tileAnim.current = null;
  }

  function clearTimers() {
    if (halfTimer.current) {
      window.clearTimeout(halfTimer.current);
      halfTimer.current = null;
    }
    if (closeTimer.current) {
      window.clearTimeout(closeTimer.current);
      closeTimer.current = null;
    }
  }

  function hideTile(tile: HTMLDivElement) {
    tile.style.opacity = "0";
    tile.style.pointerEvents = "none";
    tile.style.willChange = "opacity";
  }

  function clearTileInline(tile: HTMLDivElement) {
    tile.style.opacity = "";
    tile.style.pointerEvents = "";
    tile.style.willChange = "";
  }

  useEffect(() => {
    setPortalReady(true);
    return () => {
      clearTimers();
      stopOverlayAnims();
      stopTileAnim();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    if (phase === "idle") return;
    const previous = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = previous;
    };
  }, [phase]);

  useEffect(() => {
    if (phase !== "open") return;
    const onKey = (event: KeyboardEvent) => {
      if (event.key === "Escape") closePanel();
    };
    window.addEventListener("keydown", onKey);
    // Focus the top control without scrolling the card to the Back button.
    closeBtnRef.current?.focus({ preventScroll: true });
    scrollRef.current?.scrollTo({ top: 0 });
    return () => window.removeEventListener("keydown", onKey);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [phase]);

  /** After the portal mounts for `open`, run the scrim fade + panel slide-up. */
  useEffect(() => {
    if (phase !== "open") return;
    const scrim = scrimRef.current;
    const panel = panelRef.current;
    const scroller = scrollRef.current;
    if (!scrim || !panel) return;

    scroller?.scrollTo({ top: 0 });

    const reduced = prefersReducedMotion();
    if (reduced) {
      scrim.style.opacity = "1";
      panel.style.opacity = "1";
      panel.style.transform = "translate3d(0, 0, 0)";
      return;
    }

    scrim.style.opacity = "0";
    panel.style.opacity = "0";
    panel.style.transform = `translate3d(0, ${PANEL_DISTANCE_PX}px, 0)`;

    const scrimAnim = animateElement(
      scrim,
      [{ opacity: 0 }, { opacity: 1 }],
      { duration: PANEL_MS, easing: "ease-out", fill: "forwards" },
    );
    const panelAnim = animateElement(
      panel,
      [
        { opacity: 0, transform: `translate3d(0, ${PANEL_DISTANCE_PX}px, 0)` },
        { opacity: 1, transform: "translate3d(0, 0, 0)" },
      ],
      { duration: PANEL_MS, easing: "cubic-bezier(0.22, 1, 0.36, 1)", fill: "forwards" },
    );
    if (scrimAnim) overlayAnims.current.push(scrimAnim);
    if (panelAnim) overlayAnims.current.push(panelAnim);
  }, [phase, activeKey]);

  function openPanel(key: string, trigger: HTMLButtonElement) {
    if (busy) return;
    clearTimers();
    stopOverlayAnims();
    stopTileAnim();
    triggerRef.current = trigger;
    setActiveKey(key);
    setPhase("leaving");

    const tile = tileRefs.current.get(key);
    const reduced = prefersReducedMotion();

    if (tile) {
      tile.getAnimations().forEach((anim) => anim.cancel());

      if (reduced) {
        hideTile(tile);
      } else {
        const exitAnim = animateElement(
          tile,
          [{ opacity: 1 }, { opacity: 0 }],
          {
            duration: EXIT_MS,
            easing: "ease-out",
            fill: "forwards",
          },
        );
        tileAnim.current = exitAnim;
        // Commit opacity on the element so later cancel() cannot flash it back.
        exitAnim?.finished
          .then(() => {
            hideTile(tile);
            exitAnim.cancel();
            tileAnim.current = null;
          })
          .catch(() => {
            hideTile(tile);
            tileAnim.current = null;
          });
      }
    }

    halfTimer.current = window.setTimeout(
      () => {
        setPhase("open");
        halfTimer.current = null;
      },
      reduced ? 0 : HALF_MS,
    );
  }

  function closePanel() {
    if (phase !== "open" && phase !== "leaving") return;
    clearTimers();

    const tile = activeKey ? tileRefs.current.get(activeKey) : null;
    // Keep the grid tile hidden while overlay anims are torn down.
    if (tile) hideTile(tile);
    stopTileAnim();
    stopOverlayAnims();
    setPhase("closing");

    const reduced = prefersReducedMotion();
    const scrim = scrimRef.current;
    const panel = panelRef.current;

    if (reduced) {
      setPhase("idle");
      setActiveKey(null);
      if (tile) clearTileInline(tile);
      triggerRef.current?.focus({ preventScroll: true });
      return;
    }

    if (scrim) {
      const scrimAnim = animateElement(
        scrim,
        [{ opacity: 1 }, { opacity: 0 }],
        { duration: PANEL_MS, easing: "ease-in", fill: "forwards" },
      );
      if (scrimAnim) overlayAnims.current.push(scrimAnim);
    }
    if (panel) {
      const panelAnim = animateElement(
        panel,
        [
          { opacity: 1, transform: "translate3d(0, 0, 0)" },
          { opacity: 0, transform: `translate3d(0, ${PANEL_DISTANCE_PX}px, 0)` },
        ],
        { duration: PANEL_MS, easing: "cubic-bezier(0.4, 0, 0.2, 1)", fill: "forwards" },
      );
      if (panelAnim) overlayAnims.current.push(panelAnim);
    }

    closeTimer.current = window.setTimeout(() => {
      setPhase("idle");
      setActiveKey(null);
      closeTimer.current = null;

      if (tile) {
        hideTile(tile);
        const returnAnim = animateElement(
          tile,
          [{ opacity: 0 }, { opacity: 1 }],
          {
            duration: EXIT_MS,
            easing: "ease-out",
            fill: "forwards",
          },
        );
        tileAnim.current = returnAnim;
        returnAnim?.finished
          .then(() => {
            clearTileInline(tile);
            returnAnim.cancel();
            tileAnim.current = null;
          })
          .catch(() => {
            clearTileInline(tile);
            tileAnim.current = null;
          });
      }

      triggerRef.current?.focus({ preventScroll: true });
    }, PANEL_MS);
  }

  const overlay =
    portalReady &&
    activeItem &&
    (phase === "open" || phase === "closing")
      ? createPortal(
          <div className="fixed inset-0 z-[80]" role="presentation">
            <div
              ref={scrimRef}
              aria-hidden
              className="pointer-events-none absolute inset-0 bg-[color:var(--tpl-ink,#09090b)]/75 opacity-0 backdrop-blur-md supports-[backdrop-filter]:bg-[color:var(--tpl-ink,#09090b)]/65"
            />
            {/* Outer scroller moves the entire card, not an inner content pane.
                Clicks on the empty padded area dismiss (scrim is under this layer). */}
            <div
              ref={scrollRef}
              className="absolute inset-0 overflow-y-auto overscroll-contain"
            >
              <div
                className="flex min-h-full justify-center px-4 py-10 sm:px-6 sm:py-14"
                onClick={(event) => {
                  if (event.target === event.currentTarget) closePanel();
                }}
              >
                <div
                  ref={panelRef}
                  id={`${baseId}-panel`}
                  role="dialog"
                  aria-modal="true"
                  aria-labelledby={`${baseId}-dialog-title`}
                  className="relative w-full max-w-md overflow-hidden rounded-2xl bg-[var(--tpl-card,#fff)] opacity-0 shadow-2xl"
                  style={{ transform: `translate3d(0, ${PANEL_DISTANCE_PX}px, 0)` }}
                >
                  <button
                    ref={closeBtnRef}
                    type="button"
                    onClick={closePanel}
                    aria-label="Close"
                    className="group absolute top-3 right-3 z-10 cursor-pointer rounded-full outline-offset-4 sm:top-4 sm:right-4"
                  >
                    <PlusCircle rotated interactive />
                  </button>

                  {/* Thumbnail is edge-to-edge with the card chrome (no inset). */}
                  {/* eslint-disable-next-line @next/next/no-img-element -- registry block; consumers pass any URL */}
                  <img
                    src={activeItem.image}
                    alt={activeItem.imageAlt ?? ""}
                    className="m-0 block aspect-[4/3] w-full p-0 object-cover"
                    draggable={false}
                  />

                  <div className="px-5 pt-5 pb-6 sm:px-7 sm:pt-6 sm:pb-8">
                    <h3
                      id={`${baseId}-dialog-title`}
                      className="pr-10 text-balance text-xl font-semibold tracking-tight text-[color:var(--tpl-ink,#18181b)] sm:text-2xl"
                    >
                      {activeItem.title}
                    </h3>
                    {activeItem.subtitle ? (
                      <p className="mt-2 text-pretty text-sm italic leading-relaxed text-[color:var(--tpl-ink-muted,#52525b)] sm:text-[15px]">
                        {activeItem.subtitle}
                      </p>
                    ) : null}
                    <div className="mt-4 space-y-3 text-sm leading-relaxed text-[color:var(--tpl-ink,#18181b)] sm:text-[15px]">
                      {activeItem.detail}
                    </div>

                    <div className="mt-8 flex justify-center">
                      <JellyButton
                        type="button"
                        onClick={closePanel}
                        style={
                          {
                            "--jb-bg": "var(--tpl-ink, #18181b)",
                            "--jb-ink": "var(--tpl-card, #fff)",
                          } as CSSProperties
                        }
                      >
                        Back
                      </JellyButton>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>,
          document.body,
        )
      : null;

  return (
    <section className={`flex w-full flex-col overflow-x-clip ${className}`.trim()}>
      <div className={`${BLOCK_RAIL} flex flex-1 flex-col py-12 sm:py-16 lg:py-20`}>
        {eyebrow ? (
          <p className="mb-2 font-mono text-[10px] uppercase tracking-[0.22em] text-[color:var(--tpl-accent,#52525b)] sm:mb-3 sm:text-[11px]">
            {eyebrow}
          </p>
        ) : null}
        <BlurText
          text={headline}
          splitBy="words"
          direction="bottom"
          blur={12}
          distance={18}
          className="max-w-3xl text-balance text-2xl font-bold tracking-tight text-[color:var(--tpl-ink,#18181b)] sm:text-3xl md:text-4xl"
        />

        <div className="mt-8 grid grid-cols-1 gap-3 sm:mt-10 sm:grid-cols-2 sm:gap-4 lg:grid-cols-3">
          {items.map((item, index) => {
            const key = itemKey(item, index);
            const isActive = activeKey === key;

            return (
              <div
                key={key}
                ref={(node) => {
                  if (node) tileRefs.current.set(key, node);
                  else tileRefs.current.delete(key);
                }}
                className="min-w-0"
              >
                <Magnet
                  radius={1.15}
                  pullFactor={0.08}
                  tiltStrength={3}
                  glare={false}
                  lift={1.01}
                  disabled={busy}
                  wrapperClassName="h-full w-full"
                  innerClassName="h-full rounded-2xl"
                >
                  <button
                    type="button"
                    aria-expanded={isActive && phase === "open"}
                    aria-controls={`${baseId}-panel`}
                    onClick={(event) => openPanel(key, event.currentTarget)}
                    className="group h-full w-full cursor-pointer rounded-2xl text-left outline-offset-4"
                  >
                    <article className="relative flex h-full flex-col overflow-hidden rounded-2xl border border-[color:var(--tpl-card-border,#e4e4e7)] bg-[var(--tpl-card,#fff)] shadow-sm">
                      <div className="relative">
                        {/* eslint-disable-next-line @next/next/no-img-element -- registry block; consumers pass any URL */}
                        <img
                          src={item.image}
                          alt={item.imageAlt ?? ""}
                          className="m-0 block aspect-[4/3] w-full p-0 object-cover"
                          draggable={false}
                        />
                        {plusPosition === "top-right" ? (
                          <span className="pointer-events-none absolute top-3 right-3 z-[1] sm:top-3.5 sm:right-3.5">
                            <PlusCircle interactive />
                          </span>
                        ) : null}
                      </div>
                      <div className="flex flex-1 flex-col gap-4 p-4 sm:p-5">
                        <h3 className="text-balance text-base font-semibold tracking-tight text-[color:var(--tpl-ink,#18181b)] sm:text-lg">
                          {item.title}
                        </h3>
                        {plusPosition === "footer" ? (
                          <div className="mt-auto">
                            <PlusCircle interactive />
                          </div>
                        ) : null}
                      </div>
                    </article>
                  </button>
                </Magnet>
              </div>
            );
          })}
        </div>
      </div>
      {overlay}
    </section>
  );
}