Auto Height

npm install motion clsx tailwind-merge

import { clsx, type ClassValue } from "clsx";
import { extendTailwindMerge } from "tailwind-merge";

/* tailwind-merge must know the site's type scale (globals.css) is a font size, not a text color — otherwise
   cn("text-h6 text-muted-foreground") drops text-h6. */
const twMerge = extendTailwindMerge({
  extend: { classGroups: { "font-size": [{ text: ["display", "h1", "h2", "h3", "h4", "h5", "h6"] }] } },
});

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

"use client";

import * as React from "react";
import { animate, motion, useMotionValue, type AnimationPlaybackControls } from "motion/react";
import { cn } from "@/lib/utils";

/*
 * Auto Height — a box that grows or shrinks to the height of its content when the content changes, instead of jumping
 * (from the Compose Digi plan card: its Weekly / Monthly switch swaps the list and the price, and the card follows on
 * spring S2, bounce 0.2, duration 0.4s, with a slight overshoot).
 *
 * Put the box's own look on it (`className`: background, border, radius, padding): the height it animates includes its padding
 * and border, which are read once the box is on screen. It animates only when the content changes. When the width changes (a
 * window being resized, a column re-flowing) the height follows at once, because a spring chasing a drag would lag.
 * While it moves the box clips its content; at rest it clips nothing, so a focus ring or a shadow at its edge shows.
 *
 * The server renders the box at its natural height, with no inline height, so nothing is wrong without JavaScript or before
 * hydration; the height is measured before the first paint and the box never moves on its own at that point. Reduced motion
 * jumps: `animate()` is imperative, so MotionConfig would not stop it, and this reads the preference itself, in the
 * effect, never while rendering.
 */

export type AutoHeightProps = {
  className?: string;
  /** Spring bounce: 0 settles without overshoot, 0.2 (Compose Digi's) overshoots a little. */
  bounce?: number;
  /** Seconds the move takes. */
  duration?: number;
  children: React.ReactNode;
};

export function AutoHeight({ className, bounce = 0.2, duration = 0.4, children }: AutoHeightProps) {
  const box = React.useRef<HTMLDivElement>(null);
  const content = React.useRef<HTMLDivElement>(null);
  const height = useMotionValue(0);
  const [ready, setReady] = React.useState(false);
  const [moving, setMoving] = React.useState(false);
  /* The height the box is heading for, the width it was measured at, and the move under way. */
  const target = React.useRef(0);
  const width = React.useRef(0);
  const controls = React.useRef<AnimationPlaybackControls | null>(null);

  React.useLayoutEffect(() => {
    const outer = box.current;
    const inner = content.current;
    if (!outer || !inner) return;

    /* What the box adds to its content: its padding and border, since the height is the border box's. */
    const extra = () => {
      const style = getComputedStyle(outer);
      return ["paddingTop", "paddingBottom", "borderTopWidth", "borderBottomWidth"].reduce((sum, key) => sum + parseFloat(style[key as "paddingTop"]), 0);
    };
    /* The content's height, in layout pixels: the observer's own figure when it has one (fractional), else offsetHeight. Neither
       is changed by a transform on an ancestor, which getBoundingClientRect would be (a scaled preview, a page transition). */
    const measure = (entry?: ResizeObserverEntry) => (entry ? entry.contentRect.height : inner.offsetHeight) + extra();

    const settle = (next: number, immediate: boolean) => {
      controls.current?.stop();
      target.current = next;
      if (immediate) {
        height.jump(next);
        setMoving(false);
        return;
      }
      setMoving(true);
      controls.current = animate(height, next, { type: "spring", bounce, duration, onComplete: () => setMoving(false) });
    };

    height.jump(measure());
    target.current = height.get();
    width.current = inner.offsetWidth;
    setReady(true);

    const observer = new ResizeObserver(([entry]) => {
      const next = measure(entry);
      const wide = inner.offsetWidth;
      const resized = Math.abs(wide - width.current) > 0.5;
      width.current = wide;
      if (Math.abs(next - target.current) < 0.5) return;
      settle(next, resized || window.matchMedia("(prefers-reduced-motion: reduce)").matches);
    });
    observer.observe(inner);
    return () => {
      observer.disconnect();
      controls.current?.stop();
    };
  }, [height, bounce, duration]);

  return (
    <motion.div ref={box} style={ready ? { height } : undefined} className={cn("flow-root", moving ? "overflow-hidden" : "overflow-visible", className)}>
      <div ref={content} className="flow-root">
        {children}
      </div>
    </motion.div>
  );
}