[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81446":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":13,"contributorsCount":13,"subscribersCount":13,"size":13,"stars1d":13,"stars7d":15,"stars30d":15,"stars90d":13,"forks30d":13,"starsTrendScore":13,"compositeScore":16,"rankGlobal":10,"rankLanguage":10,"license":17,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":18,"hasPages":18,"topics":20,"createdAt":10,"pushedAt":10,"updatedAt":34,"readmeContent":35,"aiSummary":36,"trendingCount":13,"starSnapshotCount":13,"syncStatus":37,"lastSyncTime":38,"discoverSource":39},81446,"appshot","trunghaiy\u002Fappshot","trunghaiy","Generate App Store & Google Play preview videos and screenshots from a simple TypeScript config. Built on Remotion + React + Tailwind. Ships with AI agent skills for Claude Code — scan your app, direct the creative, render to MP4.","",null,"TypeScript",33,0,32,1,40.6,"MIT License",false,"main",[21,22,23,24,25,26,27,28,29,30,31,32,33],"agent-skills","app-marketing","app-store","aso","claude-code","google-play","mobile-app","preview-video","remotion-react","screenshot-generator","tailwind","typescript","video-generator","2026-06-12 04:01:33","# Appshot\n\nGenerate polished App Store preview videos, Google Play preview videos, and **website demo videos** — from your codebase, not a video editor.\n\nAppshot is a **primitives library + AI skill** that acts as a creative director: it scans your project, understands your app, and generates custom scene files tailored to your product. No video editing experience required. For mobile apps, it generates store-compliant preview videos. For websites and SaaS products, it generates 1920×1080 product demo videos with browser mockups.\n\nWorks with **Claude Code**, **Cursor**, **Windsurf**, **Codex**, and any AI agent that supports the [Agent Skills spec](https:\u002F\u002Fagentskills.io).\n\nSupports **React Native \u002F Expo**, **Flutter**, **Swift (iOS)**, and **Kotlin\u002FJava (Android)** for mobile, plus **Next.js**, **SvelteKit**, **Nuxt**, **Astro**, **Remix**, and **Vite** projects for web.\n\n**Used in production:** [BookStreak: Reading Tracker](https:\u002F\u002Fapps.apple.com\u002Fus\u002Fapp\u002Fbookstreak-reading-tracker\u002Fid6767014813) — App Store preview videos and screenshots generated entirely with Appshot.\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"examples\u002Fbookstreak\u002Fapp-preview.gif\" alt=\"BookStreak App Store preview video generated with Appshot\" width=\"240\" \u002F>\n\u003C\u002Fp>\n\n## Real-World Example: BookStreak\n\n[BookStreak](https:\u002F\u002Fapps.apple.com\u002Fus\u002Fapp\u002Fbookstreak-reading-tracker\u002Fid6767014813) is a reading habit tracker on the App Store. Its preview videos and store screenshots were generated entirely with Appshot — no CapCut, no Canva, no video editing.\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"examples\u002Fbookstreak\u002Fbefore-after.png\" alt=\"The Old Way vs The Appshot Way\" width=\"720\" \u002F>\n\u003C\u002Fp>\n\nSee [examples\u002Fbookstreak\u002F](examples\u002Fbookstreak\u002F) for the generated config and scene files.\n\n## How It Works\n\nThe AI skill generates custom `.tsx` scene files for each project — no fixed scene templates, no one-size-fits-all layouts:\n\n1. **Install the skills** into your mobile app project\n2. **Ask your AI agent** — \"Generate App Store and Play Store preview videos for this app\"\n3. **The skill scans your codebase** — extracts app name, brand colors, icon, features, and store metadata automatically\n4. **You answer a few creative questions** — what problem does your app solve? What's the core action? What proof do you have?\n5. **The skill generates custom scenes** — writes bespoke `.tsx` components using Appshot primitives, wired into a Remotion composition\n6. **Preview and render** — `npm run dev` to preview in-browser, `npm run build` to export MP4\n\nEvery video is unique to your app. The skill picks the right narrative arc, writes copy, chooses animations, and composes scenes from the primitives library below.\n\n### Quick mode\n\nDon't want a conversation? Add `--quick` and the skill makes all creative decisions from your codebase context alone:\n\n```\nGenerate an App Store preview video for this app --quick\n```\n\nQuick mode works for web videos too:\n\n```\nGenerate a product demo video for this website --quick\n```\n\n## Install\n\nInstall the skills into your app project (recommended):\n\n```bash\nnpx skills add trunghaiy\u002Fappshot\n```\n\nThis installs three skills into your project's `.agents\u002Fskills\u002F` directory. Your AI agent picks them up automatically on the next session.\n\n\u003Cdetails>\n\u003Csummary>Other installation methods\u003C\u002Fsummary>\n\n**Install specific skills only:**\n\n```bash\nnpx skills add trunghaiy\u002Fappshot --skill appshot-videos appshot-images\n```\n\n**Clone and copy:**\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Ftrunghaiy\u002Fappshot.git\ncp -r appshot\u002Fskills\u002F* your-project\u002F.agents\u002Fskills\u002F\n```\n\n**Git submodule:**\n\n```bash\ngit submodule add https:\u002F\u002Fgithub.com\u002Ftrunghaiy\u002Fappshot.git .agents\u002Fappshot\n```\n\n**Fork and customize** — fork this repo and modify the skills, strategies, and templates for your needs.\n\n\u003C\u002Fdetails>\n\n## What You Can Generate\n\n### Videos\n\n15-30 second animated preview videos for App Store and Google Play. The skill generates both store versions in one session — same scenes, only the device frame (iPhone vs Pixel) and store badge differ. Each video is unique to your app's story, brand, and features.\n\n### Screenshots\n\nStore listing screenshots with device frames, captions, and branded backgrounds. Supports all required App Store and Google Play dimensions.\n\n### Web Demo Videos\n\n1920×1080 landscape product demo videos for websites and SaaS products. The skill generates custom scenes with browser mockups (Chrome-style frame), animated cursor interactions, and bespoke UI recreations of your product's actual pages. Perfect for landing page heroes, product tours, and marketing videos.\n\n## Skills\n\n| Skill | What it does |\n|-------|-------------|\n| `appshot-core` | Foundation — architecture, config schema, component inventory, device presets |\n| `appshot-videos` | Creative director for mobile preview videos — scans your app, guides narrative, generates custom scenes |\n| `appshot-web-videos` | Creative director for web demo videos — scans your web project, generates browser mockup scenes |\n| `appshot-images` | Creative director for screenshots — scans your app, designs layouts, generates custom scenes |\n\n`appshot-core` is loaded automatically by the other skills. You interact with `appshot-videos`, `appshot-web-videos`, or `appshot-images` directly.\n\n## Manual Quick Start\n\nIf you prefer full control without AI skills, scaffold a standalone Remotion project:\n\n```bash\n# 1. Scaffold\nnpx create-appshot my-video\ncd my-video\n\n# 2. Edit src\u002Fapp-config.ts with your app's info\n\n# 3. Preview in browser\nnpm run dev\n\n# 4. Render to MP4\nnpm run build                     # Both stores (if configured)\n# npm run build:app-store         # App Store only\n# npm run build:play-store        # Play Store only\n```\n\n## Components\n\nThe primitives library that the AI composes into custom scenes. All components accept brand colors via a `brand` prop:\n\n| Component | Purpose |\n|-----------|---------|\n| `PhoneFrame` | Realistic device with bezel, side buttons, notch\u002FDynamic Island |\n| `BrowserFrame` | Chrome-style browser window with address bar and traffic lights |\n| `AmbientBackground` | Animated gradient with floating orbs (light\u002Fmedium\u002Fdeep\u002Fdark) |\n| `Caption` | Bottom caption with word-by-word entrance animation |\n| `FadeIn` | Directional fade-in (up\u002Fdown\u002Fleft\u002Fright) |\n| `SceneWrap` | 12-frame fade transitions between scenes |\n| `AnimatedCursor` | Keyframe-driven mouse cursor for browser interaction demos |\n| `ProgressBar` | Animated horizontal bar (loading, progress, metrics) |\n| `Icon` | 30 SVG stroke icons for UI mockups |\n| `HeatMap` | GitHub-style contribution grid |\n| `AppIcon` | Icon with optional glow effect |\n| `AppStoreBadge` | iOS App Store \u002F Google Play badges |\n| `StatCard` | Before\u002Fafter stat with animated counter |\n| `FloatingCard` | Glass\u002Fsolid\u002Fdark card with spring entrance |\n| `TypeWriter` | Character-by-character text reveal |\n\n## Device Presets\n\n| Preset | Screen | Notch | Store |\n|--------|--------|-------|-------|\n| `iphone-16-pro` | 393x852 | Dynamic Island | App Store |\n| `iphone-15` | 375x812 | Dynamic Island | App Store |\n| `ipad-pro-13` | 1024x1366 | None | App Store (iPad) |\n| `pixel-9` | 412x915 | Punch hole | Play Store |\n\n## Browser Presets\n\n| Preset | Viewport | Chrome | Use case |\n|--------|----------|--------|----------|\n| `chrome-desktop` | 1440x900 | Light | Default for web demo videos |\n| `chrome-dark` | 1440x900 | Dark | Dark-themed web apps, developer tools |\n\n## Config Reference\n\nEverything is driven by `src\u002Fapp-config.ts`. The skill generates this for you, but here's the schema if you're customizing manually:\n\n```typescript\nexport const appConfig: AppConfig = {\n  app: {\n    name: \"MyApp\",\n    tagline: \"Your tagline\",\n    icon: \"app-icon.png\",     \u002F\u002F in public\u002F\n    platform: \"ios\",          \u002F\u002F \"ios\" | \"android\" | \"both\"\n  },\n  brand: {\n    primary: \"#007AFF\",\n    primaryLight: \"#E5F1FF\",\n    background: \"#F5F5F7\",\n    surface: \"#FFFFFF\",\n    textPrimary: \"#1D1D1F\",\n    textSecondary: \"#86868B\",\n    success: \"#34C759\",\n    danger: \"#FF3B30\",\n  },\n  video: {\n    fps: 30,\n    width: 886,       \u002F\u002F App Store required: 886x1920\n    height: 1920,\n    device: \"iphone-15\",\n  },\n};\n```\n\n### Web video config\n\n```typescript\nexport const appConfig: AppConfig = {\n  app: {\n    name: \"MyProduct\",\n    tagline: \"Your tagline\",\n    icon: \"logo.png\",\n    platform: \"web\",\n    url: \"myproduct.com\",\n  },\n  brand: {\n    primary: \"#2563EB\",\n    primaryLight: \"#DBEAFE\",\n    background: \"#FFFFFF\",\n    surface: \"#F8FAFC\",\n    textPrimary: \"#0F172A\",\n    textSecondary: \"#64748B\",\n    success: \"#22C55E\",\n    danger: \"#EF4444\",\n  },\n  video: {\n    fps: 30,\n    width: 1920,\n    height: 1080,\n    browser: \"chrome-desktop\",\n  },\n};\n```\n\n## Store Requirements\n\n### Videos\n\n| Platform | Dimensions | Duration | Format |\n|----------|-----------|----------|--------|\n| iPhone 6.7\" | 886x1920 | 15-30s | H.264, MP4\u002FMOV |\n| iPhone 6.1\" | 886x1920 | 15-30s | H.264, MP4\u002FMOV |\n| iPad 13\" | 1200x1600 | 15-30s | H.264, MP4\u002FMOV |\n| Google Play | 886x1920 | 15-30s | H.264, MP4 |\n\nDefault output is 886×1920. This canvas works for both App Store (iPhone 6.7″ native) and Google Play.\n\n### Web Demo Videos\n\n| Format | Dimensions | Duration | Codec |\n|--------|-----------|----------|-------|\n| Landing page hero | 1920x1080 | 20-45s | H.264, MP4 |\n| Full product demo | 1920x1080 | 30-60s | H.264, MP4 |\n\nNo store-specific constraints. Output is standard 16:9 landscape video suitable for YouTube, landing pages, social media embeds, and product documentation.\n\n### Screenshots — iOS App Store\n\n| Device | Dimensions (portrait) | Required |\n|--------|----------------------|----------|\n| iPhone 6.9\" | 1320x2868 | Yes (mandatory primary) |\n| iPhone 6.7\" | 1290x2796 | Optional |\n| iPhone 6.5\" | 1242x2688 | Optional (legacy) |\n| iPad 13\" | 2064x2752 | Required if app supports iPad |\n\n### Screenshots — Google Play\n\n| Device | Dimensions (portrait) | Notes |\n|--------|----------------------|-------|\n| Phone | 1080x1920 | Recommended standard |\n| 7\" Tablet | 1200x1920 | If app targets 7\" tablets |\n| 10\" Tablet | 1600x2560 | If app targets 10\" tablets |\n\n## Customization\n\n- **Custom components** — Build on top of the existing primitives in `src\u002Fcomponents\u002F`\n- **Screenshots** — Use `staticFile(\"screenshot.png\")` inside `PhoneFrame`\n- **Audio** — Place `.mp3` in `public\u002F`, set `backgroundMusic` in config\n- **Category strategies** — The video skill includes strategies for habit tracking, fitness, finance, and more. Add your own in `skills\u002Fappshot-videos\u002Fstrategies\u002F`\n\n## License\n\nMIT\n","Appshot 是一个用于生成 App Store 和 Google Play 预览视频及截图的工具，支持从简单的 TypeScript 配置文件开始创建。其核心功能包括利用 Remotion、React 和 Tailwind 构建自定义场景，并通过 AI 技能（如 Claude Code）自动扫描项目、理解应用特性并生成符合商店规范的预览视频或产品演示视频。适用于移动应用开发者和网站\u002FSaaS 产品的营销人员，无需视频编辑经验即可快速生成高质量的应用展示材料。特别适合那些希望提高 ASO（应用商店优化）效果但缺乏设计资源的小团队和个人开发者使用。",2,"2026-06-11 04:05:06","CREATED_QUERY"]