{"id":25543690,"url":"https://github.com/code-parth/smooth-cursor","last_synced_at":"2026-02-11T11:33:02.722Z","repository":{"id":277153785,"uuid":"931501679","full_name":"Code-Parth/smooth-cursor","owner":"Code-Parth","description":"A highly customizable, physics-based smooth cursor animation component for React applications. Features spring animations, velocity tracking, and rotation effects for creating engaging cursor experiences.","archived":false,"fork":false,"pushed_at":"2025-02-12T14:21:42.000Z","size":32,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-11T21:49:46.305Z","etag":null,"topics":["animation","cursor","cursor-customization","cursor-effects","custom-cursor","framer-motion","interactive","motion-design","mouse-movement","mouse-tracking","performance-optimized","physics-based","react","react-component","rotation-animation","smooth-cursor","spring-animation","typescript","ui-component","velocity-tracking"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/smooth-cursor","language":"TypeScript","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/Code-Parth.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":"2025-02-12T11:40:26.000Z","updated_at":"2025-04-12T21:19:51.000Z","dependencies_parsed_at":"2025-02-12T12:51:43.169Z","dependency_job_id":"2c886a19-f660-4eb3-add3-7736b4e278de","html_url":"https://github.com/Code-Parth/smooth-cursor","commit_stats":null,"previous_names":["code-parth/smooth-cursor"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Code-Parth/smooth-cursor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Code-Parth%2Fsmooth-cursor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Code-Parth%2Fsmooth-cursor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Code-Parth%2Fsmooth-cursor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Code-Parth%2Fsmooth-cursor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Code-Parth","download_url":"https://codeload.github.com/Code-Parth/smooth-cursor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Code-Parth%2Fsmooth-cursor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271129051,"owners_count":24703879,"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":"2025-08-19T02:00:09.176Z","response_time":63,"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","cursor","cursor-customization","cursor-effects","custom-cursor","framer-motion","interactive","motion-design","mouse-movement","mouse-tracking","performance-optimized","physics-based","react","react-component","rotation-animation","smooth-cursor","spring-animation","typescript","ui-component","velocity-tracking"],"created_at":"2025-02-20T07:38:13.246Z","updated_at":"2026-02-11T11:32:57.677Z","avatar_url":"https://github.com/Code-Parth.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Smooth Cursor\n\nA highly customizable, physics-based smooth cursor animation component for React applications. Features spring animations, velocity tracking, and rotation effects for creating engaging cursor experiences.\n\nhttps://github.com/user-attachments/assets/2b56dea7-9e98-4563-9b61-ab668b08d2e5\n\n🎯 **[Live Preview](https://figbruary.apexia.club)** - See the smooth cursor in action!\n\n![GitHub package.json version](https://img.shields.io/github/package-json/v/code-parth/smooth-cursor)\n![NPM Version](https://img.shields.io/npm/v/smooth-cursor)\n![License](https://img.shields.io/npm/l/smooth-cursor)\n\n## Features\n\n- 🎯 Smooth physics-based cursor animations\n- 🔄 Rotation effects based on movement direction\n- ⚡ Performance optimized with RAF\n- 🎨 Fully customizable cursor design\n- 📦 Lightweight and easy to implement\n- 💪 Written in TypeScript\n- 🔌 Powered by Framer Motion\n\n## Installation\n\n```bash\nnpm install smooth-cursor\n# or\nyarn add smooth-cursor\n# or\npnpm add smooth-cursor\n```\n\n## Usage\n\n### Next.js Integration\n\n#### App Router (Next.js 13+)\n\n```tsx\n// app/layout.tsx\n'use client';\n\nimport { SmoothCursor } from 'smooth-cursor';\n\nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  return (\n    \u003chtml lang=\"en\"\u003e\n      \u003cbody\u003e\n        \u003cSmoothCursor /\u003e\n        {children}\n      \u003c/body\u003e\n    \u003c/html\u003e\n  );\n}\n```\n\n#### Pages Router\n\n```tsx\n// pages/_app.tsx\nimport type { AppProps } from 'next/app';\nimport { SmoothCursor } from 'smooth-cursor';\n\nexport default function App({ Component, pageProps }: AppProps) {\n  return (\n    \u003c\u003e\n      \u003cSmoothCursor /\u003e\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n### Basic Usage\n\n```jsx\nimport { SmoothCursor } from 'smooth-cursor';\n\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003cSmoothCursor /\u003e\n      {/* Your app content */}\n    \u003c/div\u003e\n  );\n}\n```\n\n### Custom Cursor\n\n```jsx\nimport { SmoothCursor } from 'smooth-cursor';\n\nconst CustomCursor = () =\u003e (\n  \u003cdiv className=\"w-8 h-8 bg-blue-500 rounded-full\" /\u003e\n);\n\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003cSmoothCursor cursor={\u003cCustomCursor /\u003e} /\u003e\n      {/* Your app content */}\n    \u003c/div\u003e\n  );\n}\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| cursor | JSX.Element | `\u003cDefaultCursorSVG /\u003e` | Custom cursor component to replace the default cursor |\n| springConfig | SpringConfig | See below | Configuration object for the spring animation behavior |\n\n### SpringConfig Type\n\n```typescript\ninterface SpringConfig {\n    damping: number;    // Controls how quickly the animation settles\n    stiffness: number;  // Controls the spring stiffness\n    mass: number;       // Controls the virtual mass of the animated object\n    restDelta: number;  // Controls the threshold at which animation is considered complete\n}\n```\n\n### Default Spring Configuration\n\n```typescript\nconst defaultSpringConfig = {\n    damping: 45,      // Default damping value\n    stiffness: 400,   // Default stiffness value\n    mass: 1,          // Default mass value\n    restDelta: 0.001  // Default rest delta value\n}\n```\n\n### Usage with Custom Spring Configuration\n\n```tsx\nfunction App() {\n  const customSpringConfig = {\n    damping: 60,      // Higher damping for less oscillation\n    stiffness: 500,   // Higher stiffness for faster movement\n    mass: 1.2,        // Slightly more mass for momentum\n    restDelta: 0.0005 // Smaller rest delta for more precise settling\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cSmoothCursor springConfig={customSpringConfig} /\u003e\n      {/* Your app content */}\n    \u003c/div\u003e\n  );\n}\n```\n\n## Animation Configuration\n\nThe cursor uses Framer Motion's spring animation with the following default configuration:\n\n```typescript\nconst springConfig = {\n  damping: 45,\n  stiffness: 400,\n  mass: 1,\n  restDelta: 0.001\n};\n```\n\n## Browser Support\n\nThe component is compatible with all modern browsers that support:\n- `requestAnimationFrame`\n- CSS transforms\n- Pointer events\n\n## Performance Considerations\n\nThe component is optimized for performance by:\n- Using `requestAnimationFrame` for smooth animations\n- Implementing throttling for mouse movement events\n- Using hardware-accelerated transforms\n- Optimizing re-renders with React's lifecycle methods\n\n## Development\n\nTo run the development environment:\n\n```bash\n# Install dependencies\nnpm install\n\n# Build the package\nnpm run rollup\n```\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Credits\n\nCreated by [Code-Parth](https://github.com/Code-Parth)\n\n## Support\n\nIf you have any questions or need help integrating the component, please [open an issue](https://github.com/Code-Parth/smooth-cursor/issues).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-parth%2Fsmooth-cursor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcode-parth%2Fsmooth-cursor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-parth%2Fsmooth-cursor/lists"}