titlekit

Title and motion graphics templates for EffectCraft, buildable by hand or by an AI agent.

titlekit is a set of 19 parametric templates and 14 animated elements for EffectCraft, the free, open source compositor in the style of After Effects. Titles, captions, lower thirds, social buttons, charts and transitions build in 16:9 and 9:16 with one command. I wanted clean animated overlays for short videos without buying a plugin pack, and EffectCraft can be driven entirely from scripts, so the templates are small JavaScript files instead of project files you have to click through. Everything in the GIFs on this page was rendered by EffectCraft from these files.

Quickstart

Prerequisites:

• EffectCraft with effectcraft-cli on the PATH (tested with 0.8.0)
• Node 20 or newer
• This repository, cloned or downloaded

cd titlekit
node bin/titlekit.mjs check
node bin/titlekit.mjs build lower-third

Result, in about five seconds:

built lower-third 16x9
built lower-third 9x16
saved C:\Users\you\titlekit\dist\lower-third.ecproj
rendered C:\Users\you\titlekit\dist\lower-third-16x9.gif (0.41 MB)
rendered C:\Users\you\titlekit\dist\lower-third-9x16.gif (0.42 MB)

The .ecproj holds two compositions with transparent backgrounds, ready to lay over footage.

Templates

All templates run at 30 fps, use only Inter (bundled with EffectCraft) and keep text inside a safe area. For 9:16 that is 64 px at the sides, 220 px at the top and 420 px at the bottom, clear of the platform buttons. Text that would leave the safe area shrinks to fit. The previews show a slate background; the projects are transparent.

Text

16:9	9:16	Template	Length
		hook-title Up to three uppercase lines that pop in, with a highlight bar under one word.	3.2 s
		kinetic-words One sentence, word by word, wrapped to the safe area with one accent word.	3.5 s
		typewriter Text types in character by character behind a blinking cursor.	4.9 s
		letter-cascade Letters rise out of a blur one after another, one word in the accent color.	3.1 s
		mask-reveal A line draws across, the title rises out of it and the subtitle drops below it.	4.0 s
		glitch-title An uppercase title that glitches in with an RGB split, flickers mid hold and glitches out.	3.2 s
		quote-card A large quote mark pops, the quote rises in line by line, the author slides in.	4.6 s

Social

16:9	9:16	Template	Length
		lower-third Name and role with an accent bar, for interviews and speakers.	4.3 s
		caption Short form captions in groups of words, with a box that jumps to the spoken word.	4.3 s
		social-handle A follow banner: avatar circle pops, a panel slides out with the handle and a call to follow.	4.2 s
		subscribe-click A subscribe button pops in, a cursor clicks it and it switches to its subscribed state.	3.8 s
		cta-button A rounded button that pops in, pulses twice and fades out.	3.6 s
		progress-bar A chapter progress bar that fills over the video, with the current chapter name.	6.0 s

Data

16:9	9:16	Template	Length
		counter A number that counts up with ease out, then a label underneath.	4.5 s
		bar-chart Up to eight bars grow from a baseline, values count up and the largest bar takes the accent.	4.4 s
		progress-ring A ring fills to a percentage while the number in its center counts up.	4.8 s

Transitions

16:9	9:16	Template	Length
		shape-wipe A transition: slanted color bars sweep across, cover the frame for the cut and sweep off.	1.2 s
		circle-wipe A transition: circles grow from the center to cover the frame, then open from the middle.	1.2 s

Elements

The element template places one of 14 Lottie animations from the free section of LottieFiles. EffectCraft imports them as native shape layers, so they stay sharp at any size and render with the rest of the project. Confetti fills the frame, icons take a share of the safe area, and placement, size, delay and loops adjust that.

node bin/titlekit.mjs elements
node bin/titlekit.mjs build element --format 9x16 --set element=confetti-tall --set delay=1

The element files are not MIT. They are distributed under the Lottie Simple License, which allows commercial use without attribution. Creators, sources and the full license text are in assets/elements/README.md.

Usage

Command line

node bin/titlekit.mjs list
node bin/titlekit.mjs build hook-title --format 9x16 --set "text=Stop scrolling|this saves|hours" --set highlightWord=hours
node bin/titlekit.mjs build counter --set to=1200 --set prefix= --set "suffix= views" --set "label=in the first hour" --out renders
node bin/titlekit.mjs build-all

