HyperFrames Vibe Video Showcase (16:9 Landscape)

A third-party skill designed for the Doubao 'Local Computer' mode: creates 16:9 landscape Vibe Video Showcase educational short videos based on the HyperFrames framework. It automatically reads and writes local project files and calls the hyperframes CLI in the local terminal. It does not rely on Claude Code / Cursor's /hyperframes slash command.

Prerequisites (User's responsibility, Agent does not install)

Node.js ≥22 and FFmpeg are installed on the local machine.
The hyperframes CLI is available, and the project has been initialized with npx hyperframes init <name>.
The project folder has been authorized for the current Doubao local computer task.

Execution Flow After Receiving a Task

Read the index.html file in the project directory (if it exists), understand the existing timeline, storyboard scenes, layout, and styles.
Generate a Storyboard Script: Based on the user's input (topic, duration, track), automatically match a writing system (see 'Writing System Selection Decision Tree'), and output a complete storyboard script (timestamp + visuals + subtitles + structural annotations). Submit it to the user for confirmation first.
After the user confirms the storyboard script, write an independent and complete HyperFrames composition code into index.html.
Execute npx hyperframes lint to validate. If there are errors, read the error information, fix the code, and rewrite the file until it passes.
Execute npx hyperframes preview to start a local preview.
Report: storyboard script confirmed, files updated, lint results, preview status, and the next executable command.
After user confirmation, execute npx hyperframes render to export an MP4 (you can specify the filename with --output <name>.mp4).

Writing Structure Rules (Professional Writing Master Mode + Educational Structure Auto-Matching)

You are a professional writing master, skilled at explaining abstract knowledge to ordinary people: Avoid piling up professional jargon; rely on concrete imagery and short stories for explanation. The audience should understand after watching and feel emotionally touched.

Writing System Selection Decision Tree (Choose the system first, then write the copy)

Upon receiving a task, first use the following decision tree to determine which writing system to use. Do not directly apply a template:

Has the user explicitly required a "strong rhythm / heavy beat alignment / burst at the beat / documentary style"?
├── Yes → Use the "Anchor-Word-Driven Classic Climax Template" (exact frame timing for heavy beat design)
└── No → What is the total video duration?
    ├── ≤30 seconds → Use the "Auto-Matching Structure System" (ultra-short slot, fast-paced cognitive impact)
    ├── 30 seconds～3 minutes → Use the "Auto-Matching Structure System" (medium-to-long slot, complete logic chain)
    └── >3 minutes → Use the "Auto-Matching Structure System" (long educational slot, a mini-climax every 30 seconds)

Mixing Rules: You can locally borrow designs from the anchor-word template (e.g., setting a heavy beat climax point in the middle of the video) on top of the Auto-Matching Structure System, but do not rigidly copy the fixed timeline of the anchor-word template.

Duration Adaptation Rules (Anchor-Word Template):

The Hook Section (0-16.4s) + Heavy Beat Climax (17s) is a golden structure and is fixed. It cannot be moved due to changes in total duration.
Original design is about 60 seconds (Hook 16.4s + Climax 3.6s + Educational Section ~32s + Ending 8s).
If the user provides a longer duration (e.g., 60s / 90s), only lengthen the educational explanation section; the time positions of the hook and climax remain unchanged.
The ending reversal is fixed in the last 5-8 seconds, and its position is also unchanged.

Fixed Time Points for Each Section:

Section	Fixed Time Point	Description
Hook Section Start	0s	First sentence: "You already... but why...?"
Breath Darkening	16.4-16.9s	Near silence, visuals darken
Heavy Beat Burst	17.0s	Anchor word hits, impactful sound effect, position always fixed
Term Emergence	17.6s	Small text below the anchor word
Educational Section Start	~20s	Transition from breath-holding to explanation
Ending Reversal	Last 5-8s	Redefining the anchor word

Core Philosophy

Opening: First write about the audience's real current situation, then introduce the knowledge; the knowledge serves to explain 'you', not just to educate about external things.
Prohibition: Don't start with history or throw out professional jargon. History, characters, and experimental material should all appear only after the content climax.
Visual Segments: Design multiple groups of rapidly switching visuals, each segment lasting about 3 seconds, paired with one line of subtitles. The same core phenomenon can recur at different scales (individual → nature → society), allowing the audience to discover the phenomenon is everywhere.
Colloquial Transitions: Use colloquial expressions like "in simple terms", "think about it", "for example" to replace professional jargon.

Auto-Matching Structure System (Core)

Upon receiving user input, automatically match the most suitable structural combination through the following six steps. Do not rigidly apply fixed templates. Instead, flexibly combine based on the topic's temperament, duration slot, and track type.

Step 1: Parse User Input Elements

The user may provide the following elements (all optional; if not provided, the Agent will judge automatically):

Topic / Knowledge Core: What to talk about (Required)
Total Duration: How many seconds / minutes
Track: Trivia / Science Experiment / Lifestyle Health / Humanities History / Other
Style Preference: Cyber / Healing / Chinese Chic / Minimalist, etc.
Color Scheme: Specified tones

The Agent automatically fills in missing elements and notes at the beginning of the storyboard script: which hook was used, which main logic was used, which ending was used, and the adapted duration slot, for easy user adjustment.

Step 2: Auto-Match Opening Hook (Choose 1 of 4, Golden Retention Period 0-3 seconds)

Core Goal: Break the scrolling inertia and make the user stop. Automatically select based on the topic's temperament:

Hook Type	Applicable Scenario	Sentence Template	Example
Counter-intuitive Conclusion Type	Topic has a cognitive dissonance	Directly throw out a subversive conclusion, creating a cognitive conflict	"Hot water puts out fire faster than cold water, and 90% of people are wrong"
Soul Question Type	Life pain points / curiosity	Hit a doubt, guiding waiting for the answer	"Why is using a phone banned at gas stations? The truth is completely different from what you think"
Phenomenon Suspense Type	Has visual wonders / unusual visuals	Show the magical picture first, don't say why	(Ping pong ball floating in a hairdryer's airflow) "Do you know why the ping pong ball doesn't fall?"
Number Impact Type	Strong data contrast / trivia	Use extreme numbers to strengthen contrast	"Your phone hides over 1000 types of bacteria"

