diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 5f46fcb85b..43b10f519c 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -34,6 +34,7 @@ jobs: code: ${{ steps.filter.outputs.code }} cli: ${{ steps.filter.outputs.cli }} skills: ${{ steps.filter.outputs.skills }} + catalog_index: ${{ steps.filter.outputs.catalog_index }} codex_plugin: ${{ steps.filter.outputs.codex_plugin }} gcp_beginframe: ${{ steps.filter.outputs.gcp_beginframe }} studio: ${{ steps.filter.outputs.studio }} @@ -52,6 +53,10 @@ jobs: with: token: "" filters: | + catalog_index: + - "registry/registry.json" + - "registry/catalog-artifact/**" + - "scripts/catalog/check-artifact-coverage.ts" code: - "packages/**" - "scripts/**" @@ -363,6 +368,21 @@ jobs: # `gen:skills-manifest --check`, which compares per-skill content hashes; the # manifest carries no version/timestamp, so it only fails on real content # drift. bun runs the TS script directly, no install needed. + catalog-index-coverage: + name: "Catalog: search index covers the registry" + needs: changes + if: needs.changes.outputs.catalog_index == 'true' + runs-on: ubuntu-latest + timeout-minutes: 3 + steps: + - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4 + - uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2 + # Comparing two name lists needs neither the embedding model nor a + # network call, so this stays a seconds-long gate. Regenerating the + # vectors does need the model, which is why CI checks rather than fixes. + - name: Verify every searchable registry item has a vector + run: bun scripts/catalog/check-artifact-coverage.ts + skills-manifest: name: "Skills: manifest in sync" needs: changes diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 307c3cc2b9..43025de04c 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -91,11 +91,36 @@ Blocks don't need `demo.html` — they are already standalone compositions. ### Checklist for new items +**Anyone can add an item.** Nothing here needs commit access, and the two steps +that do need something a contributor may not have are handled by a maintainer +before merge, listed at the end. + 1. Create `registry///registry-item.json` following the [schema](packages/core/schemas/registry-item.json) -2. Add the item to `registry/registry.json` -3. For components: include a `demo.html` -4. Run `npx hyperframes lint` and `npx hyperframes validate` on your HTML -5. Test the install flow: `hyperframes add --dir /tmp/test-project` +2. For components: include a `demo.html` +3. Run `npx hyperframes lint` and `npx hyperframes validate` on your HTML +4. Test the install flow: `hyperframes add --dir /tmp/test-project` +5. Regenerate the manifest: `npx tsx scripts/generate-registry-items.ts` + +`registry/registry.json` is generated from the item directories, so edit it with +that script rather than by hand. An entry added by hand survives until the next +regeneration and then disappears; entries left behind for directories that no +longer exist are worse, because `hyperframes add ` resolves the name and +then fails on missing files. + +### What a maintainer finishes for you + +Two things need assets an outside contributor is not expected to install. Open +the pull request without them and say so; neither blocks review. + +| Thing | If you have it | If you do not | +| ----------------------------------------------- | --------------------------------------------------------- | ----------------------------------------------------------------------- | +| The search index (`registry/catalog-artifact/`) | The pre-commit hook rebuilds and stages it | The hook skips, CI names the gap, a maintainer regenerates before merge | +| The catalog preview image | Internal contributors run `scripts/upload-docs-images.sh` | Attach the preview MP4 to the PR instead | + +The search index needs a 32 MB embedding model, which is an opt-in for catalog +search rather than a build dependency. Until it is regenerated your item is +findable by word search and not by meaning, which is the same state as any item +published since a user last refreshed their copy. ### Auto-generated docs diff --git a/bun.lock b/bun.lock index af5e10ccec..d0a60ce835 100644 --- a/bun.lock +++ b/bun.lock @@ -18,6 +18,7 @@ "oxlint": "^1.56.0", "tsx": "^4.21.0", "typescript": "^5.0.0", + "vitest": "^3.2.4", "yaml": "^2.9.0", }, }, diff --git a/docs/schema/registry.json b/docs/schema/registry.json index ced96b1f28..58f72ba290 100644 --- a/docs/schema/registry.json +++ b/docs/schema/registry.json @@ -21,6 +21,19 @@ "format": "uri", "description": "Registry homepage URL." }, + "catalogArtifact": { + "type": "object", + "description": "Published on-device vector artifact for this registry.", + "required": ["revision"], + "additionalProperties": false, + "properties": { + "revision": { + "type": "string", + "pattern": "^[a-f0-9]{64}$", + "description": "SHA-256 identity of the searchable corpus and embedding contract." + } + } + }, "items": { "type": "array", "description": "Items in this registry. Each entry is a shorthand reference; the full item manifest lives at //registry-item.json.", diff --git a/lefthook.yml b/lefthook.yml index 8d42077b37..0ad4d36dc6 100644 --- a/lefthook.yml +++ b/lefthook.yml @@ -17,6 +17,19 @@ pre-commit: # enforces the same via the "Skills: manifest in sync" job). Churn-free: # the generator rewrites only when a content hash actually changed. run: bun packages/cli/scripts/gen-skills-manifest.ts && git add skills-manifest.json + catalog-index: + glob: "registry/*/*/registry-item.json" + # Rebuild the on-device search vectors when an item's searchable text + # changes, then re-stage them so registry/catalog-artifact/ never drifts + # from the registry (CI enforces the same via the "Catalog: search index + # covers the registry" job). Churn-free: identical inputs re-embed to + # identical bytes, so an unrelated registry edit leaves no diff. + # Exit 3 is "no embedding model here", which is the normal case for an + # outside contributor. Their commit must not be blocked over a 32 MB + # opt-in they were never asked to install; CI names the gap instead. + run: | + bun scripts/catalog/build-local-vectors.ts || { [ $? -eq 3 ] && exit 0; exit 1; } + git add registry/registry.json registry/catalog-artifact/local-vectors.json registry/catalog-artifact/local-vectors.bin typecheck: glob: "*.{ts,tsx}" run: cd packages/core && bunx tsc --noEmit && cd ../studio && bunx tsc --noEmit && cd ../.. && bunx tsc --noEmit -p scripts/tsconfig.json diff --git a/package.json b/package.json index 082656de98..6013706b6a 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "player:perf": "bun run --filter @hyperframes/player perf", "format:check": "oxfmt --check .", "knip": "knip", - "test:scripts": "node --import tsx --test scripts/check-tracked-artifacts.test.mjs scripts/check-no-main-deletions.test.mjs scripts/check-docs-snippet-motion.test.mjs scripts/registry-target-paths.test.mjs scripts/check-workspace-contracts.test.mjs scripts/check-package-cycles.test.mjs scripts/check-cli-process-ownership.test.mjs scripts/package-subpaths.test.mjs scripts/validate-release-channel.test.mjs scripts/publish-workflow.test.mjs scripts/install-workspace-dependencies.test.mjs scripts/draft-changelog.test.ts scripts/set-version.test.ts scripts/release-prepare.test.ts scripts/cli-options.test.ts scripts/changelog-weekly.test.ts scripts/claude-plugin-compression.test.ts scripts/studio-runtime-smoke.test.mjs scripts/verify-packed-manifests.test.mjs scripts/lint-skills.test.mjs packages/gcp-cloud-run/check-dockerfile-workspaces.test.mjs", + "test:scripts": "node --import tsx --test scripts/check-tracked-artifacts.test.mjs scripts/check-no-main-deletions.test.mjs scripts/check-docs-snippet-motion.test.mjs scripts/registry-target-paths.test.mjs scripts/check-workspace-contracts.test.mjs scripts/check-package-cycles.test.mjs scripts/check-cli-process-ownership.test.mjs scripts/package-subpaths.test.mjs scripts/validate-release-channel.test.mjs scripts/publish-workflow.test.mjs scripts/install-workspace-dependencies.test.mjs scripts/draft-changelog.test.ts scripts/set-version.test.ts scripts/release-prepare.test.ts scripts/cli-options.test.ts scripts/changelog-weekly.test.ts scripts/claude-plugin-compression.test.ts scripts/studio-runtime-smoke.test.mjs scripts/verify-packed-manifests.test.mjs scripts/lint-skills.test.mjs packages/gcp-cloud-run/check-dockerfile-workspaces.test.mjs && vitest run scripts/catalog/", "typecheck:scripts": "tsc --noEmit -p scripts/tsconfig.json", "test:skills": "node --test 'skills/**/*.test.mjs'", "generate:previews": "tsx scripts/generate-template-previews.ts", @@ -72,6 +72,7 @@ "oxlint": "^1.56.0", "tsx": "^4.21.0", "typescript": "^5.0.0", + "vitest": "^3.2.4", "yaml": "^2.9.0" }, "resolutions": { diff --git a/packages/cli/src/commands/catalog.test.ts b/packages/cli/src/commands/catalog.test.ts new file mode 100644 index 0000000000..27f0b61e67 --- /dev/null +++ b/packages/cli/src/commands/catalog.test.ts @@ -0,0 +1,432 @@ +import { beforeEach, describe, expect, it, vi } from "vitest"; + +import { countUnindexed, pickByName } from "./catalog.js"; + +/** The whole registry, which is what "in this registry" has to be measured against. */ +const registryNames = new Set(["fade-through", "whip-pan", "count-up"]); +const item = (name: string): { name: string } => ({ name }); + +describe("pickByName", () => { + it("counts only the ranked names this registry has no item for", () => { + const { ranked, missing } = pickByName( + [item("fade-through"), item("whip-pan"), item("count-up")], + ["whip-pan", "fade-through", "accordion", "alert-dialog"], + registryNames, + ); + + expect(ranked.map((entry) => entry.name)).toEqual(["whip-pan", "fade-through"]); + // accordion and alert-dialog are in the ranking artifact and nowhere in the + // registry: a real skew between two separately published generations. + expect(missing).toBe(2); + }); + + it("does not count moves the user's own filter removed", () => { + // `items` is what survived --type/--tag; the registry still has the rest. + const { ranked, missing } = pickByName( + [item("fade-through")], + ["whip-pan", "fade-through", "count-up", "accordion"], + registryNames, + ); + + expect(ranked.map((entry) => entry.name)).toEqual(["fade-through"]); + // whip-pan and count-up are installable, just filtered out. Only accordion + // is genuinely absent, and filtering must not inflate that number. + expect(missing).toBe(1); + }); + + it("reports nothing missing when the whole ranking is installable", () => { + const { missing } = pickByName( + [item("fade-through")], + ["fade-through", "whip-pan"], + registryNames, + ); + + expect(missing).toBe(0); + }); +}); + +describe("countUnindexed", () => { + it("counts the registry moves the on-device index holds no vector for", () => { + // The move published after the artifact was fetched. Meaning search cannot + // rank it at all, which is the failure this number exists to expose. + expect(countUnindexed(registryNames, ["fade-through"])).toBe(2); + }); + + it("reports nothing when the index covers the registry", () => { + expect(countUnindexed(registryNames, ["count-up", "whip-pan", "fade-through"])).toBe(0); + }); + + it("does not let names the registry dropped paper over a gap", () => { + // The artifact holds two names this registry cannot install and is missing + // two it can. Comparing sizes rather than membership would call that even. + expect(countUnindexed(registryNames, ["fade-through", "accordion", "alert-dialog"])).toBe(2); + }); +}); + +// ── The command envelope ──────────────────────────────────────────────────── +// The JSON envelope is the surface an agent reads, so under-coverage and the +// score are pinned where they are actually published rather than only at the +// helper that computes them. + +const state = vi.hoisted(() => ({ + registry: [] as Array<{ name: string; type: string; tags?: string[] }>, + artifactRevision: "revision-current", + cachedVectorRevision: "revision-current", + vectorFetches: 0, + vectorFetchSucceeds: true, + ranking: null as Array<{ name: string; score: number }> | null, + rankingError: null as Error | null, + indexed: [] as string[], + // The consent path. Static stubs could not reach it: with the status pinned + // to "ready" the prompt never fires, so the answer was never a variable and + // the decline branch was never executed by any test. + modelStatus: "ready" as "ready" | "not-asked" | "declined" | "unavailable", + confirmAnswer: true as boolean, + consentRecorded: [] as boolean[], + downloads: 0, + runtimeAvailable: true, +})); + +vi.mock("../registry/resolver.js", () => ({ + loadAllItems: async (entries: Array<{ name: string; type: string; tags?: string[] }>) => + entries.map((entry) => ({ + name: entry.name, + type: entry.type, + title: entry.name, + description: `${entry.name} description`, + tags: entry.tags ?? [], + })), +})); + +vi.mock("../registry/remote.js", () => ({ + fetchRegistryManifest: async () => ({ + items: state.registry, + catalogArtifact: { revision: state.artifactRevision }, + }), +})); + +vi.mock("@clack/prompts", () => ({ + confirm: async () => state.confirmAnswer, + isCancel: (value: unknown) => value === null, +})); + +vi.mock("../registry/localModel.js", () => ({ + // "ready" is a user who opted into the on-device tier at some point. Every + // later search takes that tier with no flag, which is how a frozen artifact + // goes on answering forever. "not-asked" is the first run, the one that asks. + // Recording an answer is what stops the CLI asking again, so the stub has to + // move with it. Pinned to "not-asked" the second offer later in the run also + // fires, and the double prompt looks like a product bug rather than a stub + // that does not model the contract. + localModelStatus: () => { + const answer = state.consentRecorded.at(-1); + return { + status: answer === false ? "declined" : answer === true ? "ready" : state.modelStatus, + }; + }, + ensureLocalModel: async () => { + state.downloads += 1; + if (state.modelStatus === "unavailable") state.modelStatus = "ready"; + return true; + }, + recordLocalModelConsent: (enabled: boolean) => { + state.consentRecorded.push(enabled); + }, + downloadOfferMessage: () => "offer", + nonInteractiveConsentMessage: () => "consent", +})); + +vi.mock("../registry/localEmbedder.js", () => ({ + // The native runtime is present in these tests. Left unmocked it answers + // false under vitest, and every accepted offer returns at the runtime guard + // before it can download, which looks like the download being skipped. + localRuntimeAvailable: async () => state.runtimeAvailable, +})); + +vi.mock("../registry/localSemantic.js", () => ({ + localSemanticRanking: async () => { + if (state.rankingError) throw state.rankingError; + return state.ranking; + }, + localVectorNames: () => state.indexed, + cachedLocalVectorRevision: () => state.cachedVectorRevision, + hasLocalVectors: () => true, + fetchLocalVectors: async (_registry: string, options: { expectedRevision?: string } = {}) => { + state.vectorFetches += 1; + if (state.vectorFetchSucceeds && options.expectedRevision !== undefined) { + state.cachedVectorRevision = options.expectedRevision; + } + return state.vectorFetchSucceeds; + }, +})); + +const block = (name: string, tags?: string[]): { name: string; type: string; tags?: string[] } => ({ + name, + type: "hyperframes:block", + tags, +}); +const component = (name: string): { name: string; type: string } => ({ + name, + type: "hyperframes:component", +}); + +interface Envelope { + tier: string; + dropped: number; + unindexed: number; + top_score?: number; + shown: number; + warnings?: string[]; +} + +async function runCatalog(args: Record): Promise { + const command = (await import("./catalog.js")).default as unknown as { + run: (context: { args: Record }) => Promise; + }; + const lines: string[] = []; + const log = vi.spyOn(console, "log").mockImplementation((...parts: unknown[]) => { + lines.push(parts.map(String).join(" ")); + }); + try { + await command.run({ args }); + } finally { + log.mockRestore(); + } + // Colour is decoration; assertions are about the words. The escape byte is + // built rather than written: as a literal or as \u001B it is a control + // character in the source, which the lint rules reject either way. + const ansi = new RegExp(`${String.fromCharCode(27)}\\[[0-9;]*m`, "g"); + return lines.join("\n").replace(ansi, ""); +} + +async function runEnvelope(args: Record): Promise { + return JSON.parse(await runCatalog({ json: true, ...args })) as Envelope; +} + +beforeEach(() => { + state.modelStatus = "ready"; + state.artifactRevision = "revision-current"; + state.cachedVectorRevision = "revision-current"; + state.vectorFetches = 0; + state.vectorFetchSucceeds = true; + state.rankingError = null; + state.confirmAnswer = true; + state.consentRecorded = []; + state.downloads = 0; + state.runtimeAvailable = true; + state.registry = [block("count-up"), block("fade-through"), component("whip-pan")]; + state.indexed = ["count-up", "fade-through", "whip-pan"]; + state.ranking = [ + { name: "count-up", score: 0.71 }, + { name: "whip-pan", score: 0.42 }, + { name: "fade-through", score: 0.31 }, + ]; +}); + +describe("catalog --json meaning search", () => { + it("reports the registry moves meaning search cannot see", async () => { + // Published after the user's artifact was fetched: in the registry, absent + // from the index, and therefore unreturnable by any query. + state.registry.push(block("split-screen")); + + const envelope = await runEnvelope({ query: "make a number count up" }); + + expect(envelope.tier).toBe("on-device"); + expect(envelope.unindexed).toBe(1); + }); + + it("reports nothing unindexed when the artifact matches the registry", async () => { + const envelope = await runEnvelope({ query: "make a number count up" }); + + expect(envelope.unindexed).toBe(0); + }); + + it("measures unindexed against the unfiltered registry under --type", async () => { + // The missing move is a component; the user asked for blocks. Their filter + // is not the index being stale, and it must not hide a stale index either. + state.registry.push(component("push-in")); + + const envelope = await runEnvelope({ query: "make a number count up", type: "block" }); + + expect(envelope.shown).toBe(2); + expect(envelope.unindexed).toBe(1); + }); + + it("keeps dropped counted against the unfiltered registry under --type", async () => { + // accordion is the only name the registry genuinely lacks. whip-pan is + // installable and merely filtered out, so it is not a drop. + state.ranking = [ + { name: "count-up", score: 0.71 }, + { name: "whip-pan", score: 0.62 }, + { name: "accordion", score: 0.55 }, + { name: "fade-through", score: 0.31 }, + ]; + + const envelope = await runEnvelope({ query: "make a number count up", type: "block" }); + + expect(envelope.dropped).toBe(1); + expect(envelope.shown).toBe(2); + }); + + it("carries the score of the best result it actually showed", async () => { + // The top-ranked name is not installable here, so reporting the ranking's + // own head would describe a row the caller never received. + state.ranking = [ + { name: "accordion", score: 0.93 }, + { name: "count-up", score: 0.71 }, + { name: "whip-pan", score: 0.42 }, + { name: "fade-through", score: 0.31 }, + ]; + + const envelope = await runEnvelope({ query: "make a number count up" }); + + expect(envelope.top_score).toBeCloseTo(0.71); + }); + + it("omits the score on the word tier, whose scale is not the same one", async () => { + state.ranking = null; + + const envelope = await runEnvelope({ query: "count up" }); + + expect(envelope.tier).toBe("words"); + expect(envelope.top_score).toBeUndefined(); + // Word matching ranks the live registry listing, so it is never stale. + expect(envelope.unindexed).toBe(0); + }); + + it("finds registry tags on the word tier", async () => { + state.modelStatus = "declined"; + state.ranking = null; + state.registry = [block("fade-through", ["transition"]), block("count-up", ["number"])]; + + const envelope = await runEnvelope({ query: "transition" }); + + expect(envelope.tier).toBe("words"); + expect(envelope.shown).toBe(1); + }); + + it("carries an on-device runtime failure into the JSON envelope", async () => { + state.rankingError = new Error("model could not load"); + + const envelope = await runEnvelope({ query: "count up" }); + + expect(envelope.tier).toBe("words"); + expect(envelope.warnings).toEqual(["on-device search did not run: model could not load"]); + }); + + it("refreshes a changed vector revision under existing consent", async () => { + state.cachedVectorRevision = "revision-previous"; + + const envelope = await runEnvelope({ query: "count up" }); + + expect(envelope.tier).toBe("on-device"); + expect(state.vectorFetches).toBe(1); + expect(state.cachedVectorRevision).toBe("revision-current"); + expect(state.consentRecorded).toEqual([]); + }); + + it("replaces a changed model revision under existing consent", async () => { + state.modelStatus = "unavailable"; + + const envelope = await runEnvelope({ query: "count up" }); + + expect(envelope.tier).toBe("on-device"); + expect(state.downloads).toBe(1); + expect(state.consentRecorded).toEqual([]); + }); + + it("keeps the previous vectors and reports a failed routine refresh", async () => { + state.cachedVectorRevision = "revision-previous"; + state.vectorFetchSucceeds = false; + + const envelope = await runEnvelope({ query: "count up" }); + + expect(envelope.tier).toBe("on-device"); + expect(state.cachedVectorRevision).toBe("revision-previous"); + expect(envelope.warnings).toEqual([ + "on-device search is using the previous catalog vectors because the update failed", + ]); + }); +}); + +describe("catalog meaning search, on a terminal", () => { + it("says how much is missing and what to run about it", async () => { + state.registry.push(block("split-screen")); + + const output = await runCatalog({ query: "make a number count up" }); + + expect(output).toContain("1 of 4 moves are missing from the on-device index"); + expect(output).toContain("Re-run with --on-device to refresh it."); + }); + + it("says nothing when the index covers the registry", async () => { + const output = await runCatalog({ query: "make a number count up" }); + + expect(output).not.toContain("missing from the on-device index"); + }); +}); + +describe("the on-device download offer", () => { + // The offer only exists for someone who can answer it. Off a terminal the + // caller must add --yes explicitly, so a test that forgets the terminal + // never reaches the prompt and passes for the wrong reason. + const asATerminal = async (run: () => Promise): Promise => { + const descriptor = Object.getOwnPropertyDescriptor(process.stdout, "isTTY"); + Object.defineProperty(process.stdout, "isTTY", { value: true, configurable: true }); + try { + return await run(); + } finally { + if (descriptor) Object.defineProperty(process.stdout, "isTTY", descriptor); + else delete (process.stdout as unknown as { isTTY?: boolean }).isTTY; + } + }; + + it("downloads nothing and records no consent when the offer is declined", async () => { + // The whole point of asking. Nothing below this line may fetch 32 MB. + state.modelStatus = "not-asked"; + state.confirmAnswer = false; + + const output = await asATerminal(() => + runCatalog({ query: "make a number count up", "on-device": true }), + ); + + expect(state.downloads).toBe(0); + expect(state.consentRecorded).toEqual([false]); + expect(output).not.toContain("offer"); + }); + + it("downloads once when the offer is accepted", async () => { + state.modelStatus = "not-asked"; + state.confirmAnswer = true; + + await asATerminal(() => runCatalog({ query: "make a number count up", "on-device": true })); + + expect(state.downloads).toBe(1); + expect(state.consentRecorded).toEqual([true]); + }); + + it("keeps a decline sticky until explicit --yes consent", async () => { + state.modelStatus = "not-asked"; + state.confirmAnswer = false; + + await asATerminal(() => runCatalog({ query: "count up", "on-device": true })); + state.confirmAnswer = true; + await asATerminal(() => runCatalog({ query: "count up", "on-device": true })); + + expect(state.downloads).toBe(0); + expect(state.consentRecorded).toEqual([false]); + + await asATerminal(() => runCatalog({ query: "count up", "on-device": true, yes: true })); + expect(state.downloads).toBe(1); + expect(state.consentRecorded).toEqual([false, true]); + }); + + it("does not treat non-interactive output as download consent", async () => { + state.modelStatus = "not-asked"; + + await runEnvelope({ query: "count up", "on-device": true }); + + expect(state.downloads).toBe(0); + expect(state.consentRecorded).toEqual([]); + }); +}); diff --git a/packages/cli/src/commands/catalog.ts b/packages/cli/src/commands/catalog.ts index 2bf367cec1..07e5481b77 100644 --- a/packages/cli/src/commands/catalog.ts +++ b/packages/cli/src/commands/catalog.ts @@ -1,4 +1,3 @@ -import { failCommand, finishCommand } from "../utils/commandResult.js"; import { defineCommand } from "citty"; import type { Example } from "./_examples.js"; @@ -13,10 +12,124 @@ export const examples: Example[] = [ import * as clack from "@clack/prompts"; import { type ItemType } from "@hyperframes/core"; import { c } from "../ui/colors.js"; -import { listRegistryItems, loadAllItems } from "../registry/resolver.js"; +import { loadAllItems } from "../registry/resolver.js"; +import { fetchRegistryManifest } from "../registry/remote.js"; import { loadProjectConfig, DEFAULT_PROJECT_CONFIG } from "../utils/projectConfig.js"; import { resolve } from "node:path"; +import { finishCommand } from "../utils/commandResult.js"; import { runAdd } from "./add.js"; +import { searchByWords } from "../registry/localSearch.js"; +import { + downloadOfferMessage, + ensureLocalModel, + type LocalModelStatus, + localModelStatus, + nonInteractiveConsentMessage, + recordLocalModelConsent, +} from "../registry/localModel.js"; +import { localRuntimeAvailable } from "../registry/localEmbedder.js"; +import { + cachedLocalVectorRevision, + fetchLocalVectors, + hasLocalVectors, + localSemanticRanking, + localVectorNames, +} from "../registry/localSemantic.js"; + +/** + * Get the offline tier ready, and report every reason it could not be. + * + * A per-run opt-in, so an agent or CI run can reach the offline tier at all: + * the only other route is a prompt that fires exclusively on a terminal. + * + * Warnings are returned as well as printed so `--json` can carry the same + * reasons the terminal shows. + */ +// a consent gate: each branch is a distinct reason the tier cannot run, and each has to be reported separately +// fallow-ignore-next-line complexity +async function prepareOnDeviceTier(opts: { + assumedYes: boolean; + artifactRevision?: string; + canPrompt: boolean; + registry: string; + registryNames: ReadonlySet; + status: LocalModelStatus; +}): Promise { + const warnings: string[] = []; + const warn = (message: string): void => { + warnings.push(message); + console.error(message); + }; + + const status = opts.status; + if (!opts.assumedYes && status.status === "declined") { + warn( + "on-device search skipped: the model download was previously declined. Re-run with --yes to consent.", + ); + return warnings; + } + + if (!opts.assumedYes && status.status === "not-asked" && !opts.canPrompt) { + warn(nonInteractiveConsentMessage()); + return warnings; + } + + if (!opts.assumedYes && status.status === "not-asked") { + const answer = await clack.confirm({ + message: downloadOfferMessage(), + initialValue: true, + }); + if (clack.isCancel(answer) || answer !== true) { + recordLocalModelConsent(false); + warn("on-device search skipped: the download was declined."); + // Return, or the decline is the only thing that does not happen: the + // runtime check below is skipped precisely because consent is now false, + // control reaches recordLocalModelConsent(true), and the answer is + // overwritten with yes before the download it refused. + return warnings; + } + } + + if (!(await localRuntimeAvailable())) { + // Checked before downloading. Fetching 32 MB and then discovering the + // runtime is missing wastes the bandwidth the consent was granted for. + warn( + "on-device search needs the native ONNX runtime, which a single-file build cannot load. " + + "Install the CLI normally (npm i -g hyperframes) to use this tier.", + ); + return warnings; + } + + if (status.status === "declined" || status.status === "not-asked") { + recordLocalModelConsent(true); + } + const model = await ensureLocalModel(); + const revisionStale = + opts.artifactRevision !== undefined && cachedLocalVectorRevision() !== opts.artifactRevision; + if ( + !hasLocalVectors() || + revisionStale || + countUnindexed(opts.registryNames, localVectorNames()) > 0 + ) { + await fetchLocalVectors(opts.registry, { expectedRevision: opts.artifactRevision }); + } + // Deliberately not the fetch's own answer. A refresh that fails still leaves + // the previous vectors on disk, and those still rank: reporting the tier + // unavailable there would be false, and the search that follows says what is + // actually wrong with them. + const vectors = hasLocalVectors(); + if (!model || !vectors) { + warn( + `on-device search unavailable: ${!model ? "model" : "catalog vectors"} could not be fetched`, + ); + } else if ( + opts.artifactRevision !== undefined && + cachedLocalVectorRevision() !== opts.artifactRevision + ) { + warn("on-device search is using the previous catalog vectors because the update failed"); + } + return warnings; +} export default defineCommand({ meta: { @@ -40,7 +153,27 @@ export default defineCommand({ type: "boolean", description: "Interactive picker — select an item to install", }, + query: { + type: "string", + description: + "Search by meaning when the on-device model is on, otherwise by name, title, description and tags", + }, + yes: { + type: "boolean", + alias: "y", + description: "Assume yes for prompts this run, including the on-device model download", + }, + "on-device": { + type: "boolean", + // Consent for the model download is otherwise only reachable through a + // prompt that fires on a TTY, which leaves every agent and CI run unable + // to opt in at all. + description: + "Use on-device meaning search; pass --yes to approve a first non-interactive download", + }, }, + // one flag-parsing entry point feeding three output paths (json, interactive, table); splitting those is its own change + // fallow-ignore-next-line complexity async run({ args }) { const json = args.json === true; const interactive = args["human-friendly"] === true; @@ -52,13 +185,17 @@ export default defineCommand({ else if (args.type === "component") typeFilter = "hyperframes:component"; else if (args.type) { console.error(`Invalid --type: "${args.type}". Use "block" or "component".`); - failCommand(); + finishCommand(1); } - const entries = await listRegistryItems(typeFilter ? { type: typeFilter } : undefined, { - baseUrl: config.registry, - }); - const filtered = entries.filter((e) => e.type !== "hyperframes:example"); + // Asked for the whole manifest on purpose: its item list defines coverage, + // and its artifact revision is the one owner of vector freshness. + const manifest = await fetchRegistryManifest(config.registry); + const entries = manifest?.items ?? []; + const artifactRevision = manifest?.catalogArtifact?.revision; + const catalog = entries.filter((e) => e.type !== "hyperframes:example"); + const registryNames = new Set(catalog.map((e) => e.name)); + const filtered = typeFilter ? catalog.filter((e) => e.type === typeFilter) : catalog; if (filtered.length === 0) { if (json) console.log("[]"); @@ -69,13 +206,76 @@ export default defineCommand({ const items = await loadAllItems(filtered, { baseUrl: config.registry }); const tagFilter = args.tag?.toLowerCase(); - const matching = tagFilter + const tagged = tagFilter ? items.filter((item) => item.tags?.some((t) => t.toLowerCase() === tagFilter)) : items; + const query = typeof args.query === "string" ? args.query.trim() : ""; + // Collected rather than only printed, so --json can carry the same reasons + // the terminal shows. A machine that asked for a tier deserves to be told + // it did not run. + const searchContext = query ? { status: localModelStatus() } : null; + const routineUpdate = + searchContext?.status.status === "unavailable" || + (searchContext?.status.status === "ready" && + artifactRevision !== undefined && + cachedLocalVectorRevision() !== artifactRevision); + const shouldPrepare = args["on-device"] === true || routineUpdate; + let warnings: string[] = []; + let effectiveStatus = searchContext?.status; + if (searchContext && shouldPrepare) { + warnings = await prepareOnDeviceTier({ + assumedYes: args.yes === true, + artifactRevision, + canPrompt: process.stdout.isTTY === true && !json, + registry: config.registry, + registryNames, + status: searchContext.status, + }); + // A successful preparation can move not-asked/unavailable to ready. Read + // the state owner again rather than carrying the pre-download snapshot. + effectiveStatus = localModelStatus(); + } + const searched = effectiveStatus + ? await applySearch(tagged, query, registryNames, effectiveStatus) + : null; + if (searched) warnings.push(...searched.warnings); + const matching = searched ? searched.items : tagged; + if (matching.length === 0) { - if (json) console.log("[]"); - else console.log(`No items match tag "${args.tag}".`); + // An empty result is exactly when the tier matters most: nothing found on + // the weakest tier means something different from nothing found on the + // best one. + if (json && query) { + console.log( + JSON.stringify( + { + query, + tier: tierToken(searched), + tier_detail: tierDetail(searched), + dropped: searched?.missing ?? 0, + unindexed: searched?.unindexed ?? 0, + ...(searched?.topScore != null ? { top_score: searched.topScore } : {}), + shown: 0, + total: tagged.length, + ...(warnings.length ? { warnings } : {}), + results: [], + }, + null, + 2, + ), + ); + } else if (json) console.log("[]"); + else { + // Name whichever filter actually emptied the list. Reporting a tag + // miss for a query miss sends people to fix the wrong thing. + const criteria = [ + query ? `query "${query}"` : null, + args.tag ? `tag "${args.tag}"` : null, + ].filter(Boolean); + console.log(`No items match ${criteria.join(" and ")}.`); + } + if (query) await offerLocalModel(0, json, config.registry, artifactRevision); return; } @@ -89,10 +289,69 @@ export default defineCommand({ ...("dimensions" in item && item.dimensions ? { dimensions: item.dimensions } : {}), ...("duration" in item && item.duration ? { duration: item.duration } : {}), })); - console.log(JSON.stringify(output, null, 2)); + if (!query) { + // A plain listing has no tier and no drop count, and this array shape + // is already released. Leave it alone. + console.log(JSON.stringify(output, null, 2)); + return; + } + console.log( + JSON.stringify( + { + query, + tier: tierToken(searched), + tier_detail: tierDetail(searched), + dropped: searched?.missing ?? 0, + unindexed: searched?.unindexed ?? 0, + ...(searched?.topScore != null ? { top_score: searched.topScore } : {}), + shown: output.length, + total: tagged.length, + ...(warnings.length ? { warnings } : {}), + results: output, + }, + null, + 2, + ), + ); return; } + if (searched) { + // Name the search that actually ran. A user seeing worse results has to + // be able to tell which tier produced them. + const how = tierDetail(searched); + const unshowable = + searched.missing > 0 + ? ` · ${searched.missing} ranked ${searched.missing === 1 ? "move" : "moves"} not in this registry` + : ""; + console.log(c.dim(` ${matching.length} of ${tagged.length} moves · ${how}${unshowable}`)); + if (searched.unindexed > 0) { + // The costly direction, so it gets a line of its own rather than a + // suffix: these moves cannot come back from meaning search at any rank, + // for any query, and a reader has to learn what to run about it. + // Silent when the index covers the registry. + const remedy = + args["on-device"] === true + ? "The published index is behind this registry." + : "Re-run with --on-device to refresh it."; + console.log( + c.warn( + ` ${searched.unindexed} of ${registryNames.size} moves are missing from the ` + + `on-device index, so meaning search cannot return them. ${remedy}`, + ), + ); + } + if (searched.localMode === "words") { + // Suppressed when on-device was asked for and refused: telling someone + // to pass a flag one line after explaining that flag cannot work here + // reads as the tool arguing with itself. + if (warnings.length === 0) { + reportLocalModelOption(json); + await offerLocalModel(matching.length, json, config.registry, artifactRevision); + } + } + } + if (interactive) { const options = matching.map((item) => ({ value: item.name, @@ -152,3 +411,207 @@ export default defineCommand({ console.log(c.dim(`${matching.length} items. Run "hyperframes add " to install.`)); }, }); + +/** + * Resolve ranked names against the items this registry actually has. + * + * `missing` counts the ranked names this registry has no item for at all, + * measured against `registryNames` — the whole catalog, not the post-filter + * `items`. It is reported rather than swallowed: the catalog artifact and the + * registry are published separately, so they can be different generations, and + * the moves lost that way are the top-ranked ones. + * + * A move the user's own --type or --tag removed is not one of them. It is in + * the registry and installable; they excluded it. Counting it here made every + * filtered search report a skew that was not there, and made a real skew + * indistinguishable from a filter doing its job. + */ +export function pickByName( + items: T[], + names: string[], + registryNames: ReadonlySet, +): { ranked: T[]; missing: number } { + const byName = new Map(items.map((item) => [item.name, item])); + const ranked = names + .map((name) => byName.get(name)) + .filter((item): item is T => item !== undefined); + return { ranked, missing: names.filter((name) => !registryNames.has(name)).length }; +} + +/** + * Registry moves the on-device index holds no vector for. + * + * The counterpart to `pickByName`'s `missing`, and the direction that costs + * something. `missing` is over-coverage: names the artifact ranks that this + * registry cannot install, which only wastes a rank. This is under-coverage: + * moves the registry has that were never embedded, so meaning search cannot + * return them at any rank, for any query, and until now nothing in the output + * said so. The vectors are fetched once and never invalidated, so every move + * published since that fetch lands here. + * + * Measured against the unfiltered registry, matching `missing`: a --type or + * --tag filter removing a move is the user narrowing their own search, not an + * index that cannot see it. + */ +export function countUnindexed( + registryNames: ReadonlySet, + indexedNames: Iterable, +): number { + const indexed = new Set(indexedNames); + let count = 0; + for (const name of registryNames) { + if (!indexed.has(name)) count += 1; + } + return count; +} + +interface SearchOutcome { + items: T[]; + localMode: LocalMode; + warnings: string[]; + /** Over-coverage: ranked names this registry has no item for. */ + missing: number; + /** + * Under-coverage: registry moves the tier that answered could not see. + * + * Always zero for word matching, which ranks the live registry listing and + * so cannot be stale. Non-zero only on the on-device tier, whose vectors are + * a separately published artifact that drifts from the registry. + */ + unindexed: number; + /** + * Similarity of the best result actually shown, when the answering tier + * produces one. Null for word matching, whose score is a different and + * non-comparable scale. Deliberately not a threshold: it is the signal a + * caller needs to judge a ranker that ships without one. + */ + topScore: number | null; +} + +async function applySearch< + T extends { name: string; title: string; description: string; tags?: string[] }, +>( + items: T[], + query: string, + registryNames: ReadonlySet, + status: LocalModelStatus, +): Promise> { + const warnings: string[] = []; + // On-device meaning search, when the user opted into the model. Free and + // offline, and it answers phrasings word matching cannot reach. + if (status.status === "ready") { + try { + const ranking = await localSemanticRanking(query); + if (ranking) { + const { ranked, missing } = pickByName( + items, + ranking.map((entry) => entry.name), + registryNames, + ); + const best = ranked[0]; + if (best) { + const scoreByName = new Map(ranking.map((entry) => [entry.name, entry.score])); + return { + items: ranked.slice(0, 25), + localMode: "local-model", + warnings, + missing, + unindexed: countUnindexed(registryNames, localVectorNames()), + topScore: scoreByName.get(best.name) ?? null, + }; + } + } + } catch (error) { + // A broken model costs ranking quality, never the command. It does not + // get to cost it silently: a tier the user switched on that quietly does + // not run is indistinguishable from one that ran badly. + const warning = `on-device search did not run: ${error instanceof Error ? error.message : "unknown error"}`; + warnings.push(warning); + console.error(warning); + } + } + + // Shared vocabulary, not substring presence. A user asking to "make the + // pace feel faster" shares no literal substring with any description, so + // the old test returned nothing at all for exactly the phrasing people use. + const words = searchByWords( + query, + items, + (item) => `${item.name} ${item.title} ${item.description} ${(item.tags ?? []).join(" ")}`, + ); + // Word matching ranks the items in hand, so nothing can go missing. + return { items: words, localMode: "words", warnings, missing: 0, unindexed: 0, topScore: null }; +} + +/** + * Which tier answered, as a stable token. + * + * Deliberately not the printed sentence: "on-device meaning search" is written + * for a person and will be reworded. A machine consumer needs something that + * will not move underneath it. + */ +function tierToken(searched: { localMode: LocalMode } | null): "on-device" | "words" { + return searched?.localMode === "local-model" ? "on-device" : "words"; +} + +/** The same tier, as the sentence a person reads. */ +function tierDetail(searched: { localMode: LocalMode } | null): string { + return searched?.localMode === "local-model" ? "on-device meaning search" : "local word match"; +} + +type LocalMode = "local-model" | "words"; + +/** + * Offer the on-device model when word matching came up thin, and only then. + * + * Asking on first run would interrupt people the free tier already serves. + * Asking here puts the evidence in front of them: they can see what word + * matching returned before deciding whether 33 MB is worth it. + */ +/** + * Nobody to ask, so say what to ask for. + * + * Without this a scripted run sits on word matching with no indication that a + * better offline tier exists and is one question away. + */ +function reportLocalModelOption(json: boolean): void { + if (!json && process.stdout.isTTY) return; + if (localModelStatus().status !== "not-asked") return; + console.error(nonInteractiveConsentMessage()); +} + +async function offerLocalModel( + matchCount: number, + json: boolean, + registryBaseUrl: string, + artifactRevision?: string, +): Promise { + if (json || !process.stdout.isTTY) return; + if (localModelStatus().status !== "not-asked") return; + // Deliberately not gated on the number of results. That gate was set when the + // catalog was small; against 411 moves a word match nearly always returns + // more than a handful, so it had quietly become unreachable and nobody was + // ever told the offline tier exists. Reaching the weakest tier is the signal. + + const answer = await clack.confirm({ + message: downloadOfferMessage(matchCount), + initialValue: true, + }); + if (clack.isCancel(answer)) return; + recordLocalModelConsent(answer === true); + if (answer !== true) return; + + // The vectors come from the registry rather than the package, so consent is + // also the moment to fetch them. A failure here is reported: the alternative + // is an offline tier the user turned on that silently never ranks anything. + const vectors = + hasLocalVectors() || + (await fetchLocalVectors(registryBaseUrl, { expectedRevision: artifactRevision })); + console.log( + c.dim( + vectors + ? " Run the search again to download the model and rank by meaning." + : " Could not fetch the catalog vectors; offline ranking stays off until they are available.", + ), + ); +} diff --git a/packages/cli/src/registry/__fixtures__/wordpiece-reference.json b/packages/cli/src/registry/__fixtures__/wordpiece-reference.json new file mode 100644 index 0000000000..a4427f4f21 --- /dev/null +++ b/packages/cli/src/registry/__fixtures__/wordpiece-reference.json @@ -0,0 +1,4419 @@ +[ + { + "text": "make the pace suddenly feel faster", + "ids": [101, 2191, 1996, 6393, 3402, 2514, 5514, 102] + }, + { + "text": "show a number counting up to its final value", + "ids": [101, 2265, 1037, 2193, 10320, 2039, 2000, 2049, 2345, 3643, 102] + }, + { + "text": "A rolling digit counter settles on its final value.", + "ids": [101, 1037, 5291, 15340, 4675, 27221, 2006, 2049, 2345, 3643, 1012, 102] + }, + { "text": "Whip Pan Cut.", "ids": [101, 11473, 6090, 3013, 1012, 102] }, + { "text": "group: Transitions.", "ids": [101, 2177, 1024, 22166, 1012, 102] }, + { + "text": "use_when: A callout needs to land.", + "ids": [101, 2224, 1035, 2043, 1024, 1037, 2655, 5833, 3791, 2000, 2455, 1012, 102] + }, + { + "text": "don't split contractions wrongly", + "ids": [101, 2123, 1005, 1056, 3975, 21963, 2015, 29116, 102] + }, + { + "text": "hyphenated-move-name", + "ids": [101, 1044, 22571, 10222, 4383, 1011, 2693, 1011, 2171, 102] + }, + { "text": "trailing whitespace ", "ids": [101, 12542, 12461, 15327, 102] }, + { "text": " leading whitespace", "ids": [101, 2877, 12461, 15327, 102] }, + { "text": "multiple internal spaces", "ids": [101, 3674, 4722, 7258, 102] }, + { "text": "2.10-second envelope", "ids": [101, 1016, 1012, 2184, 1011, 2117, 11255, 102] }, + { "text": "100% of 424 moves", "ids": [101, 2531, 1003, 1997, 4413, 2549, 5829, 102] }, + { + "text": "a+b=c & d|e", + "ids": [101, 1037, 1009, 1038, 1027, 1039, 1004, 1040, 1064, 1041, 102] + }, + { "text": "emoji 🚀 rocket", "ids": [101, 7861, 29147, 2072, 100, 7596, 102] }, + { "text": "café naïve résumé", "ids": [101, 7668, 15743, 13746, 102] }, + { "text": "MÜNCHEN Ünïcödé", "ids": [101, 25802, 27260, 102] }, + { "text": "中文 characters", "ids": [101, 1746, 1861, 3494, 102] }, + { "text": "mixed 中文 and english", "ids": [101, 3816, 1746, 1861, 1998, 2394, 102] }, + { + "text": "unbelievably tokenization antidisestablishmentarianism", + "ids": [ + 101, 4895, 8671, 2666, 3567, 6321, 19204, 3989, 3424, 10521, 4355, 7875, 13602, 3672, 12199, + 2964, 102 + ] + }, + { + "text": "supercalifragilisticexpialidocious", + "ids": [101, 3565, 9289, 10128, 29181, 24411, 4588, 10288, 19312, 21273, 10085, 6313, 102] + }, + { "text": "", "ids": [101, 102] }, + { "text": " ", "ids": [101, 102] }, + { "text": "a", "ids": [101, 1037, 102] }, + { + "text": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", + "ids": [ + 101, 22038, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, + 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, + 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, + 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 2595, 102 + ] + }, + { + "text": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", + "ids": [ + 101, 22038, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, + 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, + 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, + 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 20348, 102 + ] + }, + { + "text": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", + "ids": [101, 100, 102] + }, + { "text": "\t\n\r control chars", "ids": [101, 2491, 25869, 2015, 102] }, + { "text": "accordion", "ids": [101, 19060, 102] }, + { + "text": "group: accordion, disclosure, remocn-port, ui-primitive\nwhat: Accordion. A precise disclosure row with a machined edge, accessible expansion state, and deterministic reveal hooks", + "ids": [ + 101, 2177, 1024, 19060, 1010, 19380, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, + 1011, 10968, 2054, 1024, 19060, 1012, 1037, 10480, 19380, 5216, 2007, 1037, 3698, 2094, 3341, + 1010, 7801, 4935, 2110, 1010, 1998, 28283, 25300, 10074, 7487, 18008, 102 + ] + }, + { "text": "ai-generation-canvas", "ids": [101, 9932, 1011, 4245, 1011, 10683, 102] }, + { + "text": "group: ai, remocn-port, showcase\nwhat: Generation Canvas. A prompt composer expands into a generated dashboard preview.", + "ids": [ + 101, 2177, 1024, 9932, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13398, 2054, 1024, + 4245, 10683, 1012, 1037, 25732, 4543, 24545, 2046, 1037, 7013, 24923, 19236, 1012, 102 + ] + }, + { "text": "ai-prompt-flow", "ids": [101, 9932, 1011, 25732, 1011, 4834, 102] }, + { + "text": "group: ai, prompt, remocn-port, ui-flow\nwhat: Prompt Flow. A composed prompt flow with prompt field, suggestion chips, generate action, and preview result card", + "ids": [ + 101, 2177, 1024, 9932, 1010, 25732, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, + 1011, 4834, 2054, 1024, 25732, 4834, 1012, 1037, 3605, 25732, 4834, 2007, 25732, 2492, 1010, + 10293, 11772, 1010, 9699, 2895, 1010, 1998, 19236, 2765, 4003, 102 + ] + }, + { "text": "alert", "ids": [101, 9499, 102] }, + { + "text": "group: alert, remocn-port, status, ui-primitive\nwhat: Alert. An Operator Black status alert with a matte surface, technical icon, title, and message", + "ids": [ + 101, 2177, 1024, 9499, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 3570, 1010, 21318, + 1011, 10968, 2054, 1024, 9499, 1012, 2019, 6872, 2304, 3570, 9499, 2007, 1037, 4717, 2063, + 3302, 1010, 4087, 12696, 1010, 2516, 1010, 1998, 4471, 102 + ] + }, + { "text": "alert-dialog", "ids": [101, 9499, 1011, 13764, 8649, 102] }, + { + "text": "group: alert-dialog, overlay, remocn-port, ui-primitive\nwhat: Alert Dialog. An Operator Black destructive confirmation dialog with a flat backdrop and centered Soft Optical motion", + "ids": [ + 101, 2177, 1024, 9499, 1011, 13764, 8649, 1010, 2058, 8485, 1010, 2128, 5302, 2278, 2078, + 1011, 3417, 1010, 21318, 1011, 10968, 2054, 1024, 9499, 13764, 8649, 1012, 2019, 6872, 2304, + 15615, 13964, 13764, 8649, 2007, 1037, 4257, 18876, 1998, 8857, 3730, 9380, 4367, 102 + ] + }, + { "text": "animated-bar-chart", "ids": [101, 6579, 1011, 3347, 1011, 3673, 102] }, + { + "text": "group: data, remocn-port\nwhat: Animated Bar Chart. A compact data card with deterministic bar growth and value callouts.", + "ids": [ + 101, 2177, 1024, 2951, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 2054, 1024, 6579, 3347, 3673, + 1012, 1037, 9233, 2951, 4003, 2007, 28283, 25300, 10074, 3347, 3930, 1998, 3643, 2655, 12166, + 1012, 102 + ] + }, + { "text": "animated-line-chart", "ids": [101, 6579, 1011, 2240, 1011, 3673, 102] }, + { + "text": "group: data, remocn-port\nwhat: Animated Line Chart. A line chart draws across the card with endpoint emphasis.", + "ids": [ + 101, 2177, 1024, 2951, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 2054, 1024, 6579, 2240, 3673, + 1012, 1037, 2240, 3673, 9891, 2408, 1996, 4003, 2007, 2203, 8400, 7902, 1012, 102 + ] + }, + { "text": "app-showcase", "ids": [101, 10439, 1011, 13398, 102] }, + { + "text": "group: 3d, app, showcase\nwhat: App Showcase. Fitness app product showcase with three floating smartphone screens", + "ids": [ + 101, 2177, 1024, 7605, 1010, 10439, 1010, 13398, 2054, 1024, 10439, 13398, 1012, 10516, 10439, + 4031, 13398, 2007, 2093, 8274, 26381, 12117, 102 + ] + }, + { "text": "apple-money-count", "ids": [101, 6207, 1011, 2769, 1011, 4175, 102] }, + { + "text": "group: finance, kinetic, sfx, showcase, youtube\nwhat: Apple Money Count. Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound.", + "ids": [ + 101, 2177, 1024, 5446, 1010, 20504, 1010, 16420, 2595, 1010, 13398, 1010, 7858, 2054, 1024, + 6207, 2769, 4175, 1012, 6207, 1011, 2806, 5446, 4675, 2008, 9294, 2013, 1002, 1014, 2000, + 1002, 2184, 1010, 2199, 1010, 16121, 2665, 1010, 1998, 19239, 2769, 18407, 2007, 2614, 1012, + 102 + ] + }, + { "text": "arc-motion-path", "ids": [101, 8115, 1011, 4367, 1011, 4130, 102] }, + { + "text": "group: gsap-plugin, hyperframes-native, motionpath\nwhat: Arc Motion Path. A GSAP MotionPath primitive that flies a callout along a curved arc with autorotation.", + "ids": [ + 101, 2177, 1024, 28177, 9331, 1011, 13354, 2378, 1010, 23760, 15643, 2015, 1011, 3128, 1010, + 4367, 15069, 2054, 1024, 8115, 4367, 4130, 1012, 1037, 28177, 9331, 4367, 15069, 10968, 2008, + 10029, 1037, 2655, 5833, 2247, 1037, 9203, 8115, 2007, 8285, 21709, 3370, 1012, 102 + ] + }, + { "text": "ascii-render-pass", "ids": [101, 2004, 6895, 2072, 1011, 17552, 1011, 3413, 102] }, + { + "text": "group: ascii, effects, experiment, motion-primitive, quantize, reveal, texture\nwhat: ASCII Render Pass. A slotted scene renders as live ASCII: a canvas samples the source's luminance grid (rasterized once at mount) and draws glyphs from a density ramp charset; resolution steps coarse to fine as the piece resolves, then holds legible-fine.\nuse_when: Jobs: reveal. Profile: texture.", + "ids": [ + 101, 2177, 1024, 2004, 6895, 2072, 1010, 3896, 1010, 7551, 1010, 4367, 1011, 10968, 1010, + 24110, 3775, 4371, 1010, 7487, 1010, 14902, 2054, 1024, 2004, 6895, 2072, 17552, 3413, 1012, + 1037, 10453, 3064, 3496, 17552, 2015, 2004, 2444, 2004, 6895, 2072, 1024, 1037, 10683, 8168, + 1996, 3120, 1005, 1055, 11320, 22311, 5897, 8370, 1006, 20710, 3334, 3550, 2320, 2012, 4057, + 1007, 1998, 9891, 1043, 2135, 18757, 2013, 1037, 4304, 13276, 25869, 13462, 1025, 5813, 4084, + 20392, 2000, 2986, 2004, 1996, 3538, 10663, 2015, 1010, 2059, 4324, 4190, 7028, 1011, 2986, + 1012, 2224, 1035, 2043, 1024, 5841, 1024, 7487, 1012, 6337, 1024, 14902, 1012, 102 + ] + }, + { "text": "ascii-trail-reveal", "ids": [101, 2004, 6895, 2072, 1011, 4446, 1011, 7487, 102] }, + { + "text": "group: ascii, grid, intro, intros-and-reveals, motion-primitive, reveal, trail\nwhat: ASCII Trail Reveal. An authored S-curve sweeps through a deterministic ASCII grid, flipping cells away to reveal a labeled panel.\nuse_when: Jobs: reveal. Profile: trail.", + "ids": [ + 101, 2177, 1024, 2004, 6895, 2072, 1010, 8370, 1010, 17174, 1010, 17174, 2015, 1011, 1998, + 1011, 7657, 1010, 4367, 1011, 10968, 1010, 7487, 1010, 4446, 2054, 1024, 2004, 6895, 2072, + 4446, 7487, 1012, 2019, 8786, 1055, 1011, 7774, 26981, 2083, 1037, 28283, 25300, 10074, 2004, + 6895, 2072, 8370, 1010, 18497, 4442, 2185, 2000, 7487, 1037, 12599, 5997, 1012, 2224, 1035, + 2043, 1024, 5841, 1024, 7487, 1012, 6337, 1024, 4446, 1012, 102 + ] + }, + { "text": "aspect-ratio", "ids": [101, 7814, 1011, 6463, 102] }, + { + "text": "group: aspect-ratio, layout, remocn-port, ui-primitive\nwhat: Aspect Ratio. A matte aspect-ratio frame for media and previews with a compact technical dimension label", + "ids": [ + 101, 2177, 1024, 7814, 1011, 6463, 1010, 9621, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, + 21318, 1011, 10968, 2054, 1024, 7814, 6463, 1012, 1037, 4717, 2063, 7814, 1011, 6463, 4853, + 2005, 2865, 1998, 19236, 2015, 2007, 1037, 9233, 4087, 9812, 3830, 102 + ] + }, + { "text": "aurora-drift", "ids": [101, 13158, 1011, 11852, 102] }, + { + "text": "group: ambient, aurora, background, backgrounds, gradient, loopable, motion-primitive, orient\nwhat: Aurora Drift. Three soft accent-derived aurora fields drift in an exact ambient loop over a deep base and faint vignette.\nuse_when: Jobs: orient. Profile: ambient.", + "ids": [ + 101, 2177, 1024, 17093, 1010, 13158, 1010, 4281, 1010, 15406, 1010, 17978, 1010, 7077, 3085, + 1010, 4367, 1011, 10968, 1010, 16865, 2054, 1024, 13158, 11852, 1012, 2093, 3730, 9669, 1011, + 5173, 13158, 4249, 11852, 1999, 2019, 6635, 17093, 7077, 2058, 1037, 2784, 2918, 1998, 8143, + 6819, 10177, 4674, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 16865, 1012, 6337, 1024, 17093, + 1012, 102 + ] + }, + { "text": "avatar", "ids": [101, 22128, 102] }, + { + "text": "group: avatar, identity, remocn-port, ui-primitive\nwhat: Avatar. A matte initials avatar with a functional availability indicator and host-controlled sizing", + "ids": [ + 101, 2177, 1024, 22128, 1010, 4767, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, + 1011, 10968, 2054, 1024, 22128, 1012, 1037, 4717, 2063, 20381, 22128, 2007, 1037, 8360, 11343, + 17245, 1998, 3677, 1011, 4758, 9033, 6774, 102 + ] + }, + { "text": "avatar-cloud", "ids": [101, 22128, 1011, 6112, 102] }, + { + "text": "group: avatars, community, effects, network, prove, social-proof\nwhat: Avatar Cloud. Lettermark avatars populate a loose elliptical cloud while fine SVG links draw between the community and its central proof label.\nuse_when: Jobs: prove. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 22128, 2015, 1010, 2451, 1010, 3896, 1010, 2897, 1010, 6011, 1010, 2591, + 1011, 6947, 2054, 1024, 22128, 6112, 1012, 3661, 10665, 22128, 2015, 3769, 9869, 1037, 6065, + 27213, 6112, 2096, 2986, 17917, 2290, 6971, 4009, 2090, 1996, 2451, 1998, 2049, 2430, 6947, + 3830, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 6011, 1012, 6337, 1024, 2907, 3085, 1012, 102 + ] + }, + { "text": "avatar-group-hover", "ids": [101, 22128, 1011, 2177, 1011, 25215, 2099, 102] }, + { + "text": "group: avatar, hover, transition-primitive, transitions-dev-port\nwhat: Avatar Group Hover. A distance-falloff avatar group lift with bouncy hover return", + "ids": [ + 101, 2177, 1024, 22128, 1010, 25215, 2099, 1010, 6653, 1011, 10968, 1010, 22166, 1011, 16475, + 1011, 3417, 2054, 1024, 22128, 2177, 25215, 2099, 1012, 1037, 3292, 1011, 2991, 7245, 22128, + 2177, 6336, 2007, 8945, 4609, 5666, 25215, 2099, 2709, 102 + ] + }, + { "text": "backdrop", "ids": [101, 18876, 102] }, + { + "text": "group: remocn-port, ui-primitive\nwhat: Backdrop. An Operator Black flat dimming backdrop for dialog, drawer, sheet, and modal scenes.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, 1011, 10968, 2054, 1024, + 18876, 1012, 2019, 6872, 2304, 4257, 11737, 6562, 18876, 2005, 13764, 8649, 1010, 13065, 1010, + 7123, 1010, 1998, 16913, 2389, 5019, 1012, 102 + ] + }, + { "text": "badge", "ids": [101, 10780, 102] }, + { + "text": "group: badge, remocn-port, status, ui-primitive\nwhat: Badge. An Operator Black semantic badge for restrained success, warning, and neutral status labels", + "ids": [ + 101, 2177, 1024, 10780, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 3570, 1010, 21318, + 1011, 10968, 2054, 1024, 10780, 1012, 2019, 6872, 2304, 21641, 10780, 2005, 19868, 3112, 1010, + 5432, 1010, 1998, 8699, 3570, 10873, 102 + ] + }, + { "text": "badge-pop", "ids": [101, 10780, 1011, 3769, 102] }, + { + "text": "group: badge, microinteraction, transition-primitive, transitions-dev-port\nwhat: Badge Pop. A transitions.dev-inspired notification badge pop with elastic scale and count reveal", + "ids": [ + 101, 2177, 1024, 10780, 1010, 12702, 18447, 6906, 7542, 1010, 6653, 1011, 10968, 1010, 22166, + 1011, 16475, 1011, 3417, 2054, 1024, 10780, 3769, 1012, 1037, 22166, 1012, 16475, 1011, 4427, + 26828, 10780, 3769, 2007, 21274, 4094, 1998, 4175, 7487, 102 + ] + }, + { "text": "beat-accent", "ids": [101, 3786, 1011, 9669, 102] }, + { + "text": "group: burst, effects, emphasize, impact, motion-primitive, sting\nwhat: Beat Accent. A single music-hit sting: impact flash, micro scale-pulse on the subject, immediate decay.\nuse_when: Jobs: emphasize. Profile: burst.", + "ids": [ + 101, 2177, 1024, 6532, 1010, 3896, 1010, 17902, 1010, 4254, 1010, 4367, 1011, 10968, 1010, + 12072, 2054, 1024, 3786, 9669, 1012, 1037, 2309, 2189, 1011, 2718, 12072, 1024, 4254, 5956, + 1010, 12702, 4094, 1011, 8187, 2006, 1996, 3395, 1010, 6234, 13121, 1012, 2224, 1035, 2043, + 1024, 5841, 1024, 17902, 1012, 6337, 1024, 6532, 1012, 102 + ] + }, + { "text": "beat-pulse-background", "ids": [101, 3786, 1011, 8187, 1011, 4281, 102] }, + { + "text": "group: background, backgrounds, beat, emphasize, motion-primitive, pulse, reactive, rhythmic\nwhat: Beat Pulse Background. An accent-derived backdrop pulses its glow intensity and saturation on a deterministic, supplied beat grid.\nuse_when: Jobs: emphasize. Profile: rhythmic.", + "ids": [ + 101, 2177, 1024, 4281, 1010, 15406, 1010, 3786, 1010, 17902, 1010, 4367, 1011, 10968, 1010, + 8187, 1010, 22643, 1010, 14797, 2054, 1024, 3786, 8187, 4281, 1012, 2019, 9669, 1011, 5173, + 18876, 23894, 2049, 8652, 8015, 1998, 2938, 18924, 2006, 1037, 28283, 25300, 10074, 1010, + 8127, 3786, 8370, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 17902, 1012, 6337, 1024, 14797, + 1012, 102 + ] + }, + { "text": "beat-timeline", "ids": [101, 3786, 1011, 17060, 102] }, + { + "text": "group: bridge, orchestration, sequencing, timeline, transitions\nwhat: Beat Timeline. A paused master-timeline orchestration spine that pins titled beat rows to evenly spaced named labels. Each row enters on its label, holds with the sequence, then exits with the group.\nuse_when: Jobs: bridge. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 2958, 1010, 4032, 3508, 1010, 24558, 1010, 17060, 1010, 22166, 2054, 1024, + 3786, 17060, 1012, 1037, 5864, 3040, 1011, 17060, 4032, 3508, 8560, 2008, 16300, 4159, 3786, + 10281, 2000, 18030, 19835, 2315, 10873, 1012, 2169, 5216, 8039, 2006, 2049, 3830, 1010, 4324, + 2007, 1996, 5537, 1010, 2059, 16639, 2007, 1996, 2177, 1012, 2224, 1035, 2043, 1024, 5841, + 1024, 2958, 1012, 6337, 1024, 2907, 3085, 1012, 102 + ] + }, + { "text": "before-after-wipe", "ids": [101, 2077, 1011, 2044, 1011, 13387, 102] }, + { + "text": "group: before-after, compare, holdable, prop, slots, ui-props, wipe\nwhat: Before After Wipe. Two full-bleed content slots compare before and after states as a persistent divider wipes the after layer over the before layer and rests at a configurable split. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.\nuse_when: Jobs: compare. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 2077, 1011, 2044, 1010, 12826, 1010, 2907, 3085, 1010, 17678, 1010, 19832, + 1010, 21318, 1011, 24387, 1010, 13387, 2054, 1024, 2077, 2044, 13387, 1012, 2048, 2440, 1011, + 19501, 4180, 19832, 12826, 2077, 1998, 2044, 2163, 2004, 1037, 14516, 11443, 2099, 13387, + 2015, 1996, 2044, 6741, 2058, 1996, 2077, 6741, 1998, 16626, 2012, 1037, 9530, 8873, 27390, + 3085, 3975, 1012, 20587, 2015, 6039, 1996, 2315, 2077, 1013, 2044, 10453, 9320, 1025, 19204, + 1011, 13650, 12398, 2015, 17552, 2043, 1037, 10453, 2003, 2187, 4064, 1012, 2224, 1035, 2043, + 1024, 5841, 1024, 12826, 1012, 6337, 1024, 2907, 3085, 1012, 102 + ] + }, + { "text": "bezier-callout-route", "ids": [101, 2022, 21548, 1011, 2655, 5833, 1011, 2799, 102] }, + { + "text": "group: gsap-plugin, hyperframes-native, motionpath\nwhat: Bezier Callout Route. A route-map primitive with multiple callouts traveling along cubic Bezier paths.", + "ids": [ + 101, 2177, 1024, 28177, 9331, 1011, 13354, 2378, 1010, 23760, 15643, 2015, 1011, 3128, 1010, + 4367, 15069, 2054, 1024, 2022, 21548, 2655, 5833, 2799, 1012, 1037, 2799, 1011, 4949, 10968, + 2007, 3674, 2655, 12166, 7118, 2247, 11919, 2022, 21548, 10425, 1012, 102 + ] + }, + { + "text": "blue-sweater-intro-video", + "ids": [101, 2630, 1011, 14329, 1011, 17174, 1011, 2678, 102] + }, + { + "text": "group: ai, creator, sfx, showcase\nwhat: Blue Sweater Intro Video. Warm creator intro sequence that resolves into an X follow card for @_blue_sweater_.", + "ids": [ + 101, 2177, 1024, 9932, 1010, 8543, 1010, 16420, 2595, 1010, 13398, 2054, 1024, 2630, 14329, + 17174, 2678, 1012, 4010, 8543, 17174, 5537, 2008, 10663, 2015, 2046, 2019, 1060, 3582, 4003, + 2005, 1030, 1035, 2630, 1035, 14329, 1035, 1012, 102 + ] + }, + { "text": "blur-in", "ids": [101, 14819, 1011, 1999, 102] }, + { + "text": "group: blur-in, remocn-port, text-effect, ui-primitive\nwhat: Blur In. An Operator Black word-level content reveal that resolves its own text from controlled blur", + "ids": [ + 101, 2177, 1024, 14819, 1011, 1999, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 3793, + 1011, 3466, 1010, 21318, 1011, 10968, 2054, 1024, 14819, 1999, 1012, 2019, 6872, 2304, 2773, + 1011, 2504, 4180, 7487, 2008, 10663, 2015, 2049, 2219, 3793, 2013, 4758, 14819, 102 + ] + }, + { "text": "blur-out-up", "ids": [101, 14819, 1011, 2041, 1011, 2039, 102] }, + { + "text": "group: motion-primitive, remocn-port, typography\nwhat: Blur Out Up. Words arrive clean and depart upward with increasing blur for airy exits.", + "ids": [ + 101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939, + 6873, 12565, 2054, 1024, 14819, 2041, 2039, 1012, 2616, 7180, 4550, 1998, 18280, 10745, 2007, + 4852, 14819, 2005, 2250, 2100, 16639, 1012, 102 + ] + }, + { "text": "bottom-up-letters", "ids": [101, 3953, 1011, 2039, 1011, 4144, 102] }, + { + "text": "group: letters, motion-primitive, reveal, text\nwhat: Bottom Up Letters. Splits text into letters and reveals each glyph from below with deterministic staggered timing", + "ids": [ + 101, 2177, 1024, 4144, 1010, 4367, 1011, 10968, 1010, 7487, 1010, 3793, 2054, 1024, 3953, + 2039, 4144, 1012, 19584, 3793, 2046, 4144, 1998, 7657, 2169, 1043, 2135, 8458, 2013, 2917, + 2007, 28283, 25300, 10074, 14648, 10984, 102 + ] + }, + { "text": "breadcrumb", "ids": [101, 7852, 26775, 25438, 102] }, + { + "text": "group: breadcrumb, navigation, remocn-port, ui-primitive\nwhat: Breadcrumb. A quiet path-navigation primitive with technical SVG separators and a strong current-page treatment", + "ids": [ + 101, 2177, 1024, 7852, 26775, 25438, 1010, 9163, 1010, 2128, 5302, 2278, 2078, 1011, 3417, + 1010, 21318, 1011, 10968, 2054, 1024, 7852, 26775, 25438, 1012, 1037, 4251, 4130, 1011, 9163, + 10968, 2007, 4087, 17917, 2290, 19802, 25879, 5668, 1998, 1037, 2844, 2783, 1011, 3931, 3949, + 102 + ] + }, + { "text": "browser-device-stage", "ids": [101, 16602, 1011, 5080, 1011, 2754, 102] }, + { + "text": "group: browser, chrome, demonstrate, device, phone, product-demo, slot, stage\nwhat: Browser Device Stage. A generic app surface in token-native device chrome (browser, window, or phone). The screen is a slot for caller img/video/HTML with a token-styled skeleton default; one settle entrance, a readable hold, and an optional screen swap.\nuse_when: Jobs: demonstrate. Profile: stage.", + "ids": [ + 101, 2177, 1024, 16602, 1010, 18546, 1010, 10580, 1010, 5080, 1010, 3042, 1010, 4031, 1011, + 9703, 1010, 10453, 1010, 2754, 2054, 1024, 16602, 5080, 2754, 1012, 1037, 12391, 10439, 3302, + 1999, 19204, 1011, 3128, 5080, 18546, 1006, 16602, 1010, 3332, 1010, 2030, 3042, 1007, 1012, + 1996, 3898, 2003, 1037, 10453, 2005, 20587, 10047, 2290, 1013, 2678, 1013, 16129, 2007, 1037, + 19204, 1011, 13650, 13526, 12398, 1025, 2028, 7392, 4211, 1010, 1037, 3191, 3085, 2907, 1010, + 1998, 2019, 11887, 3898, 19948, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 10580, 1012, 6337, + 1024, 2754, 1012, 102 + ] + }, + { "text": "browser-flow", "ids": [101, 16602, 1011, 4834, 102] }, + { + "text": "group: remocn-port, showcase\nwhat: Browser Flow. A browser frame walks through a three-step product flow.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13398, 2054, 1024, 16602, 4834, + 1012, 1037, 16602, 4853, 7365, 2083, 1037, 2093, 1011, 3357, 4031, 4834, 1012, 102 + ] + }, + { "text": "button", "ids": [101, 6462, 102] }, + { + "text": "group: button, control, remocn-port, ui-primitive\nwhat: Button. A video-safe action button with tactile press, loading, and success states", + "ids": [ + 101, 2177, 1024, 6462, 1010, 2491, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, + 1011, 10968, 2054, 1024, 6462, 1012, 1037, 2678, 1011, 3647, 2895, 6462, 2007, 11937, 6593, + 9463, 2811, 1010, 10578, 1010, 1998, 3112, 2163, 102 + ] + }, + { "text": "button-group", "ids": [101, 6462, 1011, 2177, 102] }, + { + "text": "group: button-group, control, remocn-port, ui-primitive\nwhat: Button Group. A compact segmented action group with clear pressed-state emphasis", + "ids": [ + 101, 2177, 1024, 6462, 1011, 2177, 1010, 2491, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, + 21318, 1011, 10968, 2054, 1024, 6462, 2177, 1012, 1037, 9233, 6903, 2098, 2895, 2177, 2007, + 3154, 4508, 1011, 2110, 7902, 102 + ] + }, + { "text": "calendar", "ids": [101, 8094, 102] }, + { + "text": "group: calendar, date, remocn-port, ui-primitive\nwhat: Calendar. A compact date grid with a recessed selected day and deterministic reveal", + "ids": [ + 101, 2177, 1024, 8094, 1010, 3058, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, + 1011, 10968, 2054, 1024, 8094, 1012, 1037, 9233, 3058, 8370, 2007, 1037, 28290, 2098, 3479, + 2154, 1998, 28283, 25300, 10074, 7487, 102 + ] + }, + { + "text": "caliper-caption-rail", + "ids": [101, 10250, 15457, 2099, 1011, 14408, 3258, 1011, 4334, 102] + }, + { + "text": "group: Annotation.\nwhat: A specification callout opens along a measurement rail, then the instrument rotates 90 degrees onto a long object axis and locks the type against it.\nuse_when: A portrait shot needs a large axial measurement label physically aligned with a long, narrow object.\navoid_when: Do not use it for 16x9, because its aspects declaration does not include 16x9 and the header makes the 1080x1920 portrait format non-negotiable.", + "ids": [ + 101, 2177, 1024, 5754, 17287, 3508, 1012, 2054, 1024, 1037, 12827, 2655, 5833, 7480, 2247, + 1037, 10903, 4334, 1010, 2059, 1996, 6602, 24357, 2015, 3938, 5445, 3031, 1037, 2146, 4874, + 8123, 1998, 11223, 1996, 2828, 2114, 2009, 1012, 2224, 1035, 2043, 1024, 1037, 6533, 2915, + 3791, 1037, 2312, 26819, 10903, 3830, 8186, 13115, 2007, 1037, 2146, 1010, 4867, 4874, 1012, + 4468, 1035, 2043, 1024, 2079, 2025, 2224, 2009, 2005, 2385, 2595, 2683, 1010, 2138, 2049, + 5919, 8170, 2515, 2025, 2421, 2385, 2595, 2683, 1998, 1996, 20346, 3084, 1996, 10715, 2692, + 2595, 16147, 11387, 6533, 4289, 2512, 1011, 11265, 3995, 10711, 3468, 1012, 102 + ] + }, + { + "text": "camera-rig-depth-stack", + "ids": [101, 4950, 1011, 19838, 1011, 5995, 1011, 9991, 102] + }, + { + "text": "group: advanced-motion, hyperframes-native\nwhat: Camera Rig Depth Stack. A 3D camera-rig-style card stack with depth, parallax, and focus shift.", + "ids": [ + 101, 2177, 1024, 3935, 1011, 4367, 1010, 23760, 15643, 2015, 1011, 3128, 2054, 1024, 4950, + 19838, 5995, 9991, 1012, 1037, 7605, 4950, 1011, 19838, 1011, 2806, 4003, 9991, 2007, 5995, + 1010, 11498, 4571, 2595, 1010, 1998, 3579, 5670, 1012, 102 + ] + }, + { "text": "camera-scan-gate", "ids": [101, 4950, 1011, 13594, 1011, 4796, 102] }, + { + "text": "group: camera, demonstrate, interaction, prop, qr, recognition, scan, ui-props\nwhat: Camera Scan Gate. A camera and QR recognition moment with a viewfinder sweep, bracket lock, confirmation pulse, and verified next beat.\nuse_when: Jobs: demonstrate. Profile: interaction.", + "ids": [ + 101, 2177, 1024, 4950, 1010, 10580, 1010, 8290, 1010, 17678, 1010, 1053, 2099, 1010, 5038, + 1010, 13594, 1010, 21318, 1011, 24387, 2054, 1024, 4950, 13594, 4796, 1012, 1037, 4950, 1998, + 1053, 2099, 5038, 2617, 2007, 1037, 3193, 23695, 11740, 1010, 21605, 5843, 1010, 13964, 8187, + 1010, 1998, 20119, 2279, 3786, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 10580, 1012, 6337, + 1024, 8290, 1012, 102 + ] + }, + { "text": "caption-blend-difference", "ids": [101, 14408, 3258, 1011, 12586, 1011, 4489, 102] }, + { + "text": "group: blend-mode, contrast, effect, inversion, text, text-effect\nwhat: Blend Difference. Auto-inverting text using mix-blend-mode: difference, flips between white and black per-pixel against the background", + "ids": [ + 101, 2177, 1024, 12586, 1011, 5549, 1010, 5688, 1010, 3466, 1010, 28527, 1010, 3793, 1010, + 3793, 1011, 3466, 2054, 1024, 12586, 4489, 1012, 8285, 1011, 1999, 16874, 2075, 3793, 2478, + 4666, 1011, 12586, 1011, 5549, 1024, 4489, 1010, 11238, 2015, 2090, 2317, 1998, 2304, 2566, + 1011, 22138, 2114, 1996, 4281, 102 + ] + }, + { "text": "caption-camera-follow", "ids": [101, 14408, 3258, 1011, 4950, 1011, 3582, 102] }, + { + "text": "group: Camera moves.\nwhat: New words stay fixed on an expanding page while the camera pulls back exponentially until the complete sentence is readable.\nuse_when: A sentence must accumulate word by word while each arrival reads at roughly the same screen size.\navoid_when: Avoid placing scripts outside the composition root, because the host copies that markup without its behavior and produces a black card with no timeline.", + "ids": [ + 101, 2177, 1024, 4950, 5829, 1012, 2054, 1024, 2047, 2616, 2994, 4964, 2006, 2019, 9186, 3931, + 2096, 1996, 4950, 8005, 2067, 27258, 2135, 2127, 1996, 3143, 6251, 2003, 3191, 3085, 1012, + 2224, 1035, 2043, 1024, 1037, 6251, 2442, 27598, 2773, 2011, 2773, 2096, 2169, 5508, 9631, + 2012, 5560, 1996, 2168, 3898, 2946, 1012, 4468, 1035, 2043, 1024, 4468, 6885, 14546, 2648, + 1996, 5512, 7117, 1010, 2138, 1996, 3677, 4809, 2008, 2928, 6279, 2302, 2049, 5248, 1998, + 7137, 1037, 2304, 4003, 2007, 2053, 17060, 1012, 102 + ] + }, + { "text": "caption-clip-wipe", "ids": [101, 14408, 3258, 1011, 12528, 1011, 13387, 102] }, + { + "text": "group: caption-style, captions, clip-path, reveal, wipe\nwhat: Clip Wipe. Left-to-right clip-path wipe reveal per word", + "ids": [ + 101, 2177, 1024, 14408, 3258, 1011, 2806, 1010, 14408, 8496, 1010, 12528, 1011, 4130, 1010, + 7487, 1010, 13387, 2054, 1024, 12528, 13387, 1012, 2187, 1011, 2000, 1011, 2157, 12528, 1011, + 4130, 13387, 7487, 2566, 2773, 102 + ] + }, + { "text": "caption-editorial-emphasis", "ids": [101, 14408, 3258, 1011, 8368, 1011, 7902, 102] }, + { + "text": "group: caption-style, captions, editorial, emphasis, typography\nwhat: Editorial Emphasis. Dual-font system with dramatic size contrast for emphasis words", + "ids": [ + 101, 2177, 1024, 14408, 3258, 1011, 2806, 1010, 14408, 8496, 1010, 8368, 1010, 7902, 1010, + 5939, 6873, 12565, 2054, 1024, 8368, 7902, 1012, 7037, 1011, 15489, 2291, 2007, 6918, 2946, + 5688, 2005, 7902, 2616, 102 + ] + }, + { + "text": "caption-emoji-pop", + "ids": [101, 14408, 3258, 1011, 7861, 29147, 2072, 1011, 3769, 102] + }, + { + "text": "group: caption-style, captions, emoji, social\nwhat: Emoji Pop. Emoji integration with stroked text and horizontal squeeze entrance", + "ids": [ + 101, 2177, 1024, 14408, 3258, 1011, 2806, 1010, 14408, 8496, 1010, 7861, 29147, 2072, 1010, + 2591, 2054, 1024, 7861, 29147, 2072, 3769, 1012, 7861, 29147, 2072, 8346, 2007, 11699, 3793, + 1998, 9876, 11025, 4211, 102 + ] + }, + { + "text": "caption-glitch-rgb", + "ids": [101, 14408, 3258, 1011, 1043, 15909, 2818, 1011, 1054, 18259, 102] + }, + { + "text": "group: caption-style, captions, cyber, glitch, tech\nwhat: Glitch RGB. RGB chromatic aberration with CRT scanline overlay", + "ids": [ + 101, 2177, 1024, 14408, 3258, 1011, 2806, 1010, 14408, 8496, 1010, 16941, 1010, 1043, 15909, + 2818, 1010, 6627, 2054, 1024, 1043, 15909, 2818, 1054, 18259, 1012, 1054, 18259, 10381, 23645, + 14863, 11335, 3508, 2007, 13675, 2102, 13594, 4179, 2058, 8485, 102 + ] + }, + { "text": "caption-gradient-fill", "ids": [101, 14408, 3258, 1011, 17978, 1011, 6039, 102] }, + { + "text": "group: caption-style, captions, colorful, gradient\nwhat: Gradient Fill. Gradient-clipped text with elastic bounce entrance", + "ids": [ + 101, 2177, 1024, 14408, 3258, 1011, 2806, 1010, 14408, 8496, 1010, 14231, 1010, 17978, 2054, + 1024, 17978, 6039, 1012, 17978, 1011, 20144, 3793, 2007, 21274, 17523, 4211, 102 + ] + }, + { "text": "caption-highlight", "ids": [101, 14408, 3258, 1011, 12944, 102] }, + { + "text": "group: caption-style, captions, highlight, social, tiktok\nwhat: Highlight. Red background sweep behind each active word, TikTok-style", + "ids": [ + 101, 2177, 1024, 14408, 3258, 1011, 2806, 1010, 14408, 8496, 1010, 12944, 1010, 2591, 1010, + 14841, 25509, 6559, 2054, 1024, 12944, 1012, 2417, 4281, 11740, 2369, 2169, 3161, 2773, 1010, + 14841, 25509, 6559, 1011, 2806, 102 + ] + }, + { "text": "caption-kinetic-slam", "ids": [101, 14408, 3258, 1011, 20504, 1011, 9555, 102] }, + { + "text": "group: caption-style, captions, kinetic, slam, typography\nwhat: Kinetic Slam. Full-screen single-word display with alternating entrance directions", + "ids": [ + 101, 2177, 1024, 14408, 3258, 1011, 2806, 1010, 14408, 8496, 1010, 20504, 1010, 9555, 1010, + 5939, 6873, 12565, 2054, 1024, 20504, 9555, 1012, 2440, 1011, 3898, 2309, 1011, 2773, 4653, + 2007, 15122, 4211, 7826, 102 + ] + }, + { + "text": "caption-matrix-decode", + "ids": [101, 14408, 3258, 1011, 8185, 1011, 21933, 3207, 102] + }, + { + "text": "group: caption-style, captions, decode, matrix, scramble\nwhat: Matrix Decode. Character scramble animation before text reveal", + "ids": [ + 101, 2177, 1024, 14408, 3258, 1011, 2806, 1010, 14408, 8496, 1010, 21933, 3207, 1010, 8185, + 1010, 25740, 2054, 1024, 8185, 21933, 3207, 1012, 2839, 25740, 7284, 2077, 3793, 7487, 102 + ] + }, + { "text": "caption-neon-accent", "ids": [101, 14408, 3258, 1011, 16231, 1011, 9669, 102] }, + { + "text": "group: accent, caption-style, captions, glow, neon\nwhat: Neon Accent. Multi-color neon glow accents with wiggle drift animation", + "ids": [ + 101, 2177, 1024, 9669, 1010, 14408, 3258, 1011, 2806, 1010, 14408, 8496, 1010, 8652, 1010, + 16231, 2054, 1024, 16231, 9669, 1012, 4800, 1011, 3609, 16231, 8652, 24947, 2007, 24405, 9354, + 11852, 7284, 102 + ] + }, + { "text": "caption-neon-glow", "ids": [101, 14408, 3258, 1011, 16231, 1011, 8652, 102] }, + { + "text": "group: caption-style, captions, gaming, glow, neon\nwhat: Neon Glow. Cyan and magenta neon glow with keyword accent colors", + "ids": [ + 101, 2177, 1024, 14408, 3258, 1011, 2806, 1010, 14408, 8496, 1010, 10355, 1010, 8652, 1010, + 16231, 2054, 1024, 16231, 8652, 1012, 22330, 2319, 1998, 17454, 12380, 16231, 8652, 2007, + 3145, 18351, 9669, 6087, 102 + ] + }, + { + "text": "caption-parallax-layers", + "ids": [101, 14408, 3258, 1011, 11498, 4571, 2595, 1011, 9014, 102] + }, + { + "text": "group: 3d, caption-style, captions, depth, parallax\nwhat: Parallax Layers. Behind-subject 3D text layering with vertical stretch effect", + "ids": [ + 101, 2177, 1024, 7605, 1010, 14408, 3258, 1011, 2806, 1010, 14408, 8496, 1010, 5995, 1010, + 11498, 4571, 2595, 2054, 1024, 11498, 4571, 2595, 9014, 1012, 2369, 1011, 3395, 7605, 3793, + 6741, 2075, 2007, 7471, 7683, 3466, 102 + ] + }, + { "text": "caption-particle-burst", "ids": [101, 14408, 3258, 1011, 10811, 1011, 6532, 102] }, + { + "text": "group: burst, caption-style, captions, effects, particles\nwhat: Particle Burst. Keyword words trigger colored particle explosions", + "ids": [ + 101, 2177, 1024, 6532, 1010, 14408, 3258, 1011, 2806, 1010, 14408, 8496, 1010, 3896, 1010, + 9309, 2054, 1024, 10811, 6532, 1012, 3145, 18351, 2616, 9495, 6910, 10811, 18217, 102 + ] + }, + { + "text": "caption-pill-karaoke", + "ids": [101, 14408, 3258, 1011, 17357, 1011, 13173, 11045, 102] + }, + { + "text": "group: caption-style, captions, karaoke, pill\nwhat: Pill Karaoke. Pill-shaped container with per-word karaoke color highlight", + "ids": [ + 101, 2177, 1024, 14408, 3258, 1011, 2806, 1010, 14408, 8496, 1010, 13173, 11045, 1010, 17357, + 2054, 1024, 17357, 13173, 11045, 1012, 17357, 1011, 5044, 11661, 2007, 2566, 1011, 2773, + 13173, 11045, 3609, 12944, 102 + ] + }, + { "text": "caption-texture", "ids": [101, 14408, 3258, 1011, 14902, 102] }, + { + "text": "group: caption-style, captions, mask, texture\nwhat: Texture. Flowing texture mask over large uppercase text, ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable", + "ids": [ + 101, 2177, 1024, 14408, 3258, 1011, 2806, 1010, 14408, 8496, 1010, 7308, 1010, 14902, 2054, + 1024, 14902, 1012, 8577, 14902, 7308, 2058, 2312, 3356, 18382, 3793, 1010, 3719, 2007, 1020, + 29343, 1006, 13697, 1010, 7720, 1010, 3384, 1010, 3536, 1010, 5509, 1010, 2600, 1007, 1010, + 9530, 8873, 27390, 3085, 3081, 1996, 14902, 8023, 102 + ] + }, + { "text": "caption-weight-shift", "ids": [101, 14408, 3258, 1011, 3635, 1011, 5670, 102] }, + { + "text": "group: caption-style, captions, minimal, typography\nwhat: Weight Shift. Elegant font-weight transition between caption lines", + "ids": [ + 101, 2177, 1024, 14408, 3258, 1011, 2806, 1010, 14408, 8496, 1010, 10124, 1010, 5939, 6873, + 12565, 2054, 1024, 3635, 5670, 1012, 11552, 15489, 1011, 3635, 6653, 2090, 14408, 3258, 3210, + 102 + ] + }, + { "text": "card", "ids": [101, 4003, 102] }, + { + "text": "group: card, remocn-port, surface, ui-primitive\nwhat: Card. A single semantic card surface with calm type hierarchy, success status, a review action, and Soft Optical reveal hooks", + "ids": [ + 101, 2177, 1024, 4003, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 3302, 1010, 21318, + 1011, 10968, 2054, 1024, 4003, 1012, 1037, 2309, 21641, 4003, 3302, 2007, 5475, 2828, 12571, + 1010, 3112, 3570, 1010, 1037, 3319, 2895, 1010, 1998, 3730, 9380, 7487, 18008, 102 + ] + }, + { "text": "card-resize", "ids": [101, 4003, 1011, 24501, 4697, 102] }, + { + "text": "group: card, layout, transition-primitive, transitions-dev-port\nwhat: Card Resize. A transitions.dev-inspired card resize primitive that expands a compact card into a detail panel", + "ids": [ + 101, 2177, 1024, 4003, 1010, 9621, 1010, 6653, 1011, 10968, 1010, 22166, 1011, 16475, 1011, + 3417, 2054, 1024, 4003, 24501, 4697, 1012, 1037, 22166, 1012, 16475, 1011, 4427, 4003, 24501, + 4697, 10968, 2008, 24545, 1037, 9233, 4003, 2046, 1037, 6987, 5997, 102 + ] + }, + { "text": "caret", "ids": [101, 2729, 2102, 102] }, + { + "text": "group: caret, remocn-port, typing, ui-primitive\nwhat: Caret. A matte command-field caret with finite blink timing and a deterministic typed-value reveal", + "ids": [ + 101, 2177, 1024, 2729, 2102, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 22868, 1010, + 21318, 1011, 10968, 2054, 1024, 2729, 2102, 1012, 1037, 4717, 2063, 3094, 1011, 2492, 2729, + 2102, 2007, 10713, 12373, 10984, 1998, 1037, 28283, 25300, 10074, 21189, 1011, 3643, 7487, 102 + ] + }, + { "text": "carousel", "ids": [101, 27628, 102] }, + { + "text": "group: carousel, media, remocn-port, ui-primitive\nwhat: Carousel. A restrained scene carousel with layered media surfaces, accessible position controls, and deterministic slide motion", + "ids": [ + 101, 2177, 1024, 27628, 1010, 2865, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, + 1011, 10968, 2054, 1024, 27628, 1012, 1037, 19868, 3496, 27628, 2007, 21323, 2865, 9972, 1010, + 7801, 2597, 7711, 1010, 1998, 28283, 25300, 10074, 7358, 4367, 102 + ] + }, + { "text": "char-slam-explode", "ids": [101, 25869, 1011, 9555, 1011, 15044, 102] }, + { + "text": "group: emphasize, impact, motion-primitive, scatter, slam, text-treatment, typography\nwhat: Char Slam Explode. Headline glyphs hold in a deterministic scatter, then reassemble with an overshooting slam and a three-frame landing shake.\nuse_when: Jobs: emphasize. Profile: impact.", + "ids": [ + 101, 2177, 1024, 17902, 1010, 4254, 1010, 4367, 1011, 10968, 1010, 8040, 20097, 1010, 9555, + 1010, 3793, 1011, 3949, 1010, 5939, 6873, 12565, 2054, 1024, 25869, 9555, 15044, 1012, 17653, + 1043, 2135, 18757, 2907, 1999, 1037, 28283, 25300, 10074, 8040, 20097, 1010, 2059, 2128, + 27241, 19661, 2007, 2019, 15849, 23416, 2075, 9555, 1998, 1037, 2093, 1011, 4853, 4899, 6073, + 1012, 2224, 1035, 2043, 1024, 5841, 1024, 17902, 1012, 6337, 1024, 4254, 1012, 102 + ] + }, + { "text": "chart", "ids": [101, 3673, 102] }, + { + "text": "group: chart, data, remocn-port, ui-primitive\nwhat: Chart. An Operator Black categorical bar chart using the shared solid data palette and deterministic growth", + "ids": [ + 101, 2177, 1024, 3673, 1010, 2951, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, + 1011, 10968, 2054, 1024, 3673, 1012, 2019, 6872, 2304, 4937, 27203, 3347, 3673, 2478, 1996, + 4207, 5024, 2951, 27396, 1998, 28283, 25300, 10074, 3930, 102 + ] + }, + { "text": "chart-story", "ids": [101, 3673, 1011, 2466, 102] }, + { + "text": "group: bars, chart, deterministic, donut, line, motion-primitive, progress, proof, proof-stats, prove, stats\nwhat: Chart Story. One chart builds from data in reading order and lands the exact supplied values: staggered bars, a left-to-right line with area fill, a sweeping donut, or filling progress bars, with an accented value callout on the emphasized datum.\nuse_when: Jobs: prove. Profile: chart.", + "ids": [ + 101, 2177, 1024, 6963, 1010, 3673, 1010, 28283, 25300, 10074, 1010, 2123, 4904, 1010, 2240, + 1010, 4367, 1011, 10968, 1010, 5082, 1010, 6947, 1010, 6947, 1011, 26319, 1010, 6011, 1010, + 26319, 2054, 1024, 3673, 2466, 1012, 2028, 3673, 16473, 2013, 2951, 1999, 3752, 2344, 1998, + 4915, 1996, 6635, 8127, 5300, 1024, 14648, 6963, 1010, 1037, 2187, 1011, 2000, 1011, 2157, + 2240, 2007, 2181, 6039, 1010, 1037, 12720, 2123, 4904, 1010, 2030, 8110, 5082, 6963, 1010, + 2007, 2019, 9669, 2098, 3643, 2655, 5833, 2006, 1996, 13155, 23755, 2819, 1012, 2224, 1035, + 2043, 1024, 5841, 1024, 6011, 1012, 6337, 1024, 3673, 1012, 102 + ] + }, + { + "text": "chat-to-preview-layout", + "ids": [101, 11834, 1011, 2000, 1011, 19236, 1011, 9621, 102] + }, + { + "text": "group: ai, remocn-port, showcase\nwhat: Chat to Preview Layout. Split-pane chat and preview layout for agent-generated UI.", + "ids": [ + 101, 2177, 1024, 9932, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13398, 2054, 1024, + 11834, 2000, 19236, 9621, 1012, 3975, 1011, 6090, 2063, 11834, 1998, 19236, 9621, 2005, 4005, + 1011, 7013, 21318, 1012, 102 + ] + }, + { "text": "checkbox", "ids": [101, 4638, 8758, 102] }, + { + "text": "group: checkbox, control, remocn-port, ui-primitive\nwhat: Checkbox. An accessible checkbox with tactile feedback and a functional mint check state", + "ids": [ + 101, 2177, 1024, 4638, 8758, 1010, 2491, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, + 21318, 1011, 10968, 2054, 1024, 4638, 8758, 1012, 2019, 7801, 4638, 8758, 2007, 11937, 6593, + 9463, 12247, 1998, 1037, 8360, 12927, 4638, 2110, 102 + ] + }, + { "text": "checkout-flow", "ids": [101, 4638, 5833, 1011, 4834, 102] }, + { + "text": "group: checkout, commerce, remocn-port, ui-flow\nwhat: Checkout Flow. A composed checkout flow with plan summary, payment field rows, total, and purchase action", + "ids": [ + 101, 2177, 1024, 4638, 5833, 1010, 6236, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, + 21318, 1011, 4834, 2054, 1024, 4638, 5833, 4834, 1012, 1037, 3605, 4638, 5833, 4834, 2007, + 2933, 12654, 1010, 7909, 2492, 10281, 1010, 2561, 1010, 1998, 5309, 2895, 102 + ] + }, + { + "text": "chevron-pill-card-morph", + "ids": [101, 18178, 28588, 1011, 17357, 1011, 4003, 1011, 22822, 8458, 102] + }, + { + "text": "group: Interface morphs.\nwhat: One surface changes from a circle to a pill to a card while one accent element stretches from a chevron disc into the card action bar.\nuse_when: A compact search or selection control must remain visibly continuous as it expands into a checkout-style card.\navoid_when: Do not use it when verified 16x9 support is required, because its aspects declaration does not include 16x9.", + "ids": [ + 101, 2177, 1024, 8278, 22822, 18757, 1012, 2054, 1024, 2028, 3302, 3431, 2013, 1037, 4418, + 2000, 1037, 17357, 2000, 1037, 4003, 2096, 2028, 9669, 5783, 14082, 2013, 1037, 18178, 28588, + 5860, 2046, 1996, 4003, 2895, 3347, 1012, 2224, 1035, 2043, 1024, 1037, 9233, 3945, 2030, + 4989, 2491, 2442, 3961, 19397, 7142, 2004, 2009, 24545, 2046, 1037, 4638, 5833, 1011, 2806, + 4003, 1012, 4468, 1035, 2043, 1024, 2079, 2025, 2224, 2009, 2043, 20119, 2385, 2595, 2683, + 2490, 2003, 3223, 1010, 2138, 2049, 5919, 8170, 2515, 2025, 2421, 2385, 2595, 2683, 1012, 102 + ] + }, + { + "text": "chromatic-aberration-wipe", + "ids": [101, 10381, 23645, 1011, 14863, 11335, 3508, 1011, 13387, 102] + }, + { + "text": "group: remocn-port, transition-primitive\nwhat: Chromatic Aberration Wipe. A fast slide wipe with RGB channel split on peak frames.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 6653, 1011, 10968, 2054, 1024, + 10381, 23645, 14863, 11335, 3508, 13387, 1012, 1037, 3435, 7358, 13387, 2007, 1054, 18259, + 3149, 3975, 2006, 4672, 11048, 1012, 102 + ] + }, + { "text": "chromatic-radial-split", "ids": [101, 10381, 23645, 1011, 15255, 1011, 3975, 102] }, + { + "text": "group: shader, transition\nwhat: Chromatic Radial Split. Shader transition with chromatic aberration radial split", + "ids": [ + 101, 2177, 1024, 8703, 2099, 1010, 6653, 2054, 1024, 10381, 23645, 15255, 3975, 1012, 8703, + 2099, 6653, 2007, 10381, 23645, 14863, 11335, 3508, 15255, 3975, 102 + ] + }, + { "text": "cinematic-zoom", "ids": [101, 21014, 1011, 24095, 102] }, + { + "text": "group: shader, transition\nwhat: Cinematic Zoom. Shader transition with dramatic zoom blur", + "ids": [ + 101, 2177, 1024, 8703, 2099, 1010, 6653, 2054, 1024, 21014, 24095, 1012, 8703, 2099, 6653, + 2007, 6918, 24095, 14819, 102 + ] + }, + { "text": "code-3d-extrude", "ids": [101, 3642, 1011, 7605, 1011, 4654, 16344, 12672, 102] }, + { + "text": "group: 3d, code, code-animation, developer, webgl\nwhat: Code 3D Extrude. Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest, true WebGL depth and lighting, not a 2D transform.", + "ids": [ + 101, 2177, 1024, 7605, 1010, 3642, 1010, 3642, 1011, 7284, 1010, 9722, 1010, 4773, 23296, + 2054, 1024, 3642, 7605, 4654, 16344, 12672, 1012, 20231, 1011, 11548, 3642, 2006, 1037, 5507, + 1010, 2022, 15985, 2098, 7605, 17584, 2008, 24357, 2015, 2083, 2613, 2686, 1998, 27221, 2000, + 1037, 3191, 3085, 2717, 1010, 2995, 4773, 23296, 5995, 1998, 7497, 1010, 2025, 1037, 14134, + 10938, 1012, 102 + ] + }, + { "text": "code-accordion", "ids": [101, 3642, 1011, 19060, 102] }, + { + "text": "group: code-animation, remocn-port\nwhat: Code Accordion. Stacked code sections expand one at a time with line highlights.", + "ids": [ + 101, 2177, 1024, 3642, 1011, 7284, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 2054, 1024, 3642, + 19060, 1012, 16934, 3642, 5433, 7818, 2028, 2012, 1037, 2051, 2007, 2240, 11637, 1012, 102 + ] + }, + { "text": "code-diff", "ids": [101, 3642, 1011, 4487, 4246, 102] }, + { + "text": "group: code, code-animation, developer, diff\nwhat: Code Diff. An edit shown as a colored diff, removed lines collapse in red, added lines expand in green.", + "ids": [ + 101, 2177, 1024, 3642, 1010, 3642, 1011, 7284, 1010, 9722, 1010, 4487, 4246, 2054, 1024, 3642, + 4487, 4246, 1012, 2019, 10086, 3491, 2004, 1037, 6910, 4487, 4246, 1010, 3718, 3210, 7859, + 1999, 2417, 1010, 2794, 3210, 7818, 1999, 2665, 1012, 102 + ] + }, + { "text": "code-diff-wipe", "ids": [101, 3642, 1011, 4487, 4246, 1011, 13387, 102] }, + { + "text": "group: remocn-port, transition-primitive\nwhat: Code Diff Wipe. A scene transition that wipes through added and removed code lines.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 6653, 1011, 10968, 2054, 1024, + 3642, 4487, 4246, 13387, 1012, 1037, 3496, 6653, 2008, 13387, 2015, 2083, 2794, 1998, 3718, + 3642, 3210, 1012, 102 + ] + }, + { "text": "code-highlight", "ids": [101, 3642, 1011, 12944, 102] }, + { + "text": "group: code, code-animation, developer, highlight\nwhat: Code Highlight Sweep. A highlight band sweeps across a target line while the surrounding context dims, draws the eye to one line.", + "ids": [ + 101, 2177, 1024, 3642, 1010, 3642, 1011, 7284, 1010, 9722, 1010, 12944, 2054, 1024, 3642, + 12944, 11740, 1012, 1037, 12944, 2316, 26981, 2408, 1037, 4539, 2240, 2096, 1996, 4193, 6123, + 11737, 2015, 1010, 9891, 1996, 3239, 2000, 2028, 2240, 1012, 102 + ] + }, + { "text": "code-morph", "ids": [101, 3642, 1011, 22822, 8458, 102] }, + { + "text": "group: code, code-animation, developer, morph, refactor\nwhat: Code Morph. One snippet transforms into another, tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a paused GSAP timeline.", + "ids": [ + 101, 2177, 1024, 3642, 1010, 3642, 1011, 7284, 1010, 9722, 1010, 22822, 8458, 1010, 25416, + 18908, 2953, 2054, 1024, 3642, 22822, 8458, 1012, 2028, 1055, 3490, 29519, 21743, 2046, 2178, + 1010, 19204, 2015, 21096, 2090, 4460, 1010, 2681, 2869, 12985, 2041, 1010, 4607, 2545, 12985, + 1999, 1012, 11895, 3211, 3894, 2693, 2128, 1011, 5533, 2004, 1037, 5864, 28177, 9331, 17060, + 1012, 102 + ] + }, + { "text": "code-particle-assemble", "ids": [101, 3642, 1011, 10811, 1011, 21365, 102] }, + { + "text": "group: code, code-animation, developer, gpu, particles, webgl\nwhat: Code Particle Assemble. Thousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syntax-highlighted text, a particle system, not a token tween.", + "ids": [ + 101, 2177, 1024, 3642, 1010, 3642, 1011, 7284, 1010, 9722, 1010, 14246, 2226, 1010, 9309, + 1010, 4773, 23296, 2054, 1024, 3642, 10811, 21365, 1012, 5190, 1997, 14246, 2226, 2685, 8040, + 20097, 2083, 2686, 1998, 4875, 2000, 1996, 6635, 1043, 2135, 8458, 27725, 1997, 1996, 3642, + 1010, 29304, 2046, 3191, 3085, 20231, 1011, 11548, 3793, 1010, 1037, 10811, 2291, 1010, 2025, + 1037, 19204, 1056, 28394, 2078, 1012, 102 + ] + }, + { "text": "code-scroll", "ids": [101, 3642, 1011, 17186, 102] }, + { + "text": "group: code, code-animation, developer, scroll\nwhat: Code Scroll To Line. The camera scrolls a long file to bring a target line to center and spotlights it, for walking through real modules.", + "ids": [ + 101, 2177, 1024, 3642, 1010, 3642, 1011, 7284, 1010, 9722, 1010, 17186, 2054, 1024, 3642, + 17186, 2000, 2240, 1012, 1996, 4950, 23074, 1037, 2146, 5371, 2000, 3288, 1037, 4539, 2240, + 2000, 2415, 1998, 17763, 2015, 2009, 1010, 2005, 3788, 2083, 2613, 14184, 1012, 102 + ] + }, + { "text": "code-shader-dissolve", "ids": [101, 3642, 1011, 8703, 2099, 1011, 21969, 102] }, + { + "text": "group: code, code-animation, developer, shader, webgl\nwhat: Code Shader Dissolve. The code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front and edge glow, then holds crisp.", + "ids": [ + 101, 2177, 1024, 3642, 1010, 3642, 1011, 7284, 1010, 9722, 1010, 8703, 2099, 1010, 4773, + 23296, 2054, 1024, 3642, 8703, 2099, 21969, 1012, 1996, 3642, 4012, 22090, 2015, 2046, 4598, + 1024, 1037, 14246, 2226, 15778, 8703, 2099, 10663, 2015, 2009, 2041, 1997, 13916, 5005, 2007, + 1037, 10381, 23645, 21969, 2392, 1998, 3341, 8652, 1010, 2059, 4324, 15594, 1012, 102 + ] + }, + { + "text": "code-snippet-apple-terminal-basic", + "ids": [101, 3642, 1011, 1055, 3490, 29519, 1011, 6207, 1011, 5536, 1011, 3937, 102] + }, + { + "text": "group: apple, apple-terminal, code, developer, showcase, terminal\nwhat: Code Snippet - Apple Terminal Basic. Apple Terminal Basic profile: white background, black text, per-character typing animation of a shell session.", + "ids": [ + 101, 2177, 1024, 6207, 1010, 6207, 1011, 5536, 1010, 3642, 1010, 9722, 1010, 13398, 1010, + 5536, 2054, 1024, 3642, 1055, 3490, 29519, 1011, 6207, 5536, 3937, 1012, 6207, 5536, 3937, + 6337, 1024, 2317, 4281, 1010, 2304, 3793, 1010, 2566, 1011, 2839, 22868, 7284, 1997, 1037, + 5806, 5219, 1012, 102 + ] + }, + { + "text": "code-snippet-apple-terminal-clear-dark", + "ids": [101, 3642, 1011, 1055, 3490, 29519, 1011, 6207, 1011, 5536, 1011, 3154, 1011, 2601, 102] + }, + { + "text": "group: apple, apple-terminal, code, developer, showcase, terminal\nwhat: Code Snippet - Apple Terminal Clear Dark. Apple Terminal Clear Dark profile: semi-transparent dark background, per-character typing animation of a shell session.", + "ids": [ + 101, 2177, 1024, 6207, 1010, 6207, 1011, 5536, 1010, 3642, 1010, 9722, 1010, 13398, 1010, + 5536, 2054, 1024, 3642, 1055, 3490, 29519, 1011, 6207, 5536, 3154, 2601, 1012, 6207, 5536, + 3154, 2601, 6337, 1024, 4100, 1011, 13338, 2601, 4281, 1010, 2566, 1011, 2839, 22868, 7284, + 1997, 1037, 5806, 5219, 1012, 102 + ] + }, + { + "text": "code-snippet-apple-terminal-clear-light", + "ids": [101, 3642, 1011, 1055, 3490, 29519, 1011, 6207, 1011, 5536, 1011, 3154, 1011, 2422, 102] + }, + { + "text": "group: apple, apple-terminal, code, developer, showcase, terminal\nwhat: Code Snippet - Apple Terminal Clear Light. Apple Terminal Clear Light profile: semi-transparent light background, per-character typing animation of a shell session.", + "ids": [ + 101, 2177, 1024, 6207, 1010, 6207, 1011, 5536, 1010, 3642, 1010, 9722, 1010, 13398, 1010, + 5536, 2054, 1024, 3642, 1055, 3490, 29519, 1011, 6207, 5536, 3154, 2422, 1012, 6207, 5536, + 3154, 2422, 6337, 1024, 4100, 1011, 13338, 2422, 4281, 1010, 2566, 1011, 2839, 22868, 7284, + 1997, 1037, 5806, 5219, 1012, 102 + ] + }, + { + "text": "code-snippet-apple-terminal-grass", + "ids": [101, 3642, 1011, 1055, 3490, 29519, 1011, 6207, 1011, 5536, 1011, 5568, 102] + }, + { + "text": "group: apple, apple-terminal, code, developer, showcase, terminal\nwhat: Code Snippet - Apple Terminal Grass. Apple Terminal Grass profile: black background with green text, per-character typing animation of a shell session.", + "ids": [ + 101, 2177, 1024, 6207, 1010, 6207, 1011, 5536, 1010, 3642, 1010, 9722, 1010, 13398, 1010, + 5536, 2054, 1024, 3642, 1055, 3490, 29519, 1011, 6207, 5536, 5568, 1012, 6207, 5536, 5568, + 6337, 1024, 2304, 4281, 2007, 2665, 3793, 1010, 2566, 1011, 2839, 22868, 7284, 1997, 1037, + 5806, 5219, 1012, 102 + ] + }, + { + "text": "code-snippet-apple-terminal-homebrew", + "ids": [ + 101, 3642, 1011, 1055, 3490, 29519, 1011, 6207, 1011, 5536, 1011, 2188, 13578, 2860, 102 + ] + }, + { + "text": "group: apple, apple-terminal, code, developer, showcase, terminal\nwhat: Code Snippet - Apple Terminal Homebrew. Apple Terminal Homebrew profile: black background with bright green text and lime cursor, per-character typing animation of a shell session.", + "ids": [ + 101, 2177, 1024, 6207, 1010, 6207, 1011, 5536, 1010, 3642, 1010, 9722, 1010, 13398, 1010, + 5536, 2054, 1024, 3642, 1055, 3490, 29519, 1011, 6207, 5536, 2188, 13578, 2860, 1012, 6207, + 5536, 2188, 13578, 2860, 6337, 1024, 2304, 4281, 2007, 4408, 2665, 3793, 1998, 14123, 12731, + 25301, 2099, 1010, 2566, 1011, 2839, 22868, 7284, 1997, 1037, 5806, 5219, 1012, 102 + ] + }, + { + "text": "code-snippet-apple-terminal-man-page", + "ids": [101, 3642, 1011, 1055, 3490, 29519, 1011, 6207, 1011, 5536, 1011, 2158, 1011, 3931, 102] + }, + { + "text": "group: apple, apple-terminal, code, developer, showcase, terminal\nwhat: Code Snippet - Apple Terminal Man Page. Apple Terminal Man Page profile: pale yellow background with black text, per-character typing animation of a shell session.", + "ids": [ + 101, 2177, 1024, 6207, 1010, 6207, 1011, 5536, 1010, 3642, 1010, 9722, 1010, 13398, 1010, + 5536, 2054, 1024, 3642, 1055, 3490, 29519, 1011, 6207, 5536, 2158, 3931, 1012, 6207, 5536, + 2158, 3931, 6337, 1024, 5122, 3756, 4281, 2007, 2304, 3793, 1010, 2566, 1011, 2839, 22868, + 7284, 1997, 1037, 5806, 5219, 1012, 102 + ] + }, + { + "text": "code-snippet-apple-terminal-novel", + "ids": [101, 3642, 1011, 1055, 3490, 29519, 1011, 6207, 1011, 5536, 1011, 3117, 102] + }, + { + "text": "group: apple, apple-terminal, code, developer, showcase, terminal\nwhat: Code Snippet - Apple Terminal Novel. Apple Terminal Novel profile: warm parchment background with dark brown text, per-character typing animation of a shell session.", + "ids": [ + 101, 2177, 1024, 6207, 1010, 6207, 1011, 5536, 1010, 3642, 1010, 9722, 1010, 13398, 1010, + 5536, 2054, 1024, 3642, 1055, 3490, 29519, 1011, 6207, 5536, 3117, 1012, 6207, 5536, 3117, + 6337, 1024, 4010, 22433, 4281, 2007, 2601, 2829, 3793, 1010, 2566, 1011, 2839, 22868, 7284, + 1997, 1037, 5806, 5219, 1012, 102 + ] + }, + { + "text": "code-snippet-apple-terminal-ocean", + "ids": [101, 3642, 1011, 1055, 3490, 29519, 1011, 6207, 1011, 5536, 1011, 4153, 102] + }, + { + "text": "group: apple, apple-terminal, code, developer, showcase, terminal\nwhat: Code Snippet - Apple Terminal Ocean. Apple Terminal Ocean profile: deep blue background with white text, per-character typing animation of a shell session.", + "ids": [ + 101, 2177, 1024, 6207, 1010, 6207, 1011, 5536, 1010, 3642, 1010, 9722, 1010, 13398, 1010, + 5536, 2054, 1024, 3642, 1055, 3490, 29519, 1011, 6207, 5536, 4153, 1012, 6207, 5536, 4153, + 6337, 1024, 2784, 2630, 4281, 2007, 2317, 3793, 1010, 2566, 1011, 2839, 22868, 7284, 1997, + 1037, 5806, 5219, 1012, 102 + ] + }, + { + "text": "code-snippet-apple-terminal-pro", + "ids": [101, 3642, 1011, 1055, 3490, 29519, 1011, 6207, 1011, 5536, 1011, 4013, 102] + }, + { + "text": "group: apple, apple-terminal, code, developer, showcase, terminal\nwhat: Code Snippet - Apple Terminal Pro. Apple Terminal Pro profile: black background with grey text and lime green cursor, per-character typing animation of a shell session.", + "ids": [ + 101, 2177, 1024, 6207, 1010, 6207, 1011, 5536, 1010, 3642, 1010, 9722, 1010, 13398, 1010, + 5536, 2054, 1024, 3642, 1055, 3490, 29519, 1011, 6207, 5536, 4013, 1012, 6207, 5536, 4013, + 6337, 1024, 2304, 4281, 2007, 4462, 3793, 1998, 14123, 2665, 12731, 25301, 2099, 1010, 2566, + 1011, 2839, 22868, 7284, 1997, 1037, 5806, 5219, 1012, 102 + ] + }, + { + "text": "code-snippet-apple-terminal-red-sands", + "ids": [ + 101, 3642, 1011, 1055, 3490, 29519, 1011, 6207, 1011, 5536, 1011, 2417, 1011, 13457, 102 + ] + }, + { + "text": "group: apple, apple-terminal, code, developer, showcase, terminal\nwhat: Code Snippet - Apple Terminal Red Sands. Apple Terminal Red Sands profile: deep red background with sandy text, per-character typing animation of a shell session.", + "ids": [ + 101, 2177, 1024, 6207, 1010, 6207, 1011, 5536, 1010, 3642, 1010, 9722, 1010, 13398, 1010, + 5536, 2054, 1024, 3642, 1055, 3490, 29519, 1011, 6207, 5536, 2417, 13457, 1012, 6207, 5536, + 2417, 13457, 6337, 1024, 2784, 2417, 4281, 2007, 7525, 3793, 1010, 2566, 1011, 2839, 22868, + 7284, 1997, 1037, 5806, 5219, 1012, 102 + ] + }, + { + "text": "code-snippet-apple-terminal-silver-aerogel", + "ids": [ + 101, 3642, 1011, 1055, 3490, 29519, 1011, 6207, 1011, 5536, 1011, 3165, 1011, 18440, 12439, + 102 + ] + }, + { + "text": "group: apple, apple-terminal, code, developer, showcase, terminal\nwhat: Code Snippet - Apple Terminal Silver Aerogel. Apple Terminal Silver Aerogel profile: dark grey background with white text, per-character typing animation of a shell session.", + "ids": [ + 101, 2177, 1024, 6207, 1010, 6207, 1011, 5536, 1010, 3642, 1010, 9722, 1010, 13398, 1010, + 5536, 2054, 1024, 3642, 1055, 3490, 29519, 1011, 6207, 5536, 3165, 18440, 12439, 1012, 6207, + 5536, 3165, 18440, 12439, 6337, 1024, 2601, 4462, 4281, 2007, 2317, 3793, 1010, 2566, 1011, + 2839, 22868, 7284, 1997, 1037, 5806, 5219, 1012, 102 + ] + }, + { + "text": "code-snippet-apple-terminal-solid-colors", + "ids": [101, 3642, 1011, 1055, 3490, 29519, 1011, 6207, 1011, 5536, 1011, 5024, 1011, 6087, 102] + }, + { + "text": "group: apple, apple-terminal, code, developer, showcase, terminal\nwhat: Code Snippet - Apple Terminal Solid Colors. Apple Terminal Solid Colors profile: deep purple background with white text, per-character typing animation of a shell session.", + "ids": [ + 101, 2177, 1024, 6207, 1010, 6207, 1011, 5536, 1010, 3642, 1010, 9722, 1010, 13398, 1010, + 5536, 2054, 1024, 3642, 1055, 3490, 29519, 1011, 6207, 5536, 5024, 6087, 1012, 6207, 5536, + 5024, 6087, 6337, 1024, 2784, 6379, 4281, 2007, 2317, 3793, 1010, 2566, 1011, 2839, 22868, + 7284, 1997, 1037, 5806, 5219, 1012, 102 + ] + }, + { + "text": "code-snippet-dark-2026", + "ids": [101, 3642, 1011, 1055, 3490, 29519, 1011, 2601, 1011, 16798, 2575, 102] + }, + { + "text": "group: code, developer, showcase, vscode\nwhat: Code Snippet - Dark 2026. VS Code workbench with per-character typing animation in the Dark 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.", + "ids": [ + 101, 2177, 1024, 3642, 1010, 9722, 1010, 13398, 1010, 5443, 16044, 2054, 1024, 3642, 1055, + 3490, 29519, 1011, 2601, 16798, 2575, 1012, 5443, 3642, 2147, 10609, 2818, 2007, 2566, 1011, + 2839, 22868, 7284, 1999, 1996, 2601, 16798, 2575, 4323, 1012, 2440, 3559, 18546, 2007, 4023, + 3347, 1010, 2217, 8237, 1010, 21628, 2015, 1010, 5536, 1010, 1998, 3570, 3347, 1012, 102 + ] + }, + { + "text": "code-snippet-dark-modern", + "ids": [101, 3642, 1011, 1055, 3490, 29519, 1011, 2601, 1011, 2715, 102] + }, + { + "text": "group: code, developer, showcase, vscode\nwhat: Code Snippet - Dark Modern. VS Code workbench with per-character typing animation in the Dark Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.", + "ids": [ + 101, 2177, 1024, 3642, 1010, 9722, 1010, 13398, 1010, 5443, 16044, 2054, 1024, 3642, 1055, + 3490, 29519, 1011, 2601, 2715, 1012, 5443, 3642, 2147, 10609, 2818, 2007, 2566, 1011, 2839, + 22868, 7284, 1999, 1996, 2601, 2715, 4323, 1012, 2440, 3559, 18546, 2007, 4023, 3347, 1010, + 2217, 8237, 1010, 21628, 2015, 1010, 5536, 1010, 1998, 3570, 3347, 1012, 102 + ] + }, + { + "text": "code-snippet-dark-plus", + "ids": [101, 3642, 1011, 1055, 3490, 29519, 1011, 2601, 1011, 4606, 102] + }, + { + "text": "group: code, developer, showcase, vscode\nwhat: Code Snippet - Dark+. VS Code workbench with per-character typing animation in the Dark+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.", + "ids": [ + 101, 2177, 1024, 3642, 1010, 9722, 1010, 13398, 1010, 5443, 16044, 2054, 1024, 3642, 1055, + 3490, 29519, 1011, 2601, 1009, 1012, 5443, 3642, 2147, 10609, 2818, 2007, 2566, 1011, 2839, + 22868, 7284, 1999, 1996, 2601, 1009, 4323, 1012, 2440, 3559, 18546, 2007, 4023, 3347, 1010, + 2217, 8237, 1010, 21628, 2015, 1010, 5536, 1010, 1998, 3570, 3347, 1012, 102 + ] + }, + { "text": "code-snippet-flight", "ids": [101, 3642, 1011, 1055, 3490, 29519, 1011, 3462, 102] }, + { + "text": "group: code, code-animation, developer, flight\nwhat: Code Snippet Flight. Discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP.", + "ids": [ + 101, 2177, 1024, 3642, 1010, 3642, 1011, 7284, 1010, 9722, 1010, 3462, 2054, 1024, 3642, 1055, + 3490, 29519, 3462, 1012, 16246, 3642, 1055, 3490, 29519, 2015, 4875, 1999, 2013, 1996, 2217, + 1998, 21365, 2046, 1037, 16934, 2565, 1010, 14648, 1012, 3796, 1011, 2504, 11238, 1012, 102 + ] + }, + { + "text": "code-snippet-high-contrast", + "ids": [101, 3642, 1011, 1055, 3490, 29519, 1011, 2152, 1011, 5688, 102] + }, + { + "text": "group: code, developer, showcase, vscode\nwhat: Code Snippet - High Contrast. VS Code workbench with per-character typing animation in the High Contrast theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.", + "ids": [ + 101, 2177, 1024, 3642, 1010, 9722, 1010, 13398, 1010, 5443, 16044, 2054, 1024, 3642, 1055, + 3490, 29519, 1011, 2152, 5688, 1012, 5443, 3642, 2147, 10609, 2818, 2007, 2566, 1011, 2839, + 22868, 7284, 1999, 1996, 2152, 5688, 4323, 1012, 2440, 3559, 18546, 2007, 4023, 3347, 1010, + 2217, 8237, 1010, 21628, 2015, 1010, 5536, 1010, 1998, 3570, 3347, 1012, 102 + ] + }, + { + "text": "code-snippet-high-contrast-light", + "ids": [101, 3642, 1011, 1055, 3490, 29519, 1011, 2152, 1011, 5688, 1011, 2422, 102] + }, + { + "text": "group: code, developer, showcase, vscode\nwhat: Code Snippet - High Contrast Light. VS Code workbench with per-character typing animation in the High Contrast Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.", + "ids": [ + 101, 2177, 1024, 3642, 1010, 9722, 1010, 13398, 1010, 5443, 16044, 2054, 1024, 3642, 1055, + 3490, 29519, 1011, 2152, 5688, 2422, 1012, 5443, 3642, 2147, 10609, 2818, 2007, 2566, 1011, + 2839, 22868, 7284, 1999, 1996, 2152, 5688, 2422, 4323, 1012, 2440, 3559, 18546, 2007, 4023, + 3347, 1010, 2217, 8237, 1010, 21628, 2015, 1010, 5536, 1010, 1998, 3570, 3347, 1012, 102 + ] + }, + { + "text": "code-snippet-light-2026", + "ids": [101, 3642, 1011, 1055, 3490, 29519, 1011, 2422, 1011, 16798, 2575, 102] + }, + { + "text": "group: code, developer, showcase, vscode\nwhat: Code Snippet - Light 2026. VS Code workbench with per-character typing animation in the Light 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.", + "ids": [ + 101, 2177, 1024, 3642, 1010, 9722, 1010, 13398, 1010, 5443, 16044, 2054, 1024, 3642, 1055, + 3490, 29519, 1011, 2422, 16798, 2575, 1012, 5443, 3642, 2147, 10609, 2818, 2007, 2566, 1011, + 2839, 22868, 7284, 1999, 1996, 2422, 16798, 2575, 4323, 1012, 2440, 3559, 18546, 2007, 4023, + 3347, 1010, 2217, 8237, 1010, 21628, 2015, 1010, 5536, 1010, 1998, 3570, 3347, 1012, 102 + ] + }, + { + "text": "code-snippet-light-modern", + "ids": [101, 3642, 1011, 1055, 3490, 29519, 1011, 2422, 1011, 2715, 102] + }, + { + "text": "group: code, developer, showcase, vscode\nwhat: Code Snippet - Light Modern. VS Code workbench with per-character typing animation in the Light Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.", + "ids": [ + 101, 2177, 1024, 3642, 1010, 9722, 1010, 13398, 1010, 5443, 16044, 2054, 1024, 3642, 1055, + 3490, 29519, 1011, 2422, 2715, 1012, 5443, 3642, 2147, 10609, 2818, 2007, 2566, 1011, 2839, + 22868, 7284, 1999, 1996, 2422, 2715, 4323, 1012, 2440, 3559, 18546, 2007, 4023, 3347, 1010, + 2217, 8237, 1010, 21628, 2015, 1010, 5536, 1010, 1998, 3570, 3347, 1012, 102 + ] + }, + { + "text": "code-snippet-light-plus", + "ids": [101, 3642, 1011, 1055, 3490, 29519, 1011, 2422, 1011, 4606, 102] + }, + { + "text": "group: code, developer, showcase, vscode\nwhat: Code Snippet - Light+. VS Code workbench with per-character typing animation in the Light+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.", + "ids": [ + 101, 2177, 1024, 3642, 1010, 9722, 1010, 13398, 1010, 5443, 16044, 2054, 1024, 3642, 1055, + 3490, 29519, 1011, 2422, 1009, 1012, 5443, 3642, 2147, 10609, 2818, 2007, 2566, 1011, 2839, + 22868, 7284, 1999, 1996, 2422, 1009, 4323, 1012, 2440, 3559, 18546, 2007, 4023, 3347, 1010, + 2217, 8237, 1010, 21628, 2015, 1010, 5536, 1010, 1998, 3570, 3347, 1012, 102 + ] + }, + { + "text": "code-snippet-monokai", + "ids": [101, 3642, 1011, 1055, 3490, 29519, 1011, 18847, 11151, 102] + }, + { + "text": "group: code, developer, showcase, vscode\nwhat: Code Snippet - Monokai. VS Code workbench with per-character typing animation in the Monokai theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.", + "ids": [ + 101, 2177, 1024, 3642, 1010, 9722, 1010, 13398, 1010, 5443, 16044, 2054, 1024, 3642, 1055, + 3490, 29519, 1011, 18847, 11151, 1012, 5443, 3642, 2147, 10609, 2818, 2007, 2566, 1011, 2839, + 22868, 7284, 1999, 1996, 18847, 11151, 4323, 1012, 2440, 3559, 18546, 2007, 4023, 3347, 1010, + 2217, 8237, 1010, 21628, 2015, 1010, 5536, 1010, 1998, 3570, 3347, 1012, 102 + ] + }, + { + "text": "code-snippet-solarized-light", + "ids": [101, 3642, 1011, 1055, 3490, 29519, 1011, 5943, 3550, 1011, 2422, 102] + }, + { + "text": "group: code, developer, showcase, vscode\nwhat: Code Snippet - Solarized Light. VS Code workbench with per-character typing animation in the Solarized Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.", + "ids": [ + 101, 2177, 1024, 3642, 1010, 9722, 1010, 13398, 1010, 5443, 16044, 2054, 1024, 3642, 1055, + 3490, 29519, 1011, 5943, 3550, 2422, 1012, 5443, 3642, 2147, 10609, 2818, 2007, 2566, 1011, + 2839, 22868, 7284, 1999, 1996, 5943, 3550, 2422, 4323, 1012, 2440, 3559, 18546, 2007, 4023, + 3347, 1010, 2217, 8237, 1010, 21628, 2015, 1010, 5536, 1010, 1998, 3570, 3347, 1012, 102 + ] + }, + { + "text": "code-snippet-visual-studio-dark", + "ids": [101, 3642, 1011, 1055, 3490, 29519, 1011, 5107, 1011, 2996, 1011, 2601, 102] + }, + { + "text": "group: code, developer, showcase, vscode\nwhat: Code Snippet - Visual Studio Dark. VS Code workbench with per-character typing animation in the Visual Studio Dark theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.", + "ids": [ + 101, 2177, 1024, 3642, 1010, 9722, 1010, 13398, 1010, 5443, 16044, 2054, 1024, 3642, 1055, + 3490, 29519, 1011, 5107, 2996, 2601, 1012, 5443, 3642, 2147, 10609, 2818, 2007, 2566, 1011, + 2839, 22868, 7284, 1999, 1996, 5107, 2996, 2601, 4323, 1012, 2440, 3559, 18546, 2007, 4023, + 3347, 1010, 2217, 8237, 1010, 21628, 2015, 1010, 5536, 1010, 1998, 3570, 3347, 1012, 102 + ] + }, + { + "text": "code-snippet-visual-studio-light", + "ids": [101, 3642, 1011, 1055, 3490, 29519, 1011, 5107, 1011, 2996, 1011, 2422, 102] + }, + { + "text": "group: code, developer, showcase, vscode\nwhat: Code Snippet - Visual Studio Light. VS Code workbench with per-character typing animation in the Visual Studio Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.", + "ids": [ + 101, 2177, 1024, 3642, 1010, 9722, 1010, 13398, 1010, 5443, 16044, 2054, 1024, 3642, 1055, + 3490, 29519, 1011, 5107, 2996, 2422, 1012, 5443, 3642, 2147, 10609, 2818, 2007, 2566, 1011, + 2839, 22868, 7284, 1999, 1996, 5107, 2996, 2422, 4323, 1012, 2440, 3559, 18546, 2007, 4023, + 3347, 1010, 2217, 8237, 1010, 21628, 2015, 1010, 5536, 1010, 1998, 3570, 3347, 1012, 102 + ] + }, + { "text": "code-terminal-run", "ids": [101, 3642, 1011, 5536, 1011, 2448, 102] }, + { + "text": "group: demonstrate, deterministic, motion-primitive, product-demo, terminal, typing, ui-props\nwhat: Code Terminal Run. A token-chrome terminal panel runs one command: the prompt line types deterministically behind an integer-cycle caret, executes after a beat, and output lines print one per cue before a fresh prompt appears.\nuse_when: Jobs: demonstrate. Profile: typing.", + "ids": [ + 101, 2177, 1024, 10580, 1010, 28283, 25300, 10074, 1010, 4367, 1011, 10968, 1010, 4031, 1011, + 9703, 1010, 5536, 1010, 22868, 1010, 21318, 1011, 24387, 2054, 1024, 3642, 5536, 2448, 1012, + 1037, 19204, 1011, 18546, 5536, 5997, 3216, 2028, 3094, 1024, 1996, 25732, 2240, 4127, 28283, + 25300, 10074, 3973, 2369, 2019, 16109, 1011, 5402, 2729, 2102, 1010, 15389, 2015, 2044, 1037, + 3786, 1010, 1998, 6434, 3210, 6140, 2028, 2566, 16091, 2077, 1037, 4840, 25732, 3544, 1012, + 2224, 1035, 2043, 1024, 5841, 1024, 10580, 1012, 6337, 1024, 22868, 1012, 102 + ] + }, + { "text": "code-typing", "ids": [101, 3642, 1011, 22868, 102] }, + { + "text": "group: code, code-animation, developer, typing\nwhat: Code Typing. Token-streamed typing reveal with a caret that tracks the frontier, deterministic, no CSS animation.", + "ids": [ + 101, 2177, 1024, 3642, 1010, 3642, 1011, 7284, 1010, 9722, 1010, 22868, 2054, 1024, 3642, + 22868, 1012, 19204, 1011, 18498, 22868, 7487, 2007, 1037, 2729, 2102, 2008, 3162, 1996, 8880, + 1010, 28283, 25300, 10074, 1010, 2053, 20116, 2015, 7284, 1012, 102 + ] + }, + { "text": "collapsible", "ids": [101, 8902, 2721, 4523, 7028, 102] }, + { + "text": "group: collapsible, disclosure, remocn-port, ui-primitive\nwhat: Collapsible. A compact disclosure surface with an accessible trigger, restrained chevron motion, and deterministic height reveal", + "ids": [ + 101, 2177, 1024, 8902, 2721, 4523, 7028, 1010, 19380, 1010, 2128, 5302, 2278, 2078, 1011, + 3417, 1010, 21318, 1011, 10968, 2054, 1024, 8902, 2721, 4523, 7028, 1012, 1037, 9233, 19380, + 3302, 2007, 2019, 7801, 9495, 1010, 19868, 18178, 28588, 4367, 1010, 1998, 28283, 25300, + 10074, 4578, 7487, 102 + ] + }, + { "text": "combobox", "ids": [101, 25025, 8758, 102] }, + { + "text": "group: combobox, control, remocn-port, ui-primitive\nwhat: Combobox. A searchable combobox with an anchored option list and explicit selection check", + "ids": [ + 101, 2177, 1024, 25025, 8758, 1010, 2491, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, + 21318, 1011, 10968, 2054, 1024, 25025, 8758, 1012, 1037, 3945, 3085, 25025, 8758, 2007, 2019, + 14453, 5724, 2862, 1998, 13216, 4989, 4638, 102 + ] + }, + { "text": "command-menu", "ids": [101, 3094, 1011, 12183, 102] }, + { + "text": "group: command-menu, overlay, remocn-port, ui-primitive\nwhat: Command Menu. An Operator Black command palette with a recessed search field and mint selection check", + "ids": [ + 101, 2177, 1024, 3094, 1011, 12183, 1010, 2058, 8485, 1010, 2128, 5302, 2278, 2078, 1011, + 3417, 1010, 21318, 1011, 10968, 2054, 1024, 3094, 12183, 1012, 2019, 6872, 2304, 3094, 27396, + 2007, 1037, 28290, 2098, 3945, 2492, 1998, 12927, 4989, 4638, 102 + ] + }, + { "text": "command-menu-item", "ids": [101, 3094, 1011, 12183, 1011, 8875, 102] }, + { + "text": "group: remocn-port, ui-primitive\nwhat: Command Menu Item. An Operator Black command-row specimen with technical shortcuts and restrained selection state.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, 1011, 10968, 2054, 1024, + 3094, 12183, 8875, 1012, 2019, 6872, 2304, 3094, 1011, 5216, 11375, 2007, 4087, 2460, 12690, + 2015, 1998, 19868, 4989, 2110, 1012, 102 + ] + }, + { "text": "comparison-split", "ids": [101, 7831, 1011, 3975, 102] }, + { + "text": "group: before-after, compare, holdable, prop, ui-props, wipe\nwhat: Comparison Split. Two full-bleed panels compare before and after states as a persistent divider wipes the vivid after layer over the muted before layer and rests at a configurable split.\nuse_when: Jobs: compare. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 2077, 1011, 2044, 1010, 12826, 1010, 2907, 3085, 1010, 17678, 1010, 21318, + 1011, 24387, 1010, 13387, 2054, 1024, 7831, 3975, 1012, 2048, 2440, 1011, 19501, 9320, 12826, + 2077, 1998, 2044, 2163, 2004, 1037, 14516, 11443, 2099, 13387, 2015, 1996, 14954, 2044, 6741, + 2058, 1996, 22124, 2077, 6741, 1998, 16626, 2012, 1037, 9530, 8873, 27390, 3085, 3975, 1012, + 2224, 1035, 2043, 1024, 5841, 1024, 12826, 1012, 6337, 1024, 2907, 3085, 1012, 102 + ] + }, + { "text": "confetti", "ids": [101, 9530, 7959, 6916, 102] }, + { + "text": "group: effect, remocn-port\nwhat: Confetti. A deterministic celebration burst with seeded particles and gravity.", + "ids": [ + 101, 2177, 1024, 3466, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 2054, 1024, 9530, 7959, 6916, + 1012, 1037, 28283, 25300, 10074, 7401, 6532, 2007, 13916, 9309, 1998, 8992, 1012, 102 + ] + }, + { "text": "conic-progress-ring", "ids": [101, 9530, 2594, 1011, 5082, 1011, 3614, 102] }, + { + "text": "group: conic-gradient, data, demonstrate, progress, prove, ring\nwhat: Conic Progress Ring. A token-driven conic progress ring whose angular fill and center count settle together from one registered percentage.\nuse_when: Jobs: prove, demonstrate. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 9530, 2594, 1011, 17978, 1010, 2951, 1010, 10580, 1010, 5082, 1010, 6011, + 1010, 3614, 2054, 1024, 9530, 2594, 5082, 3614, 1012, 1037, 19204, 1011, 5533, 9530, 2594, + 5082, 3614, 3005, 16108, 6039, 1998, 2415, 4175, 7392, 2362, 2013, 2028, 5068, 7017, 1012, + 2224, 1035, 2043, 1024, 5841, 1024, 6011, 1010, 10580, 1012, 6337, 1024, 2907, 3085, 1012, 102 + ] + }, + { "text": "constellation-hub", "ids": [101, 15300, 1011, 9594, 102] }, + { + "text": "group: connector, exhibit, feature-tour, hub, motion-primitive, nodes, reveal\nwhat: Constellation Hub. Feature nodes brighten in narration order as real-length SVG connectors draw outward from a fixed central hub, then settle into one lockup.\nuse_when: Jobs: exhibit. Profile: network.", + "ids": [ + 101, 2177, 1024, 19400, 1010, 8327, 1010, 3444, 1011, 2778, 1010, 9594, 1010, 4367, 1011, + 10968, 1010, 14164, 1010, 7487, 2054, 1024, 15300, 9594, 1012, 3444, 14164, 4408, 2368, 1999, + 21283, 2344, 2004, 2613, 1011, 3091, 17917, 2290, 19400, 2015, 4009, 15436, 2013, 1037, 4964, + 2430, 9594, 1010, 2059, 7392, 2046, 2028, 5843, 6279, 1012, 2224, 1035, 2043, 1024, 5841, + 1024, 8327, 1012, 6337, 1024, 2897, 1012, 102 + ] + }, + { "text": "context-menu", "ids": [101, 6123, 1011, 12183, 102] }, + { + "text": "group: context-menu, menu, remocn-port, ui-primitive\nwhat: Context Menu. An Operator Black context menu with a pointer anchor, technical shortcuts, and mint selection check", + "ids": [ + 101, 2177, 1024, 6123, 1011, 12183, 1010, 12183, 1010, 2128, 5302, 2278, 2078, 1011, 3417, + 1010, 21318, 1011, 10968, 2054, 1024, 6123, 12183, 1012, 2019, 6872, 2304, 6123, 12183, 2007, + 1037, 20884, 8133, 1010, 4087, 2460, 12690, 2015, 1010, 1998, 12927, 4989, 4638, 102 + ] + }, + { "text": "count-up", "ids": [101, 4175, 1011, 2039, 102] }, + { + "text": "group: counter, deterministic, motion-primitive, number, proof, proof-stats, prove, stats\nwhat: Count Up. A token-native stat counter that eases between values and lands with a restrained scale pulse.\nuse_when: Jobs: prove. Profile: count.", + "ids": [ + 101, 2177, 1024, 4675, 1010, 28283, 25300, 10074, 1010, 4367, 1011, 10968, 1010, 2193, 1010, + 6947, 1010, 6947, 1011, 26319, 1010, 6011, 1010, 26319, 2054, 1024, 4175, 2039, 1012, 1037, + 19204, 1011, 3128, 28093, 4675, 2008, 7496, 2015, 2090, 5300, 1998, 4915, 2007, 1037, 19868, + 4094, 8187, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 6011, 1012, 6337, 1024, 4175, 1012, 102 + ] + }, + { "text": "cross-warp-morph", "ids": [101, 2892, 1011, 24136, 1011, 22822, 8458, 102] }, + { + "text": "group: shader, transition\nwhat: Cross Warp Morph. Shader transition with cross-warped morphing", + "ids": [ + 101, 2177, 1024, 8703, 2099, 1010, 6653, 2054, 1024, 2892, 24136, 22822, 8458, 1012, 8703, + 2099, 6653, 2007, 2892, 1011, 25618, 22822, 21850, 3070, 102 + ] + }, + { "text": "cta-close", "ids": [101, 14931, 2050, 1011, 2485, 102] }, + { + "text": "group: ask, close, cta, end-card, motion-primitive, ui-props\nwhat: CTA Close. A display-scale action line lands per word and fills the frame with air, one generous CTA capsule pops beneath it with a single overshoot, and the finished close holds completely still.\nuse_when: Jobs: ask. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 3198, 1010, 2485, 1010, 14931, 2050, 1010, 2203, 1011, 4003, 1010, 4367, + 1011, 10968, 1010, 21318, 1011, 24387, 2054, 1024, 14931, 2050, 2485, 1012, 1037, 4653, 1011, + 4094, 2895, 2240, 4915, 2566, 2773, 1998, 17469, 1996, 4853, 2007, 2250, 1010, 2028, 12382, + 14931, 2050, 18269, 16949, 4218, 2009, 2007, 1037, 2309, 15849, 23416, 1010, 1998, 1996, 2736, + 2485, 4324, 3294, 2145, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 3198, 1012, 6337, 1024, + 2907, 3085, 1012, 102 + ] + }, + { "text": "cta-lockup", "ids": [101, 14931, 2050, 1011, 5843, 6279, 102] }, + { + "text": "group: ask, cta, end-card, lockup, motion-primitive, ui-props\nwhat: CTA Lockup. A canonical closing lockup that reveals an action line, pops in an accent CTA capsule, settles supporting microcopy, and holds with confidence.\nuse_when: Jobs: ask. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 3198, 1010, 14931, 2050, 1010, 2203, 1011, 4003, 1010, 5843, 6279, 1010, + 4367, 1011, 10968, 1010, 21318, 1011, 24387, 2054, 1024, 14931, 2050, 5843, 6279, 1012, 1037, + 18562, 5494, 5843, 6279, 2008, 7657, 2019, 2895, 2240, 1010, 16949, 1999, 2019, 9669, 14931, + 2050, 18269, 1010, 27221, 4637, 12702, 3597, 7685, 1010, 1998, 4324, 2007, 7023, 1012, 2224, + 1035, 2043, 1024, 5841, 1024, 3198, 1012, 6337, 1024, 2907, 3085, 1012, 102 + ] + }, + { "text": "cursor", "ids": [101, 12731, 25301, 2099, 102] }, + { + "text": "group: cursor, pointer, remocn-port, ui-primitive\nwhat: Cursor. A technical SVG pointer with guided travel, a functional click ripple, and a compact action callout", + "ids": [ + 101, 2177, 1024, 12731, 25301, 2099, 1010, 20884, 1010, 2128, 5302, 2278, 2078, 1011, 3417, + 1010, 21318, 1011, 10968, 2054, 1024, 12731, 25301, 2099, 1012, 1037, 4087, 17917, 2290, + 20884, 2007, 8546, 3604, 1010, 1037, 8360, 11562, 24644, 1010, 1998, 1037, 9233, 2895, 2655, + 5833, 102 + ] + }, + { + "text": "cursor-glyph-trail", + "ids": [101, 12731, 25301, 2099, 1011, 1043, 2135, 8458, 1011, 4446, 102] + }, + { + "text": "group: cursor, demonstrate, deterministic, glyphs, motion-primitive, trail\nwhat: Cursor Glyph Trail. An actor travels an authored path depositing small dithered glyphs at its past positions, each popping in and decaying in place, stamp rate scaling with the actor's velocity.\nuse_when: Jobs: demonstrate. Profile: stamp-decay.", + "ids": [ + 101, 2177, 1024, 12731, 25301, 2099, 1010, 10580, 1010, 28283, 25300, 10074, 1010, 1043, 2135, + 18757, 1010, 4367, 1011, 10968, 1010, 4446, 2054, 1024, 12731, 25301, 2099, 1043, 2135, 8458, + 4446, 1012, 2019, 3364, 7930, 2019, 8786, 4130, 12816, 2075, 2235, 4487, 12399, 2098, 1043, + 2135, 18757, 2012, 2049, 2627, 4460, 1010, 2169, 20095, 1999, 1998, 13121, 2075, 1999, 2173, + 1010, 11359, 3446, 25169, 2007, 1996, 3364, 1005, 1055, 10146, 1012, 2224, 1035, 2043, 1024, + 5841, 1024, 10580, 1012, 6337, 1024, 11359, 1011, 13121, 1012, 102 + ] + }, + { "text": "cut-the-curve", "ids": [101, 3013, 1011, 1996, 1011, 7774, 102] }, + { + "text": "group: bridge, demonstrate, directional-cut, transition, transitions, velocity-match, whip\nwhat: Cut the Curve. A velocity-matched directional hard cut: the outgoing subject accelerates with power4.in, swaps at peak velocity, and the incoming subject continues in the same direction with power4.out.\nuse_when: Jobs: bridge, demonstrate. Profile: transition.", + "ids": [ + 101, 2177, 1024, 2958, 1010, 10580, 1010, 20396, 1011, 3013, 1010, 6653, 1010, 22166, 1010, + 10146, 1011, 2674, 1010, 11473, 2054, 1024, 3013, 1996, 7774, 1012, 1037, 10146, 1011, 10349, + 20396, 2524, 3013, 1024, 1996, 22011, 3395, 23306, 2015, 2007, 2373, 2549, 1012, 1999, 1010, + 19948, 2015, 2012, 4672, 10146, 1010, 1998, 1996, 14932, 3395, 4247, 1999, 1996, 2168, 3257, + 2007, 2373, 2549, 1012, 2041, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 2958, 1010, 10580, + 1012, 6337, 1024, 6653, 1012, 102 + ] + }, + { "text": "dashboard-populate", "ids": [101, 24923, 1011, 3769, 9869, 102] }, + { + "text": "group: data, remocn-port\nwhat: Dashboard Populate. Skeleton dashboard cards resolve into populated charts and metrics.", + "ids": [ + 101, 2177, 1024, 2951, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 2054, 1024, 24923, 3769, + 9869, 1012, 13526, 24923, 5329, 10663, 2046, 10357, 6093, 1998, 12046, 2015, 1012, 102 + ] + }, + { "text": "data-chart", "ids": [101, 2951, 1011, 3673, 102] }, + { + "text": "group: chart, data, statistics\nwhat: Data Chart. Animated bar + line chart with staggered reveal, NYT-style typography, and value labels", + "ids": [ + 101, 2177, 1024, 3673, 1010, 2951, 1010, 6747, 2054, 1024, 2951, 3673, 1012, 6579, 3347, 1009, + 2240, 3673, 2007, 14648, 7487, 1010, 6396, 2102, 1011, 2806, 5939, 6873, 12565, 1010, 1998, + 3643, 10873, 102 + ] + }, + { "text": "data-flow-pipes", "ids": [101, 2951, 1011, 4834, 1011, 12432, 102] }, + { + "text": "group: remocn-port, showcase\nwhat: Data Flow Pipes. Animated pipe routes move packets between data nodes.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13398, 2054, 1024, 2951, 4834, + 12432, 1012, 6579, 8667, 5847, 2693, 23730, 2090, 2951, 14164, 1012, 102 + ] + }, + { "text": "decline-chart", "ids": [101, 6689, 1011, 3673, 102] }, + { + "text": "group: agitate, chart, data, decline, metric, motion-primitive, problem\nwhat: Decline Chart. A metric line draws downward as its value counts down and the ambient background darkens in lockstep.\nuse_when: Jobs: agitate. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 12943, 17570, 1010, 3673, 1010, 2951, 1010, 6689, 1010, 12046, 1010, 4367, + 1011, 10968, 1010, 3291, 2054, 1024, 6689, 3673, 1012, 1037, 12046, 2240, 9891, 14047, 2004, + 2049, 3643, 9294, 2091, 1998, 1996, 17093, 4281, 2601, 6132, 1999, 11223, 2618, 2361, 1012, + 2224, 1035, 2043, 1024, 5841, 1024, 12943, 17570, 1012, 6337, 1024, 2907, 3085, 1012, 102 + ] + }, + { "text": "depth-rack-focus", "ids": [101, 5995, 1011, 14513, 1011, 3579, 102] }, + { + "text": "group: Camera moves.\nwhat: A sharp foreground dissolves into bokeh as a blurred message behind it resolves while the whole stack creeps forward.\nuse_when: Attention must transfer once from a near plane to a message on a far plane.\navoid_when: Avoid it when animated blur is unacceptable, because blur on the foreground and message planes is the stated focus mechanic.", + "ids": [ + 101, 2177, 1024, 4950, 5829, 1012, 2054, 1024, 1037, 4629, 18921, 16365, 21969, 2015, 2046, + 8945, 3489, 2232, 2004, 1037, 18449, 4471, 2369, 2009, 10663, 2015, 2096, 1996, 2878, 9991, + 19815, 2015, 2830, 1012, 2224, 1035, 2043, 1024, 3086, 2442, 4651, 2320, 2013, 1037, 2379, + 4946, 2000, 1037, 4471, 2006, 1037, 2521, 4946, 1012, 4468, 1035, 2043, 1024, 4468, 2009, + 2043, 6579, 14819, 2003, 21873, 1010, 2138, 14819, 2006, 1996, 18921, 16365, 1998, 4471, 9738, + 2003, 1996, 3090, 3579, 15893, 1012, 102 + ] + }, + { "text": "device-frame-stage", "ids": [101, 5080, 1011, 4853, 1011, 2754, 102] }, + { + "text": "group: demonstrate, device, holdable, mobile, prop, tablet, ui-props\nwhat: Device Frame Stage. A phone or tablet mockup staged as a physical scene prop with a screen slot for arbitrary reconstructed UI, rising onto the stage, settling, and holding an idle float\nuse_when: Jobs: demonstrate. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 10580, 1010, 5080, 1010, 2907, 3085, 1010, 4684, 1010, 17678, 1010, 13855, + 1010, 21318, 1011, 24387, 2054, 1024, 5080, 4853, 2754, 1012, 1037, 3042, 2030, 13855, 12934, + 6279, 9813, 2004, 1037, 3558, 3496, 17678, 2007, 1037, 3898, 10453, 2005, 15275, 14858, 21318, + 1010, 4803, 3031, 1996, 2754, 1010, 9853, 1010, 1998, 3173, 2019, 18373, 14257, 2224, 1035, + 2043, 1024, 5841, 1024, 10580, 1012, 6337, 1024, 2907, 3085, 1012, 102 + ] + }, + { "text": "device-mockup-zoom", "ids": [101, 5080, 1011, 12934, 6279, 1011, 24095, 102] }, + { + "text": "group: remocn-port, showcase\nwhat: Device Mockup Zoom. A device frame scales forward while UI panels parallax behind it.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13398, 2054, 1024, 5080, 12934, + 6279, 24095, 1012, 1037, 5080, 4853, 9539, 2830, 2096, 21318, 9320, 11498, 4571, 2595, 2369, + 2009, 1012, 102 + ] + }, + { "text": "dialog", "ids": [101, 13764, 8649, 102] }, + { + "text": "group: dialog, overlay, remocn-port, ui-primitive\nwhat: Dialog. An Operator Black centered modal with a flat backdrop, restrained actions, and Soft Optical motion", + "ids": [ + 101, 2177, 1024, 13764, 8649, 1010, 2058, 8485, 1010, 2128, 5302, 2278, 2078, 1011, 3417, + 1010, 21318, 1011, 10968, 2054, 1024, 13764, 8649, 1012, 2019, 6872, 2304, 8857, 16913, 2389, + 2007, 1037, 4257, 18876, 1010, 19868, 4506, 1010, 1998, 3730, 9380, 4367, 102 + ] + }, + { "text": "directional-wipe", "ids": [101, 20396, 1011, 13387, 102] }, + { + "text": "group: remocn-port, transition-primitive\nwhat: Directional Wipe. A directional scene push that slides one panel over another.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 6653, 1011, 10968, 2054, 1024, + 20396, 13387, 1012, 1037, 20396, 3496, 5245, 2008, 14816, 2028, 5997, 2058, 2178, 1012, 102 + ] + }, + { "text": "domain-warp-dissolve", "ids": [101, 5884, 1011, 24136, 1011, 21969, 102] }, + { + "text": "group: shader, transition\nwhat: Domain Warp Dissolve. Shader transition with fractal noise domain warping", + "ids": [ + 101, 2177, 1024, 8703, 2099, 1010, 6653, 2054, 1024, 5884, 24136, 21969, 1012, 8703, 2099, + 6653, 2007, 25312, 25572, 2140, 5005, 5884, 24136, 2075, 102 + ] + }, + { "text": "drag-and-drop-flow", "ids": [101, 8011, 1011, 1998, 1011, 4530, 1011, 4834, 102] }, + { + "text": "group: remocn-port, showcase\nwhat: Drag and Drop Flow. Cards drag from backlog to timeline with snap feedback.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13398, 2054, 1024, 8011, 1998, + 4530, 4834, 1012, 5329, 8011, 2013, 2067, 21197, 2000, 17060, 2007, 10245, 12247, 1012, 102 + ] + }, + { "text": "drawer", "ids": [101, 13065, 102] }, + { + "text": "group: drawer, overlay, remocn-port, ui-primitive\nwhat: Drawer. An Operator Black bottom drawer with matte rows and edge-attached Soft Optical motion", + "ids": [ + 101, 2177, 1024, 13065, 1010, 2058, 8485, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, + 21318, 1011, 10968, 2054, 1024, 13065, 1012, 2019, 6872, 2304, 3953, 13065, 2007, 4717, 2063, + 10281, 1998, 3341, 1011, 4987, 3730, 9380, 4367, 102 + ] + }, + { "text": "drift-hold", "ids": [101, 11852, 1011, 2907, 102] }, + { + "text": "group: ambient, camera, drift, hold, loopable, motion-primitive, orient\nwhat: Drift Hold. A centered content card stays subtly alive through loop-exact rotation, scale breathing, and a slow light sweep.\nuse_when: Jobs: orient. Profile: ambient.", + "ids": [ + 101, 2177, 1024, 17093, 1010, 4950, 1010, 11852, 1010, 2907, 1010, 7077, 3085, 1010, 4367, + 1011, 10968, 1010, 16865, 2054, 1024, 11852, 2907, 1012, 1037, 8857, 4180, 4003, 12237, 28797, + 4142, 2083, 7077, 1011, 6635, 9963, 1010, 4094, 5505, 1010, 1998, 1037, 4030, 2422, 11740, + 1012, 2224, 1035, 2043, 1024, 5841, 1024, 16865, 1012, 6337, 1024, 17093, 1012, 102 + ] + }, + { "text": "dropdown-menu", "ids": [101, 4530, 7698, 1011, 12183, 102] }, + { + "text": "group: dropdown-menu, menu, remocn-port, ui-primitive\nwhat: Dropdown Menu. An Operator Black dropdown menu with origin-aware motion and a mint selection check", + "ids": [ + 101, 2177, 1024, 4530, 7698, 1011, 12183, 1010, 12183, 1010, 2128, 5302, 2278, 2078, 1011, + 3417, 1010, 21318, 1011, 10968, 2054, 1024, 4530, 7698, 12183, 1012, 2019, 6872, 2304, 4530, + 7698, 12183, 2007, 4761, 1011, 5204, 4367, 1998, 1037, 12927, 4989, 4638, 102 + ] + }, + { "text": "dropdown-menu-item", "ids": [101, 4530, 7698, 1011, 12183, 1011, 8875, 102] }, + { + "text": "group: remocn-port, ui-primitive\nwhat: Dropdown Menu Item. An Operator Black menu-row specimen showing idle, hover, selected, and disabled treatments.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, 1011, 10968, 2054, 1024, + 4530, 7698, 12183, 8875, 1012, 2019, 6872, 2304, 12183, 1011, 5216, 11375, 4760, 18373, 1010, + 25215, 2099, 1010, 3479, 1010, 1998, 9776, 13441, 1012, 102 + ] + }, + { "text": "dynamic-grid", "ids": [101, 8790, 1011, 8370, 102] }, + { + "text": "group: background, grid, motion-primitive, ui\nwhat: Dynamic Grid. A responsive animated grid background driven by CSS variables for SaaS, code, and data scenes", + "ids": [ + 101, 2177, 1024, 4281, 1010, 8370, 1010, 4367, 1011, 10968, 1010, 21318, 2054, 1024, 8790, + 8370, 1012, 1037, 26651, 6579, 8370, 4281, 5533, 2011, 20116, 2015, 10857, 2005, 7842, 3022, + 1010, 3642, 1010, 1998, 2951, 5019, 102 + ] + }, + { "text": "echo-trail", "ids": [101, 9052, 1011, 4446, 102] }, + { + "text": "group: Motion trails.\nwhat: A slotted subject travels along an authored path with lagged ghost copies that collapse into it and disappear at rest.\nuse_when: One moving subject needs an onion-skin trail that shows its recent positions before a clean landing.\navoid_when: Avoid it when more than six ghosts or a lag outside 0.03 to 0.3 seconds is required, because echoes are limited to 2 through 6 and delta is clamped to that range.", + "ids": [ + 101, 2177, 1024, 4367, 9612, 1012, 2054, 1024, 1037, 10453, 3064, 3395, 7930, 2247, 2019, + 8786, 4130, 2007, 2474, 15567, 5745, 4809, 2008, 7859, 2046, 2009, 1998, 10436, 2012, 2717, + 1012, 2224, 1035, 2043, 1024, 2028, 3048, 3395, 3791, 2019, 20949, 1011, 3096, 4446, 2008, + 3065, 2049, 3522, 4460, 2077, 1037, 4550, 4899, 1012, 4468, 1035, 2043, 1024, 4468, 2009, + 2043, 2062, 2084, 2416, 11277, 2030, 1037, 2474, 2290, 2648, 1014, 1012, 6021, 2000, 1014, + 1012, 1017, 3823, 2003, 3223, 1010, 2138, 17659, 2024, 3132, 2000, 1016, 2083, 1020, 1998, + 7160, 2003, 18597, 2000, 2008, 2846, 1012, 102 + ] + }, + { "text": "ecosystem-constellation", "ids": [101, 16927, 1011, 15300, 102] }, + { + "text": "group: remocn-port, showcase\nwhat: Ecosystem Constellation. Orbiting product nodes connect into a constellation graph.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13398, 2054, 1024, 16927, 15300, + 1012, 26472, 4031, 14164, 7532, 2046, 1037, 15300, 10629, 1012, 102 + ] + }, + { "text": "empty", "ids": [101, 4064, 102] }, + { + "text": "group: empty, remocn-port, state, ui-primitive\nwhat: Empty. An Operator Black empty state using open space, a technical icon, clear copy, and neutral action", + "ids": [ + 101, 2177, 1024, 4064, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 2110, 1010, 21318, + 1011, 10968, 2054, 1024, 4064, 1012, 2019, 6872, 2304, 4064, 2110, 2478, 2330, 2686, 1010, + 1037, 4087, 12696, 1010, 3154, 6100, 1010, 1998, 8699, 2895, 102 + ] + }, + { "text": "facet-morph", "ids": [101, 2227, 2102, 1011, 22822, 8458, 102] }, + { + "text": "group: deterministic, intro, intros-reveals, low-poly, morph, motion-primitive, reveal, svg\nwhat: Facet Morph. A faceted low-poly mass of 36 triangles continuously reshapes between three authored silhouettes (blob, mark, badge) with per-facet flat shading that recomputes as the vertices move. Light reads from the upper left; lit facets lift toward a pale accent-tinted tone while turned-away facets fall toward near-black. One calm continuous morph, then a settled hold.\nuse_when: Jobs: reveal. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 28283, 25300, 10074, 1010, 17174, 1010, 17174, 2015, 1011, 7657, 1010, 2659, + 1011, 26572, 1010, 22822, 8458, 1010, 4367, 1011, 10968, 1010, 7487, 1010, 17917, 2290, 2054, + 1024, 2227, 2102, 22822, 8458, 1012, 1037, 2227, 3064, 2659, 1011, 26572, 3742, 1997, 4029, + 27189, 10843, 24501, 3270, 10374, 2090, 2093, 8786, 21776, 2015, 1006, 1038, 4135, 2497, 1010, + 2928, 1010, 10780, 1007, 2007, 2566, 1011, 2227, 2102, 4257, 21146, 4667, 2008, 28667, 25377, + 10421, 2015, 2004, 1996, 18984, 2693, 1012, 2422, 9631, 2013, 1996, 3356, 2187, 1025, 5507, + 2227, 3215, 6336, 2646, 1037, 5122, 9669, 1011, 25577, 4309, 2096, 2357, 1011, 2185, 2227, + 3215, 2991, 2646, 2379, 1011, 2304, 1012, 2028, 5475, 7142, 22822, 8458, 1010, 2059, 1037, + 3876, 2907, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 7487, 1012, 6337, 1024, 2907, 3085, + 1012, 102 + ] + }, + { "text": "fade-through", "ids": [101, 12985, 1011, 2083, 102] }, + { + "text": "group: fade, motion-primitive, scene, transition\nwhat: Fade Through. A calm transition primitive that fades one layer out, passes through a wash, and reveals the next layer", + "ids": [ + 101, 2177, 1024, 12985, 1010, 4367, 1011, 10968, 1010, 3496, 1010, 6653, 2054, 1024, 12985, + 2083, 1012, 1037, 5475, 6653, 10968, 2008, 26784, 2028, 6741, 2041, 1010, 5235, 2083, 1037, + 9378, 1010, 1998, 7657, 1996, 2279, 6741, 102 + ] + }, + { "text": "field", "ids": [101, 2492, 102] }, + { + "text": "group: field, form, remocn-port, ui-primitive\nwhat: Field. A labeled field wrapper with an accessible control and supporting description", + "ids": [ + 101, 2177, 1024, 2492, 1010, 2433, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, + 1011, 10968, 2054, 1024, 2492, 1012, 1037, 12599, 2492, 10236, 4842, 2007, 2019, 7801, 2491, + 1998, 4637, 6412, 102 + ] + }, + { "text": "flash-through-white", "ids": [101, 5956, 1011, 2083, 1011, 2317, 102] }, + { + "text": "group: shader, transition\nwhat: Flash Through White. Shader transition with white flash crossfade", + "ids": [ + 101, 2177, 1024, 8703, 2099, 1010, 6653, 2054, 1024, 5956, 2083, 2317, 1012, 8703, 2099, 6653, + 2007, 2317, 5956, 2892, 7011, 3207, 102 + ] + }, + { "text": "flowchart", "ids": [101, 4834, 7507, 5339, 102] }, + { + "text": "group: diagram, flowchart, interactive\nwhat: Flowchart. Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction", + "ids": [ + 101, 2177, 1024, 16403, 1010, 4834, 7507, 5339, 1010, 9123, 2054, 1024, 4834, 7507, 5339, + 1012, 6579, 3247, 3392, 2007, 17917, 2290, 19400, 2015, 1010, 15875, 1011, 3602, 14164, 1010, + 12731, 25301, 2099, 8290, 1010, 1998, 22868, 18140, 102 + ] + }, + { "text": "flowchart-vertical", "ids": [101, 4834, 7507, 5339, 1011, 7471, 102] }, + { + "text": "group: diagram, flowchart, interactive, portrait\nwhat: Flowchart Vertical. Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction", + "ids": [ + 101, 2177, 1024, 16403, 1010, 4834, 7507, 5339, 1010, 9123, 1010, 6533, 2054, 1024, 4834, + 7507, 5339, 7471, 1012, 6533, 6579, 3247, 3392, 2007, 17917, 2290, 19400, 2015, 1010, 15875, + 1011, 3602, 14164, 1010, 12731, 25301, 2099, 8290, 1010, 1998, 22868, 18140, 102 + ] + }, + { "text": "focus-blur-resolve", "ids": [101, 3579, 1011, 14819, 1011, 10663, 102] }, + { + "text": "group: motion-primitive, remocn-port, typography\nwhat: Focus Blur Resolve. A premium focus pull from heavy blur to crisp text, then a soft blur-out exit.", + "ids": [ + 101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939, + 6873, 12565, 2054, 1024, 3579, 14819, 10663, 1012, 1037, 12882, 3579, 4139, 2013, 3082, 14819, + 2000, 15594, 3793, 1010, 2059, 1037, 3730, 14819, 1011, 2041, 6164, 1012, 102 + ] + }, + { "text": "focus-rack", "ids": [101, 3579, 1011, 14513, 102] }, + { + "text": "group: Camera moves.\nwhat: Focus moves exactly once from a sharp near card to a blurred, dim far card as blur, scale, and parallax change together.\nuse_when: Two cards at different apparent depths need one clear handoff from the foreground state to the background state.\navoid_when: Avoid it when focus must alternate repeatedly, because the rack occurs exactly once over 0.7 seconds.", + "ids": [ + 101, 2177, 1024, 4950, 5829, 1012, 2054, 1024, 3579, 5829, 3599, 2320, 2013, 1037, 4629, 2379, + 4003, 2000, 1037, 18449, 1010, 11737, 2521, 4003, 2004, 14819, 1010, 4094, 1010, 1998, 11498, + 4571, 2595, 2689, 2362, 1012, 2224, 1035, 2043, 1024, 2048, 5329, 2012, 2367, 6835, 11143, + 2342, 2028, 3154, 2192, 7245, 2013, 1996, 18921, 16365, 2110, 2000, 1996, 4281, 2110, 1012, + 4468, 1035, 2043, 1024, 4468, 2009, 2043, 3579, 2442, 6585, 8385, 1010, 2138, 1996, 14513, + 5158, 3599, 2320, 2058, 1014, 1012, 1021, 3823, 1012, 102 + ] + }, + { "text": "focus-swap", "ids": [101, 3579, 1011, 19948, 102] }, + { + "text": "group: attention, blur, demonstrate, effect, focus, ui-props\nwhat: Focus Swap. Moves attention between two side-by-side cards as one recedes with scale, blur, and dimming while the other advances to full focus.\nuse_when: Jobs: demonstrate. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 3086, 1010, 14819, 1010, 10580, 1010, 3466, 1010, 3579, 1010, 21318, 1011, + 24387, 2054, 1024, 3579, 19948, 1012, 5829, 3086, 2090, 2048, 2217, 1011, 2011, 1011, 2217, + 5329, 2004, 2028, 28667, 18352, 2007, 4094, 1010, 14819, 1010, 1998, 11737, 6562, 2096, 1996, + 2060, 9849, 2000, 2440, 3579, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 10580, 1012, 6337, + 1024, 2907, 3085, 1012, 102 + ] + }, + { "text": "frosted-glass-wipe", "ids": [101, 10097, 2098, 1011, 3221, 1011, 13387, 102] }, + { + "text": "group: remocn-port, transition-primitive\nwhat: Frosted Glass Wipe. A scene transition through a moving frosted glass pane.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 6653, 1011, 10968, 2054, 1024, + 10097, 2098, 3221, 13387, 1012, 1037, 3496, 6653, 2083, 1037, 3048, 10097, 2098, 3221, 6090, + 2063, 1012, 102 + ] + }, + { "text": "gesture-tap", "ids": [101, 9218, 1011, 11112, 102] }, + { + "text": "group: demonstrate, gesture, interaction, motion-primitive, tap, ui-props\nwhat: Gesture Tap. A contact circle taps a mobile pill button, releases it into a new labeled accent state, and lifts away.\nuse_when: Jobs: demonstrate. Profile: interaction.", + "ids": [ + 101, 2177, 1024, 10580, 1010, 9218, 1010, 8290, 1010, 4367, 1011, 10968, 1010, 11112, 1010, + 21318, 1011, 24387, 2054, 1024, 9218, 11112, 1012, 1037, 3967, 4418, 25316, 1037, 4684, 17357, + 6462, 1010, 7085, 2009, 2046, 1037, 2047, 12599, 9669, 2110, 1010, 1998, 13695, 2185, 1012, + 2224, 1035, 2043, 1024, 5841, 1024, 10580, 1012, 6337, 1024, 8290, 1012, 102 + ] + }, + { "text": "glass-code-block", "ids": [101, 3221, 1011, 3642, 1011, 3796, 102] }, + { + "text": "group: code-animation, remocn-port\nwhat: Glass Code Block. A translucent code block with scanned line highlights.", + "ids": [ + 101, 2177, 1024, 3642, 1011, 7284, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 2054, 1024, 3221, + 3642, 3796, 1012, 1037, 22897, 3642, 3796, 2007, 11728, 2240, 11637, 1012, 102 + ] + }, + { "text": "glitch", "ids": [101, 1043, 15909, 2818, 102] }, + { + "text": "group: shader, transition\nwhat: Glitch. Shader transition with digital glitch artifacts", + "ids": [ + 101, 2177, 1024, 8703, 2099, 1010, 6653, 2054, 1024, 1043, 15909, 2818, 1012, 8703, 2099, + 6653, 2007, 3617, 1043, 15909, 2818, 10471, 102 + ] + }, + { "text": "gloss-sweep", "ids": [101, 27068, 1011, 11740, 102] }, + { + "text": "group: badge, card, celebrate, celebration, celebrations, gloss, motion-primitive, payoff\nwhat: Gloss Sweep. A card lands with a restrained slam, catches one diagonal specular gloss, and holds perfectly still.\nuse_when: Jobs: celebrate. Profile: payoff.", + "ids": [ + 101, 2177, 1024, 10780, 1010, 4003, 1010, 8439, 1010, 7401, 1010, 12035, 1010, 27068, 1010, + 4367, 1011, 10968, 1010, 3477, 7245, 2054, 1024, 27068, 11740, 1012, 1037, 4003, 4915, 2007, + 1037, 19868, 9555, 1010, 11269, 2028, 19754, 28699, 7934, 27068, 1010, 1998, 4324, 6669, 2145, + 1012, 2224, 1035, 2043, 1024, 5841, 1024, 8439, 1012, 6337, 1024, 3477, 7245, 1012, 102 + ] + }, + { "text": "glyph-ring-assemble", "ids": [101, 1043, 2135, 8458, 1011, 3614, 1011, 21365, 102] }, + { + "text": "group: Text effects.\nwhat: Arc-set letters leave a wordmark in reverse reading order, each completes one full orbit around a shared ring, and the letters close back into the word.\nuse_when: A readable wordmark must break into individually staggered glyphs without leaving a single shared circular path.\navoid_when: Avoid it when every glyph must remain visible throughout the orbit, because a glyph crossing the central mark vanishes for about 0.3 seconds.", + "ids": [ + 101, 2177, 1024, 3793, 3896, 1012, 2054, 1024, 8115, 1011, 2275, 4144, 2681, 1037, 2773, + 10665, 1999, 7901, 3752, 2344, 1010, 2169, 28123, 2028, 2440, 8753, 2105, 1037, 4207, 3614, + 1010, 1998, 1996, 4144, 2485, 2067, 2046, 1996, 2773, 1012, 2224, 1035, 2043, 1024, 1037, + 3191, 3085, 2773, 10665, 2442, 3338, 2046, 14258, 14648, 1043, 2135, 18757, 2302, 2975, 1037, + 2309, 4207, 8206, 4130, 1012, 4468, 1035, 2043, 1024, 4468, 2009, 2043, 2296, 1043, 2135, + 8458, 2442, 3961, 5710, 2802, 1996, 8753, 1010, 2138, 1037, 1043, 2135, 8458, 5153, 1996, + 2430, 2928, 25887, 2229, 2005, 2055, 1014, 1012, 1017, 3823, 1012, 102 + ] + }, + { "text": "grade-split-reveal", "ids": [101, 3694, 1011, 3975, 1011, 7487, 102] }, + { + "text": "group: Transitions.\nwhat: A hard vertical edge sweeps left to right across two aligned copies of one plate, pauses at the midpoint for comparison, then reveals the graded copy across the full frame.\nuse_when: The same image or video must show a direct before-and-after color comparison in one frame.\navoid_when: Avoid it for text, SVG, or ordinary DOM content, because the documented color grading applies only to image and video media.", + "ids": [ + 101, 2177, 1024, 22166, 1012, 2054, 1024, 1037, 2524, 7471, 3341, 26981, 2187, 2000, 2157, + 2408, 2048, 13115, 4809, 1997, 2028, 5127, 1010, 19623, 2012, 1996, 3054, 8400, 2005, 7831, + 1010, 2059, 7657, 1996, 21976, 6100, 2408, 1996, 2440, 4853, 1012, 2224, 1035, 2043, 1024, + 1996, 2168, 3746, 2030, 2678, 2442, 2265, 1037, 3622, 2077, 1011, 1998, 1011, 2044, 3609, + 7831, 1999, 2028, 4853, 1012, 4468, 1035, 2043, 1024, 4468, 2009, 2005, 3793, 1010, 17917, + 2290, 1010, 2030, 6623, 14383, 4180, 1010, 2138, 1996, 8832, 3609, 26886, 12033, 2069, 2000, + 3746, 1998, 2678, 2865, 1012, 102 + ] + }, + { "text": "grain-field", "ids": [101, 8982, 1011, 2492, 102] }, + { + "text": "group: ambient, background, backgrounds, dots, grain, loopable, motion-primitive, orient, texture\nwhat: Grain Field. A clearly visible accent-tinted dot field drifts over a subtle luminance gradient in an exact ambient loop.\nuse_when: Jobs: orient. Profile: ambient.", + "ids": [ + 101, 2177, 1024, 17093, 1010, 4281, 1010, 15406, 1010, 14981, 1010, 8982, 1010, 7077, 3085, + 1010, 4367, 1011, 10968, 1010, 16865, 1010, 14902, 2054, 1024, 8982, 2492, 1012, 1037, 4415, + 5710, 9669, 1011, 25577, 11089, 2492, 11852, 2015, 2058, 1037, 11259, 11320, 22311, 5897, + 17978, 1999, 2019, 6635, 17093, 7077, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 16865, 1012, + 6337, 1024, 17093, 1012, 102 + ] + }, + { "text": "grain-overlay", "ids": [101, 8982, 1011, 2058, 8485, 102] }, + { + "text": "group: film, grain, overlay, texture\nwhat: Grain Overlay. Animated film grain texture overlay using CSS keyframes, adds warmth and analog character to any composition", + "ids": [ + 101, 2177, 1024, 2143, 1010, 8982, 1010, 2058, 8485, 1010, 14902, 2054, 1024, 8982, 2058, + 8485, 1012, 6579, 2143, 8982, 14902, 2058, 8485, 2478, 20116, 2015, 3145, 15643, 2015, 1010, + 9909, 8251, 1998, 11698, 2839, 2000, 2151, 5512, 102 + ] + }, + { "text": "gravitational-lens", "ids": [101, 19790, 1011, 10014, 102] }, + { + "text": "group: shader, transition\nwhat: Gravitational Lens. Shader transition with gravitational lensing distortion", + "ids": [ + 101, 2177, 1024, 8703, 2099, 1010, 6653, 2054, 1024, 19790, 10014, 1012, 8703, 2099, 6653, + 2007, 19790, 10014, 2075, 20870, 102 + ] + }, + { "text": "grid-card-assemble", "ids": [101, 8370, 1011, 4003, 1011, 21365, 102] }, + { + "text": "group: assemble, feature-tour, grid, layout, list, motion-primitive, reveal, stagger, tour\nwhat: Grid Card Assemble. N capability cards (thin-line icon that draws on, mono label, optional muted body) stagger-assemble into a grid or vertical list with a fade plus short slide into slot, then hold perfectly still.\nuse_when: Jobs: reveal, tour. Profile: assemble.", + "ids": [ + 101, 2177, 1024, 21365, 1010, 3444, 1011, 2778, 1010, 8370, 1010, 9621, 1010, 2862, 1010, + 4367, 1011, 10968, 1010, 7487, 1010, 2358, 27609, 1010, 2778, 2054, 1024, 8370, 4003, 21365, + 1012, 1050, 10673, 5329, 1006, 4857, 1011, 2240, 12696, 2008, 9891, 2006, 1010, 18847, 3830, + 1010, 11887, 22124, 2303, 1007, 2358, 27609, 1011, 21365, 2046, 1037, 8370, 2030, 7471, 2862, + 2007, 1037, 12985, 4606, 2460, 7358, 2046, 10453, 1010, 2059, 2907, 6669, 2145, 1012, 2224, + 1035, 2043, 1024, 5841, 1024, 7487, 1010, 2778, 1012, 6337, 1024, 21365, 1012, 102 + ] + }, + { "text": "grid-pixelate-wipe", "ids": [101, 8370, 1011, 22138, 3686, 1011, 13387, 102] }, + { + "text": "group: grid, pixelate, transition, wipe\nwhat: Grid Pixelate Wipe. Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing, use between scenes", + "ids": [ + 101, 2177, 1024, 8370, 1010, 22138, 3686, 1010, 6653, 1010, 13387, 2054, 1024, 8370, 22138, + 3686, 13387, 1012, 6653, 3466, 2073, 1996, 3898, 21969, 2015, 2046, 1037, 8370, 1997, 14320, + 2008, 12985, 2041, 2007, 14648, 10984, 1010, 2224, 2090, 5019, 102 + ] + }, + { "text": "halftone-dissolve", "ids": [101, 2431, 5524, 1011, 21969, 102] }, + { + "text": "group: Transitions.\nwhat: Accent dots appear on a fixed grid, open into windows onto scene B, and merge until scene B replaces scene A.\nuse_when: Two slotted scenes need a textured transition whose reveal can sweep left to right, grow from center, or scatter from a seeded map.\navoid_when: Avoid cueing the dissolve so late that its 1.3-second transition and any exit cannot fit, because dissolve_at is clamped to keep both inside the clip.", + "ids": [ + 101, 2177, 1024, 22166, 1012, 2054, 1024, 9669, 14981, 3711, 2006, 1037, 4964, 8370, 1010, + 2330, 2046, 3645, 3031, 3496, 1038, 1010, 1998, 13590, 2127, 3496, 1038, 20736, 3496, 1037, + 1012, 2224, 1035, 2043, 1024, 2048, 10453, 3064, 5019, 2342, 1037, 14902, 2094, 6653, 3005, + 7487, 2064, 11740, 2187, 2000, 2157, 1010, 4982, 2013, 2415, 1010, 2030, 8040, 20097, 2013, + 1037, 13916, 4949, 1012, 4468, 1035, 2043, 1024, 4468, 16091, 2075, 1996, 21969, 2061, 2397, + 2008, 2049, 1015, 1012, 1017, 1011, 2117, 6653, 1998, 2151, 6164, 3685, 4906, 1010, 2138, + 21969, 1035, 2012, 2003, 18597, 2000, 2562, 2119, 2503, 1996, 12528, 1012, 102 + ] + }, + { "text": "headline-slam", "ids": [101, 17653, 1011, 9555, 102] }, + { + "text": "group: emphasize, exit, headline, impact, motion-primitive, slam, typography\nwhat: Headline Slam. A heavyweight headline scales down into frame, lands with a deterministic three-frame shake, holds with subtle drift, and whips upward on exit.\nuse_when: Jobs: emphasize. Profile: impact.", + "ids": [ + 101, 2177, 1024, 17902, 1010, 6164, 1010, 17653, 1010, 4254, 1010, 4367, 1011, 10968, 1010, + 9555, 1010, 5939, 6873, 12565, 2054, 1024, 17653, 9555, 1012, 1037, 8366, 17653, 9539, 2091, + 2046, 4853, 1010, 4915, 2007, 1037, 28283, 25300, 10074, 2093, 1011, 4853, 6073, 1010, 4324, + 2007, 11259, 11852, 1010, 1998, 11473, 2015, 10745, 2006, 6164, 1012, 2224, 1035, 2043, 1024, + 5841, 1024, 17902, 1012, 6337, 1024, 4254, 1012, 102 + ] + }, + { "text": "hero-device-assemble", "ids": [101, 5394, 1011, 5080, 1011, 21365, 102] }, + { + "text": "group: remocn-port, showcase\nwhat: Hero Device Assemble. A landing-page device hero assembles from layers.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13398, 2054, 1024, 5394, 5080, + 21365, 1012, 1037, 4899, 1011, 3931, 5080, 5394, 21365, 2015, 2013, 9014, 1012, 102 + ] + }, + { "text": "hover-card", "ids": [101, 25215, 2099, 1011, 4003, 102] }, + { + "text": "group: hover-card, overlay, remocn-port, ui-primitive\nwhat: Hover Card. An Operator Black hover card with a matte profile preview and origin-aware Soft Optical reveal", + "ids": [ + 101, 2177, 1024, 25215, 2099, 1011, 4003, 1010, 2058, 8485, 1010, 2128, 5302, 2278, 2078, + 1011, 3417, 1010, 21318, 1011, 10968, 2054, 1024, 25215, 2099, 4003, 1012, 2019, 6872, 2304, + 25215, 2099, 4003, 2007, 1037, 4717, 2063, 6337, 19236, 1998, 4761, 1011, 5204, 3730, 9380, + 7487, 102 + ] + }, + { "text": "icon-morph-beat", "ids": [101, 12696, 1011, 22822, 8458, 1011, 3786, 102] }, + { + "text": "group: completion, demonstrate, icon, morph, motion-primitive, product-demo, state-change\nwhat: Icon Morph Beat. An icon morphs between authored state silhouettes, shifts to an accent color, and marks completion with one restrained pulse.\nuse_when: Jobs: demonstrate. Profile: state-change.", + "ids": [ + 101, 2177, 1024, 6503, 1010, 10580, 1010, 12696, 1010, 22822, 8458, 1010, 4367, 1011, 10968, + 1010, 4031, 1011, 9703, 1010, 2110, 1011, 2689, 2054, 1024, 12696, 22822, 8458, 3786, 1012, + 2019, 12696, 22822, 18757, 2090, 8786, 2110, 21776, 2015, 1010, 12363, 2000, 2019, 9669, 3609, + 1010, 1998, 6017, 6503, 2007, 2028, 19868, 8187, 1012, 2224, 1035, 2043, 1024, 5841, 1024, + 10580, 1012, 6337, 1024, 2110, 1011, 2689, 1012, 102 + ] + }, + { "text": "icon-swap", "ids": [101, 12696, 1011, 19948, 102] }, + { + "text": "group: icon, swap, transition-primitive, transitions-dev-port\nwhat: Icon Swap. A scale-and-blur icon swap primitive for toolbar and action state changes", + "ids": [ + 101, 2177, 1024, 12696, 1010, 19948, 1010, 6653, 1011, 10968, 1010, 22166, 1011, 16475, 1011, + 3417, 2054, 1024, 12696, 19948, 1012, 1037, 4094, 1011, 1998, 1011, 14819, 12696, 19948, + 10968, 2005, 6994, 8237, 1998, 2895, 2110, 3431, 102 + ] + }, + { + "text": "image-expand-to-fullscreen", + "ids": [101, 3746, 1011, 7818, 1011, 2000, 1011, 2440, 18182, 102] + }, + { + "text": "group: remocn-port, transition-primitive\nwhat: Image Expand to Fullscreen. An image tile expands into a full-frame scene transition.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 6653, 1011, 10968, 2054, 1024, + 3746, 7818, 2000, 2440, 18182, 1012, 2019, 3746, 14090, 24545, 2046, 1037, 2440, 1011, 4853, + 3496, 6653, 1012, 102 + ] + }, + { "text": "infinite-bento-pan", "ids": [101, 10709, 1011, 6260, 2080, 1011, 6090, 102] }, + { + "text": "group: remocn-port, showcase\nwhat: Infinite Bento Pan. A bento board pans forever with feature cards at different depths.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13398, 2054, 1024, 10709, 6260, + 2080, 6090, 1012, 1037, 6260, 2080, 2604, 6090, 2015, 5091, 2007, 3444, 5329, 2012, 2367, + 11143, 1012, 102 + ] + }, + { "text": "infinite-marquee", "ids": [101, 10709, 1011, 9388, 4226, 2063, 102] }, + { + "text": "group: remocn-port, showcase\nwhat: Infinite Marquee. A looping marquee primitive for logos, tags, and feature pills.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13398, 2054, 1024, 10709, 9388, + 4226, 2063, 1012, 1037, 7077, 2075, 9388, 4226, 2063, 10968, 2005, 25571, 1010, 22073, 1010, + 1998, 3444, 15345, 1012, 102 + ] + }, + { "text": "ink-bleed-reveal", "ids": [101, 10710, 1011, 19501, 1011, 7487, 102] }, + { + "text": "group: deterministic, experiment, gooey, motion-primitive, reveal, svg-filter, texture\nwhat: Ink Bleed Reveal. Liquid ink blooms through paper under a gooey blur-plus-threshold filter, merges, then contracts as a crisp slotted mark resolves beneath it, with static seeded paper grain riding the result.\nuse_when: Jobs: reveal. Profile: materialize.", + "ids": [ + 101, 2177, 1024, 28283, 25300, 10074, 1010, 7551, 1010, 27571, 3240, 1010, 4367, 1011, 10968, + 1010, 7487, 1010, 17917, 2290, 1011, 11307, 1010, 14902, 2054, 1024, 10710, 19501, 7487, 1012, + 6381, 10710, 29037, 2083, 3259, 2104, 1037, 27571, 3240, 14819, 1011, 4606, 1011, 11207, + 11307, 1010, 13590, 2015, 1010, 2059, 8311, 2004, 1037, 15594, 10453, 3064, 2928, 10663, 2015, + 4218, 2009, 1010, 2007, 10763, 13916, 3259, 8982, 5559, 1996, 2765, 1012, 2224, 1035, 2043, + 1024, 5841, 1024, 7487, 1012, 6337, 1024, 3430, 4697, 1012, 102 + ] + }, + { "text": "inline-highlight", "ids": [101, 23881, 1011, 12944, 102] }, + { + "text": "group: caption, highlight, motion-primitive, text\nwhat: Inline Highlight. A clean marker-style inline highlight that animates behind text using a CSS scale variable", + "ids": [ + 101, 2177, 1024, 14408, 3258, 1010, 12944, 1010, 4367, 1011, 10968, 1010, 3793, 2054, 1024, + 23881, 12944, 1012, 1037, 4550, 12115, 1011, 2806, 23881, 12944, 2008, 2019, 21499, 2015, + 2369, 3793, 2478, 1037, 20116, 2015, 4094, 8023, 102 + ] + }, + { "text": "input", "ids": [101, 7953, 102] }, + { + "text": "group: field, input, remocn-port, ui-primitive\nwhat: Input. A video-safe text field with label, helper copy, focus state, and typed-value reveal", + "ids": [ + 101, 2177, 1024, 2492, 1010, 7953, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, + 1011, 10968, 2054, 1024, 7953, 1012, 1037, 2678, 1011, 3647, 3793, 2492, 2007, 3830, 1010, + 2393, 2121, 6100, 1010, 3579, 2110, 1010, 1998, 21189, 1011, 3643, 7487, 102 + ] + }, + { "text": "input-feedback", "ids": [101, 7953, 1011, 12247, 102] }, + { + "text": "group: feedback, input, transition-primitive, transitions-dev-port\nwhat: Input Feedback. A transitions.dev-inspired input feedback primitive with shake, clear affordance, and success state", + "ids": [ + 101, 2177, 1024, 12247, 1010, 7953, 1010, 6653, 1011, 10968, 1010, 22166, 1011, 16475, 1011, + 3417, 2054, 1024, 7953, 12247, 1012, 1037, 22166, 1012, 16475, 1011, 4427, 7953, 12247, 10968, + 2007, 6073, 1010, 3154, 8984, 6651, 1010, 1998, 3112, 2110, 102 + ] + }, + { "text": "input-group", "ids": [101, 7953, 1011, 2177, 102] }, + { + "text": "group: field, input-group, remocn-port, ui-primitive\nwhat: Input Group. A compound input with technical prefix, editable value, and attached action", + "ids": [ + 101, 2177, 1024, 2492, 1010, 7953, 1011, 2177, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, + 21318, 1011, 10968, 2054, 1024, 7953, 2177, 1012, 1037, 7328, 7953, 2007, 4087, 17576, 1010, + 10086, 3085, 3643, 1010, 1998, 4987, 2895, 102 + ] + }, + { "text": "input-otp", "ids": [101, 7953, 1011, 27178, 2361, 102] }, + { + "text": "group: field, input-otp, remocn-port, ui-primitive\nwhat: Input OTP. A segmented one-time-code field with tabular digits and an active slot", + "ids": [ + 101, 2177, 1024, 2492, 1010, 7953, 1011, 27178, 2361, 1010, 2128, 5302, 2278, 2078, 1011, + 3417, 1010, 21318, 1011, 10968, 2054, 1024, 7953, 27178, 2361, 1012, 1037, 6903, 2098, 2028, + 1011, 2051, 1011, 3642, 2492, 2007, 21628, 7934, 16648, 1998, 2019, 3161, 10453, 102 + ] + }, + { "text": "instagram-follow", "ids": [101, 16021, 23091, 1011, 3582, 102] }, + { + "text": "group: instagram, overlay, social\nwhat: Instagram Follow. Animated Instagram follow overlay with profile card and follow button", + "ids": [ + 101, 2177, 1024, 16021, 23091, 1010, 2058, 8485, 1010, 2591, 2054, 1024, 16021, 23091, 3582, + 1012, 6579, 16021, 23091, 3582, 2058, 8485, 2007, 6337, 4003, 1998, 3582, 6462, 102 + ] + }, + { "text": "ios26-liquid-glass", "ids": [101, 16380, 23833, 1011, 6381, 1011, 3221, 102] }, + { + "text": "group: 3d, gltf, html-in-canvas, ios26, iphone, liquid-glass-html-in-canvas, notifications, webgpu\nwhat: iOS 26 Liquid Glass Home Screen. 3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model.", + "ids": [ + 101, 2177, 1024, 7605, 1010, 1043, 7096, 2546, 1010, 16129, 1011, 1999, 1011, 10683, 1010, + 16380, 23833, 1010, 18059, 1010, 6381, 1011, 3221, 1011, 16129, 1011, 1999, 1011, 10683, 1010, + 26828, 2015, 1010, 4773, 21600, 2226, 2054, 1024, 16380, 2656, 6381, 3221, 2188, 3898, 1012, + 7605, 18059, 2007, 1037, 3671, 16380, 2656, 2188, 3898, 1010, 6381, 3221, 10439, 18407, 1010, + 8703, 2099, 2813, 23298, 1010, 8946, 1010, 1998, 8331, 3221, 26828, 2015, 2008, 4530, 2013, + 1996, 3570, 2181, 3031, 1037, 1043, 7096, 2546, 5080, 2944, 1012, 102 + ] + }, + { "text": "iris-reveal", "ids": [101, 11173, 1011, 7487, 102] }, + { + "text": "group: bridge, circle-reveal, clip-path, iris, reveal, slots, transition, transitions\nwhat: Iris Reveal. A circle clip-path opens from an authored origin revealing state B over state A in one confident pass, then holds on B. Classic register dims and desaturates the before state so the after state lands in full color; a thin accent rim rides the iris edge. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.\nuse_when: Jobs: bridge, reveal. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 2958, 1010, 4418, 1011, 7487, 1010, 12528, 1011, 4130, 1010, 11173, 1010, + 7487, 1010, 19832, 1010, 6653, 1010, 22166, 2054, 1024, 11173, 7487, 1012, 1037, 4418, 12528, + 1011, 4130, 7480, 2013, 2019, 8786, 4761, 8669, 2110, 1038, 2058, 2110, 1037, 1999, 2028, + 9657, 3413, 1010, 2059, 4324, 2006, 1038, 1012, 4438, 4236, 11737, 2015, 1998, 4078, 4017, + 4648, 4570, 1996, 2077, 2110, 2061, 1996, 2044, 2110, 4915, 1999, 2440, 3609, 1025, 1037, + 4857, 9669, 11418, 12271, 1996, 11173, 3341, 1012, 20587, 2015, 6039, 1996, 2315, 2077, 1013, + 2044, 10453, 9320, 1025, 19204, 1011, 13650, 12398, 2015, 17552, 2043, 1037, 10453, 2003, + 2187, 4064, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 2958, 1010, 7487, 1012, 6337, 1024, + 2907, 3085, 1012, 102 + ] + }, + { "text": "item", "ids": [101, 8875, 102] }, + { + "text": "group: item, list, remocn-port, ui-primitive\nwhat: Item. A border-led interactive list row with neutral monogram, compact metadata, and deterministic hover state", + "ids": [ + 101, 2177, 1024, 8875, 1010, 2862, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, + 1011, 10968, 2054, 1024, 8875, 1012, 1037, 3675, 1011, 2419, 9123, 2862, 5216, 2007, 8699, + 18847, 13113, 1010, 9233, 27425, 1010, 1998, 28283, 25300, 10074, 25215, 2099, 2110, 102 + ] + }, + { "text": "kbd", "ids": [101, 21677, 2094, 102] }, + { + "text": "group: kbd, remocn-port, shortcut, ui-primitive\nwhat: Kbd. A physical keyboard legend with machined keycap depth, system monospace type, and finite press motion", + "ids": [ + 101, 2177, 1024, 21677, 2094, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 2460, 12690, + 1010, 21318, 1011, 10968, 2054, 1024, 21677, 2094, 1012, 1037, 3558, 9019, 5722, 2007, 3698, + 2094, 3145, 17695, 5995, 1010, 2291, 18847, 23058, 2828, 1010, 1998, 10713, 2811, 4367, 102 + ] + }, + { "text": "keyframe-scrub-stack", "ids": [101, 3145, 15643, 1011, 18157, 1011, 9991, 102] }, + { + "text": "group: advanced-motion, anime-inspired, hyperframes-native\nwhat: Keyframe Scrub Stack. A keyframe-sequenced stack of cards with offset timing and easing presets.", + "ids": [ + 101, 2177, 1024, 3935, 1011, 4367, 1010, 8750, 1011, 4427, 1010, 23760, 15643, 2015, 1011, + 3128, 2054, 1024, 3145, 15643, 18157, 9991, 1012, 1037, 3145, 15643, 1011, 5537, 2094, 9991, + 1997, 5329, 2007, 16396, 10984, 1998, 24070, 3653, 13462, 2015, 1012, 102 + ] + }, + { "text": "kinetic-center-build", "ids": [101, 20504, 1011, 2415, 1011, 3857, 102] }, + { + "text": "group: motion-primitive, remocn-port, typography\nwhat: Kinetic Center Build. A centered phrase builder where words push into place until the line locks.", + "ids": [ + 101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939, + 6873, 12565, 2054, 1024, 20504, 2415, 3857, 1012, 1037, 8857, 7655, 12508, 2073, 2616, 5245, + 2046, 2173, 2127, 1996, 2240, 11223, 1012, 102 + ] + }, + { "text": "kinetic-type-swap", "ids": [101, 20504, 1011, 2828, 1011, 19948, 102] }, + { + "text": "group: Text effects.\nwhat: A fixed sentence rolls one masked word slot vertically through a list of options without changing the sentence layout.\nuse_when: A headline must keep its prefix and suffix stationary while one word changes through several authored choices.\navoid_when: Avoid it when the sentence may reflow during a swap, because the slot is pre-sized to the widest option and all options occupy one grid cell.", + "ids": [ + 101, 2177, 1024, 3793, 3896, 1012, 2054, 1024, 1037, 4964, 6251, 9372, 2028, 16520, 2773, + 10453, 20018, 2083, 1037, 2862, 1997, 7047, 2302, 5278, 1996, 6251, 9621, 1012, 2224, 1035, + 2043, 1024, 1037, 17653, 2442, 2562, 2049, 17576, 1998, 16809, 17337, 2096, 2028, 2773, 3431, + 2083, 2195, 8786, 9804, 1012, 4468, 1035, 2043, 1024, 4468, 2009, 2043, 1996, 6251, 2089, + 25416, 8261, 2076, 1037, 19948, 1010, 2138, 1996, 10453, 2003, 3653, 1011, 7451, 2000, 1996, + 2898, 3367, 5724, 1998, 2035, 7047, 11494, 2028, 8370, 3526, 1012, 102 + ] + }, + { "text": "label", "ids": [101, 3830, 102] }, + { + "text": "group: form, label, remocn-port, ui-primitive\nwhat: Label. A calm form label with compact requirement metadata for video UI scenes", + "ids": [ + 101, 2177, 1024, 2433, 1010, 3830, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, + 1011, 10968, 2054, 1024, 3830, 1012, 1037, 5475, 2433, 3830, 2007, 9233, 9095, 27425, 2005, + 2678, 21318, 5019, 102 + ] + }, + { "text": "landing-code-showcase", "ids": [101, 4899, 1011, 3642, 1011, 13398, 102] }, + { + "text": "group: remocn-port, showcase\nwhat: Landing Code Showcase. A product hero where code output becomes a live preview card.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13398, 2054, 1024, 4899, 3642, + 13398, 1012, 1037, 4031, 5394, 2073, 3642, 6434, 4150, 1037, 2444, 19236, 4003, 1012, 102 + ] + }, + { "text": "light-leak", "ids": [101, 2422, 1011, 17271, 102] }, + { + "text": "group: shader, transition\nwhat: Light Leak. Shader transition with cinematic light leak overlay", + "ids": [ + 101, 2177, 1024, 8703, 2099, 1010, 6653, 2054, 1024, 2422, 17271, 1012, 8703, 2099, 6653, + 2007, 21014, 2422, 17271, 2058, 8485, 102 + ] + }, + { "text": "light-sweep-pass", "ids": [101, 2422, 1011, 11740, 1011, 3413, 102] }, + { + "text": "group: deterministic, light, motion-primitive, overlay, overlays, slots, sweep, texture\nwhat: Light Sweep Pass. A traveling key light re-shades a slotted scene: a soft diagonal gradient band crosses the frame once while every per-element highlight and shadow shifts in lockstep (all driven by one --light-x property), then the light settles into a resting key. Quiet, expensive-feeling; the scene itself never moves. Callers fill the named scene slot; a token hero-and-cards default renders when it is left empty.\nuse_when: Jobs: texture. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 28283, 25300, 10074, 1010, 2422, 1010, 4367, 1011, 10968, 1010, 2058, 8485, + 1010, 2058, 8485, 2015, 1010, 19832, 1010, 11740, 1010, 14902, 2054, 1024, 2422, 11740, 3413, + 1012, 1037, 7118, 3145, 2422, 2128, 1011, 13178, 1037, 10453, 3064, 3496, 1024, 1037, 3730, + 19754, 17978, 2316, 7821, 1996, 4853, 2320, 2096, 2296, 2566, 1011, 5783, 12944, 1998, 5192, + 12363, 1999, 11223, 2618, 2361, 1006, 2035, 5533, 2011, 2028, 1011, 1011, 2422, 1011, 1060, + 3200, 1007, 1010, 2059, 1996, 2422, 27221, 2046, 1037, 8345, 3145, 1012, 4251, 1010, 6450, + 1011, 3110, 1025, 1996, 3496, 2993, 2196, 5829, 1012, 20587, 2015, 6039, 1996, 2315, 3496, + 10453, 1025, 1037, 19204, 5394, 1011, 1998, 1011, 5329, 12398, 17552, 2015, 2043, 2009, 2003, + 2187, 4064, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 14902, 1012, 6337, 1024, 2907, 3085, + 1012, 102 + ] + }, + { "text": "line-by-line-slide", "ids": [101, 2240, 1011, 2011, 1011, 2240, 1011, 7358, 102] }, + { + "text": "group: motion-primitive, remocn-port, typography\nwhat: Line-by-Line Slide. Each line enters from the left with staggered slide and exits to the right.", + "ids": [ + 101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939, + 6873, 12565, 2054, 1024, 2240, 1011, 2011, 1011, 2240, 7358, 1012, 2169, 2240, 8039, 2013, + 1996, 2187, 2007, 14648, 7358, 1998, 16639, 2000, 1996, 2157, 1012, 102 + ] + }, + { "text": "line-swap", "ids": [101, 2240, 1011, 19948, 102] }, + { + "text": "group: beat, deterministic, emphasize, motion-primitive, swap, text-effects\nwhat: Line Swap. A masked full-line beat replacement: line A holds center then exits up through an overflow-hidden mask as line B enters bottom-up on the same beat, with an optional accent underline drawing beneath one word of line B.\nuse_when: Jobs: emphasize. Profile: beat-swap.", + "ids": [ + 101, 2177, 1024, 3786, 1010, 28283, 25300, 10074, 1010, 17902, 1010, 4367, 1011, 10968, 1010, + 19948, 1010, 3793, 1011, 3896, 2054, 1024, 2240, 19948, 1012, 1037, 16520, 2440, 1011, 2240, + 3786, 6110, 1024, 2240, 1037, 4324, 2415, 2059, 16639, 2039, 2083, 2019, 2058, 12314, 1011, + 5023, 7308, 2004, 2240, 1038, 8039, 3953, 1011, 2039, 2006, 1996, 2168, 3786, 1010, 2007, + 2019, 11887, 9669, 2104, 4179, 5059, 4218, 2028, 2773, 1997, 2240, 1038, 1012, 2224, 1035, + 2043, 1024, 5841, 1024, 17902, 1012, 6337, 1024, 3786, 1011, 19948, 1012, 102 + ] + }, + { + "text": "liquid-glass-context-menu", + "ids": [101, 6381, 1011, 3221, 1011, 6123, 1011, 12183, 102] + }, + { + "text": "group: html-in-canvas, liquid-glass-html-in-canvas, webgpu\nwhat: Liquid Glass Context Menu. Frosted glass context menu panel drifting over an aurora shader background", + "ids": [ + 101, 2177, 1024, 16129, 1011, 1999, 1011, 10683, 1010, 6381, 1011, 3221, 1011, 16129, 1011, + 1999, 1011, 10683, 1010, 4773, 21600, 2226, 2054, 1024, 6381, 3221, 6123, 12183, 1012, 10097, + 2098, 3221, 6123, 12183, 5997, 15013, 2058, 2019, 13158, 8703, 2099, 4281, 102 + ] + }, + { + "text": "liquid-glass-media-controls", + "ids": [101, 6381, 1011, 3221, 1011, 2865, 1011, 7711, 102] + }, + { + "text": "group: html-in-canvas, liquid-glass-html-in-canvas, webgpu\nwhat: Liquid Glass Media Controls. Frosted glass media control panels spreading over an aurora shader background", + "ids": [ + 101, 2177, 1024, 16129, 1011, 1999, 1011, 10683, 1010, 6381, 1011, 3221, 1011, 16129, 1011, + 1999, 1011, 10683, 1010, 4773, 21600, 2226, 2054, 1024, 6381, 3221, 2865, 7711, 1012, 10097, + 2098, 3221, 2865, 2491, 9320, 9359, 2058, 2019, 13158, 8703, 2099, 4281, 102 + ] + }, + { "text": "liquid-glass-notification", "ids": [101, 6381, 1011, 3221, 1011, 26828, 102] }, + { + "text": "group: html-in-canvas, liquid-glass-html-in-canvas, webgpu\nwhat: Liquid Glass Notification. Frosted glass notification cards floating over an aurora shader background", + "ids": [ + 101, 2177, 1024, 16129, 1011, 1999, 1011, 10683, 1010, 6381, 1011, 3221, 1011, 16129, 1011, + 1999, 1011, 10683, 1010, 4773, 21600, 2226, 2054, 1024, 6381, 3221, 26828, 1012, 10097, 2098, + 3221, 26828, 5329, 8274, 2058, 2019, 13158, 8703, 2099, 4281, 102 + ] + }, + { "text": "liquid-glass-widgets", "ids": [101, 6381, 1011, 3221, 1011, 15536, 28682, 102] }, + { + "text": "group: html-in-canvas, liquid-glass-html-in-canvas, webgpu\nwhat: Liquid Glass Widgets. Frosted glass stat cards, showcase panel and pill chips over an aurora shader background", + "ids": [ + 101, 2177, 1024, 16129, 1011, 1999, 1011, 10683, 1010, 6381, 1011, 3221, 1011, 16129, 1011, + 1999, 1011, 10683, 1010, 4773, 21600, 2226, 2054, 1024, 6381, 3221, 15536, 28682, 1012, 10097, + 2098, 3221, 28093, 5329, 1010, 13398, 5997, 1998, 17357, 11772, 2058, 2019, 13158, 8703, 2099, + 4281, 102 + ] + }, + { "text": "live-code-compilation", "ids": [101, 2444, 1011, 3642, 1011, 6268, 102] }, + { + "text": "group: code-animation, remocn-port\nwhat: Live Code Compilation. A code editor compiles into a preview panel with status ticks.", + "ids": [ + 101, 2177, 1024, 3642, 1011, 7284, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 2054, 1024, 2444, + 3642, 6268, 1012, 1037, 3642, 3559, 4012, 22090, 2015, 2046, 1037, 19236, 5997, 2007, 3570, + 16356, 2015, 1012, 102 + ] + }, + { "text": "locked-nucleus-orbit", "ids": [101, 5299, 1011, 13502, 1011, 8753, 102] }, + { + "text": "group: deterministic, effects, intro, lockup, motion-primitive, orbit, reveal\nwhat: Locked Nucleus Orbit. A fixed center nucleus anchors deterministic satellite orbits that settle into a composed lockup.\nuse_when: Jobs: reveal. Profile: orbit.", + "ids": [ + 101, 2177, 1024, 28283, 25300, 10074, 1010, 3896, 1010, 17174, 1010, 5843, 6279, 1010, 4367, + 1011, 10968, 1010, 8753, 1010, 7487, 2054, 1024, 5299, 13502, 8753, 1012, 1037, 4964, 2415, + 13502, 24674, 28283, 25300, 10074, 5871, 20347, 2008, 7392, 2046, 1037, 3605, 5843, 6279, + 1012, 2224, 1035, 2043, 1024, 5841, 1024, 7487, 1012, 6337, 1024, 8753, 1012, 102 + ] + }, + { "text": "logo-brand-close", "ids": [101, 8154, 1011, 4435, 1011, 2485, 102] }, + { + "text": "group: brand, celebrate, close, end-card, logo, motion-primitive, typography\nwhat: Logo Brand Close. A display-scale wordmark cascades letter by letter into a centered lockup, the accent brand period lands last, an optional tagline and wide-tracked mono URL settle beneath, and the finished identity holds dead still to the end of the film.\nuse_when: Jobs: celebrate. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 4435, 1010, 8439, 1010, 2485, 1010, 2203, 1011, 4003, 1010, 8154, 1010, 4367, + 1011, 10968, 1010, 5939, 6873, 12565, 2054, 1024, 8154, 4435, 2485, 1012, 1037, 4653, 1011, + 4094, 2773, 10665, 16690, 2015, 3661, 2011, 3661, 2046, 1037, 8857, 5843, 6279, 1010, 1996, + 9669, 4435, 2558, 4915, 2197, 1010, 2019, 11887, 6415, 4179, 1998, 2898, 1011, 12808, 18847, + 24471, 2140, 7392, 4218, 1010, 1998, 1996, 2736, 4767, 4324, 2757, 2145, 2000, 1996, 2203, + 1997, 1996, 2143, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 8439, 1012, 6337, 1024, 2907, + 3085, 1012, 102 + ] + }, + { "text": "logo-outro", "ids": [101, 8154, 1011, 2041, 3217, 102] }, + { + "text": "group: branding, logo, outro\nwhat: Logo Outro. Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill", + "ids": [ + 101, 2177, 1024, 16140, 1010, 8154, 1010, 2041, 3217, 2054, 1024, 8154, 2041, 3217, 1012, + 21014, 8154, 7487, 2007, 3538, 1011, 2011, 1011, 3538, 3320, 1010, 8652, 13426, 1010, 6415, + 4179, 12985, 1011, 1999, 1010, 1998, 24471, 2140, 17357, 102 + ] + }, + { "text": "logo-sting", "ids": [101, 8154, 1011, 12072, 102] }, + { + "text": "group: brand, impact, logo, motion-primitive, reveal, sting\nwhat: Logo Sting. A wordmark slams into its final scale, fires one accent ring and one white impact frame, then holds completely still.\nuse_when: Jobs: reveal. Profile: burst.", + "ids": [ + 101, 2177, 1024, 4435, 1010, 4254, 1010, 8154, 1010, 4367, 1011, 10968, 1010, 7487, 1010, + 12072, 2054, 1024, 8154, 12072, 1012, 1037, 2773, 10665, 25967, 2046, 2049, 2345, 4094, 1010, + 8769, 2028, 9669, 3614, 1998, 2028, 2317, 4254, 4853, 1010, 2059, 4324, 3294, 2145, 1012, + 2224, 1035, 2043, 1024, 5841, 1024, 7487, 1012, 6337, 1024, 6532, 1012, 102 + ] + }, + { "text": "logo-wall", "ids": [101, 8154, 1011, 2813, 102] }, + { + "text": "group: data, logos, prove, social-proof, stagger\nwhat: Logo Wall. A trusted-by wall of placeholder lettermark logos that fades and scales into place with a deterministic per-cell stagger.\nuse_when: Jobs: prove. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 2951, 1010, 25571, 1010, 6011, 1010, 2591, 1011, 6947, 1010, 2358, 27609, + 2054, 1024, 8154, 2813, 1012, 1037, 9480, 1011, 2011, 2813, 1997, 2173, 14528, 3661, 10665, + 25571, 2008, 26784, 1998, 9539, 2046, 2173, 2007, 1037, 28283, 25300, 10074, 2566, 1011, 3526, + 2358, 27609, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 6011, 1012, 6337, 1024, 2907, 3085, + 1012, 102 + ] + }, + { "text": "lower-third-bild", "ids": [101, 2896, 1011, 2353, 1011, 12170, 6392, 102] }, + { + "text": "group: broadcast, lower-third, news, overlay\nwhat: Lower Third, BILD Style. News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow.", + "ids": [ + 101, 2177, 1024, 3743, 1010, 2896, 1011, 2353, 1010, 2739, 1010, 2058, 8485, 2054, 1024, 2896, + 2353, 1010, 12170, 6392, 2806, 1012, 2739, 1011, 2806, 2896, 2353, 2007, 4389, 1011, 4906, + 3793, 8378, 1024, 2317, 17653, 3347, 2007, 2417, 4530, 1011, 5192, 1010, 2417, 4942, 1011, + 2240, 2007, 2317, 4530, 1011, 5192, 1012, 102 + ] + }, + { "text": "lt-accent-underline", "ids": [101, 8318, 1011, 9669, 1011, 2104, 4179, 102] }, + { + "text": "group: interview, lower-third, minimal, overlay, podcast\nwhat: Lower Third, Accent Underline. Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility", + "ids": [ + 101, 2177, 1024, 4357, 1010, 2896, 1011, 2353, 1010, 10124, 1010, 2058, 8485, 1010, 16110, + 2054, 1024, 2896, 2353, 1010, 9669, 2104, 4179, 1012, 4003, 3238, 2896, 2353, 2005, 8333, + 2058, 8485, 1024, 2171, 9466, 1010, 2019, 9669, 3627, 9891, 2187, 1011, 2000, 1011, 2157, + 1010, 2535, 26784, 1999, 1025, 3793, 1011, 25843, 2005, 4190, 13464, 102 + ] + }, + { "text": "lt-bold-block", "ids": [101, 8318, 1011, 7782, 1011, 3796, 102] }, + { + "text": "group: bold, interview, lower-third, overlay, podcast\nwhat: Lower Third, Bold Block. High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops", + "ids": [ + 101, 2177, 1024, 7782, 1010, 4357, 1010, 2896, 1011, 2353, 1010, 2058, 8485, 1010, 16110, + 2054, 1024, 2896, 2353, 1010, 7782, 3796, 1012, 2152, 1011, 2943, 16110, 2896, 2353, 1024, + 5024, 2601, 3796, 13387, 2015, 1999, 1010, 3356, 18382, 2171, 25967, 2039, 1010, 9669, 6415, + 16949, 102 + ] + }, + { "text": "lt-clean-bar", "ids": [101, 8318, 1011, 4550, 1011, 3347, 102] }, + { + "text": "group: interview, lower-third, overlay, podcast\nwhat: Lower Third, Clean Bar. Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance", + "ids": [ + 101, 2177, 1024, 4357, 1010, 2896, 1011, 2353, 1010, 2058, 8485, 1010, 16110, 2054, 1024, + 2896, 2353, 1010, 4550, 3347, 1012, 10124, 2317, 1011, 4003, 2896, 2353, 2005, 16110, 2015, + 1013, 7636, 1024, 9669, 21628, 1010, 2171, 1009, 2535, 1010, 12528, 1011, 13387, 4211, 102 + ] + }, + { "text": "lt-color-block", "ids": [101, 8318, 1011, 3609, 1011, 3796, 102] }, + { + "text": "group: bold, interview, lower-third, overlay, podcast\nwhat: Lower Third, Color Block. High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role", + "ids": [ + 101, 2177, 1024, 7782, 1010, 4357, 1010, 2896, 1011, 2353, 1010, 2058, 8485, 1010, 16110, + 2054, 1024, 2896, 2353, 1010, 3609, 3796, 1012, 2152, 1011, 2943, 2896, 2353, 1024, 7782, + 9669, 1011, 3609, 3796, 14816, 1999, 2007, 15849, 23416, 1010, 25011, 2171, 1009, 18847, 2535, + 102 + ] + }, + { "text": "lt-dark-card", "ids": [101, 8318, 1011, 2601, 1011, 4003, 102] }, + { + "text": "group: dark, interview, lower-third, overlay, podcast\nwhat: Lower Third, Dark Card. Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance", + "ids": [ + 101, 2177, 1024, 2601, 1010, 4357, 1010, 2896, 1011, 2353, 1010, 2058, 8485, 1010, 16110, + 2054, 1024, 2896, 2353, 1010, 2601, 4003, 1012, 18872, 4003, 2896, 2353, 2005, 4408, 8333, + 1024, 2171, 1010, 4567, 9669, 2104, 4179, 1010, 2535, 1025, 7358, 1011, 2039, 4211, 102 + ] + }, + { "text": "lt-kicker-name", "ids": [101, 8318, 1011, 22652, 1011, 2171, 102] }, + { + "text": "group: bold, interview, lower-third, overlay, podcast\nwhat: Lower Third, Kicker Name. Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage", + "ids": [ + 101, 2177, 1024, 7782, 1010, 4357, 1010, 2896, 1011, 2353, 1010, 2058, 8485, 1010, 16110, + 2054, 1024, 2896, 2353, 1010, 22652, 2171, 1012, 4003, 3238, 2896, 2353, 2007, 2019, 9669, + 9522, 1013, 22652, 6415, 1010, 3082, 2171, 1010, 1998, 1037, 4567, 26163, 1025, 2005, 8333, + 102 + ] + }, + { "text": "lt-mask-reveal", "ids": [101, 8318, 1011, 7308, 1011, 7487, 102] }, + { + "text": "group: bold, interview, lower-third, overlay, podcast\nwhat: Lower Third, Mask Reveal. Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage", + "ids": [ + 101, 2177, 1024, 7782, 1010, 4357, 1010, 2896, 1011, 2353, 1010, 2058, 8485, 1010, 16110, + 2054, 1024, 2896, 2353, 1010, 7308, 7487, 1012, 4003, 3238, 2896, 2353, 1024, 2019, 9669, + 11740, 7821, 1998, 12528, 1011, 4130, 1011, 7657, 1037, 3082, 2171, 1010, 2535, 26784, 2039, + 1025, 2005, 8333, 102 + ] + }, + { "text": "lt-side-rule", "ids": [101, 8318, 1011, 2217, 1011, 3627, 102] }, + { + "text": "group: interview, lower-third, minimal, overlay, podcast\nwhat: Lower Third, Side Rule. Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage", + "ids": [ + 101, 2177, 1024, 4357, 1010, 2896, 1011, 2353, 1010, 10124, 1010, 2058, 8485, 1010, 16110, + 2054, 1024, 2896, 2353, 1010, 2217, 3627, 1012, 4003, 3238, 2896, 2353, 2007, 1037, 7471, + 9669, 3347, 1025, 25011, 4653, 2171, 1009, 18847, 2535, 1010, 3793, 1011, 25843, 2005, 8333, + 102 + ] + }, + { "text": "lt-soft-pill", "ids": [101, 8318, 1011, 3730, 1011, 17357, 102] }, + { + "text": "group: interview, lower-third, minimal, overlay, podcast\nwhat: Lower Third, Soft Pill. Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance", + "ids": [ + 101, 2177, 1024, 4357, 1010, 2896, 1011, 2353, 1010, 10124, 1010, 2058, 8485, 1010, 16110, + 2054, 1024, 2896, 2353, 1010, 3730, 17357, 1012, 8352, 2317, 17357, 2896, 2353, 2005, 16110, + 2015, 1013, 7636, 1024, 3570, 11089, 1010, 2171, 1009, 2535, 1010, 4094, 1011, 3769, 4211, 102 + ] + }, + { "text": "lt-stack-bars", "ids": [101, 8318, 1011, 9991, 1011, 6963, 102] }, + { + "text": "group: bold, interview, lower-third, overlay, podcast\nwhat: Lower Third, Stack Bars. Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right", + "ids": [ + 101, 2177, 1024, 7782, 1010, 4357, 1010, 2896, 1011, 2353, 1010, 2058, 8485, 1010, 16110, + 2054, 1024, 2896, 2353, 1010, 9991, 6963, 1012, 2048, 16934, 6963, 1024, 1037, 2601, 2171, + 3347, 13387, 2015, 2013, 1996, 2187, 1010, 2019, 9669, 2535, 3347, 13387, 2015, 2013, 1996, + 2157, 102 + ] + }, + { "text": "macos-notification", "ids": [101, 6097, 2891, 1011, 26828, 102] }, + { + "text": "group: notification, overlay, social\nwhat: macOS Notification. Animated macOS-style notification banner with app icon and message", + "ids": [ + 101, 2177, 1024, 26828, 1010, 2058, 8485, 1010, 2591, 2054, 1024, 6097, 2891, 26828, 1012, + 6579, 6097, 2891, 1011, 2806, 26828, 9484, 2007, 10439, 12696, 1998, 4471, 102 + ] + }, + { + "text": "macos-tahoe-liquid-glass", + "ids": [101, 6097, 2891, 1011, 11937, 14490, 1011, 6381, 1011, 3221, 102] + }, + { + "text": "group: 3d, gltf, html-in-canvas, macos, tahoe\nwhat: macOS Tahoe Liquid Glass Desktop. 3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move.", + "ids": [ + 101, 2177, 1024, 7605, 1010, 1043, 7096, 2546, 1010, 16129, 1011, 1999, 1011, 10683, 1010, + 6097, 2891, 1010, 11937, 14490, 2054, 1024, 6097, 2891, 11937, 14490, 6381, 3221, 15363, 1012, + 7605, 6097, 8654, 2007, 1037, 6097, 2891, 11937, 14490, 1011, 2806, 15363, 1010, 3221, 12183, + 3347, 1010, 2424, 2121, 3332, 1010, 8946, 1010, 1998, 21014, 5080, 4950, 2693, 1012, 102 + ] + }, + { "text": "marker-highlight", "ids": [101, 12115, 1011, 12944, 102] }, + { + "text": "group: Annotation.\nwhat: A short display line settles in, then one SVG marker stroke draws over the first matched word or phrase.\nuse_when: One specific word or short phrase in a single line needs a timed highlight, circle, underline, or scribble.\navoid_when: Avoid it when the emphasized phrase must wrap, because the header requires the match to stay on one line.", + "ids": [ + 101, 2177, 1024, 5754, 17287, 3508, 1012, 2054, 1024, 1037, 2460, 4653, 2240, 27221, 1999, + 1010, 2059, 2028, 17917, 2290, 12115, 6909, 9891, 2058, 1996, 2034, 10349, 2773, 2030, 7655, + 1012, 2224, 1035, 2043, 1024, 2028, 3563, 2773, 2030, 2460, 7655, 1999, 1037, 2309, 2240, + 3791, 1037, 22313, 12944, 1010, 4418, 1010, 2104, 4179, 1010, 2030, 8040, 3089, 11362, 1012, + 4468, 1035, 2043, 1024, 4468, 2009, 2043, 1996, 13155, 7655, 2442, 10236, 1010, 2138, 1996, + 20346, 5942, 1996, 2674, 2000, 2994, 2006, 2028, 2240, 1012, 102 + ] + }, + { "text": "mask-reveal-up", "ids": [101, 7308, 1011, 7487, 1011, 2039, 102] }, + { + "text": "group: motion-primitive, remocn-port, typography\nwhat: Mask Reveal Up. Lines reveal upward through a tight mask with compact stagger.", + "ids": [ + 101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939, + 6873, 12565, 2054, 1024, 7308, 7487, 2039, 1012, 3210, 7487, 10745, 2083, 1037, 4389, 7308, + 2007, 9233, 2358, 27609, 1012, 102 + ] + }, + { "text": "masked-slide-reveal", "ids": [101, 16520, 1011, 7358, 1011, 7487, 102] }, + { + "text": "group: motion-primitive, remocn-port, typography\nwhat: Masked Slide Reveal. Words slide up out of an invisible horizontal mask one after another.", + "ids": [ + 101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939, + 6873, 12565, 2054, 1024, 16520, 7358, 7487, 1012, 2616, 7358, 2039, 2041, 1997, 2019, 8841, + 9876, 7308, 2028, 2044, 2178, 1012, 102 + ] + }, + { "text": "match-cut", "ids": [101, 2674, 1011, 3013, 102] }, + { + "text": "group: Transitions.\nwhat: Scene A drives a circle into center-frame geometry, a hard single-frame swap reveals scene B with a matching circle, and that circle immediately shrinks as scene B settles.\nuse_when: Two scenes share a circle that can carry motion continuously across a precise hard cut.\navoid_when: Avoid it when a crossfade is required, because scene A becomes invisible and scene B visible at the same timeline instant.", + "ids": [ + 101, 2177, 1024, 22166, 1012, 2054, 1024, 3496, 1037, 9297, 1037, 4418, 2046, 2415, 1011, + 4853, 10988, 1010, 1037, 2524, 2309, 1011, 4853, 19948, 7657, 3496, 1038, 2007, 1037, 9844, + 4418, 1010, 1998, 2008, 4418, 3202, 22802, 2015, 2004, 3496, 1038, 27221, 1012, 2224, 1035, + 2043, 1024, 2048, 5019, 3745, 1037, 4418, 2008, 2064, 4287, 4367, 10843, 2408, 1037, 10480, + 2524, 3013, 1012, 4468, 1035, 2043, 1024, 4468, 2009, 2043, 1037, 2892, 7011, 3207, 2003, + 3223, 1010, 2138, 3496, 1037, 4150, 8841, 1998, 3496, 1038, 5710, 2012, 1996, 2168, 17060, + 7107, 1012, 102 + ] + }, + { "text": "matrix-decode", "ids": [101, 8185, 1011, 21933, 3207, 102] }, + { + "text": "group: motion-primitive, remocn-port, typography\nwhat: Matrix Decode. Random scramble resolves left-to-right into the target text.", + "ids": [ + 101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939, + 6873, 12565, 2054, 1024, 8185, 21933, 3207, 1012, 6721, 25740, 10663, 2015, 2187, 1011, 2000, + 1011, 2157, 2046, 1996, 4539, 3793, 1012, 102 + ] + }, + { "text": "menu-morph", "ids": [101, 12183, 1011, 22822, 8458, 102] }, + { + "text": "group: menu, morph, transition-primitive, transitions-dev-port\nwhat: Menu Morph. A transitions.dev-inspired hamburger and plus-menu morph primitive for compact action menus", + "ids": [ + 101, 2177, 1024, 12183, 1010, 22822, 8458, 1010, 6653, 1011, 10968, 1010, 22166, 1011, 16475, + 1011, 3417, 2054, 1024, 12183, 22822, 8458, 1012, 1037, 22166, 1012, 16475, 1011, 4427, 24575, + 1998, 4606, 1011, 12183, 22822, 8458, 10968, 2005, 9233, 2895, 12183, 2015, 102 + ] + }, + { "text": "menubar", "ids": [101, 12183, 8237, 102] }, + { + "text": "group: menubar, navigation, remocn-port, ui-primitive\nwhat: Menubar. A compact matte menubar for editor chrome with physical press response and restrained current-item emphasis", + "ids": [ + 101, 2177, 1024, 12183, 8237, 1010, 9163, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, + 21318, 1011, 10968, 2054, 1024, 12183, 8237, 1012, 1037, 9233, 4717, 2063, 12183, 8237, 2005, + 3559, 18546, 2007, 3558, 2811, 3433, 1998, 19868, 2783, 1011, 8875, 7902, 102 + ] + }, + { "text": "mesh-gradient-bg", "ids": [101, 20437, 1011, 17978, 1011, 1038, 2290, 102] }, + { + "text": "group: effect, remocn-port\nwhat: Mesh Gradient Background. A render-safe mesh gradient using animated radial layers.", + "ids": [ + 101, 2177, 1024, 3466, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 2054, 1024, 20437, 17978, + 4281, 1012, 1037, 17552, 1011, 3647, 20437, 17978, 2478, 6579, 15255, 9014, 1012, 102 + ] + }, + { "text": "micro-scale-fade", "ids": [101, 12702, 1011, 4094, 1011, 12985, 102] }, + { + "text": "group: remocn-port, transition-primitive\nwhat: Micro Scale Fade. A tiny scale-and-opacity transition for UI state changes.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 6653, 1011, 10968, 2054, 1024, + 12702, 4094, 12985, 1012, 1037, 4714, 4094, 1011, 1998, 1011, 6728, 6305, 3012, 6653, 2005, + 21318, 2110, 3431, 1012, 102 + ] + }, + { "text": "micro-transitions", "ids": [101, 12702, 1011, 22166, 102] }, + { + "text": "group: microinteraction, motion-primitive, transition, transition-primitive, transitions-dev-port, ui\nwhat: Micro Transitions. A transitions.dev-inspired pack of badge, dropdown, modal, tabs, tooltip, and success-check micro transitions", + "ids": [ + 101, 2177, 1024, 12702, 18447, 6906, 7542, 1010, 4367, 1011, 10968, 1010, 6653, 1010, 6653, + 1011, 10968, 1010, 22166, 1011, 16475, 1011, 3417, 1010, 21318, 2054, 1024, 12702, 22166, + 1012, 1037, 22166, 1012, 16475, 1011, 4427, 5308, 1997, 10780, 1010, 4530, 7698, 1010, 16913, + 2389, 1010, 21628, 2015, 1010, 6994, 25101, 1010, 1998, 3112, 1011, 4638, 12702, 22166, 102 + ] + }, + { "text": "modal-morph", "ids": [101, 16913, 2389, 1011, 22822, 8458, 102] }, + { + "text": "group: demonstrate, deterministic, experiment, flip, modal, motion-primitive, shared-element, structure\nwhat: Modal Morph. A small card expands into a full panel, shared-element style: both layouts measured once at mount, the container morphs by transform only (never width/height tweens) while keyed children counter-scale and re-flow onto their own measured targets as pure functions of time.\nuse_when: Jobs: demonstrate. Profile: shared-element.", + "ids": [ + 101, 2177, 1024, 10580, 1010, 28283, 25300, 10074, 1010, 7551, 1010, 11238, 1010, 16913, 2389, + 1010, 4367, 1011, 10968, 1010, 4207, 1011, 5783, 1010, 3252, 2054, 1024, 16913, 2389, 22822, + 8458, 1012, 1037, 2235, 4003, 24545, 2046, 1037, 2440, 5997, 1010, 4207, 1011, 5783, 2806, + 1024, 2119, 9621, 2015, 7594, 2320, 2012, 4057, 1010, 1996, 11661, 22822, 18757, 2011, 10938, + 2069, 1006, 2196, 9381, 1013, 4578, 1056, 28394, 3619, 1007, 2096, 3145, 2098, 2336, 4675, + 1011, 4094, 1998, 2128, 1011, 4834, 3031, 2037, 2219, 7594, 7889, 2004, 5760, 4972, 1997, + 2051, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 10580, 1012, 6337, 1024, 4207, 1011, 5783, + 1012, 102 + ] + }, + { "text": "morph-swap", "ids": [101, 22822, 8458, 1011, 19948, 102] }, + { + "text": "group: bridge, condense, holdable, morph, reshape, slots, swap, transition, transitions\nwhat: Morph Swap. Two slotted siblings stacked at one shared center: A holds, then condenses or reshapes into B on a shared 50% 50% transform origin. Condense shrink-fades A exactly as B scales up; reshape morphs the silhouette on scaleX/scaleY, never width or height tweens. Token card defaults render when a slot is left empty.\nuse_when: Jobs: bridge. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 2958, 1010, 24707, 12325, 1010, 2907, 3085, 1010, 22822, 8458, 1010, 24501, + 3270, 5051, 1010, 19832, 1010, 19948, 1010, 6653, 1010, 22166, 2054, 1024, 22822, 8458, 19948, + 1012, 2048, 10453, 3064, 9504, 16934, 2012, 2028, 4207, 2415, 1024, 1037, 4324, 1010, 2059, + 24707, 12325, 2015, 2030, 24501, 3270, 10374, 2046, 1038, 2006, 1037, 4207, 2753, 1003, 2753, + 1003, 10938, 4761, 1012, 24707, 12325, 22802, 1011, 26784, 1037, 3599, 2004, 1038, 9539, 2039, + 1025, 24501, 3270, 5051, 22822, 18757, 1996, 21776, 2006, 4094, 2595, 1013, 4094, 2100, 1010, + 2196, 9381, 2030, 4578, 1056, 28394, 3619, 1012, 19204, 4003, 12398, 2015, 17552, 2043, 1037, + 10453, 2003, 2187, 4064, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 2958, 1012, 6337, 1024, + 2907, 3085, 1012, 102 + ] + }, + { "text": "morph-text", "ids": [101, 22822, 8458, 1011, 3793, 102] }, + { + "text": "group: animation, gooey, kinetic, morph, text, text-effect, typography\nwhat: Morph Text. Gooey text morph, cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect", + "ids": [ + 101, 2177, 1024, 7284, 1010, 27571, 3240, 1010, 20504, 1010, 22822, 8458, 1010, 3793, 1010, + 3793, 1011, 3466, 1010, 5939, 6873, 12565, 2054, 1024, 22822, 8458, 3793, 1012, 27571, 3240, + 3793, 22822, 8458, 1010, 12709, 2083, 2019, 10086, 3085, 2773, 2862, 2478, 17917, 2290, 11207, + 1009, 28177, 9331, 1011, 5533, 14819, 2005, 1037, 8331, 1010, 17087, 6653, 3466, 102 + ] + }, + { "text": "motion-blur", "ids": [101, 4367, 1011, 14819, 102] }, + { + "text": "group: animation, effect, motion-blur, physics, velocity\nwhat: Motion Blur. Velocity-driven motion blur, samples element position each frame and applies a one-sided SVG feGaussianBlur ghost trail proportional to speed", + "ids": [ + 101, 2177, 1024, 7284, 1010, 3466, 1010, 4367, 1011, 14819, 1010, 5584, 1010, 10146, 2054, + 1024, 4367, 14819, 1012, 10146, 1011, 5533, 4367, 14819, 1010, 8168, 5783, 2597, 2169, 4853, + 1998, 12033, 1037, 2028, 1011, 11536, 17917, 2290, 10768, 20420, 18719, 2319, 16558, 3126, + 5745, 4446, 14267, 2000, 3177, 102 + ] + }, + { "text": "multi-device-splay", "ids": [101, 4800, 1011, 5080, 1011, 11867, 8485, 102] }, + { + "text": "group: demonstrate, desktop, device, motion-primitive, phone, splay, tablet, ui-props\nwhat: Multi Device Splay. Phone, tablet, and desktop product mockups fan from a centered stack into a proud splayed arrangement with a subtle idle float.\nuse_when: Jobs: demonstrate. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 10580, 1010, 15363, 1010, 5080, 1010, 4367, 1011, 10968, 1010, 3042, 1010, + 11867, 8485, 1010, 13855, 1010, 21318, 1011, 24387, 2054, 1024, 4800, 5080, 11867, 8485, 1012, + 3042, 1010, 13855, 1010, 1998, 15363, 4031, 12934, 22264, 5470, 2013, 1037, 8857, 9991, 2046, + 1037, 7098, 11867, 8485, 2098, 6512, 2007, 1037, 11259, 18373, 14257, 1012, 2224, 1035, 2043, + 1024, 5841, 1024, 10580, 1012, 6337, 1024, 2907, 3085, 1012, 102 + ] + }, + { "text": "multiplayer-cursors", "ids": [101, 17762, 1011, 12731, 25301, 2869, 102] }, + { + "text": "group: collaboration, cursor, loop, multiplayer, pointer, pointers, presence, prove\nwhat: Multiplayer Cursors. Labeled collaborator cursors with token-derived colors and soft glows drift from spread positions into a shared center zone, proving live multiplayer presence.\nuse_when: Jobs: prove. Profile: loop.", + "ids": [ + 101, 2177, 1024, 5792, 1010, 12731, 25301, 2099, 1010, 7077, 1010, 17762, 1010, 20884, 1010, + 20884, 2015, 1010, 3739, 1010, 6011, 2054, 1024, 17762, 12731, 25301, 2869, 1012, 12599, + 18843, 12731, 25301, 2869, 2007, 19204, 1011, 5173, 6087, 1998, 3730, 8652, 2015, 11852, 2013, + 3659, 4460, 2046, 1037, 4207, 2415, 4224, 1010, 13946, 2444, 17762, 3739, 1012, 2224, 1035, + 2043, 1024, 5841, 1024, 6011, 1012, 6337, 1024, 7077, 1012, 102 + ] + }, + { "text": "native-notification-pop", "ids": [101, 3128, 1011, 26828, 1011, 3769, 102] }, + { + "text": "group: demonstrate, motion-primitive, notification, overlay, product-demo, spring\nwhat: Native Notification Pop. One system-faithful notification banner (iOS or macOS) drops in over any scene on an accurate interruptible spring: fast arrival, soft overshoot, settled mass, backdrop blur, app dot, title, one body line. Holds; tucks away only via exit.\nuse_when: Jobs: demonstrate. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 10580, 1010, 4367, 1011, 10968, 1010, 26828, 1010, 2058, 8485, 1010, 4031, + 1011, 9703, 1010, 3500, 2054, 1024, 3128, 26828, 3769, 1012, 2028, 2291, 1011, 11633, 26828, + 9484, 1006, 16380, 2030, 6097, 2891, 1007, 9010, 1999, 2058, 2151, 3496, 2006, 2019, 8321, + 17938, 7028, 3500, 1024, 3435, 5508, 1010, 3730, 15849, 23416, 1010, 3876, 3742, 1010, 18876, + 14819, 1010, 10439, 11089, 1010, 2516, 1010, 2028, 2303, 2240, 1012, 4324, 1025, 18029, 2015, + 2185, 2069, 3081, 6164, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 10580, 1012, 6337, 1024, + 2907, 3085, 1012, 102 + ] + }, + { "text": "native-select", "ids": [101, 3128, 1011, 7276, 102] }, + { + "text": "group: control, native-select, remocn-port, ui-primitive\nwhat: Native Select. A compact native select with a clear label, technical value, and focus state", + "ids": [ + 101, 2177, 1024, 2491, 1010, 3128, 1011, 7276, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, + 21318, 1011, 10968, 2054, 1024, 3128, 7276, 1012, 1037, 9233, 3128, 7276, 2007, 1037, 3154, + 3830, 1010, 4087, 3643, 1010, 1998, 3579, 2110, 102 + ] + }, + { "text": "navigation-menu", "ids": [101, 9163, 1011, 12183, 102] }, + { + "text": "group: navigation, navigation-menu, remocn-port, ui-primitive\nwhat: Navigation Menu. An anchored navigation menu with a functional selection edge and opaque trigger-origin preview surface", + "ids": [ + 101, 2177, 1024, 9163, 1010, 9163, 1011, 12183, 1010, 2128, 5302, 2278, 2078, 1011, 3417, + 1010, 21318, 1011, 10968, 2054, 1024, 9163, 12183, 1012, 2019, 14453, 9163, 12183, 2007, 1037, + 8360, 4989, 3341, 1998, 28670, 9495, 1011, 4761, 19236, 3302, 102 + ] + }, + { "text": "news-ticker", "ids": [101, 2739, 1011, 16356, 2121, 102] }, + { + "text": "group: lower-third, news, overlay, ticker\nwhat: News Ticker. Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl.", + "ids": [ + 101, 2177, 1024, 2896, 1011, 2353, 1010, 2739, 1010, 2058, 8485, 1010, 16356, 2121, 2054, + 1024, 2739, 16356, 2121, 1012, 12882, 3743, 1011, 2806, 2896, 1011, 2353, 16356, 2121, 2007, + 2444, 3830, 1010, 17653, 10557, 1010, 1998, 28903, 2739, 13529, 1012, 102 + ] + }, + { + "text": "north-korea-locked-down", + "ids": [101, 2167, 1011, 4420, 1011, 5299, 1011, 2091, 102] + }, + { + "text": "group: annotation, kinetic, map, showcase, youtube\nwhat: North Korea Locked Down. Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash.", + "ids": [ + 101, 2177, 1024, 5754, 17287, 3508, 1010, 20504, 1010, 4949, 1010, 13398, 1010, 7858, 2054, + 1024, 2167, 4420, 5299, 2091, 1012, 12689, 4949, 24095, 2046, 2167, 4420, 2007, 1037, 2417, + 8040, 3089, 11362, 4418, 1010, 5299, 1011, 2091, 3769, 1011, 2039, 3830, 1010, 1998, 14182, + 8368, 9378, 1012, 102 + ] + }, + { "text": "notification-pileup", "ids": [101, 26828, 1011, 8632, 6279, 102] }, + { + "text": "group: agitate, loop, mobile, notification, overload, pileup, ui-props\nwhat: Notification Pileup. Mobile notification cards arrive faster and faster, each new alert pushing the existing stack downward into a dense, anxious tower.\nuse_when: Jobs: agitate. Profile: loop.", + "ids": [ + 101, 2177, 1024, 12943, 17570, 1010, 7077, 1010, 4684, 1010, 26828, 1010, 2058, 11066, 1010, + 8632, 6279, 1010, 21318, 1011, 24387, 2054, 1024, 26828, 8632, 6279, 1012, 4684, 26828, 5329, + 7180, 5514, 1998, 5514, 1010, 2169, 2047, 9499, 6183, 1996, 4493, 9991, 14047, 2046, 1037, + 9742, 1010, 11480, 3578, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 12943, 17570, 1012, 6337, + 1024, 7077, 1012, 102 + ] + }, + { "text": "notification-stack", "ids": [101, 26828, 1011, 9991, 102] }, + { + "text": "group: demonstrate, motion-primitive, notification, product-demo, stack, stagger\nwhat: Notification Stack. 1 to 5 token notification cards slide-settle into a vertical stack on cues, newest on top; one card grows slightly and brightens as the focus while the rest dim by position.\nuse_when: Jobs: demonstrate. Profile: stack.", + "ids": [ + 101, 2177, 1024, 10580, 1010, 4367, 1011, 10968, 1010, 26828, 1010, 4031, 1011, 9703, 1010, + 9991, 1010, 2358, 27609, 2054, 1024, 26828, 9991, 1012, 1015, 2000, 1019, 19204, 26828, 5329, + 7358, 1011, 7392, 2046, 1037, 7471, 9991, 2006, 23391, 1010, 14751, 2006, 2327, 1025, 2028, + 4003, 7502, 3621, 1998, 4408, 6132, 2004, 1996, 3579, 2096, 1996, 2717, 11737, 2011, 2597, + 1012, 2224, 1035, 2043, 1024, 5841, 1024, 10580, 1012, 6337, 1024, 9991, 1012, 102 + ] + }, + { "text": "number-pop-in", "ids": [101, 2193, 1011, 3769, 1011, 1999, 102] }, + { + "text": "group: number, pop, transition-primitive, transitions-dev-port\nwhat: Number Pop In. A transitions.dev-inspired digit pop-in with blur, lift, and staggered value reveal", + "ids": [ + 101, 2177, 1024, 2193, 1010, 3769, 1010, 6653, 1011, 10968, 1010, 22166, 1011, 16475, 1011, + 3417, 2054, 1024, 2193, 3769, 1999, 1012, 1037, 22166, 1012, 16475, 1011, 4427, 15340, 3769, + 1011, 1999, 2007, 14819, 1010, 6336, 1010, 1998, 14648, 3643, 7487, 102 + ] + }, + { "text": "number-wheel", "ids": [101, 2193, 1011, 5217, 102] }, + { + "text": "group: counter, data, motion-primitive, number\nwhat: Number Wheel. A rolling digit counter primitive for metrics, prices, counts, and scoreboards", + "ids": [ + 101, 2177, 1024, 4675, 1010, 2951, 1010, 4367, 1011, 10968, 1010, 2193, 2054, 1024, 2193, + 5217, 1012, 1037, 5291, 15340, 4675, 10968, 2005, 12046, 2015, 1010, 7597, 1010, 9294, 1010, + 1998, 3556, 15271, 102 + ] + }, + { "text": "nyc-paris-flight", "ids": [101, 16392, 1011, 3000, 1011, 3462, 102] }, + { + "text": "group: map, sfx, showcase, travel, youtube\nwhat: NYC Paris Flight. Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects.", + "ids": [ + 101, 2177, 1024, 4949, 1010, 16420, 2595, 1010, 13398, 1010, 3604, 1010, 7858, 2054, 1024, + 16392, 3000, 3462, 1012, 6207, 1011, 2806, 12689, 4949, 7284, 2007, 1037, 4946, 3909, 2013, + 2047, 2259, 2000, 3000, 1010, 12115, 4418, 1010, 4899, 3769, 1010, 1998, 2614, 3896, 1012, 102 + ] + }, + { "text": "offset-path-traveler", "ids": [101, 16396, 1011, 4130, 1011, 20174, 102] }, + { + "text": "group: auto-rotate, demonstrate, motion-primitive, path, product-demo, traveler\nwhat: Offset Path Traveler. A slotted traveler follows an authored path with tangent rotation, curved entry, and curved exit.\nuse_when: Jobs: demonstrate. Profile: path-travel.", + "ids": [ + 101, 2177, 1024, 8285, 1011, 24357, 1010, 10580, 1010, 4367, 1011, 10968, 1010, 4130, 1010, + 4031, 1011, 9703, 1010, 20174, 2054, 1024, 16396, 4130, 20174, 1012, 1037, 10453, 3064, 20174, + 4076, 2019, 8786, 4130, 2007, 27250, 9963, 1010, 9203, 4443, 1010, 1998, 9203, 6164, 1012, + 2224, 1035, 2043, 1024, 5841, 1024, 10580, 1012, 6337, 1024, 4130, 1011, 3604, 1012, 102 + ] + }, + { + "text": "onboarding-stepper-flow", + "ids": [101, 27120, 2075, 1011, 29096, 2099, 1011, 4834, 102] + }, + { + "text": "group: onboarding, remocn-port, stepper, ui-flow\nwhat: Onboarding Stepper Flow. A composed onboarding flow with milestone rail, active step card, and next-action button", + "ids": [ + 101, 2177, 1024, 27120, 2075, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 29096, 2099, + 1010, 21318, 1011, 4834, 2054, 1024, 27120, 2075, 29096, 2099, 4834, 1012, 1037, 3605, 27120, + 2075, 4834, 2007, 19199, 4334, 1010, 3161, 3357, 4003, 1010, 1998, 2279, 1011, 2895, 6462, 102 + ] + }, + { "text": "orbit-ring-camera", "ids": [101, 8753, 1011, 3614, 1011, 4950, 102] }, + { + "text": "group: Camera moves.\nwhat: A camera tracks a lit head around a tilted ring, then dollies out to reveal the full ellipse, eight stations, and three rotating inner rails.\nuse_when: A close tracked journey along a loop must resolve into a complete system view with all stations visible.\navoid_when: Avoid it when square or portrait framing needs the same composition quality as landscape, because those aspects are only re-aimed while the move is composed for 16x9.", + "ids": [ + 101, 2177, 1024, 4950, 5829, 1012, 2054, 1024, 1037, 4950, 3162, 1037, 5507, 2132, 2105, 1037, + 9939, 3614, 1010, 2059, 10658, 3111, 2041, 2000, 7487, 1996, 2440, 3449, 15000, 3366, 1010, + 2809, 3703, 1010, 1998, 2093, 13618, 5110, 15168, 1012, 2224, 1035, 2043, 1024, 1037, 2485, + 12808, 4990, 2247, 1037, 7077, 2442, 10663, 2046, 1037, 3143, 2291, 3193, 2007, 2035, 3703, + 5710, 1012, 4468, 1035, 2043, 1024, 4468, 2009, 2043, 2675, 2030, 6533, 20241, 3791, 1996, + 2168, 5512, 3737, 2004, 5957, 1010, 2138, 2216, 5919, 2024, 2069, 2128, 1011, 6461, 2096, + 1996, 2693, 2003, 3605, 2005, 2385, 2595, 2683, 1012, 102 + ] + }, + { "text": "orbital-feature-path", "ids": [101, 13943, 1011, 3444, 1011, 4130, 102] }, + { + "text": "group: gsap-plugin, hyperframes-native, motionpath\nwhat: Orbital Feature Path. Feature chips orbit a product core on timed SVG motion paths.", + "ids": [ + 101, 2177, 1024, 28177, 9331, 1011, 13354, 2378, 1010, 23760, 15643, 2015, 1011, 3128, 1010, + 4367, 15069, 2054, 1024, 13943, 3444, 4130, 1012, 3444, 11772, 8753, 1037, 4031, 4563, 2006, + 22313, 17917, 2290, 4367, 10425, 1012, 102 + ] + }, + { "text": "ordered-dither-pass", "ids": [101, 3641, 1011, 4487, 12399, 1011, 3413, 102] }, + { + "text": "group: bridge, dither, effects, experiment, motion-primitive, quantize, reveal, texture, transition\nwhat: Ordered Dither Pass. Bayer-matrix ordered dithering quantizes a slotted scene (rasterized once at mount): the image emerges from pure 2-tone noise to clean, or dissolves the reverse. Stateless per frame, never error diffusion.\nuse_when: Jobs: reveal, bridge. Profile: texture.", + "ids": [ + 101, 2177, 1024, 2958, 1010, 4487, 12399, 1010, 3896, 1010, 7551, 1010, 4367, 1011, 10968, + 1010, 24110, 3775, 4371, 1010, 7487, 1010, 14902, 1010, 6653, 2054, 1024, 3641, 4487, 12399, + 3413, 1012, 26367, 1011, 8185, 3641, 4487, 12399, 2075, 24110, 3775, 11254, 1037, 10453, 3064, + 3496, 1006, 20710, 3334, 3550, 2320, 2012, 4057, 1007, 1024, 1996, 3746, 19391, 2013, 5760, + 1016, 1011, 4309, 5005, 2000, 4550, 1010, 2030, 21969, 2015, 1996, 7901, 1012, 2110, 3238, + 2566, 4853, 1010, 2196, 7561, 19241, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 7487, 1010, + 2958, 1012, 6337, 1024, 14902, 1012, 102 + ] + }, + { "text": "outline-draw", "ids": [101, 12685, 1011, 4009, 102] }, + { + "text": "group: border, effects, mask, motion-primitive, outline, proof, prove\nwhat: Outline Draw. A rounded outline that proves a callout by drawing clockwise as a hollow conic-gradient border with a clean closure.\nuse_when: Jobs: prove. Profile: burst.", + "ids": [ + 101, 2177, 1024, 3675, 1010, 3896, 1010, 7308, 1010, 4367, 1011, 10968, 1010, 12685, 1010, + 6947, 1010, 6011, 2054, 1024, 12685, 4009, 1012, 1037, 8352, 12685, 2008, 16481, 1037, 2655, + 5833, 2011, 5059, 22839, 2004, 1037, 8892, 9530, 2594, 1011, 17978, 3675, 2007, 1037, 4550, + 8503, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 6011, 1012, 6337, 1024, 6532, 1012, 102 + ] + }, + { "text": "oversized-cursor", "ids": [101, 21698, 1011, 12731, 25301, 2099, 102] }, + { + "text": "group: actor, cursor, demonstrate, interaction, motion-primitive, pointer, pointers\nwhat: Oversized Cursor. A deliberately oversized macOS-style pointer that enters off-screen, travels to a target, clicks to ignite a visible response, then exits\nuse_when: Jobs: demonstrate. Profile: interaction.", + "ids": [ + 101, 2177, 1024, 3364, 1010, 12731, 25301, 2099, 1010, 10580, 1010, 8290, 1010, 4367, 1011, + 10968, 1010, 20884, 1010, 20884, 2015, 2054, 1024, 21698, 12731, 25301, 2099, 1012, 1037, + 9969, 21698, 6097, 2891, 1011, 2806, 20884, 2008, 8039, 2125, 1011, 3898, 1010, 7930, 2000, + 1037, 4539, 1010, 29225, 2000, 16270, 4221, 1037, 5710, 3433, 1010, 2059, 16639, 2224, 1035, + 2043, 1024, 5841, 1024, 10580, 1012, 6337, 1024, 8290, 1012, 102 + ] + }, + { "text": "overwhelm-surround", "ids": [101, 2058, 2860, 24546, 1011, 15161, 102] }, + { + "text": "group: agitate, effects, notifications, overwhelm, pressure\nwhat: Overwhelm Surround. Tasks, tabs, pings, and notification bubbles accelerate inward around a calm central subject, turning overload into visible spatial pressure.\nuse_when: Jobs: agitate. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 12943, 17570, 1010, 3896, 1010, 26828, 2015, 1010, 2058, 2860, 24546, 1010, + 3778, 2054, 1024, 2058, 2860, 24546, 15161, 1012, 8518, 1010, 21628, 2015, 1010, 17852, 2015, + 1010, 1998, 26828, 17255, 23306, 20546, 2105, 1037, 5475, 2430, 3395, 1010, 3810, 2058, 11066, + 2046, 5710, 13589, 3778, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 12943, 17570, 1012, 6337, + 1024, 2907, 3085, 1012, 102 + ] + }, + { "text": "page-slide", "ids": [101, 3931, 1011, 7358, 102] }, + { + "text": "group: page, slide, transition-primitive, transitions-dev-port\nwhat: Page Slide. A transitions.dev-inspired page slide primitive with outgoing and incoming panels", + "ids": [ + 101, 2177, 1024, 3931, 1010, 7358, 1010, 6653, 1011, 10968, 1010, 22166, 1011, 16475, 1011, + 3417, 2054, 1024, 3931, 7358, 1012, 1037, 22166, 1012, 16475, 1011, 4427, 3931, 7358, 10968, + 2007, 22011, 1998, 14932, 9320, 102 + ] + }, + { "text": "pagination", "ids": [101, 6643, 20876, 3508, 102] }, + { + "text": "group: navigation, pagination, remocn-port, ui-primitive\nwhat: Pagination. A tactile pagination row with 40px controls, a recessed current page, and deterministic press feedback", + "ids": [ + 101, 2177, 1024, 9163, 1010, 6643, 20876, 3508, 1010, 2128, 5302, 2278, 2078, 1011, 3417, + 1010, 21318, 1011, 10968, 2054, 1024, 6643, 20876, 3508, 1012, 1037, 11937, 6593, 9463, 6643, + 20876, 3508, 5216, 2007, 2871, 2361, 2595, 7711, 1010, 1037, 28290, 2098, 2783, 3931, 1010, + 1998, 28283, 25300, 10074, 2811, 12247, 102 + ] + }, + { "text": "pan-stations", "ids": [101, 6090, 1011, 3703, 102] }, + { + "text": "group: agitate, camera, cross-shelved, exhibit, features, pan, stations\nwhat: Pan Stations. A lateral camera move across a continuous row of labeled feature stations, with a steady dwell at each stop before the next pan.\nuse_when: Jobs: exhibit, agitate. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 12943, 17570, 1010, 4950, 1010, 2892, 1011, 2016, 26832, 1010, 8327, 1010, + 2838, 1010, 6090, 1010, 3703, 2054, 1024, 6090, 3703, 1012, 1037, 11457, 4950, 2693, 2408, + 1037, 7142, 5216, 1997, 12599, 3444, 3703, 1010, 2007, 1037, 6706, 23120, 2012, 2169, 2644, + 2077, 1996, 2279, 6090, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 8327, 1010, 12943, 17570, + 1012, 6337, 1024, 2907, 3085, 1012, 102 + ] + }, + { "text": "panel-reveal", "ids": [101, 5997, 1011, 7487, 102] }, + { + "text": "group: panel, reveal, transition-primitive, transitions-dev-port\nwhat: Panel Reveal. A panel reveal primitive with height expansion and content fade", + "ids": [ + 101, 2177, 1024, 5997, 1010, 7487, 1010, 6653, 1011, 10968, 1010, 22166, 1011, 16475, 1011, + 3417, 2054, 1024, 5997, 7487, 1012, 1037, 5997, 7487, 10968, 2007, 4578, 4935, 1998, 4180, + 12985, 102 + ] + }, + { "text": "parallax-device-dive", "ids": [101, 11498, 4571, 2595, 1011, 5080, 1011, 11529, 102] }, + { + "text": "group: camera, device, motion-primitive, parallax, phone, transition\nwhat: Parallax Device Dive. A canonical phone rises into view before the camera pushes through its screen and layered app UI expands to fill the frame.\nuse_when: Jobs: transition. Profile: dive.", + "ids": [ + 101, 2177, 1024, 4950, 1010, 5080, 1010, 4367, 1011, 10968, 1010, 11498, 4571, 2595, 1010, + 3042, 1010, 6653, 2054, 1024, 11498, 4571, 2595, 5080, 11529, 1012, 1037, 18562, 3042, 9466, + 2046, 3193, 2077, 1996, 4950, 13956, 2083, 2049, 3898, 1998, 21323, 10439, 21318, 24545, 2000, + 6039, 1996, 4853, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 6653, 1012, 6337, 1024, 11529, + 1012, 102 + ] + }, + { "text": "parallax-unzoom", "ids": [101, 11498, 4571, 2595, 1011, 4895, 23221, 2213, 102] }, + { + "text": "group: grid, hero, parallax, reveal, transition, unzoom\nwhat: Parallax Unzoom. Reveal transition, focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-zoom)", + "ids": [ + 101, 2177, 1024, 8370, 1010, 5394, 1010, 11498, 4571, 2595, 1010, 7487, 1010, 6653, 1010, + 4895, 23221, 2213, 2054, 1024, 11498, 4571, 2595, 4895, 23221, 2213, 1012, 7487, 6653, 1010, + 3579, 4003, 9539, 2091, 2013, 2440, 4853, 2004, 9504, 11498, 4571, 2595, 1999, 2000, 2433, + 1037, 8370, 1006, 7901, 1997, 11498, 4571, 2595, 1011, 24095, 1007, 102 + ] + }, + { "text": "parallax-zoom", "ids": [101, 11498, 4571, 2595, 1011, 24095, 102] }, + { + "text": "group: grid, hero, parallax, transition, zoom\nwhat: Parallax Zoom. Center card scales up to fill the frame while siblings parallax outward, inspired by the eBay Playbook hero transition", + "ids": [ + 101, 2177, 1024, 8370, 1010, 5394, 1010, 11498, 4571, 2595, 1010, 6653, 1010, 24095, 2054, + 1024, 11498, 4571, 2595, 24095, 1012, 2415, 4003, 9539, 2039, 2000, 6039, 1996, 4853, 2096, + 9504, 11498, 4571, 2595, 15436, 1010, 4427, 2011, 1996, 1041, 15907, 2377, 8654, 5394, 6653, + 102 + ] + }, + { "text": "particle-image-reveal", "ids": [101, 10811, 1011, 3746, 1011, 7487, 102] }, + { + "text": "group: canvas, deterministic, intros-reveals, motion-primitive, particles, reveal\nwhat: Particle Image Reveal. A seeded deterministic particle field converges and settles while a slotted image reveals beneath it, the trail thinning until the image holds clean.\nuse_when: Jobs: reveal. Profile: materialize.", + "ids": [ + 101, 2177, 1024, 10683, 1010, 28283, 25300, 10074, 1010, 17174, 2015, 1011, 7657, 1010, 4367, + 1011, 10968, 1010, 9309, 1010, 7487, 2054, 1024, 10811, 3746, 7487, 1012, 1037, 13916, 28283, + 25300, 10074, 10811, 2492, 28314, 2015, 1998, 27221, 2096, 1037, 10453, 3064, 3746, 7657, + 4218, 2009, 1010, 1996, 4446, 4857, 5582, 2127, 1996, 3746, 4324, 4550, 1012, 2224, 1035, + 2043, 1024, 5841, 1024, 7487, 1012, 6337, 1024, 3430, 4697, 1012, 102 + ] + }, + { "text": "particle-text-dissolve", "ids": [101, 10811, 1011, 3793, 1011, 21969, 102] }, + { + "text": "group: Text effects.\nwhat: Seeded particles either assemble into a crisp text line or depart from that line into a fading cloud.\nuse_when: A single text line must visibly form from particles or disintegrate into them with a left-to-right front.\navoid_when: Avoid the out direction when visible content must remain during the hold, because that direction ends on an empty stage.", + "ids": [ + 101, 2177, 1024, 3793, 3896, 1012, 2054, 1024, 13916, 9309, 2593, 21365, 2046, 1037, 15594, + 3793, 2240, 2030, 18280, 2013, 2008, 2240, 2046, 1037, 14059, 6112, 1012, 2224, 1035, 2043, + 1024, 1037, 2309, 3793, 2240, 2442, 19397, 2433, 2013, 9309, 2030, 4487, 11493, 2618, 22780, + 2046, 2068, 2007, 1037, 2187, 1011, 2000, 1011, 2157, 2392, 1012, 4468, 1035, 2043, 1024, + 4468, 1996, 2041, 3257, 2043, 5710, 4180, 2442, 3961, 2076, 1996, 2907, 1010, 2138, 2008, + 3257, 4515, 2006, 2019, 4064, 2754, 1012, 102 + ] + }, + { "text": "per-character-rise", "ids": [101, 2566, 1011, 2839, 1011, 4125, 102] }, + { + "text": "group: motion-primitive, remocn-port, typography\nwhat: Per Character Rise. Letters slide up from below with crisp, deliberate kinetic timing.", + "ids": [ + 101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939, + 6873, 12565, 2054, 1024, 2566, 2839, 4125, 1012, 4144, 7358, 2039, 2013, 2917, 2007, 15594, + 1010, 15063, 20504, 10984, 1012, 102 + ] + }, + { "text": "per-word-crossfade", "ids": [101, 2566, 1011, 2773, 1011, 2892, 7011, 3207, 102] }, + { + "text": "group: motion-primitive, remocn-port, typography\nwhat: Per-Word Crossfade. Words gently fade into place with a short vertical drift for calm keynote rhythm.", + "ids": [ + 101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939, + 6873, 12565, 2054, 1024, 2566, 1011, 2773, 2892, 7011, 3207, 1012, 2616, 5251, 12985, 2046, + 2173, 2007, 1037, 2460, 7471, 11852, 2005, 5475, 25569, 6348, 1012, 102 + ] + }, + { "text": "per-word-rise", "ids": [101, 2566, 1011, 2773, 1011, 4125, 102] }, + { + "text": "group: motion-primitive, reveal, stagger, text-effects, typography\nwhat: Per Word Rise. Words or characters rise into place in a controlled blur-to-sharp cascade, settle softly on landing, and hold still until the cut (optional fade or up exit).\nuse_when: Jobs: reveal. Profile: stagger.", + "ids": [ + 101, 2177, 1024, 4367, 1011, 10968, 1010, 7487, 1010, 2358, 27609, 1010, 3793, 1011, 3896, + 1010, 5939, 6873, 12565, 2054, 1024, 2566, 2773, 4125, 1012, 2616, 2030, 3494, 4125, 2046, + 2173, 1999, 1037, 4758, 14819, 1011, 2000, 1011, 4629, 16690, 1010, 7392, 5238, 2006, 4899, + 1010, 1998, 2907, 2145, 2127, 1996, 3013, 1006, 11887, 12985, 2030, 2039, 6164, 1007, 1012, + 2224, 1035, 2043, 1024, 5841, 1024, 7487, 1012, 6337, 1024, 2358, 27609, 1012, 102 + ] + }, + { "text": "persona-card-fan", "ids": [101, 16115, 1011, 4003, 1011, 5470, 102] }, + { + "text": "group: Card assembly.\nwhat: Four portrait cards deal onto the right side one at a time while displaced cards scale and rotate into a fixed outer wedge that tightens as it fills.\nuse_when: Options must appear beside a presenter while the deepest card stays pinned and newer cards subdivide the same fan.\navoid_when: Avoid it when portrait or square framing must be as fully composed as landscape, because those aspects are only kept inside the frame and the move is composed for 16x9.", + "ids": [ + 101, 2177, 1024, 4003, 3320, 1012, 2054, 1024, 2176, 6533, 5329, 3066, 3031, 1996, 2157, 2217, + 2028, 2012, 1037, 2051, 2096, 12936, 5329, 4094, 1998, 24357, 2046, 1037, 4964, 6058, 17632, + 2008, 21245, 2015, 2004, 2009, 17469, 1012, 2224, 1035, 2043, 1024, 7047, 2442, 3711, 3875, + 1037, 10044, 2096, 1996, 17578, 4003, 12237, 11807, 1998, 10947, 5329, 4942, 4305, 17258, + 2063, 1996, 2168, 5470, 1012, 4468, 1035, 2043, 1024, 4468, 2009, 2043, 6533, 2030, 2675, + 20241, 2442, 2022, 2004, 3929, 3605, 2004, 5957, 1010, 2138, 2216, 5919, 2024, 2069, 2921, + 2503, 1996, 4853, 1998, 1996, 2693, 2003, 3605, 2005, 2385, 2595, 2683, 1012, 102 + ] + }, + { "text": "perspective-marquee", "ids": [101, 7339, 1011, 9388, 4226, 2063, 102] }, + { + "text": "group: motion-primitive, remocn-port, typography\nwhat: Perspective Marquee. A 3D tilted marquee with depth feel as items roll toward the horizon.", + "ids": [ + 101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939, + 6873, 12565, 2054, 1024, 7339, 9388, 4226, 2063, 1012, 1037, 7605, 9939, 9388, 4226, 2063, + 2007, 5995, 2514, 2004, 5167, 4897, 2646, 1996, 9154, 1012, 102 + ] + }, + { "text": "physical-exit", "ids": [101, 3558, 1011, 6164, 102] }, + { + "text": "group: drop, exit, momentum, motion, motion-primitive, slide, toss\nwhat: Physical Exit. A card exits with physical momentum in toss, drop, or slide mode, carrying acceleration and rotation through the final offscreen pose without fading.\nuse_when: Jobs: exit. Profile: physical.", + "ids": [ + 101, 2177, 1024, 4530, 1010, 6164, 1010, 11071, 1010, 4367, 1010, 4367, 1011, 10968, 1010, + 7358, 1010, 10055, 2054, 1024, 3558, 6164, 1012, 1037, 4003, 16639, 2007, 3558, 11071, 1999, + 10055, 1010, 4530, 1010, 2030, 7358, 5549, 1010, 4755, 16264, 1998, 9963, 2083, 1996, 2345, + 12446, 24410, 13382, 2302, 14059, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 6164, 1012, 6337, + 1024, 3558, 1012, 102 + ] + }, + { "text": "pill-row-collapse", "ids": [101, 17357, 1011, 5216, 1011, 7859, 102] }, + { + "text": "group: Process sequences.\nwhat: Five labeled pills build left to right, hold for reading, then pills two through five spread and clear while the first pill glides to center and becomes active.\nuse_when: A five-stage process must narrow visibly to its first stage after all five labels have been shown together.\navoid_when: Avoid it when a label may be bisected during reveal, because the type-in clip is deliberately quantized to character boundaries.", + "ids": [ + 101, 2177, 1024, 2832, 10071, 1012, 2054, 1024, 2274, 12599, 15345, 3857, 2187, 2000, 2157, + 1010, 2907, 2005, 3752, 1010, 2059, 15345, 2048, 2083, 2274, 3659, 1998, 3154, 2096, 1996, + 2034, 17357, 21096, 2015, 2000, 2415, 1998, 4150, 3161, 1012, 2224, 1035, 2043, 1024, 1037, + 2274, 1011, 2754, 2832, 2442, 4867, 19397, 2000, 2049, 2034, 2754, 2044, 2035, 2274, 10873, + 2031, 2042, 3491, 2362, 1012, 4468, 1035, 2043, 1024, 4468, 2009, 2043, 1037, 3830, 2089, + 2022, 20377, 22471, 2098, 2076, 7487, 1010, 2138, 1996, 2828, 1011, 1999, 12528, 2003, 9969, + 24110, 23355, 2000, 2839, 7372, 1012, 102 + ] + }, + { "text": "plan-room-audit", "ids": [101, 2933, 1011, 2282, 1011, 15727, 102] }, + { + "text": "group: Annotation.\nwhat: A floor plan sheet rotates clockwise into square while its walls draw, then five rooms fill and receive leader tags in reading order.\nuse_when: A portrait floor-plan scene needs a room-by-room audit whose count stays synchronized with the filled rooms.\navoid_when: Avoid it when the shot must be natively composed for landscape, because the header states that it is native to 9x16 and composed only for that orientation.", + "ids": [ + 101, 2177, 1024, 5754, 17287, 3508, 1012, 2054, 1024, 1037, 2723, 2933, 7123, 24357, 2015, + 22839, 2046, 2675, 2096, 2049, 3681, 4009, 1010, 2059, 2274, 4734, 6039, 1998, 4374, 3003, + 22073, 1999, 3752, 2344, 1012, 2224, 1035, 2043, 1024, 1037, 6533, 2723, 1011, 2933, 3496, + 3791, 1037, 2282, 1011, 2011, 1011, 2282, 15727, 3005, 4175, 12237, 25549, 2007, 1996, 3561, + 4734, 1012, 4468, 1035, 2043, 1024, 4468, 2009, 2043, 1996, 2915, 2442, 2022, 3128, 2135, + 3605, 2005, 5957, 1010, 2138, 1996, 20346, 2163, 2008, 2009, 2003, 3128, 2000, 1023, 2595, + 16048, 1998, 3605, 2069, 2005, 2008, 10296, 1012, 102 + ] + }, + { "text": "popover", "ids": [101, 3769, 7840, 102] }, + { + "text": "group: overlay, popover, remocn-port, ui-primitive\nwhat: Popover. An Operator Black anchored popover with a matte surface and trigger-origin Soft Optical motion", + "ids": [ + 101, 2177, 1024, 2058, 8485, 1010, 3769, 7840, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, + 21318, 1011, 10968, 2054, 1024, 3769, 7840, 1012, 2019, 6872, 2304, 14453, 3769, 7840, 2007, + 1037, 4717, 2063, 3302, 1998, 9495, 1011, 4761, 3730, 9380, 4367, 102 + ] + }, + { "text": "press-ripple", "ids": [101, 2811, 1011, 24644, 102] }, + { + "text": "group: Interaction.\nwhat: A cursor decelerates onto a positioned target, compresses with it, releases two ripple rings, and exits while the pressed state remains.\nuse_when: A caller-supplied interface target needs one explicit press gesture with a visible impact and release.\navoid_when: Avoid cueing the press outside the safe gesture window, because press_at is clamped so arrival, compression, ripple, and exit all fit inside the duration.", + "ids": [ + 101, 2177, 1024, 8290, 1012, 2054, 1024, 1037, 12731, 25301, 2099, 11703, 12260, 20370, 3031, + 1037, 10959, 4539, 1010, 4012, 20110, 2229, 2007, 2009, 1010, 7085, 2048, 24644, 7635, 1010, + 1998, 16639, 2096, 1996, 4508, 2110, 3464, 1012, 2224, 1035, 2043, 1024, 1037, 20587, 1011, + 8127, 8278, 4539, 3791, 2028, 13216, 2811, 9218, 2007, 1037, 5710, 4254, 1998, 2713, 1012, + 4468, 1035, 2043, 1024, 4468, 16091, 2075, 1996, 2811, 2648, 1996, 3647, 9218, 3332, 1010, + 2138, 2811, 1035, 2012, 2003, 18597, 2061, 5508, 1010, 13379, 1010, 24644, 1010, 1998, 6164, + 2035, 4906, 2503, 1996, 9367, 1012, 102 + ] + }, + { "text": "pricing-tier-focus", "ids": [101, 20874, 1011, 7563, 1011, 3579, 102] }, + { + "text": "group: remocn-port, showcase\nwhat: Pricing Tier Focus. Pricing cards shift focus from free to pro with spotlight emphasis.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13398, 2054, 1024, 20874, 7563, + 3579, 1012, 20874, 5329, 5670, 3579, 2013, 2489, 2000, 4013, 2007, 17763, 7902, 1012, 102 + ] + }, + { "text": "progress", "ids": [101, 5082, 102] }, + { + "text": "group: progress, remocn-port, status, ui-primitive\nwhat: Progress. An Operator Black progress primitive with a mint active segment and tabular percentage value", + "ids": [ + 101, 2177, 1024, 5082, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 3570, 1010, 21318, + 1011, 10968, 2054, 1024, 5082, 1012, 2019, 6872, 2304, 5082, 10968, 2007, 1037, 12927, 3161, + 6903, 1998, 21628, 7934, 7017, 3643, 102 + ] + }, + { "text": "progress-steps", "ids": [101, 5082, 1011, 4084, 102] }, + { + "text": "group: remocn-port, ui-primitive\nwhat: Progress Steps. A vertical progress sequence with clear complete, current, and waiting states.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, 1011, 10968, 2054, 1024, + 5082, 4084, 1012, 1037, 7471, 5082, 5537, 2007, 3154, 3143, 1010, 2783, 1010, 1998, 3403, + 2163, 1012, 102 + ] + }, + { "text": "pull-back-reveal", "ids": [101, 4139, 1011, 2067, 1011, 7487, 102] }, + { + "text": "group: camera, motion-primitive, pull-back, recontextualize, reveal\nwhat: Pull Back Reveal. A tight stat detail holds, then one decelerating camera pull-back reveals the headline and supporting cards that recontextualize it.\nuse_when: Jobs: reveal. Profile: reveal.", + "ids": [ + 101, 2177, 1024, 4950, 1010, 4367, 1011, 10968, 1010, 4139, 1011, 2067, 1010, 28667, 28040, + 18413, 8787, 4697, 1010, 7487, 2054, 1024, 4139, 2067, 7487, 1012, 1037, 4389, 28093, 6987, + 4324, 1010, 2059, 2028, 11703, 12260, 15172, 4950, 4139, 1011, 2067, 7657, 1996, 17653, 1998, + 4637, 5329, 2008, 28667, 28040, 18413, 8787, 4697, 2009, 1012, 2224, 1035, 2043, 1024, 5841, + 1024, 7487, 1012, 6337, 1024, 7487, 1012, 102 + ] + }, + { "text": "pull-to-refresh", "ids": [101, 4139, 1011, 2000, 1011, 25416, 21898, 102] }, + { + "text": "group: demonstrate, gesture, interaction, mobile, pointer, pointers, refresh\nwhat: Pull to Refresh. A mobile list pulls through nonlinear rubber-band resistance, arms at a threshold, commits to a bounded loading indicator, then snaps exactly back to rest.\nuse_when: Jobs: demonstrate. Profile: interaction.", + "ids": [ + 101, 2177, 1024, 10580, 1010, 9218, 1010, 8290, 1010, 4684, 1010, 20884, 1010, 20884, 2015, + 1010, 25416, 21898, 2054, 1024, 4139, 2000, 25416, 21898, 1012, 1037, 4684, 2862, 8005, 2083, + 27400, 8903, 1011, 2316, 5012, 1010, 2608, 2012, 1037, 11207, 1010, 27791, 2000, 1037, 10351, + 10578, 17245, 1010, 2059, 20057, 3599, 2067, 2000, 2717, 1012, 2224, 1035, 2043, 1024, 5841, + 1024, 10580, 1012, 6337, 1024, 8290, 1012, 102 + ] + }, + { "text": "push-in", "ids": [101, 5245, 1011, 1999, 102] }, + { + "text": "group: camera, emphasize, focus, holdable, motion-primitive, push-in\nwhat: Push In. A centered headline gains focus through one slow, continuous camera push and a gentle fade out.\nuse_when: Jobs: emphasize. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 4950, 1010, 17902, 1010, 3579, 1010, 2907, 3085, 1010, 4367, 1011, 10968, + 1010, 5245, 1011, 1999, 2054, 1024, 5245, 1999, 1012, 1037, 8857, 17653, 12154, 3579, 2083, + 2028, 4030, 1010, 7142, 4950, 5245, 1998, 1037, 7132, 12985, 2041, 1012, 2224, 1035, 2043, + 1024, 5841, 1024, 17902, 1012, 6337, 1024, 2907, 3085, 1012, 102 + ] + }, + { "text": "radial-surround", "ids": [101, 15255, 1011, 15161, 102] }, + { + "text": "group: agitate, converge, layout, motion-primitive, problem-setup, radial, ring, surround\nwhat: Radial Surround. Labeled hairline chips assemble around a centered subject on an elliptical ring, then optionally converge inward with a subtle edge dim. The center never moves: surrounded, not zoomed.\nuse_when: Jobs: agitate. Profile: surround.", + "ids": [ + 101, 2177, 1024, 12943, 17570, 1010, 28314, 1010, 9621, 1010, 4367, 1011, 10968, 1010, 3291, + 1011, 16437, 1010, 15255, 1010, 3614, 1010, 15161, 2054, 1024, 15255, 15161, 1012, 12599, + 2606, 4179, 11772, 21365, 2105, 1037, 8857, 3395, 2006, 2019, 27213, 3614, 1010, 2059, 11887, + 2135, 28314, 20546, 2007, 1037, 11259, 3341, 11737, 1012, 1996, 2415, 2196, 5829, 1024, 5129, + 1010, 2025, 24095, 2098, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 12943, 17570, 1012, 6337, + 1024, 15161, 1012, 102 + ] + }, + { "text": "radio", "ids": [101, 2557, 102] }, + { + "text": "group: control, radio, remocn-port, ui-primitive\nwhat: Radio Group. An accessible radio group with restrained selection and active-label emphasis", + "ids": [ + 101, 2177, 1024, 2491, 1010, 2557, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, + 1011, 10968, 2054, 1024, 2557, 2177, 1012, 2019, 7801, 2557, 2177, 2007, 19868, 4989, 1998, + 3161, 1011, 3830, 7902, 102 + ] + }, + { "text": "rank-list-settle", "ids": [101, 4635, 1011, 2862, 1011, 7392, 102] }, + { + "text": "group: List assembly.\nwhat: A ranked list rolls upward under a fixed focus line, washes out passing rows, and stops with the final winning row fully lit on that line.\nuse_when: A comparison must build to one winner whose emphasis is determined by its physical position at the stop.\navoid_when: Avoid it when the winner cannot be the last row, because the geometry parks only the last row on the focus line and requires that row to carry the winner class.", + "ids": [ + 101, 2177, 1024, 2862, 3320, 1012, 2054, 1024, 1037, 4396, 2862, 9372, 10745, 2104, 1037, + 4964, 3579, 2240, 1010, 9378, 2229, 2041, 4458, 10281, 1010, 1998, 6762, 2007, 1996, 2345, + 3045, 5216, 3929, 5507, 2006, 2008, 2240, 1012, 2224, 1035, 2043, 1024, 1037, 7831, 2442, + 3857, 2000, 2028, 3453, 3005, 7902, 2003, 4340, 2011, 2049, 3558, 2597, 2012, 1996, 2644, + 1012, 4468, 1035, 2043, 1024, 4468, 2009, 2043, 1996, 3453, 3685, 2022, 1996, 2197, 5216, + 1010, 2138, 1996, 10988, 6328, 2069, 1996, 2197, 5216, 2006, 1996, 3579, 2240, 1998, 5942, + 2008, 5216, 2000, 4287, 1996, 3453, 2465, 1012, 102 + ] + }, + { "text": "receipt-card", "ids": [101, 24306, 1011, 4003, 102] }, + { + "text": "group: Card assembly.\nwhat: A tilted quote card flies in from the right, settles flat, pushes in slowly, then fills selection boxes behind one phrase while the marked words turn white.\nuse_when: A portrait quote card needs one phrase marked in place after the card has landed.\navoid_when: Avoid it when landscape must be the native composition, because the header identifies the card as 9x16 native and authors its safe zone for 9x16.", + "ids": [ + 101, 2177, 1024, 4003, 3320, 1012, 2054, 1024, 1037, 9939, 14686, 4003, 10029, 1999, 2013, + 1996, 2157, 1010, 27221, 4257, 1010, 13956, 1999, 3254, 1010, 2059, 17469, 4989, 8378, 2369, + 2028, 7655, 2096, 1996, 4417, 2616, 2735, 2317, 1012, 2224, 1035, 2043, 1024, 1037, 6533, + 14686, 4003, 3791, 2028, 7655, 4417, 1999, 2173, 2044, 1996, 4003, 2038, 5565, 1012, 4468, + 1035, 2043, 1024, 4468, 2009, 2043, 5957, 2442, 2022, 1996, 3128, 5512, 1010, 2138, 1996, + 20346, 14847, 1996, 4003, 2004, 1023, 2595, 16048, 3128, 1998, 6048, 2049, 3647, 4224, 2005, + 1023, 2595, 16048, 1012, 102 + ] + }, + { "text": "reddit-post", "ids": [101, 2417, 23194, 1011, 2695, 102] }, + { + "text": "group: overlay, reddit, social\nwhat: Reddit Post Card. Animated Reddit post card overlay with upvotes and comments", + "ids": [ + 101, 2177, 1024, 2058, 8485, 1010, 2417, 23194, 1010, 2591, 2054, 1024, 2417, 23194, 2695, + 4003, 1012, 6579, 2417, 23194, 2695, 4003, 2058, 8485, 2007, 2039, 22994, 2229, 1998, 7928, + 102 + ] + }, + { "text": "registry", "ids": [101, 15584, 102] }, + { + "text": "group: remocn-port, ui-primitive\nwhat: Registry. An Operator Black registry list for compact installable-component metadata.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, 1011, 10968, 2054, 1024, + 15584, 1012, 2019, 6872, 2304, 15584, 2862, 2005, 9233, 16500, 3085, 1011, 6922, 27425, 1012, + 102 + ] + }, + { "text": "remocn-ui", "ids": [101, 2128, 5302, 2278, 2078, 1011, 21318, 102] }, + { + "text": "group: remocn-port, ui-primitive\nwhat: Remocn UI. An Operator Black summary of the UI primitive families available in HyperFrames.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, 1011, 10968, 2054, 1024, + 2128, 5302, 2278, 2078, 21318, 1012, 2019, 6872, 2304, 12654, 1997, 1996, 21318, 10968, 2945, + 2800, 1999, 23760, 15643, 2015, 1012, 102 + ] + }, + { "text": "resizable", "ids": [101, 24501, 21335, 3468, 102] }, + { + "text": "group: layout, remocn-port, resizable, ui-primitive\nwhat: Resizable. An accessible split-pane primitive with structural edges, a keyboard-focusable handle, and deterministic resizing", + "ids": [ + 101, 2177, 1024, 9621, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 24501, 21335, 3468, + 1010, 21318, 1011, 10968, 2054, 1024, 24501, 21335, 3468, 1012, 2019, 7801, 3975, 1011, 6090, + 2063, 10968, 2007, 8332, 7926, 1010, 1037, 9019, 1011, 3579, 3085, 5047, 1010, 1998, 28283, + 25300, 10074, 24501, 6026, 102 + ] + }, + { + "text": "rgb-glitch-text", + "ids": [101, 1054, 18259, 1011, 1043, 15909, 2818, 1011, 3793, 102] + }, + { + "text": "group: motion-primitive, remocn-port, typography\nwhat: RGB Glitch Text. RGB-offset text copies jitter briefly for a controlled glitch window.", + "ids": [ + 101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939, + 6873, 12565, 2054, 1024, 1054, 18259, 1043, 15909, 2818, 3793, 1012, 1054, 18259, 1011, 16396, + 3793, 4809, 10147, 12079, 4780, 2005, 1037, 4758, 1043, 15909, 2818, 3332, 1012, 102 + ] + }, + { "text": "ridged-burn", "ids": [101, 5526, 2094, 1011, 6402, 102] }, + { + "text": "group: shader, transition\nwhat: Ridged Burn. Shader transition with ridged turbulence burn effect", + "ids": [ + 101, 2177, 1024, 8703, 2099, 1010, 6653, 2054, 1024, 5526, 2094, 6402, 1012, 8703, 2099, 6653, + 2007, 5526, 2094, 29083, 6402, 3466, 102 + ] + }, + { "text": "ripple-waves", "ids": [101, 24644, 1011, 5975, 102] }, + { + "text": "group: shader, transition\nwhat: Ripple Waves. Shader transition with concentric ripple wave distortion", + "ids": [ + 101, 2177, 1024, 8703, 2099, 1010, 6653, 2054, 1024, 24644, 5975, 1012, 8703, 2099, 6653, + 2007, 9530, 22461, 24644, 4400, 20870, 102 + ] + }, + { "text": "rolling-number", "ids": [101, 5291, 1011, 2193, 102] }, + { + "text": "group: motion-primitive, remocn-port, typography\nwhat: Rolling Number. Odometer-style number places roll at their own speed and settle exactly.", + "ids": [ + 101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939, + 6873, 12565, 2054, 1024, 5291, 2193, 1012, 1051, 26173, 3334, 1011, 2806, 2193, 3182, 4897, + 2012, 2037, 2219, 3177, 1998, 7392, 3599, 1012, 102 + ] + }, + { "text": "rubber-band-bumper", "ids": [101, 8903, 1011, 2316, 1011, 21519, 102] }, + { + "text": "group: bridge, motion-primitive, overshoot, resistance, rubber-band, transition, transitions\nwhat: Rubber Band Bumper. An outgoing panel pulls against increasing resistance, holds at tension, then snaps past an edge with overshoot as the incoming panel settles behind it.\nuse_when: Jobs: bridge. Profile: elastic.", + "ids": [ + 101, 2177, 1024, 2958, 1010, 4367, 1011, 10968, 1010, 15849, 23416, 1010, 5012, 1010, 8903, + 1011, 2316, 1010, 6653, 1010, 22166, 2054, 1024, 8903, 2316, 21519, 1012, 2019, 22011, 5997, + 8005, 2114, 4852, 5012, 1010, 4324, 2012, 6980, 1010, 2059, 20057, 2627, 2019, 3341, 2007, + 15849, 23416, 2004, 1996, 14932, 5997, 27221, 2369, 2009, 1012, 2224, 1035, 2043, 1024, 5841, + 1024, 2958, 1012, 6337, 1024, 21274, 1012, 102 + ] + }, + { "text": "scale-down-fade", "ids": [101, 4094, 1011, 2091, 1011, 12985, 102] }, + { + "text": "group: motion-primitive, remocn-port, typography\nwhat: Scale Down Fade. A restrained premium settle-in followed by scale-down fade readiness.", + "ids": [ + 101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939, + 6873, 12565, 2054, 1024, 4094, 2091, 12985, 1012, 1037, 19868, 12882, 7392, 1011, 1999, 2628, + 2011, 4094, 1011, 2091, 12985, 19822, 1012, 102 + ] + }, + { "text": "scan-band", "ids": [101, 13594, 1011, 2316, 102] }, + { + "text": "group: chromatic, distortion, effects, motion-primitive, reveal, scan, typography, wordmark\nwhat: Scan Band. A diagonal distortion band sweeps once across a clean wordmark, revealing clipped red and cyan offsets only inside the moving band.\nuse_when: Jobs: reveal. Profile: sweep.", + "ids": [ + 101, 2177, 1024, 10381, 23645, 1010, 20870, 1010, 3896, 1010, 4367, 1011, 10968, 1010, 7487, + 1010, 13594, 1010, 5939, 6873, 12565, 1010, 2773, 10665, 2054, 1024, 13594, 2316, 1012, 1037, + 19754, 20870, 2316, 26981, 2320, 2408, 1037, 4550, 2773, 10665, 1010, 8669, 20144, 2417, 1998, + 22330, 2319, 16396, 2015, 2069, 2503, 1996, 3048, 2316, 1012, 2224, 1035, 2043, 1024, 5841, + 1024, 7487, 1012, 6337, 1024, 11740, 1012, 102 + ] + }, + { "text": "scramble-reveal", "ids": [101, 25740, 1011, 7487, 102] }, + { + "text": "group: deterministic, motion-primitive, reveal, scramble, text-effects\nwhat: Scramble Reveal. A deterministic hacker-style text reveal that cycles fixed glyph rows and locks the target string from left to right.\nuse_when: Jobs: reveal. Profile: decode.", + "ids": [ + 101, 2177, 1024, 28283, 25300, 10074, 1010, 4367, 1011, 10968, 1010, 7487, 1010, 25740, 1010, + 3793, 1011, 3896, 2054, 1024, 25740, 7487, 1012, 1037, 28283, 25300, 10074, 23307, 1011, 2806, + 3793, 7487, 2008, 12709, 4964, 1043, 2135, 8458, 10281, 1998, 11223, 1996, 4539, 5164, 2013, + 2187, 2000, 2157, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 7487, 1012, 6337, 1024, 21933, + 3207, 1012, 102 + ] + }, + { "text": "screen-flow-carousel", "ids": [101, 3898, 1011, 4834, 1011, 27628, 102] }, + { + "text": "group: carousel, feature-tour, product-demo, rail, screens, slot\nwhat: Screen Flow Carousel. Two to five app screens ride a horizontal rail: one primary at center, neighbors receded, advancing on cues with a velocity-matched throw and a smooth long-tail catch while a mono caption swaps with each advance. Screens are slots with token skeleton defaults.\nuse_when: Jobs: feature-tour. Profile: carousel.", + "ids": [ + 101, 2177, 1024, 27628, 1010, 3444, 1011, 2778, 1010, 4031, 1011, 9703, 1010, 4334, 1010, + 12117, 1010, 10453, 2054, 1024, 3898, 4834, 27628, 1012, 2048, 2000, 2274, 10439, 12117, 4536, + 1037, 9876, 4334, 1024, 2028, 3078, 2012, 2415, 1010, 10638, 28667, 19082, 1010, 10787, 2006, + 23391, 2007, 1037, 10146, 1011, 10349, 5466, 1998, 1037, 5744, 2146, 1011, 5725, 4608, 2096, + 1037, 18847, 14408, 3258, 19948, 2015, 2007, 2169, 5083, 1012, 12117, 2024, 19832, 2007, + 19204, 13526, 12398, 2015, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 3444, 1011, 2778, 1012, + 6337, 1024, 27628, 1012, 102 + ] + }, + { "text": "scroll-area", "ids": [101, 17186, 1011, 2181, 102] }, + { + "text": "group: layout, remocn-port, scroll-area, ui-primitive\nwhat: Scroll Area. A focused matte viewport with spacing-led list content and synchronized seek-safe scrollbar motion", + "ids": [ + 101, 2177, 1024, 9621, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 17186, 1011, 2181, + 1010, 21318, 1011, 10968, 2054, 1024, 17186, 2181, 1012, 1037, 4208, 4717, 2063, 3193, 6442, + 2007, 12403, 6129, 1011, 2419, 2862, 4180, 1998, 25549, 6148, 1011, 3647, 17186, 8237, 4367, + 102 + ] + }, + { "text": "scroll-camera-story", "ids": [101, 17186, 1011, 4950, 1011, 2466, 102] }, + { + "text": "group: camera, demonstrate, parallax, scroll, sections, servo, slot, story\nwhat: Scroll Camera Story. A compressed forced-scroll cinematic pass: a tall scene of slotted sections travels past the camera top to bottom, depth layers parallax at different rates, each section rises as the camera reaches it, and the pass decelerates into a held final section.\nuse_when: Jobs: demonstrate. Profile: camera.", + "ids": [ + 101, 2177, 1024, 4950, 1010, 10580, 1010, 11498, 4571, 2595, 1010, 17186, 1010, 5433, 1010, + 14262, 6767, 1010, 10453, 1010, 2466, 2054, 1024, 17186, 4950, 2466, 1012, 1037, 16620, 3140, + 1011, 17186, 21014, 3413, 1024, 1037, 4206, 3496, 1997, 10453, 3064, 5433, 7930, 2627, 1996, + 4950, 2327, 2000, 3953, 1010, 5995, 9014, 11498, 4571, 2595, 2012, 2367, 6165, 1010, 2169, + 2930, 9466, 2004, 1996, 4950, 6561, 2009, 1010, 1998, 1996, 3413, 11703, 12260, 20370, 2046, + 1037, 2218, 2345, 2930, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 10580, 1012, 6337, 1024, + 4950, 1012, 102 + ] + }, + { "text": "scroll-feed", "ids": [101, 17186, 1011, 5438, 102] }, + { + "text": "group: agitation, demonstrate, effects, feed, loop, motion-primitive, scroll\nwhat: Scroll Feed. A loop-friendly column of varied skeleton post cards scrolls upward with subtle motion trails and an agitated pace.\nuse_when: Jobs: demonstrate. Profile: continuous.", + "ids": [ + 101, 2177, 1024, 22356, 1010, 10580, 1010, 3896, 1010, 5438, 1010, 7077, 1010, 4367, 1011, + 10968, 1010, 17186, 2054, 1024, 17186, 5438, 1012, 1037, 7077, 1011, 5379, 5930, 1997, 9426, + 13526, 2695, 5329, 23074, 10745, 2007, 11259, 4367, 9612, 1998, 2019, 21568, 6393, 1012, 2224, + 1035, 2043, 1024, 5841, 1024, 10580, 1012, 6337, 1024, 7142, 1012, 102 + ] + }, + { "text": "sdf-iris", "ids": [101, 17371, 2546, 1011, 11173, 102] }, + { + "text": "group: shader, transition\nwhat: SDF Iris. Shader transition with signed distance field iris reveal", + "ids": [ + 101, 2177, 1024, 8703, 2099, 1010, 6653, 2054, 1024, 17371, 2546, 11173, 1012, 8703, 2099, + 6653, 2007, 2772, 3292, 2492, 11173, 7487, 102 + ] + }, + { "text": "segmentation-flood", "ids": [101, 6903, 3370, 1011, 7186, 102] }, + { + "text": "group: ai, canvas, demonstrate, deterministic, experiment, hud, motion-primitive, product-demo\nwhat: Segmentation Flood. Machine-vision read of a slotted subject: translucent accent segmentation masks flood on in quantized scanline steps, each region gets a thin bracket and mono label chip, a deterministic 2-frame HUD flicker rides the pass, then the labeled read settles clean.\nuse_when: Jobs: demonstrate. Profile: machine-read.", + "ids": [ + 101, 2177, 1024, 9932, 1010, 10683, 1010, 10580, 1010, 28283, 25300, 10074, 1010, 7551, 1010, + 15876, 2094, 1010, 4367, 1011, 10968, 1010, 4031, 1011, 9703, 2054, 1024, 6903, 3370, 7186, + 1012, 3698, 1011, 4432, 3191, 1997, 1037, 10453, 3064, 3395, 1024, 22897, 9669, 6903, 3370, + 15806, 7186, 2006, 1999, 24110, 23355, 13594, 4179, 4084, 1010, 2169, 2555, 4152, 1037, 4857, + 21605, 1998, 18847, 3830, 9090, 1010, 1037, 28283, 25300, 10074, 1016, 1011, 4853, 15876, + 2094, 17909, 12271, 1996, 3413, 1010, 2059, 1996, 12599, 3191, 27221, 4550, 1012, 2224, 1035, + 2043, 1024, 5841, 1024, 10580, 1012, 6337, 1024, 3698, 1011, 3191, 1012, 102 + ] + }, + { "text": "select", "ids": [101, 7276, 102] }, + { + "text": "group: control, remocn-port, select, ui-primitive\nwhat: Select. An origin-aware select with a matte menu and explicit selected option", + "ids": [ + 101, 2177, 1024, 2491, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 7276, 1010, 21318, + 1011, 10968, 2054, 1024, 7276, 1012, 2019, 4761, 1011, 5204, 7276, 2007, 1037, 4717, 2063, + 12183, 1998, 13216, 3479, 5724, 102 + ] + }, + { "text": "select-item", "ids": [101, 7276, 1011, 8875, 102] }, + { + "text": "group: remocn-port, ui-primitive\nwhat: Select Item. A compact option list with selection check, technical hints, and disabled state.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, 1011, 10968, 2054, 1024, + 7276, 8875, 1012, 1037, 9233, 5724, 2862, 2007, 4989, 4638, 1010, 4087, 20385, 1010, 1998, + 9776, 2110, 1012, 102 + ] + }, + { "text": "separator", "ids": [101, 19802, 25879, 2953, 102] }, + { + "text": "group: layout, remocn-port, separator, ui-primitive\nwhat: Separator. A one-pixel structural separator with horizontal and vertical variants plus a seek-safe progress reveal", + "ids": [ + 101, 2177, 1024, 9621, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 19802, 25879, 2953, + 1010, 21318, 1011, 10968, 2054, 1024, 19802, 25879, 2953, 1012, 1037, 2028, 1011, 22138, 8332, + 19802, 25879, 2953, 2007, 9876, 1998, 7471, 10176, 4606, 1037, 6148, 1011, 3647, 5082, 7487, + 102 + ] + }, + { "text": "settings-toggle-flow", "ids": [101, 10906, 1011, 2000, 24679, 1011, 4834, 102] }, + { + "text": "group: remocn-port, settings, toggle, ui-flow\nwhat: Settings Toggle Flow. A composed settings flow with preference rows, toggle switches, and active-state feedback", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 10906, 1010, 2000, 24679, 1010, + 21318, 1011, 4834, 2054, 1024, 10906, 2000, 24679, 4834, 1012, 1037, 3605, 10906, 4834, 2007, + 12157, 10281, 1010, 2000, 24679, 15924, 1010, 1998, 3161, 1011, 2110, 12247, 102 + ] + }, + { "text": "shader-displacement-panel", "ids": [101, 8703, 2099, 1011, 13508, 1011, 5997, 102] }, + { + "text": "group: advanced-motion, hyperframes-native\nwhat: Shader Displacement Panel. A CSS/WebGL-inspired displacement panel for premium scene reveals without a custom shader dependency.", + "ids": [ + 101, 2177, 1024, 3935, 1011, 4367, 1010, 23760, 15643, 2015, 1011, 3128, 2054, 1024, 8703, + 2099, 13508, 5997, 1012, 1037, 20116, 2015, 1013, 4773, 23296, 1011, 4427, 13508, 5997, 2005, + 12882, 3496, 7657, 2302, 1037, 7661, 8703, 2099, 24394, 1012, 102 + ] + }, + { "text": "shared-axis-y", "ids": [101, 4207, 1011, 8123, 1011, 1061, 102] }, + { + "text": "group: motion-primitive, remocn-port, typography\nwhat: Shared Axis Y. Per-word vertical shared-axis transition for sharp editorial swaps.", + "ids": [ + 101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939, + 6873, 12565, 2054, 1024, 4207, 8123, 1061, 1012, 2566, 1011, 2773, 7471, 4207, 1011, 8123, + 6653, 2005, 4629, 8368, 19948, 2015, 1012, 102 + ] + }, + { "text": "shared-axis-z", "ids": [101, 4207, 1011, 8123, 1011, 1062, 102] }, + { + "text": "group: motion-primitive, remocn-port, typography\nwhat: Shared Axis Z. Scale-based shared-axis transition for focus shifts and context depth.", + "ids": [ + 101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939, + 6873, 12565, 2054, 1024, 4207, 8123, 1062, 1012, 4094, 1011, 2241, 4207, 1011, 8123, 6653, + 2005, 3579, 12363, 1998, 6123, 5995, 1012, 102 + ] + }, + { "text": "sheet", "ids": [101, 7123, 102] }, + { + "text": "group: overlay, remocn-port, sheet, ui-primitive\nwhat: Sheet. An Operator Black side sheet with a flat backdrop and right-edge Soft Optical motion", + "ids": [ + 101, 2177, 1024, 2058, 8485, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 7123, 1010, + 21318, 1011, 10968, 2054, 1024, 7123, 1012, 2019, 6872, 2304, 2217, 7123, 2007, 1037, 4257, + 18876, 1998, 2157, 1011, 3341, 3730, 9380, 4367, 102 + ] + }, + { "text": "shimmer-sweep", "ids": [101, 11895, 15810, 1011, 11740, 102] }, + { + "text": "group: effect, highlight, shimmer, text\nwhat: Shimmer Sweep. Animated light sweep across text or elements using a CSS gradient mask, ideal for accents and premium reveals", + "ids": [ + 101, 2177, 1024, 3466, 1010, 12944, 1010, 11895, 15810, 1010, 3793, 2054, 1024, 11895, 15810, + 11740, 1012, 6579, 2422, 11740, 2408, 3793, 2030, 3787, 2478, 1037, 20116, 2015, 17978, 7308, + 1010, 7812, 2005, 24947, 1998, 12882, 7657, 102 + ] + }, + { "text": "short-slide-down", "ids": [101, 2460, 1011, 7358, 1011, 2091, 102] }, + { + "text": "group: motion-primitive, remocn-port, typography\nwhat: Short Slide Down. New words drop from above and push the stack downward into a locked composition.", + "ids": [ + 101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939, + 6873, 12565, 2054, 1024, 2460, 7358, 2091, 1012, 2047, 2616, 4530, 2013, 2682, 1998, 5245, + 1996, 9991, 14047, 2046, 1037, 5299, 5512, 1012, 102 + ] + }, + { "text": "short-slide-right", "ids": [101, 2460, 1011, 7358, 1011, 2157, 102] }, + { + "text": "group: motion-primitive, remocn-port, typography\nwhat: Short Slide Right. The phrase glides in from the left while words reveal in sequence.", + "ids": [ + 101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939, + 6873, 12565, 2054, 1024, 2460, 7358, 2157, 1012, 1996, 7655, 21096, 2015, 1999, 2013, 1996, + 2187, 2096, 2616, 7487, 1999, 5537, 1012, 102 + ] + }, + { "text": "sidebar", "ids": [101, 2217, 8237, 102] }, + { + "text": "group: navigation, remocn-port, sidebar, ui-primitive\nwhat: Sidebar. A single-plane sidebar with spacious link rhythm, logical-start selection, and soft deterministic entry motion", + "ids": [ + 101, 2177, 1024, 9163, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 2217, 8237, 1010, + 21318, 1011, 10968, 2054, 1024, 2217, 8237, 1012, 1037, 2309, 1011, 4946, 2217, 8237, 2007, + 22445, 4957, 6348, 1010, 11177, 1011, 2707, 4989, 1010, 1998, 3730, 28283, 25300, 10074, 4443, + 4367, 102 + ] + }, + { "text": "signup-flow", "ids": [101, 3696, 6279, 1011, 4834, 102] }, + { + "text": "group: form, remocn-port, signup, ui-flow\nwhat: Signup Flow. A composed signup flow with social action, email field, password field, and submit button", + "ids": [ + 101, 2177, 1024, 2433, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 3696, 6279, 1010, + 21318, 1011, 4834, 2054, 1024, 3696, 6279, 4834, 1012, 1037, 3605, 3696, 6279, 4834, 2007, + 2591, 2895, 1010, 10373, 2492, 1010, 20786, 2492, 1010, 1998, 12040, 6462, 102 + ] + }, + { "text": "simulated-cursor", "ids": [101, 23599, 1011, 12731, 25301, 2099, 102] }, + { + "text": "group: cursor, motion-primitive, ui, walkthrough\nwhat: Simulated Cursor. A lightweight cursor pointer and click pulse for product walkthroughs and agent UI demos", + "ids": [ + 101, 2177, 1024, 12731, 25301, 2099, 1010, 4367, 1011, 10968, 1010, 21318, 1010, 3328, 2705, + 22494, 5603, 2054, 1024, 23599, 12731, 25301, 2099, 1012, 1037, 12038, 12731, 25301, 2099, + 20884, 1998, 11562, 8187, 2005, 4031, 3328, 2705, 22494, 5603, 2015, 1998, 4005, 21318, 18267, + 102 + ] + }, + { "text": "skeleton", "ids": [101, 13526, 102] }, + { + "text": "group: loading, remocn-port, skeleton, ui-primitive\nwhat: Skeleton. An Operator Black loading skeleton using deterministic solid layers instead of gradient shimmer", + "ids": [ + 101, 2177, 1024, 10578, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13526, 1010, 21318, + 1011, 10968, 2054, 1024, 13526, 1012, 2019, 6872, 2304, 10578, 13526, 2478, 28283, 25300, + 10074, 5024, 9014, 2612, 1997, 17978, 11895, 15810, 102 + ] + }, + { "text": "skeleton-block", "ids": [101, 13526, 1011, 3796, 102] }, + { + "text": "group: remocn-port, ui-primitive\nwhat: Skeleton Block. An Operator Black skeleton block built from deterministic solid loading rows.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21318, 1011, 10968, 2054, 1024, + 13526, 3796, 1012, 2019, 6872, 2304, 13526, 3796, 2328, 2013, 28283, 25300, 10074, 5024, + 10578, 10281, 1012, 102 + ] + }, + { "text": "skeleton-reveal", "ids": [101, 13526, 1011, 7487, 102] }, + { + "text": "group: reveal, skeleton, transition-primitive, transitions-dev-port\nwhat: Skeleton Reveal. A skeleton loader transition that pulses, then cross-fades into content", + "ids": [ + 101, 2177, 1024, 7487, 1010, 13526, 1010, 6653, 1011, 10968, 1010, 22166, 1011, 16475, 1011, + 3417, 2054, 1024, 13526, 7487, 1012, 1037, 13526, 7170, 2121, 6653, 2008, 23894, 1010, 2059, + 2892, 1011, 26784, 2046, 4180, 102 + ] + }, + { "text": "slider", "ids": [101, 7358, 2099, 102] }, + { + "text": "group: control, remocn-port, slider, ui-primitive\nwhat: Slider. An accessible slider with semantic progress fill, physical thumb, and value readout", + "ids": [ + 101, 2177, 1024, 2491, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 7358, 2099, 1010, + 21318, 1011, 10968, 2054, 1024, 7358, 2099, 1012, 2019, 7801, 7358, 2099, 2007, 21641, 5082, + 6039, 1010, 3558, 7639, 1010, 1998, 3643, 3191, 5833, 102 + ] + }, + { "text": "slit-scan-reveal", "ids": [101, 18036, 1011, 13594, 1011, 7487, 102] }, + { + "text": "group: canvas, deterministic, experiment, motion-primitive, reveal, slit-scan, time\nwhat: Slit Scan Reveal. The frame's rows sample an authored subject at offset times: a canvas painter draws row slices of one pure position function evaluated at t minus offset(row), smearing arrival through time until the offsets collapse to zero and the mark holds coherent.\nuse_when: Jobs: reveal. Profile: time-smear.", + "ids": [ + 101, 2177, 1024, 10683, 1010, 28283, 25300, 10074, 1010, 7551, 1010, 4367, 1011, 10968, 1010, + 7487, 1010, 18036, 1011, 13594, 1010, 2051, 2054, 1024, 18036, 13594, 7487, 1012, 1996, 4853, + 1005, 1055, 10281, 7099, 2019, 8786, 3395, 2012, 16396, 2335, 1024, 1037, 10683, 5276, 9891, + 5216, 25609, 1997, 2028, 5760, 2597, 3853, 16330, 2012, 1056, 15718, 16396, 1006, 5216, 1007, + 1010, 15488, 27242, 5508, 2083, 2051, 2127, 1996, 16396, 2015, 7859, 2000, 5717, 1998, 1996, + 2928, 4324, 18920, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 7487, 1012, 6337, 1024, 2051, + 1011, 15488, 14644, 1012, 102 + ] + }, + { "text": "slot-machine-roll", "ids": [101, 10453, 1011, 3698, 1011, 4897, 102] }, + { + "text": "group: motion-primitive, remocn-port, typography\nwhat: Slot Machine Roll. A vertical reel scrolls characters from one value to another.", + "ids": [ + 101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939, + 6873, 12565, 2054, 1024, 10453, 3698, 4897, 1012, 1037, 7471, 15934, 23074, 3494, 2013, 2028, + 3643, 2000, 2178, 1012, 102 + ] + }, + { "text": "soft-blob-touch", "ids": [101, 3730, 1011, 1038, 4135, 2497, 1011, 3543, 102] }, + { + "text": "group: blob, demonstrate, grain, material, motion-primitive, product-demo, touch\nwhat: Soft Blob Touch. A granular soft blob idles with slow internal drift; a scripted touch dot decel-arrives, the blob deforms toward it with an attraction bulge, then recovers with a velocity-preserving spring. No hard edges anywhere.\nuse_when: Jobs: demonstrate. Profile: material.", + "ids": [ + 101, 2177, 1024, 1038, 4135, 2497, 1010, 10580, 1010, 8982, 1010, 3430, 1010, 4367, 1011, + 10968, 1010, 4031, 1011, 9703, 1010, 3543, 2054, 1024, 3730, 1038, 4135, 2497, 3543, 1012, + 1037, 12604, 7934, 3730, 1038, 4135, 2497, 18373, 2015, 2007, 4030, 4722, 11852, 1025, 1037, + 22892, 3543, 11089, 11703, 2884, 1011, 8480, 1010, 1996, 1038, 4135, 2497, 13366, 2953, 5244, + 2646, 2009, 2007, 2019, 8432, 23708, 1010, 2059, 8980, 2015, 2007, 1037, 10146, 1011, 15224, + 3500, 1012, 2053, 2524, 7926, 5973, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 10580, 1012, + 6337, 1024, 3430, 1012, 102 + ] + }, + { "text": "soft-blur-in", "ids": [101, 3730, 1011, 14819, 1011, 1999, 102] }, + { + "text": "group: blur, motion-primitive, reveal, text\nwhat: Soft Blur In. A soft opacity, blur, and lift reveal for headlines, captions, and product UI callouts", + "ids": [ + 101, 2177, 1024, 14819, 1010, 4367, 1011, 10968, 1010, 7487, 1010, 3793, 2054, 1024, 3730, + 14819, 1999, 1012, 1037, 3730, 6728, 6305, 3012, 1010, 14819, 1010, 1998, 6336, 7487, 2005, + 19377, 1010, 14408, 8496, 1010, 1998, 4031, 21318, 2655, 12166, 102 + ] + }, + { "text": "spain-map", "ids": [101, 3577, 1011, 4949, 102] }, + { + "text": "group: choropleth, data, europe, geography, map, spain\nwhat: Spain Map. Animated Spain choropleth by autonomous community with staggered reveals and gradient legend, D3 conic conformal projection", + "ids": [ + 101, 2177, 1024, 16480, 18981, 7485, 2232, 1010, 2951, 1010, 2885, 1010, 10505, 1010, 4949, + 1010, 3577, 2054, 1024, 3577, 4949, 1012, 6579, 3577, 16480, 18981, 7485, 2232, 2011, 8392, + 2451, 2007, 14648, 7657, 1998, 17978, 5722, 1010, 1040, 2509, 9530, 2594, 23758, 2389, 13996, + 102 + ] + }, + { "text": "spatial-push", "ids": [101, 13589, 1011, 5245, 102] }, + { + "text": "group: remocn-port, transition-primitive\nwhat: Spatial Push. A physical depth transition that presses the old scene backward.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 6653, 1011, 10968, 2054, 1024, + 13589, 5245, 1012, 1037, 3558, 5995, 6653, 2008, 14616, 1996, 2214, 3496, 8848, 1012, 102 + ] + }, + { "text": "spinner", "ids": [101, 6714, 3678, 102] }, + { + "text": "group: loading, remocn-port, spinner, ui-primitive\nwhat: Spinner. An Operator Black finite loading spinner with a 1.5px progress ring and status label", + "ids": [ + 101, 2177, 1024, 10578, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 6714, 3678, 1010, + 21318, 1011, 10968, 2054, 1024, 6714, 3678, 1012, 2019, 6872, 2304, 10713, 10578, 6714, 3678, + 2007, 1037, 1015, 1012, 1019, 2361, 2595, 5082, 3614, 1998, 3570, 3830, 102 + ] + }, + { "text": "split-tilt-cards", "ids": [101, 3975, 1011, 17010, 1011, 5329, 102] }, + { + "text": "group: book-open, compare, holdable, layout, motion-primitive, slots, tilt\nwhat: Split Tilt Cards. Two equal-weight cards arrive from opposite wings with mirrored rotateY book-open tilts under one shared perspective, pill badges spring-pop at each inner edge, and the pair holds with a barely-there phase-opposed idle float. Card bodies are content slots with token skeleton defaults.\nuse_when: Jobs: compare. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 2338, 1011, 2330, 1010, 12826, 1010, 2907, 3085, 1010, 9621, 1010, 4367, + 1011, 10968, 1010, 19832, 1010, 17010, 2054, 1024, 3975, 17010, 5329, 1012, 2048, 5020, 1011, + 3635, 5329, 7180, 2013, 4500, 4777, 2007, 22243, 24357, 2100, 2338, 1011, 2330, 17010, 2015, + 2104, 2028, 4207, 7339, 1010, 17357, 23433, 3500, 1011, 3769, 2012, 2169, 5110, 3341, 1010, + 1998, 1996, 3940, 4324, 2007, 1037, 4510, 1011, 2045, 4403, 1011, 4941, 18373, 14257, 1012, + 4003, 4230, 2024, 4180, 19832, 2007, 19204, 13526, 12398, 2015, 1012, 2224, 1035, 2043, 1024, + 5841, 1024, 12826, 1012, 6337, 1024, 2907, 3085, 1012, 102 + ] + }, + { "text": "spotify-card", "ids": [101, 3962, 8757, 1011, 4003, 102] }, + { + "text": "group: overlay, social, spotify\nwhat: Spotify Now Playing. Animated Spotify now-playing card with album art and progress bar", + "ids": [ + 101, 2177, 1024, 2058, 8485, 1010, 2591, 1010, 3962, 8757, 2054, 1024, 3962, 8757, 2085, 2652, + 1012, 6579, 3962, 8757, 2085, 1011, 2652, 4003, 2007, 2201, 2396, 1998, 5082, 3347, 102 + ] + }, + { "text": "spotlight-card", "ids": [101, 17763, 1011, 4003, 102] }, + { + "text": "group: effect, remocn-port\nwhat: Spotlight Card. A card with a scripted cursor spotlight and lit border.", + "ids": [ + 101, 2177, 1024, 3466, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 2054, 1024, 17763, 4003, + 1012, 1037, 4003, 2007, 1037, 22892, 12731, 25301, 2099, 17763, 1998, 5507, 3675, 1012, 102 + ] + }, + { "text": "spring-pop", "ids": [101, 3500, 1011, 3769, 102] }, + { + "text": "group: effects, motion-primitive, overshoot, pop, reveal, spring\nwhat: Spring Pop. A badge pops in from a visible near-rest scale, overshoots full size once, and settles cleanly.\nuse_when: Jobs: reveal. Profile: burst.", + "ids": [ + 101, 2177, 1024, 3896, 1010, 4367, 1011, 10968, 1010, 15849, 23416, 1010, 3769, 1010, 7487, + 1010, 3500, 2054, 1024, 3500, 3769, 1012, 1037, 10780, 16949, 1999, 2013, 1037, 5710, 2379, + 1011, 2717, 4094, 1010, 15849, 23416, 2015, 2440, 2946, 2320, 1010, 1998, 27221, 4550, 2135, + 1012, 2224, 1035, 2043, 1024, 5841, 1024, 7487, 1012, 6337, 1024, 6532, 1012, 102 + ] + }, + { "text": "spring-scale-in", "ids": [101, 3500, 1011, 4094, 1011, 1999, 102] }, + { + "text": "group: motion-primitive, remocn-port, typography\nwhat: Spring Scale In. Words pop in with soft overshoot scale like a physical spring settling.", + "ids": [ + 101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939, + 6873, 12565, 2054, 1024, 3500, 4094, 1999, 1012, 2616, 3769, 1999, 2007, 3730, 15849, 23416, + 4094, 2066, 1037, 3558, 3500, 9853, 1012, 102 + ] + }, + { "text": "spring-stack-shuffle", "ids": [101, 3500, 1011, 9991, 1011, 23046, 102] }, + { + "text": "group: demonstrate, interruptible-spring, motion-primitive, physics, product-demo, stack\nwhat: Spring Stack Shuffle. A stack of 3 to 5 slotted cards reshuffles on cues: the back card throws over the top and lands at the front with real mass, the rest compress and resettle; cues that land mid-flight redirect the moving cards with velocity preserved.\nuse_when: Jobs: demonstrate. Profile: stack.", + "ids": [ + 101, 2177, 1024, 10580, 1010, 17938, 7028, 1011, 3500, 1010, 4367, 1011, 10968, 1010, 5584, + 1010, 4031, 1011, 9703, 1010, 9991, 2054, 1024, 3500, 9991, 23046, 1012, 1037, 9991, 1997, + 1017, 2000, 1019, 10453, 3064, 5329, 24501, 6979, 18142, 2015, 2006, 23391, 1024, 1996, 2067, + 4003, 11618, 2058, 1996, 2327, 1998, 4915, 2012, 1996, 2392, 2007, 2613, 3742, 1010, 1996, + 2717, 4012, 20110, 1998, 25141, 9286, 1025, 23391, 2008, 2455, 3054, 1011, 3462, 2417, 7442, + 6593, 1996, 3048, 5329, 2007, 10146, 6560, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 10580, + 1012, 6337, 1024, 9991, 1012, 102 + ] + }, + { "text": "stagger-cascade", "ids": [101, 2358, 27609, 1011, 16690, 102] }, + { + "text": "group: effects, entrance, exhibit, grid, stagger\nwhat: Stagger Cascade. A responsive grid of tile cards that fades and travels into place with an evenly spaced per-item GSAP stagger. The ordered cascade is the only visual mechanic.\nuse_when: Jobs: exhibit. Profile: burst.", + "ids": [ + 101, 2177, 1024, 3896, 1010, 4211, 1010, 8327, 1010, 8370, 1010, 2358, 27609, 2054, 1024, + 2358, 27609, 16690, 1012, 1037, 26651, 8370, 1997, 14090, 5329, 2008, 26784, 1998, 7930, 2046, + 2173, 2007, 2019, 18030, 19835, 2566, 1011, 8875, 28177, 9331, 2358, 27609, 1012, 1996, 3641, + 16690, 2003, 1996, 2069, 5107, 15893, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 8327, 1012, + 6337, 1024, 6532, 1012, 102 + ] + }, + { "text": "stagger-lattice", "ids": [101, 2358, 27609, 1011, 17779, 102] }, + { + "text": "group: advanced-motion, anime-inspired, hyperframes-native\nwhat: Stagger Lattice. A staggered grid reveal inspired by Anime.js v4 stagger utilities, implemented with GSAP for HyperFrames.", + "ids": [ + 101, 2177, 1024, 3935, 1011, 4367, 1010, 8750, 1011, 4427, 1010, 23760, 15643, 2015, 1011, + 3128, 2054, 1024, 2358, 27609, 17779, 1012, 1037, 14648, 8370, 7487, 4427, 2011, 8750, 1012, + 1046, 2015, 1058, 2549, 2358, 27609, 16548, 1010, 7528, 2007, 28177, 9331, 2005, 23760, 15643, + 2015, 1012, 102 + ] + }, + { "text": "staggered-fade-up", "ids": [101, 14648, 1011, 12985, 1011, 2039, 102] }, + { + "text": "group: motion-primitive, remocn-port, typography\nwhat: Staggered Fade Up. Words fade in and slide up one after another with configurable delay.", + "ids": [ + 101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939, + 6873, 12565, 2054, 1024, 14648, 12985, 2039, 1012, 2616, 12985, 1999, 1998, 7358, 2039, 2028, + 2044, 2178, 2007, 9530, 8873, 27390, 3085, 8536, 1012, 102 + ] + }, + { "text": "star-rating-fill", "ids": [101, 2732, 1011, 5790, 1011, 6039, 102] }, + { + "text": "group: data, fill, fractional, prove, rating, stars\nwhat: Star Rating Fill. A token-driven star row whose colored layer sweeps to a rating, preserves the fractional final star, and can count the value in sync.\nuse_when: Jobs: prove. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 2951, 1010, 6039, 1010, 12884, 2389, 1010, 6011, 1010, 5790, 1010, 3340, + 2054, 1024, 2732, 5790, 6039, 1012, 1037, 19204, 1011, 5533, 2732, 5216, 3005, 6910, 6741, + 26981, 2000, 1037, 5790, 1010, 18536, 1996, 12884, 2389, 2345, 2732, 1010, 1998, 2064, 4175, + 1996, 3643, 1999, 26351, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 6011, 1012, 6337, 1024, + 2907, 3085, 1012, 102 + ] + }, + { "text": "state-chip-rail", "ids": [101, 2110, 1011, 9090, 1011, 4334, 102] }, + { + "text": "group: Process sequences.\nwhat: A row of status chips snaps through ordered states on scheduled cues while active, completed, and pending chips take distinct appearances.\nuse_when: A discrete state machine needs seek-exact, instantaneous advances and optional badges beside one activated state.\navoid_when: Avoid it when more than eight states or more than four badges are required, because extra states are dropped and badges are capped at four.", + "ids": [ + 101, 2177, 1024, 2832, 10071, 1012, 2054, 1024, 1037, 5216, 1997, 3570, 11772, 20057, 2083, + 3641, 2163, 2006, 5115, 23391, 2096, 3161, 1010, 2949, 1010, 1998, 14223, 11772, 2202, 5664, + 3922, 1012, 2224, 1035, 2043, 1024, 1037, 16246, 2110, 3698, 3791, 6148, 1011, 6635, 1010, + 7107, 17191, 9849, 1998, 11887, 23433, 3875, 2028, 8878, 2110, 1012, 4468, 1035, 2043, 1024, + 4468, 2009, 2043, 2062, 2084, 2809, 2163, 2030, 2062, 2084, 2176, 23433, 2024, 3223, 1010, + 2138, 4469, 2163, 2024, 3333, 1998, 23433, 2024, 13880, 2012, 2176, 1012, 102 + ] + }, + { "text": "stepper", "ids": [101, 29096, 2099, 102] }, + { + "text": "group: progress, remocn-port, stepper, ui-primitive\nwhat: Stepper. A horizontal stepper with numbered milestones, semantic progress, and current-step emphasis", + "ids": [ + 101, 2177, 1024, 5082, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 29096, 2099, 1010, + 21318, 1011, 10968, 2054, 1024, 29096, 2099, 1012, 1037, 9876, 29096, 2099, 2007, 8597, 19199, + 2015, 1010, 21641, 5082, 1010, 1998, 2783, 1011, 3357, 7902, 102 + ] + }, + { "text": "sticky-mock-swap", "ids": [101, 15875, 1011, 12934, 1011, 19948, 102] }, + { + "text": "group: crossfade, demonstrate, feature-tour, mock, motion-primitive, product-demo, sticky\nwhat: Sticky Mock Swap. A pinned product mock cross-fades through accent-tinted feature states while matching captions rise, hold, and exit beside it.\nuse_when: Jobs: demonstrate. Profile: sticky-swap.", + "ids": [ + 101, 2177, 1024, 2892, 7011, 3207, 1010, 10580, 1010, 3444, 1011, 2778, 1010, 12934, 1010, + 4367, 1011, 10968, 1010, 4031, 1011, 9703, 1010, 15875, 2054, 1024, 15875, 12934, 19948, 1012, + 1037, 11807, 4031, 12934, 2892, 1011, 26784, 2083, 9669, 1011, 25577, 3444, 2163, 2096, 9844, + 14408, 8496, 4125, 1010, 2907, 1010, 1998, 6164, 3875, 2009, 1012, 2224, 1035, 2043, 1024, + 5841, 1024, 10580, 1012, 6337, 1024, 15875, 1011, 19948, 1012, 102 + ] + }, + { "text": "stitched-text-draw", "ids": [101, 26035, 2098, 1011, 3793, 1011, 4009, 102] }, + { + "text": "group: craft, deterministic, experiment, motion-primitive, reveal, stitch, text-effects, type\nwhat: Stitched Text Draw. Text drawn as thread stitches: a single-stroke display alphabet draws via attribute-driven dashoffset with stitch-tuned dash patterns, seeded angle jitter, needle-hole dots, a leading needle, and a thread-tail overshoot per letter.\nuse_when: Jobs: reveal. Profile: thread-stitch.", + "ids": [ + 101, 2177, 1024, 7477, 1010, 28283, 25300, 10074, 1010, 7551, 1010, 4367, 1011, 10968, 1010, + 7487, 1010, 26035, 1010, 3793, 1011, 3896, 1010, 2828, 2054, 1024, 26035, 2098, 3793, 4009, + 1012, 3793, 4567, 2004, 11689, 25343, 1024, 1037, 2309, 1011, 6909, 4653, 12440, 9891, 3081, + 17961, 1011, 5533, 11454, 27475, 3388, 2007, 26035, 1011, 15757, 11454, 7060, 1010, 13916, + 6466, 10147, 12079, 1010, 12201, 1011, 4920, 14981, 1010, 1037, 2877, 12201, 1010, 1998, 1037, + 11689, 1011, 5725, 15849, 23416, 2566, 3661, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 7487, + 1012, 6337, 1024, 11689, 1011, 26035, 1012, 102 + ] + }, + { "text": "stop-motion-cadence", "ids": [101, 2644, 1011, 4367, 1011, 23620, 102] }, + { + "text": "group: boil, demonstrate, deterministic, experiment, motion-primitive, stepped, stop-motion, time-law\nwhat: Stop Motion Cadence. The stepped-time law as a demo primitive: one driver quantizes timeline time to floor(t * fps) / fps and feeds ALL motion; four token paper-cut shapes throw-and-land with squash on hits, 2-frame boil jitter seeded per step, and sparkle accents living exactly 2 to 3 frames.\nuse_when: Jobs: demonstrate. Profile: stepped-time.", + "ids": [ + 101, 2177, 1024, 26077, 1010, 10580, 1010, 28283, 25300, 10074, 1010, 7551, 1010, 4367, 1011, + 10968, 1010, 3706, 1010, 2644, 1011, 4367, 1010, 2051, 1011, 2375, 2054, 1024, 2644, 4367, + 23620, 1012, 1996, 3706, 1011, 2051, 2375, 2004, 1037, 9703, 10968, 1024, 2028, 4062, 24110, + 3775, 11254, 17060, 2051, 2000, 2723, 1006, 1056, 1008, 1042, 4523, 1007, 1013, 1042, 4523, + 1998, 14172, 2035, 4367, 1025, 2176, 19204, 3259, 1011, 3013, 10466, 5466, 1011, 1998, 1011, + 2455, 2007, 18794, 2006, 4978, 1010, 1016, 1011, 4853, 26077, 10147, 12079, 13916, 2566, 3357, + 1010, 1998, 26831, 24947, 2542, 3599, 1016, 2000, 1017, 11048, 1012, 2224, 1035, 2043, 1024, + 5841, 1024, 10580, 1012, 6337, 1024, 3706, 1011, 2051, 1012, 102 + ] + }, + { "text": "store-badge-lockup", "ids": [101, 3573, 1011, 10780, 1011, 5843, 6279, 102] }, + { + "text": "group: ask, cta, mobile, prop, store-badges, ui-props\nwhat: Store Badge Lockup. Settles a short headline above equal-size App Store and Google Play badges as a token-driven mobile end-card call to action.\nuse_when: Jobs: ask. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 3198, 1010, 14931, 2050, 1010, 4684, 1010, 17678, 1010, 3573, 1011, 23433, + 1010, 21318, 1011, 24387, 2054, 1024, 3573, 10780, 5843, 6279, 1012, 27221, 1037, 2460, 17653, + 2682, 5020, 1011, 2946, 10439, 3573, 1998, 8224, 2377, 23433, 2004, 1037, 19204, 1011, 5533, + 4684, 2203, 1011, 4003, 2655, 2000, 2895, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 3198, + 1012, 6337, 1024, 2907, 3085, 1012, 102 + ] + }, + { "text": "strikethrough-replace", "ids": [101, 4894, 2705, 22494, 5603, 1011, 5672, 102] }, + { + "text": "group: motion-primitive, remocn-port, typography\nwhat: Strikethrough Replace. Draw a strike line across old text, then reveal the replacement.", + "ids": [ + 101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939, + 6873, 12565, 2054, 1024, 4894, 2705, 22494, 5603, 5672, 1012, 4009, 1037, 4894, 2240, 2408, + 2214, 3793, 1010, 2059, 7487, 1996, 6110, 1012, 102 + ] + }, + { "text": "success-check", "ids": [101, 3112, 1011, 4638, 102] }, + { + "text": "group: check, success, transition-primitive, transitions-dev-port\nwhat: Success Check. A success check primitive with ring pop, path draw, and subtle rotate blur", + "ids": [ + 101, 2177, 1024, 4638, 1010, 3112, 1010, 6653, 1011, 10968, 1010, 22166, 1011, 16475, 1011, + 3417, 2054, 1024, 3112, 4638, 1012, 1037, 3112, 4638, 10968, 2007, 3614, 3769, 1010, 4130, + 4009, 1010, 1998, 11259, 24357, 14819, 102 + ] + }, + { + "text": "svg-line-draw-loader", + "ids": [101, 17917, 2290, 1011, 2240, 1011, 4009, 1011, 7170, 2121, 102] + }, + { + "text": "group: advanced-motion, anime-inspired, hyperframes-native\nwhat: SVG Line Draw Loader. An Anime.js-style path drawing loader implemented as a seekable GSAP stroke timeline.", + "ids": [ + 101, 2177, 1024, 3935, 1011, 4367, 1010, 8750, 1011, 4427, 1010, 23760, 15643, 2015, 1011, + 3128, 2054, 1024, 17917, 2290, 2240, 4009, 7170, 2121, 1012, 2019, 8750, 1012, 1046, 2015, + 1011, 2806, 4130, 5059, 7170, 2121, 7528, 2004, 1037, 6148, 3085, 28177, 9331, 6909, 17060, + 1012, 102 + ] + }, + { "text": "svg-mask-reveal", "ids": [101, 17917, 2290, 1011, 7308, 1011, 7487, 102] }, + { + "text": "group: effect, effects, exhibit, mask, reveal, svg, wordmark\nwhat: SVG Mask Reveal. A soft token-colored sweep reveals media only through an editable SVG wordmark mask.\nuse_when: Jobs: exhibit. Profile: burst.", + "ids": [ + 101, 2177, 1024, 3466, 1010, 3896, 1010, 8327, 1010, 7308, 1010, 7487, 1010, 17917, 2290, + 1010, 2773, 10665, 2054, 1024, 17917, 2290, 7308, 7487, 1012, 1037, 3730, 19204, 1011, 6910, + 11740, 7657, 2865, 2069, 2083, 2019, 10086, 3085, 17917, 2290, 2773, 10665, 7308, 1012, 2224, + 1035, 2043, 1024, 5841, 1024, 8327, 1012, 6337, 1024, 6532, 1012, 102 + ] + }, + { "text": "svg-stroke-trace", "ids": [101, 17917, 2290, 1011, 6909, 1011, 7637, 102] }, + { + "text": "group: intro, intros-and-reveals, line-draw, motion-primitive, reveal, stroke, svg\nwhat: SVG Stroke Trace. An authored SVG path draws from its measured length, holds with subtle drift, and optionally fills when the path is closed.\nuse_when: Jobs: reveal. Profile: trace.", + "ids": [ + 101, 2177, 1024, 17174, 1010, 17174, 2015, 1011, 1998, 1011, 7657, 1010, 2240, 1011, 4009, + 1010, 4367, 1011, 10968, 1010, 7487, 1010, 6909, 1010, 17917, 2290, 2054, 1024, 17917, 2290, + 6909, 7637, 1012, 2019, 8786, 17917, 2290, 4130, 9891, 2013, 2049, 7594, 3091, 1010, 4324, + 2007, 11259, 11852, 1010, 1998, 11887, 2135, 17469, 2043, 1996, 4130, 2003, 2701, 1012, 2224, + 1035, 2043, 1024, 5841, 1024, 7487, 1012, 6337, 1024, 7637, 1012, 102 + ] + }, + { "text": "swipe-rail", "ids": [101, 25430, 15457, 1011, 4334, 102] }, + { + "text": "group: cards, demonstrate, gesture, interaction, motion-primitive, rail, swipe\nwhat: Swipe Rail. A contact circle leads a horizontal card rail through a fast drag, momentum carry, and settled snap to the next card.\nuse_when: Jobs: demonstrate. Profile: gesture.", + "ids": [ + 101, 2177, 1024, 5329, 1010, 10580, 1010, 9218, 1010, 8290, 1010, 4367, 1011, 10968, 1010, + 4334, 1010, 25430, 15457, 2054, 1024, 25430, 15457, 4334, 1012, 1037, 3967, 4418, 5260, 1037, + 9876, 4003, 4334, 2083, 1037, 3435, 8011, 1010, 11071, 4287, 1010, 1998, 3876, 10245, 2000, + 1996, 2279, 4003, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 10580, 1012, 6337, 1024, 9218, + 1012, 102 + ] + }, + { "text": "swirl-vortex", "ids": [101, 28693, 1011, 23463, 102] }, + { + "text": "group: shader, transition\nwhat: Swirl Vortex. Shader transition with swirling vortex distortion", + "ids": [ + 101, 2177, 1024, 8703, 2099, 1010, 6653, 2054, 1024, 28693, 23463, 1012, 8703, 2099, 6653, + 2007, 16499, 23463, 20870, 102 + ] + }, + { "text": "switch", "ids": [101, 6942, 102] }, + { + "text": "group: remocn-port, switch, toggle, ui-primitive\nwhat: Switch. A tactile switch with a physical thumb and semantic on/off treatment", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 6942, 1010, 2000, 24679, 1010, + 21318, 1011, 10968, 2054, 1024, 6942, 1012, 1037, 11937, 6593, 9463, 6942, 2007, 1037, 3558, + 7639, 1998, 21641, 2006, 1013, 2125, 3949, 102 + ] + }, + { "text": "table", "ids": [101, 2795, 102] }, + { + "text": "group: data, remocn-port, table, ui-primitive\nwhat: Table. A compact structured-data table with machined row rules, semantic statuses, and tabular time values", + "ids": [ + 101, 2177, 1024, 2951, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 2795, 1010, 21318, + 1011, 10968, 2054, 1024, 2795, 1012, 1037, 9233, 14336, 1011, 2951, 2795, 2007, 3698, 2094, + 5216, 3513, 1010, 21641, 3570, 2229, 1010, 1998, 21628, 7934, 2051, 5300, 102 + ] + }, + { "text": "tabs", "ids": [101, 21628, 2015, 102] }, + { + "text": "group: navigation, remocn-port, tabs, ui-primitive\nwhat: Tabs. A minimal tab primitive with an inset mint selection edge, open content hierarchy, and a seek-safe indicator", + "ids": [ + 101, 2177, 1024, 9163, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 21628, 2015, 1010, + 21318, 1011, 10968, 2054, 1024, 21628, 2015, 1012, 1037, 10124, 21628, 10968, 2007, 2019, + 16021, 3388, 12927, 4989, 3341, 1010, 2330, 4180, 12571, 1010, 1998, 1037, 6148, 1011, 3647, + 17245, 102 + ] + }, + { "text": "tabs-slide-indicator", "ids": [101, 21628, 2015, 1011, 7358, 1011, 17245, 102] }, + { + "text": "group: indicator, tabs, transition-primitive, transitions-dev-port\nwhat: Tabs Slide Indicator. A pill indicator transition that slides between active tabs", + "ids": [ + 101, 2177, 1024, 17245, 1010, 21628, 2015, 1010, 6653, 1011, 10968, 1010, 22166, 1011, 16475, + 1011, 3417, 2054, 1024, 21628, 2015, 7358, 17245, 1012, 1037, 17357, 17245, 6653, 2008, 14816, + 2090, 3161, 21628, 2015, 102 + ] + }, + { "text": "telemetry-hud", "ids": [101, 10093, 21382, 11129, 1011, 15876, 2094, 102] }, + { + "text": "group: demonstrate, deterministic, hud, motion-primitive, product-demo, telemetry\nwhat: Telemetry HUD. Quiet mono debug-HUD readouts frame a slotted subject: corner brackets draw on, label:value lines tick their values on cues, one readout emphasized in accent. The subject never moves; the HUD breathes zero.\nuse_when: Jobs: demonstrate. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 10580, 1010, 28283, 25300, 10074, 1010, 15876, 2094, 1010, 4367, 1011, 10968, + 1010, 4031, 1011, 9703, 1010, 10093, 21382, 11129, 2054, 1024, 10093, 21382, 11129, 15876, + 2094, 1012, 4251, 18847, 2139, 8569, 2290, 1011, 15876, 2094, 3191, 12166, 4853, 1037, 10453, + 3064, 3395, 1024, 3420, 19719, 4009, 2006, 1010, 3830, 1024, 3643, 3210, 16356, 2037, 5300, + 2006, 23391, 1010, 2028, 3191, 5833, 13155, 1999, 9669, 1012, 1996, 3395, 2196, 5829, 1025, + 1996, 15876, 2094, 7200, 2015, 5717, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 10580, 1012, + 6337, 1024, 2907, 3085, 1012, 102 + ] + }, + { "text": "terminal-simulator", "ids": [101, 5536, 1011, 25837, 102] }, + { + "text": "group: code-animation, remocn-port\nwhat: Terminal Simulator. A terminal window types commands and streams log output.", + "ids": [ + 101, 2177, 1024, 3642, 1011, 7284, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 2054, 1024, 5536, + 25837, 1012, 1037, 5536, 3332, 4127, 10954, 1998, 9199, 8833, 6434, 1012, 102 + ] + }, + { + "text": "terminal-to-browser-deploy", + "ids": [101, 5536, 1011, 2000, 1011, 16602, 1011, 21296, 102] + }, + { + "text": "group: remocn-port, showcase\nwhat: Terminal to Browser Deploy. Terminal deploy logs hand off into a live browser preview.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 13398, 2054, 1024, 5536, 2000, + 16602, 21296, 1012, 5536, 21296, 15664, 2192, 2125, 2046, 1037, 2444, 16602, 19236, 1012, 102 + ] + }, + { "text": "testimonial-card", "ids": [101, 3231, 16339, 6200, 2140, 1011, 4003, 102] }, + { + "text": "group: prop, prove, quote, social-proof, testimonial, ui-props\nwhat: Testimonial Card. Reveals a customer quote at reading pace, then settles its avatar, author name, and handle beneath as a clean proof beat.\nuse_when: Jobs: prove. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 17678, 1010, 6011, 1010, 14686, 1010, 2591, 1011, 6947, 1010, 3231, 16339, + 6200, 2140, 1010, 21318, 1011, 24387, 2054, 1024, 3231, 16339, 6200, 2140, 4003, 1012, 7657, + 1037, 8013, 14686, 2012, 3752, 6393, 1010, 2059, 27221, 2049, 22128, 1010, 3166, 2171, 1010, + 1998, 5047, 4218, 2004, 1037, 4550, 6947, 3786, 1012, 2224, 1035, 2043, 1024, 5841, 1024, + 6011, 1012, 6337, 1024, 2907, 3085, 1012, 102 + ] + }, + { + "text": "testimonial-proof-card", + "ids": [101, 3231, 16339, 6200, 2140, 1011, 6947, 1011, 4003, 102] + }, + { + "text": "group: deterministic, motion-primitive, proof, proof-stats, prove, quote, social-proof, testimonial\nwhat: Testimonial Proof Card. A quote card whose testimonial reveals per-line through a soft mask, with an avatar disc (initials default, image slot), mono name and role, an optional company text mark, and one emphasis substring underlined in accent ink after the quote lands.\nuse_when: Jobs: prove. Profile: testimonial.", + "ids": [ + 101, 2177, 1024, 28283, 25300, 10074, 1010, 4367, 1011, 10968, 1010, 6947, 1010, 6947, 1011, + 26319, 1010, 6011, 1010, 14686, 1010, 2591, 1011, 6947, 1010, 3231, 16339, 6200, 2140, 2054, + 1024, 3231, 16339, 6200, 2140, 6947, 4003, 1012, 1037, 14686, 4003, 3005, 3231, 16339, 6200, + 2140, 7657, 2566, 1011, 2240, 2083, 1037, 3730, 7308, 1010, 2007, 2019, 22128, 5860, 1006, + 20381, 12398, 1010, 3746, 10453, 1007, 1010, 18847, 2171, 1998, 2535, 1010, 2019, 11887, 2194, + 3793, 2928, 1010, 1998, 2028, 7902, 4942, 3367, 4892, 2104, 18194, 1999, 9669, 10710, 2044, + 1996, 14686, 4915, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 6011, 1012, 6337, 1024, 3231, + 16339, 6200, 2140, 1012, 102 + ] + }, + { "text": "text-shimmer", "ids": [101, 3793, 1011, 11895, 15810, 102] }, + { + "text": "group: emphasis, emphasize, motion-primitive, shimmer, specular, text-effects\nwhat: Text Shimmer. A static headline receives one clean specular gradient sweep through its glyphs, then returns to its ordinary text color.\nuse_when: Jobs: emphasize. Profile: drift.", + "ids": [ + 101, 2177, 1024, 7902, 1010, 17902, 1010, 4367, 1011, 10968, 1010, 11895, 15810, 1010, 28699, + 7934, 1010, 3793, 1011, 3896, 2054, 1024, 3793, 11895, 15810, 1012, 1037, 10763, 17653, 8267, + 2028, 4550, 28699, 7934, 17978, 11740, 2083, 2049, 1043, 2135, 18757, 1010, 2059, 5651, 2000, + 2049, 6623, 3793, 3609, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 17902, 1012, 6337, 1024, + 11852, 1012, 102 + ] + }, + { "text": "text-stagger", "ids": [101, 3793, 1011, 2358, 27609, 102] }, + { + "text": "group: stagger, text, transition-primitive, transitions-dev-port\nwhat: Text Stagger. A transitions.dev-inspired text stagger primitive with enter, shimmer, and exit-ready words", + "ids": [ + 101, 2177, 1024, 2358, 27609, 1010, 3793, 1010, 6653, 1011, 10968, 1010, 22166, 1011, 16475, + 1011, 3417, 2054, 1024, 3793, 2358, 27609, 1012, 1037, 22166, 1012, 16475, 1011, 4427, 3793, + 2358, 27609, 10968, 2007, 4607, 1010, 11895, 15810, 1010, 1998, 6164, 1011, 3201, 2616, 102 + ] + }, + { "text": "text-state-swap", "ids": [101, 3793, 1011, 2110, 1011, 19948, 102] }, + { + "text": "group: swap, text, transition-primitive, transitions-dev-port\nwhat: Text State Swap. A text state swap primitive with outgoing blur and incoming lift", + "ids": [ + 101, 2177, 1024, 19948, 1010, 3793, 1010, 6653, 1011, 10968, 1010, 22166, 1011, 16475, 1011, + 3417, 2054, 1024, 3793, 2110, 19948, 1012, 1037, 3793, 2110, 19948, 10968, 2007, 22011, 14819, + 1998, 14932, 6336, 102 + ] + }, + { "text": "textarea", "ids": [101, 3793, 12069, 2050, 102] }, + { + "text": "group: field, remocn-port, textarea, ui-primitive\nwhat: Textarea. A resilient multiline field with a precise focus treatment and readable copy", + "ids": [ + 101, 2177, 1024, 2492, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 3793, 12069, 2050, + 1010, 21318, 1011, 10968, 2054, 1024, 3793, 12069, 2050, 1012, 1037, 24501, 18622, 4765, 4800, + 4179, 2492, 2007, 1037, 10480, 3579, 3949, 1998, 3191, 3085, 6100, 102 + ] + }, + { "text": "texture-mask-text", "ids": [101, 14902, 1011, 7308, 1011, 3793, 102] }, + { + "text": "group: effect, mask, text, text-effect, texture\nwhat: Texture Mask Text. CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps", + "ids": [ + 101, 2177, 1024, 3466, 1010, 7308, 1010, 3793, 1010, 3793, 1011, 3466, 1010, 14902, 2054, + 1024, 14902, 7308, 3793, 1012, 20116, 2015, 11320, 22311, 5897, 15806, 2008, 3013, 8198, 2083, + 3661, 22694, 1011, 5764, 3653, 1011, 2328, 14902, 15806, 2013, 17093, 2278, 2290, 1052, 19892, + 3609, 7341, 102 + ] + }, + { "text": "thermal-distortion", "ids": [101, 9829, 1011, 20870, 102] }, + { + "text": "group: shader, transition\nwhat: Thermal Distortion. Shader transition with heat haze thermal distortion", + "ids": [ + 101, 2177, 1024, 8703, 2099, 1010, 6653, 2054, 1024, 9829, 20870, 1012, 8703, 2099, 6653, + 2007, 3684, 16332, 9829, 20870, 102 + ] + }, + { "text": "thread-message-stack", "ids": [101, 11689, 1011, 4471, 1011, 9991, 102] }, + { + "text": "group: List assembly.\nwhat: Message bubbles land on the bottom line over a moving background, push older messages upward under a mask, and show a typing pill before each incoming message.\nuse_when: A conversation must build through alternating incoming and outgoing bubbles while the background continues moving.\navoid_when: Avoid it when frame zero must be empty, because the thread deliberately opens on three settled bubbles.", + "ids": [ + 101, 2177, 1024, 2862, 3320, 1012, 2054, 1024, 4471, 17255, 2455, 2006, 1996, 3953, 2240, + 2058, 1037, 3048, 4281, 1010, 5245, 3080, 7696, 10745, 2104, 1037, 7308, 1010, 1998, 2265, + 1037, 22868, 17357, 2077, 2169, 14932, 4471, 1012, 2224, 1035, 2043, 1024, 1037, 4512, 2442, + 3857, 2083, 15122, 14932, 1998, 22011, 17255, 2096, 1996, 4281, 4247, 3048, 1012, 4468, 1035, + 2043, 1024, 4468, 2009, 2043, 4853, 5717, 2442, 2022, 4064, 1010, 2138, 1996, 11689, 9969, + 7480, 2006, 2093, 3876, 17255, 1012, 102 + ] + }, + { "text": "three-orbiting-cards", "ids": [101, 2093, 1011, 26472, 1011, 5329, 102] }, + { + "text": "group: hyperframes-native, three-js, webgl\nwhat: Three Orbiting Cards. A Three.js-powered orbit scene driven by a paused GSAP timeline for deterministic renders.", + "ids": [ + 101, 2177, 1024, 23760, 15643, 2015, 1011, 3128, 1010, 2093, 1011, 1046, 2015, 1010, 4773, + 23296, 2054, 1024, 2093, 26472, 5329, 1012, 1037, 2093, 1012, 1046, 2015, 1011, 6113, 8753, + 3496, 5533, 2011, 1037, 5864, 28177, 9331, 17060, 2005, 28283, 25300, 10074, 17552, 2015, + 1012, 102 + ] + }, + { "text": "three-particle-ribbon", "ids": [101, 2093, 1011, 10811, 1011, 10557, 102] }, + { + "text": "group: hyperframes-native, three-js, webgl\nwhat: Three Particle Ribbon. A lightweight Three.js point ribbon with timeline-controlled camera and shader-like color drift.", + "ids": [ + 101, 2177, 1024, 23760, 15643, 2015, 1011, 3128, 1010, 2093, 1011, 1046, 2015, 1010, 4773, + 23296, 2054, 1024, 2093, 10811, 10557, 1012, 1037, 12038, 2093, 1012, 1046, 2015, 2391, 10557, + 2007, 17060, 1011, 4758, 4950, 1998, 8703, 2099, 1011, 2066, 3609, 11852, 1012, 102 + ] + }, + { "text": "ticker-takeover", "ids": [101, 16356, 2121, 1011, 15336, 102] }, + { + "text": "group: headline, motion-primitive, reveal, slot-machine, ticker, typography\nwhat: Ticker Takeover. A mono ticker rolls through options, locks on a final word with an accent flash, and promotes it into a full-frame headline.\nuse_when: Jobs: reveal. Profile: kinetic.", + "ids": [ + 101, 2177, 1024, 17653, 1010, 4367, 1011, 10968, 1010, 7487, 1010, 10453, 1011, 3698, 1010, + 16356, 2121, 1010, 5939, 6873, 12565, 2054, 1024, 16356, 2121, 15336, 1012, 1037, 18847, + 16356, 2121, 9372, 2083, 7047, 1010, 11223, 2006, 1037, 2345, 2773, 2007, 2019, 9669, 5956, + 1010, 1998, 14067, 2009, 2046, 1037, 2440, 1011, 4853, 17653, 1012, 2224, 1035, 2043, 1024, + 5841, 1024, 7487, 1012, 6337, 1024, 20504, 1012, 102 + ] + }, + { "text": "tiktok-follow", "ids": [101, 14841, 25509, 6559, 1011, 3582, 102] }, + { + "text": "group: overlay, social, tiktok\nwhat: TikTok Follow. Animated TikTok follow overlay with profile card and follow button", + "ids": [ + 101, 2177, 1024, 2058, 8485, 1010, 2591, 1010, 14841, 25509, 6559, 2054, 1024, 14841, 25509, + 6559, 3582, 1012, 6579, 14841, 25509, 6559, 3582, 2058, 8485, 2007, 6337, 4003, 1998, 3582, + 6462, 102 + ] + }, + { "text": "tilt-card", "ids": [101, 17010, 1011, 4003, 102] }, + { + "text": "group: card, tilt, transition-primitive, transitions-dev-port\nwhat: Tilt Card. A transitions.dev-inspired tilt card primitive with depth layers and hover-style parallax", + "ids": [ + 101, 2177, 1024, 4003, 1010, 17010, 1010, 6653, 1011, 10968, 1010, 22166, 1011, 16475, 1011, + 3417, 2054, 1024, 17010, 4003, 1012, 1037, 22166, 1012, 16475, 1011, 4427, 17010, 4003, 10968, + 2007, 5995, 9014, 1998, 25215, 2099, 1011, 2806, 11498, 4571, 2595, 102 + ] + }, + { "text": "titlecard-calm", "ids": [101, 2516, 11522, 1011, 5475, 102] }, + { + "text": "group: calm, motion-primitive, orient, title-card, typography\nwhat: Titlecard Calm. A restrained title card where a mono kicker and generous grotesque headline fade upward, drift almost imperceptibly, and exit cleanly.\nuse_when: Jobs: orient. Profile: calm.", + "ids": [ + 101, 2177, 1024, 5475, 1010, 4367, 1011, 10968, 1010, 16865, 1010, 2516, 1011, 4003, 1010, + 5939, 6873, 12565, 2054, 1024, 2516, 11522, 5475, 1012, 1037, 19868, 2516, 4003, 2073, 1037, + 18847, 22652, 1998, 12382, 27707, 17653, 12985, 10745, 1010, 11852, 2471, 17727, 2121, 3401, + 13876, 17296, 1010, 1998, 6164, 4550, 2135, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 16865, + 1012, 6337, 1024, 5475, 1012, 102 + ] + }, + { "text": "titlecard-lockup", "ids": [101, 2516, 11522, 1011, 5843, 6279, 102] }, + { + "text": "group: breather, lockup, motion-primitive, orient, title-card, typography\nwhat: Titlecard Lockup. The calm breather titlecard: an optional mono kicker fades up, the wordmark settles dead-center with one restrained move, a hairline rule draws left to right, a mono label fades beneath, and the lockup holds truly still.\nuse_when: Jobs: orient. Profile: calm.", + "ids": [ + 101, 2177, 1024, 7200, 2099, 1010, 5843, 6279, 1010, 4367, 1011, 10968, 1010, 16865, 1010, + 2516, 1011, 4003, 1010, 5939, 6873, 12565, 2054, 1024, 2516, 11522, 5843, 6279, 1012, 1996, + 5475, 7200, 2099, 2516, 11522, 1024, 2019, 11887, 18847, 22652, 26784, 2039, 1010, 1996, 2773, + 10665, 27221, 2757, 1011, 2415, 2007, 2028, 19868, 2693, 1010, 1037, 2606, 4179, 3627, 9891, + 2187, 2000, 2157, 1010, 1037, 18847, 3830, 26784, 4218, 1010, 1998, 1996, 5843, 6279, 4324, + 5621, 2145, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 16865, 1012, 6337, 1024, 5475, 1012, 102 + ] + }, + { "text": "toast", "ids": [101, 15174, 102] }, + { + "text": "group: notification, remocn-port, toast, ui-primitive\nwhat: Toast. An Operator Black toast with a semantic success check, progress rail, and stack-origin motion", + "ids": [ + 101, 2177, 1024, 26828, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 15174, 1010, 21318, + 1011, 10968, 2054, 1024, 15174, 1012, 2019, 6872, 2304, 15174, 2007, 1037, 21641, 3112, 4638, + 1010, 5082, 4334, 1010, 1998, 9991, 1011, 4761, 4367, 102 + ] + }, + { "text": "toggle", "ids": [101, 2000, 24679, 102] }, + { + "text": "group: control, remocn-port, toggle, ui-primitive\nwhat: Toggle. A tactile toggle button with distinct pressed and unpressed states", + "ids": [ + 101, 2177, 1024, 2491, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 2000, 24679, 1010, + 21318, 1011, 10968, 2054, 1024, 2000, 24679, 1012, 1037, 11937, 6593, 9463, 2000, 24679, 6462, + 2007, 5664, 4508, 1998, 4895, 19811, 2163, 102 + ] + }, + { "text": "toggle-flip", "ids": [101, 2000, 24679, 1011, 11238, 102] }, + { + "text": "group: demonstrate, interaction, prop, reference-prop, toggle, ui-props\nwhat: Toggle Flip. An oversized UI toggle switch that flips with real physicality: thumb overshoot, track color crossfade, and a soft press-compress before release. The reference prop of the ui-props family.\nuse_when: Jobs: demonstrate. Profile: interaction.", + "ids": [ + 101, 2177, 1024, 10580, 1010, 8290, 1010, 17678, 1010, 4431, 1011, 17678, 1010, 2000, 24679, + 1010, 21318, 1011, 24387, 2054, 1024, 2000, 24679, 11238, 1012, 2019, 21698, 21318, 2000, + 24679, 6942, 2008, 11238, 2015, 2007, 2613, 3558, 3012, 1024, 7639, 15849, 23416, 1010, 2650, + 3609, 2892, 7011, 3207, 1010, 1998, 1037, 3730, 2811, 1011, 4012, 20110, 2077, 2713, 1012, + 1996, 4431, 17678, 1997, 1996, 21318, 1011, 24387, 2155, 1012, 2224, 1035, 2043, 1024, 5841, + 1024, 10580, 1012, 6337, 1024, 8290, 1012, 102 + ] + }, + { "text": "toggle-group", "ids": [101, 2000, 24679, 1011, 2177, 102] }, + { + "text": "group: control, remocn-port, toggle-group, ui-primitive\nwhat: Toggle Group. A segmented toggle group with a recessed sliding selection indicator", + "ids": [ + 101, 2177, 1024, 2491, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 2000, 24679, 1011, + 2177, 1010, 21318, 1011, 10968, 2054, 1024, 2000, 24679, 2177, 1012, 1037, 6903, 2098, 2000, + 24679, 2177, 2007, 1037, 28290, 2098, 8058, 4989, 17245, 102 + ] + }, + { "text": "tool-menu-slide-in", "ids": [101, 6994, 1011, 12183, 1011, 7358, 1011, 1999, 102] }, + { + "text": "group: remocn-port, transition-primitive\nwhat: Tool Menu Slide In. A tool menu enters with short-axis slide and icon stagger.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 6653, 1011, 10968, 2054, 1024, + 6994, 12183, 7358, 1999, 1012, 1037, 6994, 12183, 8039, 2007, 2460, 1011, 8123, 7358, 1998, + 12696, 2358, 27609, 1012, 102 + ] + }, + { "text": "tooltip", "ids": [101, 6994, 25101, 102] }, + { + "text": "group: overlay, remocn-port, tooltip, ui-primitive\nwhat: Tooltip. An Operator Black tooltip with a technical trigger icon and origin-aware Soft Optical reveal", + "ids": [ + 101, 2177, 1024, 2058, 8485, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 6994, 25101, + 1010, 21318, 1011, 10968, 2054, 1024, 6994, 25101, 1012, 2019, 6872, 2304, 6994, 25101, 2007, + 1037, 4087, 9495, 12696, 1998, 4761, 1011, 5204, 3730, 9380, 7487, 102 + ] + }, + { "text": "top-down-letters", "ids": [101, 2327, 1011, 2091, 1011, 4144, 102] }, + { + "text": "group: motion-primitive, remocn-port, typography\nwhat: Top-Down Letters. Letters descend from above in a pronounced staircase with zero blur.", + "ids": [ + 101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939, + 6873, 12565, 2054, 1024, 2327, 1011, 2091, 4144, 1012, 4144, 18855, 2013, 2682, 1999, 1037, + 8793, 10714, 2007, 5717, 14819, 1012, 102 + ] + }, + { "text": "touch-indicator", "ids": [101, 3543, 1011, 17245, 102] }, + { + "text": "group: demonstrate, gesture, mobile, motion-primitive, pointer, pointers, touch\nwhat: Touch Indicator. A translucent contact-circle gesture actor for mobile UI scenes: it touches the glass, causes a same-frame response, and lifts. Tap or swipe, picked by variable.\nuse_when: Jobs: demonstrate. Profile: interaction.", + "ids": [ + 101, 2177, 1024, 10580, 1010, 9218, 1010, 4684, 1010, 4367, 1011, 10968, 1010, 20884, 1010, + 20884, 2015, 1010, 3543, 2054, 1024, 3543, 17245, 1012, 1037, 22897, 3967, 1011, 4418, 9218, + 3364, 2005, 4684, 21318, 5019, 1024, 2009, 12817, 1996, 3221, 1010, 5320, 1037, 2168, 1011, + 4853, 3433, 1010, 1998, 13695, 1012, 11112, 2030, 25430, 15457, 1010, 3856, 2011, 8023, 1012, + 2224, 1035, 2043, 1024, 5841, 1024, 10580, 1012, 6337, 1024, 8290, 1012, 102 + ] + }, + { "text": "tracing-beam", "ids": [101, 16907, 1011, 7504, 102] }, + { + "text": "group: attention, beam, demonstrate, motion-primitive, path, product-demo, spotlight\nwhat: Tracing Beam. A glowing dash follows one SVG path through three UI elements, lifting and brightening each element in sequence.\nuse_when: Jobs: demonstrate. Profile: attention.", + "ids": [ + 101, 2177, 1024, 3086, 1010, 7504, 1010, 10580, 1010, 4367, 1011, 10968, 1010, 4130, 1010, + 4031, 1011, 9703, 1010, 17763, 2054, 1024, 16907, 7504, 1012, 1037, 10156, 11454, 4076, 2028, + 17917, 2290, 4130, 2083, 2093, 21318, 3787, 1010, 8783, 1998, 4408, 7406, 2169, 5783, 1999, + 5537, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 10580, 1012, 6337, 1024, 3086, 1012, 102 + ] + }, + { "text": "tracking-in", "ids": [101, 9651, 1011, 1999, 102] }, + { + "text": "group: motion-primitive, reveal, text, typography\nwhat: Tracking In. A precise letter-spacing reveal for premium headings and interface labels", + "ids": [ + 101, 2177, 1024, 4367, 1011, 10968, 1010, 7487, 1010, 3793, 1010, 5939, 6873, 12565, 2054, + 1024, 9651, 1999, 1012, 1037, 10480, 3661, 1011, 12403, 6129, 7487, 2005, 12882, 5825, 2015, + 1998, 8278, 10873, 102 + ] + }, + { "text": "transitions-3d", "ids": [101, 22166, 1011, 7605, 102] }, + { + "text": "group: showcase, transition\nwhat: 3D Transitions. Showcase of 3D perspective flip and rotate transitions", + "ids": [ + 101, 2177, 1024, 13398, 1010, 6653, 2054, 1024, 7605, 22166, 1012, 13398, 1997, 7605, 7339, + 11238, 1998, 24357, 22166, 102 + ] + }, + { "text": "transitions-blur", "ids": [101, 22166, 1011, 14819, 102] }, + { + "text": "group: showcase, transition\nwhat: Blur Transitions. Showcase of blur-based transitions between scenes", + "ids": [ + 101, 2177, 1024, 13398, 1010, 6653, 2054, 1024, 14819, 22166, 1012, 13398, 1997, 14819, 1011, + 2241, 22166, 2090, 5019, 102 + ] + }, + { "text": "transitions-cover", "ids": [101, 22166, 1011, 3104, 102] }, + { + "text": "group: showcase, transition\nwhat: Cover Transitions. Showcase of cover/uncover slide transitions", + "ids": [ + 101, 2177, 1024, 13398, 1010, 6653, 2054, 1024, 3104, 22166, 1012, 13398, 1997, 3104, 1013, + 26944, 7358, 22166, 102 + ] + }, + { "text": "transitions-destruction", "ids": [101, 22166, 1011, 6215, 102] }, + { + "text": "group: showcase, transition\nwhat: Destruction Transitions. Showcase of destructive break-apart transitions", + "ids": [ + 101, 2177, 1024, 13398, 1010, 6653, 2054, 1024, 6215, 22166, 1012, 13398, 1997, 15615, 3338, + 1011, 4237, 22166, 102 + ] + }, + { "text": "transitions-dissolve", "ids": [101, 22166, 1011, 21969, 102] }, + { + "text": "group: showcase, transition\nwhat: Dissolve Transitions. Showcase of dissolve and fade transitions", + "ids": [ + 101, 2177, 1024, 13398, 1010, 6653, 2054, 1024, 21969, 22166, 1012, 13398, 1997, 21969, 1998, + 12985, 22166, 102 + ] + }, + { "text": "transitions-distortion", "ids": [101, 22166, 1011, 20870, 102] }, + { + "text": "group: showcase, transition\nwhat: Distortion Transitions. Showcase of warp and distortion transitions", + "ids": [ + 101, 2177, 1024, 13398, 1010, 6653, 2054, 1024, 20870, 22166, 1012, 13398, 1997, 24136, 1998, + 20870, 22166, 102 + ] + }, + { "text": "transitions-grid", "ids": [101, 22166, 1011, 8370, 102] }, + { + "text": "group: showcase, transition\nwhat: Grid Transitions. Showcase of grid-based tile transitions", + "ids": [ + 101, 2177, 1024, 13398, 1010, 6653, 2054, 1024, 8370, 22166, 1012, 13398, 1997, 8370, 1011, + 2241, 14090, 22166, 102 + ] + }, + { "text": "transitions-light", "ids": [101, 22166, 1011, 2422, 102] }, + { + "text": "group: showcase, transition\nwhat: Light Transitions. Showcase of light-based glow and flash transitions", + "ids": [ + 101, 2177, 1024, 13398, 1010, 6653, 2054, 1024, 2422, 22166, 1012, 13398, 1997, 2422, 1011, + 2241, 8652, 1998, 5956, 22166, 102 + ] + }, + { "text": "transitions-mechanical", "ids": [101, 22166, 1011, 6228, 102] }, + { + "text": "group: showcase, transition\nwhat: Mechanical Transitions. Showcase of mechanical shutter and iris transitions", + "ids": [ + 101, 2177, 1024, 13398, 1010, 6653, 2054, 1024, 6228, 22166, 1012, 13398, 1997, 6228, 28180, + 1998, 11173, 22166, 102 + ] + }, + { "text": "transitions-other", "ids": [101, 22166, 1011, 2060, 102] }, + { + "text": "group: showcase, transition\nwhat: Other Transitions. Showcase of miscellaneous creative transitions", + "ids": [ + 101, 2177, 1024, 13398, 1010, 6653, 2054, 1024, 2060, 22166, 1012, 13398, 1997, 25408, 5541, + 22166, 102 + ] + }, + { "text": "transitions-push", "ids": [101, 22166, 1011, 5245, 102] }, + { + "text": "group: showcase, transition\nwhat: Push Transitions. Showcase of push and slide transitions", + "ids": [ + 101, 2177, 1024, 13398, 1010, 6653, 2054, 1024, 5245, 22166, 1012, 13398, 1997, 5245, 1998, + 7358, 22166, 102 + ] + }, + { "text": "transitions-radial", "ids": [101, 22166, 1011, 15255, 102] }, + { + "text": "group: showcase, transition\nwhat: Radial Transitions. Showcase of radial wipe and reveal transitions", + "ids": [ + 101, 2177, 1024, 13398, 1010, 6653, 2054, 1024, 15255, 22166, 1012, 13398, 1997, 15255, 13387, + 1998, 7487, 22166, 102 + ] + }, + { "text": "transitions-scale", "ids": [101, 22166, 1011, 4094, 102] }, + { + "text": "group: showcase, transition\nwhat: Scale Transitions. Showcase of scale and zoom transitions", + "ids": [ + 101, 2177, 1024, 13398, 1010, 6653, 2054, 1024, 4094, 22166, 1012, 13398, 1997, 4094, 1998, + 24095, 22166, 102 + ] + }, + { "text": "trust-strip", "ids": [101, 3404, 1011, 6167, 102] }, + { + "text": "group: logo-strip, motion-primitive, proof, proof-and-stats, prove, trust, wordmarks\nwhat: Trust Strip. A monochrome trust row of wide-tracked mono wordmarks that fade in with an opacity-only left-to-right stagger, then hold dead still.\nuse_when: Jobs: prove. Profile: quiet-proof.", + "ids": [ + 101, 2177, 1024, 8154, 1011, 6167, 1010, 4367, 1011, 10968, 1010, 6947, 1010, 6947, 1011, + 1998, 1011, 26319, 1010, 6011, 1010, 3404, 1010, 2773, 27373, 2054, 1024, 3404, 6167, 1012, + 1037, 18847, 20366, 3404, 5216, 1997, 2898, 1011, 12808, 18847, 2773, 27373, 2008, 12985, + 1999, 2007, 2019, 6728, 6305, 3012, 1011, 2069, 2187, 1011, 2000, 1011, 2157, 2358, 27609, + 1010, 2059, 2907, 2757, 2145, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 6011, 1012, 6337, + 1024, 4251, 1011, 6947, 1012, 102 + ] + }, + { "text": "type-match-cut", "ids": [101, 2828, 1011, 2674, 1011, 3013, 102] }, + { + "text": "group: bridge, continuity, match-cut, motion-primitive, transition, transitions, typography\nwhat: Type Match Cut. A headline splits vertically around an incoming panel, which grows from the negative space and takes the frame as the words exit through opposite edges.\nuse_when: Jobs: bridge. Profile: match-cut.", + "ids": [ + 101, 2177, 1024, 2958, 1010, 13717, 1010, 2674, 1011, 3013, 1010, 4367, 1011, 10968, 1010, + 6653, 1010, 22166, 1010, 5939, 6873, 12565, 2054, 1024, 2828, 2674, 3013, 1012, 1037, 17653, + 19584, 20018, 2105, 2019, 14932, 5997, 1010, 2029, 7502, 2013, 1996, 4997, 2686, 1998, 3138, + 1996, 4853, 2004, 1996, 2616, 6164, 2083, 4500, 7926, 1012, 2224, 1035, 2043, 1024, 5841, + 1024, 2958, 1012, 6337, 1024, 2674, 1011, 3013, 1012, 102 + ] + }, + { "text": "typed-prompt", "ids": [101, 21189, 1011, 25732, 102] }, + { + "text": "group: demonstrate, deterministic, motion-primitive, product-demo, prompt, typing, ui-props\nwhat: Typed Prompt. A prompt line types itself in chunked human cadence behind a deterministic blinking caret, with optional backspace-and-retype correction of the final word.\nuse_when: Jobs: demonstrate. Profile: typing.", + "ids": [ + 101, 2177, 1024, 10580, 1010, 28283, 25300, 10074, 1010, 4367, 1011, 10968, 1010, 4031, 1011, + 9703, 1010, 25732, 1010, 22868, 1010, 21318, 1011, 24387, 2054, 1024, 21189, 25732, 1012, + 1037, 25732, 2240, 4127, 2993, 1999, 20000, 2098, 2529, 23620, 2369, 1037, 28283, 25300, + 10074, 15997, 2729, 2102, 1010, 2007, 11887, 10457, 15327, 1011, 1998, 1011, 2128, 13874, + 18140, 1997, 1996, 2345, 2773, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 10580, 1012, 6337, + 1024, 22868, 1012, 102 + ] + }, + { "text": "typewriter", "ids": [101, 2828, 15994, 102] }, + { + "text": "group: motion-primitive, remocn-port, typography\nwhat: Typewriter. Character-by-character text reveal with a deterministic blinking cursor.", + "ids": [ + 101, 2177, 1024, 4367, 1011, 10968, 1010, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 5939, + 6873, 12565, 2054, 1024, 2828, 15994, 1012, 2839, 1011, 2011, 1011, 2839, 3793, 7487, 2007, + 1037, 28283, 25300, 10074, 15997, 12731, 25301, 2099, 1012, 102 + ] + }, + { "text": "ui-3d-reveal", "ids": [101, 21318, 1011, 7605, 1011, 7487, 102] }, + { + "text": "group: 3d, reveal, showcase\nwhat: 3D UI Reveal. Perspective 3D reveal animation for UI elements", + "ids": [ + 101, 2177, 1024, 7605, 1010, 7487, 1010, 13398, 2054, 1024, 7605, 21318, 7487, 1012, 7339, + 7605, 7487, 7284, 2005, 21318, 3787, 102 + ] + }, + { "text": "ui-focus-zoom", "ids": [101, 21318, 1011, 3579, 1011, 24095, 102] }, + { + "text": "group: camera, demonstrate, focus, pan, product-demo, servo, slot, zoom\nwhat: UI Focus Zoom. 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. The surface is a slot with a token-styled skeleton default.\nuse_when: Jobs: demonstrate. Profile: camera.", + "ids": [ + 101, 2177, 1024, 4950, 1010, 10580, 1010, 3579, 1010, 6090, 1010, 4031, 1011, 9703, 1010, + 14262, 6767, 1010, 10453, 1010, 24095, 2054, 1024, 21318, 3579, 24095, 1012, 1037, 2440, + 10439, 3302, 21009, 2007, 2028, 7392, 1010, 2059, 1996, 4950, 24095, 2015, 1998, 6090, 2015, + 2000, 2019, 14453, 2555, 2006, 2049, 16091, 1998, 4324, 1996, 24095, 2098, 2110, 1010, 2007, + 2019, 11887, 3730, 3579, 17201, 2012, 1996, 8133, 1012, 1996, 3302, 2003, 1037, 10453, 2007, + 1037, 19204, 1011, 13650, 13526, 12398, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 10580, 1012, + 6337, 1024, 4950, 1012, 102 + ] + }, + { "text": "us-map", "ids": [101, 2149, 1011, 4949, 102] }, + { + "text": "group: choropleth, data, geography, map, usa\nwhat: US Map. Animated US choropleth map with staggered state reveals, value labels, and gradient legend, pure inline SVG with GSAP", + "ids": [ + 101, 2177, 1024, 16480, 18981, 7485, 2232, 1010, 2951, 1010, 10505, 1010, 4949, 1010, 3915, + 2054, 1024, 2149, 4949, 1012, 6579, 2149, 16480, 18981, 7485, 2232, 4949, 2007, 14648, 2110, + 7657, 1010, 3643, 10873, 1010, 1998, 17978, 5722, 1010, 5760, 23881, 17917, 2290, 2007, 28177, + 9331, 102 + ] + }, + { "text": "us-map-bubble", "ids": [101, 2149, 1011, 4949, 1011, 11957, 102] }, + { + "text": "group: bubble, cities, data, geography, map, usa\nwhat: US Bubble Map. Animated US bubble map with proportional city markers, value callouts, and connection lines, composable with us-map", + "ids": [ + 101, 2177, 1024, 11957, 1010, 3655, 1010, 2951, 1010, 10505, 1010, 4949, 1010, 3915, 2054, + 1024, 2149, 11957, 4949, 1012, 6579, 2149, 11957, 4949, 2007, 14267, 2103, 16387, 1010, 3643, + 2655, 12166, 1010, 1998, 4434, 3210, 1010, 4012, 6873, 19150, 2007, 2149, 1011, 4949, 102 + ] + }, + { "text": "us-map-flow", "ids": [101, 2149, 1011, 4949, 1011, 4834, 102] }, + { + "text": "group: arcs, connections, data, flow, geography, map, usa\nwhat: US Flow Map. Animated connection arcs between US cities over a base map, composable origin-destination flow visualization", + "ids": [ + 101, 2177, 1024, 29137, 1010, 7264, 1010, 2951, 1010, 4834, 1010, 10505, 1010, 4949, 1010, + 3915, 2054, 1024, 2149, 4834, 4949, 1012, 6579, 4434, 29137, 2090, 2149, 3655, 2058, 1037, + 2918, 4949, 1010, 4012, 6873, 19150, 4761, 1011, 7688, 4834, 5107, 3989, 102 + ] + }, + { "text": "us-map-hex", "ids": [101, 2149, 1011, 4949, 1011, 2002, 2595, 102] }, + { + "text": "group: data, geography, hexgrid, map, tilegrid, usa\nwhat: US Hex Grid Map. Animated hexagonal tile grid map, each state as an equal-weight hex with data fill and abbreviation label", + "ids": [ + 101, 2177, 1024, 2951, 1010, 10505, 1010, 2002, 2595, 16523, 3593, 1010, 4949, 1010, 14090, + 16523, 3593, 1010, 3915, 2054, 1024, 2149, 2002, 2595, 8370, 4949, 1012, 6579, 2002, 18684, + 20028, 14090, 8370, 4949, 1010, 2169, 2110, 2004, 2019, 5020, 1011, 3635, 2002, 2595, 2007, + 2951, 6039, 1998, 22498, 3830, 102 + ] + }, + { "text": "variable-axis-type", "ids": [101, 8023, 1011, 8123, 1011, 2828, 102] }, + { + "text": "group: axis, emphasize, kinetic-type, typography, variable-font\nwhat: Variable Axis Type. A locked one-line headline whose weight or width axis morphs into a decisive emphasis beat.\nuse_when: Jobs: emphasize. Profile: burst.", + "ids": [ + 101, 2177, 1024, 8123, 1010, 17902, 1010, 20504, 1011, 2828, 1010, 5939, 6873, 12565, 1010, + 8023, 1011, 15489, 2054, 1024, 8023, 8123, 2828, 1012, 1037, 5299, 2028, 1011, 2240, 17653, + 3005, 3635, 2030, 9381, 8123, 22822, 18757, 2046, 1037, 13079, 7902, 3786, 1012, 2224, 1035, + 2043, 1024, 5841, 1024, 17902, 1012, 6337, 1024, 6532, 1012, 102 + ] + }, + { "text": "variable-font-flex", "ids": [101, 8023, 1011, 15489, 1011, 23951, 102] }, + { + "text": "group: deterministic, emphasize, experiment, motion-primitive, text-effects, type, variable-font\nwhat: Variable Font Flex. A word lands while its variable-font weight and width axes flex from hairline-condensed to black-wide with per-character stagger; font-size eases inversely so the letterforms gain mass while the box holds.\nuse_when: Jobs: emphasize. Profile: axis-flex.", + "ids": [ + 101, 2177, 1024, 28283, 25300, 10074, 1010, 17902, 1010, 7551, 1010, 4367, 1011, 10968, 1010, + 3793, 1011, 3896, 1010, 2828, 1010, 8023, 1011, 15489, 2054, 1024, 8023, 15489, 23951, 1012, + 1037, 2773, 4915, 2096, 2049, 8023, 1011, 15489, 3635, 1998, 9381, 19589, 23951, 2013, 2606, + 4179, 1011, 25011, 2000, 2304, 1011, 2898, 2007, 2566, 1011, 2839, 2358, 27609, 1025, 15489, + 1011, 2946, 7496, 2015, 19262, 2135, 2061, 1996, 3661, 22694, 5114, 3742, 2096, 1996, 3482, + 4324, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 17902, 1012, 6337, 1024, 8123, 1011, 23951, + 1012, 102 + ] + }, + { "text": "vector-editor-rig", "ids": [101, 9207, 1011, 3559, 1011, 19838, 102] }, + { + "text": "group: app-chrome, bezier, demonstrate, design-tool, pen-tool, prop, ui-props, vector\nwhat: Vector Editor Rig. A dark design-tool app chrome with a live vector pen path, sequential anchor points, bezier handles, a selection frame, and theme-driven blue accents.\nuse_when: Jobs: demonstrate. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 10439, 1011, 18546, 1010, 2022, 21548, 1010, 10580, 1010, 2640, 1011, 6994, + 1010, 7279, 1011, 6994, 1010, 17678, 1010, 21318, 1011, 24387, 1010, 9207, 2054, 1024, 9207, + 3559, 19838, 1012, 1037, 2601, 2640, 1011, 6994, 10439, 18546, 2007, 1037, 2444, 9207, 7279, + 4130, 1010, 25582, 8133, 2685, 1010, 2022, 21548, 16024, 1010, 1037, 4989, 4853, 1010, 1998, + 4323, 1011, 5533, 2630, 24947, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 10580, 1012, 6337, + 1024, 2907, 3085, 1012, 102 + ] + }, + { "text": "velocity-throw-snap", "ids": [101, 10146, 1011, 5466, 1011, 10245, 102] }, + { + "text": "group: exhibit, feature-tour, motion-primitive, physics, rail, snap, throw, velocity\nwhat: Velocity Throw Snap. A five-shot rail whips past on a fast decaying curve, then overshoots and snaps the selected hero shot exactly to center.\nuse_when: Jobs: exhibit. Profile: kinetic.", + "ids": [ + 101, 2177, 1024, 8327, 1010, 3444, 1011, 2778, 1010, 4367, 1011, 10968, 1010, 5584, 1010, + 4334, 1010, 10245, 1010, 5466, 1010, 10146, 2054, 1024, 10146, 5466, 10245, 1012, 1037, 2274, + 1011, 2915, 4334, 11473, 2015, 2627, 2006, 1037, 3435, 13121, 2075, 7774, 1010, 2059, 15849, + 23416, 2015, 1998, 20057, 1996, 3479, 5394, 2915, 3599, 2000, 2415, 1012, 2224, 1035, 2043, + 1024, 5841, 1024, 8327, 1012, 6337, 1024, 20504, 1012, 102 + ] + }, + { "text": "version-plate-type", "ids": [101, 2544, 1011, 5127, 1011, 2828, 102] }, + { + "text": "group: Text effects.\nwhat: Oversized glyph plates stamp into a cluster, hard-cut to fitted words inside a selection box, then the box widens, shortens, closes on the letters, and pushes off frame.\nuse_when: A word sequence must read as text being manipulated one axis at a time by a visible selection box.\navoid_when: Avoid it when every word must retain its natural proportions, because resolved words are fitted to one constant ink width and the box separately changes width and height.", + "ids": [ + 101, 2177, 1024, 3793, 3896, 1012, 2054, 1024, 21698, 1043, 2135, 8458, 7766, 11359, 2046, + 1037, 9324, 1010, 2524, 1011, 3013, 2000, 7130, 2616, 2503, 1037, 4989, 3482, 1010, 2059, + 1996, 3482, 21255, 2015, 1010, 2460, 6132, 1010, 14572, 2006, 1996, 4144, 1010, 1998, 13956, + 2125, 4853, 1012, 2224, 1035, 2043, 1024, 1037, 2773, 5537, 2442, 3191, 2004, 3793, 2108, + 20063, 2028, 8123, 2012, 1037, 2051, 2011, 1037, 5710, 4989, 3482, 1012, 4468, 1035, 2043, + 1024, 4468, 2009, 2043, 2296, 2773, 2442, 9279, 2049, 3019, 19173, 1010, 2138, 10395, 2616, + 2024, 7130, 2000, 2028, 5377, 10710, 9381, 1998, 1996, 3482, 10329, 3431, 9381, 1998, 4578, + 1012, 102 + ] + }, + { "text": "vfx-iphone-device", "ids": [101, 1058, 2546, 2595, 1011, 18059, 1011, 5080, 102] }, + { + "text": "group: 3d, device, gltf, html-in-canvas, iphone, macbook\nwhat: iPhone & MacBook 3D Showcase. Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product review camera choreography, and 360° turntable.", + "ids": [ + 101, 2177, 1024, 7605, 1010, 5080, 1010, 1043, 7096, 2546, 1010, 16129, 1011, 1999, 1011, + 10683, 1010, 18059, 1010, 6097, 8654, 2054, 1024, 18059, 1004, 6097, 8654, 7605, 13398, 1012, + 2613, 1043, 7096, 2546, 18059, 2321, 4013, 4098, 1998, 6097, 8654, 4013, 4275, 2007, 2444, + 16129, 1011, 1999, 1011, 10683, 3898, 4180, 1010, 22822, 21850, 3070, 3221, 10014, 1010, 4031, + 3319, 4950, 16967, 1010, 1998, 9475, 7737, 2735, 10880, 1012, 102 + ] + }, + { "text": "vfx-liquid-background", "ids": [101, 1058, 2546, 2595, 1011, 6381, 1011, 4281, 102] }, + { + "text": "group: background, displacement, html-in-canvas, liquid, webgl\nwhat: Liquid Background. Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics.", + "ids": [ + 101, 2177, 1024, 4281, 1010, 13508, 1010, 16129, 1011, 1999, 1011, 10683, 1010, 6381, 1010, + 4773, 23296, 2054, 1024, 6381, 4281, 1012, 7554, 6381, 12504, 2007, 19449, 13508, 2006, 1037, + 15369, 4946, 1012, 16129, 4180, 24885, 2682, 10973, 14353, 8331, 3302, 2007, 2613, 1011, 2051, + 4400, 10949, 1012, 102 + ] + }, + { "text": "vfx-liquid-glass", "ids": [101, 1058, 2546, 2595, 1011, 6381, 1011, 3221, 102] }, + { + "text": "group: html-in-canvas, webgl\nwhat: Liquid Glass. VFX composition block", + "ids": [ + 101, 2177, 1024, 16129, 1011, 1999, 1011, 10683, 1010, 4773, 23296, 2054, 1024, 6381, 3221, + 1012, 1058, 2546, 2595, 5512, 3796, 102 + ] + }, + { "text": "vfx-magnetic", "ids": [101, 1058, 2546, 2595, 1011, 8060, 102] }, + { + "text": "group: html-in-canvas, webgl\nwhat: Magnetic. VFX composition block", + "ids": [ + 101, 2177, 1024, 16129, 1011, 1999, 1011, 10683, 1010, 4773, 23296, 2054, 1024, 8060, 1012, + 1058, 2546, 2595, 5512, 3796, 102 + ] + }, + { "text": "vfx-portal", "ids": [101, 1058, 2546, 2595, 1011, 9445, 102] }, + { + "text": "group: html-in-canvas, webgl\nwhat: Portal. VFX composition block", + "ids": [ + 101, 2177, 1024, 16129, 1011, 1999, 1011, 10683, 1010, 4773, 23296, 2054, 1024, 9445, 1012, + 1058, 2546, 2595, 5512, 3796, 102 + ] + }, + { "text": "vfx-shatter", "ids": [101, 1058, 2546, 2595, 1011, 27271, 102] }, + { + "text": "group: html-in-canvas, webgl\nwhat: Shatter. VFX composition block", + "ids": [ + 101, 2177, 1024, 16129, 1011, 1999, 1011, 10683, 1010, 4773, 23296, 2054, 1024, 27271, 1012, + 1058, 2546, 2595, 5512, 3796, 102 + ] + }, + { + "text": "vfx-text-cursor", + "ids": [101, 1058, 2546, 2595, 1011, 3793, 1011, 12731, 25301, 2099, 102] + }, + { + "text": "group: chromatic, cursor, html-in-canvas, shader, text\nwhat: VFX Text Cursor. Dramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage. Canvas-based shader post-processing with spectral color edges.", + "ids": [ + 101, 2177, 1024, 10381, 23645, 1010, 12731, 25301, 2099, 1010, 16129, 1011, 1999, 1011, 10683, + 1010, 8703, 2099, 1010, 3793, 2054, 1024, 1058, 2546, 2595, 3793, 12731, 25301, 2099, 1012, + 6918, 3793, 7487, 2007, 12731, 25301, 2099, 8652, 1010, 10381, 23645, 5192, 9938, 1010, 1998, + 20396, 7497, 2006, 1037, 2304, 2754, 1012, 10683, 1011, 2241, 8703, 2099, 2695, 1011, 6364, + 2007, 17435, 3609, 7926, 1012, 102 + ] + }, + { "text": "vignette", "ids": [101, 6819, 10177, 4674, 102] }, + { + "text": "group: cinematic, effect, overlay, vignette\nwhat: Vignette. Cinematic radial vignette overlay using a pure-CSS gradient, darkens the edges to pull focus toward the center", + "ids": [ + 101, 2177, 1024, 21014, 1010, 3466, 1010, 2058, 8485, 1010, 6819, 10177, 4674, 2054, 1024, + 6819, 10177, 4674, 1012, 21014, 15255, 6819, 10177, 4674, 2058, 8485, 2478, 1037, 5760, 1011, + 20116, 2015, 17978, 1010, 2601, 6132, 1996, 7926, 2000, 4139, 3579, 2646, 1996, 2415, 102 + ] + }, + { "text": "vox-annotate", "ids": [101, 29450, 1011, 5754, 17287, 2618, 102] }, + { + "text": "group: annotation, deterministic, emphasize, marker, motion-primitive, text-effects, typography\nwhat: Vox Annotate. The Vox-style annotate gesture: a keyword in a held sentence gets a hand-drawn marker while a thin connector draws up to a mono callout label, all as one choreographed beat on the cue.\nuse_when: Jobs: emphasize. Profile: emphasis.", + "ids": [ + 101, 2177, 1024, 5754, 17287, 3508, 1010, 28283, 25300, 10074, 1010, 17902, 1010, 12115, 1010, + 4367, 1011, 10968, 1010, 3793, 1011, 3896, 1010, 5939, 6873, 12565, 2054, 1024, 29450, 5754, + 17287, 2618, 1012, 1996, 29450, 1011, 2806, 5754, 17287, 2618, 9218, 1024, 1037, 3145, 18351, + 1999, 1037, 2218, 6251, 4152, 1037, 2192, 1011, 4567, 12115, 2096, 1037, 4857, 19400, 9891, + 2039, 2000, 1037, 18847, 2655, 5833, 3830, 1010, 2035, 2004, 2028, 23317, 3786, 2006, 1996, + 16091, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 17902, 1012, 6337, 1024, 7902, 1012, 102 + ] + }, + { "text": "vpn-youtube-spot", "ids": [101, 21210, 2078, 1011, 7858, 1011, 3962, 102] }, + { + "text": "group: app, sfx, showcase, youtube\nwhat: VPN YouTube Spot. Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects.", + "ids": [ + 101, 2177, 1024, 10439, 1010, 16420, 2595, 1010, 13398, 1010, 7858, 2054, 1024, 21210, 2078, + 7858, 3962, 1012, 10245, 7685, 6207, 1011, 2806, 7858, 19274, 4760, 1037, 3042, 4531, 1998, + 23658, 1037, 5379, 21210, 2078, 10439, 2007, 2614, 3896, 1012, 102 + ] + }, + { "text": "whip-pan", "ids": [101, 11473, 1011, 6090, 102] }, + { + "text": "group: shader, transition\nwhat: Whip Pan. Shader transition simulating a fast camera whip pan", + "ids": [ + 101, 2177, 1024, 8703, 2099, 1010, 6653, 2054, 1024, 11473, 6090, 1012, 8703, 2099, 6653, + 21934, 10924, 1037, 3435, 4950, 11473, 6090, 102 + ] + }, + { "text": "whip-pan-cut", "ids": [101, 11473, 1011, 6090, 1011, 3013, 102] }, + { + "text": "group: bridge, motion-blur, slots, speed-ramp, transition, transitions, velocity-match, whip-pan\nwhat: Whip Pan Cut. A full-frame whip pan: scene A whips off laterally with capped directional motion blur while scene B enters in the same direction at matched velocity, on a speed-ramp profile with a decelerating catch. Both scenes ride one strip, so seam velocity is exact by construction. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.\nuse_when: Jobs: bridge. Profile: transition.", + "ids": [ + 101, 2177, 1024, 2958, 1010, 4367, 1011, 14819, 1010, 19832, 1010, 3177, 1011, 13276, 1010, + 6653, 1010, 22166, 1010, 10146, 1011, 2674, 1010, 11473, 1011, 6090, 2054, 1024, 11473, 6090, + 3013, 1012, 1037, 2440, 1011, 4853, 11473, 6090, 1024, 3496, 1037, 11473, 2015, 2125, 11457, + 2135, 2007, 13880, 20396, 4367, 14819, 2096, 3496, 1038, 8039, 1999, 1996, 2168, 3257, 2012, + 10349, 10146, 1010, 2006, 1037, 3177, 1011, 13276, 6337, 2007, 1037, 11703, 12260, 15172, + 4608, 1012, 2119, 5019, 4536, 2028, 6167, 1010, 2061, 25180, 10146, 2003, 6635, 2011, 2810, + 1012, 20587, 2015, 6039, 1996, 2315, 2077, 1013, 2044, 10453, 9320, 1025, 19204, 1011, 13650, + 12398, 2015, 17552, 2043, 1037, 10453, 2003, 2187, 4064, 1012, 2224, 1035, 2043, 1024, 5841, + 1024, 2958, 1012, 6337, 1024, 6653, 1012, 102 + ] + }, + { "text": "whiteboard-ink", "ids": [101, 2317, 6277, 1011, 10710, 102] }, + { + "text": "group: Annotation.\nwhat: SVG paths draw one stroke at a time while a pen nib follows each active path tip and hops between strokes.\nuse_when: A preset or caller-supplied SVG sketch needs sequential ink drawing with a traveling pen actor and a caption after completion.\navoid_when: Avoid supplying non-path slot content, because only path elements inside the strokes group become the drawing.", + "ids": [ + 101, 2177, 1024, 5754, 17287, 3508, 1012, 2054, 1024, 17917, 2290, 10425, 4009, 2028, 6909, + 2012, 1037, 2051, 2096, 1037, 7279, 9152, 2497, 4076, 2169, 3161, 4130, 5955, 1998, 6154, + 2015, 2090, 13692, 1012, 2224, 1035, 2043, 1024, 1037, 3653, 13462, 2030, 20587, 1011, 8127, + 17917, 2290, 11080, 3791, 25582, 10710, 5059, 2007, 1037, 7118, 7279, 3364, 1998, 1037, 14408, + 3258, 2044, 6503, 1012, 4468, 1035, 2043, 1024, 4468, 17731, 2512, 1011, 4130, 10453, 4180, + 1010, 2138, 2069, 4130, 3787, 2503, 1996, 13692, 2177, 2468, 1996, 5059, 1012, 102 + ] + }, + { "text": "wordmark-tiles", "ids": [101, 2773, 10665, 1011, 13262, 102] }, + { + "text": "group: raster, reveal, tiles, typography, wordmark\nwhat: Wordmark Tiles. A wordmark resolves from deterministic color noise into correctly cropped glyph tiles through a spatially modulated GSAP wave.\nuse_when: Jobs: reveal. Profile: holdable.", + "ids": [ + 101, 2177, 1024, 20710, 3334, 1010, 7487, 1010, 13262, 1010, 5939, 6873, 12565, 1010, 2773, + 10665, 2054, 1024, 2773, 10665, 13262, 1012, 1037, 2773, 10665, 10663, 2015, 2013, 28283, + 25300, 10074, 3609, 5005, 2046, 11178, 10416, 5669, 1043, 2135, 8458, 13262, 2083, 1037, + 13589, 2135, 16913, 8898, 28177, 9331, 4400, 1012, 2224, 1035, 2043, 1024, 5841, 1024, 7487, + 1012, 6337, 1024, 2907, 3085, 1012, 102 + ] + }, + { "text": "world-map", "ids": [101, 2088, 1011, 4949, 102] }, + { + "text": "group: choropleth, data, geography, map, world\nwhat: World Map. Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset, D3 Natural Earth projection", + "ids": [ + 101, 2177, 1024, 16480, 18981, 7485, 2232, 1010, 2951, 1010, 10505, 1010, 4949, 1010, 2088, + 2054, 1024, 2088, 4949, 1012, 6579, 2088, 16480, 18981, 7485, 2232, 2007, 2406, 1011, 2011, + 1011, 2406, 7487, 1010, 6994, 25101, 10873, 1010, 1998, 13618, 7595, 16021, 3388, 1010, 1040, + 2509, 3019, 3011, 13996, 102 + ] + }, + { "text": "x-follow-card", "ids": [101, 1060, 1011, 3582, 1011, 4003, 102] }, + { + "text": "group: remocn-port, social-overlay\nwhat: X Follow Card. A social follow card with avatar, handle, and follower motion.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 2591, 1011, 2058, 8485, 2054, 1024, + 1060, 3582, 4003, 1012, 1037, 2591, 3582, 4003, 2007, 22128, 1010, 5047, 1010, 1998, 22399, + 4367, 1012, 102 + ] + }, + { "text": "x-followers-overview", "ids": [101, 1060, 1011, 8771, 1011, 19184, 102] }, + { + "text": "group: remocn-port, social-overlay\nwhat: X Followers Overview. A social analytics card with count-up and audience pills.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 2591, 1011, 2058, 8485, 2054, 1024, + 1060, 8771, 19184, 1012, 1037, 2591, 25095, 4003, 2007, 4175, 1011, 2039, 1998, 4378, 15345, + 1012, 102 + ] + }, + { "text": "x-post", "ids": [101, 1060, 1011, 2695, 102] }, + { + "text": "group: overlay, social, twitter\nwhat: X Post Card. Animated X/Twitter post card overlay with engagement metrics", + "ids": [ + 101, 2177, 1024, 2058, 8485, 1010, 2591, 1010, 10474, 2054, 1024, 1060, 2695, 4003, 1012, + 6579, 1060, 1013, 10474, 2695, 4003, 2058, 8485, 2007, 8147, 12046, 2015, 102 + ] + }, + { "text": "yt-lower-third", "ids": [101, 1061, 2102, 1011, 2896, 1011, 2353, 102] }, + { + "text": "group: overlay, social, youtube\nwhat: YouTube Lower Third. Animated YouTube subscribe lower third with avatar and channel info", + "ids": [ + 101, 2177, 1024, 2058, 8485, 1010, 2591, 1010, 7858, 2054, 1024, 7858, 2896, 2353, 1012, 6579, + 7858, 4942, 29234, 2896, 2353, 2007, 22128, 1998, 3149, 18558, 102 + ] + }, + { "text": "z-punch-through", "ids": [101, 1062, 1011, 8595, 1011, 2083, 102] }, + { + "text": "group: Transitions.\nwhat: The camera moves through an opening in a front wall as that wall passes the lens and the back plane advances into its settled state.\nuse_when: A scene change must feel like forward travel through an aperture rather than a flat scale zoom.\navoid_when: Avoid it when the clip needs a hold, because the documented 2.10-second envelope is filled by the move and has no hold.", + "ids": [ + 101, 2177, 1024, 22166, 1012, 2054, 1024, 1996, 4950, 5829, 2083, 2019, 3098, 1999, 1037, + 2392, 2813, 2004, 2008, 2813, 5235, 1996, 10014, 1998, 1996, 2067, 4946, 9849, 2046, 2049, + 3876, 2110, 1012, 2224, 1035, 2043, 1024, 1037, 3496, 2689, 2442, 2514, 2066, 2830, 3604, + 2083, 2019, 18892, 2738, 2084, 1037, 4257, 4094, 24095, 1012, 4468, 1035, 2043, 1024, 4468, + 2009, 2043, 1996, 12528, 3791, 1037, 2907, 1010, 2138, 1996, 8832, 1016, 1012, 2184, 1011, + 2117, 11255, 2003, 3561, 2011, 1996, 2693, 1998, 2038, 2053, 2907, 1012, 102 + ] + }, + { "text": "zoom-through-transition", "ids": [101, 24095, 1011, 2083, 1011, 6653, 102] }, + { + "text": "group: remocn-port, transition-primitive\nwhat: Zoom Through Transition. A transition that zooms through a focal card into the next scene.", + "ids": [ + 101, 2177, 1024, 2128, 5302, 2278, 2078, 1011, 3417, 1010, 6653, 1011, 10968, 2054, 1024, + 24095, 2083, 6653, 1012, 1037, 6653, 2008, 24095, 2015, 2083, 1037, 15918, 4003, 2046, 1996, + 2279, 3496, 1012, 102 + ] + } +] diff --git a/packages/cli/src/registry/localEmbedder.ts b/packages/cli/src/registry/localEmbedder.ts new file mode 100644 index 0000000000..7ccd041dd6 --- /dev/null +++ b/packages/cli/src/registry/localEmbedder.ts @@ -0,0 +1,122 @@ +/** + * On-device embeddings for local semantic search. + * + * Runs bge-small-en-v1.5 through the ONNX runtime the CLI already depends on, + * with the WordPiece tokenizer in `wordpiece.ts`. Nothing is sent anywhere and + * nothing costs money once the model is cached. + * + * Two details are specific to bge and easy to miss. Pooling takes the CLS token + * rather than a mean over the sequence, and short queries carry an instruction + * prefix that passages do not. Getting either wrong degrades retrieval quietly + * rather than failing, so both are asserted in tests. + */ + +import { readFileSync } from "node:fs"; + +import { + LOCAL_MODEL_DIMENSIONS, + QUERY_INSTRUCTION, + localModelPath, + localTokenizerPath, +} from "./localModel.js"; +import { configFromTokenizerJson, encode } from "./wordpiece.js"; + +export interface LocalEmbedder { + embed(texts: string[], options?: { isQuery?: boolean }): Promise; +} + +/** Long inputs are truncated rather than rejected; the model has a 512 token limit. */ +const MAX_TOKENS = 512; + +/** + * Is the native ONNX runtime reachable in this install? + * + * It cannot be bundled: a single-file build leaves `onnxruntime-node` as an + * unresolved import, so on-device search is unavailable there no matter what + * else is on disk. Checking costs one dynamic import and saves a pointless + * 32 MB download. + */ +export async function localRuntimeAvailable(): Promise { + try { + await import("onnxruntime-node"); + return true; + } catch { + return false; + } +} + +export async function loadLocalEmbedder(): Promise { + // Imported lazily so the CLI does not pay for the ONNX runtime on every run. + const ort = await import("onnxruntime-node"); + const config = configFromTokenizerJson(readFileSync(localTokenizerPath(), "utf-8")); + const session = await ort.InferenceSession.create(localModelPath()); + + return { + async embed(texts, options) { + if (texts.length === 0) return []; + const prefix = options?.isQuery ? QUERY_INSTRUCTION : ""; + const encodings = texts.map((text) => truncate(encode(prefix + text, config))); + const width = Math.max(...encodings.map((e) => e.ids.length)); + + const batch = encodings.length; + const ids = new BigInt64Array(batch * width); + const mask = new BigInt64Array(batch * width); + const types = new BigInt64Array(batch * width); + encodings.forEach((encoding, row) => { + encoding.ids.forEach((id, column) => { + const at = row * width + column; + ids[at] = BigInt(id); + mask[at] = 1n; + types[at] = 0n; + }); + // Remaining positions stay zero: padded ids with a zero attention mask, + // which the model must not attend to. + }); + + const dims = [batch, width]; + const output = await session.run({ + input_ids: new ort.Tensor("int64", ids, dims), + attention_mask: new ort.Tensor("int64", mask, dims), + token_type_ids: new ort.Tensor("int64", types, dims), + }); + + const hidden = output["last_hidden_state"]; + if (!hidden) throw new Error("model returned no last_hidden_state"); + const data = hidden.data as Float32Array; + const hiddenSize = hidden.dims[2] as number; + if (hiddenSize !== LOCAL_MODEL_DIMENSIONS) { + throw new Error( + `model produced ${hiddenSize} dimensions, expected ${LOCAL_MODEL_DIMENSIONS}`, + ); + } + + return encodings.map((_, row) => { + // CLS pooling: bge trains the first token as the sequence representation. + // Mean pooling here would produce vectors that look fine and rank worse. + const start = row * width * hiddenSize; + return normalize(Array.from(data.subarray(start, start + hiddenSize))); + }); + }, + }; +} + +function truncate(encoding: ReturnType): ReturnType { + if (encoding.ids.length <= MAX_TOKENS) return encoding; + // Keep the closing separator so the sequence still ends the way the model expects. + const ids = [ + ...encoding.ids.slice(0, MAX_TOKENS - 1), + encoding.ids[encoding.ids.length - 1] as number, + ]; + return { ids, attentionMask: ids.map(() => 1), tokenTypeIds: ids.map(() => 0) }; +} + +function normalize(vector: number[]): number[] { + const norm = Math.sqrt(vector.reduce((sum, value) => sum + value * value, 0)); + return norm === 0 ? vector : vector.map((value) => value / norm); +} + +export function cosine(a: number[], b: number[]): number { + let sum = 0; + for (let i = 0; i < a.length; i += 1) sum += (a[i] as number) * (b[i] as number); + return sum; +} diff --git a/packages/cli/src/registry/localModel.test.ts b/packages/cli/src/registry/localModel.test.ts new file mode 100644 index 0000000000..b75747d917 --- /dev/null +++ b/packages/cli/src/registry/localModel.test.ts @@ -0,0 +1,206 @@ +import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; + +const readConfig = vi.fn(); +const writeConfig = vi.fn(); +const existsSync = vi.fn(); +const readFileSync = vi.fn(); +const unlinkSync = vi.fn(); +const downloadFile = vi.fn(); +const digest = vi.fn(); + +vi.mock("../telemetry/config.js", () => ({ + readConfig: () => readConfig(), + writeConfig: (c: unknown) => writeConfig(c), +})); +vi.mock("node:fs", async (importOriginal) => ({ + ...(await importOriginal()), + existsSync: (p: string) => existsSync(p), + mkdirSync: vi.fn(), + readFileSync: (p: string) => readFileSync(p), + unlinkSync: (p: string) => unlinkSync(p), +})); +vi.mock("node:crypto", () => ({ + createHash: () => { + const hash = { + update: () => hash, + digest: () => digest(), + }; + return hash; + }, +})); +vi.mock("../utils/download.js", () => ({ + downloadFile: (...args: unknown[]) => downloadFile(...args), +})); + +const { + LOCAL_MODEL_DIMENSIONS, + LOCAL_MODEL_ARTIFACTS, + LOCAL_MODEL_SIZE_MB, + QUERY_INSTRUCTION, + downloadOfferMessage, + ensureLocalModel, + isLocalModelReady, + localModelConsent, + localModelStatus, + localTokenizerPath, + localModelPath, + recordLocalModelConsent, +} = await import("./localModel.js"); + +function returnMatchingDigests(rounds = 1): void { + for (let round = 0; round < rounds; round += 1) { + for (const artifact of LOCAL_MODEL_ARTIFACTS) digest.mockReturnValueOnce(artifact.sha256); + } +} + +function makeDownloadsAppearOnDisk(): void { + const present = new Set(); + existsSync.mockImplementation((path: string) => present.has(path)); + downloadFile.mockImplementation(async (_url: string, path: string) => { + present.add(path); + }); +} + +beforeEach(() => { + readConfig.mockReturnValue({}); + existsSync.mockReturnValue(false); + writeConfig.mockReset(); + readFileSync.mockReturnValue(Buffer.from("artifact")); + unlinkSync.mockReset(); + downloadFile.mockReset(); + digest.mockReset(); +}); + +afterEach(() => vi.clearAllMocks()); + +describe("consent state", () => { + it("reports never-asked as undefined", () => { + expect(localModelConsent()).toBeUndefined(); + }); + + it("persists a yes", () => { + readConfig.mockReturnValue({ telemetryEnabled: true }); + recordLocalModelConsent(true); + expect(writeConfig).toHaveBeenCalledWith( + expect.objectContaining({ localEmbeddingEnabled: true }), + ); + }); + + it("persists a no without discarding other settings", () => { + readConfig.mockReturnValue({ telemetryEnabled: false, anonymousId: "abc" }); + recordLocalModelConsent(false); + expect(writeConfig).toHaveBeenCalledWith( + expect.objectContaining({ localEmbeddingEnabled: false, anonymousId: "abc" }), + ); + }); +}); + +describe("readiness", () => { + it("needs both the model and its tokenizer", () => { + // A model without its tokenizer cannot turn text into tensors, so half a + // download is not a usable state. + existsSync.mockImplementation((p: string) => p === localModelPath()); + expect(isLocalModelReady()).toBe(false); + + existsSync.mockImplementation((p: string) => p === localTokenizerPath()); + expect(isLocalModelReady()).toBe(false); + + existsSync.mockReturnValue(true); + returnMatchingDigests(); + expect(isLocalModelReady()).toBe(true); + }); + + it("rejects present files whose digest does not match the pinned revision", () => { + existsSync.mockReturnValue(true); + digest.mockReturnValue("wrong"); + + expect(isLocalModelReady()).toBe(false); + }); + + it("bounds each download and rejects a digest mismatch before reporting ready", async () => { + makeDownloadsAppearOnDisk(); + digest.mockReturnValue("wrong"); + + expect(await ensureLocalModel()).toBe(false); + expect(downloadFile).toHaveBeenCalledWith( + expect.stringContaining("model_quantized.onnx"), + localModelPath(), + { maxBytes: 34_014_426 }, + ); + expect(unlinkSync).toHaveBeenCalledWith(localModelPath()); + }); + + it("accepts only two bounded downloads that match both pinned digests", async () => { + makeDownloadsAppearOnDisk(); + returnMatchingDigests(2); + + expect(await ensureLocalModel()).toBe(true); + expect(downloadFile).toHaveBeenNthCalledWith( + 2, + expect.stringContaining("tokenizer.json"), + localTokenizerPath(), + { maxBytes: 711_396 }, + ); + }); +}); + +describe("status", () => { + it("is declined when the user said no, even if files somehow exist", () => { + readConfig.mockReturnValue({ localEmbeddingEnabled: false }); + existsSync.mockReturnValue(true); + expect(localModelStatus()).toEqual({ status: "declined" }); + }); + + it("is ready when consented and downloaded", () => { + readConfig.mockReturnValue({ localEmbeddingEnabled: true }); + existsSync.mockReturnValue(true); + returnMatchingDigests(); + expect(localModelStatus()).toEqual({ status: "ready" }); + }); + + it("is not-asked when never answered and nothing downloaded", () => { + expect(localModelStatus()).toEqual({ status: "not-asked" }); + }); + + it("is unavailable when consented but not yet downloaded", () => { + readConfig.mockReturnValue({ localEmbeddingEnabled: true }); + expect(localModelStatus().status).toBe("unavailable"); + }); + + it("never downloads or prompts by itself", () => { + // The caller owns the prompt, because only it knows whether word matching + // already answered well enough to make the offer pointless. + expect(() => localModelStatus()).not.toThrow(); + expect(writeConfig).not.toHaveBeenCalled(); + }); +}); + +describe("the offer text", () => { + it("names the cost rather than implying a privacy tradeoff", () => { + const message = downloadOfferMessage(0); + expect(message).toContain(`${LOCAL_MODEL_SIZE_MB} MB`); + expect(message).toMatch(/stays on your machine/); + expect(message).toMatch(/nothing is sent/); + }); + + it("leads with what the user just saw", () => { + expect(downloadOfferMessage(0)).toMatch(/^No matches/); + expect(downloadOfferMessage(1)).toMatch(/^Only 1 match\b/); + expect(downloadOfferMessage(3)).toMatch(/^Only 3 matches/); + }); + + it("does not claim word search already ran for an explicit on-device request", () => { + expect(downloadOfferMessage()).toMatch(/^Use on-device meaning search/); + }); +}); + +describe("model contract", () => { + it("uses the dimension the bundled vectors are built at", () => { + expect(LOCAL_MODEL_DIMENSIONS).toBe(384); + }); + + it("carries the query instruction bge retrieval expects", () => { + // Omitting this measurably degrades short-query retrieval for bge models. + expect(QUERY_INSTRUCTION).toMatch(/searching relevant passages/); + }); +}); diff --git a/packages/cli/src/registry/localModel.ts b/packages/cli/src/registry/localModel.ts new file mode 100644 index 0000000000..0389c8cd11 --- /dev/null +++ b/packages/cli/src/registry/localModel.ts @@ -0,0 +1,184 @@ +/** + * The on-device embedding model behind local semantic search. + * + * Downloading roughly 33 MB to someone's disk is worth asking about. This is + * not a privacy question, because nothing leaves the machine, so the prompt + * says what it actually costs: disk and bandwidth. Borrowing privacy language + * here would misdescribe it. + * + * The CLI already downloads a much larger model for background removal without + * asking, and that is defensible there: running that command is itself a + * request for a model. Searching a catalog is not, so a download arriving + * mid-search would be a surprise. That difference is why this asks and that + * does not. + */ + +import { createHash } from "node:crypto"; +import { existsSync, mkdirSync, readFileSync, unlinkSync } from "node:fs"; +import { homedir } from "node:os"; +import { join } from "node:path"; + +import { downloadFile } from "../utils/download.js"; +import { readConfig, writeConfig } from "../telemetry/config.js"; + +/** + * bge-small-en-v1.5: 62.17 MTEB average against 62.3 for the hosted model this + * substitutes for, at 384 dimensions instead of 1536. Chosen for being close to + * parity while small enough to ship, not for being a weaker tier. + */ +export const LOCAL_MODEL_ID = "bge-small-en-v1.5"; +export const LOCAL_MODEL_DIMENSIONS = 384; +/** Measured: 32 MB quantized model plus a 0.7 MB tokenizer. */ +export const LOCAL_MODEL_SIZE_MB = 33; + +/** bge retrieval expects short queries to carry this prefix; passages do not. */ +export const QUERY_INSTRUCTION = "Represent this sentence for searching relevant passages: "; + +const MODELS_DIR = join(homedir(), ".hyperframes", "models"); + +/** + * Where the two halves come from. + * + * Pinned to a revision rather than to `main`: a model that silently changes + * under a cached vector set would return confident nonsense, because the + * catalog vectors were produced by a specific set of weights. + */ +const MODEL_REPO = "Xenova/bge-small-en-v1.5"; +export const LOCAL_MODEL_REVISION = "ea104dacec62c0de699686887e3f920caeb4f3e3"; + +/** + * The quantized export, 32 MB, not the 126 MB full-precision one. + * + * The size this feature quotes has always described the quantized build. The + * catalog vectors must be produced by this same file: embedding the catalog + * with one precision and the query with another degrades ranking silently, + * which is the failure mode this whole feature keeps having to defend against. + */ +interface ModelFile { + readonly url: string; + readonly dest: () => string; + readonly bytes: number; + readonly sha256: string; +} + +export const LOCAL_MODEL_ARTIFACTS: ReadonlyArray = [ + { + url: `https://huggingface.co/${MODEL_REPO}/resolve/${LOCAL_MODEL_REVISION}/onnx/model_quantized.onnx`, + dest: () => localModelPath(), + bytes: 34_014_426, + sha256: "6c9c6101a956d62dfb5e7190c538226c0c5bb9cb27b651234b6df063ee7dbfe4", + }, + { + url: `https://huggingface.co/${MODEL_REPO}/resolve/${LOCAL_MODEL_REVISION}/tokenizer.json`, + dest: () => localTokenizerPath(), + bytes: 711_396, + sha256: "d241a60d5e8f04cc1b2b3e9ef7a4921b27bf526d9f6050ab90f9267a1f9e5c66", + }, +]; + +export type LocalModelDecision = boolean | undefined; + +export function localModelConsent(): LocalModelDecision { + return readConfig().localEmbeddingEnabled; +} + +export function recordLocalModelConsent(enabled: boolean): void { + writeConfig({ ...readConfig(), localEmbeddingEnabled: enabled }); +} + +export function localModelPath(): string { + return join(MODELS_DIR, `${LOCAL_MODEL_ID}.onnx`); +} + +export function localTokenizerPath(): string { + return join(MODELS_DIR, `${LOCAL_MODEL_ID}.tokenizer.json`); +} + +function modelFileIsValid(file: ModelFile): boolean { + const path = file.dest(); + if (!existsSync(path)) return false; + try { + return createHash("sha256").update(readFileSync(path)).digest("hex") === file.sha256; + } catch { + return false; + } +} + +/** Both halves must match the pinned revision. Presence alone cannot establish readiness. */ +export function isLocalModelReady(): boolean { + return LOCAL_MODEL_ARTIFACTS.every(modelFileIsValid); +} + +export type LocalModelStatus = + | { status: "ready" } + | { status: "declined" } + | { status: "not-asked" } + | { status: "unavailable"; reason: string }; + +/** + * Resolve whether local semantic search can run right now. + * + * Deliberately does not prompt. The caller owns that, because only the caller + * knows whether word matching already answered well enough to make the offer + * pointless. Consent has one owner, which is the lesson the smart-search flag + * taught when it was checked in two places and the override became a no-op. + */ +export function localModelStatus(): LocalModelStatus { + const consent = localModelConsent(); + if (consent === false) return { status: "declined" }; + if (isLocalModelReady()) return { status: "ready" }; + if (consent === undefined) return { status: "not-asked" }; + return { status: "unavailable", reason: "model not downloaded yet" }; +} + +/** + * Put the model on disk, once. + * + * Returns false rather than throwing: a failed download costs the offline tier, + * never the command, and the caller says so. Both halves are fetched before + * either is reported ready, because a model without its tokenizer embeds + * nothing and would fail later at a less obvious place. + */ +export async function ensureLocalModel(): Promise { + if (isLocalModelReady()) return true; + try { + mkdirSync(MODELS_DIR, { recursive: true }); + for (const file of LOCAL_MODEL_ARTIFACTS) { + if (modelFileIsValid(file)) continue; + const dest = file.dest(); + await downloadFile(file.url, dest, { maxBytes: file.bytes }); + if (!modelFileIsValid(file)) { + unlinkSync(dest); + return false; + } + } + return isLocalModelReady(); + } catch { + return false; + } +} + +/** + * What to print when nobody can be asked. + * + * An agent or CI run has no one to prompt, and it must not decide a download + * onto someone's disk by itself. So it is told what to ask and which flag + * records the answer. Passing the flag is the human's yes, not the agent's. + */ +export function nonInteractiveConsentMessage(): string { + return ( + `On-device search needs a one-time ${LOCAL_MODEL_SIZE_MB} MB download that stays on this machine. ` + + "Nothing is sent anywhere. Ask the person you are working for, and pass --on-device --yes once they agree." + ); +} + +/** What the prompt should say. Costs, not privacy: nothing is sent anywhere. */ +export function downloadOfferMessage(matchCount?: number): string { + const found = + matchCount === undefined + ? "Use on-device meaning search." + : matchCount === 0 + ? "No matches from word search." + : `Only ${matchCount} match${matchCount === 1 ? "" : "es"} from word search.`; + return `${found} Download a ${LOCAL_MODEL_SIZE_MB} MB search model for better offline results? It stays on your machine and nothing is sent.`; +} diff --git a/packages/cli/src/registry/localSearch.test.ts b/packages/cli/src/registry/localSearch.test.ts new file mode 100644 index 0000000000..056846de11 --- /dev/null +++ b/packages/cli/src/registry/localSearch.test.ts @@ -0,0 +1,97 @@ +import { describe, expect, it } from "vitest"; + +import { rankByWords, searchByWords, tokenize } from "./localSearch.js"; + +interface Item { + name: string; + text: string; +} + +const ITEMS: Item[] = [ + { name: "whip-pan", text: "A fast camera whip blurs between two shots at speed." }, + { name: "number-wheel", text: "A rolling digit counter settles on its final value." }, + { name: "text-reveal", text: "Type reveals line by line beneath a mask." }, +]; + +const textOf = (item: Item) => item.text; + +describe("tokenize", () => { + it("drops stop words", () => { + expect(tokenize("the camera and the shot")).toEqual(["camera", "shot"]); + }); + + it("drops tokens of three characters or fewer", () => { + expect(tokenize("ab abc abcd")).toEqual(["abc", "abcd"]); + }); + + it("lowercases and strips punctuation and digits", () => { + expect(tokenize("Camera, pushes 42 times!")).toEqual(["camera", "pushes", "times"]); + }); + + it("returns nothing for a query made only of stop words", () => { + expect(tokenize("the and or of")).toEqual([]); + }); +}); + +describe("rankByWords", () => { + it("ranks the entry sharing the most vocabulary first", () => { + expect(rankByWords("rolling counter digit", ITEMS, textOf)[0]?.item.name).toBe("number-wheel"); + }); + + it("returns every item, not only matches", () => { + expect(rankByWords("camera", ITEMS, textOf)).toHaveLength(ITEMS.length); + }); + + it("sorts non-matching items last with a zero score", () => { + const ranked = rankByWords("rolling counter", ITEMS, textOf); + expect(ranked.at(-1)?.score).toBe(0); + }); + + it("does not let the wordiest entry win on length alone", () => { + // Without the sqrt divisor this padded entry outranks the real match. + const padded: Item[] = [ + ...ITEMS, + { + name: "padded", + text: `camera ${Array.from({ length: 300 }, (_, i) => `filler${i}`).join(" ")}`, + }, + ]; + expect(rankByWords("fast camera whip speed", padded, textOf)[0]?.item.name).toBe("whip-pan"); + }); + + it("breaks ties on descending name, matching the evaluation", () => { + const tied: Item[] = [ + { name: "alpha", text: "nothing shared here" }, + { name: "zulu", text: "nothing shared here" }, + ]; + expect(rankByWords("unrelated", tied, textOf).map((s) => s.item.name)).toEqual([ + "zulu", + "alpha", + ]); + }); + + it("treats a stop-word-only query as matching nothing rather than everything", () => { + expect(rankByWords("the and of", ITEMS, textOf).every((s) => s.score === 0)).toBe(true); + }); +}); + +describe("searchByWords", () => { + it("keeps only entries sharing at least one token", () => { + expect(searchByWords("rolling counter", ITEMS, textOf).map((i) => i.name)).toEqual([ + "number-wheel", + ]); + }); + + it("beats substring matching on a natural phrasing", () => { + // The motivating case. No description contains this phrase, so a substring + // test returns nothing; shared vocabulary still finds the speed entry. + const phrase = "make the shot feel fast"; + const substring = ITEMS.filter((i) => i.text.toLowerCase().includes(phrase.toLowerCase())); + expect(substring).toHaveLength(0); + expect(searchByWords(phrase, ITEMS, textOf)[0]?.name).toBe("whip-pan"); + }); + + it("returns nothing when no vocabulary is shared", () => { + expect(searchByWords("quantum entanglement", ITEMS, textOf)).toEqual([]); + }); +}); diff --git a/packages/cli/src/registry/localSearch.ts b/packages/cli/src/registry/localSearch.ts new file mode 100644 index 0000000000..fde4bbc9d7 --- /dev/null +++ b/packages/cli/src/registry/localSearch.ts @@ -0,0 +1,75 @@ +/** + * Local catalog search that costs nothing and needs no account. + * + * Replaces a substring test. `description.includes(query)` cannot answer "make + * the pace suddenly feel faster" because no description contains that phrase, + * so the honest result was zero matches. Scoring shared vocabulary answers it + * partially, offline, with no model and no network. + * + * The scorer is the one the retrieval evaluation used, reproduced so the local + * arm and the remote fallback rank identically rather than merely similarly: + * lowercase alphabetic tokens, stop words dropped, anything three characters or + * shorter dropped, and the shared-token count divided by the square root of the + * entry's token count. That divisor is load-bearing. Without it the wordiest + * entry wins every query on sheer surface area. + * + * Ties break on descending name, matching the evaluation's sort. + */ + +/** Dropped from both sides before scoring. Without this every entry matches on "the". */ +const STOP = new Set( + ( + "the a an and or of to in on at is are be it its for with that this as by from into " + + "one two must not no all over under across while when where which who whom whose they " + + "them their we our you your he she his her but if then than so such can may might will " + + "would should each other another same both few more most some any every" + ).split(" "), +); + +export function tokenize(text: string): string[] { + const words = text.toLowerCase().match(/[a-z]+/g) ?? []; + return words.filter((word) => word.length > 2 && !STOP.has(word)); +} + +export interface Scored { + item: T; + score: number; +} + +/** + * Rank every item by shared vocabulary, best first. + * + * Returns all items rather than only matches, so a caller can decide where to + * cut. Items scoring zero sort last. + */ +export function rankByWords( + query: string, + items: T[], + textOf: (item: T) => string, +): Scored[] { + const want = new Set(tokenize(query)); + if (want.size === 0) return items.map((item) => ({ item, score: 0 })); + + return items + .map((item) => { + const have = new Set(tokenize(textOf(item))); + let shared = 0; + for (const token of want) if (have.has(token)) shared += 1; + // sqrt normalization: a longer entry has more chances to overlap, and + // without this the wordiest blurb ranks first for every query. + return { item, score: shared / (Math.sqrt(have.size) || 1) }; + }) + .sort((a, b) => b.score - a.score || nameOf(b.item).localeCompare(nameOf(a.item))); +} + +/** Only items sharing at least one token, best first. */ +export function searchByWords(query: string, items: T[], textOf: (item: T) => string): T[] { + return rankByWords(query, items, textOf) + .filter((scored) => scored.score > 0) + .map((scored) => scored.item); +} + +function nameOf(item: unknown): string { + const named = item as { name?: unknown }; + return typeof named?.name === "string" ? named.name : ""; +} diff --git a/packages/cli/src/registry/localSemantic.test.ts b/packages/cli/src/registry/localSemantic.test.ts new file mode 100644 index 0000000000..701654dca5 --- /dev/null +++ b/packages/cli/src/registry/localSemantic.test.ts @@ -0,0 +1,110 @@ +import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; +import { existsSync, mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs"; +import { tmpdir } from "node:os"; +import { join } from "node:path"; + +import { cachedLocalVectorRevision, fetchLocalVectors } from "./localSemantic.js"; +import { LOCAL_MODEL_DIMENSIONS } from "./localModel.js"; + +describe("fetchLocalVectors", () => { + let dir: string; + beforeEach(() => { + dir = mkdtempSync(join(tmpdir(), "hf-vec-")); + }); + afterEach(() => { + rmSync(dir, { recursive: true, force: true }); + vi.unstubAllGlobals(); + }); + + /** A metadata/matrix pair that agrees: one name, one row of the real width. */ + const servePair = (names: string[], dimensions: number, floats: number, revision?: string) => + vi.stubGlobal( + "fetch", + vi.fn(async (url: string) => ({ + ok: true, + arrayBuffer: async () => + url.endsWith(".json") + ? new TextEncoder().encode(JSON.stringify({ names, dimensions, revision })).buffer + : new Float32Array(floats).buffer, + })), + ); + + it("writes both files into the cache directory", async () => { + servePair(["whip-pan"], LOCAL_MODEL_DIMENSIONS, LOCAL_MODEL_DIMENSIONS); + expect(await fetchLocalVectors("http://registry.test/", { directory: dir })).toBe(true); + expect(fetch).toHaveBeenCalledWith(expect.any(String), { + signal: expect.any(AbortSignal), + }); + expect(existsSync(join(dir, "local-vectors.bin"))).toBe(true); + expect(existsSync(join(dir, "local-vectors.json"))).toBe(true); + }); + + it("caches nothing when the matrix is short of the names it claims", async () => { + // Half a download is the case worth refusing: written, it loads as an + // error on every later search until someone clears the cache by hand. + servePair(["whip-pan", "rack-focus"], LOCAL_MODEL_DIMENSIONS, LOCAL_MODEL_DIMENSIONS); + expect(await fetchLocalVectors("http://registry.test/", { directory: dir })).toBe(false); + expect(existsSync(join(dir, "local-vectors.bin"))).toBe(false); + expect(existsSync(join(dir, "local-vectors.json"))).toBe(false); + }); + + it("caches nothing when the vectors came from a different model", async () => { + servePair(["whip-pan"], 1536, 1536); + expect(await fetchLocalVectors("http://registry.test/", { directory: dir })).toBe(false); + expect(existsSync(join(dir, "local-vectors.json"))).toBe(false); + }); + + it("reports failure instead of throwing, so the command survives", async () => { + // A tier the user switched on that silently never runs is the failure + // being guarded: the caller needs a false to be able to say so. + vi.stubGlobal( + "fetch", + vi.fn(async () => ({ ok: false, arrayBuffer: async () => new ArrayBuffer(0) })), + ); + expect(await fetchLocalVectors("http://registry.test", { directory: dir })).toBe(false); + }); + + it("reports failure when the network throws", async () => { + vi.stubGlobal( + "fetch", + vi.fn(async () => { + throw new Error("offline"); + }), + ); + expect(await fetchLocalVectors("http://registry.test", { directory: dir })).toBe(false); + }); + + it("refuses an unexpected revision without replacing the previous pair", async () => { + mkdirSync(dir, { recursive: true }); + writeFileSync( + join(dir, "local-vectors.json"), + JSON.stringify({ names: ["old"], dimensions: LOCAL_MODEL_DIMENSIONS, revision: "old" }), + ); + writeFileSync(join(dir, "local-vectors.bin"), new Float32Array(LOCAL_MODEL_DIMENSIONS)); + servePair(["new"], LOCAL_MODEL_DIMENSIONS, LOCAL_MODEL_DIMENSIONS, "old"); + + expect( + await fetchLocalVectors("http://registry.test", { + directory: dir, + expectedRevision: "new", + }), + ).toBe(false); + expect(JSON.parse(readFileSync(join(dir, "local-vectors.json"), "utf-8"))).toEqual({ + names: ["old"], + dimensions: LOCAL_MODEL_DIMENSIONS, + revision: "old", + }); + }); + + it("reads the revision only from a complete cached pair", () => { + mkdirSync(dir, { recursive: true }); + writeFileSync( + join(dir, "local-vectors.json"), + JSON.stringify({ names: ["whip-pan"], dimensions: LOCAL_MODEL_DIMENSIONS, revision: "r1" }), + ); + expect(cachedLocalVectorRevision(dir)).toBeUndefined(); + + writeFileSync(join(dir, "local-vectors.bin"), new Float32Array(LOCAL_MODEL_DIMENSIONS)); + expect(cachedLocalVectorRevision(dir)).toBe("r1"); + }); +}); diff --git a/packages/cli/src/registry/localSemantic.ts b/packages/cli/src/registry/localSemantic.ts new file mode 100644 index 0000000000..42a444a720 --- /dev/null +++ b/packages/cli/src/registry/localSemantic.ts @@ -0,0 +1,229 @@ +/** + * Rank the catalog by meaning, on the user's machine, for free. + * + * Sits between word matching and the hosted endpoint. Word matching cannot + * connect "make the pace feel faster" to a whip pan because they share no + * words; the hosted endpoint can, but needs an account and a network. This + * closes that gap with a 33 MB model the user opted into. + * + * The vectors here are 384-dimension and were produced by a different model + * than the hosted 1536-dimension set. The two are not comparable and are never + * mixed: a query is embedded by whichever model produced the vectors it is + * being compared against. + */ + +import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs"; +import { homedir } from "node:os"; +import { join } from "node:path"; + +import { cosine, loadLocalEmbedder } from "./localEmbedder.js"; +import { LOCAL_MODEL_DIMENSIONS, isLocalModelReady } from "./localModel.js"; + +interface LocalVectorSet { + names: string[]; + dimensions: number; + vectors: Float32Array; +} + +interface LocalVectorMetadata { + names: string[]; + dimensions: number; + revision?: string; +} + +export interface FetchLocalVectorOptions { + directory?: string; + expectedRevision?: string; +} + +const CATALOG_ARTIFACT_TIMEOUT_MS = 30_000; + +/** Where the bundled vector set lives, overridable for development. */ +function localVectorDirectory(): string { + return ( + process.env["HYPERFRAMES_CATALOG_ARTIFACT_DIR"] ?? join(homedir(), ".hyperframes", "catalog") + ); +} + +/** + * Put the catalog vectors in the user's cache, once. + * + * They are fetched rather than bundled: every install would otherwise carry a + * copy of a file only people who opt into offline ranking will ever read, and + * the vectors have to track the registry anyway, so shipping them inside the + * package would freeze them to the release instead. + * + * Returns false rather than throwing. A download that fails costs the offline + * tier, never the command, and the caller says so. + */ +/** + * Do a freshly fetched metadata/matrix pair describe the same index? + * + * `names.length * dimensions` floats, at four bytes each, is the whole + * contract. A pair that fails it is a truncated download or a different + * model, never something worth caching. + */ +function vectorPairAgrees(fetched: Array<[string, Buffer]>): boolean { + const meta = fetched.find(([file]) => file === "local-vectors.json")?.[1]; + const bin = fetched.find(([file]) => file === "local-vectors.bin")?.[1]; + if (!meta || !bin) return false; + try { + const parsed = JSON.parse(meta.toString("utf-8")) as { + names?: string[]; + dimensions?: number; + }; + if (parsed.dimensions !== LOCAL_MODEL_DIMENSIONS) return false; + return bin.byteLength === (parsed.names?.length ?? -1) * LOCAL_MODEL_DIMENSIONS * 4; + } catch { + return false; + } +} + +/** The registry manifest and fetched pair must describe the same generation. */ +function vectorRevisionAgrees( + fetched: Array<[string, Buffer]>, + expectedRevision?: string, +): boolean { + if (expectedRevision === undefined) return true; + const meta = fetched.find(([file]) => file === "local-vectors.json")?.[1]; + if (!meta) return false; + try { + const parsed = JSON.parse(meta.toString("utf-8")) as { revision?: unknown }; + return parsed.revision === expectedRevision; + } catch { + return false; + } +} + +export async function fetchLocalVectors( + registryBaseUrl: string, + options: FetchLocalVectorOptions = {}, +): Promise { + const directory = options.directory ?? localVectorDirectory(); + const base = registryBaseUrl.replace(/\/+$/, ""); + try { + mkdirSync(directory, { recursive: true, mode: 0o700 }); + // Downloaded in full before anything is written. The two files have to + // agree on how many rows there are, so a fetch that fails halfway through + // must leave the previous pair intact rather than pairing a new name list + // with an old matrix, which loads as an error instead of as stale data. + const fetched: Array<[string, Buffer]> = []; + for (const file of ["local-vectors.json", "local-vectors.bin"] as const) { + const response = await fetch(`${base}/catalog-artifact/${file}`, { + signal: AbortSignal.timeout(CATALOG_ARTIFACT_TIMEOUT_MS), + }); + if (!response.ok) return false; + fetched.push([file, Buffer.from(await response.arrayBuffer())]); + } + // Check the pair agrees BEFORE either file lands. Writing first and + // discovering the mismatch at load time leaves a cache that fails every + // subsequent search until someone deletes it by hand, and it is the only + // point where a truncated or wrong-model response can still be refused. + if (!vectorPairAgrees(fetched) || !vectorRevisionAgrees(fetched, options.expectedRevision)) { + return false; + } + // 0o600: the cache is this user's, and the directory may be world-writable + // when the caller overrides it. + for (const [file, bytes] of fetched) { + writeFileSync(join(directory, file), bytes, { mode: 0o600 }); + } + return hasLocalVectors(directory); + } catch { + return false; + } +} + +export function hasLocalVectors(directory = localVectorDirectory()): boolean { + return ( + existsSync(join(directory, "local-vectors.bin")) && + existsSync(join(directory, "local-vectors.json")) + ); +} + +function loadLocalVectors(directory = localVectorDirectory()): LocalVectorSet { + const meta = JSON.parse( + readFileSync(join(directory, "local-vectors.json"), "utf-8"), + ) as LocalVectorMetadata; + const buffer = readFileSync(join(directory, "local-vectors.bin")); + const vectors = new Float32Array(buffer.buffer, buffer.byteOffset, buffer.byteLength / 4); + + const expected = meta.names.length * meta.dimensions; + if (vectors.length !== expected) { + throw new Error(`local vectors hold ${vectors.length} floats, expected ${expected}`); + } + if (meta.dimensions !== LOCAL_MODEL_DIMENSIONS) { + // A dimension mismatch means the vectors and the model disagree, which + // produces confident nonsense rather than an error. + throw new Error( + `local vectors are ${meta.dimensions}-dimension, model produces ${LOCAL_MODEL_DIMENSIONS}`, + ); + } + return { names: meta.names, dimensions: meta.dimensions, vectors }; +} + +/** + * The names the on-device index holds, without loading the vector matrix. + * + * Callers compare this against the live registry to see what meaning search + * cannot reach. Reads the metadata file only, so it costs a small JSON parse + * rather than the whole matrix, and answers empty rather than throwing: an + * absent or unreadable artifact covers nothing, which is a coverage answer + * rather than a reason to fail the search that asked. + */ +export function localVectorNames(directory = localVectorDirectory()): string[] { + if (!hasLocalVectors(directory)) return []; + try { + const meta = JSON.parse(readFileSync(join(directory, "local-vectors.json"), "utf-8")) as { + names?: string[]; + }; + return meta.names ?? []; + } catch { + return []; + } +} + +/** Revision of the last complete pair, absent for pre-revision and unreadable caches. */ +export function cachedLocalVectorRevision(directory = localVectorDirectory()): string | undefined { + if (!hasLocalVectors(directory)) return undefined; + try { + const meta = JSON.parse(readFileSync(join(directory, "local-vectors.json"), "utf-8")) as { + revision?: unknown; + }; + return typeof meta.revision === "string" ? meta.revision : undefined; + } catch { + return undefined; + } +} + +/** + * Names ranked best first, each with the similarity that placed it there. + * Returns null when local semantic search is not available. + * + * The score rides along because this ranker has no relevance threshold: every + * query returns the whole set in some order, so a caller holding names alone + * cannot tell a real match from the least-bad row of a query that matched + * nothing at all. + */ +export async function localSemanticRanking( + query: string, + directory = localVectorDirectory(), +): Promise | null> { + if (!isLocalModelReady() || !hasLocalVectors(directory)) return null; + + const set = loadLocalVectors(directory); + const embedder = await loadLocalEmbedder(); + const [queryVector] = await embedder.embed([query], { isQuery: true }); + if (!queryVector) return null; + + const scored = set.names.map((name, row) => { + const start = row * set.dimensions; + return { + name, + score: cosine(queryVector, Array.from(set.vectors.subarray(start, start + set.dimensions))), + }; + }); + + // Ties break on descending name, matching every other ranking in this system. + scored.sort((a, b) => b.score - a.score || b.name.localeCompare(a.name)); + return scored; +} diff --git a/packages/cli/src/registry/wordpiece.test.ts b/packages/cli/src/registry/wordpiece.test.ts new file mode 100644 index 0000000000..a27683858a --- /dev/null +++ b/packages/cli/src/registry/wordpiece.test.ts @@ -0,0 +1,152 @@ +import { describe, expect, it } from "vitest"; +import { existsSync, readFileSync } from "node:fs"; +import { homedir } from "node:os"; +import { join } from "node:path"; + +import { configFromTokenizerJson, encode, normalize, preTokenize, wordPiece } from "./wordpiece.js"; + +const REFERENCE_PATH = join(import.meta.dirname, "__fixtures__", "wordpiece-reference.json"); +const TOKENIZER_PATH = join( + homedir(), + ".hyperframes", + "models", + "bge-small-en-v1.5.tokenizer.json", +); + +/** A tiny vocab keeps the unit tests readable and independent of the 30k file. */ +const CONFIG = configFromTokenizerJson( + JSON.stringify({ + model: { + vocab: { + "[UNK]": 0, + "[CLS]": 1, + "[SEP]": 2, + fast: 3, + camera: 4, + "##era": 5, + cam: 6, + ".": 7, + whip: 8, + pan: 9, + }, + unk_token: "[UNK]", + continuing_subword_prefix: "##", + max_input_chars_per_word: 100, + }, + }), +); + +describe("normalize", () => { + it("lowercases", () => { + expect(normalize("Whip PAN")).toBe("whip pan"); + }); + + it("strips accents", () => { + expect(normalize("café naïve")).toBe("cafe naive"); + }); + + it("collapses control characters and whitespace variants to spaces", () => { + expect(normalize("a\tb\nc")).toBe("a b c"); + }); + + it("isolates CJK characters so each becomes its own token", () => { + expect(normalize("a中b")).toBe("a 中 b"); + }); +}); + +describe("preTokenize", () => { + it("splits on whitespace", () => { + expect(preTokenize("fast camera pan")).toEqual(["fast", "camera", "pan"]); + }); + + it("isolates punctuation into its own token", () => { + expect(preTokenize("group: transitions.")).toEqual(["group", ":", "transitions", "."]); + }); + + it("drops empty chunks from repeated spaces", () => { + expect(preTokenize("a b")).toEqual(["a", "b"]); + }); +}); + +describe("wordPiece", () => { + it("returns a whole word when the vocab has it", () => { + expect(wordPiece("camera", CONFIG)).toEqual(["camera"]); + }); + + it("splits into continuation pieces, longest match first", () => { + // "camera" is present whole, so force the split path with a word that is not. + expect(wordPiece("camera", { ...CONFIG, vocab: { cam: 6, "##era": 5 } })).toEqual([ + "cam", + "##era", + ]); + }); + + it("marks the whole word unknown when any piece is unmatchable", () => { + // Emitting partial pieces would silently change the embedding rather than + // failing, so a single bad piece invalidates the word. + expect(wordPiece("zzzz", CONFIG)).toEqual(["[UNK]"]); + }); + + it("marks a word longer than the limit unknown without scanning it", () => { + expect(wordPiece("x".repeat(101), CONFIG)).toEqual(["[UNK]"]); + }); +}); + +describe("encode", () => { + it("wraps the sequence in CLS and SEP", () => { + const { ids } = encode("fast", CONFIG); + expect(ids[0]).toBe(CONFIG.vocab["[CLS]"]); + expect(ids.at(-1)).toBe(CONFIG.vocab["[SEP]"]); + }); + + it("returns masks matching the id length", () => { + const encoding = encode("fast camera", CONFIG); + expect(encoding.attentionMask).toHaveLength(encoding.ids.length); + expect(encoding.tokenTypeIds).toHaveLength(encoding.ids.length); + expect(new Set(encoding.attentionMask)).toEqual(new Set([1])); + expect(new Set(encoding.tokenTypeIds)).toEqual(new Set([0])); + }); + + it("encodes empty input as just the special tokens", () => { + expect(encode("", CONFIG).ids).toEqual([1, 2]); + }); +}); + +/** + * The test that actually matters. + * + * Wrong token ids produce plausible embeddings and plausible rankings, so + * nothing downstream fails visibly. Comparing against a real tokenizer over the + * whole catalog is the only way to know this implementation is correct rather + * than merely reasonable. + */ +describe("parity with the reference tokenizer", () => { + const hasFixture = existsSync(REFERENCE_PATH); + const hasVocab = existsSync(TOKENIZER_PATH); + + it.runIf(hasFixture && hasVocab)("matches reference ids across the whole corpus", () => { + const config = configFromTokenizerJson(readFileSync(TOKENIZER_PATH, "utf-8")); + const reference = JSON.parse(readFileSync(REFERENCE_PATH, "utf-8")) as { + text: string; + ids: number[]; + }[]; + expect(reference.length).toBeGreaterThan(500); + + const mismatches = reference + .map(({ text, ids }) => ({ text, expected: ids, actual: encode(text, config).ids })) + .filter(({ expected, actual }) => expected.join(",") !== actual.join(",")); + + expect( + mismatches + .slice(0, 3) + .map( + (m) => `${JSON.stringify(m.text.slice(0, 60))}\n want ${m.expected}\n got ${m.actual}`, + ), + ).toEqual([]); + expect(mismatches).toHaveLength(0); + }); + + it.skipIf(hasFixture && hasVocab)("is skipped without the fixture and vocab", () => { + expect(true).toBe(true); + }); +}); diff --git a/packages/cli/src/registry/wordpiece.ts b/packages/cli/src/registry/wordpiece.ts new file mode 100644 index 0000000000..4a606069e6 --- /dev/null +++ b/packages/cli/src/registry/wordpiece.ts @@ -0,0 +1,194 @@ +/** + * BERT WordPiece tokenization, implemented directly rather than pulled in. + * + * The obvious dependencies both failed: the standalone tokenizer package ships + * builder components with no way to load a `tokenizer.json`, and the full + * wrapper costs 359 MB installed because it pins an exact ONNX runtime and ends + * up with a second native copy plus an unused web runtime. This is ~120 lines + * with no dependencies at all. + * + * Hand-writing a tokenizer is normally a bad idea, because wrong token ids + * still produce plausible-looking embeddings and plausible-looking rankings. + * Nothing fails loudly. That is why `wordpiece.parity.test.ts` compares this + * implementation's ids against a reference implementation over a corpus rather + * than asserting a handful of cases by eye. + * + * The pipeline reproduces the config in the model's own tokenizer.json: + * BertNormalizer (clean text, isolate CJK, strip accents, lowercase), then + * BertPreTokenizer (whitespace split, punctuation isolated), then greedy + * longest-match-first WordPiece, then [CLS] ... [SEP]. + */ + +export interface WordPieceConfig { + vocab: Record; + unkToken: string; + continuingSubwordPrefix: string; + maxInputCharsPerWord: number; + clsToken: string; + sepToken: string; +} + +export interface Encoding { + ids: number[]; + attentionMask: number[]; + tokenTypeIds: number[]; +} + +/** Read the pieces this tokenizer needs out of a HuggingFace tokenizer.json. */ +export function configFromTokenizerJson(raw: string): WordPieceConfig { + const parsed = JSON.parse(raw) as { + model: { + vocab: Record; + unk_token?: string; + continuing_subword_prefix?: string; + max_input_chars_per_word?: number; + }; + }; + const model = parsed.model; + if (!model?.vocab) throw new Error("tokenizer.json has no WordPiece vocab"); + return { + vocab: model.vocab, + unkToken: model.unk_token ?? "[UNK]", + continuingSubwordPrefix: model.continuing_subword_prefix ?? "##", + maxInputCharsPerWord: model.max_input_chars_per_word ?? 100, + clsToken: "[CLS]", + sepToken: "[SEP]", + }; +} + +/** + * BertNormalizer. + * + * Control characters are dropped and every whitespace variant collapses to a + * plain space. CJK characters are isolated so each becomes its own token, which + * is what the reference does even for an English-only model. + */ +export function normalize(text: string): string { + let out = ""; + for (const char of text) { + const code = char.codePointAt(0) as number; + if (code === 0 || code === 0xfffd) continue; + if (isControl(char, code)) continue; + if (isWhitespace(char, code)) { + out += " "; + continue; + } + out += isChinese(code) ? ` ${char} ` : char; + } + // Strip accents after lowercasing: NFD splits a letter from its mark, and the + // marks are then dropped. Mirrors strip_accents defaulting to lowercase. + return out + .toLowerCase() + .normalize("NFD") + .replace(/\p{Mn}/gu, ""); +} + +/** BertPreTokenizer: split on whitespace, then break punctuation into its own token. */ +export function preTokenize(normalized: string): string[] { + const words: string[] = []; + for (const chunk of normalized.split(/\s+/)) { + if (!chunk) continue; + let current = ""; + for (const char of chunk) { + if (isPunctuation(char)) { + if (current) words.push(current); + words.push(char); + current = ""; + } else { + current += char; + } + } + if (current) words.push(current); + } + return words; +} + +/** Greedy longest-match-first, the reference WordPiece algorithm. */ +export function wordPiece(word: string, config: WordPieceConfig): string[] { + if ([...word].length > config.maxInputCharsPerWord) return [config.unkToken]; + + const pieces: string[] = []; + let start = 0; + while (start < word.length) { + let end = word.length; + let match: string | null = null; + while (start < end) { + const candidate = + start === 0 + ? word.slice(start, end) + : config.continuingSubwordPrefix + word.slice(start, end); + if (candidate in config.vocab) { + match = candidate; + break; + } + end -= 1; + } + // A single unmatchable piece makes the whole word unknown, not just that + // piece. Emitting partial pieces here would silently change the embedding. + if (match === null) return [config.unkToken]; + pieces.push(match); + start = end; + } + return pieces; +} + +export function encode(text: string, config: WordPieceConfig): Encoding { + const tokens = [config.clsToken]; + for (const word of preTokenize(normalize(text))) tokens.push(...wordPiece(word, config)); + tokens.push(config.sepToken); + + const unk = config.vocab[config.unkToken] as number; + const ids = tokens.map((token) => config.vocab[token] ?? unk); + return { + ids, + attentionMask: ids.map(() => 1), + tokenTypeIds: ids.map(() => 0), + }; +} + +function isControl(char: string, code: number): boolean { + if (char === "\t" || char === "\n" || char === "\r") return false; + return code < 32 || code === 127 || /\p{Cc}|\p{Cf}/u.test(char); +} + +function isWhitespace(char: string, code: number): boolean { + return ( + char === " " || + char === "\t" || + char === "\n" || + char === "\r" || + code === 0x0b || + code === 0x0c || + /\p{Zs}/u.test(char) + ); +} + +function isPunctuation(char: string): boolean { + const code = char.codePointAt(0) as number; + // ASCII non-alphanumerics, plus Unicode punctuation categories only. + // Symbol categories are deliberately excluded: the reference leaves a symbol + // attached to the preceding token, so "360°" becomes 360 + ##° rather than + // two separate words. Including \p{S} here silently changed the embedding of + // every description containing one, which the parity corpus caught. + const asciiSymbol = + (code >= 33 && code <= 47) || + (code >= 58 && code <= 64) || + (code >= 91 && code <= 96) || + (code >= 123 && code <= 126); + return asciiSymbol || /\p{P}/u.test(char); +} + +// a Unicode block test; the ranges are data, and 16 cyclomatic is what checking them costs +// fallow-ignore-next-line complexity +function isChinese(code: number): boolean { + return ( + (code >= 0x4e00 && code <= 0x9fff) || + (code >= 0x3400 && code <= 0x4dbf) || + (code >= 0x20000 && code <= 0x2a6df) || + (code >= 0x2a700 && code <= 0x2b73f) || + (code >= 0x2b740 && code <= 0x2b81f) || + (code >= 0x2b820 && code <= 0x2ceaf) || + (code >= 0xf900 && code <= 0xfaff) || + (code >= 0x2f800 && code <= 0x2fa1f) + ); +} diff --git a/packages/cli/src/telemetry/config.ts b/packages/cli/src/telemetry/config.ts index 7e2b429b35..ee2a886186 100644 --- a/packages/cli/src/telemetry/config.ts +++ b/packages/cli/src/telemetry/config.ts @@ -386,6 +386,8 @@ function mintConfig(): HyperframesConfig { } export interface HyperframesConfig { + /** Has the user agreed to download the on-device search model? Undefined means never asked. */ + localEmbeddingEnabled?: boolean; /** Whether anonymous telemetry is enabled (default: true in production) */ telemetryEnabled: boolean; /** Stable anonymous identifier — no PII, just a random UUID */ @@ -652,6 +654,9 @@ function passthroughFields(parsed: Partial): Partial//registry-item.json.", diff --git a/packages/core/src/registry/types.ts b/packages/core/src/registry/types.ts index 94797a9aaa..12337571af 100644 --- a/packages/core/src/registry/types.ts +++ b/packages/core/src/registry/types.ts @@ -128,6 +128,11 @@ export interface RegistryManifest { name: string; /** Registry homepage URL. */ homepage: string; + /** Published on-device vector artifact, when this registry provides one. */ + catalogArtifact?: { + /** SHA-256 identity of the searchable corpus and embedding contract. */ + revision: string; + }; /** Items in this registry. */ items: RegistryManifestEntry[]; } diff --git a/registry/catalog-artifact/.gitignore b/registry/catalog-artifact/.gitignore new file mode 100644 index 0000000000..5d341d92ca --- /dev/null +++ b/registry/catalog-artifact/.gitignore @@ -0,0 +1,12 @@ +# Build output, not source. The catalog is derived from the registry by +# scripts/catalog/build-catalog-artifact.ts, and committing the hosted copy +# would create a stale artifact that a later run silently ranks against. +# vectors.json is also ~9 MB, well past the repository's non-LFS file limit; +# the hosted tier reads it from the server, never from a checkout. +# +# The on-device pair is the exception: the CLI fetches local-vectors.bin and +# local-vectors.json from this registry when a user opts into offline search, +# so they have to be served from here. Ignoring either one leaves the fetch +# half-complete and the offline tier silently unable to rank. +*.json +!local-vectors.json diff --git a/registry/catalog-artifact/README.md b/registry/catalog-artifact/README.md new file mode 100644 index 0000000000..4ef4f3297c --- /dev/null +++ b/registry/catalog-artifact/README.md @@ -0,0 +1,51 @@ +# Catalog artifact + +Two files ship from here, and only these two. The CLI fetches them over HTTP +when a user opts into offline catalog search (`catalog --query ... --on-device`), +so they are served from the registry rather than bundled in the package. + +| File | What it is | +| -------------------- | ----------------------------------------------------------------------- | +| `local-vectors.json` | `{ model, dimensions, names }`. `names` is the row order of the binary. | +| `local-vectors.bin` | Float32, row-major, `names.length * dimensions` values, no header. | + +Currently 168 rows at 384 dimensions: 258,048 bytes, one row per installable +registry item. + +## Provenance + +No digest, revision or build timestamp is recorded in either file, and the +runtime only checks that `dimensions` matches the model it loaded. `model` is a +label the build wrote, not a proof. So the only real provenance check is to +rebuild the rows and compare them, which works because both inputs are in this +repository: + +- the text each row was embedded from is `itemRetrievalText(registry-item.json)` + (title, description, tags, joined by newlines, name deliberately excluded), + over `registry/blocks/*` and `registry/components/*` sorted by name; +- the model is the pinned quantized `bge-small-en-v1.5` ONNX build that + `packages/cli/src/registry/localModel.ts` downloads. + +Re-embedding in batches of 16, the batch size the build uses, reproduces the +shipped rows exactly (cosine 1.000000). Batch size matters: the same text +embedded alone differs at cosine 0.9969, because padding within a batch changes +the quantized result. A rebuild that does not match this way was not built from +this registry, or not with this model. + +## Rebuilding + +```bash +bun scripts/catalog/build-local-vectors.ts +``` + +It reads `registry/blocks/*` and `registry/components/*` directly, so the +rebuild has no input outside this repository. You rarely need to run it by +hand: a lefthook `catalog-index` pre-commit command regenerates and re-stages +both files whenever a staged `registry-item.json` changes, and CI fails the +"Catalog: search index covers the registry" job if the index is ever missing an +item. + +`build-catalog-artifact.ts` does **not** produce these files. It builds the +3072-dimension hosted artifact from an external shelf file, for the hosted search +tier that this repository does not ship. Its `--shelf`, `manifest.json` and +`text-embedding-3-large` have nothing to do with `local-vectors.*`. diff --git a/registry/catalog-artifact/local-vectors.bin b/registry/catalog-artifact/local-vectors.bin new file mode 100644 index 0000000000..9b04d0ad3f Binary files /dev/null and b/registry/catalog-artifact/local-vectors.bin differ diff --git a/registry/catalog-artifact/local-vectors.json b/registry/catalog-artifact/local-vectors.json new file mode 100644 index 0000000000..337a453c24 --- /dev/null +++ b/registry/catalog-artifact/local-vectors.json @@ -0,0 +1,176 @@ +{ + "model": "bge-small-en-v1.5", + "modelRevision": "ea104dacec62c0de699686887e3f920caeb4f3e3", + "dimensions": 384, + "revision": "3e0b7c140466db717b69481be5a87e77b1fdec5000b33ca61846ba27e5558238", + "names": [ + "app-showcase", + "apple-money-count", + "beat-freeze-cut", + "blue-sweater-intro-video", + "camcorder-hud", + "caption-blend-difference", + "caption-clip-wipe", + "caption-editorial-emphasis", + "caption-emoji-pop", + "caption-glitch-rgb", + "caption-gradient-fill", + "caption-highlight", + "caption-kinetic-slam", + "caption-matrix-decode", + "caption-neon-accent", + "caption-neon-glow", + "caption-parallax-layers", + "caption-particle-burst", + "caption-pill-karaoke", + "caption-texture", + "caption-weight-shift", + "chromatic-radial-split", + "cinematic-zoom", + "code-3d-extrude", + "code-diff", + "code-highlight", + "code-morph", + "code-particle-assemble", + "code-scroll", + "code-shader-dissolve", + "code-snippet-apple-terminal-basic", + "code-snippet-apple-terminal-clear-dark", + "code-snippet-apple-terminal-clear-light", + "code-snippet-apple-terminal-grass", + "code-snippet-apple-terminal-homebrew", + "code-snippet-apple-terminal-man-page", + "code-snippet-apple-terminal-novel", + "code-snippet-apple-terminal-ocean", + "code-snippet-apple-terminal-pro", + "code-snippet-apple-terminal-red-sands", + "code-snippet-apple-terminal-silver-aerogel", + "code-snippet-apple-terminal-solid-colors", + "code-snippet-dark-2026", + "code-snippet-dark-modern", + "code-snippet-dark-plus", + "code-snippet-flight", + "code-snippet-high-contrast", + "code-snippet-high-contrast-light", + "code-snippet-light-2026", + "code-snippet-light-modern", + "code-snippet-light-plus", + "code-snippet-monokai", + "code-snippet-solarized-light", + "code-snippet-visual-studio-dark", + "code-snippet-visual-studio-light", + "code-typing", + "cross-warp-morph", + "data-chart", + "domain-warp-dissolve", + "editorial-flash-overlay", + "flash-through-white", + "flowchart", + "flowchart-vertical", + "freeze-frame-dressing", + "glitch", + "grain-overlay", + "gravitational-lens", + "grid-pixelate-wipe", + "hw-arrow", + "hw-boil", + "hw-box-label", + "hw-callout-circle", + "hw-frame", + "hw-path-text", + "hw-pipeline", + "hw-scribble-transition", + "hw-text-cloud", + "hw-title", + "hw-underline", + "instagram-follow", + "ios26-liquid-glass", + "light-leak", + "liquid-glass-context-menu", + "liquid-glass-media-controls", + "liquid-glass-notification", + "liquid-glass-widgets", + "logo-outro", + "lower-third-bild", + "lt-accent-underline", + "lt-bold-block", + "lt-clean-bar", + "lt-color-block", + "lt-dark-card", + "lt-kicker-name", + "lt-mask-reveal", + "lt-side-rule", + "lt-soft-pill", + "lt-stack-bars", + "macos-notification", + "macos-tahoe-liquid-glass", + "mk-background", + "mk-callout-highlight", + "mk-clone-wall-transition", + "mk-emphasis-type", + "mk-line-graph", + "mk-placeholder-grid", + "mk-progress-stat", + "mk-specs-list", + "mk-usage-arc", + "morph-text", + "motion-blur", + "news-ticker", + "north-korea-locked-down", + "nyc-paris-flight", + "organic-light-leak-overlay", + "parallax-unzoom", + "parallax-zoom", + "reddit-post", + "ridged-burn", + "ripple-waves", + "sdf-iris", + "shimmer-sweep", + "spain-map", + "spotify-card", + "swirl-vortex", + "texture-mask-text", + "thermal-distortion", + "tiktok-follow", + "transitions-3d", + "transitions-blur", + "transitions-cover", + "transitions-destruction", + "transitions-dissolve", + "transitions-distortion", + "transitions-grid", + "transitions-light", + "transitions-mechanical", + "transitions-other", + "transitions-push", + "transitions-radial", + "transitions-scale", + "ui-3d-reveal", + "us-map", + "us-map-bubble", + "us-map-flow", + "us-map-hex", + "vfx-iphone-device", + "vfx-liquid-background", + "vfx-liquid-glass", + "vfx-magnetic", + "vfx-portal", + "vfx-shatter", + "vfx-text-cursor", + "vignette", + "vpn-youtube-spot", + "whip-pan", + "world-map", + "x-post", + "yt-camera-move", + "yt-circle-pointer", + "yt-comment-card", + "yt-feather-highlight", + "yt-lcd-background", + "yt-logo-intro", + "yt-lower-third", + "yt-prism-title", + "yt-screen-warp", + "yt-vertical-fill" + ] +} diff --git a/registry/registry.json b/registry/registry.json index bff47f2948..1681f17adb 100644 --- a/registry/registry.json +++ b/registry/registry.json @@ -2,6 +2,9 @@ "$schema": "https://hyperframes.heygen.com/schema/registry.json", "name": "hyperframes", "homepage": "https://hyperframes.heygen.com", + "catalogArtifact": { + "revision": "3e0b7c140466db717b69481be5a87e77b1fdec5000b33ca61846ba27e5558238" + }, "items": [ { "name": "warm-grain", diff --git a/scripts/catalog/build-catalog-artifact.ts b/scripts/catalog/build-catalog-artifact.ts new file mode 100644 index 0000000000..93b59088e2 --- /dev/null +++ b/scripts/catalog/build-catalog-artifact.ts @@ -0,0 +1,143 @@ +/** + * Publish the video-primitive catalog artifact. + * + * Usage: + * tsx scripts/catalog/build-catalog-artifact.ts --shelf --revision [--out ] + * + * Requires OPENAI_API_KEY. Embedding 424 descriptions is a real, paid call, so + * this is invoked deliberately rather than on every commit. The artifact is + * verified after writing: a build that cannot be read back is a failed build. + */ + +import { mkdirSync, readFileSync, writeFileSync } from "node:fs"; +import { join } from "node:path"; + +import { + buildArtifact, + manifestBytes, + movesMissingFromRegistry, + parseShelf, + verifyArtifact, + type Embedder, +} from "./catalog-artifact.js"; + +// Measured on the 405-brief gold set, not chosen from a leaderboard: +// 3-large scores 60.5% recall@20 against 54.1% for 3-small, a 6.4 point gain. +// Embedding the whole catalog costs a couple of cents, and per-query cost is +// negligible, so the larger model is the better default by a wide margin. +const EMBEDDING_MODEL = "text-embedding-3-large"; +const EMBEDDING_DIMENSION = 3072; +const BATCH_SIZE = 100; +const DEFAULT_REGISTRY_INDEX = "registry/registry.json"; +const DEFAULT_OUT = "registry/catalog-artifact"; + +/** + * Read the names the registry can actually serve. + * + * Absent index means the caller opted out of the check rather than passed it, + * so that case is reported by the caller instead of being treated as a pass. + */ +function registryNames(indexPath: string): string[] | undefined { + try { + const parsed = JSON.parse(readFileSync(indexPath, "utf8")) as { + items?: { name?: string }[]; + }; + if (!Array.isArray(parsed.items)) return undefined; + return parsed.items + .map((item) => item.name) + .filter((name): name is string => typeof name === "string"); + } catch { + return undefined; + } +} + +function arg(name: string): string | undefined { + const index = process.argv.indexOf(`--${name}`); + return index === -1 ? undefined : process.argv[index + 1]; +} + +/** Batched so a 424-move shelf does not depend on one oversized request. */ +// request assembly plus the error cases a remote embedder can return +// fallow-ignore-next-line complexity +const openAiEmbedder: Embedder = async (texts) => { + const key = process.env.OPENAI_API_KEY; + if (!key) throw new Error("OPENAI_API_KEY is not set"); + + const vectors: number[][] = []; + for (let start = 0; start < texts.length; start += BATCH_SIZE) { + const batch = texts.slice(start, start + BATCH_SIZE); + const response = await fetch("https://api.openai.com/v1/embeddings", { + method: "POST", + headers: { Authorization: `Bearer ${key}`, "Content-Type": "application/json" }, + body: JSON.stringify({ model: EMBEDDING_MODEL, input: batch }), + }); + if (!response.ok) { + throw new Error(`Embedding request failed: ${response.status} ${await response.text()}`); + } + const body = (await response.json()) as { data: { index: number; embedding: number[] }[] }; + // Order is documented as preserved, but index is returned explicitly, so + // sort by it rather than trusting position. + const ordered = [...body.data].sort((a, b) => a.index - b.index); + if (ordered.length !== batch.length) { + throw new Error(`Expected ${batch.length} embeddings, received ${ordered.length}`); + } + vectors.push(...ordered.map((item) => item.embedding)); + } + return vectors; +}; + +// a script entry point +// fallow-ignore-next-line complexity +async function main(): Promise { + const shelfPath = arg("shelf"); + const revision = arg("revision"); + const out = arg("out") ?? DEFAULT_OUT; + if (!shelfPath || !revision) { + throw new Error("Both --shelf and --revision are required"); + } + + const shelfText = readFileSync(shelfPath, "utf-8"); + // Only publish moves the registry can serve. The shelf doubles as a design + // document, so it lists moves that were specified and never built. + const installableNames = registryNames(arg("registry-index") ?? DEFAULT_REGISTRY_INDEX); + const built = await buildArtifact({ + shelfText, + ...(installableNames ? { installableNames } : {}), + sourceRevision: revision, + embeddingModel: EMBEDDING_MODEL, + embed: openAiEmbedder, + expectedDimension: EMBEDDING_DIMENSION, + }); + + // Verify before writing. Publishing something we cannot read back would put + // the burden of discovering it on the consumer at request time. + verifyArtifact(built); + + // What is left to report is the gap, not a defect in the artifact: buildArtifact + // already dropped these, so the published catalog never contains a move the + // registry cannot serve. Reported, not fatal, because the shelf legitimately + // leads the registry while moves land. + if (installableNames === undefined) { + console.warn("warning registry index unreadable; published every shelf move unchecked"); + } else { + const dropped = movesMissingFromRegistry([...parseShelf(shelfText).keys()], installableNames); + if (dropped.length > 0) { + console.warn( + `warning ${dropped.length} shelf moves dropped, no registry item: ${dropped.slice(0, 5).join(", ")}${dropped.length > 5 ? ", ..." : ""}`, + ); + } + } + + mkdirSync(out, { recursive: true }); + writeFileSync(join(out, "catalog.json"), built.catalogBytes); + writeFileSync(join(out, "vectors.json"), built.vectorsBytes); + writeFileSync(join(out, "manifest.json"), manifestBytes(built.manifest)); + + console.log(`moves ${built.manifest.move_count}`); + console.log(`model ${built.manifest.embedding_model}`); + console.log(`revision ${built.manifest.source_revision}`); + console.log(`version ${built.manifest.payload_sha256}`); + console.log(`written ${out}`); +} + +await main(); diff --git a/scripts/catalog/build-local-vectors.ts b/scripts/catalog/build-local-vectors.ts new file mode 100644 index 0000000000..a13104a966 --- /dev/null +++ b/scripts/catalog/build-local-vectors.ts @@ -0,0 +1,146 @@ +/** + * Embed the catalog with the on-device model so local search can rank by meaning. + * + * A second vector set, not a replacement. The hosted vectors are 1536-dimension + * and measured; these are 384-dimension and free, and the two are not + * interchangeable because vectors from different models cannot be compared. + * + * Usage: + * bun scripts/catalog/build-local-vectors.ts + * + * Defaults to reading `registry/` and writing `registry/catalog-artifact/`. + * + * Writes `local-vectors.bin` (float32, row-major, names in manifest order) and + * `local-vectors.json` (names and dimensions). Splitting them keeps the payload small enough to ship: 424 moves at + * 384 dimensions is about 650 KB as binary against several megabytes as JSON. + */ + +import { readFileSync, readdirSync, writeFileSync } from "node:fs"; +import { join } from "node:path"; +import type { RegistryManifest } from "../../packages/core/src/index.js"; + +import { + LOCAL_MODEL_DIMENSIONS, + LOCAL_MODEL_ID, + LOCAL_MODEL_REVISION, +} from "../../packages/cli/src/registry/localModel.js"; +import { loadLocalEmbedder } from "../../packages/cli/src/registry/localEmbedder.js"; +import { isLocalModelReady } from "../../packages/cli/src/registry/localModel.js"; +import { + catalogFromRegistry, + LOCAL_VECTOR_BATCH_SIZE, + localVectorRevision, +} from "./catalog-artifact.js"; + +/** Distinct from 1 so the pre-commit hook can tell "cannot" from "failed". */ +const EXIT_NO_MODEL = 3; + +function arg(name: string): string | undefined { + const index = process.argv.indexOf(`--${name}`); + return index === -1 ? undefined : process.argv[index + 1]; +} + +/** + * Embed in batches, in `names` order. + * + * Batch size is part of the artifact's identity, not a tuning knob: padding + * within a batch changes the quantized result, so re-embedding the same text + * at a different batch size does not reproduce the shipped rows. + */ +async function embedInBatches( + names: string[], + catalog: Record, + embedder: Awaited>, +): Promise { + const vectors: number[][] = []; + for (let start = 0; start < names.length; start += LOCAL_VECTOR_BATCH_SIZE) { + const slice = names.slice(start, start + LOCAL_VECTOR_BATCH_SIZE); + // Passages carry no query instruction; only queries do. + vectors.push(...(await embedder.embed(slice.map((name) => catalog[name] as string)))); + process.stdout.write( + `\r embedded ${Math.min(start + LOCAL_VECTOR_BATCH_SIZE, names.length)}/${names.length}`, + ); + } + process.stdout.write("\n"); + return vectors; +} + +/** Row-major Float32 payload. Row N belongs to `names[N]`, with no header. */ +function packVectors(names: string[], vectors: number[][]): Float32Array { + const flat = new Float32Array(names.length * LOCAL_MODEL_DIMENSIONS); + vectors.forEach((vector, row) => { + if (vector.length !== LOCAL_MODEL_DIMENSIONS) { + throw new Error(`vector for ${names[row]} has ${vector.length} dimensions`); + } + flat.set(vector, row * LOCAL_MODEL_DIMENSIONS); + }); + return flat; +} + +// fallow-ignore-next-line complexity +async function main(): Promise { + const dir = arg("artifact") ?? "registry/catalog-artifact"; + const registryDir = arg("registry") ?? "registry"; + + // Read the corpus straight from the registry rather than from a catalog.json + // built by the hosted-tier script. That file is not in the repo, so the + // documented regeneration command used to fail on a missing path, which is + // the whole reason the index was allowed to drift. + const catalogMap = catalogFromRegistry( + registryDir, + (path) => readFileSync(path, "utf-8"), + (path) => + readdirSync(path, { withFileTypes: true }) + .filter((e) => e.isDirectory()) + .map((e) => e.name), + ); + const catalog = Object.fromEntries(catalogMap); + const names = Object.keys(catalog).sort(); + if (names.length === 0) throw new Error(`no registry items found under ${registryDir}`); + const revision = localVectorRevision( + LOCAL_MODEL_ID, + LOCAL_MODEL_REVISION, + LOCAL_MODEL_DIMENSIONS, + catalogMap, + ); + // Embedding needs the model, and the model is a 32 MB opt-in that most + // contributors will not have. Say so and stop, rather than failing inside the + // ONNX loader with an ENOENT that names a path nobody set. + if (!isLocalModelReady()) { + console.error( + "The embedding model is not on this machine, so the index cannot be rebuilt here.\n" + + "That is fine: adding a registry item does not require it. Open the pull request\n" + + "and a maintainer regenerates the index before merge.\n\n" + + "To do it yourself, fetch the model once with:\n" + + " hyperframes catalog --query anything --on-device\n", + ); + process.exit(EXIT_NO_MODEL); + } + + const embedder = await loadLocalEmbedder(); + + const vectors = await embedInBatches(names, catalog, embedder); + const flat = packVectors(names, vectors); + + writeFileSync(join(dir, "local-vectors.bin"), Buffer.from(flat.buffer)); + writeFileSync( + join(dir, "local-vectors.json"), + `${JSON.stringify({ model: LOCAL_MODEL_ID, modelRevision: LOCAL_MODEL_REVISION, dimensions: LOCAL_MODEL_DIMENSIONS, revision, names }, null, 2)}\n`, + ); + const registryPath = join(registryDir, "registry.json"); + const registry = JSON.parse(readFileSync(registryPath, "utf-8")) as RegistryManifest; + writeFileSync( + registryPath, + `${JSON.stringify({ ...registry, catalogArtifact: { revision } }, null, 2)}\n`, + ); + + const megabytes = (flat.byteLength / 1024 / 1024).toFixed(2); + console.log(`moves ${names.length}`); + console.log(`model ${LOCAL_MODEL_ID}`); + console.log(`dimensions ${LOCAL_MODEL_DIMENSIONS}`); + console.log(`revision ${revision}`); + console.log(`payload ${megabytes} MB`); + console.log(`written ${dir}`); +} + +await main(); diff --git a/scripts/catalog/catalog-artifact.test.ts b/scripts/catalog/catalog-artifact.test.ts new file mode 100644 index 0000000000..c5b0816fd8 --- /dev/null +++ b/scripts/catalog/catalog-artifact.test.ts @@ -0,0 +1,292 @@ +import { describe, expect, it } from "vitest"; +import { readFileSync } from "node:fs"; +import { join } from "node:path"; + +import { + buildArtifact, + LOCAL_VECTOR_BATCH_SIZE, + localVectorRevision, + MANIFEST_SCHEMA_VERSION, + movesMissingFromRegistry, + parseShelf, + payloadDigest, + sha256Hex, + sortedNames, + verifyArtifact, + type Embedder, +} from "./catalog-artifact.js"; + +const REVISION = "00dda8f35dac0b89defe438d465cfe3d9d941b4f"; +const MODEL = "text-embedding-3-small"; + +const SHELF = `# Video primitive shelf + +Preamble that is not an entry. + +### beta-move + +group: Annotation. +what: Second alphabetically, first in the document. +use_when: A callout needs to land. +avoid_when: The shot is already busy. +notes: Not a retrieval field. + +### alpha-move + +group: Motion. +what: First alphabetically, second in the document. +use_when: Pace needs to lift. +avoid_when: Motion would distract. +`; + +/** Deterministic stand-in so no test makes a paid call. */ +const fakeEmbed = + (dimension = 4): Embedder => + async (texts) => + texts.map((text, index) => Array.from({ length: dimension }, (_, i) => (index + 1) / (i + 2))); + +async function build(overrides: Partial[0]> = {}) { + return buildArtifact({ + shelfText: SHELF, + sourceRevision: REVISION, + embeddingModel: MODEL, + embed: fakeEmbed(), + ...overrides, + }); +} + +describe("shelf contract", () => { + it("keys entries by move name and ignores the preamble", () => { + const entries = parseShelf(SHELF); + expect([...entries.keys()].sort()).toEqual(["alpha-move", "beta-move"]); + expect(JSON.stringify([...entries.values()])).not.toContain("Preamble"); + }); + + it("excludes the move name from its own retrieval text", () => { + // Including the name would let a move win on its own label, which is what + // lexical ranking already does. + for (const [name, text] of parseShelf(SHELF)) expect(text).not.toContain(name); + }); + + it("keeps only the four evaluated fields", () => { + expect(parseShelf(SHELF).get("beta-move")?.split("\n")).toEqual([ + "group: Annotation.", + "what: Second alphabetically, first in the document.", + "use_when: A callout needs to land.", + "avoid_when: The shot is already busy.", + ]); + }); + + it("orders embedding by name, not document order", () => { + expect(sortedNames(parseShelf(SHELF))).toEqual(["alpha-move", "beta-move"]); + }); + + it("rejects a duplicate move name", () => { + expect(() => parseShelf(`${SHELF}\n### beta-move\n\ngroup: Repeat.\n`)).toThrow( + /Duplicate move name/, + ); + }); + + it("rejects a shelf with no entries", () => { + expect(() => parseShelf("# Heading only\n\nProse.\n")).toThrow(/no entries/); + }); +}); + +describe("build contract", () => { + it("publishes descriptions and vectors covering the same moves", async () => { + const { catalogBytes, vectorsBytes, manifest } = await build(); + const catalog = JSON.parse(catalogBytes.toString("utf-8")); + const vectors = JSON.parse(vectorsBytes.toString("utf-8")); + expect(Object.keys(catalog).sort()).toEqual(Object.keys(vectors).sort()); + expect(manifest.move_count).toBe(2); + expect(manifest.embedding_model).toBe(MODEL); + expect(manifest.schema_version).toBe(MANIFEST_SCHEMA_VERSION); + }); + + it("rebuilds byte-identically from an unchanged shelf", async () => { + const first = await build(); + const second = await build(); + expect(first.catalogBytes.equals(second.catalogBytes)).toBe(true); + expect(first.vectorsBytes.equals(second.vectorsBytes)).toBe(true); + expect(first.manifest.payload_sha256).toBe(second.manifest.payload_sha256); + }); + + it("refuses a branch name in place of a resolved commit", async () => { + await expect(build({ sourceRevision: "feat-video-primitives" })).rejects.toThrow( + /resolved commit SHA/, + ); + }); + + it("fails the build when the embedder returns the wrong count", async () => { + const short: Embedder = async () => [[0.1, 0.2, 0.3, 0.4]]; + await expect(build({ embed: short })).rejects.toThrow(/Expected 2 vectors/); + }); + + it("fails the build when the embedder throws, publishing nothing", async () => { + const failing: Embedder = async () => { + throw new Error("provider unavailable"); + }; + await expect(build({ embed: failing })).rejects.toThrow(/provider unavailable/); + }); + + it("fails the build on an unexpected dimension", async () => { + await expect(build({ expectedDimension: 1536 })).rejects.toThrow(/dimension 4, expected 1536/); + }); + + it("fails the build on a non-finite value", async () => { + const bad: Embedder = async (texts) => texts.map(() => [Number.NaN, 1, 1, 1]); + await expect(build({ embed: bad })).rejects.toThrow(/non-finite/); + }); + + it("fails the build on a zero vector", async () => { + const zero: Embedder = async (texts) => texts.map(() => [0, 0, 0, 0]); + await expect(build({ embed: zero })).rejects.toThrow(/zero vector/); + }); + + it("fails the build on inconsistent vector widths", async () => { + const ragged: Embedder = async (texts) => + texts.map((_, i) => (i === 0 ? [1, 1, 1, 1] : [1, 1])); + await expect(build({ embed: ragged })).rejects.toThrow(/expected 4/); + }); +}); + +describe("local vector revision", () => { + it("is stable across filesystem traversal order", () => { + const first = new Map([ + ["whip-pan", "Fast transition"], + ["count-up", "Animated number"], + ]); + const reversed = new Map([...first].reverse()); + + expect(localVectorRevision("model", "revision", 384, first)).toBe( + localVectorRevision("model", "revision", 384, reversed), + ); + }); + + it("uses locale-independent code-unit ordering", () => { + const corpus = new Map([ + ["ä-item", "Third"], + ["a-item", "First"], + ["z-item", "Second"], + ]); + const expectedRows = [ + ["a-item", "First"], + ["z-item", "Second"], + ["ä-item", "Third"], + ]; + + expect(localVectorRevision("model", "revision", 384, corpus)).toBe( + sha256Hex( + JSON.stringify({ + model: "model", + modelRevision: "revision", + dimensions: 384, + batchSize: LOCAL_VECTOR_BATCH_SIZE, + rows: expectedRows, + }), + ), + ); + }); + + it("changes when searchable text changes under the same name", () => { + const before = new Map([["whip-pan", "Fast transition"]]); + const after = new Map([["whip-pan", "Fast energetic transition"]]); + + expect(localVectorRevision("model", "revision", 384, before)).not.toBe( + localVectorRevision("model", "revision", 384, after), + ); + }); + + it("changes when the embedding contract changes", () => { + const corpus = new Map([["whip-pan", "Fast transition"]]); + + expect(localVectorRevision("model-a", "revision", 384, corpus)).not.toBe( + localVectorRevision("model-b", "revision", 384, corpus), + ); + expect(localVectorRevision("model-a", "revision", 384, corpus)).not.toBe( + localVectorRevision("model-a", "revision", 768, corpus), + ); + expect(localVectorRevision("model-a", "revision-a", 384, corpus)).not.toBe( + localVectorRevision("model-a", "revision-b", 384, corpus), + ); + }); +}); + +describe("verify contract", () => { + it("accepts a freshly built artifact", async () => { + const built = await build(); + expect(() => verifyArtifact(built)).not.toThrow(); + }); + + it("rejects a mutated description", async () => { + const built = await build(); + const mutated = Buffer.from( + built.catalogBytes.toString("utf-8").replace("Motion.", "Tampered."), + ); + expect(() => verifyArtifact({ ...built, catalogBytes: mutated })).toThrow( + /does not match the manifest/, + ); + }); + + it("rejects a mutated vector", async () => { + const built = await build(); + const mutated = Buffer.from(built.vectorsBytes.toString("utf-8").replace("0.5", "0.6")); + expect(() => verifyArtifact({ ...built, vectorsBytes: mutated })).toThrow( + /does not match the manifest/, + ); + }); + + it("rejects a manifest whose count disagrees with the payload", async () => { + const built = await build(); + expect(() => + verifyArtifact({ ...built, manifest: { ...built.manifest, move_count: 99 } }), + ).toThrow(/declares 99/); + }); + + it("rejects an unknown schema version", async () => { + const built = await build(); + expect(() => + verifyArtifact({ ...built, manifest: { ...built.manifest, schema_version: 99 } }), + ).toThrow(/schema version/); + }); +}); + +describe("consumer parity", () => { + it("computes the digest the Python consumer computes", () => { + // Pinned from the Python consumer for the same inputs. Both sides hash file + // bytes as sha256(sha256(catalog) || sha256(vectors)), so a change to either + // implementation fails here rather than producing an artifact the consumer + // silently rejects at load time. + const digest = payloadDigest( + Buffer.from("catalog-bytes", "utf-8"), + Buffer.from("vector-bytes", "utf-8"), + ); + expect(digest).toBe("291c30dddc35c705a681081d9c2e2a96314bcccf0d024b77a3692e412adbf103"); + }); + + it("reproduces the evaluated shelf when one is available", () => { + // Opt-in: needs the pinned shelf. Guards the ported contract against drift. + const shelfPath = process.env.EVAL_SHELF_PATH; + if (!shelfPath) return; + const entries = parseShelf(readFileSync(join(shelfPath), "utf-8")); + expect(entries.size).toBe(424); + }); +}); + +describe("movesMissingFromRegistry", () => { + it("names the shelf moves no registry item can serve", () => { + // The failure this guards produced no error at all: the artifact shipped, + // ranked these moves highest, and the client then had nothing to show. + expect(movesMissingFromRegistry(["count-up", "number-wheel"], ["count-up"])).toEqual([ + "number-wheel", + ]); + }); + + it("is empty when the registry covers the shelf", () => { + expect(movesMissingFromRegistry(["count-up"], ["count-up", "badge-pop"])).toEqual([]); + }); + + it("reports every move when the registry is empty", () => { + expect(movesMissingFromRegistry(["a", "b"], [])).toEqual(["a", "b"]); + }); +}); diff --git a/scripts/catalog/catalog-artifact.ts b/scripts/catalog/catalog-artifact.ts new file mode 100644 index 0000000000..5e49816e2c --- /dev/null +++ b/scripts/catalog/catalog-artifact.ts @@ -0,0 +1,307 @@ +/** + * Build the published video-primitive catalog artifact. + * + * HyperFrames owns the shelf, so HyperFrames owns this job. Descriptions and + * their vectors publish together as one version, because a consumer that loads + * a new description against an old vector produces a ranking that is wrong in a + * way nothing alarms on. + * + * The retrieval-text contract is inherited from the evaluation and must not + * drift: an entry starts at a `### ` heading, only `group`, `what`, `use_when` + * and `avoid_when` form the body, the move name is deliberately excluded, and + * names sort before embedding. Excluding the name keeps a move from winning on + * its own label, which is what lexical ranking already does. + */ + +import { createHash } from "node:crypto"; + +export const RETRIEVAL_FIELDS = ["group", "what", "use_when", "avoid_when"] as const; +export const MANIFEST_SCHEMA_VERSION = 1; +/** Padding changes quantized embeddings, so batch size is part of vector identity. */ +export const LOCAL_VECTOR_BATCH_SIZE = 16; + +export interface CatalogManifest { + schema_version: number; + source_revision: string; + shelf_sha256: string; + embedding_model: string; + move_count: number; + payload_sha256: string; +} + +export interface BuiltArtifact { + manifest: CatalogManifest; + catalogBytes: Buffer; + vectorsBytes: Buffer; +} + +/** Embed texts in the order given. Injected so tests never make a paid call. */ +export type Embedder = (texts: string[]) => Promise; + +// tolerant parser for a hand-edited file +// fallow-ignore-next-line complexity +export function parseShelf(text: string): Map { + const entries = new Map(); + const blocks = text.split(/^### /m).slice(1); + for (const block of blocks) { + const lines = block.split("\n"); + const name = (lines[0] ?? "").trim(); + if (!name) continue; + if (entries.has(name)) throw new Error(`Duplicate move name in shelf: ${name}`); + const body = lines + .slice(1) + .filter((line) => (RETRIEVAL_FIELDS as readonly string[]).includes(line.split(":")[0] ?? "")); + entries.set(name, body.join("\n")); + } + if (entries.size === 0) throw new Error("Shelf contains no entries"); + return entries; +} + +/** Embedding order. Vector N corresponds to element N of this list. */ +/** + * One registry item's retrieval text. + * + * Title, description and tags only. The name is deliberately excluded: it is + * what the query is trying to find, and folding it into the text being matched + * rewards items whose name happens to echo the query wording rather than items + * that do what was asked. + */ +export function itemRetrievalText(item: { + title?: string; + description?: string; + tags?: readonly string[]; +}): string { + const parts = [item.title ?? "", item.description ?? "", (item.tags ?? []).join(" ")]; + return parts + .map((part) => part.trim()) + .filter(Boolean) + .join("\n"); +} + +/** + * Read every installable item into the same shape parseShelf produces. + * + * Items with no usable text are skipped rather than embedded empty: an + * all-zero-signal entry still occupies a slot in every ranking. + */ +// walks the registry and skips several kinds of item, each for a different reason +// fallow-ignore-next-line complexity +export function catalogFromRegistry( + registryDir: string, + read: (path: string) => string, + listDirs: (path: string) => string[], +): Map { + const catalog = new Map(); + for (const type of ["blocks", "components"]) { + let names: string[]; + try { + names = listDirs(`${registryDir}/${type}`); + } catch { + continue; + } + for (const name of names.sort()) { + let item: { title?: string; description?: string; tags?: string[] }; + try { + item = JSON.parse(read(`${registryDir}/${type}/${name}/registry-item.json`)) as typeof item; + } catch { + continue; + } + const text = itemRetrievalText(item); + if (text) catalog.set(name, text); + } + } + return catalog; +} + +export function sortedNames(entries: Map): string[] { + return [...entries.keys()].sort(); +} + +export function sha256Hex(data: Buffer | string): string { + return createHash("sha256").update(data).digest("hex"); +} + +/** + * Identity of the searchable corpus and the model contract that embedded it. + * + * Sorted entries make filesystem traversal order irrelevant. The text stays + * in the digest, so changing a title, description, or tag changes the revision + * even when every catalog name remains the same. + */ +export function localVectorRevision( + model: string, + modelRevision: string, + dimensions: number, + entries: ReadonlyMap, +): string { + const rows = [...entries.entries()].sort(([left], [right]) => + left < right ? -1 : left > right ? 1 : 0, + ); + return sha256Hex( + JSON.stringify({ + model, + modelRevision, + dimensions, + batchSize: LOCAL_VECTOR_BATCH_SIZE, + rows, + }), + ); +} + +/** + * Digest the two published files as bytes. + * + * Deliberately over bytes rather than re-serialized structures. The consumer is + * Python and this producer is TypeScript, and the two disagree on JSON number + * formatting: a whole-valued float serializes as `1.0` in one and `1` in the + * other. Hashing bytes removes the canonicalization question rather than + * documenting it. The consumer computes this identically. + */ +export function payloadDigest(catalogBytes: Buffer, vectorsBytes: Buffer): string { + const digest = createHash("sha256"); + digest.update(createHash("sha256").update(catalogBytes).digest()); + digest.update(createHash("sha256").update(vectorsBytes).digest()); + return digest.digest("hex"); +} + +/** Stable serialization so an unchanged shelf rebuilds byte-identically. */ +function serialize(record: Record): Buffer { + const sorted: Record = {}; + for (const key of Object.keys(record).sort()) sorted[key] = record[key]; + return Buffer.from(`${JSON.stringify(sorted, null, 2)}\n`, "utf-8"); +} + +// assembles one artifact from several optional inputs; each branch is an input that may be absent +// fallow-ignore-next-line complexity +export async function buildArtifact(options: { + shelfText: string; + sourceRevision: string; + embeddingModel: string; + embed: Embedder; + expectedDimension?: number; + /** + * Names the registry can serve. When given, shelf moves absent from it are + * left out of the artifact: a move that ranks and cannot be installed is + * worse than one that never appears, because it occupies a top slot. + */ + installableNames?: readonly string[]; +}): Promise { + const { shelfText, sourceRevision, embeddingModel, embed, expectedDimension } = options; + if (!/^[0-9a-f]{40}$/i.test(sourceRevision)) { + throw new Error(`source_revision must be a resolved commit SHA, got ${sourceRevision}`); + } + + const entries = parseShelf(shelfText); + if (options.installableNames) { + for (const name of movesMissingFromRegistry([...entries.keys()], options.installableNames)) { + entries.delete(name); + } + } + const names = sortedNames(entries); + const vectors = await embed(names.map((name) => entries.get(name) as string)); + + // Every validation runs before anything is written. A build that emits + // descriptions and then fails to embed would publish exactly the half-artifact + // the publish-together rule exists to prevent. + if (vectors.length !== names.length) { + throw new Error(`Expected ${names.length} vectors, embedder returned ${vectors.length}`); + } + const width = vectors[0]?.length ?? 0; + if (width === 0) throw new Error("Embedder returned empty vectors"); + if (expectedDimension !== undefined && width !== expectedDimension) { + throw new Error(`Vectors have dimension ${width}, expected ${expectedDimension}`); + } + vectors.forEach((vector, index) => { + if (vector.length !== width) { + throw new Error( + `Vector for ${names[index]} has dimension ${vector.length}, expected ${width}`, + ); + } + if (!vector.every((value) => Number.isFinite(value))) { + throw new Error(`Vector for ${names[index]} contains a non-finite value`); + } + if (!vector.some((value) => value !== 0)) { + throw new Error(`Vector for ${names[index]} is a zero vector`); + } + }); + + const catalog: Record = {}; + const vectorMap: Record = {}; + names.forEach((name, index) => { + catalog[name] = entries.get(name) as string; + vectorMap[name] = vectors[index] as number[]; + }); + + const catalogBytes = serialize(catalog); + const vectorsBytes = serialize(vectorMap); + + return { + catalogBytes, + vectorsBytes, + manifest: { + schema_version: MANIFEST_SCHEMA_VERSION, + source_revision: sourceRevision, + shelf_sha256: sha256Hex(shelfText), + embedding_model: embeddingModel, + move_count: names.length, + payload_sha256: payloadDigest(catalogBytes, vectorsBytes), + }, + }; +} + +/** + * Shelf moves with no matching registry item. + * + * Ranking is published separately from the items themselves, so the two drift. + * A move only present in the shelf ranks well and then cannot be shown or + * installed, which reads to the user as a bad search rather than a bad build. + */ +export function movesMissingFromRegistry( + shelfNames: readonly string[], + registryNames: readonly string[], +): string[] { + const known = new Set(registryNames); + return shelfNames.filter((name) => !known.has(name)); +} + +export function manifestBytes(manifest: CatalogManifest): Buffer { + return serialize(manifest as unknown as Record); +} + +/** Recompute the published digest and compare it to what the manifest claims. */ +// one check per way an artifact can be wrong; collapsing them would lose which one failed +// fallow-ignore-next-line complexity +export function verifyArtifact(input: { + manifest: CatalogManifest; + catalogBytes: Buffer; + vectorsBytes: Buffer; +}): void { + const { manifest, catalogBytes, vectorsBytes } = input; + if (manifest.schema_version !== MANIFEST_SCHEMA_VERSION) { + throw new Error( + `Manifest schema version ${manifest.schema_version} is not ${MANIFEST_SCHEMA_VERSION}`, + ); + } + const catalog = JSON.parse(catalogBytes.toString("utf-8")) as Record; + const vectors = JSON.parse(vectorsBytes.toString("utf-8")) as Record; + + const names = Object.keys(catalog); + if (names.length !== manifest.move_count) { + throw new Error( + `Artifact holds ${names.length} moves but the manifest declares ${manifest.move_count}`, + ); + } + const missing = names.filter((name) => !(name in vectors)); + if (missing.length > 0) { + throw new Error( + `${missing.length} moves have a description but no vector, first is ${missing[0]}`, + ); + } + + const actual = payloadDigest(catalogBytes, vectorsBytes); + if (actual !== manifest.payload_sha256) { + throw new Error( + `Payload digest ${actual} does not match the manifest's ${manifest.payload_sha256}`, + ); + } +} diff --git a/scripts/catalog/check-artifact-coverage.ts b/scripts/catalog/check-artifact-coverage.ts new file mode 100644 index 0000000000..6188d15317 --- /dev/null +++ b/scripts/catalog/check-artifact-coverage.ts @@ -0,0 +1,110 @@ +/** + * Fails when the committed catalog vector artifact no longer represents the + * registry it is meant to search. + * + * The pre-commit hook rebuilds when the opted-in model is available; CI verifies + * freshness when it is not. Removing an item is self-healing at search time, + * but every corpus change still invalidates the published revision so stale + * vectors cannot pass the gate unnoticed. + * + * The corpus revision includes title, description, tags, model, and dimensions, + * so same-name edits cannot hide behind a name-only coverage check. Computing + * it needs no model and no network. + */ +import { readFileSync, readdirSync } from "node:fs"; + +import { + LOCAL_MODEL_DIMENSIONS, + LOCAL_MODEL_ID, + LOCAL_MODEL_REVISION, +} from "../../packages/cli/src/registry/localModel.js"; +import { catalogFromRegistry, localVectorRevision } from "./catalog-artifact.js"; + +type RegistryItem = { name: string; type?: string }; +type Registry = { items: RegistryItem[]; catalogArtifact?: { revision?: string } }; +type Artifact = { model?: string; dimensions?: number; revision?: string; names?: string[] }; + +const REGISTRY = "registry/registry.json"; +const ARTIFACT = "registry/catalog-artifact/local-vectors.json"; + +function read(path: string): T { + try { + return JSON.parse(readFileSync(path, "utf8")) as T; + } catch (error) { + console.error(`Could not read ${path}: ${(error as Error).message}`); + process.exit(1); + } +} + +const registry = read(REGISTRY); +const artifact = read(ARTIFACT); +const corpus = catalogFromRegistry( + "registry", + (path) => readFileSync(path, "utf-8"), + (path) => + readdirSync(path, { withFileTypes: true }) + .filter((entry) => entry.isDirectory()) + .map((entry) => entry.name), +); + +// Only blocks and components are searchable moves. Examples are starter +// projects a user scaffolds, never something `catalog` ranks, so the artifact +// deliberately carries no vector for them and demanding one would keep this +// gate permanently red. +const SEARCHABLE = new Set(["hyperframes:block", "hyperframes:component"]); +const registryNames = new Set( + registry.items.filter((i) => SEARCHABLE.has(i.type ?? "")).map((i) => i.name), +); +const artifactNames = new Set(artifact.names ?? []); + +const unindexed = [...registryNames].filter((n) => !artifactNames.has(n)).sort(); +const dropped = [...artifactNames].filter((n) => !registryNames.has(n)).sort(); +const expectedRevision = localVectorRevision( + LOCAL_MODEL_ID, + LOCAL_MODEL_REVISION, + LOCAL_MODEL_DIMENSIONS, + corpus, +); +const artifactRevisionMatches = artifact.revision === expectedRevision; +const registryRevisionMatches = registry.catalogArtifact?.revision === expectedRevision; + +const show = (names: string[]) => + names + .slice(0, 10) + .map((n) => ` ${n}`) + .join("\n") + (names.length > 10 ? `\n ... and ${names.length - 10} more` : ""); + +console.log(`registry: ${registryNames.size} searchable items (blocks + components)`); +console.log(`artifact: ${artifactNames.size} vectors (${artifact.model ?? "unknown model"})`); + +if (dropped.length > 0) { + // Not fatal: the CLI filters these before a user ever sees them. + console.log(`\nnote: ${dropped.length} vector(s) name items the registry no longer has.`); + console.log(show(dropped)); + console.log(" These are filtered at search time, so they cost space, not correctness."); +} + +if (unindexed.length > 0) { + console.error(`\n${unindexed.length} registry item(s) have no vector:`); + console.error(show(unindexed)); +} + +if (!artifactRevisionMatches || !registryRevisionMatches) { + console.error("\nThe published vector revision does not match the searchable registry text."); + console.error(` expected: ${expectedRevision}`); + console.error(` artifact: ${artifact.revision ?? "missing"}`); + console.error(` registry: ${registry.catalogArtifact?.revision ?? "missing"}`); +} + +if (unindexed.length > 0 || !artifactRevisionMatches || !registryRevisionMatches) { + console.error( + "\nMeaning search is stale. Word search still uses the live registry.\n\n" + + "If you have the embedding model, regenerate and commit the artifact:\n" + + " bun scripts/catalog/build-local-vectors.ts\n\n" + + "If you do not, leave it: changing a registry item does not require the model,\n" + + "and a maintainer regenerates the index before merge.\n", + ); + process.exit(1); +} + +console.log("\nEvery searchable field matches the published vector revision."); diff --git a/skills-manifest.json b/skills-manifest.json index cb7dbe3e27..cb128dc75d 100644 --- a/skills-manifest.json +++ b/skills-manifest.json @@ -26,7 +26,7 @@ "files": 121 }, "hyperframes-cli": { - "hash": "3eab4c5fc1ae8e26", + "hash": "17e2300803951ed7", "files": 11 }, "hyperframes-core": { @@ -42,7 +42,7 @@ "files": 3 }, "hyperframes-registry": { - "hash": "3a864992e765b9bf", + "hash": "eca45f795c2ff093", "files": 10 }, "media-use": { diff --git a/skills/hyperframes-cli/SKILL.md b/skills/hyperframes-cli/SKILL.md index 8db28f39ef..949594dac8 100644 --- a/skills/hyperframes-cli/SKILL.md +++ b/skills/hyperframes-cli/SKILL.md @@ -16,13 +16,14 @@ Run commands as `npx hyperframes ...` unless project instructions provide a wrap ## Development loop 1. **Scaffold:** `npx hyperframes init ` or capture a site. In non-TTY mode, pass `--non-interactive --example=`. -2. **Author:** write the composition using `/hyperframes-core`. -3. **Get fast feedback while editing:** run `npx hyperframes lint` after the first HTML pass and after structural changes. -4. **Run the final gate:** run `npx hyperframes check`; it reruns lint before opening the browser. Do not prepend a redundant standalone lint invocation. Add `--snapshots` for annotated overview frames and finding crops. -5. **Inspect sub-compositions:** when `index.html` mounts `data-composition-src`, capture midpoint snapshots and inspect each mounted scene. -6. **Open the final Studio preview:** run `npx hyperframes preview`, hand the timeline project URL to the user, and ask whether to revise or render. -7. **Render only after approval:** use draft quality for iteration and high quality for delivery. -8. **Verify the output:** confirm the file exists, is non-empty, and has a plausible duration. +2. **Find the move:** before authoring motion by hand, search for a primitive that already does it: `npx hyperframes catalog --query "reveal a headline one line at a time"`. Ask for the effect you want rather than the mechanism you have in mind. Install with `npx hyperframes add ` (see `/hyperframes-registry`). Author by hand only once nothing fits. +3. **Author:** write the composition using `/hyperframes-core`. +4. **Get fast feedback while editing:** run `npx hyperframes lint` after the first HTML pass and after structural changes. +5. **Run the final gate:** run `npx hyperframes check`; it reruns lint before opening the browser. Do not prepend a redundant standalone lint invocation. Add `--snapshots` for annotated overview frames and finding crops. +6. **Inspect sub-compositions:** when `index.html` mounts `data-composition-src`, capture midpoint snapshots and inspect each mounted scene. +7. **Open the final Studio preview:** run `npx hyperframes preview`, hand the timeline project URL to the user, and ask whether to revise or render. +8. **Render only after approval:** use draft quality for iteration and high quality for delivery. +9. **Verify the output:** confirm the file exists, is non-empty, and has a plausible duration. ```bash # Fast iteration check; repeat while authoring as needed. @@ -61,6 +62,11 @@ Treat tiny unstyled content, canvas-sized icons, missing hero elements, or timel ## Agent conventions +- **Search the catalog before writing motion by hand.** `npx hyperframes catalog --query ""`. Search is entirely local: there is no hosted tier, no account, and the query text is never sent anywhere. By default it ranks on vocabulary shared with the item's name, title and description, which misses any phrasing that does not reuse the catalog's own wording. Add `--on-device` to rank by meaning instead (see the offline tier below). +- **Read which tier answered; never infer it from results appearing.** With `--json` the envelope carries `query`, `tier` (`on-device` or `words`), `tier_detail`, `dropped`, `unindexed`, `shown`, `total` and `results`, plus `top_score` when the answering tier produces one and `warnings` when a tier was asked for and could not run. A weak result on `words` is expected; the same result on `on-device` is a bug. `top_score` is on-device only and has no threshold behind it: the ranker returns the whole catalog in some order for every query, so read it as evidence rather than as a pass or fail. +- **`dropped` and `unindexed` are opposite skews between the registry and the on-device index, and rewording the query fixes neither.** `dropped` counts ranked names this registry cannot install, so the strongest matches are the ones being lost. `unindexed` counts registry moves the index cannot see at all, which no query can ever return. Refreshing the registry is not the answer to either: its manifest carries a 24h TTL and heals itself, while the vectors are a separately published artifact fetched into `~/.hyperframes/catalog/`. Re-running with `--on-device` refetches that index when `unindexed` is above zero, so that is the remedy to hand the user. A pure over-coverage skew (`dropped` above zero while `unindexed` is zero) does not trigger the refetch; clearing `~/.hyperframes/catalog/` is the only way out of that one. Both counts are of names rather than of results, so either can exceed `total`. +- **Offer the offline tier; never enable it silently.** A one-time ~33 MB download (a quantized ONNX build of `bge-small-en-v1.5` plus its tokenizer, pinned to a fixed revision) and the catalog vectors from the registry, both cached under `~/.hyperframes/`, neither added to the project or any package. Once cached it ranks by meaning with nothing sent. Say the size out loud and let the person decide, then pass `--on-device` (with `-y` to skip the prompt) once they agree. The interactive offer only fires on a TTY, and under `--json` nothing about it is printed at all, so in an agent run you have to raise it with the user yourself. + - Prefer `--json` for agent and CI calls. Server-mode `render`, `preview`, and `play` do not provide ordinary JSON output; `preview --selection --json` and `preview --context --json` are query-mode exceptions. - `doctor --json` always exits zero. Gate on its payload: diff --git a/skills/hyperframes-registry/SKILL.md b/skills/hyperframes-registry/SKILL.md index 5fd897bc71..57c2f6cad2 100644 --- a/skills/hyperframes-registry/SKILL.md +++ b/skills/hyperframes-registry/SKILL.md @@ -85,7 +85,19 @@ See [wiring-components.md](./references/wiring-components.md) for full details. ## Discovery -Use the CLI as the primary discovery surface: +Use the CLI as the primary discovery surface. **Search by intent before browsing:** the registry holds more items than you can scan by eye, so listing them and matching on names or tags is the slow path, and it fails whenever the author's wording differs from yours. + +```bash +# Rank the whole catalog against what the beat should do +npx hyperframes catalog --query "reveal a headline one line at a time" +npx hyperframes add caption-clip-wipe +``` + +Search is local and sends nothing. By default it ranks on vocabulary shared with the item's name, title and description, so it only finds items that reuse your words; `--on-device` ranks by meaning instead, after a one-time model download. With `--json` the envelope names which tier answered, so check that rather than assuming a ranking happened. + +Installability is applied after ranking, not before it: a name the vectors carry but this registry cannot serve is dropped from the results and counted in `dropped`, so a non-zero `dropped` means the two are different generations. See `/hyperframes-cli` for the offline tier, the consent gates, and how to refresh a stale index. + +To browse or filter instead of search: ```bash npx hyperframes catalog diff --git a/skills/hyperframes-registry/references/contributing.md b/skills/hyperframes-registry/references/contributing.md index 58ff2a8133..14bf58bd2b 100644 --- a/skills/hyperframes-registry/references/contributing.md +++ b/skills/hyperframes-registry/references/contributing.md @@ -132,8 +132,12 @@ git checkout -b feat/registry-{name} # 2. Format HTML npx oxfmt registry/{kind}/{name}/*.html -# 3. Update registry/registry.json — add entry to the "items" array: -# { "name": "{name}", "type": "hyperframes:block" } (or "hyperframes:component") +# 3. Regenerate registry/registry.json from the item directories. +# Do not hand-edit it: an entry added by hand survives until the next +# regeneration and then vanishes, and one left behind for a directory that +# no longer exists is worse, because `hyperframes add ` resolves the +# name and then fails on missing files. +npx tsx scripts/generate-registry-items.ts # 4. Generate catalog docs page npx tsx scripts/generate-catalog-pages.ts