Bio Growth Animation

Biological Growth Animation

Turn organism stage images into a continuous-growth scientific archive short film. The reused components are continuous morphing and the interface system; the new organism's images, stage names, anatomical control points, and leader lines must be redesigned — simply changing the seahorse title is not allowed.

Default: 10 seconds, 3:4 vertical 900×1200, 60fps, black background, no narration, conceptual data. Adjust for other durations, visual references, or delivery formats as requested. Built-in HUD template supports 3:4 and same-ratio resolutions, 2–8 stages; other aspect ratios require actual layout modifications, not direct canvas stretching.

Workflow

1. Determine the growth sequence. Use the organism and visual direction already provided in the request. Stages must correspond to achievable poses; simple size increases can use continuous morphing, while metamorphic development (e.g., frog/butterfly developing or losing limbs) first read Asset and Morphology Guide and segment into topologically continuous intervals. Concept diagrams do not pretend to be actual measured developmental data; verify stages and facts used in knowledge explanations.

2. Create and inspect assets. Use the available built-in imagegen for new assets with transparent background; see the Asset and Morphology Guide for full prompts and background cleanup strategy. Use consistent camera angle, orientation, and lighting. Always inspect real output first, then read actual dimensions and determine grid boundaries; grey backgrounds, foggy rectangles, and bleed from adjacent cells must be resolved before animation. Do not assume the dimensions in the prompt are realized.

3. Fill in the configuration. Read the Configuration Guide, copy the structure from assets/examples/seahorse.json, but recalibrate semantic control points for the new organism. Set title, stages, size anchors, two sets of metrics, labels, and color scheme. Asset paths are relative to the config file; all control points use raw pixel coordinates within a single cell. Key poses must have continuous head/torso/limb correspondences.

4. Generate the project. Set the current skill directory as BIO_SKILL_DIR and run in the working directory:

   python3 "$BIO_SKILL_DIR/scripts/create_project.py" --config work/specimen/config.json --validate-only
   python3 "$BIO_SKILL_DIR/scripts/create_project.py" --config work/specimen/config.json --out work/specimen/project
   

   The output directory must not exist or be empty; the script will not overwrite an existing project. It copies local GSAP, fonts, morph renderer, embeds the config, and generates a HyperFrames project; no image API is called for existing assets. The project is generated with Python 3; video validation/export requires Node.js 22+, FFmpeg, and a Chrome/WebGL instance. HyperFrames CLI is pinned to a verified version; first run may need to download dependencies.

5. Check transitions, not just stage endpoints. Run npm run check -- --snapshots in the generated project and inspect the first visible frame, intermediate frames between every two poses, the mature form, and the final hold frame. For targeted screenshots, run npx hyperframes snapshot --at <comma-separated times>. Recheck the first screenshot to ensure the first frame is not detatched from the timeline due to async initialization. Verify no grid fold, eye ghosting, tail ring holes, atlas clipping, title overlap, or leader lines detatched from the body.

6. Complete export. When the user requests a finished video, export within the licensed scope without repeatedly asking for already-given production requirements:

   npm run render -- --quality delivery --output renders/growth.mp4
   ffprobe -v error -select_streams v:0 -show_entries stream=width,height,r_frame_rate,duration,nb_frames -of json renders/growth.mp4
   

   Inspect intermediate frames in the exported video. Deliver the MP4, config/project source files, and asset prompts; place user-visible files in the agreed-upon outputs directory, keep temporary images, logs, and check frames in work. Do not publish or upload to external services unless requested.

When a HyperFrames-related skill already exists, reuse its runtime and CLI conventions; the template here handles the growth animation generation specifically, and does not recollect preferences already established in the conversation.

Implementation requirements for guaranteed smoothness

• The subject has a single continuous growth progress; control points (eye, snout/mouth, torso, limbs, curled tail) all change with the same progress. Do not revert to a 0.3-second image swap to simulate smooth growth; simply increasing fps will not fix the swap sensation.
• Shared triangle mesh warps adjacent textures into a common shape; Catmull-Rom control space trajectories and distance field interpolation converge contours, reducing double edges from alpha blending. Complex topology changes cannot be brute-forced by adding more control points.
• Label lines read directly from morphed control points; values are directly formatted from the current progress, retaining decimal places. Do not set a fixed initial stroke-dasharray and then continue extending the leader line.
• A single paused GSAP timeline drives property setters; do not rely on onUpdate callbacks suppressed by seek, and do not use real clocks. Register the timeline only after image decode and mesh construction, and call the available __hfForceTimelineRebind().
• The built-in contour interpolation thresholds the alpha of transparent images: for semi-transparent jellyfish/delicate wings, check that tentacles and thin edges are not lost, and adjust morph.alphaThreshold per actual asset; physical transparency is not promised.

Quick verification and invocation example

The skill includes the original seahorse assets and a verified config for regression testing, which cannot be passed off as new organism assets:

python3 "$BIO_SKILL_DIR/scripts/create_project.py" --config "$BIO_SKILL_DIR/assets/examples/seahorse.json" --out work/growth-smoke

Typical request: "Use this skill to create a growth animation of a jellyfish from small to large, 10 seconds, cyan-blue, 60fps."

For maintenance, run python3 scripts/test_create_project.py and node scripts/test_renderer.mjs; they do not call image API or render.

When the user only wants to modify an existing short, preserve its assets and layout, adjust the corresponding config or runtime; do not regenerate the entire set of images. The built-in generator supports rebuilding from a project's config.json to a new sibling directory; verify before selecting the new result.