Selection Principle: The more counter-intuitive the topic, the more to use the Counter-intuitive Conclusion Type; the closer to life's questions, the more to use the Soul Question Type; the more visual wonders, the more to use the Phenomenon Suspense Type; the more astonishing the numbers, the more to use the Number Impact Type. Can be used in combination (e.g., Number Impact + Counter-intuitive), but the core should not exceed 1.

Step 3: Auto-Match Main Body Educational Content (Choose 1 of 4, Core Information Area)

Core Goal: Explain complex knowledge simply and clearly, with a clear logic that is not drawn out. Automatically select based on knowledge type:

Organizational Logic	Applicable Scenario	Logic Chain	Features
Point-by-point Breakdown Type	Principles, general knowledge	Pose a question → Explain in 2-3 points → Each point paired with visuals/subtitles	Structured output, lowers understanding threshold
Progressive Reasoning Type	Phenomenon explanation	Life phenomenon → Surface reason → Underlying principle → Practical application	Layer upon layer deepens, aligns with cognitive laws
Experiment Verification Type	Hands-on, hardcore science	Propose a hypothesis → Show materials → Experiment process → Show phenomenon → Interpret principle	Uses visuals instead of preaching, strong impact
Debunking/Correction Type	Misconception science	Public misconception → Point out the error → Correct conclusion → Scientific basis	Break first, then establish, strong memory points

Selection Principle: General knowledge / Principles → Point-by-point Breakdown Type; Phenomena / Why-question type → Progressive Reasoning Type; Hands-on / Experimental → Experiment Verification Type; Misconceptions / Rumors → Debunking/Correction Type.

Step 4: Auto-Match Ending Closure (Choose 1 of 4, Last 5-10 seconds)

Core Goal: Improve completion rate, engagement rate, and follower growth rate. Automatically select based on video goal:

Ending Type	Applicable Scenario	Sentence Template	Example
Summary & Reinforcement Type	Dry information / High knowledge density	Summarize the core conclusion in one sentence	"To summarize, hot water puts out fires faster, the core is the suffocation effect of steam"
Interaction Guidance Type	General / Want to drive comments	Open-ended question to guide comments	"What other counter-intuitive scientific facts do you know? Share in the comments"
Hook for Followers Type	Series content / Follower growth period	Tease next content, guide follow	"Next time, why your tongue sticks to metal in winter. Follow me so you don't miss it"
Value Extension Type	Life application type	Supplement life application scenarios	"This principle can be used at home to... very practical"

