Test page

Models, charts, equations, code, and everyday interface elements. Try each example, inspect its source, and switch boards to compare styles.

Component documentation →

3D model

Static view of Torus knot — 3D model · glTF 2.0
Torus knot
A (2, 3) torus knot. Drag to orbit, scroll to zoom, or use the camera buttons. The shape is a real, downloadable GLB.

Model source

example.astroastro

---
import AlkModel from '@alkemist/ui/AlkModel.astro';
---

<AlkModel
  src="/test/torus-knot.glb"
  poster="/test/torus-knot.svg"
  title="Torus knot"
  description="A (2, 3) torus knot. Drag to orbit or use the camera buttons."
/>

Component reference →Download GLB ↓Download poster ↓

Palette

The exact same colors on #eee and #111. Switch the board in the header; the ink never changes.

Whiteboard / #eeeeee

Cobalt#1982f2

Cyan#158eab

Teal#199287

Fern#029828

Ochre#a67c01

Vermilion#e25312

Rose#e24a7a

Violet#a464e3

Blackboard / #111111

Cobalt#1982f2

Cyan#158eab

Teal#199287

Fern#029828

Ochre#a67c01

Vermilion#e25312

Rose#e24a7a

Violet#a464e3

Keep the color. Change the surface.

Download palette JSON ↗

Colored marks and large handwritten notes contrast against both boards. Small text stays neutral. Read the palette rules →

Math

Inline notation, display equations, matrices, and aligned derivations. Math is typeset at build time.

e^{i\pi} + 1 = 0

Euler’s identity

Fourier transform

\widehat{f}(\xi) = \int_{-\infty}^{\infty} f(x)\,e^{-2\pi i x\xi}\,dx

The Fourier transform

Move from position to frequency. A new view can reveal a simpler structure.

Damped oscillator

\frac{d}{dt}\begin{bmatrix}x\\v\end{bmatrix}=\begin{bmatrix}0&1\\-\omega^2&-2\zeta\omega\end{bmatrix}\begin{bmatrix}x\\v\end{bmatrix}

A damped harmonic oscillator

Position and velocity evolve together. The chart below follows a synthetic damped signal.

Proposition

Conservation of energy

For an undamped oscillator with unit mass, $\ddot{x}=-\omega^2x$ , total energy is constant.

\begin{aligned}E &= \tfrac12\dot{x}^{\,2}+\tfrac12\omega^2 x^2\\[4pt]\frac{dE}{dt}&=\dot{x}(\ddot{x}+\omega^2x)=0.\end{aligned}

Proof by differentiation

□

Equation source

example.astroastro

---
import AlkMath from '@alkemist/ui/AlkMath.astro';
---

<AlkMath tex={String.raw`e^{i\pi} + 1 = 0`} label="Euler’s identity" />

Component reference →

Charts

Hover for values. Zoom into a signal. Open the data table. Every chart below reads a local CSV, with grid lines on by default.

Synthetic dataset · line

Damped oscillation

Synthetic oscillator: ω₀ = 2 rad/s, ζ = 0.12; x(0) = 1 m, v(0) = 0.

CSV

Shift + scroll to zoom · drag to pan

Data table

The table loads alongside the chart.

Line chart source

example.astroastro

---
import AlkChart from '@alkemist/ui/AlkChart.astro';
---

<AlkChart
  src="/test/oscillation.csv"
  type="line"
  x="time"
  y="position"
  title="Damped oscillation"
  description="Synthetic oscillator: ω₀ = 2 rad/s, ζ = 0.12; x(0) = 1 m, v(0) = 0."
  xLabel="Time (s)"
  yLabel="Position (m)"
  height={340}
  sample
/>

Component reference →Download CSV ↓

Shift + scroll to zoom. ↗

Synthetic dataset · bar

Bar chart

Invented component counts, with a stable ink for each category.

CSV

Data table

The table loads alongside the chart.

Bar chart source

example.astroastro

---
import AlkChart from '@alkemist/ui/AlkChart.astro';
---

