Comment thread
A post and the conversation under it: typing that grows into the reply, lines that light the path to it, and replies that fold away and come back.
I shipped my first open-source library last week. Ten weeks of evenings, one launch post and a lot of lessons. Here’s what I’d do again, and what I wouldn’t.
The part about writing the README before the code changed how I work. Did you keep that up after launch?
Mostly! The README is still the first file I touch. If I can’t explain it there, the API isn’t ready.
@amamensah Stealing this. We do it backwards at work and it shows.
@esiofori Same here. Writing the README first would have saved us a rewrite.
How long was it from the first commit to the launch?
@kofiagyeman About ten weeks of evenings. The last two were all docs and examples.
What actually brought people in? Hacker News, X, or something else?
One honest launch post, then answering every issue within a day. That did more than any launch.
@amamensah Quick replies are underrated. It’s why I stuck with the last library I tried.
A post from an indie developer, Ama Mensah, about shipping her first open-source library, and the readers replying to it. Press play to watch a short scene, or join in yourself.
Things to try
- Watch the typing. "Abena is typing…" is a small bubble that grows into her comment when it's sent, and Ama's answer arrives the same way.
- Reply. Yours appears at once marked "Sending…", its line drawing in. When the server confirms it, only the label changes.
- Hover a reply. The lines from the top down to it darken, and everything off that path fades.
- Like the post or any comment, and the count ticks over.
- Hide replies. The branch folds into a pill with the repliers' faces, and its lines retract.
- Sort by Top or Newest. Whole branches move, lines and all.
Install
npx shadcn@latest add https://your-docs-site/r/comment-thread.jsonDependencies
The install command adds these for you. If you copy the code by hand, install them yourself.
npm install @hugeicons/core-free-icons @hugeicons/react @remold-ui/react motionHow it works
- Every avatar is an anchor (
data-rm-anchor), and a reply's avatar links to its parent's (data-rm-link). Connectors draws the lines. - Motion owns each comment's layout animation when a reply arrives, a branch folds, or the order changes.
useConnectorMotion(connectorRef)refreshes Remold's SVG paths for the duration, keeping the lines attached without competing for transforms. - Typing becomes the comment. The typing indicator is replaced by the sent comment, while the surrounding comments settle into their new positions with a short, interruptible spring.
- Lit lines. Each avatar on the hovered path carries
data-rm-line="lit". Connectors copies it onto the line drawn to that avatar asdata-line, so CSS can make those lines glow.
Optimistic replies
A reply is shown before the server has it. Keep its client id when the server confirms it: Motion retains its layout identity, while the connector's anchor stays attached to the same reply.
The people, the post and the library are made up. Avatars are illustrations from DiceBear (the Notionists style), drawn rather than photographed.
Command palette
A command palette that grows out of its search pill, keeps results in place as you type, turns a scope into a chip in the field, and folds back into a pill that says what you did.
Course outline
Modules and lessons joined by lines that stay attached while modules open, lessons get ticked off and finished work drops away.