Effects
CosmicSynapseCanvas
A canvas animation of a slowly rotating sphere of neurons that fire and send pulses along their links, like a brain lighting up.
Guidelines#
Use it for the "shared knowledge" visual in ConnectSection: memory, context, a crew that learns. It is decorative and takes no props.
What you provide: a positioned parent with a height (relative h-80 overflow-hidden); the component fills it (absolute inset-0) and resizes with it.
Anatomy: 320 neurons on the surface of a sphere (radius 42% of the shorter side) and 220 inside it, drawn with perspective 400. Six lobes each get a shade of grey: 30–190 on light pages, 90–240 on dark ones, detected from the .dark class on <html> (next-themes) and watched for changes. This preview mirrors the page theme onto that class.
Behaviour: the sphere turns by 0.0018 rad per frame around Y and 0.0008 around X. Random neurons fire about once every 25 frames, and a whole lobe bursts every 140–320 frames. Neurons within 180px of the pointer drift toward it. The loop runs on every frame while mounted and has no reduced-motion or visibility check, so mount it only where it is seen.
Don't place text directly over the sphere without a scrim, or mount several at once.
Facts#
| Group | Effects |
|---|---|
| Product | Crew OS |
| Global | window.DigitalCrew.CosmicSynapseCanvas |
| Source | digitalcrew-orchestrator: components/ui/neurons-hero.tsx |
| Import in the app | import { CosmicSynapseCanvas } from "@/components/ui/neurons-hero"; |
API#
TypeScript declarations emitted from components/ui/neurons-hero.tsx.
export declare const CosmicSynapseCanvas: () => any;Example#
The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.
<div id="root" class="p-6"></div>
<script>
(function () {
var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
// The canvas picks its greys from html.dark (next-themes); mirror this page's theme onto that class.
var de = document.documentElement;
function syncDark() { de.classList.toggle("dark", /-dark$/.test(de.getAttribute("data-theme") || "")); }
syncDark(); new MutationObserver(syncDark).observe(de, { attributes: true, attributeFilter: ["data-theme"] });
function App() {
return h("div", { className: "relative h-80 overflow-hidden rounded-xl border bg-background" }, h(DC.CosmicSynapseCanvas));
}
ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>