{"_id":"@best-skn/framer-types","_rev":"4-b3e8b03f94b5561746a5a8bcbf0900ba","name":"@best-skn/framer-types","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@best-skn/framer-types","version":"1.0.0","keywords":["react","type","library","next","animation","framer","motion"],"author":{"url":"https://skn.best","name":"SKN Shukhan","email":"skn437physx@gmail.com"},"license":"MIT","_id":"@best-skn/framer-types@1.0.0","maintainers":[{"name":"skn437","email":"skn437physx@gmail.com"}],"homepage":"https://github.com/skn437/skn-framer-types#readme","bugs":{"url":"https://github.com/skn437/skn-framer-types/issues"},"dist":{"shasum":"903eda7a5534f3f9ae59370bc42c563446f1dcad","tarball":"https://registry.npmjs.org/@best-skn/framer-types/-/framer-types-1.0.0.tgz","fileCount":4,"integrity":"sha512-ytAq2t1CNG9ad886stcyCLlyRVZHEsRhytKjQAUYJXxAaaoujBG1wnkuyqzX5/8mFFUiGvlbv68A0yyNH1EADA==","signatures":[{"sig":"MEQCIF3g4x+2Usb2hmYD1PI0wMAA1Tk8kFVQsMnYkkYUR//TAiBbhQV75j1LLvWyUVdRNoC31cwedptg5BZCU2tOBqMv9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12616},"main":"","types":"index.d.ts","gitHead":"5a73ca2c7e2d1cb81debbc5387209165efe729c1","_npmUser":{"name":"skn437","email":"skn437physx@gmail.com"},"repository":{"url":"git+https://github.com/skn437/skn-framer-types.git","type":"git"},"_npmVersion":"10.7.0","description":"A Simple Type Definition Extension Library For Framer Motion 11","directories":{},"_nodeVersion":"20.14.0","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.4.5","@types/node":"^20.14.2"},"peerDependencies":{"react":">= 18.3.1 < 19","react-dom":">= 18.3.1 < 19","@types/react":">= 18.3.3 < 19","framer-motion":">= ^11.2.11 < 12","@types/react-dom":">= 18.3.0 < 19"},"_npmOperationalInternal":{"tmp":"tmp/framer-types_1.0.0_1718882687484_0.9399425826169683","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@best-skn/framer-types","version":"1.0.1","keywords":["react","type","library","next","animation","framer","motion"],"author":{"url":"https://skn.best","name":"SKN Shukhan","email":"skn437physx@gmail.com"},"license":"MIT","_id":"@best-skn/framer-types@1.0.1","maintainers":[{"name":"skn437","email":"skn437physx@gmail.com"}],"homepage":"https://github.com/skn437/skn-framer-types#readme","bugs":{"url":"https://github.com/skn437/skn-framer-types/issues"},"dist":{"shasum":"c251d5daecd13790b62e638919e09b191a01315a","tarball":"https://registry.npmjs.org/@best-skn/framer-types/-/framer-types-1.0.1.tgz","fileCount":4,"integrity":"sha512-ezZWbU4ZV3hGNbQPg6SW5FpVlDMATlWyKwsIgSy2nfLDY0CyARLAudR3qZm/2KoLe4LCAI2lVxApOZD+yOOFIQ==","signatures":[{"sig":"MEUCIFM/nWqltZDMj6EbwJbtYcrpGbPEA8PHVXLVSvvpuRwgAiEA3tHQEl7ISmvoMqDmrwoj3bjZH0nJnIRp/kdsO8sONKg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12515},"main":"","types":"index.d.ts","gitHead":"3b122ff12aad756e950a188fe27fe098069d15dd","_npmUser":{"name":"skn437","email":"skn437physx@gmail.com"},"repository":{"url":"git+https://github.com/skn437/skn-framer-types.git","type":"git"},"_npmVersion":"10.7.0","description":"A Simple Type Definition Extension Library For Framer Motion 11","directories":{},"_nodeVersion":"20.14.0","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.4.5","@types/node":"^20.14.2"},"peerDependencies":{"react":">= 18.3.1 < 19","react-dom":">= 18.3.1 < 19","@types/react":">= 18.3.3 < 19","framer-motion":">= ^11.2.11 < 12","@types/react-dom":">= 18.3.0 < 19"},"_npmOperationalInternal":{"tmp":"tmp/framer-types_1.0.1_1718887098961_0.7278005450810987","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@best-skn/framer-types","version":"1.0.2","keywords":["react","type","library","next","animation","framer","motion"],"author":{"url":"https://skn.best","name":"SKN Shukhan","email":"skn437physx@gmail.com"},"license":"MIT","_id":"@best-skn/framer-types@1.0.2","maintainers":[{"name":"skn437","email":"skn437physx@gmail.com"}],"homepage":"https://github.com/skn437/skn-framer-types#readme","bugs":{"url":"https://github.com/skn437/skn-framer-types/issues"},"dist":{"shasum":"3359f4ea50c81cd13ae65c135f95de0dfc802166","tarball":"https://registry.npmjs.org/@best-skn/framer-types/-/framer-types-1.0.2.tgz","fileCount":4,"integrity":"sha512-q/sD0WyAJksBOfBRPJmXgXfWUulj5Tkf6ga+VKZ/WMHge1AqMLwmnIfp6FswndD8V6jTsdY879FCe+cSa8O1tg==","signatures":[{"sig":"MEUCICK4bbsZaCYSyaV7qcSn7SqeLFP0pDfXra2LAt/Rzq7EAiEAzhkrobFXRmS2BlbfzAFarrrD0tpYVXNqe5F1H5gdMI4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12643},"main":"","types":"index.d.ts","gitHead":"60008a6a39908fc633c1b3a1fd5720ba249ff957","_npmUser":{"name":"skn437","email":"skn437physx@gmail.com"},"repository":{"url":"git+https://github.com/skn437/skn-framer-types.git","type":"git"},"_npmVersion":"10.8.1","description":"A Simple Type Definition Extension Library For Framer Motion 11","directories":{},"_nodeVersion":"20.16.0","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.4.5","@types/node":"^20.14.2"},"peerDependencies":{"react":">= 18.3.1 < 19","react-dom":">= 18.3.1 < 19","@types/react":">= 18.3.3 < 19","framer-motion":">= ^11.2.11 < 12","@types/react-dom":">= 18.3.0 < 19"},"_npmOperationalInternal":{"tmp":"tmp/framer-types_1.0.2_1724011187696_0.9023246207207556","host":"s3://npm-registry-packages"}},"1.0.3":{"name":"@best-skn/framer-types","description":"A Simple Type Definition Extension Library For Framer Motion 11","version":"1.0.3","main":"","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/skn437/skn-framer-types.git"},"keywords":["react","type","library","next","animation","framer","motion"],"author":{"name":"SKN Shukhan","email":"skn437physx@gmail.com","url":"https://skn.best"},"license":"MIT","devDependencies":{"@types/node":"^20.14.2","typescript":"^5.4.5"},"peerDependencies":{"@types/react":">= 18.3.3 < 19","@types/react-dom":">= 18.3.0 < 19","framer-motion":">= ^11.2.11 < 12","react":">= 18.3.1 < 19","react-dom":">= 18.3.1 < 19"},"_id":"@best-skn/framer-types@1.0.3","gitHead":"5b911c9c7413e2f7482877b3dfc223ae044a3b72","bugs":{"url":"https://github.com/skn437/skn-framer-types/issues"},"homepage":"https://github.com/skn437/skn-framer-types#readme","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-j9uCWtLIFVex9S2Td9ZzS1uIh1MxYlysPiX8va7YbFHmrixVuRmG+jqCp0Mj5i9eiMw/sjWV4uc4e+2z0VDDbQ==","shasum":"3bc9a4216fc401c92a51227b3d57ce35dca17808","tarball":"https://registry.npmjs.org/@best-skn/framer-types/-/framer-types-1.0.3.tgz","fileCount":4,"unpackedSize":12387,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEHNBS49++TonrFvfB9oTBAgXogU+xyVQO9bpgb7af9DAiB2z6csdfVLKP9HCjUusV1z4hlk+jb+yvvEUHJgo93dZA=="}]},"_npmUser":{"name":"skn437","email":"skn437physx@gmail.com"},"directories":{},"maintainers":[{"name":"skn437","email":"skn437physx@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/framer-types_1.0.3_1761202607460_0.5175751844197425"},"_hasShrinkwrap":false}},"time":{"created":"2024-06-20T11:24:47.400Z","modified":"2025-10-23T06:56:47.833Z","1.0.0":"2024-06-20T11:24:47.621Z","1.0.1":"2024-06-20T12:38:19.148Z","1.0.2":"2024-08-18T19:59:47.850Z","1.0.3":"2025-10-23T06:56:47.655Z"},"bugs":{"url":"https://github.com/skn437/skn-framer-types/issues"},"author":{"name":"SKN Shukhan","email":"skn437physx@gmail.com","url":"https://skn.best"},"license":"MIT","homepage":"https://github.com/skn437/skn-framer-types#readme","keywords":["react","type","library","next","animation","framer","motion"],"repository":{"type":"git","url":"git+https://github.com/skn437/skn-framer-types.git"},"description":"A Simple Type Definition Extension Library For Framer Motion 11","maintainers":[{"name":"skn437","email":"skn437physx@gmail.com"}],"readme":"# SKN Framer Motion Type Extension Library\n\n\"animation\"\n\n> TypeScript React\n\n[![NPM Version](https://img.shields.io/npm/v/%40best-skn%2Fframer-types)](https://www.npmjs.com/package/@best-skn/framer-types) [![MIT License](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/license/mit)\n\n \n\n## **_Introduction:_**\n\n### This is a simple TypeScript Type Extension Library for Framer Motion 11, React 18 & also for Next.js 14\n\n### I made this library so that I can use it in all of my Next.js 14 projects without writing the same codes over and over again\n\n \n\n## **_Details:_**\n\n### **`Anime` Type**\n\n- It provides total intellisense of framer motion styles in separate files to be used as `variants`\n- This type will help to de-clutter your jsx/tsx components because you can create `variants` outside motion\n components and later use it inside the motion components\n- This type will only work on motion components like `motion.div`, `motion.span`, `motion.main` etc. or any other\n custom motion components created with `motion()` function\n- For usage instruction, see `Usage` section\n\n### **`CsxAnime` Type**\n\n- It provides total intellisense of react csx styles in separate files and ensures compatibility with framer motion\n styles as well\n- This type will help to de-clutter your jsx/tsx components because you can create csx styles outside motion\n components\n- This type will only work on motion components like `motion.div`, `motion.span`, `motion.main` etc. or any other\n custom motion components created with `motion()` function\n- For usage instruction, see `Usage` section\n\n \n\n## **_Use Case:_**\n\n- React\n- Next.js\n\n \n\n## **_Requirements:_**\n\n### This library has peer dependency for React & React DOM of minimum 18.3.1. It may or may not work on 19.x\n\n### It has peer dependency for Framer Motion of minimum 11.2.11. It may or may not work on 12.x\n\n### This library is intended to be used in Next.js of minimum 14.2.3. It may or may not work on 15.x\n\n- 💀 Minimum [react](https://www.npmjs.com/package/react) Version: `18.3.1`\n- 💀 Minimum [@types/react](https://www.npmjs.com/package/@types/react) Version: `18.3.3`\n- 💀 Minimum [react-dom](https://www.npmjs.com/package/react-dom) Version: `18.3.1`\n- 💀 Minimum [@types/react-dom](https://www.npmjs.com/package/@types/react-dom) Version: `18.3.0`\n- 💀 Minimum [next](https://www.npmjs.com/package/next) Version: `14.2.3`\n- 💀 Minimum [framer-motion](https://www.npmjs.com/package/framer-motion) Version: `11.2.11`\n\n \n\n## **_Complementary Libraries:_**\n\n- [@best-skn/react-types](https://www.npmjs.com/package/@best-skn/react-types)\n- [@best-skn/next-types](https://www.npmjs.com/package/@best-skn/next-types)\n\n \n\n## **_Usage:_**\n\n### To install the package, type the following in console\n\n> ```zsh\n> npm add -D @best-skn/framer-types\n> #or\n> yarn add -D @best-skn/framer-types\n> #or\n> pnpm add -D @best-skn/framer-types\n> #or\n> bun add -D @best-skn/framer-types\n> ```\n\n### Create a directory called `types` in the root location of your project, and create a file called `motion.d.ts`, then do this\n\n> ```typescript\n> import \"@best-skn/framer-types\";\n> ```\n\n### Check your `tsconfig.json` if `includes` property has `**/*.ts`, `**/*.tsx` otherwise the type definition file may not work\n\n### Now Inside your Next.js 14 Project, use the package like this (Just an example)\n\n#### **_`Anime` Type:_**\n\n##### (1) Motion style `variants` in separate file\n\n> ```typescript\n> import type { Anime } from \"framer-motion\";\n>\n> type key = \"container\" | \"box\"; // * Create variant names here\n>\n> export const anime: Anime = {\n> //* You'll get total intellisense for `variant` names\n> container: {\n> //* You'll get intellisense for motion styles inside `hidden` or `visible` properties\n> hidden: {\n> opacity: 0,\n> //* other motion styles here...\n> },\n> visible: {\n> opacity: 1,\n> //* other motion styles here...\n> },\n> },\n> box: {\n> hidden: {\n> opacity: 0,\n> //* other motion styles here...\n> },\n> visible: {\n> opacity: 1,\n> //* other motion styles here...\n> },\n> },\n> };\n> ```\n\n##### (2) Import & use the created `variants` inside motion components in Next.js\n\n> ```typescript jsx\n> \"use client\"\n>\n> import { motion } from \"framer-motion\";\n> import { anime } from \"./anime.ts\";\n>\n> const HomeComponent: React.FC = () => {\n> return (\n> variants={anime.container} //* Put your variants here\n> initial=\"hidden\"\n> animate=\"visible\"\n> >\n> variants={anime.box} //* Put your variants here\n> initial=\"hidden\"\n> animate=\"visible\"\n> >\n> \n> \n> \n> );\n> };\n>\n> export default HomeComponent;\n> ```\n\n#### **_`CsxAnime` Type:_**\n\n##### (1) React CSX styles with motion style compatibility in separate file\n\n> ```typescript\n> import type { CsxAnime } from \"framer-motion\";\n>\n> type key = \"container\" | \"box\"; // * Create class names here\n>\n> export const csx: CsxAnime = {\n> //* You'll get total intellisense for `class` names\n> container: {\n> //* You'll get intellisense for react css styles here\n> fontWeight: \"bolder\",\n> //* css styles here...\n>\n> //* framer motion related styles\n> scaleX: \"\",\n> },\n> box: {\n> fontWeight: \"bolder\",\n> //* css styles here...\n>\n> //* framer motion related styles\n> scaleX: \"\",\n> },\n> };\n> ```\n\n##### (2) Import & use the created style inside motion components in Next.js\n\n> ```typescript jsx\n> \"use client\"\n>\n> import { motion } from \"framer-motion\";\n> import { csx } from \"./csx.ts\";\n>\n> const HomeComponent: React.FC = () => {\n> return (\n> \n> \n> \n> \n> \n> );\n> };\n>\n> export default HomeComponent;\n> ```\n\n \n\n## **_Dedicated To:_**\n\n- 👩‍🎨`Prodipta Das Logno` & 🧛‍♀️`Atoshi Sarker Prithula`: The two most special ladies of my life. My best wishes will always be with you two. May you two always be happy.\n- 💯`My Parents`: The greatest treasures of my life ever.\n\n \n\n## **_License:_**\n\nCopyright (C) 2024 SKN Shukhan\n\nLicensed under the MIT License\n","readmeFilename":"README.md"}