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)
The character discovers that its movements can create new objects.
It draws a line through the air.
The line becomes a tree.
More brush strokes emerge and transform into hills, plants, and abstract structures.
The camera follows the character as the world expands.
Objects must visibly grow and transform through procedural drawing rather than suddenly appearing.
SCENE 4 — CHAOS (32–44 seconds)
The character loses control of its creation.
Black ink spreads rapidly.
The landscape becomes distorted.
Trees twist into abstract shapes.
Ink splashes fill the screen.
The camera shakes subtly as the character runs.
The animation becomes faster and more intense.
Use fluid transitions between all visual elements.
SCENE 5 — THE FIRST SPARK (44–55 seconds)
The character stops running.
Everything becomes still.
A small glowing point appears in its hand.
This is the only moment where a subtle warm accent color may be used.
The character releases the light.
The light expands into a circular wave.
The chaotic ink reorganizes into a beautiful, balanced landscape.
The camera pulls back to reveal the completed world.
SCENE 6 — ENDING (55–60 seconds)
The character stands on a small hill and looks toward the horizon.
The camera slowly moves backward.
The entire landscape gradually transforms into a single small ink drawing on the original empty canvas.
Fade to off-white.
End.
4. Animation quality requirements
This is the most important part of the project.
Every scene must contain actual animation.
The character must have:
Procedurally animated walking and running
Expressive body language
Head and body rotation
Squash and stretch
Anticipation and follow-through
Smooth transitions between poses
Environmental elements must have:
Organic growth animations
Continuous subtle movement
Non-repetitive procedural variation
Smooth transformations between shapes
Implement a virtual camera with:
Position
Zoom
Rotation
Smooth tracking
Cinematic easing
Use layered depth and camera movement to create visual richness.
Do not rely on random movement alone.
The animation should be deliberately choreographed around the story.
5. Timeline and rendering architecture
Create a centralized animation timeline.
Every visual state must be determined by the current timeline position.
Implement a function similar to:
renderFrame(time)
The function must render the correct animation frame for any requested timestamp.
Use seeded randomness so that rendering the same timestamp always produces the same image.
Do not make the animation dependent on the number of previous frames rendered.
This is essential for deterministic video export.
Target specifications:
Resolution: 1920 × 1080
Aspect ratio: 16:9
Frame rate: 30 FPS
Duration: 60 seconds
Provide an option to switch to 1080 × 1920 vertical format for social media.
6. Preview and controls
Create a local web interface that allows me to:
Play and pause the animation
Restart the animation
Scrub through the timeline
Jump between scenes
Adjust playback speed
Switch between horizontal and vertical formats
Preview the animation in real time
Display the current timestamp and scene name.
7. Video export
Implement a reliable video export workflow.
The final animation must be exportable as a high-quality MP4 file.
Use deterministic frame-by-frame rendering to avoid dropped frames or inconsistent timing.
You may use a suitable browser rendering pipeline, a frame-sequence exporter, or FFmpeg.
Do not assume that recording the browser window in real time is sufficient for production-quality export.
Provide a simple export command or interface.
8. Development process
Do not attempt to create the entire film as one enormous, untested code block.
Work in stages.
First:
Create the project architecture.
Implement the Canvas rendering engine.
Implement the deterministic timeline.
Create the character animation system.
Build Scene 1 as a fully functional visual prototype.
Run the project and inspect the visual result.
After the first scene works, continue implementing the remaining scenes.
Test the animation at multiple timestamps.
Check for rendering errors, broken transitions, inconsistent character proportions, and performance problems.
If a scene looks too simplistic, improve its procedural drawing and choreography.
9. Deliverables
Provide:
Complete JavaScript source code
Working local animation preview
Editable scene definitions
Reusable character animation system
Reusable procedural drawing functions
Video export functionality
Instructions for running the project
The final result must be a functioning animation, not just a technical demonstration.
Start by implementing the first scene and the core animation engine. Once the prototype is functional, continue with the remaining scenes.
