> ## Documentation Index > Fetch the complete documentation index at: /llms.txt > Use this file to discover all available pages before exploring further. # Text Match Cut > One line of text becomes another mid-move: both ride a single 85 % easy-ease curve and hard-swap at the speed peak, as scale, tracking, or a same-direction slide. # Text Match Cut One line of text becomes another mid-move: both ride a single 85 % easy-ease curve and hard-swap at the speed peak, as scale, tracking, or a same-direction slide. **Text Match Cut** ```html text-match-cut.html Text Match Cut ``` Copy npx hyperframes add text-match-cut to the clipboard That writes one file: `compositions/components/text-match-cut.html`. ## Paste it into your composition Open `compositions/components/text-match-cut.html` and copy what is inside into your own composition. A component has no size or duration of its own. It takes both from the composition you paste it into. ## Variables Every one of these has a default, so the piece works untouched. Set the ones you want to change on the element: | Variable | Default | Accepts | What it does | | - | - | - | - | | `text_a` | `Basic Interface Behavior` | string | The line on screen before the cut. | | `text_b` | `Thoughtful Experience Design` | string | The line that continues the move after the cut. | | `mode` | `scale-down` | `scale-down`, `scale-up`, `tracking-in`, `slide-left`, `slide-right`, `slide-up`, `slide-down` | Which property carries the cut. Both texts ride the same curve. | | `sweep` | `on` | `on`, `off` | Cyan-to-blue bar sweeping through the glyphs around the cut. | | `background` | `navy` | `navy`, `transparent` | The tutorial navy glow, or transparent so the host shows through. | Set them with `data-variable-values` on the element that mounts it. These are the defaults, so this behaves exactly like the preview above until you change one: ```html wrap
``` {/* hf:generated-footer */} Tagged `motion-primitive` `transition` `typography` `match-cut` `hard-cut` `continuity`. ## Related topics * [Browse the complete Catalog](/catalog.md) * [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks.md) * [Put blocks together into one video](/concepts/compositions.md)