wizz-method 1.4.1 → 1.5.1

package/src/skills-lib/motion-3d-director/references/image-to-video-workflow.md

@@ -0,0 +1,166 @@
+# Image-to-Video Workflow — fluxo completo + prompts
+
+Carregar quando o path escolhido for image-to-video ou hybrid motion. Cobre: quando escolher esse caminho, as 4 etapas (conceito do hero, escolha do asset base incluindo regras de uso de logo, prompt de imagem base, prompt de image-to-video), com templates e exemplos preenchidos para ambos os prompts.
+
+## Image-to-Video Workflow
+
+Usar este workflow quando o projeto precisa de visual cinematográfico high-end **sem interação 3D em tempo real**.
+
+### Quando escolher image-to-video
+
+Escolher quando:
+
+- o hero precisa parecer caro;
+- a cena pode ser pré-renderizada;
+- o site precisa performar bem;
+- o usuário quer forte impacto visual;
+- o 3D real seria overkill;
+- o hero é mais atmosférico do que interativo;
+- o usuário quer transformar uma imagem em vídeo;
+- o usuário tem logo, mockup, imagem ou produto visual;
+- ou o usuário ainda não tem imagem, mas a marca precisa de um objeto signature.
+
+### Etapa 1 — Definir conceito do hero
+
+Definir: hero object; feeling; three-second memory; câmera; iluminação; atmosfera; color logic; duração; loop behavior; formato desktop; formato mobile.
+
+Se faltar imagem, perguntar:
+
+> Você tem logo, símbolo, imagem, produto, print, mockup ou dashboard que possa virar hero visual?
+
+Se o usuário disser não:
+
+> Vou criar uma direção de hero visual abstrato baseado na marca, no feeling e no hero object definidos no brief.
+
+### Etapa 2 — Escolher asset base
+
+Opções: logo da marca; símbolo da marca; produto; dashboard; mockup; print de interface; objeto abstrato signature; monólito; cluster de partículas; cena atmosférica; imagem gerada por prompt.
+
+**Uso da logo.** A logo pode ser usada como base visual, mas **não automaticamente**.
+
+Usar logo quando: tem símbolo forte; é simples; é reconhecível; pode virar objeto 3D; reforça a marca; tem geometria interessante; o site é de autoridade/portfolio; o objetivo é memorabilidade de marca.
+
+Não usar logo quando: é tipográfica demais; é genérica; não tem símbolo forte; fica institucional demais; o hero object do brief é mais forte; distorcer a logo prejudicaria a marca.
+
+Se usar logo: criar versão 3D / vidro / metal / cristal / partículas; manter legibilidade; não distorcer a marca; usar luz cinematográfica; animar com câmera lenta; exportar vídeo/poster.
+
+**Quando não há logo nem imagem forte**, propor: objeto signature abstrato; monólito futurista; esfera de partículas; cluster cristalino; forma de vidro escuro; dashboard cinematográfico fictício; cena atmosférica; símbolo conceitual baseado no feeling.
+
+Nunca travar por falta de imagem.
+
+### Etapa 3 — Prompt para imagem base
+
+Sempre entregar um prompt de imagem base quando recomendar image-to-video ou hybrid motion.
+
+**Template:**
+
+```
+Create a cinematic hero image for a premium [type of business] website.
+
+Subject:
+[Describe the hero object. If no object exists, create an abstract signature object based on the brand feeling.]
+
+Mood:
+[Feeling from the brief], premium, controlled, intentional, cinematic, not generic.
+
+Composition:
+Large negative space, object centered or slightly off-center, editorial layout, deep atmosphere, suitable for website hero overlay.
+
+Color:
+[Color logic], restrained accent color, no random palette.
+
+Lighting:
+Cinematic rim light, soft shadows, atmospheric depth, controlled highlights.
+
+Style:
+[Reference style: Apple Vision Pro / Linear / Anthropic / editorial tech / luxury / etc.]
+
+Avoid:
+Cheap sci-fi, excessive glow, clutter, random symbols, text, people, fake UI, oversaturated neon.
+
+Output:
+4K, clean composition, suitable for image-to-video animation and website hero.
+```
+
+**Exemplo preenchido:**
+
+```
+Create a cinematic hero image for a premium technology studio website.
+
+Subject:
+A floating abstract signature object inspired by the brand identity, made of dark glass and subtle metallic edges.
+
+Mood:
+Cinematic, precise, expensive, restrained, futuristic but editorial.
+
+Composition:
+Object centered, slightly tilted, large negative space, dark off-black background, subtle cyan rim light, soft atmospheric depth, no text, no people.
+
+Lighting:
+Soft rim light, cold cyan highlights, deep shadows, subtle volumetric glow.
+
+Style:
+Apple Vision Pro meets Linear meets high-end editorial technology.
+
+Output:
+4K, clean background, suitable for image-to-video animation.
+```
+
+### Etapa 4 — Prompt para image-to-video
+
+Sempre entregar um prompt de vídeo.
+
+**Template:**
+
+```
+Animate this image into a cinematic website hero loop.
+
+Motion:
+[Describe camera motion: slow push-in, orbit, parallax, drift, light movement.]
+
+Camera:
+[Static / slow push-in / slight orbit / dolly / parallax depth.]
+
+Lighting:
+[Subtle light movement, rim light, atmosphere.]
+
+Duration:
+[4–8 seconds.]
+
+Loop:
+Seamless loop. End frame should match the start frame in position, lighting and atmosphere.
+
+Mood:
+[Feeling], premium, calm, controlled, intentional.
+
+Avoid:
+Fast movement, shaky camera, excessive particles, explosions, cheap sci-fi, random objects, text, logo distortion.
+
+Output:
+WebM and MP4, desktop crop, mobile crop, poster frame included.
+```
+
+**Exemplo preenchido:**
+
+```
+Animate this image into a cinematic website hero loop.
+
+Motion:
+Slow camera push-in, slight orbit to the right, subtle parallax depth, soft light movement across the object, minimal particle drift in the background.
+
+Duration:
+6 seconds.
+
+Loop:
+Seamless loop. End frame should match the start frame in position and lighting.
+
+Mood:
+Premium, calm, controlled, futuristic, editorial.
+
+Avoid:
+Fast movement, shaky camera, excessive particles, dramatic explosions, cheap sci-fi effects, text, logos changing shape.
+
+Output:
+WebM and MP4, 16:9 desktop crop and 9:16 mobile crop, poster frame included.
+```
+

