wizz-method 2.2.0 → 2.3.1

package/src/skills-lib/wizz-premium-landing-ui-researcher/references/site-levels.md

@@ -1,216 +1,216 @@
 ## Motion & Interaction Complexity Ladder
 
-Sempre classificar o projeto em um destes níveis **antes** de recomendar componentes, animações, background, hover, scroll ou 3D. Cada nível tem seu próprio padrão de motion, interação e acabamento, e seu próprio **motion budget**.
+Always classify the project into one of these levels **before** recommending components, animations, background, hover, scroll, or 3D. Each level has its own motion, interaction, and finish standard, and its own **motion budget**.
 
-Os cinco níveis oficiais são:
+The five official levels are:
 
 1. Basic Site
 2. Intermediate Site
 3. Advanced Site
 4. 3D High-End Site
-5. 3D High-End Site: modo Signature 3D Experience
+5. 3D High-End Site: Signature 3D Experience mode
 
-Os dois erros que essa escada existe para evitar:
+The two mistakes this ladder exists to avoid:
 
-- **Basic Site sem vida**, parecendo página estática barata.
-- **Signature 3D Experience poluído**, com efeitos demais sem direção.
+- **A lifeless Basic Site**, looking like a cheap static page.
+- **A cluttered Signature 3D Experience**, with too many effects and no direction.
 
-A regra geral: toda landing precisa parecer viva, mas cada nível tem sua medida certa. Mais animação não significa melhor site: o melhor site usa motion como linguagem, não como decoração.
+The general rule: every landing page needs to feel alive, but each level has its own right measure. More animation doesn't mean a better site: the best site uses motion as a language, not as decoration.
 
 ---
 
 ### 1. Basic Site: Clean Motion
 
-Usar para:
+Use for:
 
-- landing simples;
-- serviço local;
-- página institucional;
-- validação rápida;
-- orçamento menor;
-- oferta simples;
-- projeto onde clareza importa mais que espetáculo.
+- simple landing page;
+- local service;
+- institutional page;
+- quick validation;
+- smaller budget;
+- simple offer;
+- a project where clarity matters more than spectacle.
 
-Mesmo sendo básico, o site não deve parecer morto ou barato.
+Even being basic, the site should not look dead or cheap.
 
-**Motion permitido (leve):**
+**Allowed motion (light):**
 
-- fade-in suave nas seções;
-- slide-up leve no conteúdo;
-- hover simples em botões;
-- underline animado em links;
-- transição suave de cards;
-- pequenas mudanças de border/background no hover;
-- reveal simples de imagens;
-- CTA com hover claro;
-- background estático com gradiente sutil.
+- smooth fade-in on sections;
+- light slide-up on content;
+- simple button hover;
+- animated underline on links;
+- smooth card transition;
+- small border/background changes on hover;
+- simple image reveal;
+- CTA with clear hover;
+- static background with a subtle gradient.
 
 **Background:**
 
-- fundo sólido bem escolhido;
-- gradiente leve;
-- textura/noise discreto;
-- nenhuma partícula pesada;
-- nenhum WebGL;
-- nenhum 3D.
+- well-chosen solid background;
+- light gradient;
+- subtle texture/noise;
+- no heavy particles;
+- no WebGL;
+- no 3D.
 
 **Hover:**
 
-- botão muda cor ou brilho suavemente;
-- cards sobem 2–4px;
-- links com underline animado;
-- ícones podem mover 2–3px.
+- button smoothly changes color or brightness;
+- cards lift 2-4px;
+- links with animated underline;
+- icons can move 2-3px.
 
-**Não usar:**
+**Do not use:**
 
 - 3D;
-- partículas;
+- particles;
 - shaders;
-- parallax pesado;
-- scroll storytelling complexo;
-- cursor custom;
-- vídeo hero pesado;
-- animação em excesso.
+- heavy parallax;
+- complex scroll storytelling;
+- custom cursor;
+- heavy hero video;
+- excessive animation.
 
-**Sensação final:** simples, profissional, bonito, rápido e confiável. O visitante deve pensar: *"É claro, bem feito e passa confiança."*
+**Final feeling:** simple, professional, beautiful, fast, and trustworthy. The visitor should think: *"This is clear, well-made, and inspires confidence."*
 
 ---
 
 ### 2. Intermediate Site: Polished Motion
 
