Awesome Showreels

A motion-graphics showreel about anything, styled by its own material.

A repo, a paper, a brand, a shop, an event or just an idea: give your agent the material, or a few lines about it, and it designs, scores and renders the reel.

An agent skill for Claude Code, Codex CLI, Gemini CLI or any coding agent. Delivers an MP4.

Examples · Real productions · Features · Install · FAQ · 🇰🇷 한국어

---

Examples

Eighty-nine example projects. Sixteen are real web apps live at toyz.kr, captured from their own production builds. Twenty-four take one drawing style each from the video 모션그래픽 20가지 톤 (Ai-Con Lab) and make up a project to suit it, in Korean. Twenty-four more do the same with styles taken from eight open repositories of code-rendered video (credited below the wall). The rest are each made from a different kind of source, and there the style of the reel (palette, type, motion, music) comes from the source, not from a theme list. One, solid-3d, shows the solid 3D layer: real lit materials, type extruded from the reel's font, an exploded view and 3D transitions.

Orbit Note · orbit-note a linked-notes app → holographic wiki graph · cinematic 96 BPM ▶ Play · HTML · Source	OFFGRID · offgrid a local map → one push from Seoul into an alley walk · swing 96 BPM ▶ Play · HTML · Source
Mochi Notes · playful-app an app README → pastel mascot, real app UI · bright pop 120 BPM ▶ Play · MP4 · HTML · Source	ONE CREDIT JAM · pixel-arcade a game jam → pixel art, CRT · chiptune 144 BPM ▶ Play · MP4 · HTML · Source
Light-sheet zebrafish embryo · paper-imaging a microscopy paper → a sheet of light stacks the embryo · 92 BPM ▶ Play · HTML · Source	Gut metabolite and anxiety · paper-behaviour a mouse-behaviour paper → tracks seen from above · 104 BPM ▶ Play · HTML · Source
spark-bench · research-cli a research CLI → GPU points, real terminal · dark synth 128 BPM ▶ Play · MP4 · HTML · Source	Alveolar repair atlas v2 · academic-paper a single-cell paper → one nucleus, tissue to 3D atlas and back · 96 BPM ▶ Play · HTML · Source
Attention Is All You Need, explained · paper-transformer a landmark paper → typeset like the paper, attention computed · 110 BPM ▶ Play · HTML · Source	WNT-pulse organoids · paper-organoid an organoid paper → a lab notebook that keeps itself · 100 BPM ▶ Play · HTML · Source
House of Music · swiss-grid an architecture brief → 12-column grid, one red · 124 BPM ▶ Play · MP4 · HTML · Source	How a language model picks the next word · explainer-llm an LLM explainer → words as arrows, maths animation · 15/30/60 s · 96 BPM ▶ Play · HTML · Source
Sunlight for Breakfast · explainer-sunlight a science explainer → flat vector, from the Sun to toast · 15/30/60 s · 128 BPM ▶ Play · HTML · Source	PAPER JAM #07 · riso-zine a zine → riso inks off register · 160 BPM ▶ Play · MP4 · HTML · Source
Visual Notes Lab · sketchnote a workshop handout → markers that write themselves · 104 BPM ▶ Play · MP4 · HTML · Source	Yohakuan · sumi-wabi a ryokan website → sumi ink, vertical type · koto 72 BPM ▶ Play · MP4 · HTML · Source
Perturb-seq: T-cell exhaustion · paper-perturbseq a CRISPR-screen paper → illustration, data, illustration · 116 BPM ▶ Play · HTML · Source	Ridgeline Pocket · pixel-pocket a hiking app → a four-green handheld game · chiptune 108 BPM ▶ Play · HTML · Source
The Tamsin Valley Courier · newsprint a local newspaper → printing press, halftone · 96 BPM ▶ Play · MP4 · HTML · Source	Trove · trove a bookmark app → chrome torus, links pulled into orbit · dark synth 128 BPM ▶ Play · HTML · Source
Pulse · pulse a maker dashboard → brushed aluminium, live meters · bright pop 112 BPM ▶ Play · HTML · Source	Frame · frame a portfolio builder → live preview as you type · corporate 112 BPM ▶ Play · HTML · Source
Tiny Beat · tiny-beat a daily beat maker → a glowing step sequencer · lo-fi 80 BPM ▶ Play · HTML · Source	Deploy Kit · deploy-kit a launch kit → the files fly into one ZIP · drum and bass 176 BPM ▶ Play · HTML · Source
Read Room · read-room a shared reading room → highlights drawn at pen speed · ambient 96 BPM ▶ Play · HTML · Source	Motion Kit · motion-kit a micro-interaction kit → its own animations, frame by frame · bright pop 128 BPM ▶ Play · HTML · Source
LAYR · layr a notes workspace → notes falling onto five glass layers · dark synth 112 BPM ▶ Play · HTML · Source	tiny.tools · tiny-tools a developer toolbox → smart paste picks the tool · chiptune 128 BPM ▶ Play · HTML · Source
MOOD FM · mood-fm a mood radio → the frame takes the colour of the mood · lo-fi 96 BPM ▶ Play · HTML · Source	FORM / 01 · form-01 a design feedback board → pins and versions on the work · cinematic 112 BPM ▶ Play · HTML · Source
LOOP · loop a habit app → taps fill a chrome ring · corporate 128 BPM ▶ Play · HTML · Source	FOCUS SPACE · focus-space a focus timer → a session in time-lapse inside an arched door · ambient 96 BPM ▶ Play · HTML · Source
PIXEL KIT · pixel-kit a brand-image tool → one design in six sizes, three kits · swing 128 BPM ▶ Play · HTML · Source	꼬마 화가 · crayon a picture-book app → crayon on drawing paper, drawn as you watch · bright pop 112 BPM ▶ Play · HTML · Source
종이비행 페스티벌 2026 · paper-collage a music festival → torn paper slapped down on the beat · bright pop 128 BPM ▶ Play · HTML · Source	피싱 메일 3초 판별법 · whiteboard a security training → a hand draws it in marker on one long board · corporate 112 BPM ▶ Play · HTML · Source
한빛시 자전거 리포트 2026 · infographic a city report → isometric charts that grow and count · corporate 128 BPM ▶ Play · HTML · Source	하루 세 칸 · minimal-ui a habit app → white cards, one blue, a cursor that really uses it · bright pop 128 BPM ▶ Play · HTML · Source
폴드원 E1 · blueprint a folding e-bike → white line work on blue, then it folds · cinematic 112 BPM ▶ Play · HTML · Source	브루큐브 · cutaway-3d a home coffee roaster → a 3D cutaway that opens and works · corporate 112 BPM ▶ Play · HTML · Source
글래스 노트 No.3 · chrome-glass a perfume → raymarched glass that bends the words behind it · ambient 96 BPM ▶ Play · HTML · Source	궤도 일곱 · cinematic-3d a documentary → the sun breaking over the Earth, in scope · cinematic 96 BPM ▶ Play · HTML · Source
모노블록 · solid-3d a palm-sized speaker → real 3D: extruded type, an exploded view, 3D cuts · bright pop 128 BPM ▶ Play · HTML · Source	블록 마을 · voxel a kids' coding camp → one line of code, one block on the beat · bright pop 128 BPM ▶ Play · HTML · Source
8비트 장터 2026 · pixel-platformer a retro game fair → a side-scroller at 4x, jumps on the beat · chiptune 144 BPM ▶ Play · HTML · Source	번개다방 〈볼륨 업〉 · rock-stage a rock gig → each instrument moves its own part of the stage · rock 128 BPM ▶ Play · HTML · Source
흐름의 지도 · generative-art a media-art show → lines in a flow field gather into the title · ambient 96 BPM ▶ Play · HTML · Source	센티넬 X · dark-neon AI security → neon tubes, attacks unseen until the radar crosses them · dark synth 128 BPM ▶ Play · HTML · Source
네온 레인 2087 · cyberpunk an SF game → Seoul in the rain, Korean neon, glitches · dark synth 112 BPM ▶ Play · HTML · Source	오르빗 컨트롤 · hologram satellite operations → a projected globe and 300 satellites · dark synth 112 BPM ▶ Play · HTML · Source
글자판 termpan · ascii a terminal dashboard → characters fly in and become a spinning donut · chiptune 128 BPM ▶ Play · HTML · Source	말랑베이커리 · clay a bread delivery → plasticine at 12 frames a second · bright pop 112 BPM ▶ Play · HTML · Source
털뭉치 공방 · stop-motion a felt doll workshop → felt and stitches, shot frame by frame · lo-fi 96 BPM ▶ Play · HTML · Source	산책왕 멍멍 · cartoon a dog-walking app → ink lines, smears, a crown for the winner · bright pop 144 BPM ▶ Play · HTML · Source
콩이 첫 팬미팅 · character-show a mascot's fan meeting → one glossy character, a new pose every two beats · bright pop 128 BPM ▶ Play · HTML · Source	벚꽃 정류장 · anime a webtoon → an anime background painting, petals and a late bus · corporate 112 BPM ▶ Play · HTML · Source
도성 한 바퀴 · ink-wash a city-wall walking tour → a Korean ink landscape that unrolls like a scroll · koto 96 BPM ▶ Play · HTML · Source	동명극장 재개관 · old-film a cinema reopening → a worn sepia print, a countdown, intertitles · swing 128 BPM ▶ Play · HTML · Source
솔뫼 양조장 · woodcut a makgeolli brewery → a relief print that carves itself · corporate 96 BPM ▶ Play · HTML · Source	한반도 곤충 도감 · engraving a field guide → copperplates that engrave themselves · corporate 112 BPM ▶ Play · HTML · Source
바람섬 다섯 길 · silkscreen-poster an island walking map → posters pulled one ink at a time · folk 112 BPM ▶ Play · HTML · Source	어디쯤 택배 · halftone-dossier a parcel tracker → a deadpan case file in halftone · swing 128 BPM ▶ Play · HTML · Source
빛뜰 미술관 · stained-glass a glass-art museum → a window that lights piece by piece · ambient 80 BPM ▶ Play · HTML · Source	그림자 토끼전 · shadow-puppet a children’s shadow play → rod puppets behind a lamp-lit cloth · folk 96 BPM ▶ Play · HTML · Source
오림 공방 · paper-cut a paper-cutting class → folded hanji cut and unfolded · bright pop 112 BPM ▶ Play · HTML · Source	이음 만년필 · one-line a fountain pen → one gold line that never breaks · ambient 80 BPM ▶ Play · HTML · Source
한 점 플래너 · shape-morph a day planner → one shape that never cuts · bright pop 128 BPM ▶ Play · HTML · Source	톡톡 스파클링 · liquid a sparkling drink → glossy WebGL metaballs · bright pop 128 BPM ▶ Play · HTML · Source
네온 하이웨이 1986 · synthwave an arcade racer → outrun grid and chrome on a videotape · synthwave 96 BPM ▶ Play · HTML · Source	작전명 비단 · spy-titles a 1960s spy drama → a cut-paper title sequence · swing 128 BPM ▶ Play · HTML · Source
조형 연구소 여름 학교 · bauhaus a design summer school → shapes on a module grid, one move a beat · dark synth 128 BPM ▶ Play · HTML · Source	냥이네 하숙집 · variety-captions a variety show → 9:16 captions that pop, punch-ins and freezes · bright pop 128 BPM ▶ Play · HTML · Source
궁금상자 · sticker-explainer a science channel → stickers on one big board, a gliding camera · corporate 112 BPM ▶ Play · HTML · Source	반듯 선반 · assembly-manual a flat-pack shelf → a wordless assembly manual · corporate 112 BPM ▶ Play · HTML · Source
비 오는 날의 밤톨이 · watercolour-toon a picture book → watercolour washes, characters that act · corporate 96 BPM ▶ Play · HTML · Source	파란 버스 · lyric-video a band’s single → a lyric video the engine sings · bright pop 112 BPM ▶ Play · HTML · Source
통통 악기 놀이 · collision-music a music-play app → marbles that play the bars they hit · ambient 128 BPM ▶ Play · HTML · Source	소리상회 100년 · chronicle a music shop’s centenary → one shopfront in five eras · corporate 112 BPM ▶ Play · HTML · Source
5초 미션 · microgame a party game → microgames that get shorter · chiptune 144 BPM ▶ Play · HTML · Source	끝없는 확대 · zoom-dive a science exhibition → powers of ten, 1 m to 0.1 nm · ambient 96 BPM ▶ Play · HTML · Source
유리 타일 정원 · mosaic subway public art → 14,400 glass tiles that flip · ambient 112 BPM ▶ Play · HTML · Source	한강 시티 라이트 1988 · cel-anime-80s a TV anime → 1980s cel paint on twos, VHS · city pop 112 BPM ▶ Play · HTML · Source
kablok · neo-brutal a landing page → hard shadows, slabs · funk 112 BPM ▶ Play · MP4 · HTML · Source	Maison Veyrande · editorial-luxe a fashion press release → Bodoni, ivory and black · piano 80 BPM ▶ Play · MP4 · HTML · Source
Mistfold · botanical-organic a tea brand story → watercolour, growth time-lapse · guitar 96 BPM ▶ Play · MP4 · HTML · Source	Pebble & Bean · pixel-isometric a café opening → cosy isometric pixel art in 16 pastels · lo-fi 86 BPM ▶ Play · HTML · Source
VELMORA 42 · sports-kinetic a race-timing app → broadcast type, real splits · drum and bass 176 BPM ▶ Play · MP4 · HTML · Source	THE EMERALD FAN · art-deco a jazz-age invitation → gilded frames · swing 112 BPM ▶ Play · MP4 · HTML · Source
Lanternforge 2.0 · pixel-jrpg a game-engine release → HD-2D JRPG trailer, real light on pixel art · 120 BPM ▶ Play · HTML · Source

