Bow

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

/*!
 * Bow, a DesignPass.dev component by Ernest Liu (ernestliu.com)
 * Docs & live playground: https://designpass.dev/components/bow
 * 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 { useLayoutEffect, useRef, type CSSProperties } from "react";

export type BowProps = {
  /** Fill color of the section BELOW. */
  fill?: string;
  /** Edge height in px at the start of the scroll range (seam near bottom). */
  height?: number;
  /** Edge height in px at the end of the scroll range (seam near top). */
  scrollHeight?: number;
  /**
   * Invert from the default bulge into a concave dip (bowl).
   */
  invert?: boolean;
  /**
   * Rotate 180°. Use when parking the edge on the top of the lower
   * section instead of the bottom of the upper section.
   */
  flip?: boolean;
  className?: string;
  style?: CSSProperties;
};

/** Extra px so the fill overlaps the lower band and kills the hairline seam. */
const SEAM_OVERLAP_PX = 2;

function findScrollParent(node: HTMLElement | null): HTMLElement | Window {
  let current = node?.parentElement ?? null;
  while (current) {
    const { overflowY } = getComputedStyle(current);
    if (
      (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") &&
      current.scrollHeight > current.clientHeight
    ) {
      return current;
    }
    current = current.parentElement;
  }
  return window;
}

function buildPath(invert: boolean): string {
  if (invert) {
    // Concave dip (bowl). Close past the viewBox floor so the fill stays
    // opaque at the seam even when the SVG anti-aliases.
    return "M0,18 Q600,100 1200,18 L1200,124 L0,124 Z";
  }
  // Default: soft hill / bulge into the upper band.
  return "M0,78 Q600,20 1200,78 L1200,124 L0,124 Z";
}

/**
 * Soft arc edge between sections. Defaults to a soft bulge (hill); set
 * `invert` for a concave dip. Height tweens between `height` and
 * `scrollHeight` based on where the seam sits in the viewport. Place on
 * the upper section; `fill` matches the band below.
 */
export default function Bow({
  fill = "#fafafa",
  height = 16,
  scrollHeight = 256,
  invert = false,
  flip = false,
  className = "",
  style,
}: BowProps) {
  const rootRef = useRef<HTMLDivElement>(null);
  const path = buildPath(invert);

  useLayoutEffect(() => {
    const root = rootRef.current;
    if (!root) return;

    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    let frame = 0;
    let lastH = -1;
    const scrollParent = findScrollParent(root);
    const from = Math.max(0, height);
    const to = Math.max(0, scrollHeight);
    const animated = !reduced && from !== to;

    const paint = (t: number) => {
      const progress = Math.min(1, Math.max(0, t));
      // Integer px avoids subpixel SVG thrash (the "spazzing" hairline).
      const h = Math.round(from + (to - from) * progress);
      if (h === lastH) return;
      lastH = h;
      // Own height via a CSS variable React never writes, so parent
      // re-renders cannot snap the seam back to the rest height mid-scroll.
      root.style.setProperty("--dp-bow-h", `${h + SEAM_OVERLAP_PX}px`);
    };

    paint(0);
    if (!animated) return;

    const onScroll = () => {
      cancelAnimationFrame(frame);
      frame = requestAnimationFrame(() => {
        const rect = root.getBoundingClientRect();
        let viewTop = 0;
        let viewHeight = window.innerHeight || 1;
        if (scrollParent instanceof HTMLElement) {
          const parentRect = scrollParent.getBoundingClientRect();
          viewTop = parentRect.top;
          viewHeight = parentRect.height || 1;
        }
        // Bottom edge is stable while height grows upward from bottom-0.
        // 0 at the bottom of the pane, 1 near the top.
        const t = 1 - Math.min(1, Math.max(0, (rect.bottom - viewTop) / viewHeight));
        paint(t);
      });
    };

    onScroll();
    scrollParent.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      cancelAnimationFrame(frame);
      scrollParent.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
    };
  }, [height, scrollHeight]);

  return (
    <div
      ref={rootRef}
      aria-hidden
      className={`pointer-events-none absolute inset-x-0 -bottom-0.5 w-full overflow-hidden leading-[0] ${
        flip ? "rotate-180" : ""
      } ${className}`.trim()}
      style={{
        // Fallback covers SSR / first paint. The layout effect writes
        // `--dp-bow-h` via setProperty (not this object) so React re-renders
        // cannot snap the seam back to the rest height mid-scroll.
        height: `var(--dp-bow-h, ${height + SEAM_OVERLAP_PX}px)`,
        ...style,
      }}
    >
      <svg
        viewBox="0 0 1200 120"
        preserveAspectRatio="none"
        className="block h-full w-full"
        style={{ overflow: "visible" }}
      >
        <path fill={fill} d={path} />
      </svg>
    </div>
  );
}