package/src/skills-lib/motion-3d-director/references/motion-paths.md

@@ -0,0 +1,119 @@
+# Motion Paths — os quatro caminhos em detalhe
+
+Carregar depois de decidir qual dos quatro paths (3D real, image-to-video, hybrid motion, motion 2D premium) melhor se encaixa — este arquivo detalha quando usar cada um, stack recomendada, exemplos e quando evitar.
+
+## Motion Paths
+
+### 1. 3D real no navegador
+
+Usar quando precisa de **interação real**.
+
+**Usar se:**
+
+- o objeto precisa reagir ao mouse;
+- a câmera precisa mudar com scroll;
+- há partículas interativas;
+- há shader em tempo real;
+- há configurador 3D;
+- há produto 3D manipulável;
+- há cena que responde ao usuário;
+- o 3D é parte funcional da experiência;
+- o hero object precisa existir como WebGL real.
+
+**Stack recomendada:**
+
+- React Three Fiber;
+- Three.js;
+- Drei;
+- GLSL / shaders;
+- Framer Motion ou Motion para integração com scroll;
+- GSAP apenas se necessário.
+
+**Exemplos:** objeto 3D que segue o cursor; esfera de partículas mouse-reactive; câmera que avança no scroll; wireframe terrain em tempo real; produto 3D configurável; background WebGL interativo.
+
+**Evitar se:**
+
+- o visual pode ser pré-renderizado;
+- a interação é só decorativa;
+- o público usa muito mobile;
+- performance é prioridade máxima;
+- o efeito pode ser resolvido com vídeo;
+- o prazo é curto.
+
+---
+
+### 2. Image-to-video / vídeo cinematográfico
+
+Usar quando o objetivo é **visual premium cinematográfico sem precisar de interação real**.
+
+Este caminho costuma ser **melhor que Three.js** para sites high-end, porque entrega visual caro, leve e controlado.
+
+**Usar se:**
+
+- o hero precisa parecer caro;
+- o visual pode ser pré-renderizado;
+- a cena não precisa reagir ao usuário;
+- mobile performance importa;
+- a marca precisa de impacto visual;
+- o asset pode ser um vídeo em loop;
+- o usuário tem logo, imagem, símbolo ou mockup;
+- ou o usuário não tem nada, mas a skill pode criar um objeto signature abstrato.
+
+**Fluxo:**
+
+1. Definir conceito do hero.
+2. Criar imagem base.
+3. Transformar imagem em vídeo.
+4. Exportar WebM/MP4/poster.
+5. Implementar no site com overlay de copy e CTA.
+
+**Melhor para:** site de agência; marca pessoal premium; site de autoridade; portfolio cinematográfico; AI product; luxury SaaS; high-ticket service; manifesto visual.
+
+---
+
+### 3. Hybrid motion
+
+Usar quando o melhor resultado mistura **vídeo/image-to-video com UI animada**.
+
+**Usar quando:**
+
+- o hero pode ser vídeo;
+- a interface precisa de microinterações;
+- o site precisa parecer vivo;
+- 3D real seria pesado demais;
+- o usuário quer "uau" mas não precisa de interação 3D real.
+
+**Combinar:**
+
+- vídeo hero ou image-to-video;
+- Framer Motion;
+- React Bits;
+- microinterações;
+- scroll effects;
+- text reveal;
+- cards com hover 3D leve;
+- shader sutil opcional;
+- poster mobile.
+
+**Melhor para:** Signature 3D Experience; agência premium; landing de alto valor; portfolio; hero cinematográfico; sites onde performance é importante.
+
+**Regra:** para a maioria dos sites high-end, **Hybrid motion é o caminho recomendado** — a menos que exista motivo claro para 3D real.
+
+---
+
+### 4. Motion 2D premium
+
+Usar quando 3D é exagero ou não aumenta conversão.
+
+**Inclui:** text reveal; parallax; masked typography; image reveal; hover cards; SVG motion; scroll storytelling; magnetic buttons; animated mockups; cinematic section transitions; gradient background animado; background noise; reveal por seção; staggered animations.
+
+**Usar quando:**
+
+- o projeto é Advanced Site;
+- o público não precisa de 3D;
+- performance é prioridade;
+- a estética pede sofisticação discreta;
+- o 3D pareceria gratuito;
+- a marca precisa parecer premium, não tech demo.
+
+---

