HyperFrames Slack Notification Ad 模板编辑契约：安全改写 iOS 锁屏通知广告块

HyperFrames Slack Notification Ad 模板编辑契约安全改写 iOS 锁屏通知广告块【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读Slack Notification Ad是 HyperFrames 开源仓库中一个 1080×1920 竖屏广告模板块一条 iOS 锁屏被不断涌入的 Slack 视频会议请求填满最终由被推广品牌本人HeyGen发来收尾通知完成广告 payoff。本文以该块的 TEMPLATE.md 编辑契约为核心骨架结合其组合源码与 HyperFrames 变量体系完整讲解哪些内容可以改、哪些元素绝不可动、为什么必须通过set_template_variable_defaults而非直接编辑 HTML 来改写以及底层时间线与堆叠几何是如何支撑这套约束的。读完你既能安全地为任意品牌 remix 该广告也能理解 HyperFrames 模板契约类块chatgpt-exchange、claude-exchange、notification-cascade等的通用编辑规则。模板块概览一段 12 秒的锁屏叙事该块注册在仓库的 registry-item.json 中类型为hyperframes:block核心组合文件是 slack-notification-ad.html元数据字段值nameslack-notification-adtitleSlack Notification Adtypehyperframes:blocktagsshowcase、mock-ui、notification、vertical、ad-templatedimensions宽 1080 × 高 1920竖屏duration12 秒fps60组合根节点data-fps60声明组合根节点上声明了data-composition-idslack-notification-ad、data-start0、data-duration12并引入 GSAP 3.14.2 驱动动画。从 slack-notification-ad.html 的CONFIG可以看到完整叙事11 条 Slack 通知依次到达Sender/Message 对随后第 12 条是由被推广品牌发出的 payoff 通知。到达时间点在T.arrivals数组中逐步加密1.15s 起间隙从 2.6s 递减到 0.3s 左右营造需求越积越多的戏剧张力正如块描述所写A portrait lock screen fills with escalating Slack video requests before HeyGen delivers the payoff。表面归属谁拥有屏幕上的什么TEMPLATE.md 的第一节明确了整块广告的所有权边界这是后续一切编辑规则的总前提Slack 拥有请求通知request notifications这一层iOS 拥有设备 chrome状态栏、日期、时钟、锁屏挂件、底部控制键、Home Bar 等。被推广网站的内容只出现在两个地方声明的通知文案declared notification copy以及最终 payoff 通知中承载品牌名的身份final payoff identity。除此之外的任何位置都不应出现品牌内容。这个 remix 本质上是为该品牌的广告payoff 通知携带该品牌的真实名称与它自己的 marklogo。换句话说块内同时存在平台界面Slack/iOS与广告主内容品牌文案与 logo两套身份编辑时必须始终区分二者不能把品牌的颜色与字体扩散到平台 shell 上。可编辑槽位25 个变量是唯一入口TEMPLATE.md 声明只有data-composition-variables中声明的默认值defaults是可编辑的。对照 slack-notification-ad.html该块共声明 25 个变量11 组请求标题与消息22 个string变量request1Title~request11Title表示每条 Slack 通知的发送者或频道可为人名也可为#social、#sales等频道名request1Text~request11Text为对应的通知消息正文。payoff 三要素3 个变量payoffTitle收尾通知的发送者即被推广品牌的真实名称、payoffText品牌发来的消息、payoffIcon品牌 mark类型为image默认指向assets/img/heygen-mark.svg。关键变量一览默认值即原样来自data-composition-variables变量 id类型含义默认值request1Titlestring第 1 条通知发送者/频道Sarah Chenrequest1Textstring第 1 条通知消息Hey! Any chance you could get the launch video done by Friday?request2Titlestring第 2 条通知发送者/频道Marcus Webbrequest3Titlestring第 3 条通知发送者/频道#socialrequest4Titlestring第 4 条通知发送者/频道Dana Okaforrequest5Titlestring第 5 条通知发送者/频道#salesrequest6Titlestring第 6 条通知发送者/频道Leila Haddadrequest7Titlestring第 7 条通知发送者/频道#eventsrequest8Titlestring第 8 条通知发送者/频道Miguel Reyesrequest9Titlestring第 9 条通知发送者/频道#marketingrequest10Titlestring第 10 条通知发送者/频道Raj Patelrequest11Titlestring第 11 条通知发送者/频道Ben LiupayoffTitlestringpayoff 发送者品牌真实名HeyGenpayoffTextstringpayoff 消息Heard you needed some videos?payoffIconimagepayoff logo品牌 markassets/img/heygen-mark.svg其中payoffTitle额外声明了portrays: [subject_name, recommended_position]payoffIcon声明了portrays: [subject_logo]。按 HyperFrames 变量系统 的约定portrays是给编辑 Agent 的语义元数据它表明这些槽位承载的是被推广品牌的身份真名、logo绝不能用编造的名字或他人 logo 填充。而 11 条请求通知没有portrays因为它们属于被叙述的内容可以自由改写——前提是遵守下一节的文案约束。文案约束20% 长度红线与 logo 可读性TEMPLATE.md 对替换文案给出两条硬性要求替换文案长度须控制在原长度的 20% 以内Keep replacement copy within 20% of the original length。原因可从源码推断通知卡片是固定 98px 高的统一 slab正文使用-webkit-line-clamp: 2两行截断见 slack-notification-ad.html文字过长会被裁剪、过短会破坏堆叠节奏——保持接近原长度才能维持既有的排版与动效。payoff logo 必须在现有图标 tile 中保持清晰可读。图标 tile 为 38×38pt、圆角 9pt 的白底方块内部图片固定 24×24pt见 slack-notification-ad.html所以传入的 logo 必须在该尺寸下依然可辨认。安全编辑机制为什么不能直接改 HTMLTEMPLATE.md 的Safe editing mechanics是全篇的实操核心它规定了唯一的合法改写路径调用一次set_template_variable_defaults传入已有的变量 id 与它们的新默认值。禁止直接编辑或重写index.html及其data-composition-variables属性。原因写得很明确组合文件中导入的声明是HTML 实体编码的 JSONHTML-entity-encoded JSON而该 setter 会保留这种编码——手工重写极易破坏编码导致组合声明在渲染或 lint 时失效。绝不编辑__template_baseline__.html或任何重复的组合文件duplicate composition file。baseline 是模板的基准快照编辑它会破坏模板与实例之间的契约。payoff logo 只接受图片工具返回的 token而不是任意路径或手写 URL——这保证 logo 素材经过工具校验、可被渲染管线解析。setter 成功后必须验证Validate after the setter succeeds确认改写后的值已正确生效。这套机制与 HyperFrames 的变量系统一脉相承data-composition-variables是组合的已批准输入声明Agent 或编辑器只改声明中的默认值而结构、动画、布局一律不动。正如 变量系统文档 所强调的Use a variable when the design should remain stable across versions. Make a normal source edit when the structure itself needs to change.——改写文案属于前者必须走变量通道只有结构级变更才属于源码编辑而契约明确禁止对该块做结构级源码编辑。从运行侧看变量值最终通过window.__hyperframes.getVariables()注入运行时见 slack-notification-ad.htmlCONFIG中的每条通知都用content(requestNTitle, 默认值)形式取用变量有值时用变量值否则回退到默认值。这也解释了为什么只改默认值是安全的——渲染时变量覆盖会自然取代默认值。Protected绝不可动的部分TEMPLATE.md 的Protected一节列出了 remix 时必须原样保留的资产清单它们共同构成该广告块的平台真实感Slack 请求通知上的Slack markassets/img/slack-mark.svgiOS 的状态栏、日期、时钟标签status/date/clock labels、锁屏挂件、壁纸、通知 chrome卡片圆角、毛玻璃背景、阴影等字体、调色板、堆叠几何stacking geometry、场景结构、时长、时序、缓动、到达节奏arrival cadence网站的配色与排版绝不允许被应用到 Slack 或 iOS shell 上——平台层与品牌层必须保持视觉隔离。这些 Protected 元素在源码中都能一一对应壁纸是多层径向渐变叠加噪点纹理的 iOS 风深色渐变slack-notification-ad.html锁屏时钟在 9:41 → 9:42 → 9:45 → 9:51 间硬切换T.clockSwaps [4.6, 6.54, 8.11]L518-L526字体用 Inter 作为不可再分发的 SF Pro 的 OFL 替代品L38-L57。任何对这批元素的手工改动都会破坏这是真实 iOS 锁屏 真实 Slack的拟真基础。底层实现佐证堆叠几何与到达节奏理解受保护清单背后的动效逻辑有助于编辑时避免看似无害的破坏。源码中几处关键实现直接决定了哪些值能改、改到什么程度卡片堆叠几何PEEK 8每层深度露出 8pt 的卡片下沿、DEPTH_SCALE 0.045纵深缩放系数、MAX_PEEKS 2仅前两层可见、更深层淡出见 slack-notification-ad.html。新卡片从屏幕底部滚动进入iOS 式 roll-inENTER_FROM到达时所有旧卡片同帧重新定深stateAt函数与REDEPTH_DUR 0.5因此 12 条通知能在不重叠文字的前提下越叠越高。到达节奏T.arrivals [1.15, 3.75, 4.6, 5.34, 5.98, 6.54, 7.02, 7.44, 7.8, 8.11, 8.38, 8.88]——前两条间隔较长模拟真实通知间隙随后节奏逐步加密最后一条 Slack 通知与 payoff 之间刻意拉开 0.5s 的戏剧性停顿。契约要求保留到达节奏正是因为这组时间点本身就是广告叙事的一部分。字体度量依赖源码注释明确指出卡片高度必须在真实 webfont 加载完成后测量否则回退字体的换行差异会毒化堆叠计算L558-L560。这也解释了 20% 文案长度约束为何如此重要——行数变化会直接改变测量高度并波及所有堆叠位置。时序声明方式整个组合使用data-start/data-duration/data-track-index等数据属性承载时间轴契约见 数据属性文档动画细节进入、重新定深、淡入淡出、时钟切换则由 GSAP 时间线在data-duration12的窗口内编排与根节点data-fps60共同决定最终帧序列。验证与工作流衔接TEMPLATE.md 要求 setter 成功后进行验证HyperFrames 为此提供了配套校验手段对组合运行npx hyperframes lint可捕获声明格式错误、字段缺失、默认值类型错误等问题渲染时配合--strict-variables可把未声明或类型不符的变量值升级为错误详见 变量系统文档 的Check the contract一节与 CLI 参考。整体编辑流程可归纳为从data-composition-variables中读取 25 个变量 id 与其当前默认值在 20% 长度约束内为品牌拟定替换文案11 组请求 payoff 标题/消息通过图片工具获取品牌 logo token用于payoffIcon调用一次set_template_variable_defaults批量提交不触碰 HTML 源文件验证 setter 结果再执行 lint 与渲染确认。小结Slack Notification Ad的 TEMPLATE.md 是一份精炼但完整的模板编辑契约它以表面归属划定平台层与品牌层的边界以25 个变量锁定唯一改写入口以安全编辑机制强制走set_template_variable_defaults通道以Protected 清单守护 iOS 锁屏与 Slack 的拟真细节。理解这份契约你不仅能为任意品牌安全产出锁屏通知风格的竖屏广告也掌握了 HyperFrames 模板类块通用的改内容、不动结构的编辑哲学——同样的规则同样适用于仓库中chatgpt-exchange、claude-exchange、message-thread-reveal、notes-reveal、notification-cascade、share-sheet-carousel等契约驱动的模板块。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考