Command	What it does
list	templates with summary and default length
elements	the bundled Lottie elements with their creators
build TEMPLATE	project plus one GIF per format, options --format 16x9|9x16|both, --set key=value, --out FOLDER (default dist)
build-all	every template with defaults into projects/ and assets/previews/
preview TEMPLATE	rewrites the two GIFs in assets/previews/
check	finds effectcraft-cli, prints its version, checks commands, the Inter font and port 9877

Ready made projects

projects/ holds one .ecproj per template, built with the default parameters. Open one in EffectCraft, change the text layers by hand and render from the render queue like any other project. Each file contains both compositions, for example caption 16x9 and caption 9x16.

From an AI agent over MCP

skills/titlekit/SKILL.md teaches an agent such as Claude Code which command to run for a request and how to check the result. Copy the skills/titlekit folder into your agent's skills folder (for Claude Code: ~/.claude/skills/ or .claude/skills/ inside a project).

To let the agent see and render frames in the running app, start EffectCraft with --control 9877 and register the bridge:

claude mcp add effectcraft -- "<install folder>/effectcraft-cli.exe" mcp --bridge 9877

Example prompts:

Make a lower third for Grace Hopper, computer scientist, with a red accent.

Captions for "Nobody tells you this about editing", two words at a time, green box, vertical.

Bar chart of views per weekday: Mon 12, Tue 19, Wed 8, Thu 24, Fri 16, values in k.

A glitchy title that says SYSTEM ERROR, then a circle wipe in pink.

Confetti over the whole vertical frame after one second, then show me the middle frame.

The skill makes the agent render frames at the start, middle and end and look at them before it reports back.

Parameters

Every parameter has a default. All templates also take background (none or a hex color) and safeSide, safeTop, safeBottom (auto or px). Full reference with value formats: docs/parameters.md.

bar-chart

Parameter	Type	Default	Meaning
title	string	Views per day	Heading above the chart. Empty for none.
labels	string	Mon|Tue|Wed|Thu|Fri	Bar labels split with the pipe character.
values	string	12|19|8|24|16	Bar values split with the pipe character, same count as labels.
suffix	string	k	Text after each value.
accent	color	#22c55e	Color of the largest bar.
barColor	color	#64748b	Color of the other bars.
textColor	color	#ffffff	Color of the title, values and labels.
hold	number	2.5	Seconds the finished chart stays.
textSize	number	40	Size of values and labels in px. The title is 1.6 times this.

caption

Parameter	Type	Default	Meaning
text	string	This is how you make captions that people actually read	The spoken sentence. Split into groups of up to maxWords words.
maxWords	number	3	Most words shown at once.
wordsPerSecond	number	2.6	Speaking rate. Each word is highlighted for 1 / wordsPerSecond seconds.
accent	color	#7c3aed	Color of the box behind the spoken word.
textColor	color	#ffffff	Color of the words.
uppercase	string, one of yes, no	yes	yes sets the words in capitals, no keeps the original case.
textSize	number	84	Font size in px. Shrinks so every group fits the safe width.

circle-wipe

Parameter	Type	Default	Meaning
colors	string	#22d3ee|#0f172a	Circle colors split with the pipe character, back to front. The last one covers the cut.
stagger	number	0.08	Seconds between one circle and the next.
travel	number	0.45	Seconds a circle takes to close or to open.

counter

Parameter	Type	Default	Meaning
from	number	0	Start value.
to	number	312	End value.
prefix	string	+	Text before the number.
suffix	string	%	Text after the number.
label	string	watch time in 30 days	Line under the number, fades in after the count.
accent	color	#22c55e	Color of the rule between number and label.
textColor	color	#ffffff	Color of the number and the label.
countSeconds	number	1.5	Duration of the count in seconds.
textSize	number	220	Font size of the number in px. Shrinks to fit the safe area.

cta-button

Parameter	Type	Default	Meaning
label	string	Order now	Button text, set in Inter SemiBold.
fill	color	#22c55e	Button color.
textColor	color	#ffffff	Label color.
radius	number	999	Corner radius in px. Values above half the height give a pill.
textSize	number	64	Label size in px. Shrinks if the button would leave the safe area.

element

Parameter	Type	Default	Meaning
element	string, one of confetti-wide, confetti-tall, success-check, streamers, like-subscribe, subscribe-toggle, floating-hearts, heart-pop, bell, swipe-up, flame, burst, check-circle, sparkles	like-subscribe	Which element to place. Run titlekit elements for the list with authors.
placement	string, one of center, top, bottom	center	Vertical place inside the safe area. Full frame elements always fill the frame.
size	number	auto	Longest side in px. auto picks a size that suits the element.
delay	number	0	Seconds before the element starts.
loops	number	1	How many times the element plays back to back.

