@conduction/docusaurus-preset 0.1.0

package/src/components/Hero/Hero.jsx

@@ -0,0 +1,101 @@
+/**
+ * <Hero />
+ *
+ * Two-column landing hero, mirrors preview/pages/landing.html exactly.
+ * Left column: optional eyebrow, headline, lede paragraph, action
+ * cluster (primary + secondary + ghost + optional meta). Right column:
+ * children (typically <div className="hex-rain"/>, a cn-platform
+ * diagram, or any visual that fills the row).
+ *
+ * Each CTA has the shape { label, href }. The ghost CTA renders as a
+ * plain link with an arrow; the meta block is a vertical "headline +
+ * subhead" caption that sits inline with the actions.
+ *
+ * Composes from primitives:
+ *   <Eyebrow/>  for the orange-bullet caption
+ *   <Button/>   for the three action variants (primary/secondary/ghost)
+ *
+ * Usage in MDX:
+ *
+ *   <Hero
+ *     eyebrow={<>Twelve open-source apps · one <span className="next-blue">Nextcloud</span></>}
+ *     title={<>Install your stack.<br/>In two minutes.</>}
+ *     lede={<>Twelve open-source apps that plug into <span className="next-blue">Nextcloud</span>...</>}
+ *     primaryCta={{label: "Install from Nextcloud app store", href: "/apps"}}
+ *     secondaryCta={{label: "Get a demo via a partner", href: "/partners"}}
+ *     tertiaryCta={{label: "View on GitHub", href: "https://github.com/..."}}
+ *   >
+ *     <div className="hex-rain" aria-label="..."></div>
+ *   </Hero>
+ */
+
+import React, {useEffect} from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import Eyebrow from '../primitives/Eyebrow';
+import Button from '../primitives/Button';
+import styles from './Hero.module.css';
+
+export default function Hero({
+  eyebrow,
+  title,
+  lede,
+  primaryCta,
+  secondaryCta,
+  tertiaryCta,
+  meta,
+  children,
+}) {
+  const isBrowser = useIsBrowser();
+
+  /* Lazy-register the diagrams web components on the client so any
+     <cn-*> elements passed as children render. The import is no-op
+     once registered (customElements.define guards). */
+  useEffect(() => {
+    if (isBrowser) {
+      import('../../diagrams/index.js').catch(() => {
+        /* Defensive: dynamic import should always succeed since the
+           diagrams runtime ships in the same package. */
+      });
+    }
+  }, [isBrowser]);
+
+  return (
+    <section className={styles.hero}>
+      <div className={styles.copy}>
+        {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
+        {title && <h1 className={styles.title}>{title}</h1>}
+        {lede && <p className={styles.lede}>{lede}</p>}
+
+        {(primaryCta || secondaryCta || tertiaryCta || meta) && (
+          <div className={styles.actions}>
+            {primaryCta && (
+              <Button variant="primary" href={primaryCta.href || '#'}>
+                {primaryCta.label}
+              </Button>
+            )}
+            {secondaryCta && (
+              <Button variant="secondary" href={secondaryCta.href || '#'}>
+                {secondaryCta.label}
+              </Button>
+            )}
+            {tertiaryCta && (
+              <Button variant="ghost" href={tertiaryCta.href || '#'}>
+                {tertiaryCta.label} →
+              </Button>
+            )}
+            {meta && (
+              <div className={styles.meta}>
+                {meta.primary && <strong>{meta.primary}</strong>}
+                {meta.secondary && <span>{meta.secondary}</span>}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      <div className={styles.visual}>
+        {children}
+      </div>
+    </section>
+  );
+}

package/src/components/Hero/Hero.module.css

@@ -0,0 +1,95 @@
+/**
+ * <Hero /> styles. Mirrors preview/pages/landing.html .hero section
+ * exactly: 1.1fr/1fr grid inside a 1280px max-width container, 72px
+ * headline, lede 21px, three actions (primary + secondary + ghost),
+ * right column stretches to fill so .hex-rain can occupy 520px+ tall.
+ *
+ * Eyebrow + Button styles live in the primitive modules now; this
+ * module only owns the hero-specific layout (grid, title, lede,
+ * actions row, meta block, visual slot).
+ */
+
+.hero {
+  padding: 0 64px;
+  max-width: 1280px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1.1fr 1fr;
+  gap: 72px;
+  font-family: var(--conduction-typography-font-family-body);
+}
+
+@media (max-width: 900px) {
+  .hero {
+    grid-template-columns: 1fr;
+    padding: 0 24px;
+    gap: 32px;
+  }
+}
+
+.copy {
+  padding-block: 96px;
+  align-self: center;
+}
+@media (max-width: 900px) {
+  .copy { padding-block: 56px; }
+}
+
+.title {
+  font-size: 72px;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  line-height: 1.02;
+  margin: 0 0 24px;
+  color: var(--c-cobalt-900);
+}
+@media (max-width: 1100px) { .title { font-size: 56px; } }
+@media (max-width: 700px)  { .title { font-size: 44px; } }
+
+.title :global(.next-blue) { color: var(--c-nextcloud-blue); }
+.title :global(.cg-yellow) { color: var(--c-commonground-yellow); }
+
+.lede {
+  font-size: 21px;
+  color: var(--c-cobalt-700);
+  line-height: 1.5;
+  max-width: 52ch;
+  margin: 0 0 32px;
+}
+@media (max-width: 700px) { .lede { font-size: 17px; } }
+.lede :global(.next-blue) { color: var(--c-nextcloud-blue); }
+.lede :global(.cg-yellow) { color: var(--c-commonground-yellow); }
+
+.actions {
+  display: flex;
+  gap: 14px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.meta {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 13px;
+  color: var(--c-cobalt-400);
+  margin-left: 8px;
+  font-family: var(--conduction-typography-font-family-code);
+}
+.meta strong {
+  color: var(--c-cobalt-700);
+  font-family: var(--conduction-typography-font-family-body);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+/* Visual column, default 'stretch' so children with min-height
+   (e.g. .hex-rain at 520px) fill the row evenly with the copy column. */
+.visual {
+  position: relative;
+  min-height: 0;
+}
+.visual > * {
+  width: 100%;
+  height: 100%;
+}

package/src/components/HexBackground/HexBackground.jsx

@@ -0,0 +1,56 @@
+/**
+ * <HexBackground />
+ *
+ * Brand-recognisable abstract backdrop. A large pointy-top hex (or two
+ * stacked) sitting behind the content, sized so a portion of the hex
+ * crests the visible bounds — the upper two shoulder corners poke into
+ * the layout, the rest fills the panel as a colour wash. The component
+ * is just chrome; it expects to be a position:absolute child inside a
+ * relatively-positioned parent that owns the actual content above it.
+ *
+ * Used as the wash behind:
+ *   - <Showcase> right panel (cobalt-100 hex behind the AppMock)
+ *   - <RotatingCards> coloured card image-side
+ *   - any future "abstract product mock on a panel" layout
+ *
+ * Usage:
+ *
+ *   <div style={{position: 'relative'}}>
+ *     <HexBackground tone="cobalt-100" position="top" />
+ *     <div style={{position: 'relative', zIndex: 1}}>... content ...</div>
+ *   </div>
+ *
+ * Props:
+ *   - tone:     'cobalt-100' (default) | 'cobalt-50' | 'mint-100' |
+ *               'lavender-100' | 'forest-100' | 'terracotta-100' |
+ *               'coral-100' | 'cobalt-700' | 'workspace-100'
+ *   - position: 'top' (default; hex crests the top edge) |
+ *               'centre' | 'bottom-right' | 'left'
+ *   - size:     'md' (default) | 'lg' (oversized) | 'sm'
+ *   - density:  1 (default) | 2 (offset twin hex behind, +depth)
+ */
+
+import React from 'react';
+import styles from './HexBackground.module.css';
+
+export default function HexBackground({
+  tone = 'cobalt-100',
+  position = 'top',
+  size = 'md',
+  density = 1,
+  className,
+}) {
+  const composed = [
+    styles.bg,
+    styles[`tone-${tone}`],
+    styles[`pos-${position}`],
+    styles[`size-${size}`],
+    className,
+  ].filter(Boolean).join(' ');
+  return (
+    <span className={composed} aria-hidden="true">
+      <span className={styles.hexA}></span>
+      {density >= 2 && <span className={styles.hexB}></span>}
+    </span>
+  );
+}

package/src/components/HexBackground/HexBackground.module.css

@@ -0,0 +1,73 @@
+/**
+ * <HexBackground /> styles.
+ *
+ * The component lays out as an absolute-positioned span filling its
+ * relatively-positioned parent, carrying one (or two) clip-path hexes
+ * positioned so a corner crests the parent's visible bounds.
+ */
+
+.bg {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.hexA, .hexB {
+  position: absolute;
+  clip-path: var(--hex-pointy-top);
+  display: block;
+}
+
+/* ---------- Tones ---------- */
+.tone-cobalt-100   .hexA { background: var(--c-cobalt-100); }
+.tone-cobalt-50    .hexA { background: var(--c-cobalt-50); }
+.tone-cobalt-700   .hexA { background: var(--c-cobalt-700); }
+.tone-mint-100     .hexA { background: var(--c-mint-100); }
+.tone-lavender-100 .hexA { background: var(--c-lavender-100); }
+.tone-forest-100   .hexA { background: var(--c-forest-100); }
+.tone-terracotta-100 .hexA { background: var(--c-terracotta-100); }
+.tone-coral-100    .hexA { background: var(--c-coral-100); }
+.tone-workspace-100 .hexA { background: var(--c-workspace-100); }
+
+/* The second hex (density=2) carries a darker tone of the same family
+   for layered depth. */
+.tone-cobalt-100   .hexB { background: var(--c-cobalt-200); }
+.tone-cobalt-50    .hexB { background: var(--c-cobalt-100); }
+.tone-cobalt-700   .hexB { background: var(--c-cobalt-900); }
+.tone-mint-100     .hexB { background: var(--c-mint-300); }
+.tone-lavender-100 .hexB { background: var(--c-lavender-300); }
+.tone-forest-100   .hexB { background: var(--c-forest-300); }
+.tone-terracotta-100 .hexB { background: var(--c-terracotta-300); }
+.tone-coral-100    .hexB { background: var(--c-coral-300); }
+.tone-workspace-100 .hexB { background: var(--c-workspace-300); }
+
+/* ---------- Sizes ---------- */
+.size-md .hexA { width: 130%; aspect-ratio: 1 / 1.155; }
+.size-md .hexB { width: 90%;  aspect-ratio: 1 / 1.155; }
+
+.size-lg .hexA { width: 170%; aspect-ratio: 1 / 1.155; }
+.size-lg .hexB { width: 120%; aspect-ratio: 1 / 1.155; }
+
+.size-sm .hexA { width: 95%;  aspect-ratio: 1 / 1.155; }
+.size-sm .hexB { width: 60%;  aspect-ratio: 1 / 1.155; }
+
+/* ---------- Positions — anchor where the hex sits relative to the parent ---------- */
+
+/* top: hex centred horizontally, top edge above the parent so the
+   hex's TOP point and SHOULDER corners crest into the visible area. */
+.pos-top .hexA { top: -22%; left: 50%; transform: translateX(-50%); }
+.pos-top .hexB { top: -8%;  left: 18%; transform: translateX(-50%); opacity: 0.4; }
+
+/* centre: the entire hex visible, centred. */
+.pos-centre .hexA { top: 50%; left: 50%; transform: translate(-50%, -50%); }
+.pos-centre .hexB { top: 60%; left: 64%; transform: translate(-50%, -50%); opacity: 0.35; }
+
+/* bottom-right: hex point pokes out the bottom-right corner. */
+.pos-bottom-right .hexA { bottom: -30%; right: -20%; }
+.pos-bottom-right .hexB { bottom: -10%; right: 20%; opacity: 0.4; }
+
+/* left: hex pokes in from the left, points to the right. */
+.pos-left .hexA { top: 50%; left: -30%; transform: translateY(-50%); }
+.pos-left .hexB { top: 30%; left: -10%; transform: translateY(-50%); opacity: 0.4; }

package/src/components/HexNetwork/HexNetwork.jsx

@@ -0,0 +1,141 @@
+/**
+ * <HexNetwork />
+ *
+ * Honeycomb-pattern grid of pointy-top hex tiles. Each tile holds a
+ * logo or icon and an optional caption. One tile in the centre can be
+ * highlighted as the brand anchor (Conduction hex, the workspace, the
+ * thing the surrounding network connects to).
+ *
+ * Reference visuals:
+ *   - honeycomb.io/partners (the cloud-provider hex grid around the
+ *     central Honeycomb logo)
+ *   - the existing Conduction honeycomb backdrop in
+ *     <cn-honeycomb-bg>, but as a content-bearing grid not a backdrop.
+ *
+ * Two surfaces:
+ *   - Integrations: connect ConNext to mail, calendar, XWiki, Decks,
+ *     OpenProject etc. Centre = ConNext / Conduction logo.
+ *   - Partners: same shape, partner logos around the Conduction hex.
+ *
+ * Usage in MDX:
+ *
+ *   <HexNetwork
+ *     center={{name: 'ConNext', logo: '/img/connext-mark.svg'}}
+ *     cells={[
+ *       {name: 'Mail',        logo: '/img/integrations/mail.svg'},
+ *       {name: 'Calendar',    logo: '/img/integrations/calendar.svg'},
+ *       {name: 'XWiki',       logo: '/img/integrations/xwiki.svg'},
+ *       {name: 'Decks',       logo: '/img/integrations/decks.svg'},
+ *       {name: 'OpenProject', logo: '/img/integrations/openproject.svg'},
+ *       {name: 'Talk',        logo: '/img/integrations/talk.svg'},
+ *     ]}
+ *     layout="3-3-3"
+ *   />
+ */
+
+import React from 'react';
+import styles from './HexNetwork.module.css';
+
+const LAYOUTS = {
+  '3-3-3':   [3, 3, 3],         // 9 cells,  centre row[1][1]
+  '2-3-2':   [2, 3, 2],         // 7 cells,  centre row[1][1]
+  '3-4-3':   [3, 4, 3],         // 10 cells, no natural centre slot
+  '4-3-4':   [4, 3, 4],         // 11 cells, used for the full /support partner wall
+  '3-3-3-3': [3, 3, 3, 3],      // 12 cells, centre row[1][1]
+};
+
+function Cell({cell, highlighted}) {
+  if (!cell) {
+    return <div className={[styles.cell, styles.empty].filter(Boolean).join(' ')} aria-hidden="true"><div className={styles.cellInner} /></div>;
+  }
+  const inner = cell.logo
+    ? (typeof cell.logo === 'string'
+        ? <img src={cell.logo} alt={cell.name || ''} className={styles.logo} />
+        : <span className={styles.logo}>{cell.logo}</span>)
+    : (cell.name && <span className={styles.wordmark}>{cell.name}</span>);
+  return (
+    <a
+      className={[styles.cell, highlighted && styles.center, cell.href && styles.linked].filter(Boolean).join(' ')}
+      href={cell.href || undefined}
+      title={cell.name || undefined}
+      aria-label={cell.name || undefined}
+    >
+      <div className={styles.cellInner}>{inner}</div>
+    </a>
+  );
+}
+
+export default function HexNetwork({
+  center,
+  cells = [],
+  layout = '3-3-3',
+  background = 'transparent',
+  scroll = 'none',          // 'none' | 'down' | 'up'
+  scrollSpeed = 60,         // seconds per cycle
+  visibleRows = 3,          // rows visible inside the scroll viewport
+  fade = true,              // soft mask-gradient on viewport top/bottom
+  className,
+}) {
+  const rowCounts = LAYOUTS[layout] || LAYOUTS['3-3-3'];
+  /* Distribute cells into rows, threading the centre into the middle row
+     (floor((rows-1)/2)) so it stays visually anchored regardless of how
+     many rows the layout has. The centre prop wins over any cell that
+     would otherwise occupy that slot. */
+  const centreRow = Math.floor((rowCounts.length - 1) / 2);
+  const rows = [];
+  let idx = 0;
+  rowCounts.forEach((count, rowIdx) => {
+    const row = [];
+    for (let c = 0; c < count; c++) {
+      const isCentreSlot = rowIdx === centreRow && c === Math.floor(count / 2) && center;
+      if (isCentreSlot) {
+        row.push({cell: center, highlighted: true});
+      } else {
+        row.push({cell: cells[idx], highlighted: false});
+        idx += 1;
+      }
+    }
+    rows.push(row);
+  });
+
+  const composed = [styles.network, styles[`bg-${background}`], className].filter(Boolean).join(' ');
+  const renderRows = (rowsToRender, keyPrefix = '') => rowsToRender.map((row, ri) => (
+    <div
+      key={`${keyPrefix}${ri}`}
+      className={[styles.row, ri % 2 === 1 && styles.offset].filter(Boolean).join(' ')}
+    >
+      {row.map((entry, ci) => (
+        <Cell key={ci} cell={entry.cell} highlighted={entry.highlighted} />
+      ))}
+    </div>
+  ));
+
+  /* Static render: just the grid. */
+  if (scroll === 'none') {
+    return (
+      <div className={composed}>
+        <div className={styles.grid}>{renderRows(rows)}</div>
+      </div>
+    );
+  }
+
+  /* Scrolling render: viewport with mask-faded edges, track that holds
+     the rows twice for a seamless loop. The track animates translateY;
+     'down' shows content moving downward (rows enter at top, exit at
+     bottom), 'up' is the reverse (credits-roll). Hover and focus pause
+     the loop, prefers-reduced-motion turns it off. */
+  const scrollClass = scroll === 'down' ? styles.scrollDown : styles.scrollUp;
+  const trackStyle = {animationDuration: `${scrollSpeed}s`};
+  const viewportStyle = {'--hex-visible-rows': visibleRows};
+  const viewportClass = [styles.viewport, fade && styles.viewportFade].filter(Boolean).join(' ');
+  return (
+    <div className={composed}>
+      <div className={viewportClass} style={viewportStyle}>
+        <div className={[styles.track, scrollClass].join(' ')} style={trackStyle}>
+          {renderRows(rows, 'a-')}
+          {renderRows(rows, 'b-')}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/HexNetwork/HexNetwork.module.css

@@ -0,0 +1,187 @@
+/**
+ * <HexNetwork /> styles. Honeycomb-pattern hex grid with logos.
+ *
+ * Geometry: pointy-top hex (sqrt(3) ratio). Rows tessellate by
+ *   - horizontal pitch in a row: cell-width + ROW_GAP
+ *   - vertical pitch between rows: 3/4 of cell-height (rows nest 1/4 deep)
+ *   - alternate rows offset by half a horizontal pitch so points interlock
+ *
+ * Tunables (kept in one place so the math stays consistent):
+ *   --hex-cell-w: 132px;
+ *   --hex-cell-h: 152px;          (≈ 1.155 × cell-w, the sqrt(3) ratio)
+ *   --hex-row-gap: 8px;           (gap between adjacent cells in a row)
+ *
+ * Brand rule: partner and client logos always sit on a white surface,
+ * with the white hex acting as the framing. Never tint the hex fill
+ * for logo cells. The brand-anchor center cell is the only solid-fill
+ * exception (cobalt). See design-system CLAUDE.md.
+ */
+
+.network {
+  --hex-cell-w: 132px;
+  --hex-cell-h: 152px;
+  --hex-row-gap: 10px;
+  /* Vertical pitch is 3/4 of cell height (= --hex-cell-h / 4 overlap).
+     Adding (--hex-row-gap × cos 30°) gives a perpendicular row spacing
+     that matches the horizontal gap, so all six neighbour gaps look equal. */
+  --hex-row-overlap: calc((var(--hex-cell-h) / 4) - (var(--hex-row-gap) * 0.866));
+  --hex-row-offset: calc((var(--hex-cell-w) + var(--hex-row-gap)) / 2);
+
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+/* Optional panel bg, kept for callers that want a contained tinted
+   surface. Default is transparent: most heroes provide their own
+   backdrop so the white hexes read against it. */
+.bg-transparent { background: transparent; padding: 0; }
+.bg-tinted      { background: var(--c-cobalt-50);    padding: var(--space-10) var(--space-6); border-radius: var(--radius-xl); }
+.bg-white       { background: white;                 padding: var(--space-10) var(--space-6); border-radius: var(--radius-xl); }
+.bg-inverse     { background: var(--c-blue-cobalt);  padding: var(--space-10) var(--space-6); border-radius: var(--radius-xl); }
+
+.grid {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0;
+}
+
+.row {
+  display: flex;
+  gap: var(--hex-row-gap);
+  align-items: center;
+  width: max-content;
+}
+.row + .row {
+  margin-top: calc(-1 * var(--hex-row-overlap));
+}
+.row.offset {
+  /* Shift this row by half a horizontal pitch; the next row resets so
+     the zig-zag stays anchored to a single column on alternating rows. */
+  margin-left: var(--hex-row-offset);
+}
+.row.offset + .row {
+  margin-left: 0;
+}
+
+.cell {
+  position: relative;
+  text-decoration: none;
+  color: inherit;
+  display: block;
+  transition: transform 160ms ease;
+  /* drop-shadow respects the clip-path (box-shadow would get clipped),
+     and gives the white hexes a soft separation against tinted surfaces. */
+  filter: drop-shadow(0 1px 2px rgba(7, 25, 60, 0.06)) drop-shadow(0 2px 6px rgba(7, 25, 60, 0.04));
+}
+.cell.linked { cursor: pointer; }
+.cell.linked:hover { transform: translateY(-2px); }
+
+.cellInner {
+  width: var(--hex-cell-w);
+  height: var(--hex-cell-h);
+  clip-path: var(--hex-pointy-top);
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.cell.empty .cellInner { background: white; opacity: 0.55; }
+
+/* Highlighted center: solid cobalt fill, only ever applied to the
+   brand-anchor cell. */
+.cell.center .cellInner { background: var(--c-blue-cobalt); }
+
+.logo {
+  display: block;
+  max-width: 56%;
+  max-height: 56%;
+  object-fit: contain;
+  color: var(--c-blue-cobalt);
+}
+.cell.center .logo {
+  color: white;
+  max-width: 64%;
+  max-height: 64%;
+}
+
+.wordmark {
+  font-family: var(--conduction-typography-font-family-code);
+  font-weight: 700;
+  font-size: 14px;
+  letter-spacing: 0.04em;
+  color: var(--c-cobalt-700);
+  text-align: center;
+  padding: 0 var(--space-3);
+  word-break: break-word;
+}
+.cell.center .wordmark { color: white; }
+.bg-inverse .wordmark { color: var(--c-cobalt-100); }
+
+@media (max-width: 720px) {
+  .network {
+    --hex-cell-w: 96px;
+    --hex-cell-h: 110px;
+    --hex-row-gap: 6px;
+  }
+}
+
+/* ============ Scroll variant ============
+ * Vertical marquee for the partner-wall pattern. The viewport caps the
+ * visible height to N rows; the track holds the rows twice so the
+ * translateY animation can loop seamlessly. Mask gradient softens the
+ * edges where rows enter/exit. Pauses on hover and focus. Honours
+ * prefers-reduced-motion. Mirrors the horizontal Clients marquee. */
+
+.viewport {
+  --hex-visible-rows: 3;
+  /* Pitch (top-of-row to top-of-next-row) = cell-h - row-overlap. The
+     viewport spans <visible-rows> pitches plus the trailing row's
+     uncovered remainder (= row-overlap). */
+  height: calc(
+    var(--hex-visible-rows) * (var(--hex-cell-h) - var(--hex-row-overlap))
+    + var(--hex-row-overlap)
+  );
+  overflow: hidden;
+  position: relative;
+}
+
+/* Soft top/bottom fade-out so rows ease in/out of the viewport. Opt-in
+   via the fade prop on <HexNetwork>; off when callers want a hard
+   crop. */
+.viewportFade {
+  -webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
+          mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
+}
+
+.track {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: max-content;
+  margin: 0 auto;
+  will-change: transform;
+}
+
+.scrollDown { animation: hexScrollDown 60s linear infinite; }
+.scrollUp   { animation: hexScrollUp   60s linear infinite; }
+
+@keyframes hexScrollDown {
+  from { transform: translateY(-50%); }
+  to   { transform: translateY(0);    }
+}
+@keyframes hexScrollUp {
+  from { transform: translateY(0);    }
+  to   { transform: translateY(-50%); }
+}
+
+.viewport:hover .track,
+.viewport:focus-within .track { animation-play-state: paused; }
+
+@media (prefers-reduced-motion: reduce) {
+  .scrollDown, .scrollUp { animation: none; transform: translateY(-25%); }
+}