{"id":20610896,"url":"https://github.com/darkroomengineering/tempus","last_synced_at":"2025-05-15T16:05:02.714Z","repository":{"id":41429149,"uuid":"509531775","full_name":"darkroomengineering/tempus","owner":"darkroomengineering","description":"Use only one requestAnimationFrame for your whole app","archived":false,"fork":false,"pushed_at":"2025-03-27T20:50:25.000Z","size":390,"stargazers_count":197,"open_issues_count":0,"forks_count":4,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-25T13:50:09.679Z","etag":null,"topics":["clock","raf","ticker","time"],"latest_commit_sha":null,"homepage":"","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/darkroomengineering.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["darkroomengineering"],"polar":"darkroomengineering"}},"created_at":"2022-07-01T17:07:21.000Z","updated_at":"2025-04-16T22:18:12.000Z","dependencies_parsed_at":"2025-02-09T08:10:28.886Z","dependency_job_id":"63f829d0-9b9b-4589-92ab-0ef55e32e860","html_url":"https://github.com/darkroomengineering/tempus","commit_stats":{"total_commits":62,"total_committers":4,"mean_commits":15.5,"dds":"0.32258064516129037","last_synced_commit":"a1a548b909859de39c6927a8dde88c5ee7f8cd1f"},"previous_names":["darkroomengineering/tempus","studio-freight/tempus"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darkroomengineering%2Ftempus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darkroomengineering%2Ftempus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darkroomengineering%2Ftempus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darkroomengineering%2Ftempus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/darkroomengineering","download_url":"https://codeload.github.com/darkroomengineering/tempus/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254374410,"owners_count":22060610,"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","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":["clock","raf","ticker","time"],"created_at":"2024-11-16T10:18:17.791Z","updated_at":"2025-05-15T16:05:02.702Z","avatar_url":"https://github.com/darkroomengineering.png","language":"TypeScript","readme":"# Tempus\n\n[![TEMPUS](https://assets.darkroom.engineering/tempus/banner.gif)](https://github.com/darkroomengineering/tempus)\n\n## Introduction\n\n`tempus` means time in Latin, this package is a lightweight, high-performance animation frame manager for JavaScript applications.\n\n## Packages\n\n- [tempus](./README.md)\n- [tempus/react](./packages/react/README.md)\n\n## Features\n\n- 🚀 Merge multiple requestAnimationFrame loops for better performance\n- 🎯 Control execution priority of different animations\n- ⚡ Support for custom frame rates (FPS)\n- 🔄 Compatible with popular animation libraries\n- 🪶 Zero dependencies\n- 📦 ~1KB gzipped\n\n## Installation\n\nusing package manager\n\n```bash\nnpm install tempus\n```\n\n```js\nimport Tempus from 'tempus'\n```\n\nusing script tag\n\n```html\n\u003cscript src=\"https://unpkg.com/tempus@1.0.0-dev.11/dist/tempus.min.js\"\u003e\u003c/script\u003e \n```\n\n## Basic Usage\n\n```javascript\nimport Tempus from \"tempus\"\n\n// Simple animation at maximum FPS\nfunction animate(time, deltaTime) {\n  console.log('frame', time, deltaTime)\n}\n\nTempus.add(animate)\n```\n\n### Cleanup\n```javascript\nconst unsubscribe = Tempus.add(animate)\n\nunsubscribe()\n```\n\n### React\n\nSee [tempus/react](./packages/react/README.md)\n\n## Advanced Usage\n\n### Custom Frame Rates\n\n```javascript\nTempus.add(animate, { \n  fps: 30 // Will run at 30 FPS\n})\n\nTempus.add(animate, { \n  fps: '50%' // Will run at 50% of the system's FPS\n})\n```\n\n### Priority System\n\n`——[-Infinity]——[0]——[Infinity]——\u003e execution order`\n\n\n#### Input\n```javascript\n// Default priority: 0 (runs second)\nTempus.add(() =\u003e console.log('animate'))\n\n// Priority: 1 (runs third)\nTempus.add(() =\u003e console.log('render'), { priority: 1 })\n\n// Priority: -1 (runs first)\nTempus.add(() =\u003e console.log('scroll'), { priority: -1 })\n```\n#### Output\n\n```\nscroll\nanimate\nrender\n```\t\n\n### Global RAF Patching\n\n```javascript\n// Patch native requestAnimationFrame across all your app\nTempus.patch()\n// Now any requestAnimationFrame recursive calls will use Tempus\n```\n\n### Ping Pong Technique\n\n```javascript\nlet framesCount = 0\n\n// ping and pong will run at 50% of the system's FPS,\n// but never during the same frame\nTempus.add(() =\u003e {\n  if (framesCount === 0) {\n    console.log('ping')\n  } else {\n    console.log('pong')\n  }\n\n  framesCount++\n  framesCount %= 2\n})\n```\n\n## Integration Examples\n\n### With Lenis Smooth Scroll\n```javascript\nTempus.add(lenis.raf)\n```\n\n### With GSAP\n```javascript\n// Remove GSAP's internal RAF\ngsap.ticker.remove(gsap.updateRoot)\n\n// Add to Tempus\nTempus.add((time) =\u003e {\n  gsap.updateRoot(time / 1000)\n})\n```\n\n### With Three.js\n```javascript\nTempus.add(() =\u003e {\n  renderer.render(scene, camera)\n}, { priority: 1 })\n// the render will happen after other rafs\n// so it can be synched with lenis for instance\n```\n\n## API Reference\n\n### Tempus.add(callback, options)\n\nAdds an animation callback to the loop.\n\n- **callback**: `(time: number, deltaTime: number) =\u003e void`\n- **options**:\n  - `priority`: `number` (default: 0) - Lower numbers run first\n  - `fps`: `number` (default: Infinity) - Target frame rate\n- **Returns**: `() =\u003e void` - Unsubscribe function\n\n### Tempus.patch()\n\nPatches the native `requestAnimationFrame` to use Tempus.\n\n### Tempus.unpatch()\n\nUnpatches the native `requestAnimationFrame` to use the original one.\n\n## Best Practices\n\n- Use priorities wisely: critical animations (like scroll) should have higher priority\n- Clean up animations when they're no longer needed\n- Consider using specific FPS for non-critical animations to improve performance (e.g: collisions)\n- Use Ping Pong technique for heavy computations running concurrently.\n\n## License\n\nMIT © [darkroom.engineering](https://github.com/darkroomengineering)\n\n# Shoutout\n\nThank you to [Keith Cirkel](https://github.com/keithamus) for having transfered us the npm package name 🙏.","funding_links":["https://github.com/sponsors/darkroomengineering","https://polar.sh/darkroomengineering"],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarkroomengineering%2Ftempus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdarkroomengineering%2Ftempus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarkroomengineering%2Ftempus/lists"}