glitch-title

Parameter	Type	Default	Meaning
text	string	Signal lost	Title text, set uppercase in Inter Bold.
textColor	color	#ffffff	Color of the title.
splitA	color	#ff2d55	First color of the RGB split.
splitB	color	#00e5ff	Second color of the RGB split.
hold	number	2	Seconds between the intro glitch and the outro glitch.
seed	number	7	Changes the random glitch pattern. The same seed always gives the same result.
textSize	number	170	Font size in px. Shrinks to fit the safe area.

hook-title

Parameter	Type	Default	Meaning
text	string	Three edits|that save you|hours	Title text. Split lines with the pipe character, at most three.
highlightWord	string	hours	Word that gets the highlight bar. Empty for none.
accent	color	#facc15	Color of the highlight bar.
textColor	color	#ffffff	Color of the title.
textSize	number	120	Font size in px. Lines shrink together if the widest one would leave the safe area.

kinetic-words

Parameter	Type	Default	Meaning
text	string	Clean titles do not need expensive plugins	The sentence. Words wrap onto lines that fit the safe area.
accentWord	string	plugins	Word drawn in the accent color. Empty for none.
accent	color	#22d3ee	Color of the accent word.
textColor	color	#ffffff	Color of the other words.
wordDelay	number	0.12	Seconds between the start of one word and the next.
textSize	number	96	Font size in px. Shrinks if the sentence does not fit the safe area.

letter-cascade

Parameter	Type	Default	Meaning
text	string	Make it|unforgettable	Title text. Split lines with the pipe character, at most three.
accentWord	string	unforgettable	Word drawn in the accent color. Empty for none.
accent	color	#f472b6	Color of the accent word.
textColor	color	#ffffff	Color of the other words.
hold	number	1.5	Seconds the full title stays before it blurs out.
textSize	number	160	Font size in px. Lines shrink together to fit the safe area.

lower-third

Parameter	Type	Default	Meaning
name	string	Ada Lovelace	First line, set in Inter Bold 64 px.
role	string	Mathematician and writer	Second line, set in Inter Medium 34 px.
accent	color	#3b82f6	Color of the accent bar.
textColor	color	#ffffff	Color of both text lines.
hold	number	3	Seconds the lower third stays fully visible.

mask-reveal

Parameter	Type	Default	Meaning
title	string	Chapter one	Main line above the rule, set in Inter Bold.
subtitle	string	The first cut is the hardest	Line below the rule, set in Inter Medium. Empty for none.
accent	color	#f97316	Color of the rule.
textColor	color	#ffffff	Color of both lines.
hold	number	2	Seconds the title stays fully visible.
textSize	number	130	Title size in px. The subtitle is 36 percent of it. Both shrink to fit.

progress-bar

Parameter	Type	Default	Meaning
chapters	string	Hook|Setup|Payoff	Chapter names split with the pipe character. Each gets an equal share of the length.
length	number	6	Length of the overlay in seconds, usually the length of the video.
placement	string, one of top, bottom	top	top or bottom of the safe area.
accent	color	#22c55e	Color of the filled part.
track	color	#ffffff	Color of the empty part, drawn at 30 percent opacity.
textColor	color	#ffffff	Color of the chapter name.
textSize	number	40	Chapter name size in px.

progress-ring

Parameter	Type	Default	Meaning
value	number	72	Percentage from 0 to 100.
label	string	of viewers watch to the end	Line under the ring. Empty for none.
accent	color	#38bdf8	Color of the filled arc.
track	color	#ffffff	Color of the empty ring, drawn at 18 percent opacity.
textColor	color	#ffffff	Color of the number and the label.
countSeconds	number	1.6	Seconds the ring takes to fill.
hold	number	2	Seconds the finished ring stays.

quote-card

Parameter	Type	Default	Meaning
quote	string	Simplicity is the ultimate sophistication.	The quote. Wraps onto lines that fit the safe area.
author	string	Leonardo da Vinci	Name under the quote. Empty for none.
accent	color	#a78bfa	Color of the quote mark and the rule before the author.
textColor	color	#ffffff	Color of the quote and the author.
hold	number	2.5	Seconds the full quote stays.
textSize	number	76	Quote size in px. Shrinks if the quote does not fit.

shape-wipe

