Developer Tool · Text Analysis · LCS Algorithm · 2026 · Solo build
Diff Motion
A character-level diff instrument: paste before and after text, get an LCS-optimal inline comparison with edit distance, similarity score, and zero server round-trips.
The problem
Comparing two blocks of text at the character level is a routine task for developers reviewing config changes, writers comparing drafts, and engineers inspecting API responses — but most diff tools work at the line level and require server access. Diff Motion fills the gap: paste before and after text, and the LCS dynamic-programming algorithm finds the longest common subsequence, rendering every deletion and insertion inline with no upload. The core engine is a pure TypeScript O(n·m) LCS-table implementation that satisfies the round-trip invariant: the delete-side reconstruction always equals the original, and the insert-side always equals the revision. 24 TDD tests covering identical strings, pure insertions, pure deletions, substitutions, and multi-word cases were written and verified RED before a single line of implementation existed.
Architecture
Key decisions
LCS dynamic programming over Myers O(ND)
Myers O(ND) algorithm is optimal for large inputs, but its backtrace requires careful diagonal bookkeeping. For character-level UI diffs on text blocks up to a few thousand characters, the O(n·m) LCS table is simpler to implement correctly and exhaustively test. The round-trip invariant (left-side reconstruction equals original, right-side equals revision) is easy to verify in TDD and guarantees correctness for the Compare surface use case.
Compare surface: two-column textarea layout over a single input
This is a Compare surface — the user is weighing two versions against each other. A single-input form with a submit button (the Decide/Learn anti-pattern) would be wrong. The two-column before/after layout with auto-running diff reflects the mental model of comparison natively, reducing friction to zero for the most common case.
Stone/rose/emerald palette over the default indigo tech stack
The stone-950 background, amber accent, rose for deletions, and emerald for insertions were chosen to maximise semantic differentiation: red=removed, green=added is the universal diff convention. The amber action button differentiates from the content semantics. No indigo, no glassmorphism, no feature tiles.