[ PROMPT_NODE_27810 ]

sequencing

[ SKILL_DOCUMENTATION ]

使用 `` 来延迟元素在时间轴中出现的时间。 tsx import { Sequence } from "remotion"; const {fps} = useVideoConfig(); 默认情况下，这会将组件包裹在一个绝对定位的填充元素中。如果不需要包裹，请使用 `layout` 属性： tsx <Title /> ## 预挂载 (Premounting) 这会在组件实际播放前将其加载到时间轴中。请务必预挂载任何 ``！ tsx <Title /> ## 序列 (Series) 当元素需要一个接一个播放且不重叠时，使用 ``。 tsx import {Series} from 'remotion'; ; 与 `` 一样，使用 `` 时，项目默认会被包裹在绝对定位的填充元素中，除非将 `layout` 属性设置为 `none`。 ### 带重叠的序列使用负偏移量来实现重叠序列： tsx {/* 在 SceneA 结束前 15 帧开始 */} ## 序列内的帧引用在 Sequence 内部，`useCurrentFrame()` 返回本地帧（从 0 开始）： tsx {/* 在 MyComponent 内部，useCurrentFrame() 返回 0-29，而不是 60-89 */} ## 嵌套序列序列可以嵌套以实现复杂的定时： tsx <Title /> </div> </div>  <div class="bagua-source-footnote mt-3 pt-2 opacity-30" style="border-top: 1px solid rgba(0,0,0,0.04); font-size: 11px; line-height: 1.5; color: #666;"> 数据来源：claude-code-templates（MIT），中文翻译由 AI 生成。详见<a href="https://www.baguaai.com/zh/about-2/" class="text-reset" style="text-decoration: underline; text-decoration-color: rgba(0,0,0,0.15);">关于我们</a>。 </div> </article>   </div>  <div class="col-lg-4 px-0 px-lg-3"> <div class="glass-panel mcp-sidebar-panel p-4"> <div class="hud-section-header mb-4"> <span class="hud-section-bar"></span> <span class="tech-label text-mint mr-2">[ 参数注入 ]</span> </div> <div id="variable-inputs" class="mb-4"> <p class="small text-muted opacity-50">系统正在扫描 Prompt 中的变量...</p> </div>  <div class="glass-panel mcp-sidebar-panel p-4 mb-4" style="display:none; border-color: var(--accent-cyan);"> <div class="hud-section-header mb-3"> <span class="hud-section-bar" style="background: var(--accent-cyan);"></span> <span class="tech-label text-cyan mr-2">[ 安装与指令 ]</span> </div> <div id="skill-commands-box" class="x-small"></div> </div> <div class="tech-label x-small opacity-40 mb-3">使用指南:</div> <ul class="x-small text-secondary pl-3 opacity-60" style="list-style-type: square;"> <li class="mb-2">将其粘贴至 AI 终端或配置文件中。</li> </ul> </div>  <div class="sidebar-ad-wrapper glass-panel p-4 mt-4 d-none d-lg-block"> <div class="tech-label x-small opacity-30 mb-3">[ SPONSORED_LINK ]</div> <div id="ad_69f8f99175625" class="bagua-ad-wrapper" style="display:block; width:100%; min-width:300px; clear:both; margin:15px 0; text-align:center; min-height:90px; overflow:hidden;"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4273655063623153" data-ad-slot="7493214927" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (function(){ var el = document.getElementById("ad_69f8f99175625"); if (!el) return; function tryPush() { if (el.offsetWidth < 300 || el.offsetHeight === 0) return false; // 如果 ins 已被 deferHiddenAds 摘走，先放回来 if (el.dataset.baguaDeferred === "true" && el.dataset.baguaDeferredHtml) { el.insertAdjacentHTML("afterbegin", el.dataset.baguaDeferredHtml); delete el.dataset.baguaDeferred; delete el.dataset.baguaDeferredHtml; } var ins = el.querySelector("ins"); if (!ins || ins.getAttribute("data-adsbygoogle-status") || ins.getAttribute("data-bagua-pushed")) return true; ins.setAttribute("data-bagua-pushed", "true"); try { (window.adsbygoogle = window.adsbygoogle || []).push({}); } catch (e) {} return true; } if (tryPush()) return; // 等到容器可见且宽度足够时再 push（处理 tab 切换 / 延迟布局） if ("IntersectionObserver" in window) { var io = new IntersectionObserver(function(entries) { entries.forEach(function(en) { if (en.isIntersecting && tryPush()) io.disconnect(); }); }); io.observe(el); } if ("ResizeObserver" in window) { var ro = new ResizeObserver(function() { if (tryPush()) ro.disconnect(); }); ro.observe(el); } // 兜底：1s 后再尝试一次 setTimeout(tryPush, 1000); })(); </script> </div> </div> </div> </div> </div> </div> </div>  <link rel="stylesheet" href="https://www.baguaai.com/wp-content/themes/bagua-core/assets/vendor/prism/prism-bagua-mint.css?v=1"> <script src="https://www.baguaai.com/wp-content/themes/bagua-core/assets/vendor/marked/marked.min.js?v=12"></script> <script src="https://www.baguaai.com/wp-content/themes/bagua-core/assets/vendor/prism/prism-bundle.min.js?v=1.29.0"></script> <script> document.addEventListener('DOMContentLoaded', function() { // 1. Marked Configuration marked.use({ gfm: true, breaks: true, headerIds: true, mangle: false, headerPrefix: '' }); // 2. Render Markdown const markdownContainers = document.querySelectorAll('.hud-rich-content'); markdownContainers.forEach(container => { const rawContent = container.textContent.trim(); if (rawContent.includes('#') || rawContent.includes('|') || rawContent.includes('**') || rawContent.includes('- ')) { const html = marked.parse(rawContent); container.innerHTML = html; container.style.display = 'block'; if (window.Prism) Prism.highlightAllUnder(container); extractCommands(html); } }); function extractCommands(html) { const tempDiv = document.createElement('div'); tempDiv.innerHTML = html; const headers = tempDiv.querySelectorAll('h1, h2, h3, h4'); let commandHtml = ''; headers.forEach(header => { const text = header.textContent.toLowerCase(); if (text.includes('command') || text.includes('install') || text.includes('prerequisite')) { let sibling = header.nextElementSibling; commandHtml += `<div class="mb-3"><div class="tech-label x-small text-cyan opacity-80 mb-2">${header.textContent}</div>`; while (sibling && !['H1', 'H2', 'H3', 'H4'].includes(sibling.tagName)) { const clone = sibling.cloneNode(true); if (clone.tagName === 'PRE') clone.className += ' hud-code-mini'; commandHtml += clone.outerHTML; sibling = sibling.nextElementSibling; } commandHtml += `</div>`; } }); if (commandHtml) { const box = document.getElementById('skill-commands-box'); if (box) { box.innerHTML = commandHtml; box.closest('.glass-panel').style.display = 'block'; if (window.Prism) Prism.highlightAllUnder(box); } } } // 3. Prompt Variables const promptArea = document.getElementById('prompt-content'); if (promptArea) { const originalPrompt = promptArea.innerText; const inputContainer = document.getElementById('variable-inputs'); const vars = [...new Set(originalPrompt.match(/{{(.*?)}}/g))]; if(vars.length > 0) { inputContainer.innerHTML = ''; vars.forEach(v => { const varName = v.replace(/{{|}}/g, ''); const div = document.createElement('div'); div.className = 'form-group mb-3'; div.innerHTML = ` <label class="tech-label x-small opacity-50 d-block mb-2">${varName}</label> <input type="text" class="hud-btn-outline w-100 text-left prompt-input" style="cursor: text; padding: 10px; font-size: 14px;" data-var="${v}" placeholder="Enter ${varName}..."> `; inputContainer.appendChild(div); }); document.querySelectorAll('.prompt-input').forEach(input => { input.addEventListener('input', () => { let newPrompt = originalPrompt; document.querySelectorAll('.prompt-input').forEach(i => { newPrompt = newPrompt.split(i.dataset.var).join(i.value || i.dataset.var); }); promptArea.innerText = newPrompt; }); }); } else { inputContainer.innerHTML = '<p class="small text-muted opacity-50">No variables found.</p>'; } } // 4. Copy Logic const setupCopy = (btnId, textSourceId) => { const btn = document.getElementById(btnId); if (!btn) return; btn.addEventListener('click', function() { const text = textSourceId ? document.getElementById(textSourceId).innerText : promptArea.innerText; navigator.clipboard.writeText(text).then(() => { const label = this.querySelector('.hud-btn-label'); const old = label.innerText; label.innerText = this.dataset.copiedLabel || 'COPIED!'; setTimeout(() => { label.innerText = old; }, 2000); }); }); }; setupCopy('copy-btn'); setupCopy('copy-install-btn', 'install-cmd-text'); }); </script>   <div class="bottom-ad-wrapper mx-4 mb-4 d-none d-lg-block"> <div id="ad_69f8f9917566e" class="bagua-ad-wrapper" style="display:block; width:100%; min-width:300px; clear:both; margin:15px 0; text-align:center; min-height:90px; overflow:hidden;"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4273655063623153" data-ad-slot="8532837304" data-ad-format="autorelaxed"></ins> <script> (function(){ var el = document.getElementById("ad_69f8f9917566e"); if (!el) return; function tryPush() { if (el.offsetWidth < 300 || el.offsetHeight === 0) return false; // 如果 ins 已被 deferHiddenAds 摘走，先放回来 if (el.dataset.baguaDeferred === "true" && el.dataset.baguaDeferredHtml) { el.insertAdjacentHTML("afterbegin", el.dataset.baguaDeferredHtml); delete el.dataset.baguaDeferred; delete el.dataset.baguaDeferredHtml; } var ins = el.querySelector("ins"); if (!ins || ins.getAttribute("data-adsbygoogle-status") || ins.getAttribute("data-bagua-pushed")) return true; ins.setAttribute("data-bagua-pushed", "true"); try { (window.adsbygoogle = window.adsbygoogle || []).push({}); } catch (e) {} return true; } if (tryPush()) return; // 等到容器可见且宽度足够时再 push（处理 tab 切换 / 延迟布局） if ("IntersectionObserver" in window) { var io = new IntersectionObserver(function(entries) { entries.forEach(function(en) { if (en.isIntersecting && tryPush()) io.disconnect(); }); }); io.observe(el); } if ("ResizeObserver" in window) { var ro = new ResizeObserver(function() { if (tryPush()) ro.disconnect(); }); ro.observe(el); } // 兜底：1s 后再尝试一次 setTimeout(tryPush, 1000); })(); </script> </div></div> <div class="main-footer glass-panel mx-4 mb-4 mt-5 p-5"> <div class="footer-inner"> <div class="row align-items-center"> <div class="col-md-3 mb-4 mb-md-0"> <div class="tech-label x-small">[ SYSTEM_END_LOG ]</div> <h3 class="h5 font-weight-bold mt-2"> <a href="https://www.baguaai.com/zh/" class="text-reset text-decoration-none">BAGUA AI</a> </h3> <p class="tech-label x-small text-muted">© 2026 BaguaAI 运营中。所有节点已激活。</p> </div> <div class="col-md-6 mb-4 mb-md-0 text-md-center"> <div class="bagua-footer-nav d-flex justify-content-center flex-wrap text-sm mb-3"> <a href="https://www.baguaai.com/zh/about-2/" class="bagua-footer-link tech-label x-small mx-2"> 关于我们 </a> <a href="https://www.baguaai.com/zh/privacy-policy-zh/" class="bagua-footer-link tech-label x-small mx-2"> 隐私政策 </a> <a href="https://www.baguaai.com/zh/disclaimer-2/" class="bagua-footer-link tech-label x-small mx-2"> 免责声明 </a> </div> <div class="tech-label x-small text-muted">数据中心: GLOBAL_SYNC_01</div> </div> <div class="col-md-3 text-md-right"> <div class="tech-label mb-2">节点状态: <span class="text-mint">运行稳定</span></div> <div class="tech-label x-small opacity-50">安全加密链路已建立</div> </div> </div>  <div class="footer-terminal-line mt-5 pt-4 border-top opacity-50 text-center text-sm"> <div class="tech-label x-small mb-2">[ TERMINAL_LEGAL_INFO ]</div> Copyright © 2026 <a href="https://www.baguaai.com/zh" title="" class="" rel="home"></a> <a href="https://beian.miit.gov.cn/" target="_blank" class="" rel="link noopener">粤ICP备2024223044号-1</a> <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44030002003366" target="_blank" class="" rel="noopener"><img style="margin-bottom: 3px;" src="https://www.baguaai.com/wp-content/themes/bagua-core/images/gaba.png"> 粤公网安备44030002003366号</a> </div> </div> </div> </div> <footer> <div id="footer-tools" class="d-flex flex-column"> <a href="javascript:" id="go-to-up" class="btn rounded-circle go-up m-1" rel="go-top"> <i class="iconfont icon-to-up"></i> </a> <a href="javascript:" id="switch-mode" class="btn rounded-circle switch-dark-mode m-1"> <i class="mode-ico iconfont icon-light"></i> </a> </div> </footer> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/bagua-core/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script id="wp-emoji-settings" type="application/json"> {"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://www.baguaai.com/wp-includes/js/wp-emoji-release.min.js?ver=6.9.4"}} </script> <script type="module"> /* <![CDATA[ */ /*! This file is auto-generated */ const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))}); //# sourceURL=https://www.baguaai.com/wp-includes/js/wp-emoji-loader.min.js /* ]]> */ </script> </body> </html>