---
name: liquid-mark
description: Create a deterministic seven-second liquid logo reveal from an owned vector mark, four colors and a brand name, using HTML, SVG filters, GSAP and HyperFrames.
version: 1.0.2
category: video
delivery: download-only
---
# Liquid Mark · 液滴标识揭示

Use for a standalone brand sting or an outro. This is a parameterized renderer with an Agent art-direction and verification workflow, not an arbitrary cinematic generator. It supports horizontal and stacked lockups at 1920×1080, 30fps, seven seconds.

## Inputs / 输入
Obtain an owned or authorized, self-contained SVG mark and a rights statement. For a fictional brief, author an original vector file first and identify it as original concept artwork. Do not substitute a third-party logo. Inspect all SVG code; only static geometry is accepted. Measure the actual SVG geometry bounding box in the browser (`svg.getBBox()`) and center its viewBox before rendering. Inspect proportion, native detail, and contrast.

Provide JSON with `brand` (1–28 characters), `mark` (SVG path relative to JSON), `rights` (nonempty provenance), `layout` (`horizontal` or `stacked`) and `colors` (exactly four #RRGGBB values: ground then three soft fields). A color/brand change is not sufficient art direction: choose the lockup orientation and assess the supplied mark's silhouette. The renderer rotates the irregular satellite composition for the stacked layout.

## Run / 运行
Node ≥22, Python 3.9+ and FFmpeg are required. No key, model, paid service, 3D runtime, or another Skill is used.

```sh
node scripts/create.mjs /absolute/path/brief.json /absolute/path/new-project
cd /absolute/path/new-project
npm install
npm run check
npm run preview
npm run render
```
The generated project contains local GSAP and Inter resources, `index.html`, `mark.svg`, `brief.json`, and `meta.json`. Dependency installation only supplies pinned HyperFrames 0.8.151. The editable HTML exposes `window.__timelines.main` for arbitrary seeks. Always return `true`, not the GSAP timeline, from a browser evaluation: GSAP timelines are thenable.

## Direction and timing / 导演与时序
Keep the one-subject grammar. No copy appears before rupture. Gather 0–1s; drift 1–3s; stop 3–103/30s; rupture at t=103/30s, collapse over six frames; satellites scatter over ≥0.94s; lockup lands and recoils; everything stops by 4.67s; hold to 7s. Frame numbering is zero-based (frame 103 is one-based frame 104).

The carrier is unreadable liquid distortion, not a small sharp logo. Keep seeded turbulence and an authored table of 15 satellite positions/radii/launch multipliers. Keep goo on the whole fluid group. Do not add a wobble after the reveal. Preserve both start/end values and explicit `immediateRender:false` on fromTo animations.

## Verify / 验证
Run lint and browser check and retain the logs. Inspect encoded frames at 0.6, 1.8, 3, 3.4, 3.53, 3.63, 4.4, 4.67 and 6.4 seconds. The 3.4s mark must be unreadable; the final lockup crisp. Compare monotonic and shuffled seeks at the same time, verify the final hold is pixel-identical, then play the encoded MP4 at 1× twice. Use ffprobe to confirm H.264 / 1920×1080 / 30fps / 7s. A preview alone is not proof of encoded output.

## Audio / 声音
The default render includes a deterministic synthesized review score, generated without external samples or model calls. `sound.json` keeps editable arrival, rupture and lockup cue times, and `score.wav` is embedded through HyperFrames. Set `sound:false` in the brief for a silent picture lock. Inspect and listen to the encoded MP4 separately; this is not a professional mix or a ChatCut export.

## Handoff / 交付
Return the MP4, editable project, palette, rupture time, check logs, legibility frames and disclosed limitations. See references/mechanisms.md and references/runtime.md. Never include client demo media or marks in the generic Skill ZIP.