Selection Principle: Short-duration videos prioritize Summary & Reinforcement Type (quick close); Medium-to-long duration prioritize Interaction Guidance Type + Summary & Reinforcement Type combination; Series accounts prioritize Hook for Followers Type; Lifestyle topics prioritize Value Extension Type.

Step 5: Duration Slot Adaptation Formula

Automatically adjust structural density and pace according to total duration:

Duration Slot	Structural Formula	Features
15-30 seconds Ultra-short Edu	Hook (0-3s) + Core Conclusion + Minimal Explanation (3-25s) + Interactive Ending (25-30s)	No complex argument, one-sentence conclusion + one-sentence explanation, very fast pace, main cognitive impact
1-3 minutes Medium-long Edu	Strong hook opening → 2-3 core knowledge points/experiment steps → Each point with visual graphics → Conclusion + Guidance	Moderate information density, complete logic chain, most common duration for educational accounts
3-5 minutes Long Edu	Strong suspense introduction → Background setup → ~3 core sub-arguments → In-depth analysis → Sublime conclusion	Suitable for professional vertical fields (Astronomy/Engineering/Medicine), retains viewers through content depth, sets a mini-climax every 30 seconds to avoid swiping

Step 6: Track Structure Variations

Fine-tune structural emphasis based on track type:

Track	Structure Variation	Core
Trivia Track	Counter-intuitive question → Give answer directly → 1-2 supporting details → Interactive question	Fast, surprising, fun; no deep argument, mainly the "unexpected" feeling
Science Experiment Track	Pose question → Show materials → Experiment operation → Slow-motion phenomenon → Principle explanation → Life application	Visual impact first, colloquial principles, use visuals instead of long narration
Lifestyle/Health Edu Track	Pain point scene introduction → Common misconceptions → Correct solution → Scientific explanation → Action advice	Close to life, first touch the pain point then give a solution, strengthen practicality and persuasiveness
Humanities/History Edu Track	Start with a curious question → Storytelling narrative → Weave in knowledge points → Summary & sublimation	Use stories to convey knowledge, avoid a preaching tone, enhance content fun

Structural Bonus Principles (Whole Video General)

Subtitle Reinforcement: Use eye-catching subtitles to highlight core conclusions and point numbers, reducing cognitive load; enlarge or color key numbers/keywords.
Pacing Control: Switch an information point or visual every 10-15 seconds to avoid boring long shots; for short-duration videos, switch every 3-5 seconds.
Visualization Priority: Anything that can be shown with animation, experiments, or diagrams should not be purely narrated; anything that can be expressed visually should not be cluttered with text.
Second-person Narration: Use 'you' throughout the narrative, making the audience feel the knowledge is explaining themselves, not observing someone else's story.

Anchor-Word-Driven Classic Climax Template (Exact Frame Timing, Enabled for Strong Rhythm/Heavy Beat Alignment)

When the user requires strong rhythm, heavy beat alignment, burst at the beat, or documentary-style narrative, enable this template. The core is: the entire video revolves around one 'anchor word', with a heavy beat climax point set at the 17th second, allowing the audience to remember the core concept at the highest emotional point.

Step 1: Find the Anchor Word First (Must be done before writing any copy)

The anchor word is the nail of the whole video: 2～6 characters, it is the situation, confusion, or counter-intuitive moment in the audience's life that this principle lands on—not the term itself.

Three Standards for a Good Anchor Word:

Immersiveness: The audience immediately feels "this is about me".
Generality: The same word can summarize the entire principle.
Reversibility: It can be redefined at the end—at the beginning it's a dilemma, at the end it becomes understanding, relief, or strength.

Anchor Word Examples:

Principle	Anchor Word	Beginning (Dilemma)	Ending (Reversal)
Motion Aftereffect	Stuck	Running hard, but still stuck	Understanding the nature of movement perception
Sunk Cost	Can't let go	Can't let go, sinking deeper	Knowing the power of timely abandonment
Survivorship Bias	Invisible people	Only seeing the survivors, ignoring the silent majority	Learning to see the ignored truth

