# CosmicSynapseCanvas > A canvas animation of a slowly rotating sphere of neurons that fire and send pulses along their links, like a brain lighting up. ## Facts - **Product**: Crew OS - **Family**: Effects - **Global**: `window.DigitalCrew.CosmicSynapseCanvas` - **Source**: `digitalcrew-orchestrator: components/ui/neurons-hero.tsx` - **Import in the app**: `import { CosmicSynapseCanvas } from "@/components/ui/neurons-hero";` - **Live preview**: /design/components/cosmic-synapse-canvas/preview.html - **Page**: /design/components/cosmic-synapse-canvas ## Guidelines **Use it for** the "shared knowledge" visual in [`ConnectSection`](/design/components/connect-section.md): 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 `` (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. ## API ```ts export declare const CosmicSynapseCanvas: () => any; ``` ## Example ```html

``` ## More in Effects - [CpuArchitecture](/design/components/cpu-architecture.md): An SVG circuit diagram: eight traces run into a central chip labelled "DIGITAL CREW", with coloured light pulses travelling along them. - [FlickeringGrid](/design/components/flickering-grid.md): A canvas of small squares whose opacity flickers at random, with optional text knocked into the grid as brighter squares. - [Glitchy404](/design/components/glitchy-404.md): A "404" made of shaking fragments, rasterised to a canvas where every pixel row is jittered sideways each frame, like a bad signal. - [Globe](/design/components/globe.md): An auto-rotating 3D dot-matrix globe (cobe, WebGL) with orange city markers, which the visitor can drag to spin. - [GlowingEffect](/design/components/glowing-effect.md): A multicolour glow that runs along a card's border and follows the pointer around it. - [PixelCard](/design/components/pixel-card.md): A card whose surface fills with shimmering pixels, spreading out from the centre, while it is hovered or focused. - [ProgressiveBlur](/design/components/progressive-blur.md): A stack of backdrop-blur layers, each masked to a band, so content behind it blurs progressively toward one edge. - [SecondBentoAnimation](/design/components/second-bento-animation.md): A security emblem for the bento grid: a solid shield sits on a flickering dot grid, and the whole tile is clipped to a shield silhouette until hovered. - [SplashCursor](/design/components/splash-cursor.md): A WebGL fluid simulation that trails the pointer in coloured dye behind the page content.