HyperFrames trust-strip 组件实战用单色 Logo 信任条制作证明与数据短视频段【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframestrust-strip 是 HyperFrames 视频组件库中的一款信任/Logo 条动效原语proof stats 家族quiet-proof 画像用于在 3.5 秒的短片段中展示客户 Logo、合作伙伴或数据品牌的文字标记。本文基于 registry/components/trust-strip/README.md 及其配套源码完整讲解该组件的视觉规格、五个可配置变量、时间包络Envelope原理、主题 Token 契约与挂载方式读完即可在自己的 HyperFrames 组合中直接复刻并使用这条干净利落的单色信任条。组件定位Monochrome Trust/Logo Striptrust-strip 的核心设计目标是安静地证明。它把一串品牌词标wordmark排成一行用大写等宽字体、宽字距、单行居中、宽间隙呈现没有色块、没有边框保持通篇单色monochrome仅在细微处融入场景调色板的一丝淡彩从而在证明与数据类视频段如产品发布会中的客户 Logo 墙、演示结尾的合作伙伴鸣谢中既可信又不抢戏。从注册清单 registry/components/trust-strip/registry-item.json 可以看到它的元信息family为proof-and-statsprofile为quiet-proofjobs为prove标签包括motion-primitive、proof、trust、logo-strip、wordmarks并声明了一个同步点strip-complete位于入场阶段偏移 1.3s供宿主组合在整条信任条完全出现后衔接下一镜头。视觉规格与动效设计组件源码 registry/components/trust-strip/trust-strip.html 中动效与排版规格由以下要点构成排版每个 mark 使用font-family: var(--font-mono, ui-monospace, SF Mono, Menlo, Consolas, monospace)字号为min(1.9cqw, 6.4cqh)随挂载容器自适应font-weight: 400letter-spacing: 0.32em宽字距text-transform: uppercase强制大写white-space: nowrap保证单个词标不折行。入场从左到右、按阅读顺序的opacity-only 交错淡入stagger默认每 0.15s 一个持续 0.5s 淡入缓动power2.out不做位移、不缩放视觉极度克制。HOLD入场完成后整条信任条纹丝不动地静止直到片段结束或退出动画开始。源码中 HOLD 段没有任何时间轴内容// HOLD: dead still. Nothing is authored here on purpose.这是刻意为之的弹性保持设计。换行当 mark 数量超过 5 个、宽度不足时行会优雅地折成第二行并整体继续居中flex-wrap: wrapjustify-content: center阅读顺序与入场顺序保持一致。整体动效通过 GSAPgsap3.14.2实现时间轴以paused状态注册到window.__timelines[trust-strip]由 HyperFrames 运行时统一驱动保证与宿主组合的帧时间严格对齐。五个可配置变量详解trust-strip 暴露 5 个变量前文 README 中有一张完整的变量表结合源码可得到更精确的行为描述变量类型默认值作用与取值说明marksstringNorthwind, Acme Corp, Globex, Initech, Umbra逗号分隔的词标文本列表建议 37 个。源码会先按逗号split、逐项trim并过滤空项若为空则回退到默认列表。tonemuted|inkmutedmark 颜色muted映射到契约 tokenvar(--muted, #93939f)ink映射到var(--fg, #f8fafc)。cuesstring空从挂载起点算起的入场时间秒逗号分隔每 mark 一个。缺少的尾部项会从最后一个已知 cue 起按 0.15s 间隔顺延完全为空则使用作者节奏首个 mark 在 0.2s。accentgreen|blue|violetgreen以 10% 比例混入 mark 颜色的淡色调green→var(--brand, #71f5a7)、blue→var(--accent, #61a8ff)、violet→var(--accent-2, #c5a3ff)。整条信任条仍保持单色观感只是坐进场景调色板。exitnone|fade|upnone片段结束行为none保持到最后一帧由宿主帧根接管转场fade在 0.45s 内整体溶解up在溶解的同时向上小幅升起y: -1.6cqh。源码中的颜色实现值得注意tone与accent分别写入 CSS 变量--ts-tone与--ts-accentmark 的实际颜色由color-mix(in srgb, var(--ts-tone) 90%, var(--ts-accent))计算得到——这正是90% 主色 10% 淡彩的精确实现也解释了为什么组件在深色/浅色主题下都能保持克制。每个枚举选项路由到不同的契约 token而不是写死颜色值因此变量在任意主题下都有意义。这些变量声明同样同步在 registry/components/trust-strip/registry-item.json 的variables数组中并标注了rolecontent/style/timing供 Studio 属性面板按角色分类呈现。时间包络Envelope固定的 IN 与 OUT弹性 HOLDtrust-strip 的时间结构遵循固定 IN 和 OUT仅使用弹性 HOLD绝不 timeScale的约定IN 最后一个入场开始时间 0.5s 淡入 HOLD max(0, D - IN - OUT)刻意静止 OUT exit 为 none 时为 0否则为 0.45s默认节奏5 个 mark0.2s 起、0.15s 间隔下IN 约为1.3s0.2 4×0.15 0.5与注册清单中的同步点strip-completeoffset 1.3s完全吻合。若宿主片段的时长 D 小于 IN OUT则 IN 与 OUT一起按比例压缩cue 时间也同步缩放保证动画始终完整落在片段窗口内。源码对应逻辑在 registry/components/trust-strip/trust-strip.html 中一目了然常量LEAD_BASE 0.2、GAP_BASE 0.15、FADE_BASE 0.5、OUT_BASE exit none ? 0 : 0.45当duration totalBase时计算scale duration / totalBase淡入时长、退出时长、起始时间全部乘以scale。手动提供cues时同理缺失尾部按GAP_BASE顺延IN_BASE取所有起点最大值加FADE_BASE。挂载方式Mount-Contract 子组合trust-strip 是遵循挂载契约的子组合运行时只克隆模板#root撑满宿主盒子、建立容器查询基准container-type: size不设置data-width/data-height并在字面量键trust-strip下注册一条暂停时间轴。挂载时给它一个宽而扁的盒子一条带状区域组件即通过容器查询按该盒子自动排版。标准挂载代码数据属性时序语义见 docs/concepts/data-attributes.mdxdiv classclip >npx hyperframes add trust-strip该命令会在你的项目中写入一个文件compositions/components/trust-strip.html。之后打开该文件把模板template内部复制进你自己的组合或直接按上文挂载方式以data-composition-src引用它即可获得一个完整可用、可主题化的单色信任条片段。小结trust-strip 用极简的实现单模板、一条暂停 GSAP 时间轴、五个变量完成了证明与数据场景中最常用的一类动效单色词标从左到右交错淡入、静止保持、可选的淡出/上移退出并通过容器查询、契约 token 与挂载契约与宿主组合深度解耦。无论是手动复制模板、npx hyperframes add一键安装还是在 Studio 中拖拽配置它都是构建信任感视频段的轻量可靠选择。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考