index.md

layout	default
title	SPINS

<style> @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,300;1,400&family=IBM+Plex+Mono:wght@400;500&family=DM+Sans:wght@300;400;500&display=swap'); .spins-home { --ink: #1a1a2e; --ink-mid: #3d3d5c; --ink-muted: #7a7a9a; --rule: #e0dff0; --surface: #f7f6fb; --accent: #2d4fa0; --accent-light: #e8edf8; --accent-mid: #5070c0; --teal: #0f7c6e; --teal-light: #e2f4f2; --amber: #a05a00; --amber-light: #faf0e0; --violet: #6a3fa0; --violet-light: #f0e8fa; --serif: 'Source Serif 4', Georgia, serif; --sans: 'DM Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', monospace; font-family: var(--sans); color: var(--ink); max-width: 900px; margin: 0 auto; padding: 2rem 0 4rem; line-height: 1.6; } .spins-home .hero { display: grid; grid-template-columns: 1fr 220px; gap: 3rem; align-items: start; margin-bottom: 3rem; } .spins-home .hero-kicker { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; color: var(--accent-mid); text-transform: uppercase; margin-bottom: 1.1rem; display: flex; align-items: center; gap: 8px; } .spins-home .hero-kicker::before { content: ''; display: inline-block; width: 20px; height: 1px; background: var(--accent-mid); } .spins-home h1 { font-family: var(--serif); font-size: 2.5rem; font-weight: 300; line-height: 1.18; color: var(--ink); margin-bottom: 1.2rem; letter-spacing: -0.01em; border: none; padding: 0; } .spins-home h1 em { font-style: italic; color: var(--accent); } .spins-home .hero-body { font-size: 15px; font-weight: 300; color: var(--ink-mid); line-height: 1.75; margin-bottom: 2rem; } .spins-home .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } .spins-home .btn-primary { font-family: var(--sans); font-size: 13px; font-weight: 500; padding: 9px 20px; background: var(--accent); color: #fff; border-radius: 4px; text-decoration: none; transition: background 0.15s; } .spins-home .btn-primary:hover { background: var(--accent-mid); color: #fff; } .spins-home .btn-ghost { font-family: var(--sans); font-size: 13px; font-weight: 400; padding: 9px 20px; background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 4px; text-decoration: none; transition: background 0.15s; } .spins-home .btn-ghost:hover { background: var(--accent-light); } .spins-home .brain-figure { display: flex; flex-direction: column; align-items: center; gap: 10px; } .spins-home .brain-figure img { filter: drop-shadow(0 4px 16px rgba(45,79,160,0.12)); } .spins-home .brain-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--ink-muted); text-transform: uppercase; } .spins-home .stats-row { display: flex; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 3rem; padding: 1.5rem 0; } .spins-home .stat-item { flex: 1; text-align: center; padding: 0 1rem; border-right: 1px solid var(--rule); } .spins-home .stat-item:last-child { border-right: none; } .spins-home .stat-number { font-family: var(--serif); font-size: 2rem; font-weight: 400; color: var(--accent); line-height: 1; margin-bottom: 5px; } .spins-home .stat-desc { font-size: 12px; color: var(--ink-muted); line-height: 1.4; } .spins-home .section-eyebrow { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; color: var(--ink-muted); text-transform: uppercase; margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; } .spins-home .atlas-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 3rem; } .spins-home .atlas-card { background: #fff; border: 1px solid var(--rule); border-radius: 8px; padding: 1.4rem; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; } .spins-home .atlas-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--card-accent, var(--accent)); } .spins-home .atlas-card:hover { border-color: #b0b8d8; box-shadow: 0 6px 20px rgba(45,79,160,0.1); transform: translateY(-1px); text-decoration: none; } .spins-home .atlas-card.is-pending { opacity: 0.7; } .spins-home .atlas-card.is-pending:hover { transform: none; box-shadow: none; } .spins-home .card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .spins-home .card-tag { display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; } .spins-home .tag-gray { background: #eeecf8; color: #4a4880; } .spins-home .tag-teal { background: var(--teal-light); color: var(--teal); } .spins-home .tag-amber { background: var(--amber-light); color: var(--amber); } .spins-home .tag-violet { background: var(--violet-light); color: var(--violet); } .spins-home .card-badge { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface); padding: 2px 7px; border-radius: 3px; } .spins-home .atlas-card h3 { font-family: var(--serif); font-size: 1.2rem; font-weight: 400; color: var(--ink); line-height: 1.3; margin: 0; border: none; } .spins-home .atlas-card p { font-size: 13px; font-weight: 300; color: var(--ink-muted); line-height: 1.6; flex: 1; margin: 0; } .spins-home .card-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-muted); display: flex; align-items: center; gap: 6px; } .spins-home .card-meta::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.5; } .spins-home .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule); } .spins-home .about-block h2 { font-family: var(--serif); font-size: 1.25rem; font-weight: 400; color: var(--ink); margin-bottom: 0.8rem; border: none; padding: 0; } .spins-home .about-block p { font-size: 14px; font-weight: 300; color: var(--ink-mid); line-height: 1.75; margin-bottom: 0.75rem; } .spins-home .pipeline-steps { display: flex; flex-direction: column; gap: 10px; margin-top: 0.5rem; } .spins-home .pipeline-step { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; background: var(--surface); border-radius: 4px; border-left: 2px solid var(--accent-mid); } .spins-home .step-num { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--accent-mid); min-width: 16px; margin-top: 1px; } .spins-home .step-text { font-size: 13px; font-weight: 300; color: var(--ink-mid); line-height: 1.5; } @media (max-width: 640px) { .spins-home .hero { grid-template-columns: 1fr; } .spins-home .brain-figure { display: none; } .spins-home .atlas-grid { grid-template-columns: 1fr; } .spins-home .about-grid { grid-template-columns: 1fr; } .spins-home .stats-row { flex-wrap: wrap; } .spins-home .stat-item { flex: 0 0 50%; border-right: none; border-bottom: 1px solid var(--rule); } } </style>