-Usar para:
+Use for:
 
-- SaaS inicial;
-- consultoria;
+- early-stage SaaS;
+- consultancy;
 - creator;
-- agência pequena;
-- produto digital;
-- landing de captação;
-- oferta que precisa parecer mais valiosa.
+- small agency;
+- digital product;
+- lead-capture landing page;
+- an offer that needs to look more valuable.
 
-**Motion permitido (além do Basic):**
+**Allowed motion (beyond Basic):**
 
-- text reveal simples;
-- stagger em cards;
+- simple text reveal;
+- stagger on cards;
 - animated counters;
-- marquee discreto;
-- tabs animadas;
-- accordion com motion suave;
-- feature cards com hover mais refinado;
-- mockup animado;
-- gradient background animado lentamente;
-- microinterações em CTAs;
-- logos com fade/marquee;
-- reveal de seção com timing coordenado.
+- discreet marquee;
+- animated tabs;
+- accordion with smooth motion;
+- feature cards with more refined hover;
+- animated mockup;
+- slowly animated gradient background;
+- microinteractions on CTAs;
+- logos with fade/marquee;
+- section reveal with coordinated timing.
 
 **Background:**
 
-- gradiente animado sutil;
-- blobs leves;
+- subtle animated gradient;
+- light blobs;
 - noise;
-- grid sutil;
-- pattern discreto;
-- glow leve atrás do hero.
+- subtle grid;
+- discreet pattern;
+- light glow behind the hero.
 
 **Hover:**
 
-- cards com border glow sutil;
-- CTA com arrow animada;
-- mockup com leve tilt;
-- ícones com micro-movimento;
-- cards com hover lift + shadow suave.
+- cards with subtle border glow;
+- CTA with animated arrow;
+- mockup with light tilt;
+- icons with micro-movement;
+- cards with hover lift + soft shadow.
 
-**Não usar:**
+**Do not use:**
 
-- 3D real pesado;
-- WebGL complexo;
-- muitos efeitos simultâneos;
-- hero cinematográfico se o projeto não justificar;
+- heavy real 3D;
+- complex WebGL;
+- too many simultaneous effects;
+- cinematic hero if the project doesn't justify it;
 - scroll hijacking.
 
-**Sensação final:** polido, moderno, confiável e acima da média. O visitante deve pensar: *"Isso parece uma marca séria, bem posicionada e atual."*
+**Final feeling:** polished, modern, trustworthy, and above average. The visitor should think: *"This looks like a serious, well-positioned, current brand."*
 
 ---
 
 ### 3. Advanced Site: Premium Motion
 
-Usar para:
+Use for:
 
-- agência premium;
+- premium agency;
 - startup;
-- SaaS mais forte;
+- stronger SaaS;
 - high-ticket;
-- consultoria sofisticada;
-- marca pessoal forte;
-- site de autoridade;
-- portfolio premium.
+- sophisticated consultancy;
+- strong personal brand;
+- authority site;
+- premium portfolio.
 
-**Motion permitido (além do Intermediate):**
+**Allowed motion (beyond Intermediate):**
 
 - scroll effects;
-- parallax em camadas;
+- layered parallax;
 - masked typography;
-- image reveal com clip-path;
-- cards com hover 3D leve;
-- text reveal por palavras;
+- image reveal with clip-path;
+- cards with light 3D hover;
+- word-by-word text reveal;
 - scroll progress;
-- seções com narrativa visual;
-- transições cinematográficas moderadas;
+- sections with visual narrative;
+- moderate cinematic transitions;
 - sticky sections;
-- mockups com motion coordenado;
-- hover magnético em CTAs;
-- custom cursor discreto em áreas específicas;
-- background com glow animado;
+- mockups with coordinated motion;
+- magnetic hover on CTAs;
+- discreet custom cursor in specific areas;
+- background with animated glow;
 - SVG motion;
-- microinterações em toda a UI.
+- microinteractions across the whole UI.
 
 **Background:**
 
-- gradient mesh animado;
-- grid técnico sutil;
+- animated gradient mesh;
+- subtle technical grid;
 - radial glow;
 - noise;