<AlkChart
  src="/test/materials.csv"
  type="bar"
  x="material"
  y="value"
  color="material"
  title="Bar chart"
  description="Invented component counts, with a stable ink for each category."
  xLabel="Component"
  yLabel="Count"
  height={280}
  sample
/>

Component reference →Download CSV ↓

Synthetic dataset · donut

Donut chart

The same counts as shares. Labels and a table keep color from carrying the explanation alone.

CSV

Data table

The table loads alongside the chart.

Donut chart source

example.astroastro

---
import AlkChart from '@alkemist/ui/AlkChart.astro';
---

<AlkChart
  src="/test/materials.csv"
  type="donut"
  x="material"
  y="value"
  color="material"
  title="Donut chart"
  description="The same counts as shares. Labels and a table keep color from carrying the explanation alone."
  yLabel="Count"
  height={280}
  sample
/>

Component reference →Download CSV ↓

Synthetic dataset · scatter

Phase portrait

The signal and its analytic derivative spiral toward rest.

CSV

Shift + scroll to zoom · drag to pan

Data table

The table loads alongside the chart.

Scatter chart source

example.astroastro

---
import AlkChart from '@alkemist/ui/AlkChart.astro';
---

<AlkChart
  src="/test/oscillation.csv"
  type="scatter"
  x="position"
  y="velocity"
  title="Phase portrait"
  description="The signal and its analytic derivative spiral toward rest."
  xLabel="Position (m)"
  yLabel="Velocity (m/s)"
  ink="rose"
  height={280}
  sample
/>

Component reference →Download CSV ↓

Synthetic dataset · heatmap

Heatmap

625 synthetic samples of cos(1.4x) sin(1.4y) exp(−(x² + y²)/8). A continuous cobalt scale shows ordered values.

CSV

Data table

The table loads alongside the chart.

Heatmap chart source

example.astroastro

---
import AlkChart from '@alkemist/ui/AlkChart.astro';
---

<AlkChart
  src="/test/field.csv"
  type="heatmap"
  x="x"
  y="y"
  value="value"
  valueLabel="Field value"
  title="Heatmap"
  description="625 synthetic samples of cos(1.4x) sin(1.4y) exp(−(x² + y²)/8). A continuous cobalt scale shows ordered values."
  xLabel="x (dimensionless)"
  yLabel="y (dimensionless)"
  height={280}
  sample
/>

Component reference →Download CSV ↓

Synthetic dataset · pie

Pie chart

The same eight component counts as a pie, for comparing the pie and donut treatments.

CSV

Data table

The table loads alongside the chart.

Pie chart source

example.astroastro

---
import AlkChart from '@alkemist/ui/AlkChart.astro';
---

<AlkChart
  src="/test/materials.csv"
  type="pie"
  x="material"
  y="value"
  color="material"
  colorLabel="Component"
  title="Pie chart"
  description="The same eight component counts as a pie, for comparing the pie and donut treatments."
  yLabel="Count"
  height={300}
  sample
/>

Component reference →Download CSV ↓

Code

Four languages in Ubuntu Mono, with line numbers, highlighted lines, and a copy button. The code surface stays dark on both boards.

integrate.tstypescript

type State = { position: number; velocity: number };

// Semi-implicit Euler: velocity first, then position.
export function step(s: State, dt: number, k = 1): State {
  const velocity = s.velocity - k * s.position * dt;
  return { velocity, position: s.position + velocity * dt };
}

experiment.pypython

from math import cos, exp

def displacement(t: float, damping: float = 0.18) -> float:
    """A synthetic damped signal, in metres."""
    return exp(-damping * t) * cos(2.4 * t)

samples = [(t / 25, displacement(t / 25)) for t in range(301)]

state.rsrust

#[derive(Clone, Copy, Debug)]
struct State { position: f64, velocity: f64 }

impl State {
    fn energy(self, stiffness: f64) -> f64 {
        0.5 * (self.velocity.powi(2) + stiffness * self.position.powi(2))
    }
}

contours.fragglsl

