Loader

Loader plays a cinematic entrance animation using GSAP timelines. A heart pulses, two eye pieces sweep in and spin, then a mouth bar expands to fill the screen before a cloak reveal transitions out. Ambient audio cues are fired at key moments via the useAudio hook.

The component fills min-h-screen and is designed to be conditionally mounted at the top of a page or layout. Pass onAnimationComplete to unmount it once the sequence finishes (~7 s total).

SSR note — Loader is "use client" and references window.innerWidth. Do not render it on the server; wrap the mount point in a dynamic(() => import(...), { ssr: false }) import if needed.

Installation

npx shadcn@latest add @adv/loader

Usage

import dynamic from 'next/dynamic';
import { useState } from 'react';

const Loader = dynamic(() => import('@/components/loader'), { ssr: false });

export default function Page() {
  const [loading, setLoading] = useState(true);

  return loading ? (
    <Loader onAnimationComplete={() => setLoading(false)} />
  ) : (
    <main>…your page…</main>
  );
}

Example

Props