motion-skills

canvas-film

장면마다 화풍이 다른 시네마틱 영상을 HTML Canvas만으로 그립니다. 같은 장면 파일로 가로와 세로 MP4를 녹화하고 웹 플레이어에서 실시간으로 재생하며, 언어 파일을 추가하면 그 언어로도 재생합니다.

작업 흐름

입력
이야기 · 대본 · 사이트 글을 20–60초 장면으로 나누고, 장면마다 의미에 맞는 화풍 선택
장면
장면마다 HTML 파일 한 개. seek(t)로 어느 시점의 프레임이든 같은 그림
사운드
ElevenLabs 음악 · 효과음 큐를 장면 타임라인에 믹스
출력
MP4 1920×1080 · 1080×1920, 영상 파일 없이 재생하는 웹 플레이어(「한눈에 보는 성경 이야기」 13분 기준 약 10 MB)
다국어
번역 파일 · 폰트 교체 · RTL. 장면 파일은 바꾸지 않음
cd canvas-film/examples/hello
node ../../scripts/render.mjs h --scene dawn --stills 3,8
python3 ../../scripts/publish.py   # → site/ (라이브 플레이어)

요구 사항: Node + Playwright Chromium, ffmpeg, Python 3. 단계별 순서는 SKILL.md에 있습니다.

예제 examples/hello · 12초 · 소리 있음

샘플 · 21가지 화풍

「한눈에 보는 성경 이야기」 영상의 21개 장면을 영상 순서대로 놓았습니다. 장면마다 의미에 맞는 화풍을 골라 모두 Canvas 2D로 그렸습니다. 카드를 누르면 새 탭에서 그 장면부터 영상을 재생합니다. 화풍별로 그리는 법은 STYLES.md에 있습니다.

하나의 줄거리 — 한 줄 드로잉
장면 01 · 하나의 줄거리 · 36초한 줄 드로잉one-line drawing a single gold polyline with glow, revealed by arc length; words written along it with a feathered mask wipe
 창조 — 렌즈가 본 빛의 탄생 · IMAX 그레인
장면 02 · 창조 · 35초렌즈가 본 빛의 탄생 · IMAX 그레인light born like a lens sees it, IMAX grain darkness over water, one point igniting into an exposure bloom with lens ghosts and an anamorphic streak, a layered corona with slowly turning rays, particles swirling into galaxies, a dive into a planet, a dawn garden
 타락 — 화선지 수묵
장면 03 · 타락 · 34초화선지 수묵ink wash on rice paper painting "paints itself" (stroke reveal), an ink drop floods it (blurred mask with uneven, tendrilled edge), dry-brush wind streaks with feathered ends, a tiny gold point surviving, a vermilion seal
 족장 — 소프트 파스텔 · 매직아워
장면 04 · 족장 · 26초소프트 파스텔 · 매직아워soft pastel, magic hour → night chalky pastel strokes over a toned paper speckle, one continuous camera, stars multiplying
 출애굽 — 대작 포스터 과슈
장면 05 · 출애굽 · 44초대작 포스터 과슈1960s epic poster gouache (after Terpning, *Lawrence of Arabia*) opaque gouache base + form-following strokes + cream edge highlights; painted layers in parallax: a desert at a huge low sun, Moses before colossal statues, a plague sky, one door's blood under a lamp, a corridor between towering water walls lit by the pillar of fire with a whole people walking toward camera
 광야 여정 — 수채화 + 양피지 지도
장면 06 · 광야 여정 · 39초수채화 + 양피지 지도watercolour + parchment map a big map canvas with a red dashed route drawing itself, dives into watercolour vignettes (Sinai, camp, Jordan)
 사사 시대 — 1920년대 무성영화
장면 07 · 사사 시대 · 40초1920년대 무성영화1920s silent film 4:3 scratched print between curtains, intertitle cards, the same shot repeated faster and more damaged each cycle, the film burning through
 통일 왕국 — 채색 필사본
장면 08 · 통일 왕국 · 39초채색 필사본illuminated manuscript vellum, lapis/vermilion border, burnished gold leaf with a moving candle glint, a gilded initial, text written in letter by letter
 분열 · 포로 — 목판화
장면 09 · 분열 · 포로 · 36초목판화woodcut black ink planes cut into by white gouge strokes (pictures "carved" in), a crown cracking, captives on a white road, harps on willows, one gold star on the river for the promise
 포로 귀환 — 청사진이 노을 속 3D로
