Frame Takram Organic

Name: Frame Takram Organic
Author: nexu-io

nexu-io/html-video

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

A soft-tech radial node-graph video frame with a frosted rounded card, curved links drawing in, and nodes popping outward with a gentle float.

About

An HTML animated video-frame template that renders a concept as a soft-tech radial node graph with a frosted card, curved links, and nodes popping outward. A developer uses it for a system/architecture concept or warm product-narrative frame.

Beige natural palette (sage/terracotta) with frosted rounded card
Derived from the huashu-design Takram style, 16:9 output

Frame Takram Organic 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-takram-organic

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-takram-organic.svg)](https://skillselion.com/skills/nexu-io/html-video/frame-takram-organic)

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

What it does

A soft-tech radial node-graph video frame with a frosted rounded card, curved links drawing in, and nodes popping outward with a gentle float.

Files

SKILL.mdMarkdownGitHub ↗

【模板: 东方柔和有机帧 (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 微动)。

【配色纪律】米色 #EFEAE0 / 暖白卡 / sage 绿 #7A9E7F·#B8C9BA / 陶土橙 #C98A5E / 暖灰文字。禁止高饱和科技蓝/紫。绿是结构色, 橙是强调色 (核心节点 + 标题 accent 词)。

【内容纪律】

节点图是"艺术品", 节点数 4-8 按内容调 (改 SVG 里 node/link 数量 + 角度)。
必须用真实概念/关系, 严禁 lorem ipsum。
动效用 @keyframes + SVG stroke-dashoffset, prefers-reduced-motion 下全部停在终态。
单文件 HTML。

{
  "name": "@html-video/template-frame-takram-organic",
  "version": "0.1.0",
  "description": "html-video template: frame-takram-organic (soft-tech radial node graph, distilled from huashu-design Takram 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>Takram Organic · Soft Tech Radial</title>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<style>
  /*
   * frame-takram-organic — soft-tech radial node graph as art.
   * Visual style distilled from huashu-design "Takram" philosophy (MIT, © alchaincyf).
   * Rebuilt as a self-contained CSS/SVG @keyframes timeline for html-video / Hyperframes.
   * Timeline (5s @ 60fps): beige wash -> rounded glass card -> curved links draw ->
   * radial nodes pop in sequence -> title + caption fade -> gentle float loop.
   */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    width: 1920px; height: 1080px; overflow: hidden;
    background: #EFEAE0; color: #3A3A34;
    font-family: 'Manrope', sans-serif; position: relative;
  }
  .wash { position: absolute; inset: 0; z-index: 0;
    background: radial-gradient(ellipse 1100px 900px at 70% 50%, rgba(122,158,127,0.10) 0%, transparent 65%); }

  /* frosted rounded card */
  .card { position: absolute; left: 120px; top: 140px; width: 760px; height: 800px; z-index: 2;
    background: rgba(255,253,248,0.66); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.8); border-radius: 40px;
    box-shadow: 0 30px 80px rgba(120,110,90,0.10); padding: 88px 80px;
    opacity: 0; transform: translateY(26px) scale(0.985);
    animation: cardIn 1s cubic-bezier(0.16,1,0.3,1) 0.2s forwards; }
  @keyframes cardIn { to { opacity: 1; transform: translateY(0) scale(1); } }

  .eyebrow { font-weight: 600; font-size: 16px; letter-spacing: 4px; text-transform: uppercase;
    color: #7A9E7F; margin-bottom: 32px; opacity: 0; animation: fadeUp 0.8s ease-out 0.7s forwards; }
  .title { font-weight: 700; font-size: 92px; line-height: 1.04; letter-spacing: -2px; color: #2E2E28;
    opacity: 0; animation: fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.9s forwards; }
  .title .soft { color: #C98A5E; }
  .caption { font-weight: 400; font-size: 22px; line-height: 1.8; color: #8A867C; margin-top: 36px;
    max-width: 520px; opacity: 0; animation: fadeUp 0.9s ease-out 1.2s forwards; }
  @keyframes fadeUp { 0%{opacity:0;transform:translateY(20px)} 100%{opacity:1;transform:translateY(0)} }

  /* radial node graph (right) as art */
  .graph { position: absolute; right: 60px; top: 50%; transform: translateY(-50%);
    width: 760px; height: 760px; z-index: 1; animation: floatY 7s ease-in-out 2s infinite; }
  @keyframes floatY { 0%,100%{transform:translateY(-50%)} 50%{transform:translateY(-54%)} }

  .link { stroke: #B8C9BA; stroke-width: 2; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: draw 1.1s ease-out forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }

  .node { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0;
    animation: pop 0.55s cubic-bezier(0.34,1.56,0.64,1) forwards; }
  @keyframes pop { to { transform: scale(1); opacity: 1; } }
  .node.center circle { fill: #C98A5E; }
  .node circle { fill: #7A9E7F; }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; }
    .card,.eyebrow,.title,.caption{opacity:1;transform:none}
    .link{stroke-dashoffset:0}.node{transform:scale(1);opacity:1}
  }
</style>
</head>
<body>
  <div class="wash"></div>

  <div class="card">
    <div class="eyebrow">Context · Memory · Evolution</div>
    <div class="title">A design agent<br>that <span class="soft">remembers</span>.</div>
    <div class="caption">Eight context nodes feed one evolving core — every project makes the next one sharper.</div>
  </div>

  <!-- Radial node graph: links drawn first, then nodes pop outward -->
  <svg class="graph" viewBox="0 0 760 760" fill="none">
    <!-- links from center (380,380) to 8 surrounding nodes -->
    <path class="link" style="animation-delay:1.4s"  d="M380 380 L380 150"/>
    <path class="link" style="animation-delay:1.48s" d="M380 380 L543 217"/>
    <path class="link" style="animation-delay:1.56s" d="M380 380 L610 380"/>
    <path class="link" style="animation-delay:1.64s" d="M380 380 L543 543"/>
    <path class="link" style="animation-delay:1.72s" d="M380 380 L380 610"/>
    <path class="link" style="animation-delay:1.8s"  d="M380 380 L217 543"/>
    <path class="link" style="animation-delay:1.88s" d="M380 380 L150 380"/>
    <path class="link" style="animation-delay:1.96s" d="M380 380 L217 217"/>

    <g class="node"        style="animation-delay:1.9s"><circle cx="380" cy="150" r="22"/></g>
    <g class="node"        style="animation-delay:1.98s"><circle cx="543" cy="217" r="22"/></g>
    <g class="node"        style="animation-delay:2.06s"><circle cx="610" cy="380" r="22"/></g>
    <g class="node"        style="animation-delay:2.14s"><circle cx="543" cy="543" r="22"/></g>
    <g class="node"        style="animation-delay:2.22s"><circle cx="380" cy="610" r="22"/></g>
    <g class="node"        style="animation-delay:2.3s"><circle cx="217" cy="543" r="22"/></g>
    <g class="node"        style="animation-delay:2.38s"><circle cx="150" cy="380" r="22"/></g>
    <g class="node"        style="animation-delay:2.46s"><circle cx="217" cy="217" r="22"/></g>
    <g class="node center" style="animation-delay:1.3s"><circle cx="380" cy="380" r="40"/></g>
  </svg>
</body>
</html>

spec_version: 1
id: frame-takram-organic
name: Takram Organic
description: >
  Soft-tech radial node graph as art — a frosted rounded card holds the message while
  curved links draw and eight nodes pop outward around an evolving core, then everything
  gently floats. Warm, natural, organic. Distilled from the huashu-design "Takram" philosophy.

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

category: explainer
subcategory: concept-diagram
tags: [organic, soft-tech, radial, node-graph, takram, beige, diagram]

best_for:
  - "System / architecture concept reveal"
  - "Warm, human product story"
  - "Network or memory-graph explainer"

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: [title]
    properties:
      eyebrow:
        type: "string"
        maxLength: 48
        description: "Green uppercase eyebrow on the card"
      title:
        type: "string"
        maxLength: 60
        description: "Card headline; wrap one accent word in warm terracotta"
      caption:
        type: "string"
        maxLength: 160
        description: "Supporting paragraph under the title"
      node_count:
        type: "number"
        minimum: 4
        maximum: 8
        default: 8
        description: "Number of radial nodes around the core"
      duration_sec:
        type: "number"
        minimum: 4
        maximum: 7
        default: 5
  examples:
    - {"eyebrow": "Context · Memory · Evolution", "title": "A design agent that remembers.", "caption": "Eight context nodes feed one evolving core — every project makes the next one sharper."}

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

provenance:
  # L1 — original design inspiration (real world)
  origin:
    name: Takram
    kind: design-studio
    reference: "Japanese design firm — speculative, organic soft-tech; data-as-art visualisation"
  # 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-takram.html
  # L3 — what this template does
  transformation: >
    Static PPT showcase → animated hyperframes timeline (frosted rounded card holds the
    message while curved SVG links draw and radial nodes pop outward around an evolving
    core, then everything gently floats) built as original CSS/SVG keyframes. Re-coloured
    palette; 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 Takram 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"