package/src/skills-lib/motion-3d-director/references/performance-and-handoff.md

@@ -0,0 +1,51 @@
+# Performance requirements + handoff template
+
+Carregar ao fechar o output desta skill: a lista completa de requisitos de performance (fallback mobile, lazy load, Core Web Vitals) e o template exato do bloco de handoff para implementation-planner.
+
+## Performance Requirements
+
+Todo plano 3D, vídeo ou motion avançado deve incluir:
+
+- fallback mobile; poster image; `prefers-reduced-motion`; lazy load; dynamic import; compressão WebM/MP4; WebP/AVIF; redução de partículas; limite de shaders; Core Web Vitals respeitados; pause offscreen; mobile crop; desktop/video split.
+
+**Targets sugeridos:** LCP < 2.5s desktop; LCP < 3.5s mobile 4G; CLS < 0.1; INP < 200ms; bundle inicial controlado; 3D/vídeo fora do critical path quando possível.
+
+## Handoff para implementation-planner
+
+Ao final, sempre entregar um bloco assim:
+
+```
+## Handoff para implementation-planner
+
+Motion path escolhido:
+[3D real / image-to-video / hybrid motion / motion 2D premium]
+
+Assets necessários:
+- [asset 1]
+- [asset 2]
+
+Arquivos esperados:
+- hero.webm
+- hero.mp4
+- hero-poster.webp
+- hero-mobile.webm
+- hero-mobile-poster.webp
+
+Stack recomendada:
+- Next.js
+- React
+- TypeScript
+- Tailwind
+- Framer Motion
+- React Three Fiber, se necessário
+- Three.js, se necessário
+
+Implementation notes:
+- [notas]
+
+Performance constraints:
+- [notas]
+
+Fallback:
+- [notas]
+```