claude-plugins/marketing/skills/video/rules/descomplicar-brand.md

Descomplicar Brand Guidelines para Vídeos

Cores da Marca

const DESCOMPLICAR_COLORS = {
  primary: "#1e3a8a",      // Azul escuro
  secondary: "#7c3aed",    // Roxo
  accent: "#06b6d4",       // Cyan
  dark: "#0f172a",         // Quase preto
  light: "#f8fafc",        // Quase branco
  gradient: "linear-gradient(135deg, #1e3a8a 0%, #7c3aed 100%)",
};

Tipografia

// Google Fonts recomendadas
import { loadFont as loadInter } from "@remotion/google-fonts/Inter";
import { loadFont as loadPoppins } from "@remotion/google-fonts/Poppins";

const { fontFamily: inter } = loadInter();
const { fontFamily: poppins } = loadPoppins();

// Uso
const FONTS = {
  heading: poppins,    // Títulos
  body: inter,         // Texto corrido
};

Estilos Padrão

Título Principal

const titleStyle = {
  fontFamily: poppins,
  fontSize: 80,
  fontWeight: "bold",
  color: "white",
  textShadow: "0 4px 20px rgba(0,0,0,0.3)",
};

Subtítulo

const subtitleStyle = {
  fontFamily: inter,
  fontSize: 36,
  fontWeight: 500,
  color: "rgba(255,255,255,0.9)",
  letterSpacing: 2,
};

CTA (Call-to-Action)

const ctaStyle = {
  fontFamily: inter,
  fontSize: 28,
  fontWeight: 600,
  color: "#06b6d4",
  textTransform: "uppercase",
};

Animações Recomendadas

Entrada de Título

const titleOpacity = interpolate(frame, [0, 30], [0, 1], {
  extrapolateRight: "clamp",
});

const titleScale = spring({
  frame,
  fps,
  config: { damping: 12, stiffness: 100, mass: 0.5 },
});

Entrada de Subtítulo (após título)

const subtitleOpacity = interpolate(frame, [30, 60], [0, 1], {
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp",
});

const subtitleY = interpolate(frame, [30, 60], [20, 0], {
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp",
});

Linha Decorativa

const lineWidth = interpolate(frame, [45, 90], [0, 300], {
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp",
});

Estrutura de Composição Padrão

export const DescomplicarVideo: React.FC<Props> = ({ title, subtitle }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  return (
    <AbsoluteFill
      style={{
        background: DESCOMPLICAR_COLORS.gradient,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      {/* Logo/Título */}
      <div style={{ ...titleStyle, opacity: titleOpacity }}>
        {title}
      </div>

      {/* Subtítulo */}
      <div style={{ ...subtitleStyle, opacity: subtitleOpacity }}>
        {subtitle}
      </div>

      {/* Elemento decorativo */}
      <div
        style={{
          position: "absolute",
          bottom: 80,
          width: lineWidth,
          height: 3,
          background: "rgba(255,255,255,0.7)",
          borderRadius: 2,
        }}
      />
    </AbsoluteFill>
  );
};

Assinatura

Incluir no final de vídeos promocionais:

Descomplicar® - Crescimento Digital
descomplicar.pt

Durações Recomendadas

Tipo	Frames (30fps)	Segundos
Logo intro	90-150	3-5s
Social post	150-450	5-15s
Promo curta	450-900	15-30s
Explainer	1800+	60s+