Original post by @morpheusdv · View on X ↗
The original recipe
From the creator7,816 chars
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.





