Social banner: HTML-rendered OG share thumbnail (1200x630, static)

- Compose the OG share image directly in HTML/CSS using the same
.carbon-banner stage as the live header — copying the rendered tile
into img/thumb.png keeps the share image perfectly in sync with the
product, no manual export needed.
- Mark the OG tile's header with data-static so banner.js draws a single
frame on it; the live demo header still animates as before.
- Refactor banner.js to support multiple .carbon-banner instances and
honor data-static to skip the RAF loop / observers cleanly.
- Nudge the OG-only helix slightly right (translateX -18px vs -56px on
wider Twitter/LinkedIn ratios) so the 1200x630 ratio keeps a clean
strip of paper between the wordmark and the strand.
- Drop the now-unused img/logo.png and point all SEO/OG/Twitter/JSON-LD
tags in demo.html at img/thumb.png with its actual 2392x1258 export
dimensions.

Co-authored-by: Cursor <cursoragent@cursor.com>

assets/js/banner.js

@@ -10,10 +10,18 @@
 //   horizontal: y = sin(theta(x)) * amplitude
 //   vertical:   x = sin(theta(y)) * amplitude
 // Everything else (z-sort, rung gaps, glyph shapes) carries over verbatim.
+//
+// One init() call per .carbon-banner on the page. social-banner.html
+// renders two instances (the main stage at the top + the OG thumbnail
+// preview lower down), and each carries its own canvas, IntersectionObserver,
+// rAF loop and animation phase so their helices can run independently
+// without sharing state.
 // =========================================================================
