Falar de estratégia é fácil, o desafio real é fazer ela dar resultado na tela.

Os cases abaixo mostram exatamente onde o design deixou de ser enfeite e virou solução de mercado.

Escolha o projeto que mais chama a sua atenção.

Só não me culpe se o seu nível de exigência visual subir absurdamente depois disso.

ESCOLHA UM PROJETO

Contato
  • 81997119220
  • @vaiserruan / @who1visuals
  • ruancabral.dsgn@gmail.com
Copyright © 2026 Todos os direitos reservados.
Políticas
  • Políticas de Privacidade
  • Termos de Uso
document.addEventListener("DOMContentLoaded", () => { const canvas = document.getElementById("cursor-canvas"); const ctx = canvas.getContext("2d", { alpha: true }); // Otimização para transparência let width = window.innerWidth; let height = window.innerHeight; canvas.width = width; canvas.height = height; // Ajusta o canvas se a janela for redimensionada window.addEventListener("resize", () => { width = window.innerWidth; height = window.innerHeight; canvas.width = width; canvas.height = height; }); const mouse = { x: width / 2, y: height / 2 }; const trail = []; const trailLength = 20; // Comprimento da cauda // Inicializa os pontos for (let i = 0; i < trailLength; i++) { trail.push({ x: mouse.x, y: mouse.y }); } window.addEventListener("mousemove", (e) => { mouse.x = e.clientX; mouse.y = e.clientY; }); function animate() { // Limpa o frame anterior completamente ctx.clearRect(0, 0, width, height); // O primeiro ponto segue o mouse rapidamente trail[0].x += (mouse.x - trail[0].x) * 0.4; trail[0].y += (mouse.y - trail[0].y) * 0.4; // Os outros pontos seguem o ponto anterior (efeito elástico/líquido) for (let i = 1; i < trailLength; i++) { trail[i].x += (trail[i - 1].x - trail[i].x) * 0.4; trail[i].y += (trail[i - 1].y - trail[i].y) * 0.4; } // --- RENDERIZAÇÃO DO RASTRO --- // Configurações do estilo da linha ctx.lineCap = "round"; ctx.lineJoin = "round"; // Efeito de blur/glow nativo do Canvas (muito mais leve que CSS filter) ctx.shadowBlur = 10; ctx.shadowColor = "#031e5b"; // Desenha uma forma contínua variando a espessura for (let i = 0; i < trailLength - 1; i++) { ctx.beginPath(); ctx.moveTo(trail[i].x, trail[i].y); // Curva suave entre os pontos const xc = (trail[i].x + trail[i + 1].x) / 2; const yc = (trail[i].y + trail[i + 1].y) / 2; ctx.quadraticCurveTo(trail[i].x, trail[i].y, xc, yc); // A espessura diminui progressivamente em direção à ponta const progress = 1 - (i / trailLength); ctx.lineWidth = 20 * progress; // Opacidade dinâmica na cor #031e5b ctx.strokeStyle = `rgba(3, 30, 91, ${progress * 0.8})`; ctx.stroke(); } requestAnimationFrame(animate); } animate(); });