Blog · October 1, 2026

Demo: Interactive Research Web Design

A self-contained tour of responsive layouts, mathematics, code, and interactive research figures.

This sample collects the main presentation and interaction patterns demonstrated by Clarity, adapted as a small, self-contained example. Everything interactive here is implemented in this repository, and all of the visuals are drawn locally.

Containers and responsive grids

Use a restrained reading column for prose, then widen a figure when it needs room. These panels show three width choices; resize the page to see them adapt.

Reading widthFor paragraphs and equations

Figure widthFor diagrams and comparisons

Wide widthFor galleries and dashboards

A two-column layout can pair text and a figure. On narrow screens it becomes one column.

Problem

Describe the setting and the question in a compact card. The layout keeps the prose comfortable to read.

Observation

Use a tinted panel to call attention to an assumption, observation, or important result.

Figure 1. A responsive vector diagram remains crisp at different display sizes.

Inspect Analyse Highlight

Mathematics

Inline notation such as $y = a x + b$ can sit within a sentence. The display below uses MathML, which the browser lays out directly without a remote math service.

L_{toy} (θ) = \frac{1}{n} \sum_{i = 1}^{n} {(y_{i} - f (x_{i}; θ))}^{2}

Code with copy and syntax highlighting

Inline code works for short commands such as python fit_model.py. The example below has a local copy button and lightweight highlighting for the displayed Python snippet.

python · least_squares.py

def loss(predictions, targets):
    # Mean squared error
    residuals = predictions - targets
    return (residuals ** 2).mean()

Striped tables

Alternating row shading makes it easier to scan values across a wide table.

Method	Width	Depth	Step size	Note
Baseline	128	2	0.010	Reference
Variant A	256	4	0.005	Wider model
Variant B	256	6	0.002	Deeper model
Variant C	512	4	0.001	Large batch

Slide and auto slideshow displays

The dot controls switch between related visual panels. The second gallery also advances automatically; its arrows allow manual navigation, and hovering pauses the timer.

01Structure

Panel one · structure

01QuestionSet up the problem

02MethodShow the approach

03ResultHighlight the result

04ContextExplain what follows

The gallery advances every few seconds. Use the arrows, or hover over it to pause.

Selection display

A selection control can update a figure to illustrate different conditions. Choose a palette to change the locally drawn visual.

Visual theme

Ocean theme selected.

Before-and-after comparison

Drag the handle or use the range control to compare the same locally drawn graphic in two color treatments.

BaselineUpdated result

Playback controls

This locally drawn animation demonstrates the same pause, resume, speed, and reset controls as a video player, without loading a remote video file.

1×

Data plots and visualisation

A plot can be saved as an SVG so it stays sharp when resized. This small local SVG includes labelled axes, a grid, and two series.

Method AMethod B

The visual and interaction examples are original, lightweight implementations inspired by the patterns shown in Clarity. They do not use Clarity’s source files or assets at runtime.