{"_id":"@code_with_sachin/ngx-motion","name":"@code_with_sachin/ngx-motion","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@code_with_sachin/ngx-motion","version":"0.1.0","description":"Angular directives for motion.dev — scroll-in reveals, hover springs and press feedback, SSR-safe and reduced-motion aware.","keywords":["angular","motion","motion.dev","animation","directive","in-view","hover","spring","ssr","reduced-motion","standalone","signals"],"homepage":"https://sachinsingh.me/packages/motion","license":"MIT","author":{"name":"Sachin Singh","url":"https://sachinsingh.me"},"repository":{"type":"git","url":"git+https://github.com/CodeWithSachin/kshatriya-portfolio.git","directory":"projects/ngx-motion"},"bugs":{"url":"https://github.com/CodeWithSachin/kshatriya-portfolio/issues"},"publishConfig":{"access":"public"},"peerDependencies":{"@angular/common":"^22.0.0","@angular/core":"^22.0.0","motion":"^12.0.0"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"module":"fesm2022/code_with_sachin-ngx-motion.mjs","typings":"types/code_with_sachin-ngx-motion.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./types/code_with_sachin-ngx-motion.d.ts","default":"./fesm2022/code_with_sachin-ngx-motion.mjs"}},"type":"module","gitHead":"060ebca6612769b29f91d6995dd150e137a6186e","_id":"@code_with_sachin/ngx-motion@0.1.0","_nodeVersion":"24.15.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-8dVvOIaKPPGylHPhDDayQ2HquFzFgBKeOftGF0s4FzgPQORh52owMxCaZwhb1ZX4qYh/G1qcnK6BYHXKsuyFBg==","shasum":"2746b0a78544b8105015f5403cef905ef2a88d40","tarball":"https://registry.npmjs.org/@code_with_sachin/ngx-motion/-/ngx-motion-0.1.0.tgz","fileCount":5,"unpackedSize":37602,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDpomBRCXDuKcOBEjSgaAqU/3N57JMcnn2U+XHZxMUxbAIhAOb3cRfKyVKFDdjFUSP0wxw3gXUono/WxOIU/kqvXEGV"}]},"_npmUser":{"name":"code_with_sachin","email":"sachinnnsingh0510@gmail.com"},"directories":{},"maintainers":[{"name":"code_with_sachin","email":"sachinnnsingh0510@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ngx-motion_0.1.0_1786290357992_0.6498259777504618"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-09T15:45:57.819Z","0.1.0":"2026-08-09T15:45:58.137Z","modified":"2026-08-09T15:45:58.380Z"},"maintainers":[{"name":"code_with_sachin","email":"sachinnnsingh0510@gmail.com"}],"description":"Angular directives for motion.dev — scroll-in reveals, hover springs and press feedback, SSR-safe and reduced-motion aware.","homepage":"https://sachinsingh.me/packages/motion","keywords":["angular","motion","motion.dev","animation","directive","in-view","hover","spring","ssr","reduced-motion","standalone","signals"],"repository":{"type":"git","url":"git+https://github.com/CodeWithSachin/kshatriya-portfolio.git","directory":"projects/ngx-motion"},"author":{"name":"Sachin Singh","url":"https://sachinsingh.me"},"bugs":{"url":"https://github.com/CodeWithSachin/kshatriya-portfolio/issues"},"license":"MIT","readme":"# @code_with_sachin/ngx-motion\n\nAngular directives for [motion.dev](https://motion.dev) — scroll-in reveals, hover\nsprings and press feedback, SSR-safe and reduced-motion aware.\n\n**[Live demo & docs → https://sachinsingh.me/packages/motion](https://sachinsingh.me/packages/motion)**\n\nmotion.dev gives you a tiny WAAPI-backed animation runtime; this package gives it\nAngular manners. Three attribute directives cover the micro-interaction layer, and\none injectable service wraps the raw API so it no-ops on the server instead of\nreaching for `document`.\n\n- SSR-safe by construction — all DOM work runs inside `afterNextRender`.\n- `prefers-reduced-motion` respected everywhere, configurably.\n- Listeners torn down through `DestroyRef`.\n- Standalone directives, signal inputs, zoneless-friendly.\n\n## Install\n\n```bash\nnpm i @code_with_sachin/ngx-motion motion\n```\n\nPeer dependencies: Angular 22+, `motion` 12+.\n\n## Setup\n\n`provideMotion()` is optional — only needed to override reduced-motion handling.\n\n```ts\nimport { ApplicationConfig } from '@angular/core';\nimport { provideMotion } from '@code_with_sachin/ngx-motion';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    // 'user' (default) respects prefers-reduced-motion,\n    // 'always' forces reduced, 'never' ignores the setting.\n    provideMotion({ reducedMotion: 'user' }),\n  ],\n};\n```\n\n## Requirements\n\nPeer ranges are wider than this; the **Tested** column is the exact combination the\n[live demo](https://sachinsingh.me/packages/motion) runs, so you have a known-good set to fall back on.\n\n| Package         | Peer range | Tested  | Notes                                                      |\n| --------------- | ---------- | ------- | ---------------------------------------------------------- |\n| `@angular/core` | `^22.0.0`  | 22.0.5  | Standalone APIs, signal inputs and `afterNextRender`.      |\n| `typescript`    | `~6.0.0`   | 6.0.3   | Whatever your Angular version supports.                    |\n| `node`          | `>=20`     | 24.15.0 | Build and SSR only.                                        |\n| `motion`        | `^12.0.0`  | 12.42.2 | The animation runtime. Every directive proxies through it. |\n\n## Providers\n\nOptional — omit it and every directive still works, defaulting to `reducedMotion: 'user'`.\n\n```ts\nimport { ApplicationConfig } from '@angular/core';\nimport { provideMotion } from '@code_with_sachin/ngx-motion';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [provideMotion()],\n};\n\n// main.ts\n// bootstrapApplication(App, appConfig);\n```\n\n## Using NgModules\n\nEverything here is standalone, but standalone components and directives are importable from\nan `@NgModule` — put them in the module's `imports`, **not** `declarations`. No\n`importProvidersFrom` is needed: `@NgModule.providers` is typed\n`Array<Provider | EnvironmentProviders>`, so the `provide*()` functions drop straight in.\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport {\n  InViewDirective,\n  HoverSpringDirective,\n  PressDirective,\n  provideMotion,\n} from '@code_with_sachin/ngx-motion';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [AppComponent],\n  // Standalone components and directives go in `imports`.\n  imports: [BrowserModule, InViewDirective, HoverSpringDirective, PressDirective],\n  providers: [provideMotion()],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\n## `ngxInView`\n\nPlays an entrance when the host scrolls into view.\n\n```html\n<section ngxInView>Fades up when scrolled into view</section>\n<img ngxInView preset=\"slide-left\" [delay]=\"0.15\" [distance]=\"40\" />\n<p ngxInView preset=\"fade\" [once]=\"false\">Replays every pass</p>\n```\n\n| Input      | Type                                                   | Default     | Notes                                                     |\n| ---------- | ------------------------------------------------------ | ----------- | --------------------------------------------------------- |\n| `preset`   | `'fade' \\| 'fade-up' \\| 'slide-left' \\| 'slide-right'` | `'fade-up'` | `slide-right` enters from the left.                       |\n| `once`     | `boolean`                                              | `true`      | `false` re-hides the host on exit, so the reveal replays. |\n| `delay`    | `number`                                               | `0`         | Seconds before the animation starts.                      |\n| `distance` | `number`                                               | `28`        | Travel in pixels for the sliding presets.                 |\n\nUnder reduced motion the host is simply set to `opacity: 1` — no animation, no hidden content.\n\n## `ngxHoverSpring` and `ngxPress`\n\n```html\n<a ngxHoverSpring [scale]=\"1.05\" [lift]=\"-4\">Contact row</a>\n<button ngxPress [depth]=\"0.94\">Tap me</button>\n```\n\n| Directive        | Input   | Type     | Default | Notes                                          |\n| ---------------- | ------- | -------- | ------- | ---------------------------------------------- |\n| `ngxHoverSpring` | `scale` | `number` | `1.03`  | Scale at rest on hover.                        |\n| `ngxHoverSpring` | `lift`  | `number` | `-2`    | Vertical offset in px; negative lifts.         |\n| `ngxPress`       | `depth` | `number` | `0.97`  | Scale while held; released on up/cancel/leave. |\n\nBoth use a critically-damped bezier via WAAPI — no layout thrash, no rAF loop of your own.\n\n## `MotionService`\n\nAn SSR-safe facade over motion.dev's `animate`, `inView` and `scroll`.\n\n```ts\nimport { inject } from '@angular/core';\nimport { MotionService } from '@code_with_sachin/ngx-motion';\n\nexport class Hero {\n  private readonly motion = inject(MotionService);\n\n  reveal(el: HTMLElement) {\n    if (this.motion.reduced) return;\n    this.motion.animate(el, { opacity: [0, 1], y: [24, 0] }, { duration: 0.6 });\n  }\n}\n```\n\n| Member      | Type             | Notes                                                                         |\n| ----------- | ---------------- | ----------------------------------------------------------------------------- |\n| `isBrowser` | `boolean`        | `false` during SSR; every method below is a no-op then.                       |\n| `reduced`   | `boolean`        | `true` on the server, when config forces it, or when the OS asks for reduced. |\n| `animate`   | `typeof animate` | Returns a stub with `stop`/`cancel`/`finished` on the server.                 |\n| `inView`    | `typeof inView`  | Returns a no-op stop function on the server.                                  |\n| `scroll`    | `typeof scroll`  | SSR-safe proxy for scroll-linked animation.                                   |\n\n## Licence\n\nMIT © Sachin Singh\n","readmeFilename":"README.md","_rev":"1-c2e43ed5cfae6cbd663f72d6ff891f6e"}