// Isolines of two interfering waves.
float field = sin(uv.x * frequency + phase)
            + cos(uv.y * frequency - phase);
float contour = 1.0 - smoothstep(0.0, 0.08, abs(sin(field * 3.0)));
vec3 ink = mix(cobalt, violet, 0.5 + 0.25 * field);
outColor = vec4(mix(board, ink, contour), 1.0);

Use the arrow keys to move between languages. The full source copies without line numbers.

Code component source

example.astroastro

---
import AlkCode from '@alkemist/ui/AlkCode.astro';

const code = `type State = { position: number; velocity: number };

// Semi-implicit Euler: velocity first, then position.
export function step(s: State, dt: number, k = 1): State {
  const velocity = s.velocity - k * s.position * dt;
  return { velocity, position: s.position + velocity * dt };
}`;
---

<AlkCode
  code={code}
  lang="typescript"
  title="integrate.ts"
  highlightLines={[4, 5]}
/>

Component reference →

Shaders, diagrams, and images

A live interference shader, an accessible SVG diagram, and an image with a caption and downloadable source.

Shader · two wave sources

Two-source interference

GLSL

Frequency 9.0Source angle 24°

Shader source

example.astroastro

---
import AlkShader from '@alkemist/ui/AlkShader.astro';
---

<AlkShader title="Two-source interference" frequency={9} angle={24} />

Component reference →

Drawing the loop · accessible SVG, selectable text, the shared inks.

An illustrated torus knot rendered as a flowing loop with violet and cobalt strokes on a black board. — The model also has a static SVG poster. An image remains useful before the interactive viewer loads.

Image and caption

This SVG is the model viewer’s static poster. It remains available before the 3D renderer loads.

Download the actual model ↗

Writing

This section is authored in MDX. Tables, footnotes, task lists, quotations, inline math, and semantic HTML share the same theme.

A notebook is more than a paragraph.

Good research leaves a trail: an observation, a question, a source, and enough detail to try it again. Write position += velocity * dt, add an equation like $E = mc^2$ , and keep the explanation beside the experiment.

The most useful figure is the one you can ask another question of.

— A working principle for this workbench

A small experiment

Choose an initial condition.
Change one parameter at a time.
Record the result, including the surprise.

Keep units in the axis labels.
Make source data downloadable.
Repeat with a different initial condition.

Quantity	Symbol	Unit	Example
Position	$x$	metre	0.42
Velocity	$v$	metre / second	−0.18
Energy	$E$	joule	2.70

The oscillator here is synthetic, not a measurement.¹

Small details matter, too

Water is H₂O. A square metre is m². GPU work should be optional. A surprising result deserves a second look. Correct a claim with ~~always stable~~ stable under the stated step-size bound.

Use Tab to move between controls. No special pointing device required.

What does “synthetic” mean here?

The values come from a deterministic formula. They test presentation and interaction; they are not evidence about a physical system.

The CSV fixtures are generated from version-controlled scripts and shipped alongside each chart. ↩

Forms and controls

Inputs, a select menu, checkboxes, a range, validation, and a dialog. Changes update the preview in this browser.

Local specimen

Untitled experiment

Mathematics · 65% confidence

Add a working note and preview the card.

Source data · Handwritten annotations

Confidence preview65%

The preview stays in this browser. Nothing is submitted to a server.

Why include ordinary form elements?

A theme is only useful when the quiet details work too: a long label, a selected option, a keyboard focus ring, a helpful result.

A disabled state

Use an example

Open its source above, copy the snippet, and replace the demo content.

Documentation →How this page was built →Back to top ↑

Test page

3D model

Torus knot

Palette

Math

Fourier transform

Damped oscillator

Conservation of energy

Charts

Damped oscillation

Bar chart

Donut chart

Phase portrait

Heatmap

Pie chart

Code

Shaders, diagrams, and images

Two-source interference

Image and caption

Writing

A notebook is more than a paragraph.

A small experiment

Small details matter, too

Footnotes

Forms and controls

Untitled experiment

Use an example