-- textura editorial;
-- background com movimento lento;
-- shader leve apenas se não pesar.
+- editorial texture;
+- slow-moving background;
+- light shader only if it doesn't add weight.
 
 **Hover:**
 
-- cards com tilt baseado no mouse;
-- botões magnéticos;
-- links com transição editorial;
-- thumbnails com image reveal;
-- case cards com preview animado;
-- nav com blur/progress.
+- cards with mouse-based tilt;
+- magnetic buttons;
+- links with editorial transition;
+- thumbnails with image reveal;
+- case cards with animated preview;
+- nav with blur/progress.
 
-**Não usar:**
+**Do not use:**
 
-- 3D em todas as seções;
-- excesso de neon;
-- efeitos competindo com a copy;
-- scroll preso/agressivo;
-- animações lentas demais;
-- glassmorphism exagerado;
-- performance ruim no mobile.
+- 3D on every section;
+- excessive neon;
+- effects competing with the copy;
+- locked/aggressive scroll;
+- animations that are too slow;
+- exaggerated glassmorphism;
+- poor mobile performance.
 
-**Sensação final:** premium, autoral, memorável e estratégico. O visitante deve pensar: *"Isso foi feito por alguém que entende design, produto e execução."*
+**Final feeling:** premium, authorial, memorable, and strategic. The visitor should think: *"This was made by someone who understands design, product, and execution."*
 
 ---
 
 ### 4. 3D High-End Site: Cinematic Motion
 
-Usar para:
+Use for:
 
-- tecnologia;
-- IA;
-- inovação;
-- estúdio premium;
-- produto digital high-end;
-- site de autoridade;
-- marca que precisa demonstrar execução visual;
-- projetos onde 3D aumenta percepção de valor.
+- technology;
+- AI;
+- innovation;
+- premium studio;
+- high-end digital product;
+- authority site;
+- a brand that needs to demonstrate visual execution;
+- projects where 3D increases perceived value.
 
-**Motion permitido (além do Advanced):**
+**Allowed motion (beyond Advanced):**
 
 - 3D hero;
 - WebGL;
@@ -221,11 +221,11 @@ Usar para:
 - shaders;
 - particle systems;
 - image-to-video;
-- vídeo hero cinematográfico;
+- cinematic hero video;
 - scroll camera movement;
-- floating elements em profundidade;
-- glass cards com hover 3D;
-- parallax avançado;
+- floating elements in depth;
+- glass cards with 3D hover;
+- advanced parallax;
 - cinematic section transitions;
 - lighting motion;
 - depth layers;
@@ -235,7 +235,7 @@ Usar para:
 
 - WebGL background;
 - shader background;
-- vídeo loop;
+- video loop;
 - image-to-video;
 - particle field;
 - wireframe terrain;
@@ -245,271 +245,270 @@ Usar para:
 
 **Hover:**
 
-- elementos com depth;
-- cards seguindo cursor;
-- CTA magnético;
-- objeto 3D reagindo ao mouse;
-- thumbnails com preview motion;
-- sections com scroll-based transformations.
+- elements with depth;
+- cards following the cursor;
+- magnetic CTA;
+- 3D object reacting to the mouse;
+- thumbnails with motion preview;
+- sections with scroll-based transformations.
 
-**Regras de composição (usar):**
+**Composition rules (use):**
 
-- 1 hero 3D principal forte;
-- 1 seção cinematográfica secundária;
-- microinterações 3D pontuais;
-- fallback mobile;
+- 1 strong main 3D hero;
+- 1 secondary cinematic section;
+- pointed 3D microinteractions;
+- mobile fallback;
 - performance budget.
 
-**Não usar:**
+**Do not use:**
 
-- vários objetos 3D competindo;
-- partículas em tudo;
-- shaders em todas as seções;
-- vídeo pesado sem poster;
-- 3D sem função estratégica;
-- animação só para impressionar.
+- multiple 3D objects competing;
+- particles everywhere;
+- shaders on every section;
+- heavy video without a poster;
+- 3D without a strategic purpose;
+- animation just to impress.
 
-**Sensação final:** cinematográfico, caro, técnico e memorável. O visitante deve pensar: *"Essa marca sabe construir coisas de outro nível."*
+**Final feeling:** cinematic, expensive, technical, and memorable. The visitor should think: *"This brand knows how to build next-level things."*
 
