# Home Icon Motion

> Generate, package, and integrate the polished cinematic Home/house navigation icon motion as standalone HTML/video or as an inline Web Component with React and Vue wrappers. Use when Codex is asked to animate a Home icon, house icon, homepage navigation control, active Home tab, or integrate the established construct-and-illuminate Home treatment into an existing frontend. Do not use for Delete,…

- **Type:** Skill
- **Install:** `agentstack add skill-youwenjiujiu-home-icon-motion-home-icon-motion`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [youwenjiujiu](https://agentstack.voostack.com/s/youwenjiujiu)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [youwenjiujiu](https://github.com/youwenjiujiu)
- **Source:** https://github.com/youwenjiujiu/home-icon-motion
- **Website:** https://youwenjiujiu.github.io/home-icon-motion/

## Install

```sh
agentstack add skill-youwenjiujiu-home-icon-motion-home-icon-motion
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Home Icon Motion

Create the established Home animation: a flat house constructs into a crisp faux-3D home, illuminates its porthole and side window, emits a short warm beam, then collapses cleanly to rest.

## Choose the task

- For an asset or preview, generate a standalone artifact.
- For an existing frontend, integrate the developer component into the real Home control. Read [references/frontend-project-integration.md](references/frontend-project-integration.md), then read only the detected framework section in [references/framework-adapters.md](references/framework-adapters.md).
- Before changing timing, geometry, layer order, or light behavior, read [references/motion-language.md](references/motion-language.md).
- Before delivering a Web Component or framework wrapper, read [references/developer-integration.md](references/developer-integration.md).
- Reject Delete, Search, and other non-Home semantics as outside this skill's scope.

## Generate a standalone artifact

Always use a new output directory unless the user explicitly authorizes overwriting generated files.

```bash
python3 /scripts/generate_home_motion.py \
  --label Home \
  --output 
```

Default output includes `index.html`, `motion-config.json`, `poster.png`, and `motion.mp4`. Request other formats with `--exports mp4,webm,gif,poster`.

Useful controls:

- `--accent`: product accent; do not use it for emitted light.
- `--light`: porthole, side-window, and beam light; preserve `#F3FF0B` unless the user requests another light color.
- `--background`, `--bar`, `--foreground`, `--muted`, `--shadow`: surrounding palette.
- `--duration`: complete timeline in seconds; default 5.
- `--target web-component|react|vue|all`: add a reusable developer package.
- `--element-name`: unique custom-element name; keep `home-icon-motion` unless the application already registers it.

For a full engineering handoff:

```bash
python3 /scripts/generate_home_motion.py \
  --label Home \
  --accent "#247CFF" \
  --light "#F3FF0B" \
  --target all \
  --exports mp4,webm,poster \
  --output 
```

## Integrate into a frontend

Inspect before editing:

```bash
python3 /scripts/prepare_project_integration.py \
  --project  \
  --scan-only
```

Generate project-local source and `integration-plan.json`:

```bash
python3 /scripts/prepare_project_integration.py \
  --project  \
  --label Home \
  --accent  \
  --light "#F3FF0B"
```

Then patch the actual Home interaction:

1. Preserve the existing button, route/state action, focus behavior, label, and accessible name.
2. Replace only the static Home glyph with the generated project-local wrapper.
3. Keep the host in the original 24–48 px icon slot with `presentation="inline"`.
4. Call `restart()` on every Home activation, including clicks while Home is already active.
5. Never scale, rotate, skew, or move the navigation surface, label, siblings, or control allocation in inline mode.
6. Add `"use client"` only to the smallest Next.js interactive boundary.
7. Run the application's existing build, test, and lint commands from `integration-plan.json`.

## Verify

For standalone output:

1. Inspect `poster.png` and a contact sheet at 8–12 fps.
2. Confirm the flat opening state, aligned construction, complete house, light-on hold, causal light-off, clean collapse, and matching final flat state.
3. Inspect the 26–30% and 72–76% face crossfades frame by frame; reject any single-frame flat/front swap.
4. Use `ffprobe` to confirm dimensions, duration, and frame rate.

For developer output:

1. Run `node --check` on generated JavaScript and import the Web Component in Node to confirm SSR-safe evaluation.
2. Serve `developer/` over localhost.
3. Run:

```bash
node /scripts/validate_component.mjs \
  --url http://127.0.0.1:4173/ \
  --output 
```

4. Test first click, repeat click, navigation away and back, narrow and wide viewports, and `prefers-reduced-motion: reduce`.
5. Confirm visible response within 250 ms, fixed host bounds, no sibling/layout shift, replay on every activation, and exactly one completion event when looping is disabled.
6. Confirm dense continuity sampling reports no hard opacity cut across construction or collapse.

If Chrome, Playwright, Node, or FFmpeg is unavailable, still deliver the self-contained `index.html` and state exactly which exports or checks could not run.

## Deliver

Link the generated `index.html`, `poster.png`, requested video files, and developer package when present. State duration, frame rate, target, replay trigger, reduced-motion behavior, and verification results.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [youwenjiujiu](https://github.com/youwenjiujiu)
- **Source:** [youwenjiujiu/home-icon-motion](https://github.com/youwenjiujiu/home-icon-motion)
- **License:** Apache-2.0
- **Homepage:** https://youwenjiujiu.github.io/home-icon-motion/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-youwenjiujiu-home-icon-motion-home-icon-motion
- Seller: https://agentstack.voostack.com/s/youwenjiujiu
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.