FancyUI
Saved GitHub Get started
A dark highlighted code block mid-transition: some tokens sit between lines as they move, others are half faded.
Captured from the project's demo · Shiki Magic Move by Shiki · MIT licence · Source ↗

Code block — magic move

Shiki · Shiki Magic Move OPEN SOURCE

Between two versions of a snippet, matching tokens glide to their new place.

#editorial#minimal#type#press

Visit source

Related FancyUI components

  • CodeDiff

    Shows the change as added and removed lines side by side, without animating tokens between versions.

    pnpm add fancy-ui-svelte
    import { CodeDiff } from "fancy-ui-svelte";

    Docs Source

Type
Interaction
Interaction
Type, Press
Style
Editorial, Minimal
Framework of source
Vue
Code availability
Open source

Why it works

Toggling the example swaps the code, but tokens that exist in both versions slide from their old line and column to the new one while removed tokens fade out and new ones fade in. The reader follows a variable across the refactor instead of re-reading the block. Duration and stagger sliders sit under the editor.

When to use it

Step-by-step code walkthroughs, release notes and docs where the change matters more than the final code.

Things to watch

Copy must return the final code, not a mid-flight state. Long blocks with many moved tokens get noisy; keep each step small. Under reduced motion, cross-fade or cut.

Implementation clues

  • tokenise both versions
  • match tokens by content
  • FLIP each token's position
  • stagger by line