[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-147":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":8,"language":10,"languages":8,"totalLinesOfCode":8,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":14,"stars7d":15,"stars30d":16,"stars90d":14,"forks30d":14,"starsTrendScore":14,"compositeScore":17,"rankGlobal":8,"rankLanguage":8,"license":8,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":18,"hasPages":18,"topics":20,"createdAt":8,"pushedAt":8,"updatedAt":21,"readmeContent":22,"aiSummary":23,"trendingCount":14,"starSnapshotCount":14,"syncStatus":13,"lastSyncTime":24,"discoverSource":25},147,"html-in-canvas","remotion-dev\u002Fhtml-in-canvas","remotion-dev",null,"https:\u002F\u002Fremotion.dev\u002Fhtml-in-canvas","TypeScript",182,13,2,0,4,23,3.44,false,"main",[],"2026-06-12 02:00:09","\n\n\n# Remotion HTML-in-canvas examples\n\nShows the capabilities of [HTML-in-canvas](https:\u002F\u002Fwww.remotion.dev\u002Fdocs\u002Fhtml-in-canvas) and Remotion using the [`\u003CHtmlInCanvas>`](https:\u002F\u002Fwww.remotion.dev\u002Fdocs\u002Fremotion\u002Fhtml-in-canvas) component.\n\n## Magnifying Glass\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F23142326-fa95-4783-a8c6-bffffead87cd\n\n\n\n\nSource: [`src\u002FMagnifyingGlass\u002F`](src\u002FMagnifyingGlass)\n\n## Crt\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fa59b7549-4b89-46c3-821a-9a134c2689d2\n\nSource: [`src\u002FCrt\u002F`](src\u002FCrt)\n\nStarter Prompt:\n\n> use remotion best practices, especially HTML in canvas.  \n> create a CLI animation which first does \"npm create video\", then \"claude\" and asks to create a CRT effect using html-in-canvas.  \n> then, use html-in-canvas to make it look like an old computer. add a scanline filter and screen  \n> curvature to the composition.\n\n## Vintage\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F02d48660-6c77-4f1a-9941-ca318a226f94\n\nSource: [`src\u002FVintage\u002F`](src\u002FVintage)\n\n## GlowingBarChart\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F4797f7aa-c5ce-4c93-9e1f-3e22bdcfa038\n\nSource: [`src\u002FCenteredWhitePaper\u002F`](src\u002FCenteredWhitePaper)\n\n## StorePeel\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fbd5d6110-12bf-48d7-9317-9f3f4728b206\n\nSource: [`src\u002FCubeTransitionCard\u002F`](src\u002FCubeTransitionCard)\n\n## ArticleHighlight\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F8294d4c6-e4cd-48ef-a402-220bb72ce2fe\n\nSource: [`src\u002FArticleHighlight\u002F`](src\u002FArticleHighlight)\n\nAdditional experiments live in [`src\u002FBonus\u002F`](src\u002FBonus).\n\n## Commands\n\n**Install Dependencies**\n\n```console\nnpm i\n```\n\n**Start Preview**\n\n```console\nnpm run dev\n```\n\n**Render video**\n\n```console\nnpx remotion render\n```\n\n**Upgrade Remotion**\n\n```console\nnpx remotion upgrade\n```\n\n## Docs\n\nGet started with Remotion by reading the [fundamentals page](https:\u002F\u002Fwww.remotion.dev\u002Fdocs\u002Fthe-fundamentals).\n\n## Help\n\nWe provide help on our [Discord server](https:\u002F\u002Fdiscord.gg\u002F6VzzNDwUwV).\n\n## Issues\n\nFound an issue with Remotion? [File an issue here](https:\u002F\u002Fgithub.com\u002Fremotion-dev\u002Fremotion\u002Fissues\u002Fnew).\n\n## License\n\nNote that for some entities a company license is needed. [Read the terms here](https:\u002F\u002Fgithub.com\u002Fremotion-dev\u002Fremotion\u002Fblob\u002Fmain\u002FLICENSE.md).\n","remotion-dev\u002Fhtml-in-canvas 是一个展示如何在 Remotion 中使用 `\u003CHtmlInCanvas>` 组件来实现 HTML 内容与画布结合的示例项目。该项目通过 TypeScript 编写，提供了多种场景下的应用实例，如放大镜效果、CRT 旧电视风格渲染、复古视觉设计等，展示了丰富的动画和视觉特效能力。它特别适用于需要将动态或静态 HTML 内容集成到视频制作中的场景，比如创建具有特殊视觉效果的教学视频、产品演示或创意广告。用户可以通过简单的命令行操作快速启动开发环境并生成最终视频，非常适合对前端技术有一定了解且希望探索新颖内容创作方式的开发者。","2026-06-11 02:31:06","CREATED_QUERY"]