-(function initCarbonBanner() {
-  const banner = document.querySelector(".carbon-banner");
-  if (!banner) return;
+(function initAllCarbonBanners() {
+  const banners = document.querySelectorAll(".carbon-banner");
+  banners.forEach(initCarbonBanner);
+
+function initCarbonBanner(banner) {
   const canvas = banner.querySelector(".cb-helix-canvas");
   if (!canvas) return;
   const ctx = canvas.getContext("2d");
@@ -534,6 +542,26 @@
     cancelAnimationFrame(rafId);
   }
 
+  // Static banners (data-static on the .carbon-banner root) render a
+  // single frozen frame and skip the entire animation pipeline. Used
+  // by the OG share thumbnail lower on the page, which is meant to be
+  // screenshot for the og:image asset — a moving helix would just make
+  // the screenshot unpredictable, and the rAF loop is a waste of CPU
+  // since the tile is purely a static preview. A ResizeObserver still
+  // keeps the frozen frame crisp when the contact-sheet auto-fit
+  // factor changes the on-screen pixel size of the canvas.
+  const isStatic = banner.hasAttribute("data-static");
+
+  if (isStatic) {
+    const roStatic = new ResizeObserver(() => {
+      resize();
+      drawFrame(0);
+    });
+    roStatic.observe(canvas);
+    drawFrame(0);
+    return;
+  }
+
   const io = new IntersectionObserver(entries => {
     inViewport = entries[0].isIntersecting;
     if (inViewport) start();
@@ -554,4 +582,5 @@
 
   drawFrame(0);
   start();
+}
 })();

demo.html

@@ -19,25 +19,26 @@
 <meta name="color-scheme" content="light">
 <link rel="canonical" href="{{SITE_URL}}/">
 
-<!-- Favicon. Modern browsers honour SVG; we keep the PNG as a   -->
-<!-- raster fallback for the few that don't (Safari < 14 etc.). -->
+<!-- Favicon. The SVG covers every modern browser engine (Chrome,
+     Safari ≥ 14, Firefox, Edge). We dropped the PNG raster fallback
+     when img/logo.png was retired in favour of img/thumb.png (the
+     dedicated social-card asset), since none of the browsers that
+     still need a raster favicon are in the demo's target audience. -->
 <link rel="icon" type="image/svg+xml" href="/img/logo.svg">
-<link rel="icon" type="image/png" href="/img/logo.png">
-<link rel="apple-touch-icon" href="/img/logo.png">
 
-<!-- Open Graph (Facebook, LinkedIn, Slack, Discord, iMessage…). -->
-<!-- og:image points at /img/logo.png, which is the wide Carbon  -->
-<!-- wordmark+helix lockup (1153x634, ~OG-shaped). Swap with a   -->
-<!-- proper 1200x630 screenshot of /social-banner once exported. -->
+<!-- Open Graph (Facebook, LinkedIn, Slack, Discord, iMessage…).  -->
+<!-- og:image points at /img/thumb.png, the 2x export of the OG   -->
+<!-- preview tile rendered by /social-banner (2392×1258, drop-in  -->
+<!-- 1200×630 ratio at retina resolution).                        -->
 <meta property="og:type" content="website">
 <meta property="og:site_name" content="Carbon">
 <meta property="og:title" content="Carbon · an open-source autoregressive genomic foundation model">
 <meta property="og:description" content="An interactive editorial demo of Carbon, Hugging Face's open-source DNA foundation model. Streaming continuation, variant scoring, protein folding, gene-embedding UMAP, and the full training recipe.">
 <meta property="og:url" content="{{SITE_URL}}/">
-<meta property="og:image" content="{{SITE_URL}}/img/logo.png">
-<meta property="og:image:width" content="1153">
-<meta property="og:image:height" content="634">
-<meta property="og:image:alt" content="Carbon — the wordmark wrapped in a four-strand DNA helix.">
+<meta property="og:image" content="{{SITE_URL}}/img/thumb.png">
+<meta property="og:image:width" content="2392">
+<meta property="og:image:height" content="1258">
+<meta property="og:image:alt" content="Carbon — wordmark and four-strand DNA helix on cream paper.">
 <meta property="og:locale" content="en_US">
 
 <!-- Twitter / X card. summary_large_image renders the OG image  -->
@@ -47,8 +48,8 @@
 <meta name="twitter:creator" content="@huggingface">
 <meta name="twitter:title" content="Carbon · an open-source autoregressive genomic foundation model">
 <meta name="twitter:description" content="An interactive editorial demo of Carbon, Hugging Face's open-source DNA foundation model. Streaming continuation, variant scoring, protein folding, gene-embedding UMAP, and the full training recipe.">
-<meta name="twitter:image" content="{{SITE_URL}}/img/logo.png">
-<meta name="twitter:image:alt" content="Carbon — the wordmark wrapped in a four-strand DNA helix.">
+<meta name="twitter:image" content="{{SITE_URL}}/img/thumb.png">
+<meta name="twitter:image:alt" content="Carbon — wordmark and four-strand DNA helix on cream paper.">
 
 <!-- JSON-LD structured data. Helps search engines and LLM-      -->
 <!-- powered answer engines (Perplexity, ChatGPT browsing, etc.) -->
@@ -65,7 +66,7 @@
       "headline": "Carbon · an open-source autoregressive genomic foundation model",
       "description": "An interactive editorial walkthrough of Carbon, Hugging Face's open-source DNA foundation model: streaming continuation, variant effect prediction, ESMFold-based protein structure prediction, a UMAP of ~500k gene embeddings, and the full training recipe (tokenizer, loss, dataset, results).",
       "url": "{{SITE_URL}}/",
-      "image": "{{SITE_URL}}/img/logo.png",
+      "image": "{{SITE_URL}}/img/thumb.png",
       "inLanguage": "en",
       "author": { "@type": "Organization", "name": "Hugging Face Bio", "url": "https://huggingface.co/HuggingFaceBio" },
       "publisher": { "@type": "Organization", "name": "Hugging Face", "url": "https://huggingface.co" },

social-banner.html

@@ -8,7 +8,6 @@
 <!-- training crawls. The canonical page is demo.html (served at /).    -->
 <meta name="robots" content="noindex, nofollow">
 <link rel="icon" type="image/svg+xml" href="/img/logo.svg">
-<link rel="icon" type="image/png" href="/img/logo.png">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap">
@@ -68,13 +67,23 @@
     transition: width 0.22s ease, height 0.22s ease;
   }
 
+  /* The OG share thumbnail tile lower down on the page reuses the exact
+     same .carbon-banner hero markup as the main stage, just frozen at
+     1200×630 instead of switching format. Every override below is
+     shared between the two contexts (the main stage and the OG tile)
+     so the OG screenshot reads as a smaller-ratio crop of the hero,
+     not a separate "thumbnail" composition. The .sb-logo-stage--og
+     selector picks up exactly the same rules as .social-banner-stage. */
+
   /* Inside the stage the banner fills it entirely (no max-width cap
      like on the main page — here the banner IS the canvas). */
-  .social-banner-stage .carbon-banner {
+  .social-banner-stage .carbon-banner,
+  .sb-logo-stage--og .carbon-banner {
     width: 100%;
     height: 100%;
   }
-  .social-banner-stage .banner-inner {
+  .social-banner-stage .banner-inner,
+  .sb-logo-stage--og .banner-inner {
     max-width: none;
     height: 100%;
     /* Tabs are gone — drop the asymmetric bottom-zero padding from the
@@ -97,12 +106,23 @@
      so the helix doesn't hug the right edge of the social card. The
      extra width also keeps the bases on the right side from clipping
      against the stage frame on wider canvases (LinkedIn 1584). */
-  .social-banner-stage .cb-helix-canvas {
+  .social-banner-stage .cb-helix-canvas,
+  .sb-logo-stage--og .cb-helix-canvas {
     right: -72px;
     width: calc(100% + 132px);
     transform: translateX(-56px) rotate(5deg);
   }
-  .social-banner-stage .banner-left {
+  /* OG tile only: nudge the helix back to the right. The 1200×630 ratio
+     gives the strand more vertical real estate than the wide formats
+     (Twitter 1500×500, LinkedIn 1584×396), so it doesn't need to crowd
+     toward the left to balance against the wordmark — letting it sit a
+     little further right keeps a clean strip of paper between the
+     wordmark and the strand at the OG ratio. */
+  .sb-logo-stage--og .cb-helix-canvas {
+    transform: translateX(-18px) rotate(5deg);
+  }
+  .social-banner-stage .banner-left,
+  .sb-logo-stage--og .banner-left {
     /* No more bottom tab row → 2-row layout: identity strip on top,
        headline filling the rest. */
     grid-template-rows: auto 1fr;
@@ -113,23 +133,31 @@
      so the wordmark scales with the social canvas, not the browser
      window. cqh = container-query-height, falls back to a fixed size
      on browsers without container queries. */
-  .social-banner-stage { container-type: size; }
-  .social-banner-stage .banner-wordmark {
+  .social-banner-stage,
+  .sb-logo-stage--og { container-type: size; }
+  .social-banner-stage .banner-wordmark,
+  .sb-logo-stage--og .banner-wordmark {
     font-size: clamp(64px, 22cqh, 140px);
   }
-  .social-banner-stage .banner-subtitle {
+  .social-banner-stage .banner-subtitle,
+  .sb-logo-stage--og .banner-subtitle {
     font-size: clamp(11px, 2.6cqh, 16px);
     margin-top: 10px;
   }
-  .social-banner-stage .banner-specs {
+  .social-banner-stage .banner-specs,
+  .sb-logo-stage--og .banner-specs {
     font-size: clamp(10px, 2.2cqh, 13px);
     margin-top: 10px;
   }
-  .social-banner-stage .banner-title { font-size: clamp(12px, 2.6cqh, 16px); }
-  .social-banner-stage .banner-path  { font-size: clamp(10px, 2.2cqh, 13px); }
+  .social-banner-stage .banner-title,
+  .sb-logo-stage--og .banner-title { font-size: clamp(12px, 2.6cqh, 16px); }
+  .social-banner-stage .banner-path,
+  .sb-logo-stage--og .banner-path  { font-size: clamp(10px, 2.2cqh, 13px); }
 
   /* Slightly stronger inset hairline replaces the bottom one we lose
-     with the tabs gone — keeps the banner from looking unfinished. */
+     with the tabs gone — keeps the banner from looking unfinished.
+     Only on the main stage: the OG tile already has a hairline coming
+     from .sb-logo-card and a second inset stroke would double up. */
   .social-banner-stage .carbon-banner {
     box-shadow: inset 0 0 0 1px #cfcdbf;
   }
@@ -287,12 +315,29 @@
     width: 160px;
     height: 160px;
   }
-  /* OG / share thumbnail — matches /img/logo.png's native pixel size so
-     a screenshot of the stage is the asset at 1:1. The tile is wider
-     than any of the logo tiles, so it always wraps to its own row and
-     gets its own auto-fit scaling via fitRow() in the script below. */
-  .sb-logo-stage--og        { --w: 1153px; --h: 634px; }
-  .sb-logo-stage--og        { background: #fff; }
+  /* OG / share thumbnail — laid out at the canonical 1200×630 social-card
+     ratio (the size Facebook, Twitter / X, LinkedIn, Slack, Discord and
+     iMessage all crop to). A screenshot of the stage at 100% IS the
+     /img/thumb.png replacement: drop the PNG straight into img/ and
+     bump the og:image:width/height meta in demo.html accordingly. The inner
+     .carbon-banner markup is identical to the main stage; the cqh-based
+     font-size rules and the .sb-logo-stage--og selectors above retune
+     the hero to the OG ratio automatically — no separate composition. */
+  .sb-logo-stage--og {
+    --w: 1200px;
+    --h: 630px;
+    /* No extra padding here: the .banner-inner inside .carbon-banner
+       handles its own internal gutters via the shared override above.
+       Stage background only shows through the helix overshoot, which
+       is the same paper used by the main stage. */
+    background: var(--paper, #f7f5ee);
+    /* Clip the rotated helix overshoot at the stage edge so the
+       screenshot crop is clean. Mirrors .carbon-banner's own
+       overflow:hidden which already clips inside the banner, but we
+       repeat it here for safety in case the canvas drifts further out
+       than the inner banner clip. */
+    overflow: hidden;
+  }
 
   .sb-logo-meta {
     font-family: "JetBrains Mono", ui-monospace, monospace;
@@ -479,26 +524,55 @@
 
 <!-- ------------------------------------------------------------------ -->
 <!-- SEO / social-share thumbnail.                                      -->
-<!-- This is the asset wired into demo.html as og:image + twitter:image -->
-<!-- (the preview tile that pops up when the demo URL is shared on      -->
-<!-- Slack, X, LinkedIn, etc.). Painted at native 1153×634 so the page  -->
-<!-- doubles as a single source of truth for the social card.           -->
+<!-- Composed in HTML so the lockup tracks edits to logo-rectangle.svg  -->
+<!-- automatically: screenshot the stage at 100% and drop the PNG into  -->
+<!-- img/thumb.png. The stage is sized at the canonical 1200×630        -->
+<!-- social-card ratio so the export drops straight into demo.html's    -->
+<!-- og:image + twitter:image meta tags. Marked data-static so the helix-->
+<!-- renders a single frozen frame instead of animating — keeps the     -->
+<!-- screenshot deterministic and frees the rAF loop.                   -->
 <!-- ------------------------------------------------------------------ -->
 <div class="sb-section-label">
   <span>seo · share thumbnail</span>
-  <span class="sb-section-label__hint">img/logo.png · wired as og:image + twitter:image in demo.html</span>
+  <span class="sb-section-label__hint">1200×630 · screenshot at 100% and drop into img/thumb.png</span>
 </div>
 
 <div class="sb-thumbs" id="sb-thumbs">
 
   <figure class="sb-logo-card">
     <div class="sb-logo-stage sb-logo-stage--og">
-      <img src="/img/logo.png" alt="Carbon — wordmark wrapped in a four-strand DNA helix, current og:image">
+      <header class="carbon-banner" data-static aria-label="Carbon OG share thumbnail">
+        <div class="banner-inner">
+          <div class="banner-left">
+
+            <div class="banner-identity">
+              <a class="logo-card" href="#" aria-label="Carbon, go to top">
+                <img class="logo-img" src="/img/logo.svg" alt="" width="44" height="44">
+              </a>
+              <div class="banner-breadcrumb">
+                <div class="banner-title">CARBON</div>
+                <div class="banner-path">huggingfacebio/carbon-3b</div>
+              </div>
+            </div>
+
+            <div class="banner-headline">
+              <h1 class="banner-wordmark"><span>CARBON</span><span class="banner-cursor" aria-hidden="true"></span></h1>
+              <p class="banner-subtitle">Autoregressive Genomic Foundation Model</p>
+              <ul class="banner-specs" aria-label="Model specs">
+                <li class="banner-spec"><strong>49,152</strong> bp context</li>
+                <li class="banner-spec"><strong>6-mer</strong> tokenizer</li>
+                <li class="banner-spec"><strong>1T</strong> train tokens</li>
+              </ul>
+            </div>
+
+          </div>
+
+          <div class="banner-helix" aria-hidden="true">
+            <canvas class="cb-helix-canvas"></canvas>
+          </div>
+        </div>
+      </header>
     </div>
-    <figcaption class="sb-logo-meta">
-      <span class="sb-logo-meta__name" title="logo.png">logo.png</span>
-      <button type="button" class="sb-logo-meta__copy" data-copy="/img/logo.png">copy</button>
-    </figcaption>
   </figure>
 
 </div>