Procedural animated short film about a tiny ink character

Prompt

The author shared the full prompt.

PROJECT: THE FIRST SPARK — Procedural Animated Short Film

You are a senior creative coder, generative artist, animation director, and JavaScript graphics engineer.

Your task is to create a visually stunning, fully animated short film using procedural JavaScript drawing.

I have attached a reference image showing a minimalist black-ink animation on an off-white background.

Use the reference to understand the visual language, but create an original animation with its own story, composition, and movement.

Do not create a slideshow, static illustration, or simple particle demo. Build a genuine animated short film with evolving scenes, expressive character animation, cinematic transitions, and continuous visual storytelling.

1. Technical requirements

Build the project using:

JavaScript
HTML5 Canvas 2D
requestAnimationFrame for real-time playback
Procedural geometry and vector-based drawing
Bezier curves, paths, particles, and custom brush strokes
Deterministic animation based on a master timeline

All visual elements must be generated through JavaScript code.

Do not use:

AI image-generation APIs
AI video-generation APIs
External images or pre-rendered video
Stock footage
CSS-only animation
Static illustrations disguised as animation

The animation must be genuinely generated by code.

You may use lightweight JavaScript libraries if they meaningfully improve the animation, but prioritize Canvas 2D.

2. Visual direction

Create a hand-drawn, minimalist, experimental animation.

Visual characteristics:

Warm off-white paper background
Deep black ink illustrations
Slightly imperfect hand-drawn outlines
Organic brush strokes
Variable line thickness
Ink splashes and subtle paper grain
Expressive silhouette-based character design
Fluid, organic movement
Occasional dramatic camera movements
Cinematic composition

The visual result should feel like a professional independent animated short film.

Avoid generic geometric motion graphics, repetitive particle effects, and simple bouncing shapes.

Every scene should have a clear visual purpose.

3. Story: THE FIRST SPARK

Create an original 60-second animated short film.

The story follows a tiny character that emerges from a drop of black ink and gradually discovers how to create a world.

SCENE 1 — THE BEGINNING (0–8 seconds)

An empty off-white canvas.

A tiny black ink droplet appears in the center.

The droplet begins trembling.

Small irregular brush strokes emerge from it.

The ink slowly transforms into a tiny living character.

The character opens its eyes and looks around.

The camera gradually moves closer.

SCENE 2 — DISCOVERY (8–18 seconds)

The character begins walking across the empty world.

Its movement must feel alive, with animated limbs, body deformation, and subtle secondary motion.

Every step leaves behind small ink marks.

The character notices one of these marks and touches it.

The mark begins growing into an organic structure.

SCENE 3 — CREATION (18–32 seconds)

Category

Films & stories

Stack

Web Audio, Canvas

From the author

1,988 lines of JS, including player and browser export.

On X

339 likes · 44K views · 608 saves