research-designer
15 specs · for researchers & engineers

Research pages that aren't static.

No time to design it. Too proud to ship it ugly.

Self-contained specs and live demos for the page genres researchers actually build — project pages, experiment dashboards, eval interfaces, posters, plus a set of static dashboard & research-page specs for when you don't need motion.

Real interactive 3D, live charts, and scroll-driven figures — reached for only when they serve comprehension, never as decoration. License-clean, single-file, no build step.

research-project-page demo preview
Interactive

Drag a real 3D reconstruction, scrub a before/after slider — the teaser is the result, not a screenshot.

experiment-dashboard demo preview
research-poster demo preview
Live

Charts draw in, metrics count up, figures reveal on scroll — motion that tracks the work.

01 · Pages

Pages that read like a result.

Paper / project landings and scroll-driven data stories. The interactive archetype shares one fictional computer-vision project (WhiskerSplat) so the demos read as one body of work.

research-project-page demo preview

research-project-page

Tier 2 · three.js

Paper / project landing: interactive 3D point-cloud teaser, before/after slider, method figure, results tables, copy-able BibTeX.

scrolly-data demo preview

scrolly-data

Static spec

Scroll-driven data essay — serif editorial voice, charts that build as you read, light reading surface.

02 · Dashboards

Boards you'd actually debug from.

Metrics, ablations, run comparison and monitoring UIs. Every chart datapoint is traceable to its source log line — hover a point and the tooltip shows the exact file:line it came from.

The interactive board is Tier 1; the rest are static specs adopted from the theme-park.md vocabulary for the same surfaces without motion.

experiment-dashboard demo preview

experiment-dashboard

Tier 1 · Motion

ML experiment board: multi-run training curves, validation metrics, comparison bars, PSNR-vs-latency scatter, sortable runs table. Hover any point for its source log line.

lab-console demo preview

lab-console

Static spec

Light engineering console — dense run tables, live metrics, sparklines; each row traceable to its run log.

aurora demo preview

aurora

Static spec

Light analytics dashboard with a dark sidebar — donut + bar viz, a single purple accent.

graphite demo preview

graphite

Static spec

Matte charcoal industrial console — color only in the data, an ink-in reveal on load.

marine-grid demo preview

marine-grid

Static spec

Square-corner corporate sensor board — deep marine blue, hairline panels, tabular readouts.

lumen demo preview

lumen

Static spec

Navy instrument panel — radial gauges, uniform-ramp heatmaps, mono readouts.

nocturne demo preview

nocturne

Static spec

Dense slate night-ops board — frost accent, packed 12-column panels.

pulse demo preview

pulse

Static spec

Consumer-soft monitor — one blue, springy count-ups, large rounded cards.

03 · Annotation & posters

Collect labels. Print a poster.

A keyboard-first human-verification interface and a fixed-aspect poster that renders on screen and prints to a real PDF — two surfaces every lab eventually needs.

eval-interface demo preview

eval-interface

Tier 0 · keyboard

MTurk-style annotation tool: A/B preference and Likert quality, worked instructions, keyboard-first flow, attention checks, completion summary.

research-poster demo preview

research-poster

Tier 0 · print

Conference poster on a fixed A0 canvas that scales to fit on screen and prints to a real PDF — columns, panels, figures, QR footer.

04 · Showcase

Motion & 3D character studies.

Pure technique demos that show the ethos in the abstract. Borrow their moves inside any archetype.

liquid-chrome demo preview

liquid-chrome

Tier 2 · three.js

Near-black premium canvas with a real procedural chrome torus-knot lit by a generated environment.

prism-glass demo preview

prism-glass

Tier 2 · shader

Frosted-glass panels floating over a living fbm-aurora shader — glass that reads as real glass.

06 · Approach

Three-tier progressive enhancement.

Every spec declares the highest tier it uses, and reaches up only when motion or 3D is core to the task — a dashboard's character is its data; a poster must print.

Tier 0

Native CSS scroll-driven animations, View Transitions, WAAPI. Zero dependencies, compositor-smooth.

reveals · transitions · print

Tier 1

Motion (default) or GSAP when needed. Count-ups, chart draw-in, springs, scroll-pinned sequences.

one motion lib per demo

Tier 2

three.js, model-viewer, OGL. Genuine 3D objects, materials, shader fields — always with a static fallback.

WebGL + fallback