Generate Advanced Creative Animations with a Single Sentence Using Codex

This article demonstrates how to leverage a Skill authored by Livo that packages common animation patterns for use with AI agents such as Codex or other large‑language‑model agents. By issuing a concise natural‑language prompt, the agent either returns ready‑to‑run p5.js code or directly renders the animation.

1. Download the Skill

The Skill can be installed with a single sentence command. Using Codex yields the best results, though other agents (e.g., Doubao) also work.

2. Basic animation effects

2.1 Physical bead curtain

/p5-animation 蓝色的雨帘，密集一点，做成动画效果

The resulting animation shows a dense blue rain curtain.

2.2 Naturally growing branches and flowers

/p5-animation 5条自然生长的花枝，做成动画效果

The animation depicts five branches that grow organically.

2.3 Flying swallows

/p5-animation 30只黑色飞燕，做成动画效果

The effect shows thirty black swallows fluttering freely.

3. Creative animation combinations

3.1 Deer antlers blooming

The author generated a base image of a deer with antlers using GPT, then applied the natural‑growth branch animation onto the antlers.

The combined result produces a subtle dynamic effect.

3.2 Headpiece bead curtain

By prompting the agent with a description of a headpiece, the system generates a bead‑curtain effect that can be adjusted via the prompt.

Further prompt adjustments refine the natural‑growth style.

4. Using the generated code

If you prefer the raw p5.js code instead of the visual output, simply omit the phrase "做成动画效果" from the prompt and resend it to Codex. The agent then returns the corresponding JavaScript code, as illustrated in the screenshot below.

5. Practical considerations

These animation effects can be embedded in web pages to make static visuals more engaging, but developers should balance visual flair with page load speed, readability, and overall user experience.