{"id":19805349,"url":"https://github.com/skn437/skn-framer-types","last_synced_at":"2026-01-05T11:02:20.314Z","repository":{"id":245191853,"uuid":"817721480","full_name":"skn437/skn-framer-types","owner":"skn437","description":"A Simple Type Definition Extension Library For Framer Motion 11","archived":false,"fork":false,"pushed_at":"2025-10-23T06:56:21.000Z","size":36,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-23T08:42:44.631Z","etag":null,"topics":["animation","bun","framer-motion","library","nextjs","nodejs","react","types","typescript"],"latest_commit_sha":null,"homepage":"","language":"Shell","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/skn437.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-06-20T09:55:21.000Z","updated_at":"2025-10-23T06:55:00.000Z","dependencies_parsed_at":"2024-06-20T12:13:41.053Z","dependency_job_id":"b50b5574-749c-4a0d-9886-d3d9db2945f8","html_url":"https://github.com/skn437/skn-framer-types","commit_stats":null,"previous_names":["skn437/skn-framer-types"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/skn437/skn-framer-types","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skn437%2Fskn-framer-types","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skn437%2Fskn-framer-types/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skn437%2Fskn-framer-types/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skn437%2Fskn-framer-types/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skn437","download_url":"https://codeload.github.com/skn437/skn-framer-types/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skn437%2Fskn-framer-types/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28216332,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2026-01-05T02:00:06.358Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","bun","framer-motion","library","nextjs","nodejs","react","types","typescript"],"created_at":"2024-11-12T09:03:31.520Z","updated_at":"2026-01-05T11:02:20.309Z","avatar_url":"https://github.com/skn437.png","language":"Shell","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SKN Framer Motion Type Extension Library\n\n\u003cimg width=\"150px\" src=\"https://firebasestorage.googleapis.com/v0/b/skn-ultimate-project-la437.appspot.com/o/GitHub%20Library%2F13-TypeScript-SFT.svg?alt=media\u0026token=f520fecc-bb79-4627-b98b-f486420f15ae\" alt=\"animation\" /\u003e\n\n\u003e 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\u0026nbsp;\n\n## **_Introduction:_**\n\n### This is a simple TypeScript Type Extension Library for Framer Motion 11, React 18 \u0026 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\u0026nbsp;\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\u0026nbsp;\n\n## **_Use Case:_**\n\n- React\n- Next.js\n\n\u0026nbsp;\n\n## **_Requirements:_**\n\n### This library has peer dependency for React \u0026 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\u0026nbsp;\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\u0026nbsp;\n\n## **_Usage:_**\n\n### To install the package, type the following in console\n\n\u003e ```zsh\n\u003e npm add -D @best-skn/framer-types\n\u003e #or\n\u003e yarn add -D @best-skn/framer-types\n\u003e #or\n\u003e pnpm add -D @best-skn/framer-types\n\u003e #or\n\u003e bun add -D @best-skn/framer-types\n\u003e ```\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\u003e ```typescript\n\u003e import \"@best-skn/framer-types\";\n\u003e ```\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\u003e ```typescript\n\u003e import type { Anime } from \"framer-motion\";\n\u003e\n\u003e type key = \"container\" | \"box\"; // * Create variant names here\n\u003e\n\u003e export const anime: Anime\u003ckey\u003e = {\n\u003e   //* You'll get total intellisense for `variant` names\n\u003e   container: {\n\u003e     //* You'll get intellisense for motion styles inside `hidden` or `visible` properties\n\u003e     hidden: {\n\u003e       opacity: 0,\n\u003e       //* other motion styles here...\n\u003e     },\n\u003e     visible: {\n\u003e       opacity: 1,\n\u003e       //* other motion styles here...\n\u003e     },\n\u003e   },\n\u003e   box: {\n\u003e     hidden: {\n\u003e       opacity: 0,\n\u003e       //* other motion styles here...\n\u003e     },\n\u003e     visible: {\n\u003e       opacity: 1,\n\u003e       //* other motion styles here...\n\u003e     },\n\u003e   },\n\u003e };\n\u003e ```\n\n##### (2) Import \u0026 use the created `variants` inside motion components in Next.js\n\n\u003e ```typescript jsx\n\u003e \"use client\"\n\u003e\n\u003e import { motion } from \"framer-motion\";\n\u003e import { anime } from \"./anime.ts\";\n\u003e\n\u003e const HomeComponent: React.FC\u003cunknown\u003e = () =\u003e {\n\u003e   return (\n\u003e     \u003cmotion.div\n\u003e       variants={anime.container} //* Put your variants here\n\u003e       initial=\"hidden\"\n\u003e       animate=\"visible\"\n\u003e     \u003e\n\u003e       \u003cmotion.div\n\u003e         variants={anime.box} //* Put your variants here\n\u003e         initial=\"hidden\"\n\u003e         animate=\"visible\"\n\u003e       \u003e\n\u003e         \u003c!-- other elements here... --\u003e\n\u003e       \u003c/motion.div\u003e\n\u003e     \u003c/motion.div\u003e\n\u003e   );\n\u003e };\n\u003e\n\u003e export default HomeComponent;\n\u003e ```\n\n#### **_`CsxAnime` Type:_**\n\n##### (1) React CSX styles with motion style compatibility in separate file\n\n\u003e ```typescript\n\u003e import type { CsxAnime } from \"framer-motion\";\n\u003e\n\u003e type key = \"container\" | \"box\"; // * Create class names here\n\u003e\n\u003e export const csx: CsxAnime\u003ckey\u003e = {\n\u003e   //* You'll get total intellisense for `class` names\n\u003e   container: {\n\u003e     //* You'll get intellisense for react css styles here\n\u003e     fontWeight: \"bolder\",\n\u003e     //* css styles here...\n\u003e\n\u003e     //* framer motion related styles\n\u003e     scaleX: \"\",\n\u003e   },\n\u003e   box: {\n\u003e     fontWeight: \"bolder\",\n\u003e     //* css styles here...\n\u003e\n\u003e     //* framer motion related styles\n\u003e     scaleX: \"\",\n\u003e   },\n\u003e };\n\u003e ```\n\n##### (2) Import \u0026 use the created style inside motion components in Next.js\n\n\u003e ```typescript jsx\n\u003e \"use client\"\n\u003e\n\u003e import { motion } from \"framer-motion\";\n\u003e import { csx } from \"./csx.ts\";\n\u003e\n\u003e const HomeComponent: React.FC\u003cunknown\u003e = () =\u003e {\n\u003e   return (\n\u003e     \u003cmotion.div className={csx.container}\u003e\n\u003e       \u003cmotion.div className={csx.box}\u003e\n\u003e         \u003c!-- other elements here... --\u003e\n\u003e       \u003c/motion.div\u003e\n\u003e     \u003c/motion.div\u003e\n\u003e   );\n\u003e };\n\u003e\n\u003e export default HomeComponent;\n\u003e ```\n\n\u0026nbsp;\n\n## **_Dedicated To:_**\n\n- 👩‍🎨`Prodipta Das Logno` \u0026 🧛‍♀️`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\u0026nbsp;\n\n## **_License:_**\n\nCopyright (C) 2024 SKN Shukhan\n\nLicensed under the MIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskn437%2Fskn-framer-types","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskn437%2Fskn-framer-types","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskn437%2Fskn-framer-types/lists"}