File size: 2,099 Bytes
ef4c36f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | import type {
AnimationSettings,
CaptionLayout,
CaptionStyle,
StylePreset,
} from "@/types";
// ponytail: sizes are px at a 1080-wide reference frame (the renderer scales by width)
export const DEFAULT_STYLE: CaptionStyle = {
fontFamily: "Anton",
fontSize: 58,
// white on a near-black stroke reads cleaner than yellow-on-black at phrase length
fillColor: "#FFFFFF",
strokeColor: "#0A0A0A",
strokeWidth: 3,
// ponytail: the highlight pass redraws text 2px up — muddy on multi-line phrases
highlightColor: undefined,
backdrop: "rgba(12,12,14,0.66)",
shadow: {
color: "rgba(0,0,0,0.45)",
blur: 12,
offsetX: 0,
offsetY: 3,
},
uppercase: true,
letterSpacing: 0.5,
};
export const DEFAULT_LAYOUT: CaptionLayout = {
position: "bottom",
// lift clear of the Reels UI (progress bar, caption and CTA row)
yOffset: -150,
maxWidthPercent: 0.86,
maxLines: 2,
};
export const DEFAULT_ANIMATION: AnimationSettings = {
speed: 1,
style: "bounce",
};
export const STYLE_PRESETS: StylePreset[] = [
{
id: "viral-yellow",
name: "Viral Yellow",
style: { ...DEFAULT_STYLE, fillColor: "#FFD700", strokeColor: "#000000" },
layout: DEFAULT_LAYOUT,
animation: DEFAULT_ANIMATION,
},
{
id: "minimal-white",
name: "Minimal White",
style: {
...DEFAULT_STYLE,
fontFamily: "Oswald",
fillColor: "#FFFFFF",
strokeColor: "#000000",
strokeWidth: 2,
highlightColor: undefined,
shadow: { color: "rgba(0,0,0,0.3)", blur: 4, offsetX: 0, offsetY: 2 },
},
layout: { ...DEFAULT_LAYOUT, position: "center" },
animation: { speed: 1, style: "fade" },
},
{
id: "neon-pop",
name: "Neon Pop",
style: {
...DEFAULT_STYLE,
fontFamily: "Anton",
fillColor: "#FF006E",
strokeColor: "#FFFFFF",
strokeWidth: 3,
highlightColor: "#FFBE0B",
},
layout: { ...DEFAULT_LAYOUT, position: "center", yOffset: -20 },
animation: { speed: 1.2, style: "pop" },
},
];
export const FONT_OPTIONS = ["Anton", "Oswald", "Impact", "Arial Black"];
|