Margin Note

Written for the variant you picked above: Paper

Build review comments in the margin of an article draft: a Newsreader headline and two paragraphs with three highlighted phrases (one wrapping over two lines), each tied to a comment card from a colleague in a margin column on the right. Phrases: a <mark> per comment, focusable, with aria-describedby pointing at its card. At rest it carries a soft band of tint over the lower 55% of the letters (linear-gradient, box-decoration-break: clone so it wraps cleanly); when its pair is active the band fills the whole line with a 2px accent underline. A small superscript number in the accent colour follows each phrase. Margin (container 700px or wider): a 15.5rem column, 56px from the text. Each card wants its top 10px above its phrase's first line; cards are stacked in that order so none overlap (14px apart), moving to new places with a 300ms ease. A connector SVG (behind the text) draws, for each pair, a dot at the end of the phrase's last line and a curve from there to the card's left edge 22px below its top — level at both ends, curving between — dashed and faint at rest. Positions are measured from the live layout (getClientRects, ResizeObserver, fonts.ready). Cards: 12px radius, hairline border, author with a numbered accent badge, a timestamp and the comment; focusable, with an accessible name ("Comment 2 by Tomás"). Linking: pointing at or focusing either a phrase or its card makes the pair active — the phrase's band fills, its connector turns solid accent and thicker, the card takes an accent border, nudges 4px toward the text and lifts with a shadow — while the other connectors fade to 35% and other cards to 60%. Narrow (under 700px): connectors are hidden and the cards follow the text as a list; the matching numbers on phrases and cards keep the pairs together, and hovering or focusing still highlights both. Selected variant — Paper (paper): Palette for this theme (Paper): --accent #e8a10b; --card #ffffff; --focus #2457d6; --ink #1c1b1f; --line rgb(28 27 31 / 0.12); --muted rgb(28 27 31 / 0.55); --tint rgb(255 196 61 / 0.32); --wire rgb(28 27 31 / 0.2). Treat these as the root colour tokens, one value per role, and name them to suit your code. Select it with the theme option set to "paper". Keep every dimension, spacing value, state and motion from the brief unchanged, and keep text at 4.5:1 contrast or better on these surfaces. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Point at or tab to a phrase or a comment to light up the pair. Motion: Cards settle into place (300ms); the active pair's connector, band and card change over 200ms, the card nudging toward the text with a spring. Accessibility: Every phrase is focusable and described by its comment card; cards are focusable with an accessible name; pairs are also tied by visible numbers, so nothing depends on the connectors alone. Focus rings are visible on both. Responsive behavior: Below a 700px container the margin becomes a list after the text and the connectors disappear; above it, positions follow every rewrap. Touch: Tapping a phrase focuses it and highlights its comment. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Point at or tab to a phrase or a comment to light up the pair.

Motion

Cards settle into place (300ms); the active pair's connector, band and card change over 200ms, the card nudging toward the text with a spring.

Accessibility

Every phrase is focusable and described by its comment card; cards are focusable with an accessible name; pairs are also tied by visible numbers, so nothing depends on the connectors alone. Focus rings are visible on both.

Responsive

Below a 700px container the margin becomes a list after the text and the connectors disappear; above it, positions follow every rewrap.

On touch

Tapping a phrase focuses it and highlights its comment.