{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"preloader","type":"registry:block","title":"preloader","description":"\"open with 03\" — counter climbs 0→100 while assets load, curtain lifts, page breathes in.","author":"Motion Menu","categories":["role-hero","global","feel","gsap"],"dependencies":["gsap"],"registryDependencies":[],"meta":{"number":"03","slug":"preloader","framework":"react","docs":"https://motion-menu-two.vercel.app/p/preloader.md"},"files":[{"path":"motion-menu/preloader.html","type":"registry:file","target":"motion-menu/preloader.html","content":"
\n
03

Preloader

GSAP
React ↗
\n
\n \n
\n

Say: \"open with 03\" — counter climbs 0→100 while assets load, curtain lifts, page breathes in.

\n
"},{"path":"motion-menu/preloader.css","type":"registry:file","target":"motion-menu/preloader.css","content":"/* ---------- 03 preloader ---------- */\n #preloader {\n position: fixed; inset: 0; background: #060609; color: #fff;\n display: none; flex-direction: column; align-items: center; justify-content: center;\n z-index: 9000; gap: 1.2rem;\n }\n\n.pre-num { font: 600 5rem/1 var(--sans); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }\n\n.pre-bar { width: 240px; height: 1px; background: rgba(255,255,255,.12); }\n\n.pre-fill { height: 100%; background: var(--acc); width: 0%; }\n\n.pre-tag { font: 400 .7rem/1 var(--mono); color: var(--dim); letter-spacing: .3em; text-transform: uppercase; }\n\n.card {\n border: 1px solid var(--line); border-radius: 14px; background: var(--card);\n overflow: hidden; display: flex; flex-direction: column;\n }\n\n.card > header { display: flex; align-items: baseline; gap: .8rem; padding: 1.1rem 1.2rem .9rem; border-bottom: 1px solid var(--line); }\n\n.card .num { font-family: var(--mono); color: var(--acc); font-size: 1.05rem; }\n\n.card h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; flex: 1; }\n\n.tags { display: flex; gap: .35rem; }\n\n.tags i {\n font: 400 .62rem/1 var(--mono); font-style: normal; color: var(--dim);\n border: 1px solid var(--line); border-radius: 99px; padding: .28em .6em; white-space: nowrap;\n }\n\n.demo {\n min-height: 250px; position: relative; display: flex; align-items: center; justify-content: center;\n background: var(--bg2); overflow: hidden; flex: 1;\n }\n\n.order { padding: .85rem 1.2rem; font-family: var(--mono); font-size: .72rem; color: var(--dim); border-top: 1px solid var(--line); }\n\n.order b { color: var(--txt); font-weight: 500; }\n\n.btn {\n font: 500 .8rem/1 var(--mono); color: var(--txt); background: transparent;\n border: 1px solid rgba(255,255,255,.25); border-radius: 99px; padding: .8em 1.6em;\n transition: border-color .3s;\n }\n\n.btn:hover { border-color: var(--acc); color: var(--acc); }\n\n.demo .btn.corner { position: absolute; top: 12px; right: 12px; padding: .55em 1em; font-size: .68rem; z-index: 5; }\n\n.ai-card .num { color: var(--acc2) !important; }\n\n.brief a.btn { text-decoration: none; text-align: center; }\n\n.demo:has(.hascheck input:checked) .hasbtn { border-color: var(--acc); color: var(--acc); pointer-events: auto; opacity: 1; }"},{"path":"components/motion-menu/preloader.tsx","type":"registry:component","content":"// @ts-nocheck — generated wrapper; inlined pattern JS is imperative DOM code, not authored TS.\n\"use client\";\n// preloader — Motion Menu\nimport { useEffect, useRef } from \"react\";\n\nconst MARKUP = \"
\\n
03

Preloader

GSAP
React \\u2197
\\n
\\n \\n
\\n

Say: \\\"open with 03\\\" \\u2014 counter climbs 0\\u2192100 while assets load, curtain lifts, page breathes in.

\\n
\";\n\nexport function Preloader() {\n const hostRef = useRef(null);\n\n useEffect(() => {\n const host = hostRef.current;\n if (!host) return;\n const $ = (s: string) => host.querySelector(s) as HTMLElement | null;\n let disposed = false;\n const cleanup: Array<() => void> = [];\n\n (async () => {\n if (disposed) return;\n try {\n /* ============ 03 · preloader ============ */\n const pre = document.getElementById('preloader');\n function runPreloader() {\n gsap.set(pre, { display: 'flex', autoAlpha: 1, yPercent: 0 });\n const n = { v: 0 };\n const numEl = pre.querySelector('.pre-num');\n const fill = pre.querySelector('.pre-fill');\n gsap.timeline()\n .to(n, { v: 100, duration: 1.3, ease: 'power2.inOut',\n onUpdate: () => { numEl.textContent = Math.round(n.v); fill.style.width = n.v + '%'; } })\n .to(pre, { yPercent: -100, duration: 0.9, ease: 'power4.inOut' }, '+=0.15')\n .set(pre, { autoAlpha: 0, display: 'none' })\n .add(introReveal, '-=1.2');\n }\n function introReveal() {\n gsap.fromTo('.hero-line', { yPercent: 60, opacity: 0 },\n { yPercent: 0, opacity: 1, duration: 1.2, ease: 'power3.out', stagger: 0.12 });\n gsap.fromTo('.hero .sub', { y: 30, opacity: 0 }, { y: 0, opacity: 1, duration: 1, delay: 0.5, ease: 'power3.out' });\n }\n document.getElementById('replay-preloader').addEventListener('click', runPreloader);\n introReveal();\n } catch (err: any) {\n console.warn(\"[motion-menu] preloader failed to start:\", err);\n }\n })();\n\n return () => {\n disposed = true;\n cleanup.forEach((fn) => { try { fn(); } catch (_) {} });\n };\n }, []);\n\n return
;\n}\n\nexport default Preloader;\n"}]}