> ## Documentation Index
> Fetch the complete documentation index at: /llms.txt
> Use this file to discover all available pages before exploring further.
# Variable Axis Type
> A locked one-line headline whose weight or width axis morphs into a decisive emphasis beat.
# Variable Axis Type
A locked one-line headline whose weight or width axis morphs into a decisive emphasis beat.
**Variable Axis Type**
```html variable-axis-type.html
Variable Axis Type
```
Copy npx hyperframes add variable-axis-type to the clipboard
That writes one file: `compositions/components/variable-axis-type.html`.
## Paste it into your composition
Open `compositions/components/variable-axis-type.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` | `IMPACT` | string | Word or short headline to emphasize. |
| `axis` | `wght` | `wght`, `wdth` | Variable-font axis used for the emphasis morph. |
| `fromValue` | `200` | 25 to 1000, step 1 | Starting coordinate on the selected font axis. |
| `toValue` | `900` | 25 to 1000, step 1 | Ending coordinate on the selected font axis. |
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 `typography` `variable-font` `kinetic-type` `axis` `emphasize`.
## 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)