Step 2: Hook Section (0～16.4 seconds)

Core Principle: First write the audience's situation, then convey the knowledge. Knowledge is used to explain 'you'.

Don't start with history or terms; history, characters, and experiments are all placed after the climax.
First sentence strict format: Use the second person to write the paradox or confusion the audience is experiencing. Fixed sentence structure: "You already..., but why...?"
Use visual segments to advance the hook section: 3～4 groups of rapidly switching visuals, each segment about 3 seconds, the same core phenomenon replicates at different scales (individual → nature → society).

Step 3: Heavy Beat Climax (17th second, exact frame timing)

At 16.5～16.9 seconds, there is a 'breath' (near silence), at 17.0 seconds the heavy beat hits. Visual alignment strictly follows:

Time Point	Visual Action	Audio Alignment
16.4～16.9	The entire visual darkens, all elements fade out	Breath (near silence)
16.9～17.0	Still ~3 frames	Complete silence
17.0	The paper suddenly lights up or an ink splash explodes (consistent with the overall visual style); A huge anchor word appears simultaneously (about 1/3 of visual width); a ring of ink marks or a halo spreads outward from the center	Heavy beat hits
17.6	A small line floats below the anchor word: Term Name (Chinese-English)	Aftermath
17.6～~20	Hold the visual, only do very slight breathing (anchor word slightly zooms / glow pulses)	Narration pauses, remain quiet

Step 4: Educational Explanation Section (~20 seconds onwards → before ending)

Core Goal: Clearly explain the principle behind the anchor word, moving the audience from 'confusion' to 'enlightenment'. History, characters, and experimental material expand here, but all serve to explain 'why you experienced that dilemma'.

Organization of Educational Explanation (automatically selected based on principle type):

Organization	Applicable Scenario	Logic Chain
Point Explanation Type	Principles, general knowledge	State the core reason → Explain the mechanism in 2-3 points → Each point paired with a visual + one subtitle
Progressive Explanation Type	Phenomenon explanation	Surface phenomenon → Mid-level reason → Underlying principle → Why it affects you
Experiment Verification Type	Hands-on, hardcore science	Propose a hypothesis → Experiment process → Show phenomenon -> Interpret principle (reconnect to anchor word)

Copywriting Hard Requirements:

Full Second Person: Narrate using 'you'; each explanation should make the audience feel, "Oh, so this is why my previous dilemma was".
Reconnect to Anchor Word: Every 2-3 sentences, reconnect to the anchor word; don't stray off topic. The anchor word is the thread of the whole video, and the educational section is about pulling that thread taut.
Colloquial Priority: The terms have already been revealed at the climax; here use plain language to explain everything—"in simple terms", "think about it", "for example". Ban piling up professional vocabulary.
Consistent Pace: Switch a visual every 3-5 seconds, maintaining the same pace as the hook section; don't suddenly slow down.
Subtitle Reinforcement: Use eye-catching subtitles to highlight core conclusions and key numbers, reducing cognitive load.

Educational Section Copy Example (Using 'Motion Aftereffect / Stuck' as an example):

20-23s 【Explanation 1】You stared at the rotating circle for 30 seconds. When you stop and look at a stationary wall, the wall seems to move. → Subtitle: Eyes are "tired out" first 23-26s 【Explanation 2】This is because your retinal cells have been firing in one direction; when you stop, they still have inertia and bounce back → Subtitle: The inertia of the optic nerve 26-29s 【Explanation 3】So even though you're standing still, you feel the world is moving in the opposite direction → Subtitle: You're not moving; your eyes are "lying" 29-32s 【Explanation 4】This phenomenon is called motion aftereffect. All sensory systems have a similar 'fatigue residue'—ears hear tinnitus after prolonged noise, hands feel water getting hotter after touching cold water for a long time → Subtitle: It's not just eyes; the whole body has 'inertia'

Step 5: Ending Reversal of the Anchor Word (Last 5-8 seconds)

Core Goal: Flip the anchor word from 'dilemma' to 'understanding/relief/strength', completing an emotional loop.

Strict Format:

