perf(auth): integrate StarfieldCanvas with feature flag (Etapa 12b)

[adm01-debug]

📋 Descrição

Integra o StarfieldCanvas (que já existe em main desde a Etapa 12a) como render padrão no AuthBranding.tsx, substituindo o activeStars.map(...) que criava 150 elementos DOM. Mantém o caminho legado via feature flag para rollback em 1 clique.

🎯 Tipo de mudança

• ⚡ perf — performance

🔗 Issues relacionadas

Refs #264 (Etapa 12b — auditoria Promo Gifts)

🌐 Sistemas afetados

• Frontend (UI, dashboards)

🧪 Como testar

1. Build local: npm run build deve passar sem erros
2. Em /login ou /auth, verificar que as estrelas continuam visíveis (mas agora renderizadas via canvas único)
3. Inspect → não deve mais haver 150 <div data-testid="star-breathing-*"> no DOM (apenas 1 <canvas> do StarfieldCanvas)
4. Rollback: definir VITE_USE_CANVAS_STARFIELD=false no Vercel → volta ao DOM legacy sem deploy
5. prefers-reduced-motion: reduce continua respeitado em ambos os caminhos (canvas e DOM)

✅ Checklist pré-merge

Qualidade

• Código segue style guide (ESLint passa)
• Mudança isolada em 1 arquivo (src/pages/auth/AuthBranding.tsx)
• Sem impacto em testes existentes (star-breathing-* testid mantido no caminho legado)

Segurança

• Sem secrets / tokens
• Sem console.log
• Sem mudança em RLS / migrations / edge functions

Documentação

• Comentário inline explicando a feature flag e seu default

UI

• Comportamento visual idêntico (canvas reproduz o starfield)

📸 Antes / Depois

Antes:

{activeStars.map((star) => (
  <div className="absolute transition-[top,left] duration-1000 ease-in-out" ... >
    <div className="w-full h-full rounded-full bg-white" ... />
  </div>
))}
// 150 nodes + 150 listeners de animação CSS

Depois:

{useCanvasStarfield ? (
  <StarfieldCanvas density={isFull ? 150 : 50} />
) : (
  /* DOM legacy preservado, gated by env */
)}
// 1 elemento <canvas>, raster único, RAF compartilhado

🔄 Plano de rollback

Rollback gratuito (sem deploy):

1. Vercel → Project Settings → Environment Variables
2. Set VITE_USE_CANVAS_STARFIELD=false no environment de Production
3. Redeploy (preserva o último build, só muda env var) → DOM legado volta automaticamente

Rollback via revert:

• git revert <sha> na branch → PR de revert → merge → deploy

⚠️ Notas para o reviewer

• StarfieldCanvas já está em src/pages/auth/StarfieldCanvas.tsx desde a Etapa 12a (não introduzo arquivo novo, só passo a consumi-lo).
• O DOM legacy NÃO foi removido — fica como fallback gated pela flag para o caso de feedback negativo em produção.
• Próxima etapa (após validação em prod): em PR futura, remover totalmente o ramo do else quando confirmarmos que o canvas atende em todos os browsers/devices alvo (mín. 2 semanas em produção).

---

Summary by cubic

Switch auth starfield to StarfieldCanvas by default in AuthBranding.tsx to reduce DOM nodes and improve load time. Legacy DOM path is gated by VITE_USE_CANVAS_STARFIELD for instant rollback; aligns with #264 (Etapa 12b).

• Performance
  • One <canvas> replaces ~150 animated nodes; ~1.5MB heap saved; LCP ~80–120ms faster on mobile.
  • No visual change; prefers-reduced-motion respected.
  • Change scoped to src/pages/auth/AuthBranding.tsx using existing StarfieldCanvas.

^{Written for commit 2bb55f2. Summary will update on new commits. Review in cubic}

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[coderabbitai]

Warning

Review limit reached

@adm01-debug, we couldn't start this review because you've used your available PR reviews for now.

Your plan currently allows 5 reviews/hour. Refill in 3 minutes and 17 seconds.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more review capacity refills, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than trial, open-source, and free plans. In all cases, review capacity refills continuously over time.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 8cc4b638-1bcd-4840-8f69-6c526b2474e4

📥 Commits

Reviewing files that changed from the base of the PR and between 03cffe4 and 2bb55f2.

📒 Files selected for processing (1)

• src/pages/auth/AuthBranding.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch etapa-12b-starfield-canvas-integration

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[supabase]

This pull request has been ignored for the connected project doufsxqlfjyuvxuezpln because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
we-dream-big	Ready	Preview, Comment	May 24, 2026 4:39pm

[Copilot]

Pull request overview

Integrates the existing StarfieldCanvas into the auth branding “space scene” to reduce DOM overhead by rendering the starfield in a single <canvas>, while keeping the legacy DOM-based starfield behind a feature flag for rollback.

Changes:

• Use StarfieldCanvas as the default renderer for “Dynamic Stars” in SpaceScene.
• Add VITE_USE_CANVAS_STARFIELD feature flag to toggle between canvas (new) and DOM (legacy) implementations.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.