-Regra: não usar 3D apenas para impressionar. Usar quando aumentar percepção de marca, desejo, diferenciação e valor. Se o ticket, público ou objetivo não justificam, voltar para Advanced.
+Rule: don't use 3D just to impress. Use it when it increases brand perception, desire, differentiation, and value. If the price point, audience, or objective don't justify it, go back to Advanced.
 
 ---
 
 ### 5. Signature 3D Experience: Maximum Wow
 
-Signature 3D Experience é o **modo máximo dentro de 3D High-End Site**: não é um nível à parte, é o teto desse nível.
+Signature 3D Experience is the **maximum mode within the 3D High-End Site** level: it's not a separate level, it's the ceiling of that level.
 
-Usar quando:
+Use when:
 
-- for o site principal da agência;
-- o objetivo for impressionar founders, startups ou clientes premium;
-- o site for prova viva da capacidade da marca;
-- o usuário pedir "o máximo", "outro nível", "uau", "high-end", "premium máximo";
-- 3D, vídeo e motion forem parte da proposta de valor;
-- o site precisa parecer projeto de 5.000 a 10.000+ euros.
+- it's the agency's main site;
+- the objective is to impress founders, startups, or premium clients;
+- the site is living proof of the brand's capability;
+- the user asks for "the max," "next level," "wow," "high-end," "maximum premium";
+- 3D, video, and motion are part of the value proposition;
+- the site needs to look like a 5,000-10,000+ euro project.
 
-**Objetivo:** criar uma experiência que gere reação imediata: *"Uau. Isso não é uma landing comum."*
+**Objective:** create an experience that generates an immediate reaction: *"Wow. This is not an ordinary landing page."*
 
-A experiência deve parecer: autoral, cinematográfica, sofisticada, técnica, rara, memorável, impossível de confundir com template.
+The experience should look: authorial, cinematic, sophisticated, technical, rare, memorable, impossible to mistake for a template.
 
-No formato de resposta, quando esse modo for usado, escrever:
+In the response format, when this mode is used, write:
 
 ```text
-Nível recomendado:
-3D High-End Site: modo Signature 3D Experience.
+Recommended level:
+3D High-End Site: Signature 3D Experience mode.
 ```
 
-Não usar Signature 3D para projetos cuja oferta, ticket ou audiência não sustentem esse posicionamento. Se o usuário pedir Signature 3D em um contexto que não combina, sinalizar isso e propor Advanced como alternativa.
+Do not use Signature 3D for projects whose offer, price point, or audience can't sustain that positioning. If the user asks for Signature 3D in a context that doesn't fit, flag it and propose Advanced as an alternative.
 
 #### Signature 3D: Motion Checklist
 
-Quando este modo estiver ativo, considerar todos os elementos abaixo e escolher os que fazem sentido para a marca.
+When this mode is active, consider all the elements below and choose the ones that make sense for the brand.
 
 **Hero:**
 
-- hero 3D ou vídeo cinematográfico;
-- objeto signature;
-- logo transformada em objeto 3D, se fizer sentido;
-- cluster de partículas;
-- monólito abstrato;
-- objeto de vidro/metal/cristal;
-- shader hero;
+- 3D hero or cinematic video;
+- signature object;
+- logo turned into a 3D object, if it makes sense;
+- particle cluster;
+- abstract monolith;
+- glass/metal/crystal object;
+- hero shader;
 - image-to-video hero;
-- câmera lenta;
-- iluminação cinematográfica;
+- slow camera;
+- cinematic lighting;
 - depth fog;
 - mouse-reactive object;
-- text reveal impactante;
-- CTA magnético.
+- impactful text reveal;
+- magnetic CTA.
 
 **Scroll:**
 
 - scroll storytelling;
 - camera movement;
 - sticky sections;
-- parallax em múltiplas camadas;
+- multi-layer parallax;
 - masked typography;
 - image reveal;
 - section transitions;
-- scroll progress lateral;
+- lateral scroll progress;
 - typography sliding behind images;
-- horizontal reveal pontual;
-- mudança de atmosfera por seção.
+- pointed horizontal reveal;
+- atmosphere change per section.
 
 **Background:**
 
 - WebGL background;