The last sentence must redefine the anchor word—at the beginning it is the audience's dilemma, at the end it becomes strength or insight.
Sentence template reference: 「In the end, ...is not your fault, but...」/「By understanding this, you will no longer...」/「The so-called..., is actually...」;
The visual returns to a scene that echoes the hook section (e.g., if the hook section was a desk, the ending also returns to a desk, but with a different state of mind).

Ending Reversal Example (Using 'Stuck' as an example):

32-36s 【Ending Reversal】In the end, 'stuck' doesn't mean you didn't try hard enough; it's just your sensory system playing a small joke on you. By understanding this, you will no longer feel anxious about not making progress even though you're moving—you just need to stop and let your eyes rest. Visual: Slowly fading out from the rotating vortex, returning to the quiet desk from the beginning, with sunlight shining on the surface.

Input Format

The user provides: total duration, topic/knowledge core, optional track/color scheme/style preference. The Agent automatically matches the hook type, main logic, and ending method, generating a complete storyboard script (timestamp + visuals + subtitles + structural annotations).

Storyboard Script Output Format: Each storyboard is labeled with 【Hook Type】【Main Logic - Point N】【Ending Method】, allowing the user to see the structural choices at a glance.

Example 1 (40 seconds, Trivia Track, Topic: Entropy):

Structural Selection: Soul Question Type hook + Progressive Reasoning main body + Summary & Reinforcement ending (adapted for compressed 1-3 minute slot) 0-4s 【Hook·Soul Question】You have cleaned your room until it's spotless, but why is it messy again after a week? 4-7s 【Main·Progressive 1·Individual Scale】The newly organized desk, books silently sliding to the edge → Subtitle: Things always slide into chaos on their own 7-10s 【Main·Progressive 2·Natural Scale】A drop of ink falls into clear water, slowly spreading, never to be gathered again → Subtitle: Molecules never stop their diffusion 10-13s 【Main·Progressive 3·Social Scale】An old street that no one sweeps, leaves piled layer upon layer → Subtitle: Order, once unmaintained, collapses 13-16s 【Main·Underlying Principle Convergence】So, chaos is the default state of the world, and order is the exception that requires money and energy to maintain. 16-34s 【Main·Historical Material Post-positioned】Clausius proposes entropy in 1865, Boltzmann's tombstone formula, a cup of cold water that never boils by itself... 34-40s 【Ending·Summary & Reinforcement】Resisting entropy is a long-term practice that everyone pursues throughout their life.

Example 2 (25 seconds, Lifestyle Health Track, Topic: Drinking ice water vs. warm water):

Structural Selection: Counter-intuitive Conclusion Type hook + Debunking/Correction main body + Interaction Guidance ending (adapted for 15-30 second ultra-short slot) 0-3s 【Hook·Counter-intuitive Conclusion】Ice water hurts your stomach? This claim has fooled you for decades. 3-8s 【Main·Debunking Misconception】Many people think ice water stimulates the digestive tract → Subtitle: Ice water = harmful to stomach? 8-15s 【Main·Establish Conclusion】The truth is: the stomach's temperature remains at 37°C, the ice water is heated instantly when it enters, so it cannot harm the stomach at all → Subtitle: The stomach has a built-in thermostat 15-20s 【Main·Truth Reversal】What really hurts the stomach is: drinking a lot of iced water on an empty stomach + long-term irregular eating habits → Subtitle: Bad habits are the real culprit 20-25s 【Ending·Interaction Guidance】Do you usually drink ice water or warm water? Tell me in the comments.

Complete Example Projects (examples/ directory)

The skill has two complete example projects ready for testing. Copy to your project to run the full lint / preview / render workflow:

Example	Path	Writing System	Duration	Style
Entropy Educational	`examples/entropy-16-9/`	Point-by-point Breakdown Type (Basic Template)	40s	Dark knowledge card style
Tired Despite Sleeping	`examples/sleep-tired-16-9/`	Anchor-Word Driven Classic Climax Template (17s Heavy Beat Burst)	40s	Medical technology style

Both examples pass lint validation (0 errors, 0 warnings), with 1920×1080 high-definition output. They can serve as reference templates for different writing systems.

Hard Rules for Writing Compositions

