Catálogo de estilos de video

22 estilos · 100 % locales, sin créditos · actualizado 2026-10-07 14:59 · toca o haz clic en una tarjeta para ver su video
Uso
Mood
HyperFrames · CSS (gradientes radiales + blur + backdrop-filter)

Aurora Mesh

aurora-mesh

Aurora de gradientes en malla que respira lento detrás de una tarjeta de vidrio con el mensaje; loop perfecto de 10 s (el fotograma 0 y el 10 son idénticos), ideal como video de fondo de un hero o presentación de producto.

sereno · premium — 10 s · 16:9 (adaptable a 9:16) · audio: ninguno
fondo de landing (hero loop)SaaSapps
template.html
Blender 5.2 Cycles (Metal) + HyperFrames para títulos

Producto Blender

blender-product

Objeto de vidrio esmerilado con glifo de acento sobre base satinada, ciclorama de estudio, giro de 360° en loop y profundidad de campo; títulos mínimos encima.

fotorrealista · premium · sereno — 8 s · 16:9 · audio: ninguno
hero de productolanzamientolanding premium
template.html · scene.py
HyperFrames · GSAP

Brutalist pop

brutalist-pop

Bloques de color sólido con borde negro y sombra dura, tipografía Archivo Black, sticker y marquesina; cambio de color al drop.

audaz · lúdico · ruidoso — 8 s · 16:9 (adaptable a 9:16) · audio: ninguno
promoanunciolanzamiento
template.html
HyperFrames · CSS/GSAP

Code Explainer

code-explainer

Panel de editor claro con un SKILL.md resaltado a mano: foco línea por línea, callouts conectados que explican name, description y allowed-tools, y un bloque diff que se añade al final; ideal para explicar código paso a paso.

técnico · didáctico — 10 s · 16:9 · audio: ninguno
tutoriales de programacióndocs en videochangelogs
template.html
HyperFrames · GSAP

Terminal oscura

dark-terminal

Ventana de terminal con comandos tecleados y salida con checks sobre grid oscuro.

técnico · nocturno · preciso — 10 s · 16:9 (adaptable a 9:16) · audio: ninguno
tutorial devdemo de CLIchangelog
template.html
HyperFrames · GSAP · SVG

Historia de datos

data-story

KPIs con conteo animado, barras comparativas y línea de tendencia que se dibuja, en cards Liquid Glass.

claro · analítico · confiable — 10 s · 16:9 · audio: ninguno
reportemétricaspitchresultados
template.html
HyperFrames · GSAP

Editorial serif

editorial-serif

Página de revista: Fraunces, filetes finos, capítulos I–III y grano de papel.

elegante · pausado · literario — 10 s · 16:9 (adaptable a 9:16) · audio: ninguno
landing de marcamanifiestohistoria
template.html
HyperFrames · Three.js (FontLoader + TextGeometry) + GSAP

Extruded 3D Title

extruded-3d-title

Palabra en tipografía 3D extruida (cara laqueada + canto metálico del color de acento) que se levanta letra por letra en un estudio claro con sombras suaves, dolly-out y órbita lenta de cámara, destello de luz y subtítulo en HTML; la palabra 3D solo admite ASCII (helvetiker no trae acentos), el texto con tildes va en el subtítulo.

impactante · cinematográfico — 10 s · 16:9 · audio: ninguno
títulosintros de marcalogosapertura de video
template.html
HyperFrames · Three.js

Glass 3D

glass-3d

Placas de vidrio 3D estilo Apple Liquid Glass con titulares Geist; explica conceptos por capas.

moderno · minimalista · premium — 20 s · 16:9 (adaptable a 9:16) · audio: ninguno
landingexplainerpresentación de producto
template.html
HyperFrames · Three.js (ortográfica)

Isométrico pastel

isometric-pastel

Mundo isométrico low-poly en pastel; bloques que caen con rebote y se apilan mientras aparecen chips con su nombre.

amigable · lúdico · limpio — 10 s · 16:9 · audio: ninguno
explaineronboardingSaaS cercanoeducación
template.html
HyperFrames · CSS/GSAP + audio

Karaoke Captions

karaoke-captions

Subtítulos grandes palabra por palabra sincronizados con una voz generada en local, con la palabra activa en color de acento y pop, onda de voz horneada y fondo de gradiente vivo; para cambiar el texto hay que regenerar voz y tiempos (say → whisper-cli -ml 1 -sow -oj → arreglo WORDS).

dinámico · enérgico — 10 s · 16:9 (adaptable a 9:16) · audio: voz local (say -v Paulina) en assets/voice.wav, 48 kHz
reels con voztutoriales habladossubtítulos
template.html · assets/
HyperFrames · GSAP