장면 10 · 포로 귀환 · 38초청사진이 노을 속 3D로blueprint developing into a lit 3D dusk (after *Titanic*) white lines on Prussian-blue paper draw the city plan, stand up into wireframe, and colour develops outward into a golden-hour 3D world — scaffolds, builders with spears, the wall rising course by course, a ring of lamps at night, sunrise at the Water Gate
 400년 침묵 — 종이 오림 라이트박스
장면 11 · 400년 침묵 · 34초종이 오림 라이트박스paper-cut lightbox layered paper cut-outs with soft shadows lit from behind, a year counter, seasons turning on one tree, a new star burning through
 예수님의 오심 — 스테인드글라스
장면 12 · 예수님의 오심 · 36초스테인드글라스stained glass lead lines + coloured panes that "wake" with a light band; coloured light on the floor
 십자가 — 흑백 필름 + 한 점의 빨강 → 렘브란트 유화
장면 13 · 십자가 · 39초흑백 필름 + 한 점의 빨강 → 렘브란트 유화black-and-white film + one red → Rembrandt oil grain, high contrast, one red drop; then a top-lit oil painting of a kneeling figure under the cross's shadow
 부활 — 임파스토 (나이프 페인팅)
장면 14 · 부활 · 27초임파스토 (나이프 페인팅)impasto (palette knife) thousands of knife strokes laid in grey, the stone rolls, a light burst, then every stroke re-laid in colour in a wave from the empty tomb (an accumulating mask rebuilt for any seek)
 교회 — 밤의 시네마토그래피
장면 15 · 교회 · 35초밤의 시네마토그래피night cinematography: upper room → moonlit ridges → night earth a lamp-lit room of seated silhouettes rim-lit by tongues of fire, the camera through the window; layered night ridges with haze, lantern streams lighting villages; a per-pixel night globe with city lights spreading and dawn on the limb
 회복 — 수채 두루마리
장면 16 · 회복 · 36초수채 두루마리watercolour handscroll a painting front sweeping across, a tear wiped away in close-up, a city of light painted in
 거울 — 워홀 실크스크린
장면 17 · 거울 · 44초워홀 실크스크린Warhol photo-silkscreen series halftone dot plates over off-register colour blocks, every print pulled live (mesh screen, squeegee, ink bead); the idol series repeats across the wall until a wave reprints every panel as a mirror showing me
 복음의 핵심 — 금빛 선 하나의 트래킹 샷
장면 18 · 복음의 핵심 · 67초금빛 선 하나의 트래킹 샷the gold line, one tracking shot in the dark, one gold line runs left to right and draws each truth in light (bars short of glory, a ladder crumbling into a mirror, a gift, a robe of light, 66 points turning to the One, a dial filling); the line becomes the cross
 성경은 실화인가 — 탐험가 수채 스크랩북
장면 19 · 성경은 실화인가 · 60초탐험가 수채 스크랩북explorer's watercolour scrapbook (after *The English Patient*) a journal on a desk in slanting window light: taped watercolours, photos and rubbings, handwritten tallies instead of charts, the Isaiah scroll joined word to word to the printed page, real page turns, a dusk painting at the end
 착하게 살면? — 옛 해도 동판화
장면 20 · 착하게 살면? · 57초옛 해도 동판화18th-century sea-chart copperplate (after *Mutiny on the Bounty*) one engraved admiralty chart (compass roses, rhumb lines, cartouches, sea monsters); engraved ships sail along drawn courses; a man crosses by boat from the pirate ship to the ship of light; the old course is struck through
 초대 — 금빛 선의 귀환
장면 21 · 초대 · 57초금빛 선의 귀환the gold line returns the line writes each sentence of the prayer, pulls back into one line, ends on the title card

실제 작품

이 스킬이 처음 만들어진 프로젝트입니다. 스킬의 모든 단계를 이 프로젝트에서 썼습니다.

한눈에 보는 성경 이야기13분 · 21장면 · 11개 언어 · 라이브 플레이어와 MP4one-scroll-bible.com/film/ 원본 레포 · one-scroll-bible → motion/장면 21개, 사운드 큐, 언어 파일 전체. 스킬의 출처github.com/jungrok5/one-scroll-bible