SuperAPI AI 工具集

hyperframes-card-news-work-video-cover

设计与创作

查看项目

更新于 10-15 19:47

技能介绍

该技能用于 HyperFrames 인스타 卡片新闻中的 video-cover 卡,即用真实场所、现场、产品或界面运动画面做开场,目标与 photo-cover 相同,但背景为短静音视频而非图片。

结构要求:受 HyperFrames 渲染器限制,不要把 <video> 放进 timed 卡内部。视频应放在 stage 直下层级,文本与渐变放在单独的 overlay 卡中。视频需带 data-start、data-duration、data-track-index,并设置 muted、autoplay、loop、playsinline、preload="auto" 与 poster。

禁止事项:不得在 <div class="card clip video-cover"> 内放入 timed <video data-start>;视频与 overlay 卡不得使用同一 data-track-index;不得直接使用有声音的视频,视频须为静音,需要音频时遵循单独的 <audio> 规则。

样式:视频媒体使用绝对定位、object-fit: cover、z-index: 0;overlay 卡 padding: 0、背景透明、z-index: 1;遮罩层叠加自上而下的浅暗渐变与自下而上的深黑渐变,带文案的下部约 35% 需接近纯黑,若文案不在下部则调整渐变方向。文字方面,hook-kicker 为现场感、品牌或来源标签;hook-title 每行 64-76px、字重 800-900、白色、行高 1.15-1.25,默认两行,避免三行以上。

动画可使用资料给出的 GSAP 时间线片段。检查项包括:overview 只记录 overlay 卡并标注 data-skill="video-cover";视频位于 stage 直下;视频 track 0、overlay track 1;存在 poster;视频属性齐全。

限制:以上为技能说明中明确给出的约束,其他平台兼容性、性能与收费信息暂未提供。