diff --git a/src/components/express/builder/FieldConfigPanel.tsx b/src/components/express/builder/FieldConfigPanel.tsx index 333e147..b744c45 100644 --- a/src/components/express/builder/FieldConfigPanel.tsx +++ b/src/components/express/builder/FieldConfigPanel.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Settings2, Tag, ToggleLeft, Type, Image as ImageIcon, Video, Pentagon, - Zap, AlertCircle, Hash, Eye, EyeOff, ArrowLeftRight, + Zap, AlertCircle, Hash, Eye, EyeOff, ArrowLeftRight, HelpCircle } from 'lucide-react'; import { TemplateField, TemplateFieldNature, TemplateFieldType, BrandSource, StickerConfig } from '../../../types'; import { useTemplateBuilder } from '../../../context/TemplateBuilderContext'; @@ -450,6 +450,38 @@ export const FieldConfigPanel: React.FC = () => { className="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-xs text-white focus:border-violet-500/50 focus:outline-none" /> + + {/* Blend Mode */} +
+ + +
diff --git a/src/types.ts b/src/types.ts index 7e39cee..de18cd1 100644 --- a/src/types.ts +++ b/src/types.ts @@ -404,6 +404,8 @@ export interface TemplateFieldRules { export interface TemplateFieldStyle { /** How media (images/videos) fits within its bounding box */ mediaFit?: 'cover' | 'contain' | 'fill'; + /** CSS mix-blend-mode for media effects (e.g., removing black/white backgrounds) */ + blendMode?: 'normal' | 'multiply' | 'screen' | 'overlay' | 'soft-light' | 'color-dodge'; /** Use brand typographic role for font/size/weight/color (default: true) */ useBrandStyle?: boolean; /** Typographic role — resolves font/size/weight/color from DesignMD when useBrandStyle is true */ diff --git a/src/utils/expressCompiler.ts b/src/utils/expressCompiler.ts index d349355..92b6aa5 100644 --- a/src/utils/expressCompiler.ts +++ b/src/utils/expressCompiler.ts @@ -353,6 +353,7 @@ export function compileExpressToTimeline( scale: 1, rotation: field.position.rotation || 0, opacity: field.style.opacity ?? 100, + blendMode: field.style.blendMode, layerId, isBrandElement: field.nature === 'brand-variable', isLocked: field.nature === 'static',