{"id":16108132,"url":"https://github.com/srcnalt/3d-profile-avatars","last_synced_at":"2025-10-30T00:23:55.417Z","repository":{"id":41815484,"uuid":"391317570","full_name":"srcnalt/3d-profile-avatars","owner":"srcnalt","description":"Add your website a 3D Profile Avatar using Ready Player Me with a single line of code!","archived":false,"fork":false,"pushed_at":"2023-07-10T08:16:06.000Z","size":90782,"stargazers_count":111,"open_issues_count":1,"forks_count":28,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-01T19:15:05.366Z","etag":null,"topics":["avatar","gravatar","metaverse","node-package","ready-player-me"],"latest_commit_sha":null,"homepage":"","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/srcnalt.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}},"created_at":"2021-07-31T10:00:06.000Z","updated_at":"2025-03-07T17:45:29.000Z","dependencies_parsed_at":"2022-07-22T19:03:16.610Z","dependency_job_id":null,"html_url":"https://github.com/srcnalt/3d-profile-avatars","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/srcnalt/3d-profile-avatars","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srcnalt%2F3d-profile-avatars","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srcnalt%2F3d-profile-avatars/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srcnalt%2F3d-profile-avatars/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srcnalt%2F3d-profile-avatars/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/srcnalt","download_url":"https://codeload.github.com/srcnalt/3d-profile-avatars/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srcnalt%2F3d-profile-avatars/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267585826,"owners_count":24111577,"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-07-28T02:00:09.689Z","response_time":68,"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":["avatar","gravatar","metaverse","node-package","ready-player-me"],"created_at":"2024-10-09T19:25:31.232Z","updated_at":"2025-10-18T01:54:26.708Z","avatar_url":"https://github.com/srcnalt.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Twitter](https://img.shields.io/twitter/url/https/twitter.com/sgt3v.svg?style=social\u0026label=Follow%20%40sgt3v)](https://twitter.com/sgt3v)\n[![npm version](https://badge.fury.io/js/%40sarge%2Favatar-view.svg)](https://badge.fury.io/js/%40sarge%2Favatar-view)\n\n# 3D Profile Avatars\n\nAdd your website a *3D Profile Avatar* using *Ready Player Me* with a single line of code!\n\nTest it on CodeSandbox: https://codesandbox.io/s/avatar-view-wrn2u\n\n---\n\n![](./images/1.gif) ![](./images/2.gif)\n![](./images/3.gif) ![](./images/4.gif)\n\n## Install\n\n- Run `npm i @sarge/avatar-view`\n\n## Example\n\n- First visit https://readyplayer.me and create a half-body avatar.\n\n- Copy the url of the .glb file of the avatar you created.\n\n- Import `AvatarView` to your file.\n\n- Add `\u003cAvatarView type={type} url={url}/\u003e` component yo your return content \n\n```tsx\nimport { AvatarView } from \"@sarge/avatar-view\";\n\nconst type = \"3D\";\nconst url = \"https://models.readyplayer.me/62ea7bc28a6d28ec134bbcce.glb\";\n\nexport default function App()\n{\n  return \u003cAvatarView type={type} url={url}/\u003e\n}\n```\n\nIf you are using `Next.js` make sure to import the component dynamically using `ssr: false` parameter.\n\n```tsx\nconst AvatarView = dynamic(async () =\u003e (await import('@sarge/avatar-view')).AvatarView, { ssr: false })\n```\n\n## Parameters of AvatarView\n- **type** (*\"2D\" | \"3D\"*):\n\n    Type of the avatar 2D image or 3D model avatar.\n    \n- **url** (*string*): \n\n    Url of the Ready Player Me avatar to load. This parameter is mandatory.\n\n- **style** (*React.CSSProperties*) [optional]: \n\n    Style of the avatar view canvas. Here you can change the border style, background color or image, width, height and other style options.\n\n- **options2D** (*Options2D*) [optional]:\n\n    Options for `type` \"2D\" avatar.\n\n    - **scale** (*Vector2*) [optional]: \n    \n        Scale of the 2D avatar image.\n\n    - **position** (*Vector2*) [optional]:\n\n        Position of the 2D avatar in pixels.\n\n- **options3D** (*Options3D*) [optional]:\n\n    Options for `type` \"3D\" avatar.\n\n    - **quality** (*Quality*) [optional]: \n    \n        Avatar quality option to help reduce the size of the 3D model. Can be `High`, `Medium` or `Low`. \n\n    - **camera** (*CameraOptions*) [optional]: \n    \n        Ortographic camera options.\n\n    - **transform** (*Transform*) [optional]:\n\n        Position, rotation and scale of the 3D avatar.\n\n    - **blinkEyes** (*boolean*) [optional]:\n\n        Enables eye blinking in random intervals.\n\n    - **followCursor** (*boolean*) [optional]: \n    \n        When enabled, head and eyes of the avatar will follow of the cursor. Cursor must be moving on the 3D canvas. When cursor is out of the canvas, avatar goes back to initial stance.\n\n    - **orbitControl** (*boolean*) [optional]:\n    \n        Enables use of orbit controls for the 3D scene, which helps you rotate the avatar via mouse drag.\n\n- **onLoaded** (*void*) [optional]: \n\n    Callback method get notified when 2D or 3D avatar is loaded.\n\n- **onFailed** (*void*) [optional]: \n\n    Callback method get notified when 2D or 3D avatar is failed to load.\n\n- **fallback** (*React.ReactNode*) [optional]: \n\n    Fallback content to display if avatar fails to load.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrcnalt%2F3d-profile-avatars","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsrcnalt%2F3d-profile-avatars","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrcnalt%2F3d-profile-avatars/lists"}