Frame Build Minimal

Name: Frame Build Minimal
Author: nexu-io

nexu-io/html-video

1 installs
4.3k repo stars
Updated June 21, 2026
nexu-io/html-video

A luxury-minimal whitespace hero video frame where a single word reveals letter by letter with a warm-gold hairline and breathing indicators.

About

An HTML animated video-frame template that presents a brand word as a luxury-minimal whitespace hero with ultra-thin type revealing letter by letter. A developer uses it for a high-end brand hero or elegant title frame.

70%+ whitespace with warm-gold hairline and breathing line indicators
Derived from the huashu-design Build Studio style, 16:9 output

Frame Build Minimal by the numbers

1 all-time installs (skills.sh)
Ranked #1,200 of 1,335 Generative Media skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/nexu-io/html-video --skill frame-build-minimal

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/nexu-io/html-video/frame-build-minimal.svg)](https://skillselion.com/skills/nexu-io/html-video/frame-build-minimal)

Installs	1
repo stars	★ 4.3k
Last updated	June 21, 2026
Repository	nexu-io/html-video ↗

What it does

A luxury-minimal whitespace hero video frame where a single word reveals letter by letter with a warm-gold hairline and breathing indicators.

Files

SKILL.mdMarkdownGitHub ↗

【模板: 奢华极简留白帧 (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。

{
  "name": "@html-video/template-frame-build-minimal",
  "version": "0.1.0",
  "description": "html-video template: frame-build-minimal (luxury-minimal whitespace hero, distilled from huashu-design Build philosophy, MIT)",
  "license": "Apache-2.0",
  "private": true,
  "files": ["template.html-video.yaml", "source", "SKILL.md", "example.md", "preview.png"]
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Build Minimal · Luxury Whitespace</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&display=swap" rel="stylesheet" />
<style>
  /*
   * frame-build-minimal — luxury-minimal whitespace hero.
   * Visual style distilled from huashu-design "Build Studio" philosophy (MIT, © alchaincyf).
   * Rebuilt as a self-contained CSS @keyframes timeline for html-video / Hyperframes.
   * Timeline (5s @ 60fps): corner marks draw -> eyebrow fades -> hero word reveals letter
   * by letter -> gold line extends -> description fades -> thin indicators rise & breathe.
   */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    width: 1920px; height: 1080px; overflow: hidden;
    background: #FAFAF8; color: #1A1A18;
    font-family: 'Inter', sans-serif; position: relative;
  }

  /* warm radial wash */
  .wash { position: absolute; inset: 0; z-index: 0;
    background: radial-gradient(ellipse 1300px 700px at 32% 42%, rgba(212,165,116,0.07) 0%, transparent 70%);
    opacity: 0; animation: washIn 1.4s ease-out forwards; }
  @keyframes washIn { to { opacity: 1; } }

  /* corner marks (draw in) */
  .corner { position: absolute; z-index: 2; opacity: 0; animation: cornerIn 0.8s ease-out 0.2s forwards; }
  .corner-tl { top: 72px; left: 72px; }
  .corner-br { bottom: 72px; right: 72px; transform: rotate(180deg); }
  @keyframes cornerIn { to { opacity: 1; } }

  /* side labels */
  .side-label { position: absolute; font-weight: 400; font-size: 12px; letter-spacing: 6px;
    text-transform: uppercase; color: #CBC7C0; z-index: 2; opacity: 0; animation: fade 1s ease-out 1.8s forwards; }
  .side-left  { left: 72px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: center; }
  .side-right { right: 72px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: center; }
  @keyframes fade { to { opacity: 1; } }

  /* center stack */
  .center { position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; margin-top: -40px; z-index: 1; }
  .eyebrow { font-weight: 400; font-size: 15px; letter-spacing: 9px; text-transform: uppercase;
    color: #B0ACA4; margin-bottom: 40px; opacity: 0; animation: fadeUp 0.9s ease-out 0.5s forwards; }
  .hero { font-weight: 200; font-size: 220px; letter-spacing: -7px; color: #1A1A18; line-height: 1; }
  .hero .ch { display: inline-block; opacity: 0; transform: translateY(30px);
    animation: chReveal 0.7s cubic-bezier(0.16,1,0.3,1) forwards; }
  @keyframes chReveal { to { opacity: 1; transform: translateY(0); } }
  .gold-line { width: 0; height: 1px; background: #D4A574; margin: 48px auto 44px; opacity: 0.8;
    animation: goldGrow 1s cubic-bezier(0.16,1,0.3,1) 1.9s forwards; }
  @keyframes goldGrow { to { width: 88px; } }
  .desc { font-weight: 300; font-size: 21px; color: #A8A4A0; letter-spacing: 0.3px; line-height: 2;
    max-width: 640px; text-align: center; opacity: 0; animation: fadeUp 1s ease-out 2.2s forwards; }
  @keyframes fadeUp { 0%{opacity:0;transform:translateY(22px)} 100%{opacity:1;transform:translateY(0)} }

  /* thin indicators (rise + slow breathe) */
  .indicators { position: absolute; bottom: 96px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 26px; align-items: flex-end; z-index: 2; }
  .ind { width: 1.5px; background: #D8D4CE; transform: scaleY(0); transform-origin: bottom;
    animation: indRise 0.6s cubic-bezier(0.16,1,0.3,1) forwards, breathe 4s ease-in-out 3s infinite; }
  .ind.gold { background: #D4A574; width: 2px; opacity: 0.85; }
  @keyframes indRise { to { transform: scaleY(1); } }
  @keyframes breathe { 0%,100%{opacity:1} 50%{opacity:0.45} }

  .whisper { position: absolute; top: 72px; right: 132px; font-weight: 200; font-size: 30px;
    color: #D4A574; opacity: 0; z-index: 2; animation: fade 1.2s ease-out 2.6s forwards; }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; }
    .wash,.corner,.side-label,.eyebrow,.desc,.whisper{opacity:1}
    .hero .ch{opacity:1;transform:none}.gold-line{width:88px}.ind{transform:scaleY(1)}
  }
</style>
</head>
<body>
  <div class="wash"></div>

  <svg class="corner corner-tl" width="26" height="26" viewBox="0 0 26 26" fill="none">
    <path d="M0 0L0 26" stroke="#D4A574" stroke-width="0.6" opacity="0.45"/>
    <path d="M0 0L26 0" stroke="#D4A574" stroke-width="0.6" opacity="0.45"/>
  </svg>
  <svg class="corner corner-br" width="26" height="26" viewBox="0 0 26 26" fill="none">
    <path d="M0 0L0 26" stroke="#D4A574" stroke-width="0.6" opacity="0.45"/>
    <path d="M0 0L26 0" stroke="#D4A574" stroke-width="0.6" opacity="0.45"/>
  </svg>

  <div class="side-label side-left">Open Design</div>
  <div class="side-label side-right">Self-Evolving</div>
  <div class="whisper">◇</div>

  <div class="center">
    <div class="eyebrow">Design Agent</div>
    <!-- .ch spans are revealed one by one; staggered via inline animation-delay -->
    <div class="hero" id="hero">
      <span class="ch" style="animation-delay:.6s">A</span><span class="ch" style="animation-delay:.68s">g</span><span class="ch" style="animation-delay:.76s">e</span><span class="ch" style="animation-delay:.84s">n</span><span class="ch" style="animation-delay:.92s">t</span>
    </div>
    <div class="gold-line"></div>
    <div class="desc">Every use is an evolution.<br>From craft, to assist, to self-evolving.</div>
  </div>

  <div class="indicators">
    <div class="ind"      style="height:24px;animation-delay:2.4s,3.0s"></div>
    <div class="ind"      style="height:34px;animation-delay:2.46s,3.1s"></div>
    <div class="ind gold" style="height:44px;animation-delay:2.52s,3.2s"></div>
    <div class="ind"      style="height:28px;animation-delay:2.58s,3.3s"></div>
    <div class="ind"      style="height:38px;animation-delay:2.64s,3.4s"></div>
    <div class="ind gold" style="height:48px;animation-delay:2.7s,3.5s"></div>
    <div class="ind"      style="height:30px;animation-delay:2.76s,3.6s"></div>
  </div>
</body>
</html>

spec_version: 1
id: frame-build-minimal
name: Build Minimal
description: >
  Luxury-minimal whitespace hero — a single word reveals letter by letter in ultra-thin
  Inter, a warm-gold hairline extends, thin indicators rise and breathe. Calm, premium,
  70%+ whitespace. Distilled from the huashu-design "Build Studio" philosophy.

engine: hyperframes
engine_version: ^0.4.0
source_entry: source/index.html

category: presentation
subcategory: hero
tags: [minimal, luxury, whitespace, hero, gold, build, thin]

best_for:
  - "Premium product / brand hero"
  - "Calm single-word statement"
  - "Elegant title card"

output:
  formats: [mp4, webm]
  default_format: mp4
  resolution:
    default: { width: 1920, height: 1080 }
    supported_aspects: ["16:9", "1:1"]
  fps:
    default: 60
    supported: [30, 60]
  duration:
    type: variable
    min_sec: 4
    max_sec: 7
  alpha: false
  audio:
    supported: true
    expected_inputs: [bgm]

inputs:
  schema:
    type: object
    required: [hero]
    properties:
      eyebrow:
        type: "string"
        maxLength: 40
        description: "Tiny uppercase eyebrow above the hero word"
      hero:
        type: "string"
        maxLength: 16
        description: "The single hero word, revealed letter by letter"
      desc:
        type: "string"
        maxLength: 140
        description: "Two short centered lines under the gold rule"
      duration_sec:
        type: "number"
        minimum: 4
        maximum: 7
        default: 5
  examples:
    - {"eyebrow": "Design Agent", "hero": "Agent", "desc": "Every use is an evolution. From craft, to assist, to self-evolving."}

license:
  spdx: Apache-2.0
  attribution_required: true
  redistribution_allowed: true
  commercial_use: true

provenance:
  # L1 — original design inspiration (real world)
  origin:
    name: Build
    kind: design-studio
    reference: "London branding studio — luxury minimalism, ultra-thin type, generous whitespace"
  # L2 — the open-source skill we actually transformed from (license governs here)
  via_skill:
    name: huashu-design
    author: "alchaincyf (花叔 · 花生)"
    url: https://github.com/alchaincyf/huashu-design
    license: MIT
    source_file: assets/showcases/ppt/ppt-build.html
  # L3 — what this template does
  transformation: >
    Static PPT showcase → animated hyperframes timeline (hero word reveals letter by
    letter in ultra-thin Inter, #D4A574 gold hairline extends, thin indicators rise and
    breathe) built as original CSS keyframes. Re-typed for motion; original sample data.
    No upstream source code copied verbatim.

author:
  name: nexu-io
  url: https://github.com/nexu-io
  contact: open-design@nexu.io

version: 0.1.0
changelog:
  - version: 0.1.0
    date: 2026-06-03
    notes: Distilled from huashu-design Build showcase into an animated html-video template.

preview:
  poster: preview.png

performance:
  reference_render:
    duration_sec: 5
    render_wall_clock_sec: 10
    machine: "M2 MacBook Air"