Comment Thread

Create an animated comment thread. A block headed by a small monospace 'N comments' label, listing top-level comments and one indented reply. Each comment row: a 28px circular avatar with initials, a monospace username + timestamp, the comment text, and a small like button (heart + count) under the first comment. Entrance choreography: comments stream in top to bottom, each fading in while rising 12px over 0.45s with cubic-bezier(.22,1,.36,1), roughly 0.6-0.7s apart. The reply is indented by the avatar width and connected to its parent by a thin vertical connector line that draws itself (scaleY from 0, transform-origin top, 0.4s) just before the reply lands. About 0.6s after the thread settles, the first comment receives a like: the heart pops with a spring (stiffness 520, damping 18), fills with the accent color, and its count increments. Clicking a heart toggles it with the same pop. If new comments arrive live, push existing ones down with a layout animation rather than jumping. Accessibility: like buttons use aria-pressed and an aria-label like 'Like, 3 likes'; counts update via aria-live="polite". If prefers-reduced-motion is set, render the full thread instantly, already settled, with no animation. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.