-- shader animado;
-- gradient mesh dinâmico;
+- animated shader;
+- dynamic gradient mesh;
 - particles;
 - noise;
 - depth layers;
 - atmospheric glow;
-- vídeo loop;
+- video loop;
 - poster fallback;
-- background que muda com scroll.
+- background that changes with scroll.
 
 **Components:**
 
-- premium nav com blur/progress;
-- ghost buttons sofisticados;
+- premium nav with blur/progress;
+- sophisticated ghost buttons;
 - magnetic buttons;
-- cards com hover 3D;
-- case cards com preview animado;
-- quote blocks editoriais;
-- logo marquee discreto;
-- capability grid técnico;
-- visual metadata mono;
-- cursor custom discreto;
-- microinterações em links.
+- cards with 3D hover;
+- case cards with animated preview;
+- editorial quote blocks;
+- discreet logo marquee;
+- technical capability grid;
+- mono visual metadata;
+- discreet custom cursor;
+- microinteractions on links.
 
 #### Signature 3D: 3D / Video Path
 
-O `wizz-motion-3d-director` decide entre quatro caminhos:
+The `wizz-motion-3d-director` decides between four paths:
 
-1. 3D real no navegador (R3F/Three.js);
+1. real 3D in the browser (R3F/Three.js);
 2. image-to-video;
-3. hybrid motion (mistura controlada);
-4. motion 2D premium.
+3. hybrid motion (controlled mix);
+4. premium 2D motion.
 
-Para Signature 3D, o caminho recomendado geralmente é:
+For Signature 3D, the recommended path is generally:
 
-- **Hybrid motion**, se performance e controle visual importam;
-- **3D real**, se interação for essencial;
-- **Image-to-video**, se o visual precisa ser cinematográfico e leve;
-- **Motion 2D premium**, se 3D não aumentar conversão.
+- **Hybrid motion**, if performance and visual control matter;
+- **Real 3D**, if interaction is essential;
+- **Image-to-video**, if the visual needs to be cinematic and lightweight;
+- **Premium 2D motion**, if 3D doesn't increase conversion.
 
 #### Signature 3D: Image-to-video
 
-Se não houver imagem disponível, perguntar:
+If no image is available, ask:
 
-> "Você tem logo, símbolo, imagem, produto, print ou dashboard que possa virar hero visual?"
+> "Do you have a logo, symbol, image, product, screenshot, or dashboard that could become the hero visual?"
 
-Se não houver asset, propor um signature object:
+If there's no asset, propose a signature object:
 
-- objeto signature abstrato;
-- monólito;
-- cluster de partículas;
-- logo reinterpretada;
-- mockup cinematic;
-- cena atmosférica.
+- abstract signature object;
+- monolith;
+- particle cluster;
+- reinterpreted logo;
+- cinematic mockup;
+- atmospheric scene.
 
-Nunca travar por falta de imagem.
+Never get stuck due to a lack of image.
 
-#### Signature 3D: Performance obrigatória
+#### Signature 3D: Mandatory Performance
 
-Signature 3D sempre deve incluir:
+Signature 3D must always include:
 
-- fallback mobile;
+- mobile fallback;
 - poster image;
 - `prefers-reduced-motion`;
 - lazy load;
 - dynamic import;
-- compressão WebM/MP4;
+- WebM/MP4 compression;
 - WebP/AVIF;
-- redução de partículas;
-- limite de shaders;
-- Core Web Vitals respeitados;
+- particle reduction;
+- shader limit;
+- Core Web Vitals respected;
 - pause offscreen;
 - mobile crop;
 - desktop/video split.
 
-#### Signature 3D: Evitar
+#### Signature 3D: Avoid
 
-- parecer template de Web3;
-- neon demais;
-- sci-fi barato;
-- glassmorphism em tudo;
-- 3D sem propósito;
-- site pesado que demora carregar;
-- animação que atrapalha leitura;
-- múltiplos efeitos competindo;
-- copy genérica;
-- visual bonito sem estratégia.
+- looking like a Web3 template;
+- too much neon;
+- cheap sci-fi;
+- glassmorphism everywhere;
+- 3D without purpose;
+- a heavy site that takes long to load;
+- animation that hinders reading;
+- multiple competing effects;
+- generic copy;
+- pretty visuals without strategy.
 
-#### Signature 3D: Resultado esperado
+#### Signature 3D: Expected Result
 
