Animaciones Santara

Biblioteca de efectos visuales para reels de promoción

Para Google & Meta Ads

Motion Design 2050

🎬 Para el equipo de marketing y producción audiovisual

Esta página contiene todas las animaciones signature de Santara que deben usarse en videos reels de promoción para Google Ads y Meta Ads. Mantén la identidad visual consistente usando estos efectos en lugar de crear nuevos desde cero.

Ver Manual Completo

Partículas Flotantes Cyan

ambient

Mini estrellas flotantes con movimiento orgánico - usadas en Santara Music

Santara Music

Sala Nexus

Home

👁️ Preview Live

💻 Código React + Framer Motion

{[...Array(30)].map((_, i) => (
  <motion.div
    key={i}
    className="absolute w-1 h-1 bg-cyan-400 rounded-full"
    initial={{ 
      x: Math.random() * 100 + '%',
      y: Math.random() * 100 + '%',
      scale: Math.random() * 2
    }}
    animate={{
      y: [null, Math.random() * 100 + '%'],
      x: [null, Math.random() * 100 + '%'],
      opacity: [0, 0.8, 0],
      scale: [null, Math.random() * 3]
    }}
    transition={{
      duration: Math.random() * 15 + 10,
      repeat: Infinity,
      ease: "easeInOut"
    }}
  />
))}

Cerebro Flotante con Glow

icon

Icono flotante con respiración y halo de luz - usado en AI Assistant

Home IA

Wellness Scanner

Assistant

👁️ Preview Live

💻 Código React + Framer Motion

<motion.div
  className="relative"
  animate={{
    y: [0, -20, 0],
    rotate: [0, 5, 0, -5, 0]
  }}
  transition={{
    duration: 6,
    repeat: Infinity,
    ease: "easeInOut"
  }}
>
  <div className="relative w-32 h-32 flex items-center justify-center">
    {/* Glow exterior */}
    <div className="absolute inset-0 bg-gradient-to-r from-cyan-400 to-violet-500 rounded-full blur-3xl opacity-60 animate-pulse" />
    
    {/* Círculo central */}
    <div className="relative w-24 h-24 rounded-full bg-gradient-to-br from-cyan-400 via-blue-500 to-violet-500 flex items-center justify-center shadow-[0_0_50px_rgba(34,211,238,0.8)]">
      <Brain className="w-12 h-12 text-white" />
    </div>
  </div>
</motion.div>

Estrellas Titilantes Cosmic

background

Efecto de estrellas parpadeando - usado en fondos y brand manual

Brand Manual

Leaders Profile

Cosmic Backgrounds

👁️ Preview Live

💻 Código React + Framer Motion

{[...Array(50)].map((_, i) => (
  <div
    key={i}
    className="absolute w-1 h-1 bg-cyan-400/30 rounded-full"
    style={{
      top: `${Math.random() * 100}%`,
      left: `${Math.random() * 100}%`,
      animation: `twinkle ${2 + Math.random() * 3}s infinite`
    }}
  />
))}

/* CSS */
@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

Ondas Sonoras Animadas

effect

Ondas que suben desde abajo - usadas en Santara Music

Santara Music

Audio Player

Music Visualizer

👁️ Preview Live

💻 Código React + Framer Motion

{[...Array(5)].map((_, i) => (
  <motion.div
    key={i}
    className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-cyan-400 to-transparent opacity-30"
    initial={{ y: 0, scaleX: 0 }}
    animate={{
      y: [-100, -200, -300],
      scaleX: [0, 1, 0],
      opacity: [0, 0.5, 0]
    }}
    transition={{
      duration: 3,
      repeat: Infinity,
      delay: i * 0.5,
      ease: "easeOut"
    }}
  />
))}

Gradiente con Pulso Luminoso

button

Efecto de respiración con gradiente - usado en botones premium

CTAs Premium

ExpoFitness

Elite Hub

👁️ Preview Live

Premium Action

💻 Código React + Framer Motion

<motion.div
  className="relative"
  animate={{
    scale: [1, 1.05, 1]
  }}
  transition={{
    duration: 2,
    repeat: Infinity,
    ease: "easeInOut"
  }}
