helix/src/lib/components/VerticalHelix.svelte

<script lang="ts">
  /**
   * Vertical DNA helix where each project binds to a slot on a strand.
   *
   * Strand A = Projects   (durable / in-production)
   * Strand B = Innovations (experiments / prototypes / scouts)
   *
   * Each project sits at slot Y = TOP_PAD + i * SLOT_HEIGHT, at the
   * instantaneous x of its strand. Card sits on whichever side the node is.
   *
   * Cards are lab-slides: frosted glass surface with a thick strand-coloured
   * stripe on the helix-facing edge. Inline link chips per project are real
   * anchor elements stacked above an overlay link to the detail page
   * (HTML doesn't allow nested <a>, so we use the overlay pattern).
   *
   * Palette: Waterschap Brabantse Delta — #0d4f9e, #1fa0db, #bed137.
   */

  import LinkChip from './LinkChip.svelte';

  type ProjectLink = {
    kind: string;
    label: string;
    url: string;
    position: number;
  };

  type StrandProject = {
    slug: string;
    title: string;
    summary: string;
    strand: 'A' | 'B';
    coverUrl: string | null;
    links: ProjectLink[];
  };

  let { projects }: { projects: StrandProject[] } = $props();

  // Geometry (user-space units inside the SVG)
  const W = 1000;
  const CX = W / 2;
  const AMP = 130;
  const TOP_PAD = 80;
  const BOTTOM_PAD = 80;
  const SLOT_HEIGHT = 180;

  // Wave period decoupled from slot spacing — nodes are at rung centers, so
  // they don't need to line up with strand extremes. Pick a period that
  // gives the helix a pleasant twist density.
  const PERIOD = 320;
  const k = (2 * Math.PI) / PERIOD;

  type Rung = { y: number; x1: number; x2: number; depth: number; aFront: boolean };
  type Slot = {
    project: StrandProject;
    index: number;
    y: number;
    /** strand A x at the slot's y (where the node's rung meets strand A) */
    strandAx: number;
    /** strand B x at the slot's y (where the node's rung meets strand B) */
    strandBx: number;
    /** node always sits at the rung centre (x = CX) */
    nodeX: number;
    side: 'left' | 'right';
  };

  const H = $derived(TOP_PAD + Math.max(1, projects.length) * SLOT_HEIGHT + BOTTOM_PAD);

  const strandA = $derived.by(() => {
    const steps = Math.max(80, Math.floor(H / 4));
    const parts: string[] = [];
    for (let i = 0; i <= steps; i++) {
      const y = (H / steps) * i;
      const x = CX + AMP * Math.sin(k * y);
      parts.push(`${i === 0 ? 'M' : 'L'}${x.toFixed(2)} ${y.toFixed(2)}`);
    }
    return parts.join(' ');
  });

  const strandB = $derived.by(() => {
    const steps = Math.max(80, Math.floor(H / 4));
    const parts: string[] = [];
    for (let i = 0; i <= steps; i++) {
      const y = (H / steps) * i;
      const x = CX - AMP * Math.sin(k * y);
      parts.push(`${i === 0 ? 'M' : 'L'}${x.toFixed(2)} ${y.toFixed(2)}`);
    }
    return parts.join(' ');
  });

  const rungs = $derived.by<Rung[]>(() => {
    const out: Rung[] = [];
    const RUNG_SPACING = 22;
    for (let y = 0; y <= H; y += RUNG_SPACING) {
      const sA = Math.sin(k * y);
      out.push({
        y,
        x1: CX + AMP * sA,
        x2: CX - AMP * sA,
        depth: Math.abs(sA),
        aFront: sA > 0
      });
    }
    return out;
  });

  const slots = $derived<Slot[]>(
    projects.map((p, i) => {
      // Y positions are slot-based but no longer constrained by the wave
      // period — nodes sit on rungs (x = CX) at any Y. Tighten the spacing
      // to let cards pack dynamically.
      const y = TOP_PAD + i * SLOT_HEIGHT + SLOT_HEIGHT / 2;
      const sA = Math.sin(k * y);
      return {
        project: p,
        index: i,
        y,
        strandAx: CX + AMP * sA,
        strandBx: CX - AMP * sA,
        nodeX: CX,
        // Side is determined by strand identity, not geometry.
        // Strand A (Projects) → left, Strand B (Innovations) → right.
        side: p.strand === 'A' ? 'left' : 'right'
      };
    })
  );
