# Motion

> >-

- **Type:** Skill
- **Install:** `agentstack add skill-sukirman1901-frontend-expert-motion`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [sukirman1901](https://agentstack.voostack.com/s/sukirman1901)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [sukirman1901](https://github.com/sukirman1901)
- **Source:** https://github.com/sukirman1901/frontend-expert/tree/main/skills/motion
- **Website:** https://github.com/sukirman1901/frontend-expert

## Install

```sh
agentstack add skill-sukirman1901-frontend-expert-motion
```

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

## About

# Motion

## Overview

Motion clarifies hierarchy and feedback — it does not decorate. Pick **families/patterns by name**, then **hand-roll** (CSS / Motion / GSAP). Do **not** default to third-party registry installs.

Full catalog: `references/motion-families.md` (12 families · 144 patterns).

## When to Use

- Micro-interactions (hover, focus, press)
- Enter/exit or layout transitions (section swaps, drawers, modals)
- Scroll-linked, text, carousel, hero, or other named patterns
- **Default (light):** app shell / dashboard / multi-section `/ui` — section fade + drawer slide + smooth scroll (unless user forbids)

## When to skip

- Static token/color-only tweaks
- User asked for zero animation / “tanpa animasi”
- Prefers-reduced-motion (still ship CSS that disables)

## Lanes

| Lane | Peruntukan | Defaults |
|------|------------|----------|
| **Product / shell** | App chrome, settings, dashboards | `fade-up` / `page-crossfade`, `drawer-slide`, `press-scale`, `lift-hover` |
| **Marketing / expressive** | Landing, campaigns | Choose **1–2 families** + **1–2 patterns** from catalog — budget 2–3 motions / viewport |

## Family peruntukan (quick)

| Family | Untuk | Bukan untuk |
|--------|-------|-------------|
| Micro Interaction | Toggle, toast, like, progress | Hero / scroll story |
| Hover & Interaction | Lift, press, magnetic, tilt | Page enter |
| Scroll-based | Sticky, horizontal, scroll-zoom | Button-only micro |
| Reveal & Wipe | Enter fades, split, mask, drawer | Endless loops as only motion |
| Text Motion | Word reveal, typewriter, marquee type | Forms / dense settings |
| Carousel & Continuous Flow | Marquee, filmstrip, snap | Single CTA focus pages |
| Grid Motion | Bento, flip grid, reflow | One-button chrome |
| Spotlight & Focus | Center stage, dim siblings | Whole-page noise |
| Stack & Scatter | Deck, fan, swipe deck | Admin tables |
| Hero Section Motion | Parallax / float device / aurora | App shell (max **1** signature) |
| Morph & Transform | Shared element, FAB morph | Every navigation |
| 3D & Perspective | Orbit, coverflow | Default product UI |

## Workflow

1. **Lane** — product shell vs marketing
2. **Family** — match peruntukan (max 2 families)
3. **Patterns** — name 1–2 from `motion-families.md`; read definisi + hand-roll hint
4. **Implement** — CSS / Framer Motion / GSAP from definisi; project tokens; `transform`/`opacity`
5. **Budget** — ≤2–3 intentional motions per viewport
6. **A11y** — `prefers-reduced-motion: reduce` (opacity/instant fallbacks); never meaning-by-motion-alone
7. **Report** — Conventions: `Motion: light shell | families: Hover+Reveal | patterns: lift-hover, fade-up`

### Shell defaults (product)

- Section enter: `fade-up` ~250–300ms
- Mobile drawer: `drawer-slide` + backdrop fade
- Controls: `press-scale` (0.96)
- `scroll-behavior: smooth` (disabled under reduced-motion)

### Hard rules

- **Hand-roll** from pattern names — registry install is **not** the pack default
- Do not stack Hero + 3D + Text + Spotlight + Carousel in one viewport
- Marketing: max one Hero signature pattern

## Checklist

- [ ] Lane chosen (product vs marketing)
- [ ] Family peruntukan matches the ask (≤2 families)
- [ ] Named patterns listed (≤2–3 motions in viewport)
- [ ] Hand-rolled from definisi (not registry-as-answer)
- [ ] `prefers-reduced-motion` handled
- [ ] No layout-thrashing / decorative spam
- [ ] Conventions Motion line filled

## Depth

- Vocabulary: `references/motion-families.md`
- Recipes: `references/motion.md`
- Micro craft overlap: `ui-feel`
- Demo shell: local `test/` sandbox (optional; not shipped)

## Source & license

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

- **Author:** [sukirman1901](https://github.com/sukirman1901)
- **Source:** [sukirman1901/frontend-expert](https://github.com/sukirman1901/frontend-expert)
- **License:** MIT
- **Homepage:** https://github.com/sukirman1901/frontend-expert

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-sukirman1901-frontend-expert-motion
- Seller: https://agentstack.voostack.com/s/sukirman1901
- 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%.