> ## Documentation Index > Fetch the complete documentation index at: /llms.txt > Use this file to discover all available pages before exploring further. # Zoom Through Transition > A transition that zooms through a focal card into the next scene. # Zoom Through Transition A transition that zooms through a focal card into the next scene. **Zoom Through Transition** ```html zoom-through-transition.html Zoom Through Transition ``` Copy npx hyperframes add zoom-through-transition to the clipboard That writes one file: `compositions/components/zoom-through-transition.html`. ## Paste it into your composition Open `compositions/components/zoom-through-transition.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 | | - | - | - | - | | `from-label` | `Before` | string | Caption on the outgoing scene, the one on screen when the transition starts. | | `to-label` | `Zoom Through Transition` | string | Caption on the incoming scene, the one the timeline wipes into frame. | | `depth` | `standard` | `close`, `standard`, `far` | Multiplies how far both scenes travel and how hard the outgoing one blurs, so the push covers a shorter or longer run in the same time. | | `accent` | `blue` | `blue`, `green`, `violet` | Theme token for the ring marking the incoming scene. Blue rides --accent, green --brand, violet --accent-2; each falls back to a neutral hairline. | 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 `transition-primitive`. ## 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)