_{Each loop is one moment of the reel at real speed, without sound. ▶ Play opens the full reel in your browser with music, where you can switch between its lengths (the same file is in each folder's dist/: 1–5 MB, opens offline, number keys switch lengths). Projects and data are fictional and labelled as such on screen (the sixteen toyz.kr apps are real; the data they show is their own fictional sample data); the two explainers and the Transformer explainer cover real ideas, with toy models or rounded textbook values, and say so. The twenty-four style examples are fictional projects too (the city wall and gates in ink-wash are real); only the drawing styles come from the video, not its characters or frames. The twenty-four that follow the video’s styles borrow only the style from eight repositories (lemo-opuscar, mg-styles-15, pdoom-video, PDoomVideo, ClaudeAnimationBase, awesome-opus5-5-videos, awesome-claude-5-5-videos, opus-video-prompts); every project is fictional, the recorded instruments are CC0 (VCSL and VSCO 2 Community Edition), and the lyrics and voice of 「파란 버스」 were made for this repository. solid-3d is fictional too; its 3D runs on three.js (MIT), and the 3D technique catalogue in the skill follows the categories of TakayuStudio's 3D Motion Reference (no code taken). Design directions for material without a look of its own come from the shiraki.design YAML Library by Shiraki, fetched on demand and never redistributed.}

Style decisions per example

Example	Source	Mood	Palette	Type	Motion	Music (BPM)
academic-paper	single-cell paper	airy, precise	blush · coral	Source Serif 4	3D nuclei, tissue ↔ atlas	corporate 96
anime	coming-of-age webtoon	wistful, luminous	sky blue · cherry pink	Gowun Dodum	tilt, drifting clouds, petals	corporate 112
art-deco	invitation	opulent, nocturnal	black · gold	Limelight	symmetrical	swing 112
ascii	terminal dashboard	clever, playful	Tokyo Night	Nanum Gothic Coding	typing, characters landing	chiptune 128
assembly-manual	flat-pack shelf	calm, clear	black line on white · one blue	Gothic A1	isometric parts slide in, screws turn	corporate 112
bauhaus	design workshop	geometric, ordered	red · blue · yellow · black on cream	Gothic A1 · Do Hyeon	one move per beat, quarter turns, overprint	dark synth 128 (dorian)
blueprint	folding e-bike	precise, clean	blueprint blue · white · one yellow	IBM Plex Sans KR	lines drawn, a mechanical fold	cinematic 112
botanical-organic	tea brand story	calm, earthy	oat · leaf green	Fraunces	slow	guitar 96
cartoon	dog-walking app	bouncy, funny	sky · grass · ink	Black Han Sans · Jua	squash, stretch, smears	bright pop 144
cel-anime-80s	anime opening	romantic, nostalgic	dusk violet · rose · neon cyan	Black Han Sans · Nanum Myeongjo	characters on twos, pans, a title slam	city pop 112 (slap bass, sax)
character-show	mascot fan meeting	adorable, showy	stage violet · bean green · gold	Jua	a pose every two beats	bright pop 128
chrome-glass	perfume	quiet, precious	night · silver · champagne	Nanum Myeongjo	raymarched glass, chrome sheen	ambient 96 (lydian)
chronicle	shop centenary	warm, proud	one palette per era on dark wood	Song Myung · Yeon Sung · Do Hyeon · Black Han Sans · Pretendard	odometer years, era surfaces	corporate 112 + era riffs
cinematic-3d	documentary trailer	epic, quiet	space black · air blue · dawn orange	Noto Serif KR · Black Han Sans	slow camera, a shader Earth	cinematic 96
clay	bread delivery	cosy, cute	cream · crust gold · coral	Jua · Dongle	stop motion, boiling clay	bright pop 112
collision-music	music-play app	playful, precise	mint · rainbow bars	Jua	parabolas solved from the notes	ambient 128 (marimba)
crayon	picture-book app	warm, clumsy	drawing paper · crayon colours	Gaegu	lines that boil, drawn at hand speed	bright pop 112
cutaway-3d	home coffee roaster	precise, warm	graphite · orange trim	Gothic A1	casing slides open, parts turn	corporate 112
cyberpunk	SF game trailer	wet, lurid	violet night · magenta · cyan	Do Hyeon · Orbit	rain, reflections, glitch	dark synth 112
dark-neon	AI security platform	sharp, vigilant	black · cyan · magenta	Orbit	neon stutter, radar reveal	dark synth 128
deploy-kit	launch kit	brisk, technical	paper · cobalt	Pretendard	file streams	drum and bass 176
editorial-luxe	press release	elegant, quiet	ivory · champagne	Bodoni Moda	slow	piano 80
engraving	insect field guide	precise, scholarly	copper · cream · one red wash	Nanum Myeongjo · Diphylleia	burin cuts, hatching	corporate 112
explainer-llm	LLM explainer notes	curious, lucid	navy · yellow	KaTeX Main	maths animation	ambient 96
explainer-sunlight	science notes	wondrous, bright	violet · sun gold	Nunito	flat-vector dives	bright pop 128
focus-space	focus timer	quiet, deep	deep green · chrome	Pretendard	time-lapse	ambient 96
form-01	feedback board	precise, editorial	ink · metal · pin colours	Pretendard	pins, versions	cinematic 112
frame	portfolio builder	clean, quick	paper · orange	Pretendard	live typing	corporate 112
generative-art	media-art exhibition	quiet, wondrous	night navy · blues · gold	Hahmlet	particles integrated from birth	ambient 96
halftone-dossier	parcel-tracking app	deadpan, funny	manila · newsprint · red	Black Han Sans · Nanum Gothic Coding	stamps, flashes, typed reports	swing 128 (minor)
hologram	satellite operations	calm, futuristic	dark room · holo blue · orange	Orbit · Nanum Gothic Coding	projected light, flicker	dark synth 112
infographic	city cycling report	clear, smart	paper map · data colours	Gothic A1	bars grow, numbers count	corporate 128
ink-wash	city-wall walking tour	calm, dignified	rice paper · ink · one red seal	Nanum Brush Script · Song Myung	washes bleed, strokes paint	koto ambient 96
layr	notes workspace	calm, structured	near-black · steel · lime	Pretendard	glass layers	dark synth 112
liquid	sparkling water	fizzy, glossy	candy pink · lime · grape	Bagel Fat One · Jua	metaballs merge, drops splash	bright pop 128
loop	habit app	steady, friendly	periwinkle · navy	Pretendard	a ring that fills	corporate 128
lyric-video	summer single	bright, breezy	sky · sea blue · bus blue · yellow	Jua · Gowun Dodum	syllables pop on their notes	bright pop 112 + formant voice
microgame	party game	frantic, funny	a primary per mission · black outlines	Bagel Fat One · Galmuri11	missions of 4, 2, 1 beats	chiptune 144
minimal-ui	habit app	clean, calm	near-white · one blue	Pretendard	cursor-driven UI	bright pop 128
mood-fm	mood radio	warm, chromatic	the mood's own colour	Pretendard	dial sweeps	lo-fi 96
mosaic	public artwork	sparkling, fresh	subway white · glass palette	Grandiflora One · Gowun Dodum	flip waves in a shader	ambient 112
motion-kit	interaction kit	playful, exact	electric blue · orange	Pretendard	app animations replayed	bright pop 128
neo-brutal	landing page	loud, blunt	cream · lemon	Archivo	hard snaps	funk 112
newsprint	newspaper	factual, civic	newsprint · red	Newsreader	steady	piano 96
offgrid	local map app	nocturnal, local	night map · lime	Pretendard	one camera push	swing 96
old-film	cinema reopening	nostalgic, warm	sepia · bulb yellow	Nanum Myeongjo	film weave, flicker, scratches	swing 128
one-line	fountain pen	elegant, calm	navy paper · gold	Nanum Myeongjo · Gowun Batang	one continuous stroke, the camera behind the pen	ambient 80
orbit-note	linked-notes app	luminous, connected	electric blue · holo	Pretendard	drawn links	cinematic 96
paper-behaviour	mouse-behaviour paper	clean, precise	white · blue	Instrument Sans	tracked from above	corporate 104
paper-collage	music festival	loud, handmade	newsprint · cut-paper brights	Black Han Sans · Do Hyeon · Song Myung · Jua	scraps slap down on the beat	bright pop 128
paper-cut	New Year class	festive, handmade	hanji red · cream	Song Myung · Gowun Dodum	folds on the beat, cuts, the unfold	bright pop 112
paper-imaging	light-sheet paper	luminous, patient	black · green	Manrope	GPU nuclei	ambient 92
paper-organoid	organoid paper	warm, hands-on	paper · magenta	Literata	handwritten notebook	corporate 100
paper-perturbseq	CRISPR-screen paper	precise, nocturnal	night · orchid	IBM Plex Sans	illustration ↔ data	dark synth 116
paper-transformer	landmark paper	elegant, exact	cream · vermilion	STIX Two	typeset	cinematic 110
pixel-arcade	game jam	chunky, punchy	night · gold	Press Start 2P	stepped	chiptune 144
pixel-isometric	café opening	cosy, warm	cream · latte	Jersey 10	isometric pixel	lo-fi 86
pixel-jrpg	engine release	heroic, nostalgic	night · lantern gold	Pixelify Sans	HD-2D light	cinematic 120
pixel-kit	brand-image tool	crafty, consistent	near-black · orchid	Pretendard	a wall that turns over	swing 128
pixel-platformer	retro game fair	nostalgic, cheeky	dusk bands · coin gold	Galmuri11	game physics on the beat	chiptune 144
pixel-pocket	hiking app	calm, outdoorsy	four greens	5×7 bitmap	dithered tone steps	chiptune 108
playful-app	app README	playful, bouncy	light · pink	Nunito	springy	bright pop 120
pulse	maker dashboard	crisp, instrumental	aluminium · orange	Pretendard	meters, snaps	bright pop 112
read-room	reading room	quiet, literary	paper · marker orange	Pretendard	pen-speed highlights	ambient 96
research-cli	research CLI	technical, cool	dark · cyan	Space Grotesk	damped	dark synth 128
riso-zine	zine	loud, scrappy	newsprint · fluo pink	Anton	jumpy	lo-fi 160
rock-stage	rock gig	loud, electric	black · bolt yellow · stage red	Black Han Sans	per-instrument reactions	rock 128
shadow-puppet	shadow play	warm, playful	lamp amber · black silhouettes	Song Myung · Gowun Batang	puppets on rods, boards on strings	folk 96 (pentatonic)
shape-morph	planner app	clean, playful	warm paper · ink · coral	Pretendard	one shape morphs on springs, a seamless loop	bright pop 128
silkscreen-poster	island walking courses	sunny, handmade	five spot inks on paper	Gasoek One · Gothic A1	a squeegee pull per beat, misregistration	folk 112
sketchnote	workshop handout	hand-drawn, friendly	whiteboard · orange	Shantell Sans	handwritten	bright 104
solid-3d	palm-sized speaker	tidy, warm, confident	warm grey · graphite · one vermilion	Pretendard	extruded type, exploded view, 3D cuts	bright pop 128
sports-kinetic	race-timing app	energetic, exact	track black · orange	Barlow Condensed	fast	drum and bass 176
spy-titles	spy drama	cool, tense	orange · teal · black · cream	Black Han Sans · Gothic A1	bars on the diagonal, match cuts, a stop	swing 128 (minor)
stained-glass	museum opening	luminous, serene	jewel glass on dark stone	Grandiflora One · Gowun Batang	lead drawn, pieces light, floor light drifts	ambient 80 (lydian, organ)
sticker-explainer	science explainer	friendly, smart	board grey · sticker brights	Jua · Gothic A1	stickers slap down, a dotted path grows	corporate 112
stop-motion	felt doll workshop	tender, handmade	cutting-mat green · felt browns	Gamja Flower	8 fps, a hand-held camera	lo-fi 96
sumi-wabi	ryokan site	quiet, restrained	washi · one vermilion	Shippori Mincho	very slow	koto 72
swiss-grid	architecture brief	precise, ordered	paper · one red	Schibsted Grotesk	on the grid	synth 124
synthwave	arcade racer	nostalgic, fast	violet · magenta · cyan	Gugi · Orbit	grid rush, chrome slam, palms	synthwave 96 (gated snare)
tiny-beat	beat maker	warm, rhythmic	black · lime	Pretendard	on the step grid	lo-fi 80
tiny-tools	developer toolbox	crisp, nimble	night · violet	Pretendard	paste and answer	chiptune 128
trove	bookmark app	sleek, nocturnal	black · lime	Pretendard	orbit, chrome	dark synth 128
variety-captions	vertical variety show	noisy, cute	sunburst yellow · candy captions	Bagel Fat One · Jua · Black Han Sans	captions pop letter by letter, punch-in, freeze	bright pop 128 (vertical)
voxel	kids' coding camp	playful, tactile	sky · grass · brick	Jua	blocks land on the beat	bright pop 128
watercolour-toon	picture book	warm, gentle	cream paper · rain blue · chestnut	Hi Melody · Gowun Dodum	keyframed acting, washes that boil on twos	corporate 96 (harp, pizzicato)
whiteboard	security training	calm, clear	whiteboard · marker black · red	Nanum Pen Script	a drawing hand, a camera along the board	corporate 112
woodcut	brewery centenary	earthy, proud	ink black · paper · vermilion	Black And White Picture · Song Myung	gouges carve, prints lift	corporate 96
zoom-dive	science exhibition	wondrous, calm	walnut · leaf greens · navy · black	Hahmlet · IBM Plex Sans KR	one logarithmic zoom	ambient 96 (lydian)

Each folder's style.json records every decision and the evidence from the source behind it.

---

Real productions

The method comes from four real projects made before this repo.

FDDD · research data reel · 128 BPM ▶ Play · Repo	CC-statusline · terminal tool reel ▶ Play · Repo
K-BeautyGate · hackathon pitch reel · 120 BPM ▶ MP4 (30 s)	FlyGate · narrated research reel ▶ Play · MP4 · Repo

---

Features

Style from your source
Palette, type, pace and music are read from your material, with the evidence written down. No presets. Material with no look of its own can borrow a design direction you choose.

Real material, not decoration
Your app's UI, your CLI's output, your paper's figures, your data. Code-drawn motion around it.

Solid 3D when it earns it
Lit materials, soft shadows and depth of field, type extruded from your fonts, exploded views, camera moves and 3D cuts, on the same beat grid as everything else.

Any length
15, 30 or 60 s from one plan. Longer cuts add scenes; nothing is slowed down.

Music and sound effects included
Synthesized to fit the style, from koto to drum and bass, and timed to the picture.

Optional narration
Gemini TTS on your own key, checked by speech-to-text, with captions.

Ready to share
An MP4 for each length, plus a web version: one 1–2 MB HTML file with every length and its music. It opens in any browser without internet, switches length with the number keys, steps frame by frame for review, and can be sent in a chat or played from a link.

---

How it works

1. Read the source. Measure palette, fonts, tone and density; write style.json with the reasons.
2. Storyboard. One message per scene; exact wording and disclaimers fixed up front.
3. Pick the proof. Real UI, real terminal output, real figures, real numbers.
4. Plan the cuts. All lengths on one beat grid.
5. Build and score. Scenes are code; music and SFX are synthesized from the same cue list.
6. Check and ship. Stills, motion and audio checks, then MP4 and HTML.

flowchart LR
    subgraph decide ["① Decide"]
        direction TB
        src(["📂 Your source<br/>repo · README · paper<br/>deck · website"]):::io
        tone["🎨 Tone pass<br/>extract_style.py<br/>→ style.json + board"]:::decide
        story["📝 Storyboard<br/>STORYBOARD.md<br/>reel.config.json"]:::decide
        plan["🥁 Bar-grid plan<br/>plan_cut.py<br/>→ 15 · 30 · 60 s"]:::decide
        src --> tone --> story --> plan
    end
    subgraph make ["② Make"]
        direction TB
        car["📸 Carriers<br/>real UI · CLI casts<br/>PDF figures · cutouts"]:::make
        scn["🎞 Scenes<br/>Canvas2D + WebGL2 + 3D<br/>pure functions of time"]:::make
        snd["🔊 Sound<br/>arrange.py<br/>→ verify_sync.py"]:::sound
        vo["🎤 Voice · optional · BYOK<br/>Gemini TTS → STT check<br/>→ ducked mix"]:::opt
        car --> scn --> snd -.-> vo
    end
    subgraph ship ["③ Ship"]
        direction TB
        look["👀 Look<br/>stills.mjs<br/>motion_qa.py"]:::check
        out(["📦 Deliver<br/>MP4 per cut<br/>one self-contained HTML"]):::io
        look --> out
    end
    decide ==> make ==> ship

    style decide fill:none,stroke:#cba6f7,stroke-width:2px
    style make fill:none,stroke:#89b4fa,stroke-width:2px
    style ship fill:none,stroke:#fab387,stroke-width:2px

    classDef io fill:#fab387,stroke:#fab387,color:#11111b
    classDef decide fill:#cba6f7,stroke:#cba6f7,color:#11111b
    classDef make fill:#89b4fa,stroke:#89b4fa,color:#11111b
    classDef sound fill:#94e2d5,stroke:#94e2d5,color:#11111b
    classDef opt fill:#a6e3a1,stroke:#a6e3a1,color:#11111b,stroke-dasharray:5 4
    classDef check fill:#f5c2e7,stroke:#f5c2e7,color:#11111b

---

Install

The skill is a folder of instructions (SKILL.md) and command-line tools, so any coding agent can use it.

Claude Code

/plugin marketplace add AwesomeZun/Awesome-Showreels
/plugin install awesome-showreels@awesome-showreels

Codex CLI (OpenAI)

git clone https://github.com/AwesomeZun/Awesome-Showreels.git
mkdir -p ~/.codex/skills && cp -r Awesome-Showreels/skills/motion-showreel ~/.codex/skills/

Gemini CLI

gemini extensions install https://github.com/AwesomeZun/Awesome-Showreels

Any other agent: clone the repo and tell the agent to follow skills/motion-showreel/SKILL.md (the repo's AGENTS.md points there).

One-time setup (the agent runs it on first use):

cd <skill folder>/runtime && npm install
python3 -m pip install numpy scipy pillow opencv-python pymupdf fonttools brotli

---

Prompts to try

	Ask your agent
📦 Repo	Make a 30-second showreel from this repo, plus a 15-second cut.
📄 Paper	Turn paper.pdf into a 45-second explainer using the paper's own figures.
🖼️ Deck	Make a launch teaser from pitch.pptx in the deck's colors and fonts.
⌨️ CLI	Make a 15-second reel with a real terminal capture of mytool demo.
🎤 Narration	Narrate the 30-second cut with my Gemini key.
⏱️ Longer	Make a 60-second version of the reel.
💡 Just an idea	Make a 20-second reel for my bakery's weekend market: sourdough, cinnamon buns, Saturday 9 to 1.

---

FAQ

Do I need an API key?

No. Everything renders on your machine and the music is synthesized locally. Only the optional narration needs a key: your own Gemini key (see Bring your own key).

What does it cost?

The skill is free (MIT). Building a reel uses your agent's plan like any other task. Narration and extra mascot poses use your own accounts, and only when you agree.

Is anything in the examples faked?

The projects are fictional and say so on screen. What they show is real: captured app UI, real terminal recordings, data from the example's own files.

Vertical or square video?

Yes, as a re-layout of the same project ("size": [1080, 1920] or [1080, 1080]), not a crop.

Can it use my own mascot or logo?

Yes. Images become clean cutouts (macOS Vision or OpenCV) that blink, bounce and squash on the beat.

My material has no design. Where does the look come from?

From its tone, or from a design direction you choose. When a brief, outline or paper has no colours or type of its own, the skill shortlists two or three looks from the shiraki.design YAML Library (256 slide and infographic designs in 15 categories), shows you their samples and lets you pick. Your material still wins wherever it says something. Entries are fetched one at a time into a cache on your machine, never copied into your project or this repository (the library's terms), and the reel credits the entry by number and link.

What is the HTML file?

The web version of the reel: one small file with every length and its music. Open it in any browser, even offline. Space plays and pauses, ← → step, number keys switch cuts, F is fullscreen.

Under the hood

• Runtime: Canvas2D + WebGL2, with solid 3D (G3, on three.js) for lit materials, extruded type and 3D cuts; every frame is a function of time, so stills, MP4 and the web version match exactly.
• Planner: timing/plan_cut.py lays every cut on one bar grid; longer cuts add scenes and holds.
• Audio: audio/synth.py, arrange.py, verify_sync.py (numpy/scipy, no samples): presets from ambient to chiptune, swing and drum and bass; every cue checked against the picture, -14 LUFS.
• Captures: tools/capture_ui.mjs (app UI), capture_cli.py (terminal), pdf_figures.py (paper figures), prep_assets.py + lift.swift (cutouts).
• Design directions: tools/design_library.py lists the shiraki.design YAML Library, fetches up to three entries into a local cache and drafts palette roles with checked contrast, type, motifs and bans for style.json.
• Narration: narration/tts_gemini.py with speech-to-text checks, ducking and captions.
• Big reels: templates/showreel-workflow.js splits the work across many agents on Claude Code; other agents run the same steps in order.
• This page: every preview was rendered by the skill from docs/readme-reel/.

---

Requirements

	Needed for
Node.js 20+ and Chrome/Chromium	rendering stills, MP4 and the web version
ffmpeg	MP4 and audio encoding
Python 3.9+ with numpy, scipy, Pillow, opencv-python	style pass, planner, music, cutouts
Optional: pymupdf, fonttools + brotli	PDFs, font subsets
Optional: soundfile, soxr and curl	recorded instruments (two CC0 libraries, fetched once into a cache)
Optional: macOS 14+ with swiftc	Vision cutouts (OpenCV elsewhere)
Optional: your Gemini API key	narration

---

Bring your own key

Narration is the only feature that needs a key, and it is off unless you ask for it. The skill ships no key and never searches for one.

• Save it once in your own terminal: python3 <skill folder>/narration/tts_gemini.py key save (macOS Keychain), or set GEMINI_API_KEY before starting your agent.
• key status shows which source is used; key check tests it for free.
• Never paste a key into a chat. Without a key, --dry-run tests the whole chain offline.

---

Tests

python3 -B -m unittest discover -s tests
node --test tests/*.test.mjs

---

License

MIT. Example fonts are under the SIL Open Font License with their license files. The solid 3D layer bundles three.js 0.186 (MIT, skills/motion-showreel/runtime/vendor/three.LICENSE). All music and sound effects are synthesized; no samples are included.