frame-takram-organic

Agent Skills › nexu-io/html-video › frame-takram-organic

frame-takram-organic

GitHub

生成Takram风格有机帧动画，用于系统架构或温暖叙事。采用米色底、毛玻璃卡与Sage绿/陶土橙配色，展示节点图动态弹出与漂浮效果。严禁高饱和色，强调自然呼吸感与无障碍适配。

templates/frame-takram-organic/SKILL.md nexu-io/html-video

Trigger Scenarios

需要展示系统架构概念制作温暖的产品叙事动画生成网络或记忆关系的图解

Install

npx skills add nexu-io/html-video --skill frame-takram-organic -g -y

More Options

Non-standard path

npx skills add https://github.com/nexu-io/html-video/tree/main/templates/frame-takram-organic -g -y

Use without installing

npx skills use nexu-io/html-video@frame-takram-organic

指定 Agent (Claude Code)

npx skills add nexu-io/html-video --skill frame-takram-organic -a claude-code -g -y

安装 repo 全部 skill

npx skills add nexu-io/html-video --all -g -y

预览 repo 内 skill

npx skills add nexu-io/html-video --list

SKILL.md

Frontmatter

{
    "od": {
        "mode": "video",
        "preview": {
            "type": "html",
            "entry": "index.html",
            "reload": "debounce-100"
        },
        "surface": "video",
        "featured": 0,
        "scenario": "video",
        "upstream": "https:\/\/github.com\/alchaincyf\/huashu-design",
        "design_system": {
            "requires": false
        },
        "example_prompt": "Use the Takram Organic Frame template to turn my concept into a soft-tech radial node graph — a frosted rounded card with curved links drawing in and nodes popping outward around an evolving core. Preserve the template's visual signature, use real content, and avoid lorem ipsum or placeholder images.",
        "example_prompt_i18n": {
            "zh-CN": "用「东方柔和有机帧」模板把我的概念做成一段柔和科技感放射节点图:毛玻璃圆角卡 + 曲线连接描入 + 节点围绕进化核心放射弹出。保持模板的视觉签名,使用真实内容,避免 lorem ipsum 和占位图片。"
        }
    },
    "name": "frame-takram-organic",
    "tags": [
        "organic",
        "soft-tech",
        "radial",
        "diagram",
        "takram",
        "beige",
        "frame"
    ],
    "emoji": "🌿",
    "en_name": "Takram Organic Frame",
    "zh_name": "东方柔和有机帧",
    "category": "video",
    "featured": 0,
    "scenario": "video",
    "example_id": "sample-frame-takram-organic",
    "aspect_hint": "1920×1080 (16:9)",
    "description": "Soft-tech radial node graph as art — frosted rounded card, curved links drawing in, nodes popping outward, gentle float.",
    "recommended": 7,
    "example_desc": "米色底 + 自然色 (sage\/terracotta) + 八节点放射图作为艺术品",
    "example_name": "柔和有机帧 · 节点图",
    "en_description": "Soft-tech radial node graph as art — frosted rounded card, curved links drawing in, nodes popping outward, gentle float.",
    "example_format": "markdown",
    "zh_description": "东方柔和有机帧:毛玻璃圆角卡 + 曲线连接描入 + 放射节点弹出 + 柔和漂浮, 米色自然色调",
    "example_tagline": "毛玻璃圆角卡 + 放射节点弹出 + 柔和漂浮",
    "example_source_url": "https:\/\/github.com\/alchaincyf\/huashu-design",
    "example_source_label": "huashu-design · Takram (MIT)"
}

【模板: 东方柔和有机帧 (Takram Organic)】【意图】系统/架构概念揭示 / 温暖产品叙事 / 网络/记忆图解。视觉提炼自 huashu-design 的 Takram 流派 (MIT, © alchaincyf)。

【画布】1920×1080, 米色底 #EFEAE0; 右侧叠 sage 绿径向 wash (rgba(122,158,127,0.10))。整体柔和、自然、有呼吸感。

【字体】西文 Manrope 700/600/400; 中文 Noto Sans SC。圆润, 不要太硬。

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

0.2s 左侧毛玻璃圆角卡 (rgba(255,253,248,0.66) + blur 8px + border-radius 40px + 柔影) 从下方 26px + scale 0.985 升入。
0.7s 绿色 eyebrow (#7A9E7F, uppercase, letter-spacing 4px) fadeUp。
0.9s 卡标题 (92px, weight 700) fadeUp; 一个 accent 词用陶土橙 #C98A5E。
1.2s caption (22px, #8A867C, line-height 1.8) fadeUp。
1.3s 右侧放射图中心节点 (陶土橙, r=40) 弹出 (overshoot)。
1.4s 起 8 条曲线 link (sage #B8C9BA, stroke-dasharray draw) 从中心错峰描出。
1.9s 起 8 个外围节点 (sage 绿, r=22) 错峰 pop (scale 0→1, overshoot)。
2.0s 起 整个放射图进入 7s 慢漂浮循环 (translateY 微动)。