Research Note Demo

Interactive Figure 1

Click the canvas to add a shape, drag a shape to throw it, and adjust the controls to change the simulation.

Physics sandbox

Click empty space to spawn. Drag to throw.

Gravity

Original browser-based physics sandbox.

Animated Figure

This page can present motion directly in the browser without a separate application or server.

A lightweight CSS animation placeholder.

Interactive Figure 2

Move the slider to explore a tangent line along a smooth curve.

Position

Interactive Figure 3

Drag any node to reorganize this small force-directed graph.

Static Image

A static visual can sit beside interactive figures in the same reading flow.

From text to spans

Original CSS-based static illustration.

Example Math

Inline math such as $p(y \mid x)$ and display math render directly in the article.

$$L = -\sum_{i=1}^{n} \log p(y_i \mid x_i; \theta)$$

Example Code

Code blocks can explain the idea next to its interactive counterpart.

function highlightSpans(tokens, scores) {
  return tokens.map((token, index) => ({
    token,
    score: scores[index],
    highlighted: scores[index] > 0.5
  }));
}

Example Citations

This placeholder keeps academic details close to the interactive material.

@misc{interactive-demo,
  title = {Research Note Demo},
  author = {Phu Gia Hoang},
  year = {2026}
}