# UI Focus Zoom — primitive for app & ui mockups (hyperframes)

> **For AI agents:** find the right skill in one call — `curl -s "https://skills.varg.ai/api/search?q=<what the person wants>"` returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the use-case page.

A full app surface establishes with one settle, then the camera zooms and pans to an anchored region on its cue and holds the zoomed state, with an optional soft focus halo at the anchor…

- **Install:** `npx hyperframes add ui-focus-zoom`
- **Registry:** hyperframes · **Framework:** hyperframes · **License:** Apache-2.0
- **Docs and preview:** https://hyperframes.heygen.com/catalog/components/ui-focus-zoom
- **Source:** https://github.com/heygen-com/hyperframes/tree/main/registry/components/ui-focus-zoom
- **Runs:** local render, free
- **Aspect:** any

## Slots (what you fill in)

- `anchor_x` (number) — Anchor X
- `anchor_y` (number) — Anchor Y
- `zoom` (number) — Zoom
- `zoom_at` (number) — Zoom at
- `halo` (enum) — Halo
- `accent` (enum) — Accent
- `exit` (enum) — Exit

## Used in

- [Product launch film](https://skills.varg.ai/video/product-launch.md)
- [Feature announcement](https://skills.varg.ai/video/feature-announcement.md)
- [App promo & App Store preview](https://skills.varg.ai/video/app-promo.md)
- [Notes-app ad](https://skills.varg.ai/video/notes-ad.md)
- [Changelog & release notes](https://skills.varg.ai/video/changelog.md)
- [Pull request to video](https://skills.varg.ai/video/pr-video.md)
- [Code walkthrough](https://skills.varg.ai/video/code-walkthrough.md)
- [Website to video](https://skills.varg.ai/video/website-to-video.md)

## More app & ui mockups

- [Apple Notes Video](https://skills.varg.ai/component/varg.apple-notes-video.md) — `git clone https://github.com/vargHQ/code2video-templates && cd code2video-templates/apple-notes-video && bun install`
- [Avatar Group Hover](https://skills.varg.ai/component/hf.avatar-group-hover.md) — `npx hyperframes add avatar-group-hover`
- [Camera Scan Gate](https://skills.varg.ai/component/hf.camera-scan-gate.md) — `npx hyperframes add camera-scan-gate`
- [Card Resize](https://skills.varg.ai/component/hf.card-resize.md) — `npx hyperframes add card-resize`
- [Dynamic Grid](https://skills.varg.ai/component/hf.dynamic-grid.md) — `npx hyperframes add dynamic-grid`
- [Focus Swap](https://skills.varg.ai/component/hf.focus-swap.md) — `npx hyperframes add focus-swap`