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.
한국어 번역
PROJECT: THE FIRST SPARK — 절차적 애니메이션 단편 영화
당신은 시니어 크리에이티브 코더, 제너러티브 아티스트, 애니메이션 디렉터, JavaScript 그래픽 엔지니어입니다.
당신의 과제는 절차적 JavaScript 드로잉을 사용해 시각적으로 경이로운, 완전히 애니메이션된 단편 영화를 만드는 것입니다.
오프화이트 배경 위의 미니멀한 검은 잉크 애니메이션을 보여주는 참고 이미지를 첨부했습니다.
참고 자료는 시각 언어를 이해하는 데 활용하되, 고유한 스토리와 구도, 움직임을 지닌 독창적인 애니메이션을 창작하세요.
슬라이드쇼나 정적 일러스트, 단순한 파티클 데모를 만들지 마세요. 변화하는 장면, 표현력 있는 캐릭터 애니메이션, 영화적 전환, 연속적인 시각 스토리텔링을 갖춘 진정한 애니메이션 단편 영화를 구축하세요.
1. 기술 요구 사항
다음을 사용해 프로젝트를 구축하세요:
JavaScript
HTML5 Canvas 2D
실시간 재생을 위한 requestAnimationFrame
절차적 지오메트리와 벡터 기반 드로잉
베지어 곡선, 패스, 파티클, 커스텀 브러시 스트로크
마스터 타임라인에 기반한 결정적 애니메이션
모든 시각 요소는 JavaScript 코드를 통해 생성되어야 합니다.
다음을 사용하지 마세요:
AI 이미지 생성 API
AI 비디오 생성 API
외부 이미지 또는 사전 렌더링된 비디오
스톡 푸티지
CSS만 사용한 애니메이션
애니메이션으로 위장한 정적 일러스트
애니메이션은 진정으로 코드로 생성되어야 합니다.
애니메이션을 실질적으로 개선한다면 가벼운 JavaScript 라이브러리를 사용해도 되지만, Canvas 2D를 우선하세요.
2. 시각적 방향
손으로 그린 듯한 미니멀하고 실험적인 애니메이션을 만드세요.
시각적 특징:
따뜻한 오프화이트 종이 배경
깊은 검은 잉크 일러스트레이션
약간 불완전한 손그림 윤곽선
유기적인 브러시 스트로크
가변적인 선 두께
잉크 튀김과 은은한 종이 질감
표현력 있는 실루엣 기반 캐릭터 디자인
유연하고 유기적인 움직임
때때로 연출되는 드라마틱한 카메라 무브먼트
영화적인 구도
시각적 결과물은 프로페셔널한 독립 애니메이션 단편 영화처럼 느껴져야 합니다.
흔한 기하학적 모션 그래픽, 반복적인 파티클 효과, 단순한 튕기는 도형은 피하세요.
모든 장면은 명확한 시각적 목적을 가져야 합니다.
3. 스토리: THE FIRST SPARK
60초 분량의 독창적인 애니메이션 단편 영화를 만드세요.
이야기는 검은 잉크 한 방울에서 태어나 점차 세계를 창조하는 방법을 발견하는 작은 캐릭터를 따라갑니다.
씬 1 — 시작 (0–8초)
텅 빈 오프화이트 캔버스.
중앙에 작은 검은 잉크 방울이 나타납니다.
방울이 떨리기 시작합니다.
그로부터 작고 불규칙한 브러시 스트로크가 생겨납니다.
잉크는 천천히 작은 살아 있는 캐릭터로 변형됩니다.
캐릭터가 눈을 뜨고 주위를 둘러봅니다.
카메라가 점차 가까이 다가갑니다.
씬 2 — 발견 (8–18초)
캐릭터가 텅 빈 세계를 가로질러 걷기 시작합니다.
그 움직임은 애니메이션된 사지, 몸의 변형, 은은한 세컨더리 모션과 함께 살아 있는 듯 느껴져야 합니다.
발걸음마다 작은 잉크 자국이 남습니다.
캐릭터는 그중 하나의 자국을 발견하고 만져봅니다.
그 자국이 유기적인 구조물로 자라나기 시작합니다.
씬 3 — 창조 (18–32초)
캐릭터는 자신의 움직임이 새로운 사물을 창조할 수 있음을 발견합니다.
허공에 선을 하나 그립니다.
그 선은 나무가 됩니다.
더 많은 브러시 스트로크가 생겨나 언덕과 식물, 추상적인 구조물로 변형됩니다.
세계가 확장되는 동안 카메라가 캐릭터를 따라갑니다.
사물은 갑자기 나타나는 것이 아니라 절차적 드로잉을 통해 눈에 보이게 자라고 변형되어야 합니다.
씬 4 — 혼돈 (32–44초)
캐릭터가 자신의 창조물에 대한 통제력을 잃습니다.
검은 잉크가 빠르게 퍼집니다.
풍경이 왜곡됩니다.
나무들이 추상적인 형태로 뒤틀립니다.
잉크 튀김이 화면을 가득 채웁니다.
캐릭터가 달리는 동안 카메라가 은은하게 흔들립니다.
애니메이션은 더 빠르고 강렬해집니다.
모든 시각 요소 사이에 유연한 전환을 사용하세요.
씬 5 — THE FIRST SPARK (44–55초)
캐릭터가 달리기를 멈춥니다.
모든 것이 정지합니다.
손에 작게 빛나는 점이 나타납니다.
은은한 따뜻한 액센트 컬러가 사용될 수 있는 유일한 순간입니다.
캐릭터가 빛을 내보냅니다.
빛이 원형의 파동으로 퍼져 나갑니다.
혼돈의 잉크는 아름답고 균형 잡힌 풍경으로 재구성됩니다.
카메라가 뒤로 물러나 완성된 세계를 드러냅니다.
씬 6 — 엔딩 (55–60초)
캐릭터가 작은 언덕 위에 서서 수평선 쪽을 바라봅니다.
카메라가 천천히 뒤로 이동합니다.
전체 풍경은 점차 원래의 빈 캔버스 위에 그려진 작은 잉크 그림 하나로 변형됩니다.
오프화이트로 페이드 아웃.
끝.
4. 애니메이션 품질 요구 사항
이것은 프로젝트에서 가장 중요한 부분입니다.
모든 장면에는 실제 애니메이션이 담겨 있어야 합니다.
캐릭터에는 다음이 있어야 합니다:
절차적으로 애니메이션된 걷기와 달리기
표현력 있는 바디 랭귀지
머리와 몸의 회전
스쿼시 앤 스트레치
앤티시페이션과 팔로우 스루
포즈 사이의 부드러운 전환
환경 요소에는 다음이 있어야 합니다:
유기적인 성장 애니메이션
지속적인 은은한 움직임
반복되지 않는 절차적 변화
형태 사이의 부드러운 변형
다음을 갖춘 가상 카메라를 구현하세요:
위치
줌
회전
부드러운 트래킹
영화적인 이징
레이어드 깊이감과 카메라 무브먼트를 사용해 시각적 풍성함을 만드세요.
무작위 움직임에만 의존하지 마세요.
애니메이션은 스토리를 중심으로 의도적으로 연출되어야 합니다.
5. 타임라인과 렌더링 아키텍처
중앙 집중식 애니메이션 타임라인을 만드세요.
모든 시각적 상태는 현재 타임라인 위치에 의해 결정되어야 합니다.
다음과 유사한 함수를 구현하세요:
renderFrame(time)
이 함수는 요청된 타임스탬프에 대해 올바른 애니메이션 프레임을 렌더링해야 합니다.
시드 기반 무작위성을 사용해 동일한 타임스탬프를 렌더링하면 항상 같은 이미지가 생성되도록 하세요.
애니메이션이 이전에 렌더링된 프레임 수에 의존하게 만들지 마세요.
이것은 결정적 비디오 내보내기에 필수적입니다.
목표 사양:
해상도: 1920 × 1080
화면 비율: 16:9
프레임 레이트: 30 FPS
길이: 60초
소셜 미디어용 1080 × 1920 세로 형식으로 전환하는 옵션을 제공하세요.
6. 미리보기와 컨트롤
다음을 할 수 있는 로컬 웹 인터페이스를 만드세요:
애니메이션 재생 및 일시정지
애니메이션 다시 시작
타임라인 스크러빙
장면 간 이동
재생 속도 조절
가로 및 세로 형식 전환
애니메이션 실시간 미리보기
현재 타임스탬프와 장면 이름을 표시하세요.
7. 비디오 내보내기
안정적인 비디오 내보내기 워크플로를 구현하세요.
최종 애니메이션은 고품질 MP4 파일로 내보낼 수 있어야 합니다.
프레임 누락이나 일관성 없는 타이밍을 피하기 위해 결정적 프레임별 렌더링을 사용하세요.
적절한 브라우저 렌더링 파이프라인이나 프레임 시퀀스 익스포터, 또는 FFmpeg을 사용해도 됩니다.
브라우저 창을 실시간으로 녹화하는 것만으로 프로덕션 품질의 내보내기가 충분하다고 가정하지 마세요.
간단한 내보내기 명령 또는 인터페이스를 제공하세요.
8. 개발 프로세스
전체 영화를 하나의 거대하고 검증되지 않은 코드 블록으로 만들려고 하지 마세요.
단계적으로 작업하세요.
먼저:
프로젝트 아키텍처를 만듭니다.
Canvas 렌더링 엔진을 구현합니다.
결정적 타임라인을 구현합니다.
캐릭터 애니메이션 시스템을 만듭니다.
씬 1을 완전히 작동하는 시각적 프로토타입으로 구축합니다.
프로젝트를 실행하고 시각적 결과를 검토합니다.
첫 장면이 작동하면 나머지 장면 구현을 계속하세요.
여러 타임스탬프에서 애니메이션을 테스트하세요.
렌더링 오류, 깨진 전환, 일관성 없는 캐릭터 비율, 성능 문제를 확인하세요.
장면이 지나치게 단순해 보인다면 절차적 드로잉과 연출을 개선하세요.
9. 결과물
다음을 제공하세요:
완전한 JavaScript 소스 코드
작동하는 로컬 애니메이션 미리보기
편집 가능한 장면 정의
재사용 가능한 캐릭터 애니메이션 시스템
재사용 가능한 절차적 드로잉 함수
비디오 내보내기 기능
프로젝트 실행 지침
최종 결과물은 단순한 기술 시연이 아니라 실제로 작동하는 애니메이션이어야 합니다.
첫 장면과 핵심 애니메이션 엔진을 구현하는 것으로 시작하세요. 프로토타입이 작동하면 나머지 장면을 계속 진행하세요.
