---
title: "Code Morph"
description: "One snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a paused GSAP timeline."
---
One snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a paused GSAP timeline.
`code` `code-animation` `morph` `refactor` `developer`
## Add it to a project
Ask your agent:
```text
Add the Code Morph block from the HyperFrames Catalog to this project.
Replace the demo content with mine and match the existing design and timing.
```
Or install it from the project folder:
```bash Terminal
npx hyperframes add code-morph
```
| Property | Value |
| --- | --- |
| Type | Block |
| Dimensions | 1920×1080 |
| Duration | 7s |
**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-morph.html` | `compositions/code-morph.html` | hyperframes:composition |
## Use it
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
The installed block can be added to a host composition with:
```html
```