A modern animation library for React and JavaScript
This report summarizes scanner evidence for motiondivision/motion, a TypeScript project with 33,944 GitHub stars. SynthScan examined 188,921 lines of code across 1829 source files, recording 503 pattern matches distributed across 6 syntactic categories. The legacy adjusted pattern signal is 4.1 (Low pattern signal); it is not an authorship estimate.
Use the findings to ask whether maintainers can explain intent, verify dependencies, simplify unnecessary scaffolding, and focus review effort. Risk Payload v1 adds ownership, supply-chain, over-engineering, and review-effort vectors when available. These are prompts for human verification, not probabilities, security findings, or measured maintenance costs.
Use each vector to guide manual verification of the underlying findings.
Can maintainers explain intent, assumptions, and trade-offs? 501 finding(s).
Are imports declared and package/API names verified? 2 finding(s).
Are wrappers, guards, and repeated structures necessary? 34 finding(s).
Which changes need focused human review? 503 finding(s).
This chart tracks the legacy adjusted pattern score across scan runs. Changes can reflect source changes, scan coverage, or detector/scoring versions; they do not measure AI adoption or prove that a team refactored code. Compare runs only when their scoring versions are compatible. The dashed line tracks the raw pattern-hit count.
Groups findings by configured severity weight. Severity is not a confidence estimate, security rating, or proof that a package is missing. Verify imports against the project's manifests and inspect each finding in its local design context.
This horizontal bar chart shows where configured pattern scores accumulate across directories. Treat the bars as locations to inspect, not as evidence of authorship or code quality. Use the file-level findings to decide whether a directory needs a focused ownership, dependency, complexity, or review check.
The scanner identified 503 distinct pattern matches across 6 syntactic categories. Each entry below represents a discrete location in the source code where the engine recorded a detector match to inspect in context. Expand any category row to inspect the individual file paths, line numbers, code snippets, and the lexical context (CODE, COMMENT, or STRING) in which each match was detected.
Reading the findings table: The Severity column indicates the configured finding weight (CRITICAL / HIGH / MEDIUM / LOW). The Context column identifies whether the match occurred inside executable code, an inline comment, or a string literal — legacy comment-context matches receive a ×1.5 score weight. The ⚡ bolt icon marks clustered matches: three or more patterns within a 10-line window, each receiving an additional ×1.5 density multiplier under the legacy scoring model.
| Severity | File | Line | Snippet | Context |
|---|---|---|---|---|
| LOW | plans/024-hover-double-start-during-press.md | 106 | ### Step 1: Write the failing test | COMMENT |
| LOW | plans/024-hover-double-start-during-press.md | 121 | ### Step 2: Guard re-entry while a hover is active | COMMENT |
| LOW | plans/024-hover-double-start-during-press.md | 143 | ### Step 3: Lint | COMMENT |
| LOW | plans/008-correct-box-shadow-single-parse.md | 85 | ### Step 1: Export `buildTransformer` from the complex value module | COMMENT |
| LOW | plans/008-correct-box-shadow-single-parse.md | 91 | ### Step 2: Refactor `correctBoxShadow` to a single parse | COMMENT |
| LOW | plans/008-correct-box-shadow-single-parse.md | 117 | ### Step 3: Add one regression test | COMMENT |
| LOW | plans/008-correct-box-shadow-single-parse.md | 123 | ### Step 4: Full gates | COMMENT |
| LOW | plans/033-findspring-closed-form.md | 107 | ### Step 1: Pin current behavior with a tolerance-based equivalence test | COMMENT |
| LOW | plans/033-findspring-closed-form.md | 139 | ### Step 2: Replace the solver | COMMENT |
| LOW | plans/033-findspring-closed-form.md | 197 | ### Step 3: Handle the exact-string toString test | COMMENT |
| LOW | plans/033-findspring-closed-form.md | 205 | ### Step 4: Full verification + size measurement | COMMENT |
| LOW | plans/023-press-keyboard-listener-lifecycle.md | 112 | ### Step 1: Write the failing tests | COMMENT |
| LOW | plans/023-press-keyboard-listener-lifecycle.md | 122 | ### Step 2: Remove keyup/blur listeners once the press resolves | COMMENT |
| LOW | plans/023-press-keyboard-listener-lifecycle.md | 158 | ### Step 3: Register the focus listener with the gesture's options | COMMENT |
| LOW | plans/026-inview-feature-stale-once.md | 96 | ### Step 1: Write the failing test | COMMENT |
| LOW | plans/026-inview-feature-stale-once.md | 111 | ### Step 2: Read `once` fresh in the callback | COMMENT |
| LOW | plans/026-inview-feature-stale-once.md | 133 | ### Step 3: Regression sweep | COMMENT |
| LOW | plans/002-view-transition-target-resolution.md | 97 | ### Step 1: Investigate and write the design note (no code yet) | COMMENT |
| LOW | plans/002-view-transition-target-resolution.md | 107 | ### Step 2: Implement name assignment and resolution | COMMENT |
| LOW | plans/002-view-transition-target-resolution.md | 118 | ### Step 3: Unit tests | COMMENT |
| LOW | plans/002-view-transition-target-resolution.md | 124 | ### Step 4: Playwright E2E | COMMENT |
| LOW | plans/002-view-transition-target-resolution.md | 136 | ### Step 5: Remove the TODOs and full gates | COMMENT |
| LOW | plans/020-vanilla-drag-on-shared-projection-tree.md | 108 | ### Step 1: Extract the shared projection tree into `layout/layout-tree.ts` | COMMENT |
| LOW | plans/020-vanilla-drag-on-shared-projection-tree.md | 138 | ### Step 2: Define `DragOptions` and the options adapter | COMMENT |
| LOW | plans/020-vanilla-drag-on-shared-projection-tree.md | 192 | ### Step 3: Implement `drag()` | COMMENT |
| LOW | plans/020-vanilla-drag-on-shared-projection-tree.md | 251 | ### Step 4: Unit tests for the pure parts | COMMENT |
| LOW | plans/020-vanilla-drag-on-shared-projection-tree.md | 267 | ### Step 5: Cypress HTML fixtures + specs | COMMENT |
| LOW | plans/020-vanilla-drag-on-shared-projection-tree.md | 281 | ### Step 6: Full gate | COMMENT |
| LOW | plans/007-ci-lint-gate-and-monorepo-lint-coverage.md | 73 | ### Step 1: Add lint scripts | COMMENT |
| LOW | plans/007-ci-lint-gate-and-monorepo-lint-coverage.md | 83 | ### Step 2: Fix surfaced violations | COMMENT |
| LOW | plans/007-ci-lint-gate-and-monorepo-lint-coverage.md | 96 | ### Step 3: Add the CI lint job | COMMENT |
| LOW | plans/007-ci-lint-gate-and-monorepo-lint-coverage.md | 123 | ### Step 4: Full-repo lint pass | COMMENT |
| LOW | plans/034-move-inview-to-motion-dom.md | 112 | ### Step 1: Create the motion-dom module (verbatim move) | COMMENT |
| LOW | plans/034-move-inview-to-motion-dom.md | 142 | ### Step 2: Unit-test the moved function in motion-dom | COMMENT |
| LOW⚡ | plans/034-move-inview-to-motion-dom.md | 157 | ### Step 3: Repoint framer-motion and delete the old file | COMMENT |
| LOW⚡ | plans/034-move-inview-to-motion-dom.md | 165 | ### Step 4: Confirm the public surface is intact | COMMENT |
| LOW⚡ | plans/034-move-inview-to-motion-dom.md | 172 | ### Step 5: Dedupe the threshold table in the React feature | COMMENT |
| LOW⚡ | plans/034-move-inview-to-motion-dom.md | 178 | ### Step 6: Full gates | COMMENT |
| LOW | plans/028-frameloop-same-step-cancel.md | 114 | ### Step 1: Record baselines | COMMENT |
| LOW | plans/028-frameloop-same-step-cancel.md | 124 | ### Step 2: Write the failing tests | COMMENT |
| LOW | plans/028-frameloop-same-step-cancel.md | 162 | ### Step 3: Fix `cancel` | COMMENT |
| LOW | plans/028-frameloop-same-step-cancel.md | 182 | ### Step 4: Blast-radius verification | COMMENT |
| LOW⚡ | plans/032-spring-complex-value-nan-investigation.md | 80 | ### Step 1: Obtain the reproduction | COMMENT |
| LOW⚡ | plans/032-spring-complex-value-nan-investigation.md | 86 | ### Step 2: Reproduce at the lowest layer that fails | COMMENT |
| LOW⚡ | plans/032-spring-complex-value-nan-investigation.md | 96 | ### Step 3: Diagnose | COMMENT |
| LOW⚡ | plans/032-spring-complex-value-nan-investigation.md | 100 | ### Step 4: Fix | COMMENT |
| LOW⚡ | plans/032-spring-complex-value-nan-investigation.md | 106 | ### Step 5: E2E confirmation (if the repro was unit-level) | COMMENT |
| LOW | plans/027-frameloop-exception-recovery.md | 219 | ### Step 1: Record the baseline | COMMENT |
| LOW | plans/027-frameloop-exception-recovery.md | 227 | ### Step 2: Write the failing tests | COMMENT |
| LOW | plans/027-frameloop-exception-recovery.md | 288 | ### Step 3: Fix `render-step.ts` — step-level try/finally | COMMENT |
| LOW | plans/027-frameloop-exception-recovery.md | 329 | ### Step 4: Fix `batcher.ts` — batch-level try/finally + flag gating | COMMENT |
| LOW | plans/027-frameloop-exception-recovery.md | 384 | ### Step 5: Full verification | COMMENT |
| LOW | plans/037-scale-correctors-tree-shake-leak.md | 165 | ### Step 1: Empty the eager registry | COMMENT |
| LOW | plans/037-scale-correctors-tree-shake-leak.md | 176 | ### Step 2: Create `default-scale-correctors.ts` | COMMENT |
| LOW | plans/037-scale-correctors-tree-shake-leak.md | 196 | ### Step 3: Register from the projection node | COMMENT |
| LOW | plans/037-scale-correctors-tree-shake-leak.md | 212 | ### Step 4: Prove the leak is gone and behavior is intact | COMMENT |
| LOW | plans/019-port-drag-pan-engine-to-motion-dom.md | 117 | ### Step 1: Move the leaf helpers into motion-dom | COMMENT |
| LOW⚡ | plans/019-port-drag-pan-engine-to-motion-dom.md | 143 | ### Step 2: Move constraints.ts | COMMENT |
| LOW⚡ | plans/019-port-drag-pan-engine-to-motion-dom.md | 149 | ### Step 3: Move PanSession | COMMENT |
| LOW⚡ | plans/019-port-drag-pan-engine-to-motion-dom.md | 155 | ### Step 4: Move VisualElementDragControls with the options-resolver seam | COMMENT |
| 370 more matches not shown… | ||||
| Severity | File | Line | Snippet | Context |
|---|---|---|---|---|
| LOW | tests/react/scroll-view-timeline-parity.spec.ts | 87 | async function findMismatchesWithResizes( | CODE |
| LOW | …otion-dom/src/render/svg/utils/scrape-motion-values.ts | 7 | export function scrapeMotionValuesFromProps( | CODE |
| LOW | packages/motion-dom/src/render/utils/motion-values.ts | 10 | export function updateMotionValuesFromProps( | CODE |
| LOW | packages/motion-dom/src/render/utils/setters.ts | 28 | function resolveFinalValueInKeyframes( | CODE |
| LOW | …tion-dom/src/render/html/utils/scrape-motion-values.ts | 6 | export function scrapeMotionValuesFromProps( | CODE |
| LOW | …ges/motion-dom/src/animation/utils/notify-inspector.ts | 77 | export function notifyLayoutAnimationStart( | CODE |
| LOW | …n-dom/src/animation/keyframes/utils/unit-conversion.ts | 37 | export function removeNonTranslationalTransform(visualElement: WithRender) { | CODE |
| LOW | …/src/animation/keyframes/utils/make-none-animatable.ts | 14 | export function makeNoneKeyframesAnimatable( | CODE |
| LOW | …ion-dom/src/animation/__tests__/GroupAnimation.test.ts | 5 | function createTestAnimationControls( | CODE |
| LOW | …dom/src/gestures/press/utils/is-keyboard-accessible.ts | 13 | export function isElementKeyboardAccessible(element: Element) { | CODE |
| LOW | packages/motion-dom/src/view/utils/assign-names.ts | 78 | export function assignViewTransitionNames( | CODE |
| LOW | packages/motion-dom/src/view/utils/assign-names.ts | 177 | export function releaseViewTransitionNames( | CODE |
| LOW | packages/motion-dom/src/view/utils/get-layer-info.ts | 1 | export function getViewAnimationLayerInfo(pseudoElement: string) { | CODE |
| LOW | packages/motion-dom/src/resize/handle-window.ts | 7 | function createWindowResizeHandler() { | CODE |
| LOW | …tion-dom/src/projection/node/create-projection-node.ts | 122 | function cancelTreeOptimisedTransformAnimations( | CODE |
| LOW | …tion-dom/src/projection/node/create-projection-node.ts | 2395 | function ensureDraggedNodesSnapshotted(node: IProjectionNode) { | CODE |
| LOW | …tion-dom/src/projection/node/create-projection-node.ts | 2507 | function shouldAnimatePositionOnly( | CODE |
| LOW | …kages/framer-motion/cypress/integration/drag-nested.ts | 176 | function testNestedDragConstraints( | CODE |
| LOW | …kages/framer-motion/cypress/integration/drag-nested.ts | 286 | function testNestedDragConstraintsAndAnimation( | CODE |
| LOW | …ages/framer-motion/src/context/MotionContext/create.ts | 22 | function variantLabelsAsDependency( | CODE |
| LOW | …-motion/src/render/dom/scroll/utils/offset-to-range.ts | 46 | export function offsetToViewTimelineRange( | CODE |
| LOW | …r-motion/src/render/dom/scroll/__tests__/index.test.ts | 534 | function createOverscrollContainer(style: Partial<CSSStyleDeclaration>) { | CODE |
| LOW | …/framer-motion/src/animation/optimized-appear/start.ts | 37 | function resumeSuspendedAnimations() { | CODE |
| LOW | …/framer-motion/src/animation/optimized-appear/start.ts | 45 | export function startOptimizedAppearAnimation( | CODE |
| LOW | …ramer-motion/src/animation/optimized-appear/handoff.ts | 5 | export function handoffOptimizedAppearAnimation( | CODE |
| LOW | packages/framer-motion/src/animation/sequence/create.ts | 43 | export function createAnimationsFromSequence( | CODE |
| LOW | …ages/framer-motion/src/utils/use-instant-transition.ts | 43 | export function disableInstantTransitions() { | CODE |
| LOW | packages/framer-motion/src/motion/index.tsx | 205 | function getProjectionFunctionality(props: MotionProps) { | CODE |
| LOW | …kages/framer-motion/src/motion/features/definitions.ts | 55 | export function getInitializedFeatureDefinitions(): Partial<FeatureDefinitions> { | CODE |
| LOW | …-motion/src/gestures/drag/VisualElementDragControls.ts | 846 | export function expectsResolvedDragConstraints({ | CODE |
| LOW | …s/framer-motion/src/gestures/drag/utils/constraints.ts | 62 | export function calcRelativeAxisConstraints( | CODE |
| LOW | …s/framer-motion/src/gestures/drag/utils/constraints.ts | 93 | export function calcViewportAxisConstraints( | CODE |
| LOW | …s/framer-motion/src/gestures/drag/utils/constraints.ts | 148 | export function calcProgressWithinConstraints( | CODE |
| LOW | …motion/src/projection/use-instant-layout-transition.ts | 3 | export function useInstantLayoutTransition(): ( | CODE |
| Severity | File | Line | Snippet | Context |
|---|---|---|---|---|
| LOW | packages/motion/src/react.ts | 1 | // Re-export everything from framer-motion. | COMMENT |
| LOW | …/src/projection/geometry/__tests__/delta-apply.test.ts | 81 | // } | COMMENT |
| LOW | …/src/projection/geometry/__tests__/delta-apply.test.ts | 101 | // }) | COMMENT |
| LOW | packages/framer-motion/cypress/plugins/index.js | 1 | /// <reference types="cypress" /> | COMMENT |
| LOW | …ypress/integration/layout-shared-lightbox-crossfade.ts | 121 | }) | COMMENT |
| LOW | …ypress/integration/layout-shared-lightbox-crossfade.ts | 141 | // height: 50, | COMMENT |
| LOW | …ypress/integration/layout-shared-lightbox-crossfade.ts | 161 | // .get("#item-child") | COMMENT |
| LOW | …ypress/integration/layout-shared-lightbox-crossfade.ts | 181 | // width: 600, | COMMENT |
| LOW | …ypress/integration/layout-shared-lightbox-crossfade.ts | 201 | // .should(([$box]: any) => { | COMMENT |
| LOW | …ypress/integration/layout-shared-lightbox-crossfade.ts | 221 | // }) | COMMENT |
| LOW | …ges/framer-motion/cypress/integration/layout-shared.ts | 581 | // width: 100, | COMMENT |
| LOW | packages/framer-motion/cypress/integration/drag.ts | 161 | // .trigger("pointermove", 200, 10, { force: true }) | COMMENT |
| LOW | packages/framer-motion/cypress/integration/drag.ts | 541 | }) | COMMENT |
| LOW | packages/framer-motion/cypress/integration/drag-svg.ts | 81 | }) | COMMENT |
| LOW | packages/framer-motion/cypress/integration/drag-svg.ts | 101 | // const { left, top } = draggable.getBoundingClientRect() | COMMENT |
| LOW | packages/framer-motion/cypress/integration/drag-svg.ts | 261 | // .wait(50) | COMMENT |
| LOW | packages/framer-motion/cypress/integration/drag-svg.ts | 281 | // .trigger("pointermove", 50, 200, { force: true }) | COMMENT |
| LOW | …tion/cypress/integration/use-scroll-target-late-ref.ts | 1 | describe("useScroll with target ref hydrated after useScroll's own effects", () => { | COMMENT |
| LOW | …er-motion/cypress/integration/layout-percent-x-flex.ts | 21 | // animate={{ x: 0 }}, latestValues.x = "100%" | COMMENT |
| LOW | packages/framer-motion/cypress/support/commands.js | 1 | // *********************************************** | COMMENT |
| LOW | …on/src/animation/animators/waapi/__tests__/polyfill.js | 1 | // Copyright 2014 Google Inc. All rights reserved. | COMMENT |
| LOW | .github/workflows/claude.yml | 41 | actions: read | COMMENT |
| LOW | dev/next/next-env.d.ts | 1 | /// <reference types="next" /> | COMMENT |
| LOW | dev/html/public/benchmarks/warm-start-gsap.html | 61 | gsap.to(box, { | COMMENT |
| LOW | …ublic/projection/shared-promote-new-mix-interrupt.html | 81 | // matchVisibility(newBox, "visible") | COMMENT |
| LOW | …ublic/projection/shared-promote-new-mix-interrupt.html | 101 | // matchVisibility(box, "visible") | COMMENT |
| LOW | dev/html/public/projection/animate-relative.html | 81 | parent.classList.add("b") | COMMENT |
| LOW | …lic/animate-layout/shared-element-nested-children.html | 301 | // openControls.time = 0.5 | COMMENT |
| LOW | …lic/animate-layout/shared-element-nested-children.html | 321 | // const midImage = { | COMMENT |
| LOW | …lic/animate-layout/shared-element-nested-children.html | 341 | // const actualModalTitle = modalTitleContainer.getBoundingClientRect() | COMMENT |
| LOW | …lic/animate-layout/shared-element-nested-children.html | 361 | // top: actualModalImage.top, | COMMENT |
| LOW | …lic/animate-layout/shared-element-nested-children.html | 381 | // // Check at t=1 (end) | COMMENT |
| LOW | …lic/animate-layout/shared-element-nested-children.html | 401 | // width: endModalImageContainer.width, | COMMENT |
| LOW | …lic/animate-layout/shared-element-nested-children.html | 421 | // right: finalCardContentBox.right, | COMMENT |
| Severity | File | Line | Snippet | Context |
|---|---|---|---|---|
| LOW⚡ | …nts/AnimatePresence/__tests__/AnimatePresence.test.tsx | 1891 | // Step 1: trigger exit. Child still renders motion.div, so | COMMENT |
| LOW⚡ | …nts/AnimatePresence/__tests__/AnimatePresence.test.tsx | 1896 | // Step 2: child internally re-renders without the motion | COMMENT |
| Severity | File | Line | Snippet | Context |
|---|---|---|---|---|
| MEDIUM | packages/motion-dom/src/node/types.ts | 688 | * See {@link https://motion.dev/docs/react-motion-component#dragtransition | Inertia} for all properties you can us | COMMENT |
| Severity | File | Line | Snippet | Context |
|---|---|---|---|---|
| LOW | dev/react/src/examples/Layout-Projection-scale-size.tsx | 5 | It is a long established fact that a reader will be distracted by the readable content of a page when looking at its lay | CODE |
| LOW | …eact/src/examples/Layout-Projection-scale-position.tsx | 5 | It is a long established fact that a reader will be distracted by the readable content of a page when looking at its lay | CODE |