{"id":16941476,"url":"https://github.com/steveruizok/gotcha","last_synced_at":"2025-03-17T08:36:51.895Z","repository":{"id":96182158,"uuid":"111134653","full_name":"steveruizok/gotcha","owner":"steveruizok","description":"Turn your Framer prototype into its own live developer spec.","archived":false,"fork":false,"pushed_at":"2021-02-25T14:35:46.000Z","size":35866,"stargazers_count":114,"open_issues_count":2,"forks_count":10,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-02-27T20:49:23.727Z","etag":null,"topics":["framer","framer-studio","front-end-development","handoff","prototyping"],"latest_commit_sha":null,"homepage":"","language":"CoffeeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/steveruizok.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}},"created_at":"2017-11-17T17:59:05.000Z","updated_at":"2023-03-18T14:37:42.000Z","dependencies_parsed_at":"2023-03-21T14:18:02.079Z","dependency_job_id":null,"html_url":"https://github.com/steveruizok/gotcha","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steveruizok%2Fgotcha","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steveruizok%2Fgotcha/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steveruizok%2Fgotcha/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steveruizok%2Fgotcha/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/steveruizok","download_url":"https://codeload.github.com/steveruizok/gotcha/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243852425,"owners_count":20358270,"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":["framer","framer-studio","front-end-development","handoff","prototyping"],"created_at":"2024-10-13T21:09:36.673Z","updated_at":"2025-03-17T08:36:51.840Z","avatar_url":"https://github.com/steveruizok.png","language":"CoffeeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cimg src=\"icon.png\" width=\"160\"\u003e\u003cbr\u003e\n  Gotcha 👌\u003cbr\u003e\n  \u003cbr\u003e\n\u003c/h1\u003e\n\u003cbr\u003e\n\u003cp align=\"center\"\u003e  \n\t\u003ca href=\"https://framer.cloud/OPNdS\"\u003e\u003cimg src=\"splash.png\" width=\"800\"\u003e\u003c/a\u003e\n\t\u003cbr\u003e\n\t\u003ch6 align=\"center\"\u003eINTRODUCTION\u003c/h6\u003e\n\t\u003cp align=\"center\" width=\"800\"\u003e\n\t  \tPress a key and your \u003ca href=\"http://framer.com\"\u003eFramer\u003c/a\u003e prototype becomes its own live, self-documenting, developer-ready spec.\u003cbr\u003e\u003cbr\u003eWhen enabled, Gotcha provides precise information about your project's elements: from positions and colors to font styling and even component names and relationships. Best of all, Gotcha works seamlessly with Framer Cloud, so the links you send can work as specs, too.\u003cbr\u003e\u003cbr\u003e\u003ca href=\"https://framer.cloud/OPNdS\"\u003e\u003cb\u003eCheck out the demo.\u003c/b\u003e\u003c/a\u003e\n\t\u003c/p\u003e\n\u003c/p\u003e\n\u003cbr\u003e\n\n## Installation\n\nDownload the **gotcha.coffee** file and drag it into your project's code editor.\n\n## Usage\n\nIn the Preview window...\n- Hover a Layer to get information about it\n- Tap a Layer to select it\n\nOn your keyboard...\n- Press *`* or *\u003c* to enable or disable Gotcha\n- Press */* or *\u003e* to select or deselect a Layer\n- Press *.* to simulate a tap on a hovered Layer\n- Press \\ to pause all animations\n\nIn the spec panel...\n- click any field to copy the field's value\n- Slow down the global animation speed using the Speed slider\n- Change devices using the Devices dropdown\n\n\n## Tips\n\n- Gotcha works in the Device Preview window. If your preview window is zoomed in, or if you can't see a device, you'll need to select the Toggle Device from the window's hamburger menu, or press Command + Shift + D.\n- Be sure that your Device Preview window is active before pressing any keys, lest you find your code full of random tick marks.\n\n\n## Planned Features\n\n- Copy formatted CSS from the spec panel.\n- Give your components custom properties to display.\n\n## Contact\n\n- Follow me at \u003ca href=\"https://twitter.com/steveruizok\"\u003e@steveruizok\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteveruizok%2Fgotcha","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsteveruizok%2Fgotcha","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteveruizok%2Fgotcha/lists"}