perf(movimento): uma transição, 3D leve e vídeo certo por aparelho

Passagens com fade e 32 px, cena anterior termina em opacidade 0, sem visibility nem clip-path. 3D do hero como fundo ambiente, sob demanda e desligado em toque, aparelho fraco, saveData e movimento reduzido. Lenis fora do toque e salto direto em âncoras distantes. Vitrine só de clientes, até 3 capítulos, fixa só no desktop e carrossel no celular; vídeo só do projeto em cena com preload metadata. Rótulos mono a partir de 12 px e limão só no contato.
2026-10-14 03:32:23 -03:00
1 parent 8d07b8c6bb
commit c9a0b80656
@@ -0,0 +1,59 @@
+import Link from "next/link";
+import type { ShowcaseItem } from "./ShowcaseProvider";
+
+/** O site publicado abre em nova aba quando existe e não foi dado como fora do ar. */
+export function canOpenSite(project: ShowcaseItem["project"]) {
+  return Boolean(project.demoUrl) && project.demoAvailability !== "unavailable";
+}
+
+/**
+ * Ações de um projeto na vitrine: "Ver case" (contorno) leva ao estudo de caso; "Ampliar vídeo" (contorno,
+ * com ícone) abre a janela ampliada; "Abrir site" (link de texto, nova aba) só existe com `demoUrl`.
+ * Nenhuma é verde-limão: o preenchido de destaque é só da ação de contato.
+ */
+export function ProjectActions({
+  item,
+  onExpand,
+}: {
+  item: ShowcaseItem;
+  /** Sem a janela ampliada (antes de o navegador montar a página) o botão nem aparece. */
+  onExpand?: () => void;
+}) {
+  const { project } = item;
+  return (
+    <div className="ds-reel-actions">
+      <Link className="ds-link ds-link-muted" href={`/cases/${project.id}`}>
+        Ver case
+        <span className="sr-only"> de {project.title}</span>
+      </Link>
+      {onExpand && (
+        <button
+          type="button"
+          className="ds-link ds-link-muted ds-reel-expand"
+          onClick={onExpand}
+          aria-haspopup="dialog"
+        >
+          <svg viewBox="0 0 16 16" aria-hidden="true">
+            <path d="M9.5 2.5h4v4M6.5 13.5h-4v-4M13.5 2.5 9 7M2.5 13.5 7 9" />
+          </svg>
+          Ampliar vídeo
+          <span className="sr-only"> de {project.title}</span>
+        </button>
+      )}
+      {canOpenSite(project) && (
+        <a
+          className="ds-link ds-link-text"
+          href={project.demoUrl ?? undefined}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Abrir site
+          <span className="sr-only">
+            {" "}
+            de {project.title} (abre em nova aba)
+          </span>
+        </a>
+      )}
+    </div>
+  );
+}