-O site deve parecer:
+The site should feel like:
 
-- uma experiência;
-- um manifesto visual;
-- um portfolio vivo;
-- uma prova técnica;
-- uma peça de autoridade;
-- uma landing premium;
-- uma demonstração de capacidade.
+- an experience;
+- a visual manifesto;
+- a living portfolio;
+- technical proof;
+- a piece of authority;
+- a premium landing page;
+- a demonstration of capability.
 
-O visitante deve lembrar:
+The visitor should remember:
 
-- o objeto hero;
-- a frase principal;
-- a sensação de profundidade;
-- a qualidade do motion;
-- a clareza da marca.
+- the hero object;
+- the main phrase;
+- the sense of depth;
+- the quality of the motion;
+- the clarity of the brand.
 
 ---
 
 ## Motion Budget by Level
 
-Cada nível tem um orçamento quantitativo de animação. Esse orçamento evita dois extremos: subentrega (Basic morto) e exagero (Signature poluído).
+Each level has a quantitative animation budget. This budget avoids two extremes: under-delivery (a lifeless Basic) and excess (a cluttered Signature).
 
 **Basic Site:**
 
-- 5 a 8 animações leves no total;
-- nenhuma animação crítica para entender a página;
-- tudo deve funcionar sem JavaScript pesado.
+- 5 to 8 light animations total;
+- no animation critical to understanding the page;
+- everything should work without heavy JavaScript.
 
 **Intermediate Site:**
 
-- 10 a 15 animações;
-- microinterações em CTAs e cards;
-- 1 ou 2 elementos animados principais;
-- sem 3D real.
+- 10 to 15 animations;
+- microinteractions on CTAs and cards;
+- 1 or 2 main animated elements;
+- no real 3D.
 
 **Advanced Site:**
 
-- 15 a 25 animações coordenadas;
+- 15 to 25 coordinated animations;
 - scroll effects;
 - parallax;
-- hover 3D leve;
+- light 3D hover;
 - text reveal;
-- mockups animados;
-- background animado leve.
+- animated mockups;
+- light animated background.
 
 **3D High-End Site:**
 
-- 1 cena hero forte;
-- 1 background ou shader secundário;
-- 20 a 35 interações/motions coordenadas;
-- performance budget obrigatório;
-- fallback mobile obrigatório.
+- 1 strong hero scene;
+- 1 secondary background or shader;
+- 20 to 35 coordinated interactions/motions;
+- mandatory performance budget;
+- mandatory mobile fallback.
 
 **Signature 3D Experience:**
 
-- 1 momento "wow" principal;
-- 2 a 3 momentos memoráveis secundários;
-- microinterações em toda a experiência;
-- motion system consistente;
-- plano 3D/video completo;
-- performance e fallback tratados desde o início.
+- 1 main "wow" moment;
+- 2 to 3 secondary memorable moments;
+- microinteractions throughout the experience;
+- consistent motion system;
+- complete 3D/video plan;
+- performance and fallback handled from the start.
 
-Regra final do budget: mais animação não significa melhor site. O melhor site usa motion como linguagem, não como decoração.
+Final budget rule: more animation doesn't mean a better site. The best site uses motion as a language, not as decoration.
 
 ---
 
-## Regra final do ladder
+## Final ladder rule
 
-Toda landing page precisa parecer viva. Mas cada nível tem sua medida certa:
+Every landing page needs to feel alive. But each level has its own right measure:
 
-- **Basic:** vivo, leve e limpo.
-- **Intermediate:** polido e interativo.
-- **Advanced:** premium, autoral e com scroll/motion.
-- **3D High-End:** cinematográfico e técnico.
-- **Signature 3D:** memorável, raro, "uau".
+- **Basic:** alive, light, and clean.
+- **Intermediate:** polished and interactive.
+- **Advanced:** premium, authorial, with scroll/motion.
+- **3D High-End:** cinematic and technical.
+- **Signature 3D:** memorable, rare, "wow."
 
-Para o site principal/pessoal do usuário ou da agência, o padrão esperado é:
+For the user's or agency's main/personal site, the expected default is:
 
 ```text
-3D High-End Site: modo Signature 3D Experience.
+3D High-End Site: Signature 3D Experience mode.
 ```
-