{"id":16548787,"url":"https://github.com/midori-profile/overlay-video","last_synced_at":"2025-04-12T16:22:19.864Z","repository":{"id":245431749,"uuid":"781952905","full_name":"midori-profile/overlay-video","owner":"midori-profile","description":"🎬 This is a high-performance web animation react component with minimal development cost. ","archived":false,"fork":false,"pushed_at":"2024-06-24T12:02:12.000Z","size":497,"stargazers_count":91,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-26T10:48:04.668Z","etag":null,"topics":["high-performance","react","react-component","react-library","web-animation","webgl"],"latest_commit_sha":null,"homepage":"https://midori-portfolio.vercel.app/blog/web-animation","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/midori-profile.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2024-04-04T11:02:59.000Z","updated_at":"2025-02-13T07:59:21.000Z","dependencies_parsed_at":"2024-06-22T04:31:13.751Z","dependency_job_id":"d7ed7a56-3284-40d8-8090-2d0616788679","html_url":"https://github.com/midori-profile/overlay-video","commit_stats":null,"previous_names":["midori-profile/overlay-video"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/midori-profile%2Foverlay-video","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/midori-profile%2Foverlay-video/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/midori-profile%2Foverlay-video/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/midori-profile%2Foverlay-video/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/midori-profile","download_url":"https://codeload.github.com/midori-profile/overlay-video/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248594191,"owners_count":21130316,"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":["high-performance","react","react-component","react-library","web-animation","webgl"],"created_at":"2024-10-11T19:27:06.125Z","updated_at":"2025-04-12T16:22:19.816Z","avatar_url":"https://github.com/midori-profile.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"./readme/overlay-vid.svg\" width=\"300\" alt=\"\"\u003e\n\nThis is a high-performance web animation React component. For more details, refer to this article: [How to Achieve High-Performance Web Animations at Zero Development Cost](https://midori-portfolio.vercel.app/blog/web-animation).\n\n## Features:\n1. **Low development cost**: Designers can directly turn AE-exported video resources into web animations, resulting in zero communication development costs.\n2. **Small resource size**: Utilizes the advantages of video compression algorithms to achieve resource volumes far smaller than image frame sequences.\n3. **High fidelity**: Completely reproduces effects designed by designers.\n4. **High performance and compatibility**: Runs well even on low-end devices like iOS 9 and works well in browsers that support WebGL.\n\n## Preview\n\nCheck out the effect on this webpage: [overlay-video-preview](https://overlay-video-preview.vercel.app/)\n\n## Installation\n\nAdd the following line to your `.npmrc` file:\n\n```\n@midori-profile:registry=https://npm.pkg.github.com\n```\n\nThen install the package:\n\n```sh\nnpm install @midori-profile/overlay-video\n```\n\n## Usage\n\n### Props\n\n| Prop Name        | Type          | Default                  | Required | Description                                                                                                   | Usage Example                                                                                                   |\n|------------------|---------------|--------------------------|----------|---------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------|\n| path             | String        |                          | Yes      | Path to the animation resource. Supports both relative and remote URLs. For remote paths, ensure CORS headers. | `\u003cOverlayVideo path={video} ... /\u003e`                                                                             |\n| resourceWidth    | Number        | 800                      | No       | Width of the video resource used by the component (in px).                                                     | `\u003cOverlayVideo resourceWidth={1600} ... /\u003e`                                                                     |\n| resourceHeight   | Number        | 400                      | No       | Height of the video resource used by the component (in px).                                                    | `\u003cOverlayVideo resourceHeight={800} ... /\u003e`                                                                     |\n| loop             | Boolean       | false                    | No       | Whether the animation loops.                                                                                   | `\u003cOverlayVideo loop={true} ... /\u003e`                                                                              |\n| autoplay         | Boolean       | false                    | No       | Whether the animation plays automatically.                                                                     | `\u003cOverlayVideo autoplay={true} ... /\u003e`                                                                          |\n| canvasStyle      | Object        | {}                       | No       | CSS styles for the animation canvas.                                                                           | `\u003cOverlayVideo canvasStyle={{ width: '400px', height: '400px' }} ... /\u003e`                                        |\n| onerror          | Function      |                          | No       | Function to handle component errors.                                                                           | `\u003cOverlayVideo onerror={handleError} ... /\u003e`                                                                    |\n| ref              | Object        |                          | No       | Reference to access play and pause methods.                                                                    | `\u003cOverlayVideo ref={overlayVideoRef} ... /\u003e overlayVideoRef.current?.play();  overlayVideoRef.current?.pause();` |\n\n### Example Usage\n\n```js\nimport OverlayVideo from '@midori-profile/overlay-video';\nimport video from './resource.mp4';\n\nconst overlayVideoRef = useRef\u003c{ play: () =\u003e void; pause: () =\u003e void } | null\u003e(null);\n\nconst handlePlay = () =\u003e {\n  overlayVideoRef.current?.play();\n};\n\nconst handlePause = () =\u003e {\n  overlayVideoRef.current?.pause();\n};\n\nreturn (\n  \u003cdiv\u003e\n    \u003cOverlayVideo\n      id=\"myVideo\"\n      path={video}\n      resourceWidth={1600}\n      resourceHeight={800}\n      loop={true}\n      autoplay={true}\n      canvasStyle={{ width: '400px', height: '400px' }}\n      ref={overlayVideoRef}\n    /\u003e\n    \u003cdiv\u003e\n      \u003cbutton onClick={handlePlay}\u003ePlay\u003c/button\u003e\n      \u003cbutton onClick={handlePause}\u003ePause\u003c/button\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n);\n```\n\n\n\n\n### Tips\n\n- The final animation renders on a canvas, which can be styled using `canvasStyle`. For responsive design, you can set `canvasStyle=\"width:100%;\"`.\n\n- **resourceHeight** and **resourceWidth** refer to the dimensions of the video resource (in px), not the animation component. The animation component's dimensions are controlled via CSS. To avoid distortion, set the animation component's aspect ratio to match the video resource's aspect ratio.\n\n- Handling Video in React\n\n  To include video files in React, you can import them directly:\n\n  ```js\n  import video from './resource.mp4';\n  ```\n\n  In your `webpack.config.js`, add a rule to handle `.mp4` files:\n\n  ```js\n  {\n    test: /\\.mp4$/,\n    use: 'file-loader?name=videos/[name].[ext]',\n  }\n  ```\n\n### Example Project\n\nFor detailed usage, refer to this example project: [overlay-video-example](https://github.com/midori-profile/overlay-video/tree/master/example/react).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmidori-profile%2Foverlay-video","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmidori-profile%2Foverlay-video","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmidori-profile%2Foverlay-video/lists"}