Animated Instagram comment-to-DM end card for Reels (open source)

[commentkeyword]

I made a small component for a common Reels ending, "Comment GUIDE and I'll DM you the link". It animates what happens when someone comments:

1. An Instagram-style comment bar appears and the keyword types in, letter by letter.
2. The send button lights up and the comment posts.
3. The account's public reply lands under it, with its profile picture.
4. The comments swipe away sideways, and a DM chat slides in: "typing…", then the DM, with its link highlighted.

Code: https://github.com/commentkeyword/instagram-mcp-server/tree/main/integrations/remotion (MIT)

Some details that may be useful if you build something similar:

• Swipe: the two "pages" sit side by side, each with its own translateX driven by the same interpolate with an ease-in-out curve.
• Layout: the bar stays fixed and the thread grows upward, as it does on Instagram, so it keeps clear of the Reels caption area.
• Sound effects: commentBoxTimes(keyword, { cps }) returns the beats (typing, send, reply, swipe, DM), so they can go on <Sequence>s without guessing frames.
• Scaling and props: everything scales from width / 1080. Colours, labels (6 languages), font and timing are props.
• Dependencies: it depends only on remotion.

Disclosure: I work on CommentKeyword, an Instagram comment-to-DM tool. The folder has an optional helper that fills the texts and avatar from a real automation, so the video shows exactly what the account sends. The component itself works with plain props.

Feedback on timing or easing is welcome.