{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"reveal-scroll","type":"registry:block","title":"reveal on scroll","description":"\"default entrance = 14\" — the workhorse. Everything that doesn't have a fancier entrance gets this.","author":"Motion Menu","categories":["role-content","scroll","gsap"],"dependencies":["gsap"],"registryDependencies":[],"meta":{"number":"14","slug":"reveal-scroll","framework":"react","docs":"https://motion-menu-two.vercel.app/p/reveal-scroll.md"},"files":[{"path":"motion-menu/reveal-scroll.html","type":"registry:file","target":"motion-menu/reveal-scroll.html","content":"<article class=\"card\">\n        <header><span class=\"num\">14</span><h3>Reveal on scroll</h3><div class=\"tags\"><i>ScrollTrigger</i></div><a class=\"format-action\" data-format-link data-pattern-slug=\"reveal-scroll\" href=\"/r/reveal-scroll.json?framework=react\" title=\"Open the React registry output\">React ↗</a></header>\n        <div class=\"demo\">\n          <div class=\"reveal-stack\">\n            <div class=\"r-item\" data-reveal>Every block on this page enters like this.</div>\n            <div class=\"r-item\" data-reveal>Slide up + fade, 40px, power3.out.</div>\n            <div class=\"r-item\" data-reveal>Reverses when you scroll back past it.</div>\n          </div>\n        </div>\n        <p class=\"order\">Say: <b>\"default entrance = 14\"</b> — the workhorse. Everything that doesn't have a fancier entrance gets this.</p>\n      </article>"},{"path":"motion-menu/reveal-scroll.css","type":"registry:file","target":"motion-menu/reveal-scroll.css","content":".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.demo .btn.corner { position: absolute; top: 12px; right: 12px; padding: .55em 1em; font-size: .68rem; z-index: 5; }\n\n/* 14 reveal */\n  .reveal-stack { display: flex; flex-direction: column; gap: .9rem; width: 78%; }\n\n.reveal-stack .r-item { border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.2rem; background: rgba(255,255,255,.02); font-size: .9rem; color: var(--dim); }\n\n.ai-card .num { color: var(--acc2) !important; }\n\n.demo:has(.hascheck input:checked) .hasbtn { border-color: var(--acc); color: var(--acc); pointer-events: auto; opacity: 1; }"},{"path":"components/motion-menu/reveal-scroll.tsx","type":"registry:component","content":"// @ts-nocheck — generated wrapper; inlined pattern JS is imperative DOM code, not authored TS.\n\"use client\";\n// reveal on scroll — Motion Menu\nimport { useEffect, useRef } from \"react\";\n\nconst MARKUP = \"<article class=\\\"card\\\">\\n        <header><span class=\\\"num\\\">14</span><h3>Reveal on scroll</h3><div class=\\\"tags\\\"><i>ScrollTrigger</i></div><a class=\\\"format-action\\\" data-format-link data-pattern-slug=\\\"reveal-scroll\\\" href=\\\"/r/reveal-scroll.json?framework=react\\\" title=\\\"Open the React registry output\\\">React \\u2197</a></header>\\n        <div class=\\\"demo\\\">\\n          <div class=\\\"reveal-stack\\\">\\n            <div class=\\\"r-item\\\" data-reveal>Every block on this page enters like this.</div>\\n            <div class=\\\"r-item\\\" data-reveal>Slide up + fade, 40px, power3.out.</div>\\n            <div class=\\\"r-item\\\" data-reveal>Reverses when you scroll back past it.</div>\\n          </div>\\n        </div>\\n        <p class=\\\"order\\\">Say: <b>\\\"default entrance = 14\\\"</b> \\u2014 the workhorse. Everything that doesn't have a fancier entrance gets this.</p>\\n      </article>\";\n\nexport function RevealScroll() {\n  const hostRef = useRef<HTMLDivElement>(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        /* ============ 14 · reveal on scroll ============ */\n        gsap.utils.toArray('[data-reveal]').forEach((el) => {\n          gsap.from(el, {\n            y: 40, opacity: 0, duration: 1, ease: 'power3.out',\n            scrollTrigger: { trigger: el, start: 'top 88%', toggleActions: 'play none none reverse' },\n          });\n        });\n      } catch (err: any) {\n        console.warn(\"[motion-menu] reveal-scroll failed to start:\", err);\n      }\n    })();\n\n    return () => {\n      disposed = true;\n      cleanup.forEach((fn) => { try { fn(); } catch (_) {} });\n    };\n  }, []);\n\n  return <div ref={hostRef} dangerouslySetInnerHTML={{ __html: MARKUP }} />;\n}\n\nexport default RevealScroll;\n"}]}