Hello World

2026-04-03

This post demonstrates the three types of interactive components you can embed. Everything runs client-side — no backend, no server-side state.

Math

Inline: $\mathcal{L}(\theta) = -\frac{1}{N}\sum_{i} \log p_\theta(y_i \mid x_i)$

Display:

$$\text{Attention}(Q,K,V) = \text{softmax}\!\left(\frac{QK^\top}{\sqrt{d_k}}\right)V$$

Training curves

Loss over training steps. Hover a point to see exact values. Classic overfit signature: train loss keeps falling, val loss bottoms out around step 700.

3D cube

Drag to orbit the camera. The cube auto-rotates with a smooth ease-in / ease-out cycle (still → fast → still → pause, repeating). Built with Three.js.

Molecule viewer

Three.js + SSAOPass ambient occlusion. CPK color scheme, Van der Waals radii. Drag to orbit; auto-rotates when idle.

waterbenzene

Code

Syntax highlighting via Shiki, dual light/dark theme:

def attention(q, k, v, mask=None):
    d_k = q.size(-1)
    scores = (q @ k.transpose(-2, -1)) / d_k ** 0.5
    if mask is not None:
        scores = scores.masked_fill(mask == 0, float('-inf'))
    return scores.softmax(dim=-1) @ v

type Atom = { symbol: string; x: number; y: number; z: number };

function parseXYZ(src: string): Atom[] {
  return src.trim().split('\n').slice(2).map(line => {
    const [symbol, x, y, z] = line.trim().split(/\s+/);
    return { symbol, x: +x, y: +y, z: +z };
  });
}