> ## Documentation Index > Fetch the complete documentation index at: /llms.txt > Use this file to discover all available pages before exploring further. # Kinetic Type Swap > A held sentence keeps its fixed text in place while one widest-word masked slot rolls through alternatives and settles on the final option. # Kinetic Type Swap A held sentence keeps its fixed text in place while one widest-word masked slot rolls through alternatives and settles on the final option. **Kinetic Type Swap** ```html kinetic-type-swap.html Kinetic Type Swap ``` Copy npx hyperframes add kinetic-type-swap to the clipboard That writes one file: `compositions/components/kinetic-type-swap.html`. ## Paste it into your composition Open `compositions/components/kinetic-type-swap.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 | | - | - | - | - | | `prefix` | `Ship` | string | Fixed sentence text before the rolling word slot. | | `options` | `faster,smarter,together` | string | Comma-separated words shown in the rolling slot. | | `suffix` | \`\` | string | Fixed sentence text after the rolling word slot. | | `cues` | \`\` | string | Comma-separated seconds (from mount start) for each word swap. Empty keeps the authored even spread. | | `accent` | `green` | `green`, `blue`, `violet` | Color used by the rolling word slot. | | `exit` | `none` | `none`, `fade`, `up` | Optional departure. Default none: the sentence holds until the frame cuts. | 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` `text-effects` `kinetic-type` `word-swap` `reveal`. ## 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)