Strictly follow the HyperFrames composition contract: the root node must have data-composition-id, data-width, data-height, data-duration; clips use class="clip" + data-start + data-duration; register one paused GSAP timeline into window.__timelines["<id>"] (the key must be consistent with the root node's data-composition-id).
16:9 landscape: <meta name="viewport" content="width=1920, height=1080">, same size for the root node; default 1920×1080 high-definition output.
Before writing code, thoroughly read references/hyperframes-contract.md to avoid all common lint errors and GSAP pitfalls.
Do not use <template> to wrap independent root nodes; do not output code snippets; must be a complete standalone HTML file.
When there are ≥2 storyboard scenes, use a modular sub-composition architecture: each scene is a compositions/scene-*.html (containing that scene's style/script/root node inside <template> ), and the main index.html mounts each scene using data-composition-src. The host's data-composition-id, the root node's data-composition-id inside the sub-composition file, and the window.__timelines key must all be identical. See references/hyperframes-contract.md Section 8 for details.

Minimum Runnable Code Example (2 clips, directly runnable)

The following is a complete minimal example of index.html, containing 2 storyboard scenes, element weaving transitions, and GSAP timeline registration. Use this as a baseline when creating new scenes:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1920, height=1080">
<title>Entropy · Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: #0a0a0f; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }

  /* Root container: 1920×1080, 16:9 */
  .composition {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: #0a0a0f;
  }

  /* clip segments: absolute positioning filling the area, visibility controlled by the framework */
  .clip {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* Scene 1: Messy desk */
  #scene-desk { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); }
  #scene-desk .book {
    position: absolute;
    width: 80px;
    height: 120px;
    background: #e94560;
    border-radius: 4px;
    left: 300px;
    top: 300px;
    transform-origin: center;
  }
  #scene-desk .subtitle {
    position: absolute;
    left: 80px;
    bottom: 80px;
    color: #fff;
    font-size: 36px;
    font-weight: 500;
    opacity: 0;
  }

  /* Scene 2: Ink drop into clear water */
  #scene-ink { background: linear-gradient(180deg, #0f3460 0%, #16213e 100%); }
  #scene-ink .drop {
    position: absolute;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, #e94560 0%, transparent 70%);
    border-radius: 50%;
    left: 580px;
    top: 300px;
    transform: scale(0);
  }
  #scene-ink .subtitle {
    position: absolute;
    left: 80px;
    bottom: 80px;
    color: #fff;
    font-size: 36px;
    font-weight: 500;
    opacity: 0;
  }
</style>
</head>
<body>

<!-- Root node: data-composition-id must match the key in window.__timelines -->
<div class="composition"
     data-composition-id="entropy-demo"
     data-width="1920"
     data-height="1080"
     data-duration="10">

  <!-- clip 1: 0-5 seconds, desk scene -->
  <div class="clip" id="scene-desk" data-start="0" data-duration="5">
    <div class="book" id="book"></div>
    <div class="subtitle" id="desk-subtitle">Things always slide into chaos on their own</div>
  </div>

  <!-- clip 2: 5-10 seconds, ink spreading scene (element weaving: red of book → red of ink) -->
  <div class="clip" id="scene-ink" data-start="5" data-duration="5">
    <div class="drop" id="ink-drop"></div>
    <div class="subtitle" id="ink-subtitle">Molecules never stop their diffusion</div>
  </div>

</div>

<script>
  // Register a paused GSAP timeline into window.__timelines
  window.__timelines = window.__timelines || {};

  const tl = gsap.timeline({ paused: true });

  // === Scene 1: Desk (0-5s) ===
  tl.from("#book", {
    x: 0, y: 0, rotation: 0,
    duration: 2, ease: "power2.out"
  }, 0.5);
  // Book quietly slides to the edge (showing 'chaos')
  tl.to("#book", {
    x: 200, y: 100, rotation: 15,
    duration: 3, ease: "power1.inOut"
  }, 1);
  // Subtitle fades in
  tl.from("#desk-subtitle", {
    opacity: 0, y: 20,
    duration: 0.5, ease: "power2.out"
  }, 2);

  // === Transition: red element of the book → red of the ink (element weaving at 5s) ===
  // The elements of the previous clip naturally disappear at the end of the clip, while the elements of the next clip enter simultaneously
  // This achieves the illusion of 'one same element weaving through the front and back' through color echoing

  // === Scene 2: Ink spreading (5-10s) ===
  tl.from("#ink-drop", {
    scale: 0, opacity: 0,
    duration: 0.5, ease: "power2.out"
  }, 5.2);
  tl.to("#ink-drop", {
    scale: 4, opacity: 0.6,
    duration: 4, ease: "power1.out"
  }, 5.5);
  tl.from("#ink-subtitle", {
    opacity: 0, y: 20,
    duration: 0.5, ease: "power2.out"
  }, 6);

  // Register to global
  window.__timelines["entropy-demo"] = tl;
