tiktok-overlay

Adds TikTok-style text overlays to images and videos with styled fonts, backgrounds, strokes, and timed animations.

Safety Notice

This listing is from the official public ClawHub registry. Review SKILL.md and referenced scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "tiktok-overlay" with this command: npx skills add xmuweili/tiktok-overlay

TikTok Text Overlay Skill

You are a TikTok-style text overlay tool. You add styled text overlays to images and videos, replicating the look and feel of TikTok's built-in text editor.

Setup

The overlay scripts live in {baseDir}:

  • {baseDir}/tiktok_overlay.py — image overlay engine
  • {baseDir}/tiktok_video_overlay.py — video overlay engine (uses moviepy)

Before using, ensure dependencies are installed:

pip3 install Pillow moviepy

Available Styles

StyleValueDescription
ClassicclassicClean bold sans-serif (Arial Bold)
TypewritertypewriterMonospace typewriter look
HandwritinghandwritingCasual handwriting font
NeonneonRounded bold with glow effect
SerifserifTraditional serif (Georgia)
StrongstrongExtra bold impact style
ComiccomicPlayful comic sans style

Background Styles

StyleValueDescription
NonenoneNo background, text only
HighlighthighlightPer-line rounded highlight (TikTok default)
Full BGfull_bgSingle rounded rectangle behind all text
LetterletterPer-line tight highlight

Image Overlay

Use {baseDir}/tiktok_overlay.py for images:

import sys
sys.path.insert(0, "{baseDir}")
from tiktok_overlay import overlay_text, overlay_texts, TextOverlay

# Single text — save to file
overlay_text("input.jpg", "Your text here", "output.jpg",
    style="classic", font_size=48, stroke_width=5, bg_style="none")

# Single text — return PIL Image (omit output_path)
result = overlay_text("input.jpg", "Your text here",
    style="strong", font_size="large", text_color="coral")

# Multiple overlays — TextOverlay objects
overlay_texts("input.jpg", [
    TextOverlay("Top text", position="top", style="classic", stroke_width=4),
    TextOverlay("Bottom", position="bottom", text_color="red"),
], "output.jpg")

# Multiple overlays — dicts (no import needed)
overlay_texts("input.jpg", [
    {"text": "Top text", "position": "top", "style": "strong", "stroke_width": 5},
    {"text": "Bottom", "position": "bottom", "text_color": "coral"},
], "output.jpg")

# Multiple overlays — (text, kwargs) tuples
overlay_texts("input.jpg", [
    ("Top text", {"position": "top", "stroke_width": 5}),
    ("Bottom", {"position": "bottom", "text_color": "red"}),
], "output.jpg")

Flexible Inputs

All parameters accept multiple formats:

Input source — file path, PIL Image, numpy array, or bytes:

overlay_text("photo.jpg", "Hello", "out.jpg")          # path
overlay_text(pil_image, "Hello", "out.jpg")             # PIL Image
overlay_text(numpy_array, "Hello", "out.jpg")           # numpy
overlay_text(image_bytes, "Hello", "out.jpg")           # bytes

Output — file path to save, or None to return PIL Image:

overlay_text("photo.jpg", "Hello", "out.jpg")           # saves file
result = overlay_text("photo.jpg", "Hello")             # returns PIL Image

Colors — hex, short hex, hex+alpha, named, RGB tuple, RGBA tuple:

text_color="#FF0000"          # hex
text_color="#F00"             # short hex
text_color="#FF000080"        # hex with alpha
text_color="red"              # named (all CSS/PIL colors)
text_color=(255, 0, 0)        # RGB tuple
text_color=(255, 0, 0, 128)   # RGBA tuple

Font size — int pixels, string with unit, or named size:

font_size=48                  # pixels
font_size="48px"              # string with unit
font_size="small"             # 32px
font_size="medium"            # 48px
font_size="large"             # 64px
font_size="xl"                # 80px
font_size="title"             # 72px
font_size="caption"           # 28px

Style — string or enum:

style="classic"               # string
style="strong"
from tiktok_overlay import TikTokStyle
style=TikTokStyle.CLASSIC     # enum

Position — named, compound, pixel, percentage, or dict:

position="top"                # named
position="bottom-left"        # compound
position=(100, 200)           # pixel coordinates
position=("50%", "80%")       # percentage of image size
position={"x": "10%", "y": "top"}  # dict with mixed

Opacity — float, int, or percentage string:

bg_opacity=0.6                # float 0-1
bg_opacity=153                # int 0-255
bg_opacity="60%"              # percentage string

Max width ratio — float or percentage string:

max_width_ratio=0.85          # float
max_width_ratio="85%"         # percentage string

CLI

python3 {baseDir}/tiktok_overlay.py <input_image> "<text>" [output_image] [style]

Output path is optional — defaults to input_overlay.ext.

Video Overlay

Use {baseDir}/tiktok_video_overlay.py for videos. Supports timed text and fade in/out:

import sys
sys.path.insert(0, "{baseDir}")
from tiktok_video_overlay import overlay_video_text, overlay_video_texts, VideoTextOverlay

# Single text on entire video
overlay_video_text("input.mp4", "Hello!", "output.mp4",
    style="classic", font_size=52, stroke_width=5)

# Multiple timed texts
overlay_video_texts("input.mp4", [
    VideoTextOverlay("Appears 0-3s", t_start=0, t_end=3,
        fade_in=0.5, fade_out=0.5,
        style="classic", position="top", font_size=48, stroke_width=4),
    VideoTextOverlay("Appears 2-5s", t_start=2, t_end=5,
        style="strong", position="center", font_size=56,
        text_color="tomato", stroke_width=5, bg_style="none"),
    VideoTextOverlay("Always visible",
        position="bottom", font_size=40, bg_style="highlight"),
], "output.mp4")

CLI

python3 {baseDir}/tiktok_video_overlay.py <input_video> "<text>" <output_video> [style]

Key Parameters

ParameterAcceptsDefaultDescription
input_sourcepath, PIL Image, numpy array, bytesImage to overlay
textstrThe text to overlay
output_pathpath or NoneNoneSave path; None returns PIL Image
stylestr, TikTokStyle, NoneclassicFont style
font_sizeint, str ("48px", "large")48Font size
text_colorhex, named, rgb/rgba tuple#FFFFFFText color
bg_stylestrhighlightBackground style
bg_colorhex, named, rgb/rgba tuple#000000Background color
bg_opacityfloat 0-1, int 0-255, str "60%"0.6Background opacity
positionstr, (x,y), ("x%","y%"), dictcenterPosition
alignmentstrcenterText alignment: left/center/right
stroke_widthint0Outline thickness (4-6 for TikTok look)
stroke_colorhex, named, rgb/rgba tuple#000000Outline color
max_width_ratiofloat or str "85%"0.85Max text width as ratio of image width

Video-only Parameters

ParameterTypeDefaultDescription
t_startfloat or NoneNoneStart time in seconds
t_endfloat or NoneNoneEnd time in seconds
fade_infloat0.0Fade in duration (seconds)
fade_outfloat0.0Fade out duration (seconds)

Tips

  • For the classic TikTok outlined text look, use bg_style="none" with stroke_width=5.
  • For the TikTok highlight look, use bg_style="highlight" with bg_opacity=0.6.
  • Word wrapping is automatic based on max_width_ratio.
  • Compound positions like "top-left" and "bottom-right" are supported.
  • All CSS/PIL named colors work: "red", "coral", "dodgerblue", "gold", etc.
  • Uses macOS system fonts as TikTok-style substitutes. Works out of the box on macOS.

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

General

Download Tool

支持下载 YouTube、TikTok、小红书、抖音等平台的视频。

Registry SourceRecently Updated
2270Profile unavailable
General

Media Compress

Compress and convert images and videos using ffmpeg. Use when the user wants to reduce file size, change format, resize, or optimize media files. Handles com...

Registry SourceRecently Updated
1980Profile unavailable
General

ReelTalk

Helper for processing shared video links. Takes a URL, downloads the audio track, creates a text transcript, and produces a summary. Supports all major platf...

Registry SourceRecently Updated
2711Profile unavailable
General

TikTok 爆款剪辑

面向 TikTok 爆款节奏场景的 Sparki skill 变体,沿用最新版官方 Sparki 安装、API key、上传和命令说明,同时保留 TikTok viral 场景定位。

Registry SourceRecently Updated
3391Profile unavailable