Lorem ipsum, in motion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. A little structure, a little movement. Sed posuere consectetur est at lobortis; sometimes the interesting part is what happens between the lines.

This is a sample post, not an announcement. It exists to try out the shape of the blog: long paragraphs, short notes, code, mathematics, and things that move.

First, a few words

Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Aenean eu leo quam.

A small rule, repeated, can become something surprisingly complicated.

Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. For something less hypothetical, take a look at Wingman, or return to the math studies.

A small piece of code

Two oscillations are enough to draw a Lissajous curve. Change their frequencies or the phase offset and the shape changes with them.

type Point = { x: number; y: number }

function lissajous(t: number, phase = Math.PI / 4): Point {
  return {
    x: Math.sin(3 * t + phase),
    y: Math.sin(2 * t),
  }
}

const points = Array.from({ length: 360 }, (_, i) =>
  lissajous((i / 360) * Math.PI * 2),
)

Lorem ipsum dolor sit amet. The phase parameter is a small change with a big visual effect; Math.sin() does most of the work.

Give it a little space

.study {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  color: var(--accent);
}

The same idea, written as math

For a point traveling around a circle, $x^2 + y^2 = r^2$. Couple two periodic signals instead, and the path becomes:

$$\begin{aligned} x(t) &= A\sin(at + \delta) \\ y(t) &= B\sin(bt) \end{aligned}$$

Here $A$ and $B$ set the scale, $a$ and $b$ set the frequencies, and $\delta$ sets their phase difference. Integer frequency ratios produce closed curves.

Another way to build a shape is to add simpler signals. A finite Fourier sum approximates a square wave:

$$f_N(t) = \frac{4}{\pi}\sum_{k=0}^{N-1} \frac{\sin\big((2k+1)t\big)}{2k+1}$$

Pellentesque ornare sem lacinia quam venenatis vestibulum. A few terms make a rough outline; more terms refine it. The little overshoot near each jump is part of the story, not a rendering error.

Let it move

Six small studies, each built from a different rule. Click a tile to pause it; click again to resume. With reduced motion enabled, each becomes a still.

Gradient descent follows a loss landscape toward a minimum, using momentum to carry it through each correction—a method used to train machine-learning models. Phyllotaxis arranges points at the golden angle. The interference study adds two wave sources, while the Fourier series adds rotating vectors to trace a waveform. Delaunay triangulation connects drifting points into triangles whose edges flip as the points move. The three-body study follows three equal masses under Newtonian gravity, tracing the periodic figure-eight orbit with fading trails.

Different rules, different results

Study	Ingredients	What changes
Gradient descent	Loss gradients and momentum	A path toward a minimum
Phyllotaxis	The golden angle	Radial pulses
Interference	Two wave sources	Peaks and troughs
Fourier series	Rotating vectors	A traveling waveform
Delaunay triangulation	Points and empty circumcircles	Triangle connections
Three-body problem	Three equal masses and Newtonian gravity	A periodic figure-eight orbit

Notes in the margin

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Some things to keep in mind:

• Keep the rule simple enough to understand.
• Leave enough empty space to see what it does.
• Make motion optional, not a prerequisite for reading.

And a short sequence:

1. Pick a relationship.
2. Draw it once.
3. Change one variable.
4. See what surprises you.

One more small detail

This post is MDX: ordinary Markdown with the option to embed interactive components. The equations are rendered at build time; only the moving studies need client-side JavaScript.

---

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. That’s the whole specimen: a few words, a few rules, and a little motion.