🔨 add promotional GIF animation with Remotion

Self-contained Remotion sub-project at media/promo/ that renders an
animated GIF (800x450, 10s, ~4.8MB) showcasing the template's value
prop: a Ferris crab (Rust) and dumpling bun (Bun/TS) collaborating
to build and test a desktop app.

Four overlapping scenes: Entrance, Build, Test, Finale — all driven
by inline SVG characters with spring-based animations and no external
image assets. Render via `make promo`.

Also fixes pre-existing audit vulnerabilities (minimatch, ajv) via
package.json overrides.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: Miyamura80

.gitignore

@@ -21,6 +21,8 @@ src-tauri/target/
 # Bun lock cache
 bun.lockb
 docs/bun.lockb
+media/promo/bun.lockb
+media/promo/package-lock.json
 
 # Environments & secrets
 .env

Makefile

@@ -97,7 +97,7 @@ init: ## Initialize project (usage: make init name=my-project description="my de
 	@echo "$(GREEN)✅ Updated project name, identifier, and description.$(RESET)"
 
 ### Asset Generation
-.PHONY: banner logo
+.PHONY: banner logo promo
 
 banner: ## Generate project banner image (requires APP__GEMINI_API_KEY)
 	@echo "$(YELLOW)🔍Generating banner...$(RESET)"
@@ -109,6 +109,11 @@ logo: ## Generate logo, icons, and favicon (requires APP__GEMINI_API_KEY)
 	@cd src-tauri && cargo run --bin asset-gen -- logo
 	@echo "$(GREEN)✅Logo assets saved to docs/public/$(RESET)"
 
+promo: ## Generate promotional GIF animation
+	@echo "$(YELLOW)🎬 Rendering promotional GIF...$(RESET)"
+	@cd media/promo && bun install && bun run render
+	@echo "$(GREEN)✅ Promo GIF rendered at media/promo.gif$(RESET)"
+
 
 
 ########################################################

README.md

@@ -24,7 +24,11 @@
   <img alt="GitHub Actions Workflow Status" src="https://img.shields.io/github/actions/workflow/status/Miyamura80/Tauri-Template/rust_checks.yaml?branch=main">
 </p>
 
---- 
+<p align="center">
+  <img src="media/promo.gif" alt="Crab and Bun build and test a desktop app" width="600">
+</p>
+
+---
 
 ## Key Features
 

biome.json

@@ -6,7 +6,7 @@
 		"useIgnoreFile": true
 	},
 	"files": {
-		"includes": ["**", "!!**/dist"]
+		"includes": ["**", "!!**/dist", "!!media/promo"]
 	},
 	"formatter": {
 		"enabled": true,

bun.lock

@@ -27,7 +27,7 @@
 		"@types/node": "^25.2.0",
 		"@types/react": "^19.2.8",
 		"@types/react-dom": "^19.2.3",
-		"eslint": "^9.39.2",
+		"eslint": "^9.39.3",
 		"eslint-config-next": "16.1.6",
 		"next-validate-link": "^1.6.4",
 		"postcss": "^8.5.6",

docs/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "tauri-template-promo",
+  "private": true,
+  "scripts": {
+    "studio": "remotion studio src/index.ts",
+    "render": "remotion render src/index.ts Promo --image-format=png --every-nth-frame=3 --output=../promo.gif"
+  },
+  "dependencies": {
+    "remotion": "^4.0.428",
+    "@remotion/cli": "^4.0.428",
+    "@remotion/google-fonts": "^4.0.428",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.8",
+    "typescript": "~5.9.3"
+  }
+}

media/promo.gif

@@ -0,0 +1,3 @@
+import { Config } from "@remotion/cli/config";
+
+Config.setVideoImageFormat("png");

media/promo/package.json

@@ -0,0 +1,35 @@
+import type React from "react";
+import { AbsoluteFill, Sequence } from "remotion";
+import { SceneBuild } from "./scenes/SceneBuild";
+import { SceneEntrance } from "./scenes/SceneEntrance";
+import { SceneFinale } from "./scenes/SceneFinale";
+import { SceneTest } from "./scenes/SceneTest";
+import { Background } from "./shared/Background";
+
+export const Promo: React.FC = () => {
+  return (
+    <AbsoluteFill>
+      <Background />
+
+      {/* Scene 1: Entrance – frames 0-89 */}
+      <Sequence from={0} durationInFrames={90} premountFor={0}>
+        <SceneEntrance />
+      </Sequence>
+
+      {/* Scene 2: Build – frames 75-179 (overlaps entrance by 15) */}
+      <Sequence from={75} durationInFrames={105} premountFor={15}>
+        <SceneBuild />
+      </Sequence>
+
+      {/* Scene 3: Test – frames 165-254 (overlaps build by 15) */}
+      <Sequence from={165} durationInFrames={90} premountFor={15}>
+        <SceneTest />
+      </Sequence>
+
+      {/* Scene 4: Finale – frames 240-299 (overlaps test by 15) */}
+      <Sequence from={240} durationInFrames={60} premountFor={15}>
+        <SceneFinale />
+      </Sequence>
+    </AbsoluteFill>
+  );
+};