frame-takram-organic
Soft-tech radial node graph as art — frosted rounded card, curved links drawing in, nodes popping outward, gentle float.
- Installs
- 62
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/nexu-io/html-video --skill frame-takram-organic- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads frame-takram-organic automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
【模板: 东方柔和有机帧 (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。
FAQ
What does the frame-takram-organic skill do?
Soft-tech radial node graph as art — frosted rounded card, curved links drawing in, nodes popping outward, gentle float.
How do I install frame-takram-organic?
Run npx skills add https://github.com/nexu-io/html-video --skill frame-takram-organic in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/frame-takram-organic/ (personal) or .claude/skills/frame-takram-organic/ (project).
Which AI agents can use frame-takram-organic?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is frame-takram-organic safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains frame-takram-organic?
It is published by nexu-io in nexu-io/html-video. It has 62 recorded installs.
More from nexu-io/html-video
frame-electric-studio
nexu-io/html-video
Two-panel split with quote as hero — white/blue panels open from center, accent bar grows, quote reveals line by line.
frame-build-minimal
nexu-io/html-video
Luxury-minimal whitespace hero — single word reveals letter by letter, warm-gold hairline, breathing indicators.
frame-pentagram-stat
nexu-io/html-video
Swiss-grid statistic anchor — giant number, red accent, growing bars, black data bar. Rational and editorial.
frame-bold-signal
nexu-io/html-video
Bold colored card on a dark gradient — big section number, nav breadcrumb, orange card sliding in, title rising.
frame-data-chart-nyt
nexu-io/html-video
NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).
frame-light-leak-cinema
nexu-io/html-video
Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards.
Popular media & creative skills
hyperframes
heygen-com/hyperframes
Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.
media-use
heygen-com/hyperframes
Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.
hyperframes-registry
heygen-com/hyperframes
About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.
hyperframes-creative
heygen-com/hyperframes
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.
ai-video-generation
101-skills/superpowers
Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse
ai-image-generation
101-skills/superpowers
Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image