Founder Letter with Margin Notes About Block for React

The paragraphs are PARAGRAPHS at the top of the file. Each has an id, the text of the paragraph and the note that sits beside it. The sign-off name is SIGNER. Add or remove paragraphs freely: each one draws its own row and its own note. Year 3 is written in the sheet, so change that line if your count is different.

The heading is the section's only h2. The greeting is an h3. Each paragraph is a p, and its note is an aside that follows it, so the note is read with the paragraph it belongs to. The drawn signature is decorative. The printed name and the title "Founder, Parchly" are the accessible text. The lines are drawn by a layer hidden from assistive technology.

Below the lg breakpoint each note sits under its paragraph, ruled off with a short line. From lg the notes share one column at the end of the sheet, and that column's rule runs the height of the letter, including the date and the signature.

The signature is the Signature component, an SVG with two strokes. Swap the paths, or remove the component and leave the printed name. The name is not taken from the drawing.

The sheet uses the width of the column, the serif paragraphs wrap, and each note wraps under its paragraph. The signature stays on one line with the name. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the note's rule moves to the other side. The signature is a drawing of a name, so it does not mirror.

The header fades up once on load. The letter itself does not animate, because it runs past the first screen. With reduced motion the entrance is off. Nothing loops and nothing plays on its own.