Add responsive scientific hero artwork

Author: Hilo-Hilo

assets-src/hero/compbio-research-atlas-light-master.png

@@ -4,6 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
+    "assets:hero": "node scripts/build-hero-art.mjs",
     "assets:partners": "node scripts/build-partner-logos.mjs",
     "dev": "vite",
     "test": "node --test scripts/lib/*.test.js",

package.json

@@ -0,0 +1,16 @@
+# Computational biology hero artwork
+
+The landing-page artwork combines a protein ribbon, a genomic heatmap, and a
+coverage/gene track in one transparent 4:3 composition.
+
+- Source master: `assets-src/hero/compbio-research-atlas-light-master.png`
+- Generated web assets: `compbio-research-atlas-{light,dark}-{800,1600}.webp`
+- Regeneration command: `npm run assets:hero`
+
+The light master was created with OpenAI image generation from a
+user-supplied scientific-layout reference on 2026-07-29, then isolated onto a
+true alpha channel. The dark assets are deterministic palette conversions of
+that same master, so theme changes do not shift the composition. California
+gold is preserved while blue and steel tones become pearl and ice blue.
+
+Edit the source master or the conversion script, not the generated WebP files.

public/hero/README.md

@@ -0,0 +1,148 @@
+import { mkdir } from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import sharp from "sharp";
+
+const projectRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
+const sourcePath = path.join(
+  projectRoot,
+  "assets-src/hero/compbio-research-atlas-light-master.png",
+);
+const outputDirectory = path.join(projectRoot, "public/hero");
+const outputWidths = [800, 1600];
+
+const isGoldPixel = (red, green, blue) =>
+  red > 125
+  && red > blue * 1.18
+  && green > blue * 1.08
+  && red > green * 1.015;
+
+const clearSafeMargin = async (input) => {
+  const { data, info } = await sharp(input)
+    .ensureAlpha()
+    .raw()
+    .toBuffer({ resolveWithObject: true });
+
+  for (let y = 0; y < info.height; y += 1) {
+    for (let x = 0; x < info.width; x += 1) {
+      if (x >= 100 && x < info.width - 100 && y >= 100 && y < info.height - 120) {
+        continue;
+      }
+
+      const index = (y * info.width + x) * 4;
+      data[index] = 0;
+      data[index + 1] = 0;
+      data[index + 2] = 0;
+      data[index + 3] = 0;
+    }
+  }
+
+  return sharp(data, {
+    raw: {
+      width: info.width,
+      height: info.height,
+      channels: 4,
+    },
+  })
+    .png()
+    .toBuffer();
+};
+
+const buildDarkVariant = async (input) => {
+  const { data, info } = await sharp(input)
+    .ensureAlpha()
+    .raw()
+    .toBuffer({ resolveWithObject: true });
+
+  for (let index = 0; index < data.length; index += 4) {
+    const red = data[index];
+    const green = data[index + 1];
+    const blue = data[index + 2];
+    const alpha = data[index + 3];
+
+    if (alpha === 0) continue;
+
+    if (isGoldPixel(red, green, blue)) {
+      data[index] = Math.min(255, Math.round(red * 1.02));
+      data[index + 1] = Math.min(255, Math.round(green * 1.03));
+      data[index + 2] = Math.min(255, Math.round(blue * 0.96));
+      continue;
+    }
+
+    const luminance = Math.max(
+      0,
+      Math.min(1, (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255),
+    );
+    const pearl = [247, 243, 232];
+    const iceBlue = [139, 164, 194];
+
+    data[index] = Math.round(pearl[0] * (1 - luminance) + iceBlue[0] * luminance);
+    data[index + 1] = Math.round(
+      pearl[1] * (1 - luminance) + iceBlue[1] * luminance,
+    );
+    data[index + 2] = Math.round(
+      pearl[2] * (1 - luminance) + iceBlue[2] * luminance,
+    );
+  }
+
+  return sharp(data, {
+    raw: {
+      width: info.width,
+      height: info.height,
+      channels: 4,
+    },
+  })
+    .png()
+    .toBuffer();
+};
+
+const writeVariant = async (variant, input, width) => {
+  const height = Math.round(width * 0.75);
+  const outputPath = path.join(
+    outputDirectory,
+    `compbio-research-atlas-${variant}-${width}.webp`,
+  );
+
+  await sharp(input)
+    .resize(width, height, {
+      fit: "fill",
+      kernel: sharp.kernel.lanczos3,
+      withoutEnlargement: true,
+    })
+    .webp({
+      quality: 90,
+      alphaQuality: 100,
+      effort: 6,
+      smartSubsample: true,
+    })
+    .toFile(outputPath);
+
+  console.log(`Wrote ${path.relative(projectRoot, outputPath)}`);
+};
+
+const sourceMaster = await sharp(sourcePath).png().toBuffer();
+const metadata = await sharp(sourceMaster).metadata();
+
+if (
+  metadata.width !== 1600
+  || metadata.height !== 1200
+  || metadata.hasAlpha !== true
+) {
+  throw new Error(
+    "Hero master must be a 1600x1200 PNG with a transparent alpha channel.",
+  );
+}
+
+await mkdir(outputDirectory, { recursive: true });
+
+const source = await clearSafeMargin(sourceMaster);
+const variants = {
+  light: source,
+  dark: await buildDarkVariant(source),
+};
+
+for (const [variant, input] of Object.entries(variants)) {
+  for (const width of outputWidths) {
+    await writeVariant(variant, input, width);
+  }
+}

public/hero/compbio-research-atlas-dark-1600.webp

@@ -0,0 +1,45 @@
+import { cn } from "@/lib/utils";
+import { publicAssetPath } from "@/lib/publicAsset";
+import { useTheme } from "next-themes";
+
+const heroAssetPath = (theme: "light" | "dark", width: 800 | 1600) =>
+  publicAssetPath(`/hero/compbio-research-atlas-${theme}-${width}.webp`);
+
+const heroImageProps = {
+  alt: "",
+  width: 1600,
+  height: 1200,
+  decoding: "async" as const,
+  draggable: false,
+  loading: "eager" as const,
+  sizes: "(min-width: 1280px) 640px, (min-width: 1024px) 52vw, 92vw",
+};
+
+interface HeroScienceGraphicProps {
+  className?: string;
+}
+
+export const HeroScienceGraphic = ({ className }: HeroScienceGraphicProps) => {
+  const { resolvedTheme } = useTheme();
+  const documentTheme =
+    typeof document !== "undefined" && document.documentElement.classList.contains("dark")
+      ? "dark"
+      : "light";
+  const theme = resolvedTheme === "dark" || (!resolvedTheme && documentTheme === "dark")
+    ? "dark"
+    : "light";
+
+  return (
+    <span
+      className={cn("hero-science-art block", className)}
+      aria-hidden="true"
+    >
+      <img
+        {...heroImageProps}
+        src={heroAssetPath(theme, 1600)}
+        srcSet={`${heroAssetPath(theme, 800)} 800w, ${heroAssetPath(theme, 1600)} 1600w`}
+        className="h-auto w-full select-none object-contain"
+      />
+    </span>
+  );
+};

public/hero/compbio-research-atlas-dark-800.webp

@@ -191,8 +191,15 @@
     background: transparent;
   }
 
-  .hero-logo-plate {
-    background: transparent;
+  .hero-science-art {
+    transform-origin: center;
+    filter: drop-shadow(0 18px 26px hsl(var(--primary) / 0.1));
+    animation: hero-science-drift 10s ease-in-out infinite;
+    will-change: transform;
+  }
+
+  .dark .hero-science-art {
+    filter: drop-shadow(0 20px 30px hsl(var(--primary) / 0.12));
   }
 
   .site-logo-system-dark {
@@ -265,6 +272,17 @@
   }
 }
 
+@keyframes hero-science-drift {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+
+  50% {
+    transform: translate3d(0, -5px, 0);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   html {
     scroll-behavior: auto;