GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

Comment Section UI: 9 Thread List Patterns

· Godrich · 9 items · 28 min read

Lists & tablesVanilla JSClickContent pipeline

The pixels a deleted comment used to fill become exactly how far the rows below rise, and reply indentation pulls its width from nothing but a depth count.

Reply Indent That Calculates Its Width From a Depth Count01 comment-thread-reply-indent-depth Reply Collapse That Springs to a Measured Height02 comment-thread-collapse-height-spring Sort Transition That Slides by a Calculated Distance From Its Old Position03 comment-thread-sort-reorder-flip Like Count That Rolls the Difference From Its Previous Value04 comment-thread-like-count-elastic-pop Skeleton Loading Whose Shimmer Delay Is Calculated From Row Order05 comment-thread-skeleton-shimmer-stagger Pinned-Comment Highlight That Fades by Time Since It Was Pinned06 comment-thread-pinned-highlight-decay Delete Shift Where Comments Below Rise by the Deleted Row's Height07 comment-thread-delete-collapse-shift Unread Divider Whose Position Is Calculated Against the Last Visit Time08 comment-thread-unread-divider-position Hero Scene Combining Several Calculations Into One Comment Panel09 comment-thread-hero-panel-scene

Auto-plays · click a tile to jump to its section · all nine in one zip

Comment Section UI: 9 Patterns That Calculate Depth, Height, and Time

Every build below answers one of three questions with a number instead of a guess: how deep is this reply, how tall is this block, and how long ago did that happen. Item 01 turns a depth count into an indent width the moment a reply renders. Items 02 and 07 measure pixel heights — one to spring a panel open by exactly that much, the other to hand the same distance to the rows below a deleted comment. Item 03 measures the vertical gap between a comment's old and new position when the sort flips, item 04 measures the numeric gap between an old and new like count, and items 06 and 08 turn elapsed minutes into a highlight strength and a divider position. Item 05 covers the moment before any of this exists — the skeleton that stands in while comments load — and item 09 runs the depth, like, and delete calculations together on one panel. Reading them in order follows a comment list's actual life: depth, expand, sort, react, load, age, delete, done.

Code by Pattern

Each section below excerpts only the lines where the calculation happens; the full markup and styles sit in the archive under each demo. Commenter names and bodies are planted fake values, and nothing talks to a server.

01Reply Indent That Calculates Its Width From a Depth Count

Each reply's data-depth value is multiplied by REPLY_INDENT_STEP_PX and written into a CSS custom property, so layout gets its number once and the expand animation only spends transform and opacity on the guide line and the reply body. This suits a nested reply thread under a blog post. Item 01 moved across 11/23 captured frames at an average intensity of 65.5, with 5.2% cumulative area — small by design, since the only moving pieces are a thin vertical line and one reply body.

Reply Indent That Calculates Its Width From a Depth Count
Open in a new tab

01 · Reply Indent That Calculates Its Width From a Depth Count — Measured area 5.21% · moving frames 11/23Original by GODRICH · SCSS and React ship in the zip · See the password

