{"_id":"@cadencestudio/creative-kit","_rev":"2-aad4bdd20dd7233b147332427ff5881a","name":"@cadencestudio/creative-kit","dist-tags":{"latest":"0.2.1"},"versions":{"0.2.0":{"name":"@cadencestudio/creative-kit","version":"0.2.0","license":"MIT","_id":"@cadencestudio/creative-kit@0.2.0","maintainers":[{"name":"cadencestudio","email":"austin@cadencestud.io"}],"homepage":"https://github.com/cadence-studio-creative/creative-kit#readme","bugs":{"url":"https://github.com/cadence-studio-creative/creative-kit/issues"},"dist":{"shasum":"b22ac8f96ea73ec312e92cc75ea244989cbe0b1e","tarball":"https://registry.npmjs.org/@cadencestudio/creative-kit/-/creative-kit-0.2.0.tgz","fileCount":25,"integrity":"sha512-i1wdHrHL0Z3muOELGtz9XJuqJ8m4UXKYzyIYuEEGTcPF9EOX8+O8vcIITsbrDURGj0BUoUhScyzxrkPYgXyDFw==","signatures":[{"sig":"MEUCIAuydfT2mc5uQp/QMEc8YYf7i2yqRHaB40LXYxrGtyKkAiEA9twI1jluI2b5uvgOIwDe/bQygaXnuY2dsQxTebFjuWg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":63079},"type":"module","exports":{"./a11y":{"types":"./dist/a11y.d.ts","default":"./dist/a11y.js"},"./rive":{"types":"./dist/rive.d.ts","default":"./dist/rive.js"},"./icons":{"types":"./dist/icons.d.ts","default":"./dist/icons.js"},"./motion":{"types":"./dist/motion.d.ts","default":"./dist/motion.js"},"./scroll":{"types":"./dist/scroll.d.ts","default":"./dist/scroll.js"},"./transitions":{"types":"./dist/transitions.d.ts","default":"./dist/transitions.js"},"./package.json":"./package.json","./tooling/icons/svgo.config":"./tooling/icons/svgo.config.mjs","./tooling/icons/build-sprite":"./tooling/icons/build-sprite.mjs"},"gitHead":"054b3140ee42fa141bb2260caf72b5136bc87f5a","scripts":{"build":"tsup","prepack":"npm run build","typecheck":"tsc --noEmit"},"_npmUser":{"name":"cadencestudio","email":"austin@cadencestud.io"},"repository":{"url":"git+https://github.com/cadence-studio-creative/creative-kit.git","type":"git"},"_npmVersion":"11.16.0","description":"Cadence Studio shared creative plumbing. Motion presets, scroll orchestration, a Rive wrapper, the SgIcon system, view transitions helpers, and a reduced motion guard. Token agnostic by contract: the host app supplies all colors, durations, easings, and g","directories":{},"sideEffects":false,"_nodeVersion":"24.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"gsap":"^3.12.5","tsup":"^8.0.0","react":"^19.0.0","motion":"^12.0.0","typescript":"^5.5.0","@types/react":"^19.0.0","lucide-react":"^0.525.0","@rive-app/react-canvas":"^4.9.0"},"peerDependencies":{"gsap":"^3.12.0","react":"^18.0.0 || ^19.0.0","motion":"^11.0.0 || ^12.0.0","lucide-react":">=0.400.0","@rive-app/react-canvas":"^4.0.0"},"peerDependenciesMeta":{"gsap":{"optional":true},"motion":{"optional":true},"lucide-react":{"optional":true},"@rive-app/react-canvas":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/creative-kit_0.2.0_1783093156776_0.5304251330171932","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@cadencestudio/creative-kit","version":"0.2.1","description":"Cadence Studio shared creative plumbing. Motion presets, scroll orchestration, a Rive wrapper, the SgIcon system, view transitions helpers, and a reduced motion guard. Token agnostic by contract: the host app supplies all colors, durations, easings, and g","license":"MIT","type":"module","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/cadence-studio-creative/creative-kit.git"},"exports":{"./motion":{"types":"./dist/motion.d.ts","default":"./dist/motion.js"},"./scroll":{"types":"./dist/scroll.d.ts","default":"./dist/scroll.js"},"./rive":{"types":"./dist/rive.d.ts","default":"./dist/rive.js"},"./icons":{"types":"./dist/icons.d.ts","default":"./dist/icons.js"},"./transitions":{"types":"./dist/transitions.d.ts","default":"./dist/transitions.js"},"./a11y":{"types":"./dist/a11y.d.ts","default":"./dist/a11y.js"},"./tooling/icons/svgo.config":"./tooling/icons/svgo.config.mjs","./tooling/icons/build-sprite":"./tooling/icons/build-sprite.mjs","./package.json":"./package.json"},"scripts":{"build":"tsup","typecheck":"tsc --noEmit","prepack":"npm run build"},"peerDependencies":{"@rive-app/react-canvas":"^4.0.0","gsap":"^3.12.0","lucide-react":">=0.400.0","motion":"^11.0.0 || ^12.0.0","react":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"@rive-app/react-canvas":{"optional":true},"gsap":{"optional":true},"lucide-react":{"optional":true},"motion":{"optional":true}},"devDependencies":{"@rive-app/react-canvas":"^4.9.0","@types/react":"^19.0.0","gsap":"^3.12.5","lucide-react":"^0.525.0","motion":"^12.0.0","react":"^19.0.0","tsup":"^8.0.0","typescript":"^5.5.0"},"gitHead":"ca5689b550990f51c7dad9735755ad8da2c552e7","_id":"@cadencestudio/creative-kit@0.2.1","bugs":{"url":"https://github.com/cadence-studio-creative/creative-kit/issues"},"homepage":"https://github.com/cadence-studio-creative/creative-kit#readme","_nodeVersion":"24.18.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-vYouLa0dRRX+rSvdIxuxIn0HR1vd1xX3jVaPowRvWdxqs1i5TNfY0Xa/xWxPFNfM7rGMlkqp/fu3ZzZ00CRVKA==","shasum":"63ff9bdfc11f6410b4881be621d186d121e5f2df","tarball":"https://registry.npmjs.org/@cadencestudio/creative-kit/-/creative-kit-0.2.1.tgz","fileCount":25,"unpackedSize":67594,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDIQRhkNrL20FwCZL2f7AlUSk4qxp+3JAPCtLaEQ7bAzAiEA8MQ4NuwoOyFJntZgEzaNxBn/XC6gzsnHI9tcfPhAYQ8="}]},"_npmUser":{"name":"cadencestudio","email":"austin@cadencestud.io"},"directories":{},"maintainers":[{"name":"cadencestudio","email":"austin@cadencestud.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/creative-kit_0.2.1_1783097658447_0.45088683522740336"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-03T15:39:16.648Z","modified":"2026-07-03T16:54:18.706Z","0.2.0":"2026-07-03T15:39:16.913Z","0.2.1":"2026-07-03T16:54:18.593Z"},"bugs":{"url":"https://github.com/cadence-studio-creative/creative-kit/issues"},"license":"MIT","homepage":"https://github.com/cadence-studio-creative/creative-kit#readme","repository":{"type":"git","url":"git+https://github.com/cadence-studio-creative/creative-kit.git"},"description":"Cadence Studio shared creative plumbing. Motion presets, scroll orchestration, a Rive wrapper, the SgIcon system, view transitions helpers, and a reduced motion guard. Token agnostic by contract: the host app supplies all colors, durations, easings, and g","maintainers":[{"name":"cadencestudio","email":"austin@cadencestud.io"}],"readme":"# @cadencestudio/creative-kit\n\nCadence Studio's shared creative plumbing. One package, built and maintained\nonce, that every Cadence build installs to get our motion, scroll, Rive, icon,\nand transition primitives.\n\nThe kit is **token agnostic** and **framework modular**: it defines the\ncontract, the host app supplies its own tokens and brand art. It ships\nplumbing only. No brand animations, no brand glyphs, no colors, no durations.\n\n## Install\n\nPublished PREBUILT to the public npm registry (dist/ ships in the artifact;\nconsumers never run a build or lifecycle script at install time, so\n`--ignore-scripts` CI and Vercel installs just work):\n\n```sh\nnpm i @cadencestudio/creative-kit\n```\n\nThen install the peer dependencies your entry points need (see the table\nbelow). The kit bundles none of them.\n\nVersions before 0.2.0 installed as a private git dependency\n(`github:cadence-studio-creative/creative-kit#v0.1.x`) and built at install\ntime via a prepare script. That method is retired; migrate any consumer still\non it to the registry package.\n\n## Entry points\n\n| Entry | What it gives you | Peer deps required |\n| --- | --- | --- |\n| `@cadencestudio/creative-kit/motion` | `useMotionPresets` (fade, slideUp, stagger), `ckTransition`, `CK_TOKENS` | `motion`, `react` |\n| `@cadencestudio/creative-kit/scroll` | `registerScroll`, `useGsapContext`, `useScrollDeck` | `gsap`, `react` |\n| `@cadencestudio/creative-kit/rive` | `<RiveGraphic>` with built in reduced motion and load failure fallback | `@rive-app/react-canvas`, `react` |\n| `@cadencestudio/creative-kit/icons` | `createSgIcon` (typed sprite icon factory), `fromLucide` adapter | `react` (`lucide-react` only if you use `fromLucide`) |\n| `@cadencestudio/creative-kit/transitions` | `startViewTransition`, `supportsViewTransitions`, `viewTransitionName` | none |\n| `@cadencestudio/creative-kit/a11y` | `useReducedMotion` hook, `prefersReducedMotion` check | `react` (hook only) |\n| `@cadencestudio/creative-kit/tooling/icons/build-sprite` | Node script: glyph dir in, sprite.svg + IconName union out | `svgo` (host devDependency) |\n\nEvery module respects `prefers-reduced-motion` through the shared `a11y`\nguard: presets collapse to instant state changes, the scroll deck stops\nsnapping, Rive renders its static fallback, and view transitions skip the\ncrossfade while still applying the DOM update.\n\n## Choosing a motion library\n\nThree motion technologies ship here on purpose, because they solve different\nproblems. Pick by what the motion **is**, not by habit. If two seem to fit,\nprefer the one earlier in this list and reach for a second only when the first\ngenuinely cannot do the job. That discipline is what keeps three libraries from\nturning into three ways to do one thing.\n\n- **`transitions` (View Transitions + CSS), the free baseline.** Start here.\n  Page and same-page DOM crossfades, plus anything CSS `@keyframes` or Tailwind\n  animate utilities can express. Zero JS bundle. If a CSS transition or a view\n  transition does it, stop here.\n- **`motion` (Motion), the default for React UI motion.** Component and\n  state-driven animation: enter and exit, layout shifts, list reordering, hover,\n  tap, drag, presence. Declarative and tied to the React lifecycle. The\n  workhorse for everyday interface motion once CSS is not enough. Reach for it\n  when the animation belongs to a component's state.\n- **`scroll` (GSAP + ScrollTrigger), scroll-driven and timeline choreography.**\n  Motion driven by scroll position, or precise multi-step timelines that outgrow\n  declarative component animation: hero choreography, scroll-linked reveals,\n  pinned scroll decks, sequenced storytelling. Keep it to brand-narrative\n  surfaces. Do not use it for data-dense UI, where `motion` or plain CSS is\n  lighter and simpler.\n- **`rive` (Rive), authored interactive vector art only.** A designed vector\n  artboard with its own state machine, authored by a designer in Rive: mascots,\n  icons that morph on input, loaders, signature brand motion. It renders a\n  canvas graphic, not DOM, so never use it to animate or lay out interface\n  elements. If the motion is not a purpose-built Rive artboard, it is not a Rive\n  job.\n\nTie-breaker, in order:\n\n1. Can CSS or a view transition already do it? Use `transitions` and skip the rest.\n2. Is DOM or React state animating? Use `motion`.\n3. Is it driven by scroll, or a precise timeline? Use `scroll` (GSAP).\n4. Is it a designed, interactive vector artboard? Use `rive`.\n\n## Per framework guide\n\n| | Next.js (App Router) | Astro (React islands) | React Native / Expo |\n| --- | --- | --- | --- |\n| `motion` | Yes | Yes, inside a React island | No. Use the RN Reanimated stack; this web kit is out of scope |\n| `scroll` | Yes | Yes, inside a React island | No |\n| `rive` | Yes (client component) | Yes, inside a React island | No. RN hosts swap in `rive-react-native` |\n| `icons` | Yes | Yes (component in islands; the sprite itself also works from plain Astro markup via `<use>`) | Component is web only; the sprite BUILD tooling still works for generating assets |\n| `transitions` | Yes | Prefer Astro's built in view transitions for routing; use this module for imperative same page updates | No |\n| `a11y` | Yes | Yes, inside a React island | No. Use RN's `AccessibilityInfo.isReduceMotionEnabled` |\n| Peer deps to install | `motion`, `gsap`, `@rive-app/react-canvas` (plus `lucide-react` if used) | `@astrojs/react`, `react`, `react-dom`, plus the peers for the entries you use | n/a for this kit |\n| Notes | All entries are prebuilt with the `\"use client\"` directive; import them directly from server components without wrapper files | Islands need a `client:` directive (`client:visible` fits scroll and Rive work) | RN is intentionally out of scope for v0.x |\n\n## Token contract\n\nThe kit never hardcodes a color, duration, easing, or distance. The host\ndefines these CSS custom properties (usually on `:root`), mapped from its own\nbrand tokens:\n\n| Token | Type | Used by | Example shape |\n| --- | --- | --- | --- |\n| `--ck-duration-fast` | time (`ms` or `s`) | motion | small hovers and micro fades |\n| `--ck-duration-base` | time | motion | default reveal speed |\n| `--ck-duration-slow` | time | motion | large surface reveals |\n| `--ck-ease-standard` | `cubic-bezier(...)` or CSS keyword | motion | default easing |\n| `--ck-ease-emphasized` | `cubic-bezier(...)` or CSS keyword | motion (opt in via `easeToken`) | entrances that should feel springy |\n| `--ck-motion-distance` | length (`px` or `rem`) | motion | slide up offset |\n| `--ck-stagger-step` | time | motion | delay between staggered children |\n\nToken names are exported as `CK_TOKENS` from the `motion` entry. Behavior when\na token is missing: time and length tokens fall back to `0` (instant, no\noffset) and easing tokens fall back to the library default, each with a one\ntime console warning. Define the contract and you will never see the warning.\n\nColors are never read by the kit at all: icons and glyphs inherit\n`currentColor`, and everything else (deck panel styling, transition visuals)\nis host CSS.\n\n## Performance and spend\n\nThe kit is `sideEffects: false` and split per entry point, so a primitive's cost\n(and its peer dependency) only ships to the pages or islands that import it.\nNothing is global. `transitions` and `a11y` are tiny; `scroll` pulls in GSAP and\n`rive` pulls in the Rive WASM runtime, so those two are the ones to spend\ndeliberately.\n\nMatch the spend to the surface:\n\n- **Content and client sites** can use motion freely where it serves the work.\n- **Lean, SEO-critical surfaces** (a marketing site whose speed is itself a\n  selling point) should treat each primitive as opt-in per page, not a default.\n  Add motion only where a page earns it, and keep the rest zero-JS. A consumer\n  with a strict speed budget should write its own rule down in its README; see\n  `cadence-site` for a worked example.\n\n## The SgIcon system\n\nThe kit ships the pattern, not the glyphs:\n\n1. Put your brand glyphs in a directory, one `.svg` per icon.\n2. Add `svgo` as a devDependency and generate the sprite plus the type union:\n\n   ```sh\n   node node_modules/@cadencestudio/creative-kit/tooling/icons/build-sprite.mjs \\\n     --in src/icons --out public/icons/sprite.svg --types src/icon-names.ts\n   ```\n\n3. Create your typed component once:\n\n   ```tsx\n   import { createSgIcon } from \"@cadencestudio/creative-kit/icons\";\n   import type { IconName } from \"./icon-names\";\n\n   export const SgIcon = createSgIcon<IconName>(\"/icons/sprite.svg\");\n   ```\n\n4. Use it: `<SgIcon name=\"wave\" />`. Unknown names are compile errors.\n\nGlyph colors are normalized to `currentColor` by the shared SVGO config, and\nicons default to `1em` so they scale with the text they sit beside.\n\n## Example app\n\n`examples/kitchen-sink` is a Vite React harness that imports every entry\npoint, renders one of each primitive, and builds clean. It doubles as the\nreference for the token contract stub (see `src/styles.css`). It is not part\nof the published package.\n\n```sh\nnpm install && npm run build          # build the kit\ncd examples/kitchen-sink\nnpm install\nnpm run icons                         # prove the sprite tooling\nnpm run build                         # typecheck + vite build\nnpm run dev                           # eyeball it\n```\n\n## Releases\n\n```sh\nnpm version <patch|minor|major>   # bumps package.json and tags vX.Y.Z\ngit push origin HEAD --tags\nnpm publish                       # prepack builds dist/ into the tarball\n```\n\nConsumers are on semver ranges (`^0.x`), so Renovate picks up new releases\nfrom the registry automatically. After a minor or major bump, also update the\nversion references in cadence-skills (standing rule + starter templates).\n","readmeFilename":"README.md"}