@bufinance/curtain-loader

BUFI's branded curtain preloader — a full-screen white overlay with a floating ghost, a multi-color LOADING… wordmark, and a ghost vector frame that lifts away like a theater curtain when the host page is ready.

It's a zero-runtime-dependency, pure-CSS-keyframe reimplementation of the marketing-site loader (which used framer-motion + GSAP for the identical visual). Every beat is preserved — ghost bob, blinking dots, the scale-then-lift curtain, staggered fades — while ~150KB of animation libraries is dropped. All assets (ghost GIF, frame SVG) are inlined, so the loader paints on the first frame with no network round-trips. React is the only peer dependency; it depends on no app's Tailwind config.

Usage

import { CurtainLoader } from '@bufinance/curtain-loader';

function Page() {
  const [ready, setReady] = useState(false);
  // …flip `ready` when your fonts/images/data are in.
  return (
    <>
      <CurtainLoader isLoading={!ready} onExited={() => console.log('revealed')} />
      <YourContent />
    </>
  );
}

isLoading is controlled: true shows the curtain; flipping it to false plays the lift-away exit, then the component unmounts and calls onExited. If isLoading is false on first render it renders nothing (no flash). prefers-reduced-motion is respected (idle loops and the curtain lift are skipped for a quick fade). Scroll is locked while the curtain is up.

Props

| Prop | Type | Default | Notes | | ------------ | --------------------------------------------- | ------------------------------------ | ------------------------------------------------- | | isLoading | boolean | — | true shows; false → play exit → unmount. | | onExited | () => void | — | Fires after the curtain finishes lifting. | | zIndex | number | 9999 | Overlay stacking order. | | fontFamily | string | var(--font-knicknack), system-ui… | Wordmark font. | | colors | { purple?; yellow?; pink? } | BUFI brand hex | Letter/dot colors. | | ghostSrc | string | inlined BUFI ghost GIF | Override the floating ghost image. | | className | string | — | Extra class on the root overlay. |

Assets

The floating ghost (src/ghost-gif.ts) is auto-generated from apps/web/public/assets/gif/GIF-BUFI.gif; the frame path is inlined from apps/web/public/assets/bu-vector-frame.svg. Regenerate the GIF constant with:

base64 -i <GIF-BUFI.gif> | tr -d '\n'   # wrap in the data:image/gif;base64, prefix