Load Rise

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));
}

import * as React from "react";
import { cn } from "@/lib/utils";

/*
 * Load Rise — a block that rises into place as the page paints, once (from the Semono page-load intro, which is Framer's
 * own: the header and the hero's label, title, lead and buttons). It comes up 60px out of nothing along spring E
 * (stiffness 250, damping 55, mass 2.9: about a second, 960ms on Framer's measurement), `delay` seconds late — a hero
 * staggers its parts 0.1, 0.2, 0.4 and 0.5s.
 *
 * It is plain CSS, so it starts with the first paint, before any script has loaded, and a page without scripts shows
 * its content. That is what the other appear effects cannot do: text-appear and scroll-reveal start when the page
 * hydrates, and their content waits at opacity 0 until then. Use this for what is on screen as the page opens; use those
 * for what comes into view later. Do not wrap one in the other.
 *
 * The spring is a CSS linear() curve — 29 stops measured on Framer, within 1% of what tools/ui/spring-curve.mjs makes from
 * the same physics; a browser without linear() (before Chrome 113, Firefox 112, Safari 17.2) gets cubic-bezier(0.22, 1,
 * 0.36, 1). Reduced motion: the same fade without the rise. Print: no animation, so a printed page is never half drawn.
 *
 * The rules live in one <style>, which React 19 moves to the head once however many blocks use it (href + precedence).
 */

const CSS = `@keyframes fb-load-rise{from{opacity:.001;transform:translateY(var(--load-rise-distance,60px))}}
@keyframes fb-load-fade{from{opacity:.001}}
[data-load-rise]{animation:fb-load-rise 960ms cubic-bezier(.22,1,.36,1) backwards;animation-timing-function:linear(0,.041,.134,.247,.361,.469,.564,.646,.715,.772,.819,.857,.887,.911,.93,.946,.958,.967,.974,.98,.984,.988,.991,.993,.994,.996,.997,.997,1)}
@media (prefers-reduced-motion:reduce){[data-load-rise]{animation-name:fb-load-fade}}
@media print{[data-load-rise]{animation:none}}`;

export type LoadRiseProps = {
  /** The element to render. */
  as?: "div" | "section" | "header" | "h1" | "h2" | "h3" | "p" | "span" | "ul" | "li" | "figure" | "nav";
  /** Seconds before it starts. */
  delay?: number;
  /** How far it rises, in px. */
  distance?: number;
  className?: string;
  children?: React.ReactNode;
};

export function LoadRise({ as: Tag = "div", delay = 0, distance = 60, className, children }: LoadRiseProps) {
  return (
    <>
      <style href="framebrick-load-rise" precedence="default">
        {CSS}
      </style>
      <Tag
        data-load-rise=""
        className={cn(className)}
        style={{ animationDelay: `${delay}s`, ["--load-rise-distance" as string]: `${distance}px` }}
      >
        {children}
      </Tag>
    </>
  );
}