</script>

<section
  class="vhelix"
  style:--vh-h="{H}px"
  aria-label="Projects bound to the R&D-lab strands"
>
  <svg
    class="vhelix-svg"
    viewBox="0 0 {W} {H}"
    preserveAspectRatio="xMidYMid meet"
    aria-hidden="true"
  >
    <defs>
      <linearGradient id="vstrand-a" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#0d4f9e">
          <animate attributeName="offset" values="-0.3;1.3" dur="18s" repeatCount="indefinite" />
        </stop>
        <stop offset="50%" stop-color="#1fa0db">
          <animate attributeName="offset" values="0.0;1.6" dur="18s" repeatCount="indefinite" />
        </stop>
        <stop offset="100%" stop-color="#6fc3ec">
          <animate attributeName="offset" values="0.3;1.9" dur="18s" repeatCount="indefinite" />
        </stop>
      </linearGradient>
      <linearGradient id="vstrand-b" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#bed137">
          <animate attributeName="offset" values="-0.3;1.3" dur="22s" repeatCount="indefinite" />
        </stop>
        <stop offset="50%" stop-color="#d8e36a">
          <animate attributeName="offset" values="0.0;1.6" dur="22s" repeatCount="indefinite" />
        </stop>
        <stop offset="100%" stop-color="#8fa024">
          <animate attributeName="offset" values="0.3;1.9" dur="22s" repeatCount="indefinite" />
        </stop>
      </linearGradient>
      <filter id="vhelix-glow" x="-10%" y="-2%" width="120%" height="104%">
        <feGaussianBlur stdDeviation="4" result="b" />
        <feMerge>
          <feMergeNode in="b" />
          <feMergeNode in="SourceGraphic" />
        </feMerge>
      </filter>
      <filter id="vnode-glow" x="-200%" y="-200%" width="500%" height="500%">
        <feGaussianBlur stdDeviation="6" />
      </filter>
    </defs>

    <!-- Back rungs -->
    {#each rungs as r}
      {#if !r.aFront}
        <line
          x1={r.x1}
          y1={r.y}
          x2={r.x2}
          y2={r.y}
          stroke="#6fc3ec"
          stroke-opacity={0.08 + 0.30 * r.depth}
          stroke-width={0.6 + 1.0 * r.depth}
          stroke-linecap="round"
        />
      {/if}
    {/each}

    <!-- Strand B (back) -->
    <path
      d={strandB}
      fill="none"
      stroke="url(#vstrand-b)"
      stroke-width="3.2"
      stroke-linecap="round"
      stroke-opacity="0.85"
      filter="url(#vhelix-glow)"
    />

    <!-- Front rungs -->
    {#each rungs as r}
      {#if r.aFront}
        <line
          x1={r.x1}
          y1={r.y}
          x2={r.x2}
          y2={r.y}
          stroke="#b8dff5"
          stroke-opacity={0.18 + 0.50 * r.depth}
          stroke-width={1.0 + 1.6 * r.depth}
          stroke-linecap="round"
        />
      {/if}
    {/each}

    <!-- Strand A (front) -->
    <path
      d={strandA}
      fill="none"
      stroke="url(#vstrand-a)"
      stroke-width="3.6"
      stroke-linecap="round"
      filter="url(#vhelix-glow)"
    />

    <!-- Per-project base-pair rungs: strand-to-strand line at the node's Y,
         drawn in the project's strand colour. This is the "line in between"
         the strands that each node sits on. -->
    {#each slots as s}
      <line
        x1={s.strandAx}
        y1={s.y}
        x2={s.strandBx}
        y2={s.y}
        stroke={s.project.strand === 'A' ? '#1fa0db' : '#bed137'}
        stroke-opacity="0.75"
        stroke-width="2.4"
        stroke-linecap="round"
      />
    {/each}

    <!-- Connector lines: from the node (rung centre) outward to the card edge -->
    {#each slots as s}
      <line
        x1={s.nodeX}
        y1={s.y}
        x2={s.side === 'right' ? W - 70 : 70}
        y2={s.y}
        stroke={s.project.strand === 'A' ? '#1fa0db' : '#bed137'}
        stroke-opacity="0.35"
        stroke-width="1"
        stroke-dasharray="2 4"
      />
    {/each}

    <!-- Project nodes — always at rung centre (x = CX) -->
    {#each slots as s}
      <g class="vnode" data-strand={s.project.strand}>
        <circle
          cx={s.nodeX}
          cy={s.y}
          r="22"
          fill={s.project.strand === 'A' ? '#1fa0db' : '#bed137'}
          fill-opacity="0.25"
          filter="url(#vnode-glow)"
          class="vnode-halo"
        />
        <circle
          cx={s.nodeX}
          cy={s.y}
          r="12"
          fill={s.project.strand === 'A' ? '#1fa0db' : '#bed137'}
        />
        <circle cx={s.nodeX} cy={s.y} r="6" fill="#07111d" />
        <circle
          cx={s.nodeX}
          cy={s.y}
          r="3.5"
          fill={s.project.strand === 'A' ? '#bed137' : '#1fa0db'}
        />
      </g>
    {/each}
  </svg>

  <!-- HTML lab-slide cards layered over the SVG -->
  <div class="vhelix-cards">
    {#each slots as s}
      <article
        class="slide side-{s.side} strand-{s.project.strand}"
        style:top="{((s.y / H) * 100).toFixed(2)}%"
      >
        <!-- Strand-coloured edge stripe (lab-slide signature) -->
        <span class="stripe" aria-hidden="true"></span>

        <!-- Overlay link covers the body but not the chips -->
        <a
          href="/projects/{s.project.slug}"
          class="slide-link"
          aria-label={`Open ${s.project.title}`}
        ></a>

        <header class="slide-head">
          <span class="badge">
            <span class="dot" aria-hidden="true"></span>
            {s.project.strand === 'A' ? 'Project' : 'Innovation'}
          </span>
          <span class="serial" aria-hidden="true">
            {String(s.index + 1).padStart(2, '0')}/{String(slots.length).padStart(2, '0')}
          </span>
        </header>

        <h3 class="title">{s.project.title}</h3>
        <p class="summary">{s.project.summary}</p>

        {#if s.project.links.length > 0}
          <div class="chips">
            {#each s.project.links.slice(0, 5) as l}
              <LinkChip kind={l.kind} label={l.label} url={l.url} />
            {/each}
            {#if s.project.links.length > 5}
              <span class="more-chips">+{s.project.links.length - 5}</span>
            {/if}
          </div>
        {/if}

        <footer class="slide-foot">
          <span class="open">Open detail <span class="arrow">→</span></span>
        </footer>
      </article>
    {/each}
  </div>
</section>

<style>
  .vhelix {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
    height: var(--vh-h);
  }

  .vhelix-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .vhelix-cards {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* ========== LAB SLIDE CARD ========== */
  .slide {
    position: absolute;
    width: 300px;
    max-width: calc(50% - 60px);
    padding: 0.95rem 1.15rem 0.85rem;
    border-radius: 12px;
    background: color-mix(in oklab, var(--color-helix-bg-2) 88%, transparent);
    border: 1px solid var(--color-helix-border);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    transform: translateY(-50%);
    transition: border-color 220ms ease, background 220ms ease, transform 220ms ease,
      box-shadow 220ms ease;
    overflow: hidden;
  }
  .slide:hover {
    border-color: var(--card-accent);
    background: color-mix(in oklab, var(--color-helix-bg-3) 90%, transparent);
    transform: translateY(calc(-50% - 2px));
    box-shadow: 0 16px 40px -20px color-mix(in oklab, var(--card-accent) 60%, transparent);
  }
  .slide.side-right {
    right: 1.5rem;
  }
  .slide.side-left {
    left: 1.5rem;
  }

  .slide.strand-A {
    --card-accent: #1fa0db;
    --card-accent-soft: rgba(31, 160, 219, 0.18);
  }
  .slide.strand-B {
    --card-accent: #bed137;
    --card-accent-soft: rgba(190, 209, 55, 0.22);
  }

  /* Thick coloured stripe on the helix-facing edge */
  .stripe {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(
      180deg,
      var(--card-accent) 0%,
      color-mix(in oklab, var(--card-accent) 60%, transparent) 100%
    );
    box-shadow: 0 0 12px var(--card-accent-soft);
  }
  .slide.side-right .stripe {
    left: 0;
    border-radius: 12px 0 0 12px;
  }
  .slide.side-left .stripe {
    right: 0;
    border-radius: 0 12px 12px 0;
  }

  /* Invisible overlay link: covers the card except the chips row */
  .slide-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-indent: -9999px;
    overflow: hidden;
  }

  .slide-head,
  .title,
  .summary,
  .slide-foot {
    position: relative;
    z-index: 0; /* below the overlay link */
    pointer-events: none;
  }

  .slide-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
  }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--card-accent);
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: var(--card-accent-soft);
  }
  .badge .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--card-accent);
    box-shadow: 0 0 8px var(--card-accent);
  }

  .serial {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    color: var(--color-helix-ink-faint);
  }

  .title {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 0.35rem;
    padding-left: 0.45rem; /* clear the stripe a hair */
  }
  .slide.side-left .title {
    padding-left: 0;
    padding-right: 0.45rem;
  }

  .summary {
    color: var(--color-helix-ink-dim);
    font-size: 0.88rem;
    line-height: 1.45;
    margin: 0 0 0.55rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Chips ROW — above the overlay link */
  .chips {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 0.6rem;
  }
  .more-chips {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-helix-ink-faint);
    align-self: center;
  }

  .slide-foot {
    border-top: 1px dashed color-mix(in oklab, var(--card-accent) 30%, transparent);
    padding-top: 0.55rem;
    display: flex;
    justify-content: flex-end;
  }
  .open {
    color: var(--card-accent);
    font-size: 0.82rem;
    font-weight: 500;
  }
  .arrow {
    display: inline-block;
    transition: transform 200ms ease;
  }
  .slide:hover .arrow {
    transform: translateX(3px);
  }

  /* Node pulse */
  @media (prefers-reduced-motion: no-preference) {
    :global(.vnode-halo) {
      animation: vnode-pulse 3.5s ease-in-out infinite;
      transform-box: fill-box;
      transform-origin: center;
    }
  }
  @keyframes vnode-pulse {
    0%,
    100% {
      opacity: 0.6;
      r: 22;
    }
    50% {
      opacity: 1;
      r: 28;
    }
  }

  /* Mobile: helix hides, cards stack full-width */
  @media (max-width: 760px) {
    .vhelix {
      height: auto;
    }
    .vhelix-svg {
      display: none;
    }
    .vhelix-cards {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      height: auto;
      padding: 1rem 0;
    }
    .slide {
      position: relative;
      top: auto !important;
      right: auto !important;
      left: auto !important;
      width: 100%;
      max-width: 100%;
      transform: none;
    }
    .slide:hover {
      transform: none;
    }
  }
</style>