Refine demo product design

Author: root

app/page.jsx

@@ -7,12 +7,52 @@ const stats = [
   ["LOD", "Min/max buckets"],
 ];
 
-const heroBadges = ["WASM only", "ImPlot native", "Jupyter + Web"];
+const proofPoints = [
+  ["10M", "line-point workflow target"],
+  ["O(px)", "pan and zoom work per frame"],
+  ["0", "JSON point arrays on the hot path"],
+];
+
+const quickstart = [
+  "pip install nbimplot",
+  "",
+  "import nbimplot as ip",
+  "p = ip.Plot(width=900, height=450, title=\"Signal\")",
+  "h = p.line(\"mid\", y, x=t)",
+  "h.set_data(y_new, x=t_new)",
+  "p.show()",
+];
 
-const heroProofs = [
-  ["10M", "line points target"],
-  ["O(px)", "interaction cost"],
-  ["0", "JS render fallback"],
+const webstart = [
+  "npm install @nbimplot/web",
+  "",
+  "import { createPlot } from \"@nbimplot/web\";",
+  "const plot = await createPlot(host, { title: \"Signal\" });",
+  "const h = plot.line(\"mid\", y, { x: t });",
+  "h.setData(yNext, { x: tNext });",
+  "plot.render();",
+];
+
+const productPromises = [
+  "Notebook output cell only",
+  "Strict WASM + ImPlot rendering",
+  "Binary array transport",
+  "LOD inside the core",
+];
+
+const principles = [
+  {
+    title: "Binary data path",
+    text: "NumPy and typed arrays move as buffers. The Python and browser APIs avoid JSON point lists for series data.",
+  },
+  {
+    title: "ImPlot interaction model",
+    text: "Pan, zoom, axis menus, legends, selection, and hover behavior come from the ImGui + ImPlot WASM runtime.",
+  },
+  {
+    title: "Pixel-bounded rendering",
+    text: "Large time series switch to min/max LOD so interaction cost tracks screen resolution, not raw array size.",
+  },
 ];
 
 const resourceLinks = [
@@ -29,91 +69,91 @@ const examples = [
     id: "line-lod-plot",
     section: "Performance",
     title: "Million Point Line + Custom X + LOD",
-    text: "Large time-series path using explicit x data, WASM min/max LOD, and callback-driven hover/click/selection inspection.",
+    text: "Explicit x/y buffers, WASM min/max LOD, and callback-driven hover/click/selection inspection.",
     code: 'const h = plot.line("signal", y, { x });\nplot.onHover(console.log);\nplot.onSelection((e) => plot.indicesForSelection(e, h));',
   },
   {
     id: "streaming-plot",
     section: "Performance",
     title: "Realtime Streaming Ring Buffer",
-    text: "Appends explicit x/y typed-array chunks into a fixed-capacity line with pause/resume controls.",
+    text: "Append explicit x/y chunks into a fixed-capacity line without recreating the plot object.",
     code: 'const h = plot.streamLine("ticks", { capacity: 12000, x: initialX });\nh.append(chunk, { x: chunkX });\nh.pause(); h.resume();',
   },
   {
     id: "scatter-plot",
     section: "Points",
     title: "Scatter + Bubble Encodings",
-    text: "Explicit x/y buffers, marker rendering, and bubble sizes for dense point-cloud style workflows.",
+    text: "Point-cloud rendering with explicit x/y data and bubble-size encodings for dense browser workflows.",
     code: 'plot.scatter("samples", y, { x });\nplot.bubbles("volume", y, sizes, { x });',
   },
   {
     id: "curve-plot",
     section: "Curves",
     title: "Stairs, Stems, Digital, Shaded, Error Bars",
-    text: "Common signal-analysis overlays in one canvas: stepped series, impulses, digital states, confidence bands, and uncertainty intervals.",
+    text: "Signal-analysis overlays in one canvas: stepped series, impulses, bands, digital states, and uncertainty.",
     code: 'plot.stairs("step", y, { x });\nplot.shaded("band", lower, upper, { x });\nplot.errorBars("fit", y, { x, err });',
   },
   {
     id: "bars-plot",
     section: "Categorical",
     title: "Bars, Grouped Bars, Horizontal Bars",
-    text: "Three subplot panels showing vertical bars, grouped categorical bars, and horizontal rankings.",
+    text: "Vertical bars, grouped categories, and horizontal rankings across ImPlot subplots.",
     code: 'plot.setSubplots(1, 3);\nplot.bars("sales", values);\nplot.barGroups(labels, matrix);\nplot.barsH("rank", values);',
   },
   {
     id: "distribution-plot",
     section: "Statistics",
     title: "Histogram + 2D Histogram",
-    text: "1D and 2D distributions, including a colorbar for density inspection.",
+    text: "1D and 2D distributions with colorbar-backed density inspection.",
     code: 'plot.histogram("returns", values, { bins: 80 });\nplot.histogram2d("density", x, y, { xBins: 80, yBins: 60 });',
   },
   {
     id: "heatmap-image-plot",
     section: "Matrices",
     title: "Heatmap + Image",
-    text: "Matrix plotting with empty heatmap labels, colorbar formatting, and a float RGB image buffer.",
+    text: "Matrix and image plotting with empty heatmap labels, colorbar formatting, and float RGB buffers.",
     code: 'plot.setColormap("Viridis");\nplot.heatmap("z", matrix, { rows, cols, labelFmt: "" });\nplot.image("rgb", image, { rows, cols, channels: 3 });',
   },
   {
     id: "overlays-plot",
     section: "Overlays",
     title: "Annotations, Tags, Text, Infinite Lines, Pie",
-    text: "ImPlot overlays for thresholds, labels, callouts, tags, and pie chart composition.",
+    text: "Thresholds, callouts, labels, tags, and pie-chart composition using ImPlot primitives.",
     code: 'plot.vlines("events", xs);\nplot.tagY(0, { labelFmt: "zero" });\nplot.annotation("peak", x, y);\nplot.pieChart("mix", values, { labels });',
   },
   {
     id: "axes-plot",
     section: "Axes",
     title: "Axis Labels, Formats, Ticks, Log Scale, Secondary Axis",
-    text: "Secondary y-axis, custom ticks, numeric formatting, and log scaling from the same plot object.",
+    text: "Secondary axes, custom ticks, numeric formats, linked axes, and log/time scale controls.",
     code: 'plot.setSecondaryAxes({ y2: true });\nplot.setAxisScale({ x: "linear", y: "log" });\nplot.setAxisTicks("x1", ticks, { labels });',
   },
   {
     id: "subplots-plot",
     section: "Layout",
     title: "Linked Subplots + Crosshair",
-    text: "A 2x2 ImPlot subplot grid with shared x-axis interaction, linked crosshair, and mixed plot primitives.",
+    text: "A 2x2 ImPlot subplot grid with linked x-axis behavior and crosshair synchronization.",
     code: 'plot.setSubplots(2, 2, { linkAllX: true });\nplot.setLinkedCrosshair("desk", { axis: "x" });\nplot.line("a", y, { x, subplotIndex: 0 });',
   },
   {
     id: "drag-plot",
     section: "Interaction",
     title: "Drag Lines, Drag Point, Drag Rect, Drag/Drop Targets",
-    text: "Interactive ImPlot primitives. Drag the vertical/horizontal guides, point, and rectangle; inspect interaction values below.",
+    text: "Interactive ImPlot primitives for draggable guides, anchors, rectangles, and drop targets.",
     code: 'plot.dragLineX("cursor", 40);\nplot.dragPoint("anchor", 25, 0.5);\nplot.onInteraction(events => ...);',
   },
   {
     id: "colormap-plot",
     section: "Colormaps",
     title: "Colormap Widgets + Runtime Switching",
-    text: "Use the selector, slider, and buttons to verify that heatmaps and colorbar widgets use the active ImPlot colormap.",
+    text: "Selector, slider, and color button widgets that update heatmaps and colorbar primitives at runtime.",
     code: 'plot.setColormap("Plasma");\nplot.colormapSelector({ label: "Choose map" });\nplot.colormapSlider({ label: "Sample" });',
   },
   {
     id: "advanced-api-plot",
     section: "Advanced API",
     title: "State, Selection, Export",
-    text: "A focused API coverage example for view/perf callbacks, state snapshots, PNG export, selection CSV, highlighting, constraints, links, and direct primitive access.",
+    text: "View callbacks, state snapshots, PNG export, selection CSV, highlighting, constraints, links, and direct primitive access.",
     code: 'plot.setTheme("nbimplot");\nconst state = plot.getState({ includeData: true });\nplot.highlightSelection(selection, h);\nconst csv = plot.exportCSVSelection(selection, h);\nawait plot.downloadPNG("advanced.png");',
   },
 ];
@@ -129,88 +169,127 @@ export default function Page() {
           <span>nbimplot</span>
         </a>
         <div className="topbar-links">
+          <a href="#why">Architecture</a>
+          <a href="#command-center">Demo Controls</a>
+          <a href="#examples">Examples</a>
           <a href="https://pypi.org/project/nbimplot/">PyPI</a>
           <a href="https://www.npmjs.com/package/@nbimplot/web">npm</a>
-          <a href="https://github.com/Prinkesh/nbimplot">GitHub</a>
-          <a className="topbar-cta" href="#command-center">Try APIs</a>
+          <a className="topbar-cta" href="https://github.com/Prinkesh/nbimplot">GitHub</a>
         </div>
       </nav>
 
       <section className="hero-panel">
         <div className="hero-copy-block">
-          <div className="hero-badge-row" aria-label="Project qualities">
-            {heroBadges.map((badge) => (
-              <span key={badge}>{badge}</span>
-            ))}
-          </div>
-          <p className="eyebrow">ImPlot quality, notebook reach</p>
-          <h1>Fast plotting for <span>million-point</span> workflows.</h1>
+          <p className="eyebrow">Jupyter-native plotting, powered by ImPlot</p>
+          <h1>WASM plots for serious notebook data.</h1>
           <p className="hero-copy">
-            nbimplot brings an ImGui + ImPlot WASM core to notebooks and browser apps:
-            binary typed-array uploads, screen-resolution LOD, native pan/zoom, context
-            menus, subplots, colormaps, streaming updates, and exact selection APIs.
+            nbimplot gives notebooks and browser apps the same interaction model: binary
+            arrays into a strict ImGui + ImPlot WASM core, rendered on a canvas with
+            pixel-bounded LOD for large time series.
           </p>
           <div className="hero-actions">
-            <a className="primary-link" href="#examples">Explore Examples</a>
-            <a className="secondary-link" href="https://github.com/Prinkesh/nbimplot">View Source</a>
+            <a className="primary-link" href="#developer-api">Start Building</a>
+            <a className="secondary-link" href="#examples">Explore Examples</a>
           </div>
-          <div className="hero-proof-grid" aria-label="Performance proof points">
-            {heroProofs.map(([value, label]) => (
-              <div key={label}>
-                <strong>{value}</strong>
-                <span>{label}</span>
-              </div>
+          <div className="hero-promise-grid" aria-label="Product constraints">
+            {productPromises.map((promise) => (
+              <span key={promise}>{promise}</span>
             ))}
           </div>
         </div>
 
         <div className="hero-live-card" aria-label="Live nbimplot canvas">
           <div className="hero-live-header">
             <div>
-              <span>Live Surface</span>
-              <strong>ImPlot WASM canvas</strong>
+              <span>Live WASM Surface</span>
+              <strong>ImPlot canvas inside the page</strong>
             </div>
             <code>drag pan / wheel zoom / double-click fit</code>
           </div>
           <div className="hero-live-frame">
             <div id="hero-showcase-plot" className="plot-host hero-plot-host" />
           </div>
-          <div className="hero-live-footer">
-            <span>Binary data path</span>
-            <span>LOD by default</span>
-            <span>No native window</span>
+        </div>
+      </section>
+
+      <section id="developer-api" className="developer-section" aria-label="Notebook and web API">
+        <div className="section-copy developer-copy">
+          <p className="eyebrow">Minimal API, no global state</p>
+          <h2>One plotting model for notebooks and web apps.</h2>
+          <p>
+            The public surface is intentionally small: create a plot, attach typed
+            arrays, update handles in place, and let the WASM core manage interaction,
+            state, LOD, subplots, and export.
+          </p>
+        </div>
+        <div className="quickstart-grid">
+          <div className="quickstart-card" aria-label="Notebook quickstart">
+            <div className="quickstart-top">
+              <span>Python</span>
+              <strong>notebooks</strong>
+            </div>
+            <pre><code>{quickstart.join("\n")}</code></pre>
+          </div>
+          <div className="quickstart-card quickstart-card-alt" aria-label="Web quickstart">
+            <div className="quickstart-top">
+              <span>TypeScript</span>
+              <strong>web apps</strong>
+            </div>
+            <pre><code>{webstart.join("\n")}</code></pre>
           </div>
         </div>
       </section>
 
-      <section className="metrics" aria-live="polite">
-        {stats.map(([label, value]) => (
+      <section className="proof-strip" aria-label="Performance proof points">
+        {proofPoints.map(([value, label]) => (
           <div key={label}>
+            <strong>{value}</strong>
             <span>{label}</span>
+          </div>
+        ))}
+        {stats.map(([label, value]) => (
+          <div key={label}>
             <strong>{value}</strong>
+            <span>{label}</span>
           </div>
         ))}
         <div>
-          <span>Mode</span>
           <strong id="mode">initializing</strong>
+          <span>runtime status</span>
         </div>
         <div>
-          <span>Gallery</span>
-          <strong>{examples.length} lazy plots</strong>
-        </div>
-        <div>
-          <span>Last frame</span>
           <strong id="frame-ms">-- ms</strong>
+          <span>last frame</span>
+        </div>
+      </section>
+
+      <section id="why" className="principles-section">
+        <div className="section-copy">
+          <p className="eyebrow">Why this architecture</p>
+          <h2>Designed around the expensive parts of plotting.</h2>
+          <p>
+            The Python layer validates and transfers buffers. The browser view owns the
+            canvas lifecycle. The WASM core owns plot state, LOD, and ImPlot rendering.
+          </p>
+        </div>
+        <div className="principle-grid">
+          {principles.map((item, index) => (
+            <article key={item.title} className="principle-card">
+              <span>{String(index + 1).padStart(2, "0")}</span>
+              <h3>{item.title}</h3>
+              <p>{item.text}</p>
+            </article>
+          ))}
         </div>
       </section>
 
       <section id="command-center" className="command-center" aria-label="Interactive API command center">
-        <div className="command-copy">
-          <p className="eyebrow">Command Center</p>
-          <h2>Drive real WASM plots from the page.</h2>
+        <div className="section-copy command-copy">
+          <p className="eyebrow">Live API surface</p>
+          <h2>Operate the examples from one control panel.</h2>
           <p>
-            These controls load the target canvas, scroll it into view, and call the same
-            public APIs available from notebook widgets and web apps.
+            These buttons load the target canvas, scroll it into view, and call the same
+            public APIs available in notebooks and web apps.
           </p>
           <p id="feature-status" className="feature-status">
             Pick an action. The app will load the matching example and report the result here.
@@ -220,8 +299,8 @@ export default function Page() {
         <div className="command-stack">
           <section className="control-panel" aria-label="Global demo controls">
             <div className="control-copy">
-              <span>Live Controls</span>
-              <strong>Operate loaded plots</strong>
+              <span>Global controls</span>
+              <strong>Loaded plots</strong>
             </div>
             <div className="toolbar">
               <button id="update-data" type="button" data-label="data">Update Data</button>
@@ -262,21 +341,22 @@ export default function Page() {
 
       <section className="info-grid" aria-label="Usage notes and documentation">
         <section className="notes-panel">
-          <strong>Interaction checklist:</strong> examples lazy-load as they approach the
-          viewport and offscreen canvases are released to keep WebGL contexts bounded.
-          Once loaded, left-drag pans, wheel zooms, scroll over axes zooms that axis,
-          right-click opens ImPlot menus, right-drag box-select/box-zoom follows ImPlot
-          behavior, and double-click autofits.
+          <p className="eyebrow">Interaction checklist</p>
+          <p>
+            Examples lazy-load near the viewport and offscreen canvases are released to
+            keep WebGL contexts bounded. Once loaded, left-drag pans, wheel zooms,
+            right-click opens ImPlot menus, right-drag box-select/box-zoom follows
+            ImPlot behavior, and double-click autofits.
+          </p>
         </section>
 
         <section className="resource-panel" aria-label="Documentation and AI-readable resources">
           <div>
             <p className="eyebrow">Documentation</p>
-            <h2>Human-readable and agent-readable guides.</h2>
+            <h2>Guides for users, agents, and web integrations.</h2>
             <p>
-              These links make the project easier to classify for users, search engines,
-              coding assistants, and retrieval-augmented agents looking for fast notebook
-              plotting, ImPlot in Jupyter, WASM plotting, and large-data visualization.
+              Direct resources for fast notebook plotting, million-point visualization,
+              web app integration, and LLM/search positioning.
             </p>
           </div>
           <div className="resource-links">
@@ -288,12 +368,14 @@ export default function Page() {
       </section>
 
       <section id="examples" className="examples-heading">
-        <p className="eyebrow">Examples Gallery</p>
-        <h2>Every supported plot primitive, grouped like release documentation.</h2>
-        <p>
-          Scroll through lazy-loaded canvases to verify independent WASM sessions,
-          lifecycle cleanup, interaction primitives, and colormap propagation.
-        </p>
+        <div className="section-copy">
+          <p className="eyebrow">Examples gallery</p>
+          <h2>Coverage across ImPlot-style primitives.</h2>
+          <p>
+            Each canvas is an independent WASM session. Scroll to lazy-load examples and
+            verify lifecycle cleanup, interactions, subplots, colormaps, and exports.
+          </p>
+        </div>
         <div className="example-tabs" aria-label="Example categories">
           {exampleSections.map((section) => (
             <span key={section}>{section}</span>