REPLY_INDENT_STEP_PXcmt__guideopenGroup
<script>
(function () {
  // Technique: multiply each item's data-depth by REPLY_INDENT_STEP_PX to get the
  // indent width, then write it into a CSS custom property (layout only, not animated).
  // The expand animation only moves the guideline's scaleY and the reply body's
  // opacity/translateY -- two transform/opacity properties, nothing else.
  var REPLY_INDENT_STEP_PX = 24;

  var root = document.getElementById('cmtRoot');
  var list = document.getElementById('cmtList');
  var status = document.getElementById('cmtStatus');

  var items = list.querySelectorAll('.cmt__item[data-depth]');
  for (var i = 0; i < items.length; i += 1) {
    var depth = parseInt(items[i].getAttribute('data-depth'), 10) || 0;
    items[i].style.setProperty('--depth-indent', (depth * REPLY_INDENT_STEP_PX) + 'px');
  }

  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (reduce) root.classList.remove('is-demo');

  function groupParts(ulId) {
    var ul = document.getElementById(ulId);

02Reply Collapse That Springs to a Measured Height

The panel measures the real pixel height of the replies it is about to reveal and derives its expand duration from that measurement, then animates height through SPRING_SETTLE_EASING while the chevron rotates by the same progress and the card background pulses through a wider arc. Use it as the collapse toggle for a long reply thread. Item 02 recorded 74.9% cumulative area at an average intensity of 26.6 across 8/23 frames — the largest share of the nine, because the whole card repaints as the panel stretches behind it.

Reply Collapse That Springs to a Measured Height
Open in a new tab

02 · Reply Collapse That Springs to a Measured Height — Measured area 74.878% · moving frames 8/23Original by GODRICH · SCSS and React ship in the zip · See the password

SPRING_SETTLE_EASINGch__panelsetOpen
      inner.style.opacity = open ? '1' : '0';
      icon.style.transform = 'rotate(' + (open ? 180 : 0) + 'deg)';
      return;
    }
    // Calculation: the taller the panel's measured height, the longer the expand takes.
    var dur = Math.max(320, Math.min(680, 300 + target * 0.9));
    panelAnim = panel.animate(
      [{ height: from + 'px' }, { height: to + 'px' }],
      { duration: dur, delay: delayMs || 0, easing: SPRING_SETTLE_EASING, fill: 'forwards' }
    );
    innerAnim = inner.animate(
      [{ opacity: open ? 0 : 1 }, { opacity: open ? 1 : 0 }],
      { duration: Math.round(dur * 0.6), delay: delayMs || 0, easing: 'ease-out', fill: 'forwards' }
    );
    iconAnim = icon.animate(
      [{ transform: 'rotate(' + (open ? 0 : 180) + 'deg)' }, { transform: 'rotate(' + (open ? 180 : 0) + 'deg)' }],
      { duration: dur, delay: delayMs || 0, easing: SPRING_SETTLE_EASING, fill: 'forwards' }
    );
    // Calculation: across the same 0-to-1 (or reverse) expand progress, the whole panel
    // background shifts color too, propagating the value past the arrow icon and the
    // panel edge -- the reason the moved area below is so large.
    bgAnim = root.animate(
      [{ backgroundColor: '#231f28' }, { backgroundColor: '#2b3550' }, { backgroundColor: '#231f28' }],

03Sort Transition That Slides by a Calculated Distance From Its Old Position

Flipping the sort order calls sortedIds(), which either returns the newest-first order as-is or re-ranks the list by each comment's data-likes value, and the DOM is then reordered so every comment can travel to its new slot with one measured distance instead of a generic shuffle. Attach it to the toggle button for popular versus newest sort. Item 03 moved on 7/23 frames at an average intensity of 82.1, covering 21.9% cumulative area as the rows glide past each other.

Sort Transition That Slides by a Calculated Distance From Its Old Position
Open in a new tab

03 · Sort Transition That Slides by a Calculated Distance From Its Old Position — Measured area 21.874% · moving frames 7/23Original by GODRICH · SCSS and React ship in the zip · See the password

SORT_FLIP_DURATION_MSsrt__itemapplySort
  var SORT_FLIP_DURATION_MS = 320;

  var root = document.getElementById('srtRoot');
  var list = document.getElementById('srtList');
  var sortBtn = document.getElementById('srtSortBtn');
  var sortLabel = document.getElementById('srtSortLabel');
  var status = document.getElementById('srtStatus');

  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (reduce) root.classList.remove('is-demo');

  var byNewestOrder = ['c1', 'c2', 'c3', 'c4', 'c5'];
  var popular = false;

  function sortedIds() {
    if (!popular) return byNewestOrder.slice();
    var items = list.querySelectorAll('.srt__item');
    var arr = [];
    for (var i = 0; i < items.length; i += 1) arr.push(items[i]);
    arr.sort(function (a, b) { return parseInt(b.getAttribute('data-likes'), 10) - parseInt(a.getAttribute('data-likes'), 10); });
    return arr.map(function (el) { return el.getAttribute('data-id'); });
  }

04Like Count That Rolls the Difference From Its Previous Value

Pressing like computes the gap between the old and new count, and rollDigit() builds the incoming digit with createElement, parks it just outside the track, and rolls both digits by exactly that gap — the same function also reads diff to lengthen the roll for larger jumps. It belongs on a like button whose number changes often. Item 04 moved across 8/23 frames at an average intensity of 38.4, repainting 24.6% cumulative area.

Like Count That Rolls the Difference From Its Previous Value
Open in a new tab

04 · Like Count That Rolls the Difference From Its Previous Value — Measured area 24.637% · moving frames 8/23Original by GODRICH · SCSS and React ship in the zip · See the password

lk__digitTracklk__digitColrollDigit
  var liked = false;

  function rollDigit(col, newCh, diff, animate, delayMs) {
    var track = col.querySelector('.lk__digitTrack');
    var cur = track.querySelector('.lk__digit');
    if (cur.textContent === newCh) return;
    var next = document.createElement('span');
    next.className = 'lk__digit';
    next.textContent = newCh;
    next.style.transform = 'translateY(' + (diff > 0 ? '100%' : '-100%') + ')';
    track.appendChild(next);

    if (!animate || reduce) {
      cur.remove();
      next.style.transform = 'translateY(0)';
      return;
    }
    var dur = 260 + Math.min(200, Math.abs(diff) * 80);
    cur.animate(
      [{ transform: 'translateY(0)' }, { transform: 'translateY(' + (diff > 0 ? '-100%' : '100%') + ')' }],
      { duration: dur, delay: delayMs || 0, easing: 'cubic-bezier(.3,.7,.2,1)', fill: 'forwards' }
    );

05Skeleton Loading Whose Shimmer Delay Is Calculated From Row Order

While comments load, rowsInOrder() reads each row's data-row value and offsets its shimmer by SHIMMER_STAGGER_STEP_MS per position, so the sweep travels top to bottom in calculated steps rather than flashing everywhere at once — and a row whose real comment arrives cross-fades in place with its own skeleton. Use it for the first load of a comment list. Item 05 was the busiest of the nine after the hero scene, moving on 14/23 frames at an average intensity of 36.6 over 12.3% cumulative area.

Skeleton Loading Whose Shimmer Delay Is Calculated From Row Order
Open in a new tab

05 · Skeleton Loading Whose Shimmer Delay Is Calculated From Row Order — Measured area 12.333% · moving frames 14/23Original by GODRICH · SCSS and React ship in the zip · See the password

SHIMMER_STAGGER_STEP_MSskel__glarerowsInOrder
  // Each row's shimmer is offset by SHIMMER_STAGGER_STEP_MS, and the "real comment"
  // arrival is staggered in the same order -- each arriving row cross-fades with its
  // own skeleton, right where it stands.
  // glare is an absolutely-positioned highlight band that sweeps across the skeleton
  // with an infinite translateX loop.
  var SHIMMER_BASE_DELAY_MS = 200;
  var SHIMMER_STAGGER_STEP_MS = 140;
  var SWAP_BASE_DELAY_MS = 760;
  var SWAP_STAGGER_STEP_MS = 170;

  var root = document.getElementById('skelRoot');
  var list = document.getElementById('skelList');
  var replay = document.getElementById('skelReplay');
  var status = document.getElementById('skelStatus');

  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (reduce) root.classList.remove('is-demo');

  function rowsInOrder() {
    var items = list.querySelectorAll('.skel__item');
    var rows = [];
    for (var i = 0; i < items.length; i += 1) rows.push(items[i]);
    rows.sort(function (a, b) {
      return parseInt(a.getAttribute('data-row'), 10) - parseInt(b.getAttribute('data-row'), 10);

06Pinned-Comment Highlight That Fades by Time Since It Was Pinned

A virtual clock — no Date object anywhere in the file — feeds decayAt(), which normalizes elapsed time against DECAY_DURATION_MS and fades the highlight from PEAK_GLOW down toward SETTLED_GLOW along an exponential curve, stopping entirely once the threshold passes. Put it where an author's pinned comment sits. Item 06 is the quietest of the nine at an average intensity of 15.8, moving on 11/23 frames over 19.1% cumulative area — a slow fade is exactly what the effect asks for.

Pinned-Comment Highlight That Fades by Time Since It Was Pinned
Open in a new tab

06 · Pinned-Comment Highlight That Fades by Time Since It Was Pinned — Measured area 19.131% · moving frames 11/23Original by GODRICH · SCSS and React ship in the zip · See the password

DECAY_DURATION_MSpin__decayFilldecayAt
  // Highlight brightness and the left accent bar shrink in proportion up to
  // DECAY_DURATION_MS; past that they settle at SETTLED_TINT and the loop stops
  // (no further change). The virtual clock plays real seconds faster than 1:1,
  // scaled by VIRTUAL_CLOCK_SCALE.
  var DECAY_DURATION_MS = 1400;
  var VIRTUAL_CLOCK_SCALE = 1;
  var START_DELAY_MS = 220;
  var PEAK_GLOW = 0.55;
  var SETTLED_GLOW = 0.12;

  var root = document.getElementById('pinRoot');
  var item = document.getElementById('pinItem');
  var fill = document.getElementById('pinFill');
  var status = document.getElementById('pinStatus');

  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (reduce) root.classList.remove('is-demo');

  function decayAt(elapsedMs) {
    if (elapsedMs <= 0) return PEAK_GLOW;
    if (elapsedMs >= DECAY_DURATION_MS) return SETTLED_GLOW;
    var t = elapsedMs / DECAY_DURATION_MS;
    // Decay curve: starts fast and converges slowly (exponential decay normalized to 0..1).

07Delete Shift Where Comments Below Rise by the Deleted Row's Height

Deleting a comment measures the row's height and collapses it to zero while fading out, then shiftDuration() combines the gap with DELETE_SHIFT_SPRING_STIFFNESS to set how long the rows below take to spring up and fill the hole, with the SPRING_SETTLE_EASING curve overshooting past 1 before it settles. Wire it to the button that removes one's own comment. Item 07 recorded the highest average intensity of the nine at 94.3, moving on 11/23 frames over 31.4% cumulative area.

Delete Shift Where Comments Below Rise by the Deleted Row's Height
Open in a new tab

07 · Delete Shift Where Comments Below Rise by the Deleted Row's Height — Measured area 31.415% · moving frames 11/23Original by GODRICH · SCSS and React ship in the zip · See the password

DELETE_SHIFT_SPRING_STIFFNESSshiftDurationremoveRow
  // The lower the spring stiffness DELETE_SHIFT_SPRING_STIFFNESS, the longer the shift takes.
  var DELETE_SHIFT_SPRING_STIFFNESS = 220;

  // Same sample curve as $ease-lerp-settle (site/static/demo-tokens.scss) -- it overshoots
  // past 1 (up to 1.126) before settling back.
  var SPRING_SETTLE_EASING = 'linear(0.0, 0.051, 0.176, 0.341, 0.518, 0.685, 0.831, 0.947, 1.032, 1.087, 1.117, 1.126, 1.121, 1.105, 1.085, 1.062, 1.041, 1.022, 1.008, 0.997, 1)';

  var root = document.getElementById('delRoot');
  var list = document.getElementById('delList');
  var status = document.getElementById('delStatus');

  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (reduce) root.classList.remove('is-demo');

  function shiftDuration(gapPx) {
    // The higher the stiffness, the faster it settles. A bigger shift distance only adds a little time.
    return Math.round(60 + 100000 / DELETE_SHIFT_SPRING_STIFFNESS + Math.min(240, gapPx * 0.55));
  }

  function itemsAfter(id) {
    var all = list.querySelectorAll('.del__item');
    var seen = false;
    var after = [];

08Unread Divider Whose Position Is Calculated Against the Last Visit Time

Each comment carries a planted minutes-ago value — minAgoOf() reads it and no Date is involved — and findUnreadIndex() scans for the first row whose value falls under LAST_VISIT_MINUTES_AGO, which is exactly where insertDivider() places the boundary marker with createElement and textContent. Use it to mark new comments on a return visit. Item 08 moved on the fewest frames of the nine, 6/23, at an average intensity of 36.2 over 19.9% cumulative area.

Unread Divider Whose Position Is Calculated Against the Last Visit Time
Open in a new tab

08 · Unread Divider Whose Position Is Calculated Against the Last Visit Time — Measured area 19.872% · moving frames 6/23Original by GODRICH · SCSS and React ship in the zip · See the password

LAST_VISIT_MINUTES_AGOun__dividerfindUnreadIndex
  // Technique: compares each comment's "posted N minutes ago" value (a fake relative
  // value -- no Date used) against LAST_VISIT_MINUTES_AGO (minutes since the last visit)
  // to calculate the position of the first comment written after that visit. A divider
  // is inserted before the first row where minAgo < LAST_VISIT_MINUTES_AGO, then drops
  // in slightly from above and settles.
  var LAST_VISIT_MINUTES_AGO = 90;
  var NEW_ROW_HILITE_STAGGER_MS = 90;

  var root = document.getElementById('unRoot');
  var list = document.getElementById('unList');
  var status = document.getElementById('unStatus');

  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (reduce) root.classList.remove('is-demo');

  function minAgoOf(item) {
    return parseInt(item.getAttribute('data-min-ago'), 10);
  }

  function findUnreadIndex() {
    var items = list.querySelectorAll('.un__item');
    for (var i = 0; i < items.length; i += 1) {
      if (minAgoOf(items[i]) < LAST_VISIT_MINUTES_AGO) return i;
    }

09Hero Scene Combining Several Calculations Into One Comment Panel

One panel runs item 01's depth-times-step indent, item 04's diff-driven digit roll, and item 07's measured-height delete shift simultaneously — each keeps its own input and output, so a reply can be opened, liked, and removed while the other two calculations hold their state. It is the finished comment section on a blog post detail page. Item 09 moved on the most frames of the nine, 15/23, at an average intensity of 77.4 over 25.1% cumulative area.

Hero Scene Combining Several Calculations Into One Comment Panel
Open in a new tab

09 · Hero Scene Combining Several Calculations Into One Comment Panel — Measured area 25.116% · moving frames 15/23Original by GODRICH · SCSS and React ship in the zip · See the password

HERO_REPLY_INDENT_STEP_PXHERO_DELETE_SHIFT_SPRING_STIFFNESShero__guide
  // Technique: three calculations overlap in one panel. (1) Indent -- margin-left comes
  // from data-depth times HERO_REPLY_INDENT_STEP_PX, and the guide line draws top to
  // bottom with scaleY(0 to 1). (2) Like -- the before/after count diff decides the
  // digit-roll direction and the elastic overshoot amount. (3) Delete -- the row height
  // is measured and collapsed by exactly that much, and the rows below close the gap
  // using the HERO spring stiffness.
  var HERO_REPLY_INDENT_STEP_PX = 20;
  var HERO_DELETE_SHIFT_SPRING_STIFFNESS = 220;
  var HERO_LIKE_POP_AMPLITUDE = 1.16;

  // Same sample curve as $ease-lerp-settle (site/static/demo-tokens.scss) -- it overshoots
  // past 1 (up to 1.126) before settling back.
  var SPRING_SETTLE_EASING = 'linear(0.0, 0.051, 0.176, 0.341, 0.518, 0.685, 0.831, 0.947, 1.032, 1.087, 1.117, 1.126, 1.121, 1.105, 1.085, 1.062, 1.041, 1.022, 1.008, 0.997, 1)';

  var root = document.getElementById('heroRoot');
  var list = document.getElementById('heroList');
  var status = document.getElementById('heroStatus');

  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (reduce) root.classList.remove('is-demo');

  // (1) Indent calculation
  function applyIndents() {
    var rows = list.querySelectorAll('.hero__cmt');
    for (var i = 0; i < rows.length; i += 1) {

Where a Comment Section UI Actually Earns Its Place

These nine calculations map onto distinct moments in a real thread rather than one generic comment section ui ux widget. Item 01's depth indent and item 02's collapse toggle carry a nested reply thread under a long article, item 03's measured sort slide belongs wherever a popular-versus-newest switch sits, and item 04's rolling count handles the like button that changes most often on the page. Item 05's staggered skeleton holds the seat during the first load, items 06 and 08 mark what time has done since your last look — one fading a pin, one drawing the new/old boundary — and item 09 shows all of it assembled. The reorder-by-measured-distance idea behind item 03 is the same family as the rank-change list in Leaderboard UI Design: 9 Rank-Change List Patterns, the timestamp-driven positioning behind item 08 echoes the feed entries in 9 Activity Feed UI Widgets — Sidebar-Ready Lists, and a back-and-forth conversation fits the bubbles in 9 CSS Chat Bubble Animations, One Line, Copy-Paste better than a threaded list.

Nine Comment Thread Patterns, Measured in Area and Intensity

Cumulative area below is the share of each fixed-camera frame that actually repainted, averaged across every measured frame, and intensity is the average pixel delta where it did. Item 02 towers at 74.9% because its card background pulses through the whole expand, while item 01 sits at 5.2% with a thin guide line and one reply body as its only moving parts — the spread between them is most of what separates a considered comment section ui design from a list that just swaps classes. Items 08 and 03 moved on only 6/23 and 7/23 frames because each fires one short, deliberate transition rather than animating continuously.

Pattern Cumulative area Avg. intensity Frames moved
01 Reply indent by depth 5.2% 65.5 11/23
02 Collapse spring to measured height 74.9% 26.6 8/23
03 Sort slide by old-position distance 21.9% 82.1 7/23
04 Like count digit roll 24.6% 38.4 8/23
05 Skeleton shimmer stagger 12.3% 36.6 14/23
06 Pinned highlight decay 19.1% 15.8 11/23
07 Delete shift spring 31.4% 94.3 11/23
08 Unread divider position 19.9% 36.2 6/23
09 Hero panel scene 25.1% 77.4 15/23

Where the Value Changes the Reaction — Indent Width, Sort Transition Speed, Post-Delete Shift Speed

Three constants decide how these builds feel before anything else does. REPLY_INDENT_STEP_PX sets how many pixels each depth level adds in item 01 — the difference between a thread that stays readable at four levels and one that runs out of room by the second. SORT_FLIP_DURATION_MS sets how long item 03 spends sliding comments between old and new positions, and DELETE_SHIFT_SPRING_STIFFNESS sets how stiffly item 07's rows below spring into the space a deletion leaves behind. None of the three changes what gets calculated — the depth count, the old-to-new distance, and the vanished height all stay the same — only how far or how fast the reaction travels once the number lands. All three appear again in the variants table with exact values to try.

Where It Breaks — Deep-Reply Overflow, Sort Flicker, Focus After Delete

Item 01 has no depth ceiling anywhere in its code, so depth * REPLY_INDENT_STEP_PX keeps growing with every level and the narrow-width style rules trim padding and font size but never touch --depth-indent — on a narrow screen a thread nested five or six deep pushes the reply body off the edge, which is the moment to clamp the depth input rather than shrink the type further. Item 03's applySort() reads getBoundingClientRect() at the moment you flip the sort, but the animate() calls it spawns are never stored or cancelled — press the button again before the previous 320ms run finishes and the "old position" being measured is mid-flight, so the two runs stack a visible flicker; keeping a reference to each running animation and calling its cancel method before re-measuring removes it. Item 07's file contains no focus management at all — grep it for the word and nothing comes back — so a keyboard user who deletes a comment loses the focused button with it and focus falls back to the page body, which a screen reader experiences as landing nowhere; moving focus to the next surviving row's control or the list container after removeRow() is the fix. The nine index.html files behind these builds, m2uzmqnz, are the fastest way to check each of these seams yourself before wiring one into a live comment box ui.

Three Variants and Accessibility

Variant Constant Range What changes
Adjust the reply indent step width REPLY_INDENT_STEP_PX 24 → 12 Lowering the value keeps even deep replies folded narrow inside the screen, while raising it pushes replies sideways off the edge after just a few levels.
Adjust the sort-transition duration SORT_FLIP_DURATION_MS 320 → 640 Lowering the value makes comments almost teleport into their new order when the sort changes, while raising it lets them slowly glide past each other into place.
Adjust the post-delete shift stiffness DELETE_SHIFT_SPRING_STIFFNESS 220 → 120 Raising the value fills the gap left by a deleted comment quickly and stiffly, while lowering it fills the gap with a slow, wobbling settle.

prefers-reduced-motion is checked through matchMedia() at the top of all nine scripts, and each file removes its own auto-demo class the same way, so visitors with the setting arrive directly at the settled state — expanded replies, sorted order, the pinned tint at rest — with nothing looping. Keyboard support is genuinely uneven across the nine, and the source says so precisely: seven of the nine (items 01, 02, 03, 04, 05, 07, and 09) attach keydown listeners that trigger their controls on Enter and Space, while items 06 and 08 have no pressable control at all, so there is no keyboard path to add — their state changes are announced through aria-live status text instead. Item 04's like button also carries aria-pressed and item 02's toggle carries aria-expanded, so the state the animation expresses visually is the state assistive tech reads.

Can Comment Section UI Calculate Sorting and Deletion Without a Library?

Yes, and the proof is already on one panel: item 09 runs item 01's indent, item 04's digit roll, and item 07's delete shift side by side with nothing but Element.animate() and the arithmetic each one derives from its own measurement. None of the three waits on another — the indent reads data-depth, the roll reads a count diff, and the shift reads a measured height — so adding a fourth calculation is a matter of adding another independent read-and-write pair, not untangling the existing ones. What a library would buy here is mostly the bookkeeping these nine do by hand: storing animation references so a second click can cancel the first, as the sort flicker above shows. The measurement APIs themselves — the ones behind the height math in items 02 and 07 — are documented as Element.scrollHeight and HTMLElement.offsetHeight on MDN.

Questions Worth Answering Before You Wire Up One of These Nine

How do I keep deep reply threads from overflowing on narrow screens?

Lower REPLY_INDENT_STEP_PX toward 12 so each level adds half the width, or clamp the depth value feeding the multiplication — item 01's indent is one multiplication, and both fixes happen on the same line. The overflow itself is a layout fact, not a bug: nothing in the source limits depth, so the width follows the data you give it.

Does the like count animate on every digit, or only the ones that changed?

Only the ones that changed — rollDigit() returns early when the current character already matches the new one, so a count moving from 249 to 250 rolls just the tens and units columns while the hundreds digit stands still, and the roll duration itself grows with the size of the diff.

Why does the demo play by itself until I interact with it?

Every build carries an auto-demo loop, and the seven with pressable controls stop it the moment your first pointer or key input lands — the script removes its is-demo class and hands control over, so what you see before that is a scripted run of the same calculation your interaction will trigger. Items 06 and 08 have no input handler, so their scripted run simply plays through. The frame measurements in the table above were taken during exactly that scripted run, which is why they are comparable across all nine — and the same scripted run is what a comment box ui design review would replay before signing off.

Enter the archive password

The password is inside this article. You will find it as you read.