</script>

</body>
</html>

Key Annotations:

data-composition-id="entropy-demo" must match the key in window.__timelines["entropy-demo"] exactly.
data-duration is in seconds, not milliseconds.
The position parameter (second parameter) for the GSAP timeline is also in seconds.
Do not tween the clip elements themselves (the framework controls their visibility), only tween their child elements.
Element weaving transition: The elements of the previous clip morph/move to a certain state, and the next clip starts by entering from a similar position/form, creating the illusion of "the same thing moving continuously".

Storyboard Graphic/Animation Selection Guide (Auto-Matching)

When creating, automatically select the graphics and animations from the right side based on the core imagery of each storyboard's copy, without fixed use of examples like grids, scatter plots, or bar charts.

Selection Process

Parse each storyboard's copy, extract core imagery (e.g., "growth/chaos/possibility/order/network/cycle/atmosphere") and emotional intensity (Cold / Explosive / Dreamy / Epic / Cyber / Healing, etc.).
According to the table below, select 1 main graphic to carry the core imagery, and you can layer up to 5 auxiliary embellishments (particles, light effects, decorative lines, background textures, corner symbols, glow, halos, geometric fragments, etc.); match the animation according to the table. The number and type of embellishments serve the emotional tone of the copy; not every scene needs to be filled.
Check for determinism: Prioritize CSS/HTML achievable solutions. Complex graphics like fractals, cellular automata, 3D, shaders, textures, and particles must be deterministically implemented (fixed seed, pre-calculated arrays; prohibit Math.random, real-time clocks, network requests). Data charts use illustrative data.
Graphics must be within the 16:9 safe area (≥64px on all sides), and must not overflow the canvas. Visual density, effect intensity, and color saturation are autonomously determined by the emotional tone of the copy; no one-size-fits-all 'restraint' limit is imposed.

Semantics → Graphics → Animation Mapping (Common)

Storyboard Imagery	Recommended Graphics	Recommended Animation
Growth / Building Order	Bar charts, steps, tree-like growth, golden spiral	Grow from bottom, gradually rise
Chaos / Entropy / Disorder	Grid squares, scatter plots, Voronoi fragments, fractal cracks	Drift, spread, shatter
Possibility / Branching	Tree diagram, scatter plot, string lines, mind map	Diverge outward, branch-like growth
Cycle / Loop	Ring chart, circle, waveform, cycloid	Rotate, pulse, back-and-forth
Relationship / Network	Network topology, knowledge graph, force-directed graph	Connect nodes, progressive illumination
Time / Process	Line chart, area chart, timeline	Stroke drawing, track extension
Comparison / Distribution	Pie chart, ring chart, radar chart, box plot	Sector expansion, item-by-item presentation
Space / Structure	Isometric grid, point cloud, 3D wireframe	Layer-by-layer construction, rotational entry
Atmosphere / Abstract	Noise texture, wave interference, standing wave, particle flow	Flow, undulate, dissipate

For the complete candidate library (9 major categories: Basic Geometry, Data Charts, Fractal Generative Art, Simulation & Cellular Automata, Pixel Bitmap & Procedural Texture, 3D Graphics, Structure/Relation Diagram, Text-Type Graphics, Dynamic Graphics) and determinism implementation constraints, see references/hyperframes-contract.md Section 7 'Graphic Selection Library'.

Vibe Video Showcase Style (16:9 Landscape)

Core Principle: The visual style is autonomously determined by the copy, pursuing a cool...

2026079575/VibeDS-skill

What is VibeDS-skill?

Ask in your favorite AI

Documentation