{"id":14990317,"url":"https://github.com/rodrigocam/ar-gif","last_synced_at":"2025-07-17T19:37:28.567Z","repository":{"id":44160103,"uuid":"170077394","full_name":"rodrigocam/ar-gif","owner":"rodrigocam","description":"Easy to use augmented reality web components","archived":false,"fork":false,"pushed_at":"2025-02-15T20:41:16.000Z","size":1588,"stargazers_count":57,"open_issues_count":15,"forks_count":18,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-09T16:08:53.086Z","etag":null,"topics":["ar-gif","ar-markers","augmented-reality","gif","gif-animation","hacktoberfest","html","javascript","jsartoolkit","mp4","threejs","web","web-component","webm"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/rodrigocam.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}},"created_at":"2019-02-11T06:12:28.000Z","updated_at":"2025-02-15T20:41:20.000Z","dependencies_parsed_at":"2023-01-22T23:01:05.926Z","dependency_job_id":null,"html_url":"https://github.com/rodrigocam/ar-gif","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigocam%2Far-gif","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigocam%2Far-gif/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigocam%2Far-gif/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigocam%2Far-gif/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rodrigocam","download_url":"https://codeload.github.com/rodrigocam/ar-gif/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248065283,"owners_count":21041871,"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":["ar-gif","ar-markers","augmented-reality","gif","gif-animation","hacktoberfest","html","javascript","jsartoolkit","mp4","threejs","web","web-component","webm"],"created_at":"2024-09-24T14:19:52.991Z","updated_at":"2025-04-09T16:08:59.116Z","avatar_url":"https://github.com/rodrigocam.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AR-gif\nEasy to use augmented reality web components that support GIFs and Videos!\n\n## Introduction\n\nar-gif is an effort to bring augmented reality with web components in a easy way. It supports **gif**, **png**, **jpg**, **mp4** and **webm** playing with pattern detection markers, but if you want to add new functionalities feel free to contribute.\n\nThis web-component is used in [Jandig](https://github.com/memeLab/Jandig), a project the aims to bring AR and Art for everyone.\n\n### Usage\n\nar-gif has a simple API, we have an ar-scene and one or more ar-markers.\n\n```html\n\u003car-scene\u003e\n  \u003car-marker patt=\"hiro.patt\" content=\"hiro.gif\"\u003e\u003c/ar-marker\u003e\n  \u003car-marker patt=\"cat.patt\" content=\"cat.mp4\"\u003e\u003c/ar-marker\u003e\n\u003c/ar-scene\u003e\n```\n\nEach ar-scene is responsible to detect every marker inside it and each marker is reponsible to show his content.\nThe \"patt\" attribute indicates which pattern will be registered for that marker and the content is the **gif**, **image** or **video** that will be played.\n\nFor more information about how to use, check [index.html](https://github.com/rodrigocam/ar-gif/blob/master/example/index.html) in the [example](https://github.com/rodrigocam/ar-gif/blob/master/example) folder.\n\n\n# Build\n\nTo build AR-gif locally, to test or create new features, you need to use `webpack-cli`. You can use our shortcut on npm:\n```bash\n$ npm install\n\n$ npm run build","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodrigocam%2Far-gif","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frodrigocam%2Far-gif","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodrigocam%2Far-gif/lists"}