跳到正文
cccskills
免费在 GitHub 公开

frame-build-minimal

Create a restrained animated HTML title scene around a brand or theme word. Thin letters appear in sequence, while generous whitespace, warm gold lines, corner marks, and softly pulsing indicators frame the message.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

Luxury-minimal whitespace hero — single word reveals letter by letter, warm-gold hairline, breathing indicators.

查看安装方法

适用场景

  • Introducing a brand word
  • Creating a restrained title card
  • Presenting a theme with generous whitespace

包含的文件(6)

  • SKILL.md3.4 KB
  • example.md225 B
  • package.json363 B
  • preview.png385.0 KB
  • source/index.html6.0 KB
  • template.html-video.yaml2.9 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

【模板: 奢华极简留白帧 (Build Minimal)】 【意图】高端品牌 hero / 单词陈述 / 优雅标题卡。视觉提炼自 huashu-design 的 Build Studio 流派 (MIT, © alchaincyf)。

【画布】1920×1080, 暖白底 #FAFAF8; 左上叠暖金径向 wash (rgba(212,165,116,0.07))。70%+ 留白是这套风格的灵魂, 不要填满。

【字体】西文 Inter weight 200/300 (超细); 中文 Noto Sans SC Light。字距收紧 (-4 ~ -7px)。

【主结构 (时间轴, 默认 5s)】

  • 0.2s 四角 corner marks (暖金 0.5px 描边 L 形) + 暖金 wash 淡入。
  • 0.5s eyebrow (uppercase, letter-spacing 9px, #B0ACA4) fadeUp。
  • 0.6s 起 hero 单词逐字符浮现 (每字 .ch span, 错峰 80ms, translateY 30→0, expo-out)。font-size ~220px, weight 200。
  • 1.9s 暖金细线 (#D4A574, 高 1px) 从宽 0 → 88px 居中生长。
  • 2.2s 两行 desc (weight 300, #A8A4A0, line-height 2) fadeUp。
  • 1.8s 侧边竖排小标签 (左右各一, rotate ±90°) 淡入。
  • 2.4s 起 底部 7 条细竖线 (1.5px, 部分暖金) 错峰升起, 随后进入 4s 慢呼吸循环 (opacity 1↔0.45)。

【配色纪律】仅用 暖白 #FAFAF8 / 近黑 #1A1A18 / 暖金 #D4A574 / 暖灰 #A8A4A0/#B0ACA4。禁止鲜艳色。暖金是唯一强调, 极克制 (细线 / 角标 / 个别指示器)。

【内容纪律】

  • hero 是一个词 (≤16 字符), 必须用用户真实品牌词/主题词。
  • desc 两行短句, 严禁 lorem ipsum。
  • 动效用 @keyframes, prefers-reduced-motion 下全部停在终态。
  • 单文件 HTML。

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Create a moving poster for brand statements, vision messages, or presentation openings. Red rules, oversized tilted type, and a three-line headline appear in sequence, using a paper-white background and styling inspired by 1970s European editorial posters.

中文简介正在准备中。当前显示英语简介。

  • Opening a presentation like a magazine cover
  • Presenting a brand manifesto or vision
  • Introducing an editorial or cultural topic
nexu-io/html-video47292026年6月22日 更新

Create an animated HTML section divider with a large chapter number and navigation showing the section structure. An orange card slides across a dark gradient background, followed by a rising title that introduces the next topic.

中文简介正在准备中。当前显示英语简介。

  • Separating chapters or sections
  • Creating a launch announcement title card
  • Introducing a topic with section navigation
nexu-io/html-video47292026年6月22日 更新

Create animated brand or event titles with blue and dark panels sliding in from opposite sides. Staggered headlines, an outlined word, and a short handwritten phrase with a drawn underline give the opening a retro-modern feel.

中文简介正在准备中。当前显示英语简介。

  • Introducing a brand title with animated split panels
  • Creating an event opening title
  • Revealing an idea with handwritten accents
nexu-io/html-video47292026年6月22日 更新

Turn CSV, JSON, or a written conclusion into a newspaper-style chart for video clips or social posts. Produce a single HTML file with line, bar, or range-band charts, clear headlines, source notes, and staggered animation.

中文简介正在准备中。当前显示英语简介。

  • Showing data trends in a video clip
  • Creating a chart card for social media
  • Visualizing CSV or JSON data
nexu-io/html-video47292026年6月22日 更新

Create animated bar charts for weekly metrics or KPIs using real data. Bars grow from zero while their numbers count up in sync, with layouts that adapt to widescreen, vertical, and square video formats.

中文简介正在准备中。当前显示英语简介。

  • Presenting weekly metrics in a video
  • Animating KPI comparisons
  • Adding a data segment to an existing video
nexu-io/html-video47292026年6月22日 更新

Create a short animated quote or mission statement in a single HTML file. White and electric-blue panels meet at the center, a black accent bar grows, and text appears line by line with attribution and brand marks.

中文简介正在准备中。当前显示英语简介。

  • Turn a quote into an animated visual
  • Present a mission statement with contrasting panels
  • Create a testimonial sequence with attribution
nexu-io/html-video47292026年6月22日 更新

查看 nexu-io 的全部技能

报告此技能的问题