MASI Lab · Vanderbilt University

A shared public library for brain atlas visualization

Brain atlases are essential for interpreting neuroimaging results, yet no publicly accessible, precomputed resource for comparing regions across atlases in 3D has existed — until now. SPINS provides interactive visualizations across gray matter, white matter, and functional labels.

Browse atlases View on GitHub

326

Brain regions
rendered

4

Atlases
available

3D

Glass brain
videos per region

AI

Region overviews
generated

Available atlases

<a class="atlas-card" style="--card-accent: var(--ink-mid);" href="https://masilab.github.io/SPINS/brainCOLOR_cortical/">
  <div class="card-top">
    <span class="card-tag tag-gray">Gray matter</span>
  </div>
  <h3>brainCOLOR</h3>
  <p>Whole-brain parcellation covering cortical and subcortical structures across both hemispheres.</p>
  <span class="card-meta">121 regions · cortical + subcortical</span>
</a>

<a class="atlas-card" style="--card-accent: var(--teal);" href="https://masilab.github.io/SPINS/Yeo17_renders/">
  <div class="card-top">
    <span class="card-tag tag-teal">Functional</span>
  </div>
  <h3>Yeo 17-Network</h3>
  <p>Resting-state functional network parcellation. 17 bilateral networks spanning the cortex.</p>
  <span class="card-meta">17 networks · bilateral</span>
</a>

<a class="atlas-card" style="--card-accent: var(--amber);" href="https://masilab.github.io/SPINS/Pandora_renders/">
  <div class="card-top">
    <span class="card-tag tag-amber">White matter</span>
  </div>
  <h3>Pandora TractSeg</h3>
  <p>White matter tract atlas from TractSeg. Individual tract bundles rendered as binary volumes.</p>
  <span class="card-meta">72 tracts · white matter</span>
</a>


<a class="atlas-card" style="--card-accent: var(--violet);" href="https://masilab.github.io/SPINS/AAL/">
  <div class="card-top">
    <span class="card-tag tag-violet">Gray matter</span>
  </div>
  <h3>AAL</h3>
  <p>Automated Anatomical Labeling atlas. Cortical gray-matter parcellation widely used in functional and structural neuroimaging studies.</p>
  <span class="card-meta">116 regions · cortical</span>
</a>

Motivation

Reducing barriers in neuroimaging research

Brain atlases are essential for interpretation of results and communication, yet atlas choice can substantially affect research conclusions. Despite this, no publicly accessible, precomputed resource to compare regions across atlases in 3D has existed.

SPINS makes this comparison immediately accessible, with no software installation required. Each region page includes an AI-generated anatomical overview, rotating glass brain videos, and triplanar slice images.

Pipeline

Automated rendering at scale

01 Atlas NIfTIs registered to MNI space; regions extracted per label

02 3D glass brain MP4s and GIFs rendered for each region

03 Triplanar PNG slices generated at region centroid

04 GPT-4o generates anatomical region descriptions

05 Jekyll markdown pages built and deployed to GitHub Pages