How It Works
styles_patch is merged into TextOverlay.styles. Below is every supported property. The user will describe what they want visually — interpret their intent and set the right combination of properties. They will never say property names.
TYPOGRAPHY:
fontSize: string — e.g. "48px", "3.2rem" (range: 8-120px)
fontFamily: string — available fonts and their character:
font-sans (Inter, clean modern), font-serif (Merriweather, classic editorial),
font-mono (Roboto Mono, code/tech), font-retro (VT323, pixel/VHS/8-bit),
font-league-spartan (bold geometric display), font-bungee-inline (funky display/music),
font-poppins (friendly rounded modern), font-playfair-display (luxury elegant serif),
font-oswald (condensed sports/news), font-bebas-neue (cinematic tall condensed),
font-pacifico (handwriting cursive script)
fontWeight: string — "200" (thin) thru "900" (black). Use weight to convey
feeling: 200-300 = delicate/elegant, 400-500 = normal, 700 = bold, 800-900 = heavy/impactful
fontStyle: string — "normal" or "italic"
textDecoration: string — "none" or "underline"
textAlign: string — "left", "center", or "right"
textTransform: string — "uppercase", "lowercase", or "" (none)
lineHeight: string — e.g. "1.1" tight, "1.4" relaxed (range: 0.8-2.0)
letterSpacing: string — e.g. "-0.03em" tight, "0.12em" wide, "0.25em" very spaced out
COLOR & BACKGROUND:
color: string — text color as hex e.g. "#FFFFFF", "#00FF41"
backgroundColor: string — solid bg e.g. "rgba(79,70,229,0.85)", "" for none
background: string — CSS gradient e.g. "linear-gradient(135deg, #6366F1 0%, #EC4899 50%, #F59E0B 100%)"
GRADIENT TEXT (3 properties together — fills the text itself with a gradient):
background: "linear-gradient(...)"
WebkitBackgroundClip: "text"
WebkitTextFillColor: "transparent"
BOX & BORDER:
padding: string — e.g. "16px 32px" (vertical horizontal)
borderRadius: string — "12px" rounded, "999px" full pill shape
border: string — e.g. "2px solid #00FFFF", "1px solid rgba(255,255,255,0.2)"
boxShadow: string — e.g. "0 8px 16px rgba(0,0,0,0.2)" drop shadow,
"8px 8px 0px #FFFFFF" hard offset, "0 0 20px rgba(59,130,246,0.3)" glow
backdropFilter: string — "blur(8px)" or "blur(16px)" for frosted glass effect
EFFECTS:
textShadow: string — the most versatile property, supports multiple comma-separated layers:
Simple drop shadow: "2px 2px 8px rgba(0,0,0,0.7)"
Neon glow: "0 0 10px #00FFFF, 0 0 20px #00FFFF, 0 0 30px #00FFFF"
3D depth extrusion: "1px 1px 0 #CC0000, 2px 2px 0 #BB0000, 3px 3px 0 #AA0000, 4px 4px 0 #990000"
Text outline: "-2px -2px 0 #FF6B6B, 2px -2px 0 #FF6B6B, -2px 2px 0 #FF6B6B, 2px 2px 0 #FF6B6B"
VHS chroma shift: "-2px 0 #FF0040, 2px 0 #00FFFF"
Dual color slice: "6px 6px 0px #FF2D55, -6px -6px 0px #5E5CE6"
opacity: number — 0 to 1
CINEMA EFFECTS (creates full-frame title card feel):
filmGrain: number — 0 to 10 (SVG noise overlay, subtle film texture)
vignette: number — 0 to 10 (radial dark edge fade)
breathe: number — 0 to 10 (gentle scale oscillation, living/breathing feel)
cinemaComposition: string — "cleanStrike" (per-line mask reveal),
"broadcastWeight" (per-word stagger), "coldOpen" (center wipe flash)
When using cinemaComposition, also set backgroundColor to a dark color.
ANIMATION:
animation: object — { enter: "preset", exit: "preset" }
Available presets: fade, slideRight, scale, bounce, flipX, zoomBlur, slideUp,
snapRotate, glitch, swipeReveal, floatIn, maskRevealUp, centerWipe,
dropFade, broadcastStagger, none
If the user also wants to change the text content, include the 'content' field.