@penner/responsive-easing 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Robert Penner
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,109 @@
+# Responsive Easing
+
+> Context-aware easing functions for smooth, perceptually coherent motion across responsive UIs.
+
+[![npm version](https://img.shields.io/npm/v/responsive-easing)](https://www.npmjs.com/package/responsive-easing)
+
+Responsive Easing adapts motion curves to real-world context—distance, time, and velocity—so animations feel smooth and natural across screen sizes, layouts, and motion segments.
+
+---
+
+## ✨ Why Responsive Easing?
+
+Most easing functions assume a fixed range of motion from 0 to 1. But UI elements don’t always move the same distance or take the same time.
+
+This leads to:
+- Motion that feels too fast on large screens
+- Overshoots that don’t scale properly
+- Janky joins between motion segments
+- Manual tweaking of durations and curves for each use case
+
+**Responsive Easing solves this** by working in real units: pixels, milliseconds, slopes. It lets you create physically coherent motion that scales with your UI.
+
+---
+
+## 🚀 Install
+
+```bash
+npm install responsive-easing
+```
+
+Or with Yarn:
+
+```bash
+yarn add responsive-easing
+```
+
+---
+
+## 🧪 Basic Usage
+
+```ts
+import { createResponsiveEasing } from 'responsive-easing';
+
+const easing = createResponsiveEasing({
+  distance: 400,       // in pixels
+  duration: 600,       // in milliseconds
+  overshoot: true,
+});
+
+const y = easing(0.5); // evaluates easing at halfway point
+```
+
+Or generate a CSS timing string:
+
+```ts
+import { easingToCssLinear } from 'responsive-easing';
+
+const linearString = easingToCssLinear(easing);
+// → linear(0 0, 0.2 0.1, 0.5 0.7, 1 1)
+```
+
+---
+
+## 🧰 Features
+
+- ✅ **Distance-aware easing**
+- ✅ **Cruise segments** with constant velocity
+- ✅ **Responsive overshoot / bounce**
+- ✅ **Velocity-matched joins**
+- ✅ **Composable easing parts** (intro, cruise, outro)
+- ✅ **Exportable to CSS `linear()` timing functions**
+- ✅ Works with any animation system (CSS, JS, Web Animations API, GSAP, Framer Motion)
+
+---
+
+## 📦 Demos
+
+- [Live playground (CodeSandbox)](TODO)
+- [Comparison to traditional easing](TODO)
+- [Curve visualizer](TODO)
+
+---
+
+## 📚 Documentation
+
+- [Getting Started](TODO)
+- [API Reference](TODO)
+- [Design Principles](TODO)
+- [FAQ](TODO)
+
+---
+
+## 🧠 Philosophy
+
+Responsive Easing treats motion as a first-class design element—one that should respond to space and time, just like layout does. If your UI adapts responsively, your motion should too.
+
+---
+
+## 💬 Feedback & Contributions
+
+Have an idea? Find a bug? Want to shape the future of motion?
+
+[Open an issue](https://github.com/yourusername/responsive-easing/issues) or [start a discussion](https://github.com/yourusername/responsive-easing/discussions).
+
+---
+
+## 📄 License
+
+MIT © [Robert Penner](https://github.com/robertpenner)

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "@penner/responsive-easing",
+  "version": "0.0.2",
+  "description": "Responsive Easing is a library that dynamically generates easing functions for motion design that intelligently responds to varying conditions.",
+  "author": "Robert Penner <robert@robertpenner.com> (https://robertpenner.com)",
+  "homepage": "https://github.com/robertpenner/responsive-easing",
+  "repository": "github:robertpenner/responsive-easing",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "easing",
+    "animation",
+    "motion",
+    "physics",
+    "responsive",
+    "typescript",
+    "npm",
+    "package"
+  ],
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "tsc && vite build --watch",
+    "start": "vite --host --open",
+    "build": "tsc && vite build",
+    "build:types": "dts-bundle-generator --config ./dts-bundle-generator.config.ts",
+    "lint:scripts": "eslint ./src --ext .ts",
+    "lint:styles": "stylelint ./**/*.{css,scss}",
+    "format:scripts": "prettier ./src --write",
+    "format:styles": "stylelint ./**/*.{css,scss} --fix",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o storybook-static/storybook",
+    "deploy-storybook": "gh-pages -d storybook-static/storybook"
+  },
+  "dependencies": {
+    "@chakra-ui/react": "^3.20.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "chart.js": "^4.4.9",
+    "framer-motion": "^12.16.0",
+    "next-themes": "^0.4.6",
+    "react": "^18.3.1",
+    "react-chartjs-2": "^5.3.0",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.5.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.0.0",
+    "@storybook/addon-a11y": "^9.0.5",
+    "@storybook/addon-docs": "^9.0.5",
+    "@storybook/addon-onboarding": "^9.0.5",
+    "@storybook/addon-vitest": "^9.0.5",
+    "@storybook/react-vite": "^9.0.5",
+    "@types/node": "^22.8.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.11.0",
+    "@typescript-eslint/parser": "^8.11.0",
+    "@vitejs/plugin-react": "^4.3.3",
+    "@vitest/browser": "^3.2.2",
+    "@vitest/coverage-v8": "^3.2.2",
+    "dts-bundle-generator": "^9.5.1",
+    "eslint": "^9.13.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-storybook": "^9.0.5",
+    "gh-pages": "^6.3.0",
+    "playwright": "^1.52.0",
+    "prettier": "^3.3.3",
+    "storybook": "^9.0.5",
+    "stylelint": "^16.10.0",
+    "stylelint-config-recommended": "^14.0.1",
+    "stylelint-config-sass-guidelines": "^12.1.0",
+    "tslib": "^2.8.0",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10",
+    "vite-plugin-dts": "^4.3.0",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.2.2"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
+}