Parameter	Type	Default	Meaning
colors	string	#facc15|#f97316|#0f172a	Bar colors split with the pipe character, back to front. The last one covers the cut.
direction	string, one of right, left, up, down	right	Direction the bars travel: right, left, up or down.
stagger	number	0.07	Seconds between one bar and the next.
travel	number	0.4	Seconds each bar takes to cross onto or off the frame.

social-handle

Parameter	Type	Default	Meaning
handle	string	@titlekit	Account name, set in Inter Bold.
label	string	Follow for more	Second line, set in Inter Medium.
accent	color	#ec4899	Color of the avatar circle.
panel	color	#111827	Color of the panel behind the text.
textColor	color	#ffffff	Color of the text and the initial.
hold	number	2.5	Seconds the banner stays fully visible.
textSize	number	52	Handle size in px. The label is 62 percent of it.

subscribe-click

Parameter	Type	Default	Meaning
label	string	Subscribe	Button text before the click.
doneLabel	string	Subscribed	Button text after the click.
fill	color	#ef4444	Button color before the click.
doneFill	color	#3f3f46	Button color after the click.
textColor	color	#ffffff	Color of both labels.
hold	number	1.5	Seconds the subscribed state stays before it fades out.
textSize	number	72	Label size in px. Shrinks if the button would leave the safe area.

typewriter

Parameter	Type	Default	Meaning
text	string	Every great edit starts with a blank timeline	Text to type. Wraps onto lines that fit the safe area.
textColor	color	#ffffff	Color of the text.
accent	color	#facc15	Color of the cursor.
charsPerSecond	number	18	Typing speed.
hold	number	1.5	Seconds the finished text stays before it fades out.
textSize	number	80	Font size in px. Shrinks if the text does not fit the safe area.

How it works

flowchart LR
  A[titlekit build] --> B[script file in temp folder]
  B --> C[effectcraft-cli script --save-as]
  C --> D[TEMPLATE.ecproj]
  D --> E[effectcraft-cli run renderQueue]
  E --> F[preview GIFs]

Loading

EffectCraft scripts cannot import files, so the CLI joins a settings constant, shared/helpers.js and the template into one script and runs it headless. Templates create every layer through engine commands such as layer.newText, prop.addKey, layer.addTextAnimator and file.importLottie, never by writing project JSON, which keeps them working when the file format changes. Counters use a Slider Control and a source text expression, glitches use seeded hold keys, reveals use track mattes. Details: docs/how-it-works.md. To write your own template: docs/adding-a-template.md.

Compatibility

Tested	Result
EffectCraft 0.8.0 on Windows 11 Home (10.0.26200), Node 22.20.0, CPU only	all 19 templates and 14 elements build, frames and GIFs checked
EffectCraft 0.9.x, macOS, Linux	not tested yet

EffectCraft is alpha software, and its team notes that Windows is less tested than macOS. Command ids can change between releases. Every build checks that the 26 commands it uses exist and stops with a clear message if one is missing. See docs/compatibility.md.

Troubleshooting

Symptom	Fix
port 9877: no answer	Only live control needs it. Start the app with effectcraft.exe --control 9877.
Port 9877 busy	netstat -ano | findstr :9877 shows the process id. Close it, or use --control 9878 with mcp --bridge 9878.
Wrong EffectCraft version	check prints untested or missing commands. Install 0.8.0 or open an issue with the output.
Text in a fallback font	check reports Inter. Rescan with effectcraft-cli exec text.fonts --params '{"query":"Inter","rescan":true}', else reinstall EffectCraft.
GIF too large	effectcraft-cli render --project projects/counter.ecproj --comp "counter 9x16" --out dist/counter-small.gif --format gif --resolution quarter --fps 10

More in docs/troubleshooting.md.

Roadmap

• Test on EffectCraft 0.9.2 and record the results in docs/compatibility.md.

Contributing

1. Open an issue first for new templates or behavior changes.
2. Follow the rules in docs/adding-a-template.md: Inter only, defaults for every parameter, layers named.
3. Run node bin/titlekit.mjs build-all and look at frames from both formats before you open a pull request.
4. Include the output of node bin/titlekit.mjs check in the pull request.
5. Keep the code free of dependencies and build steps.

License

The code, templates, previews and projects are MIT, see LICENSE. The files in assets/elements are under the Lottie Simple License, see assets/elements/README.md.

titlekit is an unofficial project. It is not affiliated with or endorsed by the EffectCraft or ArtCraft team, and it uses none of their logos or brand assets.