>
  <div className="w-48 h-16 rounded-full bg-gradient-to-r from-cyan-400 via-violet-500 to-amber-400 flex items-center justify-center text-slate-950 font-bold shadow-[0_0_40px_rgba(34,211,238,0.6)]">
    Premium Action
  </div>
</motion.div>

Orbes Energéticos Flotantes

ambient

Círculos luminosos que flotan suavemente - mood energético

Wellness Dashboard

Energy Tracker

Meditation

👁️ Preview Live

💻 Código React + Framer Motion

{[...Array(8)].map((_, i) => (
  <motion.div
    key={i}
    className="absolute w-32 h-32 rounded-full"
    style={{
      background: `radial-gradient(circle, ${['#22d3ee', '#8b5cf6', '#fbbf24'][i % 3]}40, transparent)`,
      left: `${Math.random() * 100}%`,
      top: `${Math.random() * 100}%`
    }}
    animate={{
      x: [0, Math.random() * 50 - 25],
      y: [0, Math.random() * 50 - 25],
      scale: [1, 1.2, 1],
      opacity: [0.3, 0.6, 0.3]
    }}
    transition={{
      duration: Math.random() * 5 + 5,
      repeat: Infinity,
      ease: "easeInOut"
    }}
  />
))}

📦 Formatos de Exportación para After Effects

Las animaciones están en código React, pero aquí te explicamos cómo usarlas en After Effects:

Opción 1: Video con Alpha

Graba la animación directamente desde el navegador usando OBS o screen capture

✓ Formato: MOV o MP4
✓ Fondo transparente con OBS Chroma Key
✓ 1920x1080 a 60fps
✓ Codec: H.264 o ProRes 4444 (con alpha)

Opción 2: PNG Sequence

Captura frame por frame como imágenes PNG con transparencia

✓ Formato: PNG 24-bit con alpha
✓ 1 PNG por frame (30fps = 30 PNGs/seg)
✓ Nombra: animation_0001.png, 0002.png...
✓ Importa en AE como "Sequence"

Opción 3: Recrear desde cero

Usa el código como referencia y recrea con plugins nativos de AE

✓ Trapcode Particular para partículas
✓ Shape layers + expressions
✓ Native particle systems
✓ Más control y customización

Opción 4: Bodymovin/Lottie

Exporta desde AE como JSON para web (opcional)

✓ Plugin: Bodymovin de AirBnB
✓ Formato: JSON animado
✓ Lightweight para web
✓ Compatible con React con lottie-react

Proceso Recomendado (Opción 1 - Más Rápido)

1
Abre la página en navegador
Ve a la animación que necesitas y ponla en pantalla completa
2
Graba con OBS Studio (gratis)
Settings → Output → Recording → Format: MOV, Encoder: Apple ProRes 4444
3
Fondo transparente con Chroma Key
La página tiene fondo negro (#0a0a0a) - usa Chroma Key en AE: Effect → Keying → Keylight
4
Importa en After Effects
File → Import → File → selecciona tu MOV → listo para overlay

🎨 Tips para recrear manualmente en After Effects

• Partículas flotantes: Usa Particular de Trapcode o CC Particle World con movimiento Browniano y opacidad animada
• Cerebro flotante: Keyframe Position con Easy Ease + glow effect con blur gaussiano animado
• Estrellas titilantes: Shape layers con opacidad aleatoria controlada por expression wiggle()
• Ondas sonoras: Shape layers con animación de scale y position + easing exponential
• Gradientes con pulso: Gradient Ramp + animación de scale con Easy Ease In/Out cíclica
• Orbes energéticos: Círculos con Radial Blur + animación de position random con expression loopOut("cycle")

💡 Pro tip: Exporta con canal alpha (PNG sequence o ProRes 4444) para overlay en tus videos. Usa los colores exactos del brand manual: Cyan #22d3ee, Violet #8b5cf6, Amber #fbbf24

¿Necesitas más animaciones o variaciones? Contacta al equipo de desarrollo

Brand Manual Completo Volver al Home