[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7DKS2EDFFPRJC5FZASMMZ88":3,"skill-same:01M7DKS2EDFFPRJC5FZASMMZ88":102},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":15,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":40,"commitSha":41,"skillDirectory":42,"forksCount":43,"repositoryHtmlUrl":44,"repositoryHomepageUrl":45,"ownerHtmlUrl":46,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":47,"install":48,"resources":61},"01M7DKS2EDFFPRJC5FZASMMZ88","webgl-pixel-reveal-gallery",null,"A scroll-reactive masonry gallery (Three.js + GSAP) where each image develops from a pixel\u002Fgrid dissolve on viewport entry, with a split-text heading and click-to-fullscreen Flip.","andremolnar\u002Fopen-open-design","andremolnar","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F919644?v=4","01M7DHE1X4QH6SJBHR92VG5N84","01M7DHE1XRHK1WQV34AM9M328E",1,"MIT","https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Fplugins\u002F_official\u002Fexamples\u002Fwebgl-pixel-reveal-gallery\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Fplugins\u002F_official\u002Fexamples\u002Fwebgl-pixel-reveal-gallery\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: webgl-pixel-reveal-gallery\ndescription: |\n  A scroll-reactive masonry gallery (Three.js + GSAP) where each image develops from a pixel\u002Fgrid dissolve on viewport entry, with a split-text heading and click-to-fullscreen Flip.\ntriggers:\n  - \"pixel reveal gallery\"\n  - \"webgl gallery\"\nod:\n  mode: prototype\n  platform: web\n  scenario: design\n  preview:\n    type: html\n    entry: index.html\n    reload: debounce-100\n  design_system:\n    requires: false\n  craft:\n    requires: [animation-discipline]\n---\n\n# Pixel Reveal Gallery\n\nProduce a single self-contained `index.html` — A scroll-reactive masonry gallery (Three.js + GSAP) where each image develops from a pixel\u002Fgrid dissolve on viewport entry, with a split-text heading and click-to-fullscreen Flip.\n\n## Why this is a powered artifact\n\nOpenDesign detects `getContext('webgl2')` \u002F heavy WebGL and renders this file in **powered preview** (a cross-origin-isolated iframe). The full GPU + scroll pipeline runs; no opaque-sandbox workarounds are needed.\n\n## Resource map\n\n```\nwebgl-pixel-reveal-gallery\u002F\n├── SKILL.md          ← you're reading this\n├── example.html      ← the complete, working artifact (READ FIRST)\n└── (assets, if any)\n```\n\n## Credits \u002F attribution\n\n- effect: J0SUKE \u002F Codrops (MIT)\n- imagery: Original (AI-generated)\n\nKeep any bundled LICENSE and on-screen credit intact. Replace imagery only with license-clean assets (original \u002F AI, Lummi.ai, Unsplash\u002FPexels — never scraped imagery).\n","# Pixel Reveal Gallery\n\nProduce a single self-contained `index.html` — A scroll-reactive masonry gallery (Three.js + GSAP) where each image develops from a pixel\u002Fgrid dissolve on viewport entry, with a split-text heading and click-to-fullscreen Flip.\n\n## Why this is a powered artifact\n\nOpenDesign detects `getContext('webgl2')` \u002F heavy WebGL and renders this file in **powered preview** (a cross-origin-isolated iframe). The full GPU + scroll pipeline runs; no opaque-sandbox workarounds are needed.\n\n## Resource map\n\n```\nwebgl-pixel-reveal-gallery\u002F\n├── SKILL.md          ← you're reading this\n├── example.html      ← the complete, working artifact (READ FIRST)\n└── (assets, if any)\n```\n\n## Credits \u002F attribution\n\n- effect: J0SUKE \u002F Codrops (MIT)\n- imagery: Original (AI-generated)\n\nKeep any bundled LICENSE and on-screen credit intact. Replace imagery only with license-clean assets (original \u002F AI, Lummi.ai, Unsplash\u002FPexels — never scraped imagery).\n",{"od":24,"name":5,"triggers":36,"description":39},{"mode":25,"craft":26,"preview":29,"platform":33,"scenario":34,"design_system":35},"prototype",{"requires":27},[28],"animation-discipline",{"type":30,"entry":31,"reload":32},"html","index.html","debounce-100","web","design",{"requires":20},[37,38],"pixel reveal gallery","webgl gallery","A scroll-reactive masonry gallery (Three.js + GSAP) where each image develops from a pixel\u002Fgrid dissolve on viewport entry, with a split-text heading and click-to-fullscreen Flip.\n","main","3a6721b94dec7506e324023f2855495c9c54d0d2","plugins\u002F_official\u002Fexamples\u002Fwebgl-pixel-reveal-gallery",0,"https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design","https:\u002F\u002Fopen-design.ai","https:\u002F\u002Fgithub.com\u002Fandremolnar","2026-10-30 01:33:11",{"source":8,"skillName":5,"commands":49,"prompt":59,"zipAvailable":60},[50,53,56],{"tool":51,"command":52},"npx","npx skills add andremolnar\u002Fopen-open-design --skill webgl-pixel-reveal-gallery",{"tool":54,"command":55},"bunx","bunx skills add andremolnar\u002Fopen-open-design --skill webgl-pixel-reveal-gallery",{"tool":57,"command":58},"pnpm","pnpm dlx skills add andremolnar\u002Fopen-open-design --skill webgl-pixel-reveal-gallery","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Fplugins\u002F_official\u002Fexamples\u002Fwebgl-pixel-reveal-gallery\u002FSKILL.md",true,[62,68,74,78,82,86,90,94,98],{"path":63,"resourceType":64,"resourceTypeDesc":65,"sizeBytes":66,"sourceHtmlUrl":67},"example.html","REFERENCE","参考文档",13705,"https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Fplugins\u002F_official\u002Fexamples\u002Fwebgl-pixel-reveal-gallery\u002Fexample.html",{"path":69,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":72,"sourceHtmlUrl":73},"expedition\u002Fe1.jpg","ASSET","资产文件",203786,"https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Fplugins\u002F_official\u002Fexamples\u002Fwebgl-pixel-reveal-gallery\u002Fexpedition\u002Fe1.jpg",{"path":75,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":76,"sourceHtmlUrl":77},"expedition\u002Fe2.jpg",146048,"https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Fplugins\u002F_official\u002Fexamples\u002Fwebgl-pixel-reveal-gallery\u002Fexpedition\u002Fe2.jpg",{"path":79,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":80,"sourceHtmlUrl":81},"expedition\u002Fe3.jpg",264575,"https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Fplugins\u002F_official\u002Fexamples\u002Fwebgl-pixel-reveal-gallery\u002Fexpedition\u002Fe3.jpg",{"path":83,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":84,"sourceHtmlUrl":85},"expedition\u002Fe4.jpg",166592,"https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Fplugins\u002F_official\u002Fexamples\u002Fwebgl-pixel-reveal-gallery\u002Fexpedition\u002Fe4.jpg",{"path":87,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":88,"sourceHtmlUrl":89},"expedition\u002Fe5.jpg",227267,"https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Fplugins\u002F_official\u002Fexamples\u002Fwebgl-pixel-reveal-gallery\u002Fexpedition\u002Fe5.jpg",{"path":91,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":92,"sourceHtmlUrl":93},"expedition\u002Fe6.jpg",229556,"https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Fplugins\u002F_official\u002Fexamples\u002Fwebgl-pixel-reveal-gallery\u002Fexpedition\u002Fe6.jpg",{"path":95,"resourceType":95,"resourceTypeDesc":96,"sizeBytes":97,"sourceHtmlUrl":15},"LICENSE","许可证",1283,{"path":99,"resourceType":64,"resourceTypeDesc":65,"sizeBytes":100,"sourceHtmlUrl":101},"open-design.json",3128,"https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Fplugins\u002F_official\u002Fexamples\u002Fwebgl-pixel-reveal-gallery\u002Fopen-design.json",[103,111,118,125,132,140],{"skillNo":104,"name":105,"nameZh":6,"description":106,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":107,"licenseFileUrl":6,"sourceHtmlUrl":108,"categories":109,"keywords":110,"publishedAt":19},"01M7DMPDFNBD52ZP0GNY046Z2A","Beta Skill","Instruction-only fixture skill.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Ftools\u002Frelease\u002Ftests\u002Ffixtures\u002Fcatalog\u002Fskills\u002Fbeta\u002FSKILL.md",[],[],{"skillNo":112,"name":113,"nameZh":6,"description":114,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":107,"licenseFileUrl":6,"sourceHtmlUrl":115,"categories":116,"keywords":117,"publishedAt":19},"01M7DMPC4JJ8ENX7VWTMP38Y9C","Alpha Skill","First fixture skill with a runnable demo.","https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Ftools\u002Frelease\u002Ftests\u002Ffixtures\u002Fcatalog\u002Fskills\u002Falpha\u002FSKILL.md",[],[],{"skillNo":119,"name":120,"nameZh":6,"description":121,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":107,"licenseFileUrl":6,"sourceHtmlUrl":122,"categories":123,"keywords":124,"publishedAt":19},"01M7DMP9J5BX307VWVD67J0BBM","Deck One","A small deck template fixture.","https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Ftools\u002Frelease\u002Ftests\u002Ffixtures\u002Fcatalog\u002Fdesign-templates\u002Fdeck-one\u002FSKILL.md",[],[],{"skillNo":126,"name":127,"nameZh":6,"description":128,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":107,"licenseFileUrl":6,"sourceHtmlUrl":129,"categories":130,"keywords":131,"publishedAt":19},"01M7DMP7GNYTFXGK9RDZ2X723P","youtube-clipper","YouTube clip generation and editing with automated workflows — pull source video, slice highlights, add captions, and export.","https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube-clipper\u002FSKILL.md",[],[],{"skillNo":133,"name":134,"nameZh":6,"description":135,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":136,"sourceHtmlUrl":137,"categories":138,"keywords":139,"publishedAt":19},"01M7DMP2WHMNKM0P5BXRYAG8D1","writing-guidelines","Review docs\u002Fprose for Writing Guidelines compliance. Use when asked to \"review my docs\", \"check writing style\", \"audit prose\", \"review docs voice and tone\", or \"check this page against the writing handbook\".","https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Fskills\u002Fwriting-guidelines\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Fskills\u002Fwriting-guidelines\u002FSKILL.md",[],[],{"skillNo":141,"name":142,"nameZh":6,"description":143,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":107,"licenseFileUrl":6,"sourceHtmlUrl":144,"categories":145,"keywords":146,"publishedAt":19},"01M7DMP0GVJQ37CGXYQDD20VWS","wpds","WordPress Design System. Apply WordPress's official design tokens, typography, and component patterns to themes and sites.","https:\u002F\u002Fgithub.com\u002Fandremolnar\u002Fopen-open-design\u002Fblob\u002Fmain\u002Fskills\u002Fwpds\u002FSKILL.md",[],[]]