Tipografía cinética

kinetic-type

Palabras gigantes una por una con cortes rápidos y un barrido de color; ideal para los primeros 3 segundos.

enérgico · directo · alto contraste — 8 s · 16:9 (adaptable a 9:16) · audio: ninguno
hook de redesanunciointro
template.html
HyperFrames · CSS/GSAP

Lower Thirds Broadcast

lower-thirds

Paquete de gráficos para superponer a footage: rótulo de nombre y cargo, bug de marca con indicador en vivo y pill de suscripción con clic animado; con showBg=false exporta con canal alfa.

profesional · broadcast — 10 s · 16:9 (adaptable a 9:16) · audio: ninguno
entrevistastutoriales con cámarastreams
template.html
Manim CE (Python)

Diagrama Manim

manim-diagram

Diagrama de flujo que se construye nodo por nodo con flechas y un pulso que recorre el camino; tema claro con Geist.

técnico · sobrio · didáctico — 10.5 s · 16:9 · audio: ninguno
tutorial técnicoarquitecturaflujo de datosclase
scene.py
HyperFrames · CSS/SVG (stop-motion a 12 fps con PRNG sembrado)

Paper Collage

paper-collage

Recortes de papel rasgado sobre kraft, con sombras en capas, cinta adhesiva y tinta a mano que tiembla a 12 fps como stop-motion; elígelo cuando el mensaje deba sentirse cercano, hecho a mano y fácil de entender.

cálido · artesanal — 9 s · 16:9 (adaptable a 9:16) · audio: ninguno
explainers educativosmarcas cercanastutoriales para principiantes
template.html
HyperFrames · Three.js

Partículas hero

particles-hero

14 000 partículas que se ordenan en una esfera que respira y vuelven a dispersarse; loop perfecto con titular centrado.

cinematográfico · cósmico · premium — 10 s · 16:9 · audio: ninguno
hero de landing (loop)lanzamientokeynote
template.html
HyperFrames · CSS/GSAP (ruido canvas con semilla)

Retro VHS

retro-vhs

Videocámara VHS de los 80/90: barras de color, OSD PLAY/REC con timecode, scanlines, split RGB, barras de tracking y apagado de CRT; para promos y redes con guiño nostálgico.

nostálgico · lúdico — 9 s · 16:9 (adaptable a 9:16) · audio: ninguno
promoredesintro
template.html
HyperFrames · GSAP + SVG local (MotionPathPlugin)

Route Map

route-map

Mapa minimalista claro dibujado en SVG local (sin tiles): la ruta se traza sola, un vehículo la recorre, las paradas aparecen con su chip y una tarjeta de envío cuenta km hasta «Entregado»; ideal para logística, tracking o para contar un proceso como un viaje de A a C.

claro · operativo — 10 s · 16:9 · audio: ninguno
logísticatrackingdeliveryviajesexplicar un flujo por etapas
template.html
HyperFrames · Three.js ShaderMaterial (GLSL fbm + domain warp) + GSAP

Shader Flow

shader-flow

Gradiente líquido en GLSL con domain warp que hace loop perfecto a los 10 s, con título mínimo serif + sans al centro; para heroes de landing, loops de fondo y visuales musicales elegantes.

abstracto · premium — 10 s · 16:9 (adaptable a 9:16) · audio: ninguno
fondo de landinghero loopvisual musical
template.html
HyperFrames · CSS/GSAP

Swiss Grid

swiss-grid

Estilo Tipográfico Internacional: retícula de 12 columnas visible, grotesca gigante alineada a la izquierda y un módulo rojo que se desliza columna a columna sobre los puntos 01/02/03; elígelo para explicar algo con orden y autoridad.

racional · corporativo — 10 s · 16:9 (retícula de 12 columnas; en 9:16 rehacer a 6 columnas) · audio: ninguno
presentacionesreportesmarcas de diseño
template.html
HyperFrames · Three.js (shaders + bloom) + GSAP

Synthwave Grid

synthwave-grid

Grid de neón infinito hacia un sol retro a franjas, montañas con borde neón y título cromado ochentero; para lanzamientos, música y gaming con energía outrun.

energético · retro-futurista — 9 s · 16:9 (adaptable a 9:16) · audio: ninguno
músicagaminglanzamiento
template.html
HyperFrames · GSAP

Walkthrough de UI

ui-walkthrough

Ventana de app con cursor que hace clic, menú, tecleo, zoom al detalle y pasos numerados flotantes.

claro · guiado · didáctico — 12 s · 16:9 · audio: ninguno
tutorial de productoonboardingdemo de feature
template.html