{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"char-cascade","type":"registry:block","title":"char cascade","description":"\"headline enters with 07\" — each character rises with a tiny rotation, staggered. The classic hero move.","author":"Motion Menu","categories":["role-hero","text","gsap"],"dependencies":["gsap"],"registryDependencies":["@motionmenu/motion-menu-runtime"],"meta":{"number":"07","slug":"char-cascade","framework":"react","docs":"https://motion-menu-two.vercel.app/p/char-cascade.md"},"files":[{"path":"motion-menu/char-cascade.html","type":"registry:file","target":"motion-menu/char-cascade.html","content":"
\n
07

Char cascade

GSAP
React ↗
\n
\n \n

Letters arrive

\n
\n

Say: \"headline enters with 07\" — each character rises with a tiny rotation, staggered. The classic hero move.

\n
"},{"path":"motion-menu/char-cascade.css","type":"registry:file","target":"motion-menu/char-cascade.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.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/* 07 char cascade */\n .split-heading { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; text-transform: uppercase; }\n\n.split-heading .ch { display: inline-block; will-change: transform; }\n\n.ai-card .num { color: var(--acc2) !important; }\n\n.vf-word .ch { display: inline-block; font-variation-settings: 'wght' 300; }\n\n.blur-heading .ch { display: inline-block; }\n\n.wave-text .ch { display: inline-block; }\n\n.grav-word .ch { display: inline-block; will-change: transform; }\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/char-cascade.tsx","type":"registry:component","content":"// @ts-nocheck — generated wrapper; inlined pattern JS is imperative DOM code, not authored TS.\n\"use client\";\n// char cascade — Motion Menu\n// Calls the Motion Menu shared runtime (webglDemo / canvas2dDemo / art helpers).\n// Install `motion-menu-runtime` and mount it once at the app root, or the effect\n// below throws ReferenceError on first paint.\nimport { useEffect, useRef } from \"react\";\n\nconst MARKUP = \"
\\n
07

Char cascade

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

Letters arrive

\\n
\\n

Say: \\\"headline enters with 07\\\" \\u2014 each character rises with a tiny rotation, staggered. The classic hero move.

\\n
\";\n\nexport function CharCascade() {\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 /* ============ 07 · char cascade ============ */\n function splitChars(el) {\n const text = el.dataset.text || el.textContent;\n el.dataset.text = text;\n el.setAttribute('aria-label', text);\n el.textContent = '';\n const spans = [];\n for (const ch of text) {\n const s = document.createElement('span');\n s.className = 'ch';\n s.textContent = ch === ' ' ? ' ' : ch;\n s.setAttribute('aria-hidden', 'true');\n el.appendChild(s);\n spans.push(s);\n }\n return spans;\n }\n const charSpans = splitChars(document.getElementById('chars-target'));\n function playChars() {\n gsap.fromTo(charSpans,\n { yPercent: 120, rotate: 8, opacity: 0 },\n { yPercent: 0, rotate: 0, opacity: 1, duration: 0.9, ease: 'power3.out', stagger: 0.028 });\n }\n document.getElementById('replay-chars').addEventListener('click', playChars);\n ScrollTrigger.create({ trigger: '#chars-target', start: 'top 85%', onEnter: playChars, once: true });\n } catch (err: any) {\n console.warn(\"[motion-menu] char-cascade 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 CharCascade;\n"}]}