@prestyj/cli 5.28.0 → 5.29.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/assets/motion/THIRD-PARTY.md +14 -19
- package/assets/motion/bin/contact-sheet.mjs +9 -3
- package/assets/motion/bin/cues.mjs +337 -0
- package/assets/motion/bin/flash-check.mjs +314 -0
- package/assets/motion/bin/fonts.mjs +17 -13
- package/assets/motion/bin/library.mjs +61 -18
- package/assets/motion/bin/motion-blur.mjs +943 -0
- package/assets/motion/bin/motion-check.mjs +366 -9
- package/assets/motion/bin/music-fit.mjs +436 -0
- package/assets/motion/bin/pdf-extract.mjs +22 -10
- package/assets/motion/bin/reference-study.mjs +346 -0
- package/assets/motion/bin/score-synth.mjs +1052 -93
- package/assets/motion/fonts/finger-paint/OFL.txt +93 -0
- package/assets/motion/fonts/finger-paint/finger-paint-normal.woff2 +0 -0
- package/assets/motion/fonts/fonts.json +56 -0
- package/assets/motion/fonts/short-stack/OFL.txt +94 -0
- package/assets/motion/fonts/short-stack/short-stack-normal.woff2 +0 -0
- package/assets/motion/fonts/sora/OFL.txt +93 -0
- package/assets/motion/fonts/sora/sora-normal.woff2 +0 -0
- package/assets/motion/fonts/specimen.jpg +0 -0
- package/assets/motion/fonts/unbounded/OFL.txt +93 -0
- package/assets/motion/fonts/unbounded/unbounded-normal.woff2 +0 -0
- package/assets/motion/library/README.md +52 -14
- package/assets/motion/library/kit/moves.js +1981 -0
- package/assets/motion/library/library.json +232 -0
- package/assets/motion/library/pieces/camera-rig/meta.json +13 -0
- package/assets/motion/library/pieces/camera-rig/piece.html +153 -0
- package/assets/motion/library/pieces/camera-rig/preview.jpg +0 -0
- package/assets/motion/library/pieces/chain-knock/meta.json +13 -0
- package/assets/motion/library/pieces/chain-knock/piece.html +195 -0
- package/assets/motion/library/pieces/chain-knock/preview.jpg +0 -0
- package/assets/motion/library/pieces/gather-to-logo/meta.json +13 -0
- package/assets/motion/library/pieces/gather-to-logo/piece.html +159 -0
- package/assets/motion/library/pieces/gather-to-logo/preview.jpg +0 -0
- package/assets/motion/library/pieces/morph-carry/meta.json +13 -0
- package/assets/motion/library/pieces/morph-carry/piece.html +173 -0
- package/assets/motion/library/pieces/morph-carry/preview.jpg +0 -0
- package/assets/motion/library/pieces/one-shape-journey/meta.json +13 -0
- package/assets/motion/library/pieces/one-shape-journey/piece.html +195 -0
- package/assets/motion/library/pieces/one-shape-journey/preview.jpg +0 -0
- package/assets/motion/library/pieces/open-from-subject/meta.json +13 -0
- package/assets/motion/library/pieces/open-from-subject/piece.html +168 -0
- package/assets/motion/library/pieces/open-from-subject/preview.jpg +0 -0
- package/assets/motion/library/pieces/request-to-result/meta.json +13 -0
- package/assets/motion/library/pieces/request-to-result/piece.html +212 -0
- package/assets/motion/library/pieces/request-to-result/preview.jpg +0 -0
- package/assets/motion/library/pieces/scale-dive/meta.json +13 -0
- package/assets/motion/library/pieces/scale-dive/piece.html +321 -0
- package/assets/motion/library/pieces/scale-dive/preview.jpg +0 -0
- package/assets/motion/library/pieces/screen-replica-steps/meta.json +13 -0
- package/assets/motion/library/pieces/screen-replica-steps/piece.html +366 -0
- package/assets/motion/library/pieces/screen-replica-steps/preview.jpg +0 -0
- package/assets/motion/library/pieces/zoom-into-card/meta.json +13 -0
- package/assets/motion/library/pieces/zoom-into-card/piece.html +179 -0
- package/assets/motion/library/pieces/zoom-into-card/preview.jpg +0 -0
- package/assets/motion/library/sheets/diagram.jpg +0 -0
- package/assets/motion/library/sheets/frame.jpg +0 -0
- package/assets/motion/library/sheets/transition.jpg +0 -0
- package/assets/motion/library/sheets/ui.jpg +0 -0
- package/assets/motion/plugin.json +1 -1
- package/assets/motion/references/build-sheet.md +206 -0
- package/assets/motion/references/runtime/determinism-rules.md +3 -3
- package/assets/motion/references/runtime/gsap-easing-and-stagger.md +28 -28
- package/assets/motion/references/runtime/gsap.md +3 -3
- package/assets/motion/references/runtime/inputs-and-assets.md +21 -16
- package/assets/motion/references/runtime/lint-validate-inspect.md +3 -3
- package/assets/motion/references/runtime/minimal-composition.md +6 -0
- package/assets/motion/references/runtime/preview-render.md +3 -3
- package/assets/motion/skills/app-walkthrough/SKILL.md +66 -0
- package/assets/motion/skills/before-after/SKILL.md +53 -0
- package/assets/motion/skills/brand-kit/SKILL.md +17 -16
- package/assets/motion/skills/dev-tool-video/SKILL.md +57 -0
- package/assets/motion/skills/launch-video/SKILL.md +62 -0
- package/assets/motion/skills/match-reference/SKILL.md +58 -0
- package/assets/motion/skills/motion/SKILL.md +167 -98
- package/assets/motion/skills/source-ingest/SKILL.md +23 -15
- package/assets/motion/skills/website-video/SKILL.md +59 -0
- package/assets/skills/bulletproof/SKILL.md +36 -11
- package/assets/skills/bulletproof/references/agent-surface.md +19 -9
- package/assets/skills/bulletproof/references/audit-protocol.md +20 -5
- package/assets/skills/bulletproof/references/platform-playbooks.md +5 -4
- package/assets/skills/bulletproof/references/provenance.md +26 -1
- package/assets/skills/bulletproof/references/secure-defaults.md +6 -5
- package/assets/skills/bulletproof/references/supply-chain.md +21 -17
- package/assets/skills/bulletproof/references/threat-landscape.md +28 -26
- package/assets/skills/bulletproof/references/verification.md +2 -0
- package/assets/skills/clarify/SKILL.md +25 -16
- package/assets/skills/code-review/SKILL.md +71 -13
- package/assets/skills/code-review/references/agent-diffs.md +27 -0
- package/assets/skills/code-review/references/tests.md +19 -0
- package/assets/skills/compliance-guard/SKILL.md +20 -5
- package/assets/skills/compliance-guard/references/artifacts.md +1 -1
- package/assets/skills/compliance-guard/references/eu-uk.md +16 -16
- package/assets/skills/compliance-guard/references/lawsuit-vectors.md +5 -5
- package/assets/skills/compliance-guard/references/provenance.md +41 -2
- package/assets/skills/compliance-guard/references/sector-gates.md +3 -3
- package/assets/skills/compliance-guard/references/security-baseline.md +2 -2
- package/assets/skills/compliance-guard/references/trigger-map.md +5 -5
- package/assets/skills/compliance-guard/references/us.md +27 -21
- package/assets/skills/durable/SKILL.md +87 -79
- package/assets/skills/durable/references/agent-db-safety.md +69 -0
- package/assets/skills/durable/references/backups-and-runtime.md +19 -12
- package/assets/skills/durable/references/migrations-and-schema.md +13 -6
- package/assets/skills/evidence-led-ui/SKILL.md +69 -127
- package/assets/skills/evidence-led-ui/references/anti-defaults.md +107 -208
- package/assets/skills/evidence-led-ui/references/direction.md +124 -0
- package/assets/skills/evidence-led-ui/references/production-contract.md +8 -0
- package/assets/skills/evidence-led-ui/references/provenance.md +24 -1
- package/assets/skills/lean/SKILL.md +90 -71
- package/assets/skills/lean/references/memory-and-processes.md +3 -2
- package/assets/skills/lean/references/playbooks.md +37 -12
- package/assets/skills/refactoring/SKILL.md +24 -3
- package/assets/skills/refactoring/references/agent-pitfalls.md +4 -1
- package/assets/skills/refactoring/references/legacy.md +21 -0
- package/assets/skills/root-cause/SKILL.md +20 -10
- package/assets/skills/shared-language/SKILL.md +16 -14
- package/assets/skills/tdd/SKILL.md +27 -15
- package/dist/app-sidecar.js +203 -47
- package/dist/app-sidecar.js.map +1 -1
- package/dist/cli.js +20 -28
- package/dist/cli.js.map +1 -1
- package/dist/core/acceptance-checks.d.ts +48 -0
- package/dist/core/acceptance-checks.js +144 -0
- package/dist/core/acceptance-checks.js.map +1 -0
- package/dist/core/agent-session.d.ts +119 -75
- package/dist/core/agent-session.js +561 -395
- package/dist/core/agent-session.js.map +1 -1
- package/dist/core/agents.d.ts +6 -5
- package/dist/core/agents.js +12 -3
- package/dist/core/agents.js.map +1 -1
- package/dist/core/ask-user.d.ts +90 -8
- package/dist/core/ask-user.js +124 -13
- package/dist/core/ask-user.js.map +1 -1
- package/dist/core/auth-providers.js +1 -1
- package/dist/core/auth-providers.js.map +1 -1
- package/dist/core/autopilot-verdict.d.ts +5 -1
- package/dist/core/autopilot-verdict.js +30 -13
- package/dist/core/autopilot-verdict.js.map +1 -1
- package/dist/core/bundled-agents.js +1 -3
- package/dist/core/bundled-agents.js.map +1 -1
- package/dist/core/cache-diagnostics.d.ts +68 -0
- package/dist/core/cache-diagnostics.js +196 -0
- package/dist/core/cache-diagnostics.js.map +1 -0
- package/dist/core/cache-expiry.d.ts +87 -0
- package/dist/core/cache-expiry.js +111 -0
- package/dist/core/cache-expiry.js.map +1 -0
- package/dist/core/compaction/compactor.js +78 -48
- package/dist/core/compaction/compactor.js.map +1 -1
- package/dist/core/compaction/plan-step-policy.d.ts +46 -0
- package/dist/core/compaction/plan-step-policy.js +57 -0
- package/dist/core/compaction/plan-step-policy.js.map +1 -0
- package/dist/core/destructive-git-guard.d.ts +90 -0
- package/dist/core/destructive-git-guard.js +871 -0
- package/dist/core/destructive-git-guard.js.map +1 -0
- package/dist/core/event-bus.d.ts +3 -0
- package/dist/core/event-bus.js +5 -0
- package/dist/core/event-bus.js.map +1 -1
- package/dist/core/fast-apply-benchmark.d.ts +1 -1
- package/dist/core/fast-apply-benchmark.js +2 -2
- package/dist/core/fast-apply-benchmark.js.map +1 -1
- package/dist/core/injection-detect.d.ts +38 -0
- package/dist/core/injection-detect.js +232 -0
- package/dist/core/injection-detect.js.map +1 -0
- package/dist/core/keep-awake.d.ts +88 -0
- package/dist/core/keep-awake.js +251 -0
- package/dist/core/keep-awake.js.map +1 -0
- package/dist/core/mcp/client.d.ts +72 -0
- package/dist/core/mcp/client.js +264 -41
- package/dist/core/mcp/client.js.map +1 -1
- package/dist/core/mcp/content.js +6 -2
- package/dist/core/mcp/content.js.map +1 -1
- package/dist/core/mcp/store.d.ts +6 -1
- package/dist/core/mcp/store.js +12 -1
- package/dist/core/mcp/store.js.map +1 -1
- package/dist/core/mcp/types.d.ts +18 -0
- package/dist/core/model-unavailable.d.ts +14 -0
- package/dist/core/model-unavailable.js +23 -0
- package/dist/core/model-unavailable.js.map +1 -0
- package/dist/core/node-debugger.d.ts +148 -0
- package/dist/core/node-debugger.js +642 -0
- package/dist/core/node-debugger.js.map +1 -0
- package/dist/core/nolan-context.d.ts +7 -5
- package/dist/core/nolan-context.js +106 -16
- package/dist/core/nolan-context.js.map +1 -1
- package/dist/core/nolan-prompt.js +24 -21
- package/dist/core/nolan-prompt.js.map +1 -1
- package/dist/core/package-threats.d.ts +18 -0
- package/dist/core/package-threats.js +168 -0
- package/dist/core/package-threats.js.map +1 -0
- package/dist/core/persistent-shell.d.ts +58 -6
- package/dist/core/persistent-shell.js +331 -49
- package/dist/core/persistent-shell.js.map +1 -1
- package/dist/core/process-manager.d.ts +14 -0
- package/dist/core/process-manager.js +61 -0
- package/dist/core/process-manager.js.map +1 -1
- package/dist/core/progress/git-xp.js +8 -14
- package/dist/core/progress/git-xp.js.map +1 -1
- package/dist/core/project-discovery.js +77 -26
- package/dist/core/project-discovery.js.map +1 -1
- package/dist/core/semantic-search-benchmark.d.ts +1 -1
- package/dist/core/semantic-search-benchmark.js +2 -2
- package/dist/core/semantic-search-benchmark.js.map +1 -1
- package/dist/core/session-history.d.ts +12 -0
- package/dist/core/session-history.js +27 -0
- package/dist/core/session-history.js.map +1 -1
- package/dist/core/session-manager.d.ts +13 -1
- package/dist/core/session-manager.js +38 -18
- package/dist/core/session-manager.js.map +1 -1
- package/dist/core/session-summary-index.d.ts +37 -0
- package/dist/core/session-summary-index.js +172 -0
- package/dist/core/session-summary-index.js.map +1 -0
- package/dist/core/settings-manager.d.ts +2 -0
- package/dist/core/settings-manager.js +10 -0
- package/dist/core/settings-manager.js.map +1 -1
- package/dist/core/shell-threats-popular-packages.d.ts +11 -0
- package/dist/core/shell-threats-popular-packages.js +675 -0
- package/dist/core/shell-threats-popular-packages.js.map +1 -0
- package/dist/core/shell-threats.d.ts +8 -0
- package/dist/core/shell-threats.js +186 -0
- package/dist/core/shell-threats.js.map +1 -0
- package/dist/core/skills.js +16 -4
- package/dist/core/skills.js.map +1 -1
- package/dist/core/stream-rules.d.ts +30 -0
- package/dist/core/stream-rules.js +151 -0
- package/dist/core/stream-rules.js.map +1 -0
- package/dist/core/subagent-manager.d.ts +23 -6
- package/dist/core/subagent-manager.js +25 -9
- package/dist/core/subagent-manager.js.map +1 -1
- package/dist/core/subagent-policy.js +1 -1
- package/dist/core/subagent-policy.js.map +1 -1
- package/dist/core/subagent-receipt.d.ts +54 -0
- package/dist/core/subagent-receipt.js +276 -0
- package/dist/core/subagent-receipt.js.map +1 -0
- package/dist/core/subagent-turn-record.d.ts +2 -0
- package/dist/core/subagent-turn-record.js.map +1 -1
- package/dist/core/test-impact.d.ts +73 -0
- package/dist/core/test-impact.js +467 -0
- package/dist/core/test-impact.js.map +1 -0
- package/dist/core/thinking-level.d.ts +1 -1
- package/dist/core/thinking-level.js +1 -1
- package/dist/core/thinking-level.js.map +1 -1
- package/dist/core/verification-gate.d.ts +2 -0
- package/dist/core/verification-gate.js +4 -0
- package/dist/core/verification-gate.js.map +1 -1
- package/dist/core/verification-snapshot.js +3 -5
- package/dist/core/verification-snapshot.js.map +1 -1
- package/dist/core/workspace-guard.d.ts +18 -7
- package/dist/core/workspace-guard.js +227 -60
- package/dist/core/workspace-guard.js.map +1 -1
- package/dist/core/worktree-setup.d.ts +23 -0
- package/dist/core/worktree-setup.js +128 -9
- package/dist/core/worktree-setup.js.map +1 -1
- package/dist/core/worktree.d.ts +20 -2
- package/dist/core/worktree.js +74 -31
- package/dist/core/worktree.js.map +1 -1
- package/dist/interactive.js +2 -1
- package/dist/interactive.js.map +1 -1
- package/dist/modes/json-mode.js +11 -2
- package/dist/modes/json-mode.js.map +1 -1
- package/dist/modes/subagent-worker-mode.d.ts +36 -1
- package/dist/modes/subagent-worker-mode.js +100 -42
- package/dist/modes/subagent-worker-mode.js.map +1 -1
- package/dist/motion-agent/motion-agent.d.ts +7 -3
- package/dist/motion-agent/motion-agent.js +6 -8
- package/dist/motion-agent/motion-agent.js.map +1 -1
- package/dist/motion-agent/motion-prompt.d.ts +1 -1
- package/dist/motion-agent/motion-prompt.js +16 -25
- package/dist/motion-agent/motion-prompt.js.map +1 -1
- package/dist/motion-agent/motion-review-session.js +1 -1
- package/dist/motion-agent/motion-review-session.js.map +1 -1
- package/dist/motion-agent/motion-review.d.ts +10 -3
- package/dist/motion-agent/motion-review.js +15 -7
- package/dist/motion-agent/motion-review.js.map +1 -1
- package/dist/motion-agent/motion-studio-context.js +1 -1
- package/dist/motion-agent/motion-studio-context.js.map +1 -1
- package/dist/system-prompt.d.ts +2 -1
- package/dist/system-prompt.js +15 -4
- package/dist/system-prompt.js.map +1 -1
- package/dist/test-support/keep-alive.d.ts +14 -0
- package/dist/test-support/keep-alive.js +17 -0
- package/dist/test-support/keep-alive.js.map +1 -0
- package/dist/tools/ask-user.js +3 -3
- package/dist/tools/ask-user.js.map +1 -1
- package/dist/tools/bash-read-evidence.d.ts +10 -0
- package/dist/tools/bash-read-evidence.js +133 -0
- package/dist/tools/bash-read-evidence.js.map +1 -0
- package/dist/tools/bash.d.ts +10 -1
- package/dist/tools/bash.js +179 -7
- package/dist/tools/bash.js.map +1 -1
- package/dist/tools/debug.d.ts +54 -0
- package/dist/tools/debug.js +233 -0
- package/dist/tools/debug.js.map +1 -0
- package/dist/tools/edit.js +13 -5
- package/dist/tools/edit.js.map +1 -1
- package/dist/tools/goals.d.ts +1 -1
- package/dist/tools/index.d.ts +25 -2
- package/dist/tools/index.js +48 -7
- package/dist/tools/index.js.map +1 -1
- package/dist/tools/prompt-hints.js +2 -0
- package/dist/tools/prompt-hints.js.map +1 -1
- package/dist/tools/read-tracker.d.ts +35 -2
- package/dist/tools/read-tracker.js +108 -11
- package/dist/tools/read-tracker.js.map +1 -1
- package/dist/tools/read.js +39 -7
- package/dist/tools/read.js.map +1 -1
- package/dist/tools/skill.js +5 -0
- package/dist/tools/skill.js.map +1 -1
- package/dist/tools/subagent-control.js +44 -8
- package/dist/tools/subagent-control.js.map +1 -1
- package/dist/tools/subagent-shared.d.ts +48 -8
- package/dist/tools/subagent-shared.js +75 -14
- package/dist/tools/subagent-shared.js.map +1 -1
- package/dist/tools/subagent.d.ts +8 -2
- package/dist/tools/subagent.js +28 -10
- package/dist/tools/subagent.js.map +1 -1
- package/dist/tools/task-output.js +3 -2
- package/dist/tools/task-output.js.map +1 -1
- package/dist/tools/task-send.d.ts +1 -1
- package/dist/tools/task-send.js +15 -1
- package/dist/tools/task-send.js.map +1 -1
- package/dist/tools/tool-tiers.d.ts +2 -2
- package/dist/tools/tool-tiers.js +3 -2
- package/dist/tools/tool-tiers.js.map +1 -1
- package/dist/tools/truncate.d.ts +21 -0
- package/dist/tools/truncate.js +187 -0
- package/dist/tools/truncate.js.map +1 -1
- package/dist/tools/ui-adopt.js +2 -0
- package/dist/tools/ui-adopt.js.map +1 -1
- package/dist/tools/write.js +4 -3
- package/dist/tools/write.js.map +1 -1
- package/dist/ui/App.d.ts +0 -4
- package/dist/ui/App.js +5 -28
- package/dist/ui/App.js.map +1 -1
- package/dist/ui/components/ActivityIndicator.js +1 -0
- package/dist/ui/components/ActivityIndicator.js.map +1 -1
- package/dist/ui/components/Footer.js +1 -1
- package/dist/ui/components/Footer.js.map +1 -1
- package/dist/ui/hooks/useAgentLoop.d.ts +1 -8
- package/dist/ui/hooks/useAgentLoop.js +1 -119
- package/dist/ui/hooks/useAgentLoop.js.map +1 -1
- package/dist/ui/render.d.ts +2 -4
- package/dist/ui/render.js +3 -2
- package/dist/ui/render.js.map +1 -1
- package/dist/utils/git.d.ts +77 -0
- package/dist/utils/git.js +285 -21
- package/dist/utils/git.js.map +1 -1
- package/dist/utils/github-ci.js +2 -1
- package/dist/utils/github-ci.js.map +1 -1
- package/dist/utils/github.js +11 -9
- package/dist/utils/github.js.map +1 -1
- package/dist/utils/image.d.ts +14 -0
- package/dist/utils/image.js +16 -0
- package/dist/utils/image.js.map +1 -1
- package/dist/utils/process.d.ts +20 -0
- package/dist/utils/process.js +98 -0
- package/dist/utils/process.js.map +1 -1
- package/dist/utils/text.d.ts +12 -0
- package/dist/utils/text.js +11 -0
- package/dist/utils/text.js.map +1 -1
- package/package.json +6 -6
- package/assets/motion/skills/mixkit-split-text-617/SKILL.md +0 -115
- package/assets/motion/skills/mixkit-split-text-617/data/compositions/comp-480.json +0 -1
- package/assets/motion/skills/mixkit-split-text-617/data/compositions/comp-494.json +0 -1
- package/assets/motion/skills/mixkit-split-text-617/data/compositions/comp-5.json +0 -1
- package/assets/motion/skills/mixkit-split-text-617/data/compositions/comp-508.json +0 -1
- package/assets/motion/skills/mixkit-split-text-617/data/compositions/comp-6525.json +0 -1
- package/assets/motion/skills/mixkit-split-text-617/data/compositions/comp-6539.json +0 -1
- package/assets/motion/skills/mixkit-split-text-617/data/compositions/comp-6647.json +0 -1
- package/assets/motion/skills/mixkit-split-text-617/data/compositions/comp-6663.json +0 -1
- package/assets/motion/skills/mixkit-split-text-617/data/compositions/comp-6677.json +0 -1
- package/assets/motion/skills/mixkit-split-text-617/data/compositions/comp-6691.json +0 -1
- package/assets/motion/skills/mixkit-split-text-617/data/compositions/comp-6706.json +0 -1
- package/assets/motion/skills/mixkit-split-text-617/data/compositions/comp-6722.json +0 -1
- package/assets/motion/skills/mixkit-split-text-617/data/compositions/comp-6736.json +0 -1
- package/assets/motion/skills/mixkit-split-text-617/data/compositions/comp-6750.json +0 -1
- package/assets/motion/skills/mixkit-split-text-617/data/compositions/comp-6764.json +0 -1
- package/assets/motion/skills/mixkit-split-text-617/data/compositions/comp-6780.json +0 -1
- package/assets/motion/skills/mixkit-split-text-617/data/compositions/comp-6794.json +0 -1
- package/assets/motion/skills/mixkit-split-text-617/data/compositions/comp-6810.json +0 -1
- package/assets/motion/skills/mixkit-split-text-617/data/compositions/comp-6823.json +0 -1
- package/assets/motion/skills/mixkit-split-text-617/data/compositions/comp-6872.json +0 -1
- package/assets/motion/skills/mixkit-split-text-617/data/compositions/comp-6936.json +0 -1
- package/assets/motion/skills/mixkit-split-text-617/data/compositions/comp-76.json +0 -1
- package/assets/motion/skills/mixkit-split-text-617/data/manifest.json +0 -495
- package/assets/motion/skills/mixkit-split-text-617/references/RECONSTRUCTION.md +0 -201
- package/assets/motion/skills/mixkit-split-text-617/references/VERIFICATION.md +0 -107
- package/assets/motion/skills/mixkit-split-text-617/tools/inspect_motion.py +0 -130
- package/assets/motion/skills/video-qa/SKILL.md +0 -66
- package/dist/core/ideal-review-subagent.d.ts +0 -42
- package/dist/core/ideal-review-subagent.js +0 -95
- package/dist/core/ideal-review-subagent.js.map +0 -1
- package/dist/core/ideal-review.d.ts +0 -82
- package/dist/core/ideal-review.js +0 -242
- package/dist/core/ideal-review.js.map +0 -1
- package/dist/motion-agent/motion-check-tool.d.ts +0 -21
- package/dist/motion-agent/motion-check-tool.js +0 -206
- package/dist/motion-agent/motion-check-tool.js.map +0 -1
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<!--
|
|
3
|
+
gather-to-logo: the cast becomes the logo (move kit). Feature chips pop in
|
|
4
|
+
scattered around the frame, hold for a beat, then travel on arcs into the
|
|
5
|
+
centre and shrink into it; the moment the last one arrives the logo mark
|
|
6
|
+
and wordmark stamp in there and hold as the end card.
|
|
7
|
+
Needs the move kit: `library.mjs add` installs it; put its <script> in the
|
|
8
|
+
root head after GSAP.
|
|
9
|
+
Params (script top): POP_AT (first chip arrival), POP_STAGGER, GATHER_AT
|
|
10
|
+
(when they leave), GATHER_DURATION, GATHER_STAGGER, BOW (arc bend),
|
|
11
|
+
TARGET (gather point, stage px). Chip positions are left/top on each
|
|
12
|
+
.gl-chip (the chip's centre).
|
|
13
|
+
-->
|
|
14
|
+
<html lang="en">
|
|
15
|
+
<head>
|
|
16
|
+
<meta charset="UTF-8" />
|
|
17
|
+
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
18
|
+
</head>
|
|
19
|
+
<body>
|
|
20
|
+
<div
|
|
21
|
+
id="gather-to-logo-root"
|
|
22
|
+
data-composition-id="gather-to-logo"
|
|
23
|
+
data-start="0"
|
|
24
|
+
data-duration="5"
|
|
25
|
+
data-width="1920"
|
|
26
|
+
data-height="1080"
|
|
27
|
+
>
|
|
28
|
+
<style>
|
|
29
|
+
[data-composition-id="gather-to-logo"] {
|
|
30
|
+
position: absolute;
|
|
31
|
+
inset: 0;
|
|
32
|
+
overflow: hidden;
|
|
33
|
+
color: var(--ink, #111);
|
|
34
|
+
font-family: var(--text, sans-serif);
|
|
35
|
+
}
|
|
36
|
+
[data-composition-id="gather-to-logo"] .gl-stage {
|
|
37
|
+
position: absolute;
|
|
38
|
+
inset: 0;
|
|
39
|
+
}
|
|
40
|
+
[data-composition-id="gather-to-logo"] .gl-chip {
|
|
41
|
+
position: absolute;
|
|
42
|
+
width: 0;
|
|
43
|
+
height: 0;
|
|
44
|
+
}
|
|
45
|
+
[data-composition-id="gather-to-logo"] .gl-pill {
|
|
46
|
+
position: absolute;
|
|
47
|
+
left: 0;
|
|
48
|
+
top: 0;
|
|
49
|
+
white-space: nowrap;
|
|
50
|
+
padding: 22px 38px;
|
|
51
|
+
border-radius: 999px;
|
|
52
|
+
background: var(--field, #fff);
|
|
53
|
+
border: 3px solid var(--ink, #111);
|
|
54
|
+
color: var(--ink, #111);
|
|
55
|
+
font-family: var(--display, sans-serif);
|
|
56
|
+
font-weight: var(--display-weight, 700);
|
|
57
|
+
font-stretch: var(--display-stretch, 100%);
|
|
58
|
+
letter-spacing: var(--display-tracking, -0.02em);
|
|
59
|
+
font-size: 50px;
|
|
60
|
+
line-height: 1;
|
|
61
|
+
opacity: 0;
|
|
62
|
+
}
|
|
63
|
+
[data-composition-id="gather-to-logo"] .gl-pill.is-accent {
|
|
64
|
+
background: var(--accent, #2f5bff);
|
|
65
|
+
border-color: var(--accent, #2f5bff);
|
|
66
|
+
color: var(--field, #fff);
|
|
67
|
+
}
|
|
68
|
+
[data-composition-id="gather-to-logo"] .gl-logo {
|
|
69
|
+
position: absolute;
|
|
70
|
+
left: 960px;
|
|
71
|
+
top: 540px;
|
|
72
|
+
display: flex;
|
|
73
|
+
align-items: center;
|
|
74
|
+
gap: 36px;
|
|
75
|
+
white-space: nowrap;
|
|
76
|
+
opacity: 0;
|
|
77
|
+
}
|
|
78
|
+
[data-composition-id="gather-to-logo"] .gl-mark {
|
|
79
|
+
width: 176px;
|
|
80
|
+
height: 176px;
|
|
81
|
+
border-radius: var(--radius, 28px);
|
|
82
|
+
background: var(--accent, #2f5bff);
|
|
83
|
+
color: var(--field, #fff);
|
|
84
|
+
display: flex;
|
|
85
|
+
align-items: center;
|
|
86
|
+
justify-content: center;
|
|
87
|
+
font-family: var(--display, sans-serif);
|
|
88
|
+
font-weight: var(--display-weight, 700);
|
|
89
|
+
font-stretch: var(--display-stretch, 100%);
|
|
90
|
+
font-size: 120px;
|
|
91
|
+
line-height: 1;
|
|
92
|
+
}
|
|
93
|
+
[data-composition-id="gather-to-logo"] .gl-word {
|
|
94
|
+
font-family: var(--display, sans-serif);
|
|
95
|
+
font-weight: var(--display-weight, 700);
|
|
96
|
+
font-stretch: var(--display-stretch, 100%);
|
|
97
|
+
letter-spacing: var(--display-tracking, -0.02em);
|
|
98
|
+
font-size: 168px;
|
|
99
|
+
line-height: 1;
|
|
100
|
+
color: var(--ink, #111);
|
|
101
|
+
}
|
|
102
|
+
</style>
|
|
103
|
+
<div class="gl-stage">
|
|
104
|
+
<!-- edit: feature chips (left/top = chip centre in stage px; add is-accent for emphasis) -->
|
|
105
|
+
<div class="gl-chip" style="left: 330px; top: 210px"><div class="gl-pill">Fast sync</div></div>
|
|
106
|
+
<div class="gl-chip" style="left: 960px; top: 150px"><div class="gl-pill is-accent">Offline</div></div>
|
|
107
|
+
<div class="gl-chip" style="left: 1580px; top: 230px"><div class="gl-pill">Shared boards</div></div>
|
|
108
|
+
<div class="gl-chip" style="left: 1660px; top: 560px"><div class="gl-pill is-accent">Comments</div></div>
|
|
109
|
+
<div class="gl-chip" style="left: 1500px; top: 880px"><div class="gl-pill">Version history</div></div>
|
|
110
|
+
<div class="gl-chip" style="left: 920px; top: 930px"><div class="gl-pill">Templates</div></div>
|
|
111
|
+
<div class="gl-chip" style="left: 350px; top: 860px"><div class="gl-pill is-accent">Search</div></div>
|
|
112
|
+
<div class="gl-chip" style="left: 270px; top: 540px"><div class="gl-pill">Dark mode</div></div>
|
|
113
|
+
<div class="gl-logo">
|
|
114
|
+
<!-- edit: logo mark letter -->
|
|
115
|
+
<div class="gl-mark">n</div>
|
|
116
|
+
<!-- edit: wordmark -->
|
|
117
|
+
<div class="gl-word">notably</div>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
<script>
|
|
122
|
+
(function () {
|
|
123
|
+
const kit = window.GGMotionKit;
|
|
124
|
+
const root = document.querySelector('[data-composition-id="gather-to-logo"]');
|
|
125
|
+
const stage = root.querySelector(".gl-stage");
|
|
126
|
+
const chips = root.querySelectorAll(".gl-chip");
|
|
127
|
+
const pills = root.querySelectorAll(".gl-pill");
|
|
128
|
+
const logo = root.querySelector(".gl-logo");
|
|
129
|
+
const tl = gsap.timeline({ paused: true });
|
|
130
|
+
|
|
131
|
+
const POP_AT = 0.2;
|
|
132
|
+
const POP_STAGGER = 0.09;
|
|
133
|
+
const GATHER_AT = 1.75;
|
|
134
|
+
const GATHER_DURATION = 0.85;
|
|
135
|
+
const GATHER_STAGGER = 0.07;
|
|
136
|
+
const BOW = 0.3;
|
|
137
|
+
const TARGET = { x: 960, y: 540 };
|
|
138
|
+
|
|
139
|
+
gsap.set(pills, { xPercent: -50, yPercent: -50 });
|
|
140
|
+
gsap.set(logo, { xPercent: -50, yPercent: -50 });
|
|
141
|
+
pills.forEach((pill, i) => kit.pop(tl, pill, POP_AT + i * POP_STAGGER, { from: 0.4 }));
|
|
142
|
+
|
|
143
|
+
const arrived = kit.converge(tl, chips, GATHER_AT, TARGET, {
|
|
144
|
+
duration: GATHER_DURATION,
|
|
145
|
+
stagger: GATHER_STAGGER,
|
|
146
|
+
bow: BOW,
|
|
147
|
+
space: stage,
|
|
148
|
+
seed: 7,
|
|
149
|
+
});
|
|
150
|
+
// The stamp's contact lands exactly on the last arrival.
|
|
151
|
+
kit.stamp(tl, logo, arrived - 0.2, { rotate: 0, from: 1.8 });
|
|
152
|
+
tl.set({}, {}, 5);
|
|
153
|
+
|
|
154
|
+
window.__timelines = window.__timelines || {};
|
|
155
|
+
window.__timelines["gather-to-logo"] = tl;
|
|
156
|
+
})();
|
|
157
|
+
</script>
|
|
158
|
+
</body>
|
|
159
|
+
</html>
|
|
Binary file
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "morph-carry",
|
|
3
|
+
"name": "Morph carry",
|
|
4
|
+
"kind": "transition",
|
|
5
|
+
"description": "A cursor presses a pill button and the button's own box springs open into the full frame, its label leaving as the next scene's headline rises inside it. Edit the button label, the hint line and the next scene's kicker and headline.",
|
|
6
|
+
"tags": ["handoff", "continuous", "kit", "morph", "cursor", "button", "box-to-frame"],
|
|
7
|
+
"fonts": [],
|
|
8
|
+
"duration": 5,
|
|
9
|
+
"previewAt": 1.35,
|
|
10
|
+
"license": "original",
|
|
11
|
+
"requires": ["kit"],
|
|
12
|
+
"previewLook": "soft-light-ad"
|
|
13
|
+
}
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<!--
|
|
3
|
+
morph-carry: the box becomes the next frame. A pill button sits mid-frame;
|
|
4
|
+
a cursor travels to it and presses; on the press the button's own
|
|
5
|
+
rectangle morphs (spring) into the full 1920x1080 frame with square
|
|
6
|
+
corners. Its label leaves early and the next scene's headline rises inside
|
|
7
|
+
the growing box. One element changes; nothing crossfades.
|
|
8
|
+
Needs the move kit: `library.mjs add` installs it; put its <script> in the
|
|
9
|
+
root head after GSAP.
|
|
10
|
+
Params (script top): CURSOR_FROM (start point, px), MOVE_AT (cursor
|
|
11
|
+
leaves), MORPH_DELAY (press -> morph start), MORPH_EASE / MORPH_DUR
|
|
12
|
+
(kit ease name and seconds for the box-to-frame morph), HEADLINE_DELAY (morph start -> headline rise). Button size and
|
|
13
|
+
place: --mc-w / --mc-h / --mc-x / --mc-y (centre).
|
|
14
|
+
-->
|
|
15
|
+
<html lang="en">
|
|
16
|
+
<head>
|
|
17
|
+
<meta charset="UTF-8" />
|
|
18
|
+
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
19
|
+
</head>
|
|
20
|
+
<body>
|
|
21
|
+
<div
|
|
22
|
+
id="morph-carry-root"
|
|
23
|
+
data-composition-id="morph-carry"
|
|
24
|
+
data-start="0"
|
|
25
|
+
data-duration="5"
|
|
26
|
+
data-width="1920"
|
|
27
|
+
data-height="1080"
|
|
28
|
+
>
|
|
29
|
+
<style>
|
|
30
|
+
[data-composition-id="morph-carry"] {
|
|
31
|
+
--mc-w: 460px;
|
|
32
|
+
--mc-h: 124px;
|
|
33
|
+
--mc-x: 960px;
|
|
34
|
+
--mc-y: 540px;
|
|
35
|
+
position: absolute;
|
|
36
|
+
inset: 0;
|
|
37
|
+
overflow: hidden;
|
|
38
|
+
color: var(--ink, #111);
|
|
39
|
+
font-family: var(--text, sans-serif);
|
|
40
|
+
}
|
|
41
|
+
[data-composition-id="morph-carry"] .mc-hint {
|
|
42
|
+
position: absolute;
|
|
43
|
+
left: 0;
|
|
44
|
+
right: 0;
|
|
45
|
+
top: calc(var(--mc-y) - 190px);
|
|
46
|
+
text-align: center;
|
|
47
|
+
font-family: var(--mono, monospace);
|
|
48
|
+
font-size: 26px;
|
|
49
|
+
letter-spacing: 0.1em;
|
|
50
|
+
text-transform: uppercase;
|
|
51
|
+
color: var(--muted, #666);
|
|
52
|
+
}
|
|
53
|
+
[data-composition-id="morph-carry"] .mc-box {
|
|
54
|
+
position: absolute;
|
|
55
|
+
left: calc(var(--mc-x) - var(--mc-w) / 2);
|
|
56
|
+
top: calc(var(--mc-y) - var(--mc-h) / 2);
|
|
57
|
+
width: var(--mc-w);
|
|
58
|
+
height: var(--mc-h);
|
|
59
|
+
border-radius: calc(var(--mc-h) / 2);
|
|
60
|
+
background: var(--ink, #111);
|
|
61
|
+
color: var(--field, #fff);
|
|
62
|
+
overflow: hidden;
|
|
63
|
+
box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.35);
|
|
64
|
+
}
|
|
65
|
+
[data-composition-id="morph-carry"] .mc-label,
|
|
66
|
+
[data-composition-id="morph-carry"] .mc-scene {
|
|
67
|
+
position: absolute;
|
|
68
|
+
inset: 0;
|
|
69
|
+
display: flex;
|
|
70
|
+
align-items: center;
|
|
71
|
+
justify-content: center;
|
|
72
|
+
white-space: nowrap;
|
|
73
|
+
}
|
|
74
|
+
[data-composition-id="morph-carry"] .mc-label {
|
|
75
|
+
font-size: 40px;
|
|
76
|
+
font-weight: 600;
|
|
77
|
+
gap: 18px;
|
|
78
|
+
}
|
|
79
|
+
[data-composition-id="morph-carry"] .mc-scene {
|
|
80
|
+
flex-direction: column;
|
|
81
|
+
gap: 34px;
|
|
82
|
+
}
|
|
83
|
+
[data-composition-id="morph-carry"] .mc-kicker {
|
|
84
|
+
font-family: var(--mono, monospace);
|
|
85
|
+
font-size: 28px;
|
|
86
|
+
letter-spacing: 0.12em;
|
|
87
|
+
text-transform: uppercase;
|
|
88
|
+
opacity: 0;
|
|
89
|
+
}
|
|
90
|
+
[data-composition-id="morph-carry"] .mc-head {
|
|
91
|
+
font-family: var(--display, sans-serif);
|
|
92
|
+
font-weight: var(--display-weight, 700);
|
|
93
|
+
font-stretch: var(--display-stretch, 100%);
|
|
94
|
+
letter-spacing: var(--display-tracking, -0.02em);
|
|
95
|
+
font-size: 150px;
|
|
96
|
+
line-height: 1;
|
|
97
|
+
}
|
|
98
|
+
[data-composition-id="morph-carry"] .mc-cursor {
|
|
99
|
+
position: absolute;
|
|
100
|
+
left: 0;
|
|
101
|
+
top: 0;
|
|
102
|
+
width: 56px;
|
|
103
|
+
height: 56px;
|
|
104
|
+
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
|
|
105
|
+
}
|
|
106
|
+
</style>
|
|
107
|
+
<!-- edit: line above the button -->
|
|
108
|
+
<div class="mc-hint">Step 1 of 2</div>
|
|
109
|
+
<div class="mc-box">
|
|
110
|
+
<div class="mc-label">
|
|
111
|
+
<!-- edit: button label -->
|
|
112
|
+
<span>Get started</span>
|
|
113
|
+
<svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
|
|
114
|
+
</div>
|
|
115
|
+
<div class="mc-scene">
|
|
116
|
+
<!-- edit: next scene kicker and headline -->
|
|
117
|
+
<div class="mc-kicker">Chapter two</div>
|
|
118
|
+
<div class="mc-head">Now it's yours</div>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
<svg class="mc-cursor" viewBox="0 0 28 28">
|
|
122
|
+
<path d="M5 3.2v19.6c0 .8 1 1.2 1.5.6l4.6-5.1 3.4 7.6c.3.6 1 .9 1.6.6l2.3-1c.6-.3.9-1 .6-1.6l-3.4-7.5h6.8c.8 0 1.2-1 .6-1.6L6.5 2.6C6 2.1 5 2.4 5 3.2z" fill="var(--ink, #111)" stroke="var(--field, #fff)" stroke-width="1.6" stroke-linejoin="round" />
|
|
123
|
+
</svg>
|
|
124
|
+
</div>
|
|
125
|
+
<script>
|
|
126
|
+
(function () {
|
|
127
|
+
const CURSOR_FROM = { x: 1560, y: 900 };
|
|
128
|
+
const MOVE_AT = 0.35;
|
|
129
|
+
const MORPH_DELAY = 0.12;
|
|
130
|
+
const MORPH_EASE = "travel";
|
|
131
|
+
const MORPH_DUR = 0.9;
|
|
132
|
+
const HEADLINE_DELAY = 0.55;
|
|
133
|
+
|
|
134
|
+
const kit = window.GGMotionKit;
|
|
135
|
+
const root = document.querySelector('[data-composition-id="morph-carry"]');
|
|
136
|
+
const box = root.querySelector(".mc-box");
|
|
137
|
+
const label = root.querySelector(".mc-label");
|
|
138
|
+
const hint = root.querySelector(".mc-hint");
|
|
139
|
+
const kicker = root.querySelector(".mc-kicker");
|
|
140
|
+
const head = root.querySelector(".mc-head");
|
|
141
|
+
const cursor = root.querySelector(".mc-cursor");
|
|
142
|
+
const tl = gsap.timeline({ paused: true });
|
|
143
|
+
|
|
144
|
+
const target = kit.centerOf(box, root);
|
|
145
|
+
const { presses } = kit.cursorPath(tl, cursor, MOVE_AT, [
|
|
146
|
+
CURSOR_FROM,
|
|
147
|
+
{ x: target.x + 40, y: target.y + 14, click: true, hold: 0.3 },
|
|
148
|
+
]);
|
|
149
|
+
const press = presses[0];
|
|
150
|
+
|
|
151
|
+
// The press itself: the pill gives a little, then the cursor lets go.
|
|
152
|
+
tl.to(box, { scale: 0.96, duration: 0.09, ease: "power1.out" }, press);
|
|
153
|
+
tl.to(box, { scale: 1, duration: 0.3, ease: kit.ease.firm }, press + 0.09);
|
|
154
|
+
tl.to(cursor, { opacity: 0, duration: 0.2, ease: "none" }, press + 0.2);
|
|
155
|
+
|
|
156
|
+
// Label leaves early; the box becomes the frame.
|
|
157
|
+
const morphAt = press + MORPH_DELAY;
|
|
158
|
+
tl.to(label, { opacity: 0, y: -16, duration: 0.18, ease: "power2.in" }, morphAt);
|
|
159
|
+
tl.to(hint, { opacity: 0, duration: 0.2, ease: "none" }, morphAt);
|
|
160
|
+
tl.to(box, { boxShadow: "0 0 0 0 rgba(0,0,0,0)", duration: 0.4, ease: "none" }, morphAt);
|
|
161
|
+
kit.reshape(tl, box, morphAt, { x: 0, y: 0, w: 1920, h: 1080, r: 0 }, { ease: MORPH_EASE, duration: MORPH_DUR });
|
|
162
|
+
|
|
163
|
+
// Next scene arrives inside it.
|
|
164
|
+
const riseAt = morphAt + HEADLINE_DELAY;
|
|
165
|
+
kit.liftWords(tl, head, riseAt, { stagger: 0.09 });
|
|
166
|
+
tl.fromTo(kicker, { opacity: 0, y: 14 }, { opacity: 0.75, y: 0, duration: 0.4, ease: kit.ease.snap }, riseAt + 0.25);
|
|
167
|
+
|
|
168
|
+
window.__timelines = window.__timelines || {};
|
|
169
|
+
window.__timelines["morph-carry"] = tl;
|
|
170
|
+
})();
|
|
171
|
+
</script>
|
|
172
|
+
</body>
|
|
173
|
+
</html>
|
|
Binary file
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "one-shape-journey",
|
|
3
|
+
"name": "One shape journey",
|
|
4
|
+
"kind": "diagram",
|
|
5
|
+
"description": "One shape never leaves: a dot pops in, stretches into a progress bar that fills, morphs into a button, then into an app-icon block as the product name rises beside it, with quick label swaps inside. Edit the progress label, button text, icon letter, name and tagline.",
|
|
6
|
+
"tags": ["morph", "continuous", "kit", "progress", "button", "app-icon", "logo", "end-card", "handoff"],
|
|
7
|
+
"fonts": [],
|
|
8
|
+
"duration": 6,
|
|
9
|
+
"previewAt": 3.1,
|
|
10
|
+
"license": "original",
|
|
11
|
+
"requires": ["kit"],
|
|
12
|
+
"previewLook": "dark-studio"
|
|
13
|
+
}
|
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<!--
|
|
3
|
+
one-shape-journey: one element, four roles (move kit). A dot pops in,
|
|
4
|
+
stretches into a progress bar that fills, morphs into a button, then into
|
|
5
|
+
a square app icon while the product name rises beside it. The shape is
|
|
6
|
+
never replaced: each change is the same element's box, radius and colour
|
|
7
|
+
(kit.reshape), and the text inside changes by quick label swaps.
|
|
8
|
+
Needs the move kit: `library.mjs add` installs it; put its <script> in the
|
|
9
|
+
root head after GSAP.
|
|
10
|
+
Params (script top): BOXES (the shape's rect for each role, stage px:
|
|
11
|
+
x, y = top-left), STEPS (when each morph starts), FILL (progress fill
|
|
12
|
+
start and length), SWAP (label swap out/in time), LABELS (the text
|
|
13
|
+
shown inside, from the markup's data-* attributes).
|
|
14
|
+
-->
|
|
15
|
+
<html lang="en">
|
|
16
|
+
<head>
|
|
17
|
+
<meta charset="UTF-8" />
|
|
18
|
+
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
19
|
+
</head>
|
|
20
|
+
<body>
|
|
21
|
+
<div
|
|
22
|
+
id="one-shape-journey-root"
|
|
23
|
+
data-composition-id="one-shape-journey"
|
|
24
|
+
data-start="0"
|
|
25
|
+
data-duration="6"
|
|
26
|
+
data-width="1920"
|
|
27
|
+
data-height="1080"
|
|
28
|
+
>
|
|
29
|
+
<style>
|
|
30
|
+
[data-composition-id="one-shape-journey"] {
|
|
31
|
+
position: absolute;
|
|
32
|
+
inset: 0;
|
|
33
|
+
overflow: hidden;
|
|
34
|
+
color: var(--ink, #111);
|
|
35
|
+
font-family: var(--text, sans-serif);
|
|
36
|
+
}
|
|
37
|
+
[data-composition-id="one-shape-journey"] .os-stage {
|
|
38
|
+
position: absolute;
|
|
39
|
+
inset: 0;
|
|
40
|
+
}
|
|
41
|
+
[data-composition-id="one-shape-journey"] .os-shape {
|
|
42
|
+
position: absolute;
|
|
43
|
+
left: 936px;
|
|
44
|
+
top: 516px;
|
|
45
|
+
width: 48px;
|
|
46
|
+
height: 48px;
|
|
47
|
+
border-radius: 24px;
|
|
48
|
+
overflow: hidden;
|
|
49
|
+
background: var(--ink, #111);
|
|
50
|
+
opacity: 0;
|
|
51
|
+
}
|
|
52
|
+
[data-composition-id="one-shape-journey"] .os-fill {
|
|
53
|
+
position: absolute;
|
|
54
|
+
left: 0;
|
|
55
|
+
top: 0;
|
|
56
|
+
bottom: 0;
|
|
57
|
+
width: 0%;
|
|
58
|
+
background: var(--accent, #2f5bff);
|
|
59
|
+
}
|
|
60
|
+
[data-composition-id="one-shape-journey"] .os-label {
|
|
61
|
+
position: absolute;
|
|
62
|
+
inset: 0;
|
|
63
|
+
display: flex;
|
|
64
|
+
align-items: center;
|
|
65
|
+
justify-content: center;
|
|
66
|
+
white-space: nowrap;
|
|
67
|
+
color: var(--field, #fff);
|
|
68
|
+
line-height: 1;
|
|
69
|
+
}
|
|
70
|
+
[data-composition-id="one-shape-journey"] .os-label.is-mono {
|
|
71
|
+
font-family: var(--mono, monospace);
|
|
72
|
+
font-size: 30px;
|
|
73
|
+
letter-spacing: 0.06em;
|
|
74
|
+
}
|
|
75
|
+
[data-composition-id="one-shape-journey"] .os-label.is-text {
|
|
76
|
+
font-family: var(--text, sans-serif);
|
|
77
|
+
font-weight: 600;
|
|
78
|
+
font-size: 44px;
|
|
79
|
+
}
|
|
80
|
+
[data-composition-id="one-shape-journey"] .os-label.is-glyph {
|
|
81
|
+
font-family: var(--display, sans-serif);
|
|
82
|
+
font-weight: var(--display-weight, 700);
|
|
83
|
+
font-stretch: var(--display-stretch, 100%);
|
|
84
|
+
font-size: 136px;
|
|
85
|
+
}
|
|
86
|
+
[data-composition-id="one-shape-journey"] .os-name {
|
|
87
|
+
position: absolute;
|
|
88
|
+
left: 820px;
|
|
89
|
+
top: 448px;
|
|
90
|
+
white-space: nowrap;
|
|
91
|
+
}
|
|
92
|
+
[data-composition-id="one-shape-journey"] .os-title {
|
|
93
|
+
font-family: var(--display, sans-serif);
|
|
94
|
+
font-weight: var(--display-weight, 700);
|
|
95
|
+
font-stretch: var(--display-stretch, 100%);
|
|
96
|
+
letter-spacing: var(--display-tracking, -0.02em);
|
|
97
|
+
font-size: 150px;
|
|
98
|
+
line-height: 1;
|
|
99
|
+
}
|
|
100
|
+
[data-composition-id="one-shape-journey"] .os-tag {
|
|
101
|
+
margin-top: 18px;
|
|
102
|
+
font-family: var(--mono, monospace);
|
|
103
|
+
font-size: 26px;
|
|
104
|
+
letter-spacing: 0.08em;
|
|
105
|
+
text-transform: uppercase;
|
|
106
|
+
color: var(--muted, #666);
|
|
107
|
+
}
|
|
108
|
+
</style>
|
|
109
|
+
<!-- edit: data-progress = bar label prefix, data-button = button text, data-glyph = icon letter -->
|
|
110
|
+
<div class="os-stage" data-progress="Uploading" data-button="Open the app" data-glyph="n">
|
|
111
|
+
<div class="os-shape">
|
|
112
|
+
<div class="os-fill"></div>
|
|
113
|
+
<div class="os-label"></div>
|
|
114
|
+
</div>
|
|
115
|
+
<div class="os-name">
|
|
116
|
+
<!-- edit: product name -->
|
|
117
|
+
<div class="os-title">notably</div>
|
|
118
|
+
<!-- edit: tagline -->
|
|
119
|
+
<div class="os-tag">Now on every device</div>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
<script>
|
|
124
|
+
(function () {
|
|
125
|
+
const kit = window.GGMotionKit;
|
|
126
|
+
const root = document.querySelector('[data-composition-id="one-shape-journey"]');
|
|
127
|
+
const stage = root.querySelector(".os-stage");
|
|
128
|
+
const shape = root.querySelector(".os-shape");
|
|
129
|
+
const fill = root.querySelector(".os-fill");
|
|
130
|
+
const label = root.querySelector(".os-label");
|
|
131
|
+
const title = root.querySelector(".os-title");
|
|
132
|
+
const tag = root.querySelector(".os-tag");
|
|
133
|
+
const tl = gsap.timeline({ paused: true });
|
|
134
|
+
|
|
135
|
+
const DURATION = 6;
|
|
136
|
+
const BOXES = {
|
|
137
|
+
bar: { x: 560, y: 504, w: 800, h: 72, r: 36 },
|
|
138
|
+
button: { x: 740, y: 476, w: 440, h: 128, r: 64 },
|
|
139
|
+
icon: { x: 560, y: 440, w: 200, h: 200, r: 48 },
|
|
140
|
+
};
|
|
141
|
+
const STEPS = { dot: 0.2, bar: 0.85, button: 2.75, icon: 3.95 };
|
|
142
|
+
const FILL = { at: 1.3, duration: 1.3 };
|
|
143
|
+
const SWAP = 0.09;
|
|
144
|
+
const LABELS = {
|
|
145
|
+
progress: stage.dataset.progress,
|
|
146
|
+
button: stage.dataset.button,
|
|
147
|
+
glyph: stage.dataset.glyph,
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
// Role 1: a dot.
|
|
151
|
+
kit.pop(tl, shape, STEPS.dot, { from: 0.1 });
|
|
152
|
+
// Role 2: the same dot stretches into a bar and fills.
|
|
153
|
+
kit.reshape(tl, shape, STEPS.bar, BOXES.bar, { spring: "whip" });
|
|
154
|
+
const fillEnd = FILL.at + FILL.duration;
|
|
155
|
+
// Role 3: the full bar gathers into a button.
|
|
156
|
+
kit.reshape(tl, shape, STEPS.button, BOXES.button, { spring: "whip" });
|
|
157
|
+
// Role 4: the button squares up into the app icon and darkens to ink.
|
|
158
|
+
kit.reshape(tl, shape, STEPS.icon, BOXES.icon, { spring: "heavy" });
|
|
159
|
+
const nameAt = kit.liftWords(tl, title, STEPS.icon + 0.35);
|
|
160
|
+
kit.liftWords(tl, tag, nameAt);
|
|
161
|
+
|
|
162
|
+
// Fill amount, and what the label says when: one seek-safe draw.
|
|
163
|
+
const progress = (t) => kit.ease.travel(Math.min(1, Math.max(0, (t - FILL.at) / FILL.duration)));
|
|
164
|
+
const iconFill = (t) => 1 - kit.ease.snap(Math.min(1, Math.max(0, (t - STEPS.icon) / 0.35)));
|
|
165
|
+
const plan = [
|
|
166
|
+
{ at: FILL.at, cls: "is-mono", text: (t) => `${LABELS.progress} ${Math.round(progress(t) * 100)}%` },
|
|
167
|
+
{ at: STEPS.button + 0.12, cls: "is-text", text: () => LABELS.button },
|
|
168
|
+
{ at: STEPS.icon + 0.12, cls: "is-glyph", text: () => LABELS.glyph },
|
|
169
|
+
];
|
|
170
|
+
kit.drive(tl, 0, DURATION, (t) => {
|
|
171
|
+
fill.style.width = `${(t < STEPS.icon ? progress(t) : iconFill(t)) * 100}%`;
|
|
172
|
+
let i = -1;
|
|
173
|
+
while (i + 1 < plan.length && plan[i + 1].at <= t) i++;
|
|
174
|
+
if (i < 0) {
|
|
175
|
+
label.textContent = "";
|
|
176
|
+
return;
|
|
177
|
+
}
|
|
178
|
+
const step = plan[i];
|
|
179
|
+
const since = t - step.at;
|
|
180
|
+
const until = i + 1 < plan.length ? plan[i + 1].at - t : Infinity;
|
|
181
|
+
// Quick swap: the old label drops out just before, the new one rises in.
|
|
182
|
+
const inP = Math.min(1, since / SWAP);
|
|
183
|
+
const outP = Math.min(1, Math.max(0, 1 - until / SWAP));
|
|
184
|
+
label.className = `os-label ${step.cls}`;
|
|
185
|
+
label.textContent = step.text(t);
|
|
186
|
+
label.style.opacity = String(Math.min(inP, 1 - outP));
|
|
187
|
+
label.style.transform = `translateY(${(1 - kit.ease.snap(inP)) * 40 - outP * 40}%)`;
|
|
188
|
+
});
|
|
189
|
+
|
|
190
|
+
window.__timelines = window.__timelines || {};
|
|
191
|
+
window.__timelines["one-shape-journey"] = tl;
|
|
192
|
+
})();
|
|
193
|
+
</script>
|
|
194
|
+
</body>
|
|
195
|
+
</html>
|
|
Binary file
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "open-from-subject",
|
|
3
|
+
"name": "Open from subject",
|
|
4
|
+
"kind": "transition",
|
|
5
|
+
"description": "A round mark with a label pops in and holds, then the next stage opens as a growing circle from the mark's centre onto a --field-2 scene where a headline rises. Edit the mark glyph, its label, and the stage's kicker and headline.",
|
|
6
|
+
"tags": ["handoff", "continuous", "kit", "iris", "circle", "reveal", "logo"],
|
|
7
|
+
"fonts": [],
|
|
8
|
+
"duration": 4,
|
|
9
|
+
"previewAt": 2.4,
|
|
10
|
+
"license": "original",
|
|
11
|
+
"requires": ["kit"],
|
|
12
|
+
"previewLook": "duotone-broadcast"
|
|
13
|
+
}
|