diff --git a/data-pipeline/seed/build-manifest-cell.mjs b/data-pipeline/seed/build-manifest-cell.mjs
index 42268e7..b86e02c 100644
--- a/data-pipeline/seed/build-manifest-cell.mjs
+++ b/data-pipeline/seed/build-manifest-cell.mjs
@@ -35,7 +35,7 @@ const structures = [
"celula-membrana-plasmatica",
"Membrana Plasmática",
"Plasma Membrane",
- "Envoltório que delimita a célula, controlando a entrada e saída de substâncias; formada por uma bicamada fosfolipídica com proteínas de membrana.",
+ "Envoltório que delimita a célula, controlando a entrada e saída de substâncias; formada por uma bicamada fosfolipídica com proteínas de membrana (transportadoras, receptoras, de reconhecimento celular). As proteínas são pequenas demais pra aparecer na célula inteira — veja o corte transversal ampliado ao lado da membrana no modelo 3D.",
),
structure(
"celula-nucleo",
diff --git a/frontend/src/components/CellDiagram3D.tsx b/frontend/src/components/CellDiagram3D.tsx
index 773bb37..6541be2 100644
--- a/frontend/src/components/CellDiagram3D.tsx
+++ b/frontend/src/components/CellDiagram3D.tsx
@@ -32,6 +32,63 @@ function materialProps(baseColor: string, selected: boolean, opacity = 1) {
};
}
+// Corte transversal ampliado da bicamada fosfolipídica (cabeça+cauda, as
+// duas camadas com as caudas hidrofóbicas viradas pra dentro, uma pra
+// outra) com uma proteína de membrana atravessando — a única forma de
+// mostrar isso de verdade é "quebrar a escala" (numa célula inteira, uma
+// proteína de membrana é minúscula demais pra aparecer), por isso vem
+// como um diagrama à parte, fora da célula, e não como textura na
+// superfície dela.
+const PHOSPHOLIPID_HEAD = "#fbbf24";
+const PHOSPHOLIPID_TAIL = "#fde68a";
+const MEMBRANE_PROTEIN = "#f472b6";
+const LIPID_X_SLOTS = [-0.28, -0.19, -0.1, 0.1, 0.19, 0.28]; // sem um slot no meio: é onde a proteína atravessa
+
+function Phospholipid({ x, selected }: { x: number; selected: boolean }) {
+ const headProps = materialProps(PHOSPHOLIPID_HEAD, selected);
+ const tailProps = materialProps(PHOSPHOLIPID_TAIL, selected);
+ return (
+
+ {[1, -1].map((dir) => (
+
+
+
+
+
+ {[-0.011, 0.011].map((dx) => (
+
+
+
+
+ ))}
+
+ ))}
+
+ );
+}
+
+function MembraneCrossSection({ selected }: { selected: boolean }) {
+ const proteinProps = materialProps(MEMBRANE_PROTEIN, selected);
+ return (
+
+ {/* fundo sutil só pra separar visualmente o diagrama do resto da célula */}
+
+
+
+
+ {LIPID_X_SLOTS.map((x) => (
+
+ ))}
+ {/* proteína de membrana — atravessa as duas camadas (maior que os
+ fosfolipídios, e por isso "pra fora" dos dois lados) */}
+
+
+
+
+
+ );
+}
+
function Organelle({
slug,
bySlug,
@@ -222,18 +279,21 @@ export function CellDiagram3D({ bySlug: bySlugAll }: { bySlug: Map
{(sel) => (
-
-
-
-
+ <>
+
+
+
+
+
+ >
)}