Contenido detallado
🗺️ Descripción general — cuándo animar el logotipo
El logotipo animado es el tarjeta de presentación en movimiento de la marca. La elección del estilo de animación comunica personalidad: blur-reveal = sofisticación, bounce-drop = energía, glitch = tech/disruptivo, stroke-draw = artesanal/premium.
🎯 Regla de elección
Antes de elegir la animación, responde: ¿qué adjetivo describe mi marca? — Sofisticada → blur-reveal. Confiable → stroke-draw. Innovadora → glitch-reveal. Joven → bounce-drop. Usa como máximo una animación de logo por video.
🔍 logo-blur-reveal — cambio de enfoque fotográfico
O logo-blur-reveal imita el focus pull de cámara: el logo comienza con un blur extremo (desenfocado, como cuando la cámara enfoca el primer plano) y se va volviendo nítido progresivamente. El nombre de la empresa aparece con spring después de que el logo está completamente enfocado.
import { useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion"; // blur de 20px → 0 em 1.5s const blur = interpolate(frame, [0, fps * 1.5], [20, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }); // nome aparece DEPOIS do logo estar nítido const nameProgress = spring({ frame: Math.max(0, frame - Math.round(fps * 1.5)), fps, config: { damping: 12, stiffness: 100 }, }); // aplicar: filter: \`blur(\${blur}px)\`
💡 Consejo práctico
Para marcas premium, reduce la stiffness para 60 y aumenta el damping para 20. El nombre de la empresa aparecerá más lentamente, comunicando lujo y confianza —a diferencia del bounce energético del valor predeterminado.
⚡ logo-glitch-reveal — división RGB disruptiva
O logo-glitch-reveal usa la técnica de RGB channel separation: tres copias del logo (roja, verde, azul) quedan desplazadas aleatoriamente (Math.sin) y luego "convergen" en el logo limpio. El efecto es el de una falla técnica resuelta, perfecto para marcas de tecnología.
// decay: glitch some progressivamente const decay = interpolate(frame, [0, 25], [1, 0], { extrapolateRight: "clamp" }); // canal vermelho: oscilação senoidal × decay const redOffsetX = Math.sin(frame * 7.3) * 15 * decay; const blueOffsetX = Math.sin(frame * 9.2) * 15 * decay; // logo limpo aparece com spring após glitch const cleanOpacity = spring({ frame: Math.max(0, frame - 25), fps, config: { damping: 14, stiffness: 80, mass: 0.6 }, });
✓ Marcas que combinan
- •Startups tecnológicas, ciberseguridad, videojuegos
- •Canales de YouTube de tecnología, hacking y programación
- •Música electrónica, eventos EDM, streamers
✗ Marcas que no combinan
- •Bancos, salud, asuntos legales: da sensación de error
- •Marcas de lujo — el glitch contradice el posicionamiento
- •Contenido infantil: puede asustar o confundir
✏️ logo-stroke-draw — trazo SVG dibujado
O logo-stroke-draw usa la técnica de strokeDashoffset para simular un trazo SVG que se dibuja en tiempo real. Requiere que el logotipo sea SVG puro (no una imagen rasterizada). Es el estilo más artesanal y prémium.
Obtener la longitud del path SVG
En React, pathRef.current.getTotalLength() devuelve la longitud total en píxeles del path.
Configurar dasharray = longitud
strokeDasharray={pathLength} crea un trazo que cubre todo el path; el dashoffset controla cuánto se muestra.
Animar dashoffset de longitud→0
interpolate(frame, [0, fps*2], [pathLength, 0]) — el trazo se «dibuja» a lo largo de 2 segundos.
💡 Consejo práctico
Agrega fill="none" en el path durante la animación de dibujo y usa un segundo interpolate para hacer que fill aparecer (fillOpacity 0→1) solo cuando termina el trazo. El efecto es: se dibuja el contorno → se rellena el color. Mucho más impactante que solo el trazo.
🏀 logo-bounce-drop — caída con física
O logo-bounce-drop usa spring() con damping muy bajo para crear el efecto de un objeto que cae desde arriba y rebota antes de quedar en reposo. Es la plantilla más energética y divertida, ideal para marcas jóvenes y marcas de entretenimiento.
import { spring, useCurrentFrame, useVideoConfig } from "remotion"; const dropY = spring({ frame, fps, from: -300, // começa 300px acima to: 0, config: { damping: 6, // baixo = muitos bounces stiffness: 120, // alto = queda rápida mass: 1.2, // leve extra de peso }, }); // Logo "amassa" no bounce usando scaleY const squash = interpolate(Math.abs(dropY), [0, 50], [0.85, 1], { extrapolateRight: "clamp" });
✓ Perfecto para
- •Canales infantiles, educación lúdica, videojuegos
- •Marcas de deporte, fitness y energía
- •Apps y startups con un tono relajado
✗ No adecuado para
- •Marcas premium, finanzas y salud
- •Contextos formales: perjudican la credibilidad
- •Logotipos con muchos detalles — el squash los distorsiona
🔀 logo-split-reveal — las mitades se expanden
O logo-split-reveal divide el logotipo horizontalmente por la mitad: la mitad superior sube y la inferior baja (o viceversa), revelando el fondo; luego, ambas mitades regresan y encajan. Es un efecto de «apertura de cortina» aplicado al propio logo.
💡 Técnica de clip-path
El split usa clipPath para crear dos versiones del mismo logo — la mitad superior con clip: inset(0 0 50% 0) y la de abajo con clip: inset(50% 0 0 0). Ambas se animan con spring translateY en direcciones opuestas. El logo original permanece estático debajo como ancla visual.
const splitY = spring({ frame, fps, from: 60, to: 0, config: { damping: 16, stiffness: 100 }, }); // metade superior vai para cima, inferior para baixo style={{ transform: `translateY(-${splitY}px)`, clipPath: "inset(0 0 50% 0)" }} // topo style={{ transform: `translateY(${splitY}px)`, clipPath: "inset(50% 0 0 0)" }} // base
📚 Biblioteca completa de Logo & Branding
Las 9 plantillas de animación de logotipo — referencia rápida con la técnica principal:
📌 Resumen del módulo
Próxima ruta:
Trayecto 3 — Combinación: aprender a componer múltiples plantillas en videos completos y profesionales