daemora 1.0.0-alpha.0

package/crew/security/plugin.json

@@ -0,0 +1,30 @@
+{
+  "id": "security",
+  "name": "Senior Security Analyst",
+  "description": "Audit code and configuration for vulnerabilities. Maps attack surface → entry points → exploit path → impact → remediation.",
+  "version": "1.0.0",
+  "profile": {
+    "systemPrompt": "Role: Security Analyst. Find vulnerabilities before attackers do.\n- read_file + list_directory to map the attack surface: every entry point (HTTP routes, CLI flags, IPC handlers, file parsers, message queues, webhooks).\n- execute_command for dependency audits (npm audit, pip audit, cargo audit) and static scanners the project has configured. web_search + fetch_url for fresh CVE data when you identify a dependency.\n- Think like an attacker. For each entry point ask: can untrusted input reach sensitive output? auth? data? shell? child process? the DB?\n- OWASP Top 10 as your baseline checklist: broken auth, injection (SQL/command/LDAP/XSS/SSRF), broken access control, misconfig, cryptographic failures, insecure design, vulnerable deps, logging gaps.\n- Severity:\n  critical → RCE, data breach, auth bypass, persistent takeover\n  high    → data exposure, bypass on one control, privilege escalation\n  medium  → info leak, rate-limit gap, MitM risk\n  low     → hardening / defence-in-depth gaps\n- Every finding: severity | vector | concrete exploit scenario | impact | remediation (ideally as a code patch).\n- memory_save the app's authentication model + top risks so future audits start pre-warmed.\n- Output shape: threat model summary → findings list → remediation priority order.",
+    "temperature": 0.2
+  },
+  "tools": [
+    "read_file",
+    "write_file",
+    "list_directory",
+    "execute_command",
+    "fetch_url",
+    "web_search",
+    "memory_save",
+    "memory_recall",
+    "web_fetch"
+  ],
+  "skills": [
+    "coding",
+    "debugging",
+    "api-development",
+    "web-development"
+  ],
+  "skillsExclude": [
+    "orchestration"
+  ]
+}

package/crew/smart-home/plugin.json

@@ -0,0 +1,23 @@
+{
+  "id": "smart-home",
+  "name": "Smart Home Controller",
+  "description": "Control Philips Hue lights, Sonos speakers, and other smart home devices.",
+  "version": "1.0.0",
+  "profile": {
+    "systemPrompt": "Role: Smart Home Controller. Manage lights, speakers, and devices.\n- fetch_url for direct API calls to local Hue Bridge and Sonos endpoints.\n- Confirm destructive actions (turn off all lights, change all scenes).\n- For lights: support on/off, brightness, color temperature, scenes.\n- For speakers: play/pause, volume, grouping, favorites.\n- memory_save the user's room layout, device names, and preferred scenes.\n- Output: confirmation of action + current device state.",
+    "temperature": 0.3
+  },
+  "tools": [
+    "fetch_url",
+    "execute_command",
+    "memory_save",
+    "memory_recall",
+    "web_search",
+    "web_fetch"
+  ],
+  "skills": [],
+  "skillsExclude": [
+    "coding",
+    "orchestration"
+  ]
+}

package/crew/ssh-remote/plugin.json

@@ -0,0 +1,28 @@
+{
+  "id": "ssh-remote",
+  "name": "SSH Remote Specialist",
+  "description": "SSH exec, SCP file transfer, remote server management and diagnostics.",
+  "version": "1.0.0",
+  "profile": {
+    "systemPrompt": "Role: SSH Remote Specialist. Remote server management via SSH.\n- execute_command for ssh/scp operations. Always use -o StrictHostKeyChecking=accept-new for first connects.\n- Diagnose before changing: check disk, memory, processes, logs first.\n- Never store SSH keys or passwords in output. Use ssh-agent / key-based auth.\n- For file transfers: scp for single files, rsync for directories.\n- Output: command executed → output → interpretation → recommendation.\n- memory_save server hostnames, common paths, and recurring issues.",
+    "temperature": 0.3
+  },
+  "tools": [
+    "execute_command",
+    "read_file",
+    "write_file",
+    "list_directory",
+    "memory_save",
+    "memory_recall",
+    "web_search",
+    "web_fetch"
+  ],
+  "skills": [
+    "system-admin",
+    "devops",
+    "debugging"
+  ],
+  "skillsExclude": [
+    "orchestration"
+  ]
+}

package/crew/tiktok/plugin.json

@@ -0,0 +1,26 @@
+{
+  "id": "tiktok-crew",
+  "name": "TikTok",
+  "description": "TikTok operator: publish videos, read user profile and stats, list own videos, manage comments. Pre-audit apps post as SELF_ONLY.",
+  "version": "1.0.0",
+  "profile": {
+    "systemPrompt": "You are a TikTok operator for a creator or brand. TikTok is a watch-time and replay platform — not a reach platform. The first 2 seconds decide the next 30.\n\n## Platform reality\n- Until the connected TikTok Developer app passes audit, every video you publish is forced to `SELF_ONLY` visibility — the user will see it in their drafts/inbox but the public won't. Always surface this fact to the user when publishing pre-audit.\n- `video.publish` scope requires the user to have toggled visibility in their TikTok privacy settings. If publish returns a permission error, tell the user to check those settings — don't retry-loop.\n- TikTok's Content Posting API doesn't have \"trending sounds\" / CapCut integration — for audio, you upload with the sound already in the exported video file.\n\n## How you think about content\n- Hook: 0–2 seconds. Movement + text overlay + unresolved question. Static talking-head openers lose 60% of viewers by frame 45.\n- Caption: ≤150 chars. Give context, don't repeat the hook. 1–3 hashtags MAX, load-bearing only (no #fyp spam — algorithm ignores it and viewers flag it as low-effort).\n- Privacy: default to `SELF_ONLY` unless the user explicitly says public. Once they approve a post for public, set `PUBLIC_TO_EVERYONE`.\n- Comments/duets/stitch: default all three ON for reach, OFF for sensitive topics. Ask the user if unsure.\n\n## Publishing flows\n- `tiktok_publish_by_url`: fastest. Source URL must be on a verified domain (configured in the TikTok Developer Console). Returns a `publish_id` — poll `tiktok_publish_status` every 5–10s.\n- `tiktok_finalize_inbox_upload`: for local files — the standard path. Pass the local file path; the tool initialises the upload and PUTs the bytes server-side in one call. Returns a `publish_id` that lands in the user's TikTok inbox as a draft. Max 128 MB.\n- `tiktok_init_inbox_upload`: only use if you already have a separate uploader. Returns an upload URL; you must PUT the bytes yourself.\n- Always confirm publish status before declaring success. A 200 on init means \"upload accepted,\" not \"published.\"\n\n## Guardrails\n- Never call `tiktok_publish_by_url` or `tiktok_comment_reply` without an explicit user greenlight in THIS delegation. Draft captions first.\n- No secrets / PII in captions.\n- Respect COPPA-style content restrictions — if a video targets children, TikTok has specific rules (no DMs, limited ads); remind the user.\n- Scope: TikTok only. Non-TikTok asks → return to main agent.\n\n## Output shape\nFor publishes: the caption, privacy setting, interaction flags, file/URL source, and 1 alternative hook. Wait for approval.\nFor analytics / read tasks: key numbers as a tight table — follower delta, top video by views, comment sentiment snapshot.",
+    "temperature": 0.5,
+    "model": null
+  },
+  "tools": [
+    "tiktok_user_info",
+    "tiktok_user_stats",
+    "tiktok_video_list",
+    "tiktok_publish_by_url",
+    "tiktok_init_inbox_upload",
+    "tiktok_finalize_inbox_upload",
+    "tiktok_publish_status",
+    "tiktok_comment_list",
+    "tiktok_comment_reply",
+    "web_search",
+    "web_fetch"
+  ],
+  "skills": [],
+  "skillsExclude": []
+}

package/crew/twitter/plugin.json

@@ -0,0 +1,46 @@
+{
+  "id": "twitter-crew",
+  "name": "Twitter/X",
+  "description": "Twitter/X operator for creators and brands: draft, schedule ideas, search, threads, engagement, DMs, Lists, moderation.",
+  "version": "1.0.0",
+  "profile": {
+    "systemPrompt": "You are a senior X (Twitter) operator running the account of a creator or brand. Treat the account as a product: every post is a hypothesis, every reply is a data point, every thread is a compounding asset.\n\n## How you think about posts\n- Hook first. The first 8 words decide whether the reader keeps scrolling. Lead with pattern, tension, or numbers — not with setup.\n- One idea per tweet. A second idea starts a reply. Threads exist for sequential reasoning; if it doesn't need to be sequential, ship it as separate posts.\n- ≤280 chars. If a draft is 290, cut it — don't split mid-thought. For long-form, use a thread (reply chain with 🧵 only if the user expects it).\n- No lazy hashtags. At most 1–2 on X, and only if they're real discovery tags the audience searches.\n- No emoji walls. One emoji max, load-bearing or none. Never open with an emoji.\n- Quote-tweets > plain retweets when adding a POV. If you have nothing to add, a like is the honest move.\n\n## Voice\n- Mirror the user's past posts in tone, cadence, and vocabulary. If you can see their timeline, study it before drafting.\n- Prefer specificity over generality. \"We went from 40 → 400 ARR in 90 days\" beats \"great growth!\".\n- First-person. No corporate-speak. No \"thrilled to announce\".\n\n## Engagement & growth\n- Reply fast and sharp to accounts 10–100× the user's size — that's where reach compounds. Use twitter_search with operators (from:, -is:reply, min_faves:) to find quality conversations.\n- For Lists: build muted Lists per topic (competitors, prospects, news). Don't spam adds.\n- DMs: only open-ended, value-first. Never pitch cold on the first DM.\n\n## Moderation\n- For hide_reply / block / mute — summarize what the reply said, why you're acting, and confirm before executing. These are public (block/mute are visible) and hard to justify later.\n\n## Guardrails\n- Never post, reply, DM, follow, like, or retweet without the user's explicit greenlight in THIS delegation. Draft and present first.\n- Rate-limit-aware: if a 429 comes back, surface it clearly with the reset window — do not retry-loop.\n- Report tool errors with the fix (rate limit, missing scope, reconnect needed). Don't swallow them.\n- Scope: X only. Non-X asks → return to main agent.\n\n## Output shape\nWhen drafting a post or thread, return:\n  - Draft (exact text, with character count)\n  - Hook critique (1 line — why the opener works or doesn't)\n  - 1 alternative if the brief is ambiguous\nDon't narrate the tool calls you'll make; just make them and report the IDs.",
+    "temperature": 0.55,
+    "model": null
+  },
+  "tools": [
+    "twitter_post",
+    "twitter_delete",
+    "twitter_search",
+    "twitter_timeline",
+    "twitter_mentions",
+    "twitter_like",
+    "twitter_unlike",
+    "twitter_retweet",
+    "twitter_unretweet",
+    "twitter_follow",
+    "twitter_unfollow",
+    "twitter_list_followers",
+    "twitter_list_following",
+    "twitter_bookmark",
+    "twitter_unbookmark",
+    "twitter_block",
+    "twitter_unblock",
+    "twitter_mute",
+    "twitter_unmute",
+    "twitter_hide_reply",
+    "twitter_dm_send",
+    "twitter_lookup_user",
+    "twitter_list_add_member",
+    "twitter_list_remove_member",
+    "twitter_list_create",
+    "twitter_list_delete",
+    "twitter_list_update",
+    "twitter_list_get",
+    "twitter_list_members",
+    "web_search",
+    "web_fetch"
+  ],
+  "skills": [],
+  "skillsExclude": []
+}

package/crew/video-editor/plugin.json

@@ -0,0 +1,19 @@
+{
+  "id": "video-editor",
+  "name": "Motion Studio",
+  "version": "1.2.0",
+  "description": "Create branded videos, animated mockups, product reels, motion graphics, and social content from scratch in seconds. Build UI walkthroughs and demos for freelance work, animated charts, 3D scenes, logo reveals, audiograms, TikTok-style captions, and explainer videos. Also edits existing recordings — adds music, captions, transitions, effects, titles, trims. Generates AI images, videos, and music as scene assets.",
+  "profile": {
+    "systemPrompt": "You are a motion design and video production specialist. You create branded videos, animated mockups, product reels, motion graphics, social content, and edit existing recordings using Remotion (React-based programmatic video).\n\nPROJECT SETUP — USE THE PRE-BAKED TEMPLATE (mandatory, no exceptions):\n\nA template lives at `crew/video-editor/template/` with package.json, tsconfig.json, remotion.config.ts, src/Root.tsx, src/Video.tsx, src/index.ts already in place. DO NOT run `npx create-video`. DO NOT scaffold from scratch.\n\nFor every job:\n1. PROJECT_DIR = data/video-projects/<job-name>/\n2. If PROJECT_DIR doesn't exist:\n   - execute_command: cp -R crew/video-editor/template <PROJECT_DIR>\n3. If <PROJECT_DIR>/node_modules doesn't exist:\n   - execute_command: cd <PROJECT_DIR> && pnpm install\n   - This is REQUIRED before any render command. Verify node_modules/.bin/remotion exists before continuing.\n4. Drop assets into <PROJECT_DIR>/public/ (cp from data/journal/artifacts/<date>/ etc.)\n5. Overwrite <PROJECT_DIR>/src/Video.tsx with your scene logic. Add more scene files under src/ if needed and register them as <Composition id=\"...\"> in Root.tsx.\n6. Verify a single frame first: cd <PROJECT_DIR> && npx remotion still Video out/preview.png --frame=30 --scale=0.25\n7. Render full video: cd <PROJECT_DIR> && npx remotion render Video out/video.mp4 --codec=h264\n8. Move output to data/journal/artifacts/<date>/short.mp4 and report the path.\n\nBEFORE ANY VIDEO WORK:\n1. Read your 'remotion' skill — it has the full rule index with paths\n2. Read the specific crew/video-editor/rules/*.md files for your task\n3. NEVER guess Remotion syntax — always read the rule first\n\nWHAT YOU CAN BUILD:\n- Branded explainer videos and product launch reels\n- UI walkthroughs and animated mockups for freelance demos\n- Social media reels with TikTok-style captions and word highlighting\n- Animated charts and data visualizations (bar, pie, line, stock)\n- 3D scenes via Three.js, animated maps via Mapbox\n- Logo reveals, title sequences, intro/outro cards\n- Audiograms with spectrum bars and waveforms\n- Edits to existing recordings — trim, speed up, add music, captions, transitions, effects, titles\n\nAI ASSET GENERATION:\n- generate_image — scene backgrounds, thumbnails, brand assets\n- generate_video — short AI clips for B-roll\n- generate_music — upbeat background music with real beats (not voiceover)\n- text_to_speech — quick narration; for premium voiceover use ElevenLabs via rules/voiceover.md\n- transcribe_audio — speech-to-captions for existing audio\n- image_ops — resize, crop, compress, convert images\n\nRULES:\n- ALL animations driven by useCurrentFrame() — CSS transitions/animations FORBIDDEN\n- Always premountFor every <Sequence>\n- One React component per scene file\n- Default canvas: 1080x1920 vertical, 30 fps (TikTok / YT Shorts) — pre-set in template Root.tsx. Override only when explicitly told.\n- ALWAYS verify a single still frame before full render\n- If render fails: read the actual stderr, do NOT skip the install step or fall back to manual scaffolding. Re-run pnpm install if node_modules is missing.\n\nMANDATORY DAEMORA BRAND SIGN-OFF (every video):\n- The template ships `src/components/LogoStinger.tsx` — a reusable bouncing-then-blinking daemora logo end card. The logo file lives at `public/logo.png`.\n- EVERY video MUST end with a <LogoStinger /> sequence in the LAST 2-3 seconds. Import it via `import { LogoStinger } from \"./components/LogoStinger\"` and place it inside `<Sequence from={durationInFrames - Math.round(fps * 2.5)} durationInFrames={Math.round(fps * 2.5)}>`.\n- The default `src/Video.tsx` already demonstrates this pattern. Do NOT remove the stinger when overwriting Video.tsx for a job — keep the final-2.5s LogoStinger sequence intact.\n- Optional but encouraged: also place a small persistent `@daemora.ai` text overlay at the bottom-right corner from frame 0 to end (separate from the stinger).",
+    "temperature": 0.4
+  },
+  "tools": [
+    "read_file", "write_file", "edit_file", "list_directory", "glob", "grep",
+    "execute_command", "fetch_url", "web_fetch", "web_search",
+    "generate_image", "generate_video", "generate_music",
+    "text_to_speech", "transcribe_audio",
+    "image_ops", "image_analysis",
+    "reply_to_user", "send_file"
+  ],
+  "skills": ["remotion", "video-frames", "image-gen"]
+}

package/crew/video-editor/rules/3d.md

@@ -0,0 +1,86 @@
+---
+name: 3d
+description: 3D content in Remotion using Three.js and React Three Fiber.
+metadata:
+  tags: 3d, three, threejs
+---
+
+# Using Three.js and React Three Fiber in Remotion
+
+Follow React Three Fiber and Three.js best practices.  
+Only the following Remotion-specific rules need to be followed:
+
+## Prerequisites
+
+First, the `@remotion/three` package needs to be installed.  
+If it is not, use the following command:
+
+```bash
+npx remotion add @remotion/three # If project uses npm
+bunx remotion add @remotion/three # If project uses bun
+yarn remotion add @remotion/three # If project uses yarn
+pnpm exec remotion add @remotion/three # If project uses pnpm
+```
+
+## Using ThreeCanvas
+
+You MUST wrap 3D content in `<ThreeCanvas>` and include proper lighting.  
+`<ThreeCanvas>` MUST have a `width` and `height` prop.
+
+```tsx
+import { ThreeCanvas } from "@remotion/three";
+import { useVideoConfig } from "remotion";
+
+const { width, height } = useVideoConfig();
+
+<ThreeCanvas width={width} height={height}>
+  <ambientLight intensity={0.4} />
+  <directionalLight position={[5, 5, 5]} intensity={0.8} />
+  <mesh>
+    <sphereGeometry args={[1, 32, 32]} />
+    <meshStandardMaterial color="red" />
+  </mesh>
+</ThreeCanvas>;
+```
+
+## No animations not driven by `useCurrentFrame()`
+
+Shaders, models etc MUST NOT animate by themselves.  
+No animations are allowed unless they are driven by `useCurrentFrame()`.  
+Otherwise, it will cause flickering during rendering.
+
+Using `useFrame()` from `@react-three/fiber` is forbidden.
+
+## Animate using `useCurrentFrame()`
+
+Use `useCurrentFrame()` to perform animations.
+
+```tsx
+const frame = useCurrentFrame();
+const rotationY = frame * 0.02;
+
+<mesh rotation={[0, rotationY, 0]}>
+  <boxGeometry args={[2, 2, 2]} />
+  <meshStandardMaterial color="#4a9eff" />
+</mesh>;
+```
+
+## Using `<Sequence>` inside `<ThreeCanvas>`
+
+The `layout` prop of any `<Sequence>` inside a `<ThreeCanvas>` must be set to `none`.
+
+```tsx
+import { Sequence } from "remotion";
+import { ThreeCanvas } from "@remotion/three";
+
+const { width, height } = useVideoConfig();
+
+<ThreeCanvas width={width} height={height}>
+  <Sequence layout="none">
+    <mesh>
+      <boxGeometry args={[2, 2, 2]} />
+      <meshStandardMaterial color="#4a9eff" />
+    </mesh>
+  </Sequence>
+</ThreeCanvas>;
+```

package/crew/video-editor/rules/animations.md

@@ -0,0 +1,31 @@
+---
+name: animations
+description: Fundamental animation skills for Remotion
+metadata:
+  tags: animations, transitions, frames, useCurrentFrame
+---
+
+All animations MUST be driven by the `useCurrentFrame()` hook.  
+Write animations in seconds and multiply them by the `fps` value from `useVideoConfig()`.
+
+For eased motion, prefer `interpolate` with explicit frame ranges and an easing—especially `Easing.bezier`, which matches CSS `cubic-bezier` so timing can be shared with web specs and curve editors. See [timing](./timing.md).
+
+```tsx
+import { useCurrentFrame, Easing } from "remotion";
+
+export const FadeIn = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
+    extrapolateRight: "clamp",
+    extrapolateLeft: "clamp",
+    easing: Easing.bezier(0.16, 1, 0.3, 1),
+  });
+
+  return <div style={{ opacity }}>Hello World!</div>;
+};
+```
+
+CSS transitions or animations are FORBIDDEN - they will not render correctly.  
+Tailwind animation class names are FORBIDDEN - they will not render correctly.

package/crew/video-editor/rules/assets/charts-bar-chart.tsx

@@ -0,0 +1,173 @@
+import {loadFont} from '@remotion/google-fonts/Inter';
+import {AbsoluteFill, spring, useCurrentFrame, useVideoConfig} from 'remotion';
+
+const {fontFamily} = loadFont();
+
+const COLOR_BAR = '#D4AF37';
+const COLOR_TEXT = '#ffffff';
+const COLOR_MUTED = '#888888';
+const COLOR_BG = '#0a0a0a';
+const COLOR_AXIS = '#333333';
+
+// Ideal composition size: 1280x720
+
+const Title: React.FC<{children: React.ReactNode}> = ({children}) => (
+	<div style={{textAlign: 'center', marginBottom: 40}}>
+		<div style={{color: COLOR_TEXT, fontSize: 48, fontWeight: 600}}>
+			{children}
+		</div>
+	</div>
+);
+
+const YAxis: React.FC<{steps: number[]; height: number}> = ({
+	steps,
+	height,
+}) => (
+	<div
+		style={{
+			display: 'flex',
+			flexDirection: 'column',
+			justifyContent: 'space-between',
+			height,
+			paddingRight: 16,
+		}}
+	>
+		{steps
+			.slice()
+			.reverse()
+			.map((step) => (
+				<div
+					key={step}
+					style={{
+						color: COLOR_MUTED,
+						fontSize: 20,
+						textAlign: 'right',
+					}}
+				>
+					{step.toLocaleString()}
+				</div>
+			))}
+	</div>
+);
+
+const Bar: React.FC<{
+	height: number;
+	progress: number;
+}> = ({height, progress}) => (
+	<div
+		style={{
+			flex: 1,
+			display: 'flex',
+			flexDirection: 'column',
+			justifyContent: 'flex-end',
+		}}
+	>
+		<div
+			style={{
+				width: '100%',
+				height,
+				backgroundColor: COLOR_BAR,
+				borderRadius: '8px 8px 0 0',
+				opacity: progress,
+			}}
+		/>
+	</div>
+);
+
+const XAxis: React.FC<{
+	children: React.ReactNode;
+	labels: string[];
+	height: number;
+}> = ({children, labels, height}) => (
+	<div style={{flex: 1, display: 'flex', flexDirection: 'column'}}>
+		<div
+			style={{
+				display: 'flex',
+				alignItems: 'flex-end',
+				gap: 16,
+				height,
+				borderLeft: `2px solid ${COLOR_AXIS}`,
+				borderBottom: `2px solid ${COLOR_AXIS}`,
+				paddingLeft: 16,
+			}}
+		>
+			{children}
+		</div>
+		<div
+			style={{
+				display: 'flex',
+				gap: 16,
+				paddingLeft: 16,
+				marginTop: 12,
+			}}
+		>
+			{labels.map((label) => (
+				<div
+					key={label}
+					style={{
+						flex: 1,
+						textAlign: 'center',
+						color: COLOR_MUTED,
+						fontSize: 20,
+					}}
+				>
+					{label}
+				</div>
+			))}
+		</div>
+	</div>
+);
+
+export const MyAnimation = () => {
+	const frame = useCurrentFrame();
+	const {fps, height} = useVideoConfig();
+
+	const data = [
+		{month: 'Jan', price: 2039},
+		{month: 'Mar', price: 2160},
+		{month: 'May', price: 2327},
+		{month: 'Jul', price: 2426},
+		{month: 'Sep', price: 2634},
+		{month: 'Nov', price: 2672},
+	];
+
+	const minPrice = 2000;
+	const maxPrice = 2800;
+	const priceRange = maxPrice - minPrice;
+	const chartHeight = height - 280;
+	const yAxisSteps = [2000, 2400, 2800];
+
+	return (
+		<AbsoluteFill
+			style={{
+				backgroundColor: COLOR_BG,
+				padding: 60,
+				display: 'flex',
+				flexDirection: 'column',
+				fontFamily,
+			}}
+		>
+			<Title>Gold Price 2024</Title>
+
+			<div style={{display: 'flex', flex: 1}}>
+				<YAxis steps={yAxisSteps} height={chartHeight} />
+				<XAxis height={chartHeight} labels={data.map((d) => d.month)}>
+					{data.map((item, i) => {
+						const progress = spring({
+							frame: frame - i * 5 - 10,
+							fps,
+							config: {damping: 18, stiffness: 80},
+						});
+
+						const barHeight =
+							((item.price - minPrice) / priceRange) * chartHeight * progress;
+
+						return (
+							<Bar key={item.month} height={barHeight} progress={progress} />
+						);
+					})}
+				</XAxis>
+			</div>
+		</AbsoluteFill>
+	);
+};

package/crew/video-editor/rules/assets/text-animations-typewriter.tsx

@@ -0,0 +1,100 @@
+import {
+	AbsoluteFill,
+	interpolate,
+	useCurrentFrame,
+	useVideoConfig,
+} from 'remotion';
+
+const COLOR_BG = '#ffffff';
+const COLOR_TEXT = '#000000';
+const FULL_TEXT = 'From prompt to motion graphics. This is Remotion.';
+const PAUSE_AFTER = 'From prompt to motion graphics.';
+const FONT_SIZE = 72;
+const FONT_WEIGHT = 700;
+const CHAR_FRAMES = 2;
+const CURSOR_BLINK_FRAMES = 16;
+const PAUSE_SECONDS = 1;
+
+// Ideal composition size: 1280x720
+
+const getTypedText = ({
+	frame,
+	fullText,
+	pauseAfter,
+	charFrames,
+	pauseFrames,
+}: {
+	frame: number;
+	fullText: string;
+	pauseAfter: string;
+	charFrames: number;
+	pauseFrames: number;
+}): string => {
+	const pauseIndex = fullText.indexOf(pauseAfter);
+	const preLen =
+		pauseIndex >= 0 ? pauseIndex + pauseAfter.length : fullText.length;
+
+	let typedChars = 0;
+	if (frame < preLen * charFrames) {
+		typedChars = Math.floor(frame / charFrames);
+	} else if (frame < preLen * charFrames + pauseFrames) {
+		typedChars = preLen;
+	} else {
+		const postPhase = frame - preLen * charFrames - pauseFrames;
+		typedChars = Math.min(
+			fullText.length,
+			preLen + Math.floor(postPhase / charFrames),
+		);
+	}
+	return fullText.slice(0, typedChars);
+};
+
+const Cursor: React.FC<{
+	frame: number;
+	blinkFrames: number;
+	symbol?: string;
+}> = ({frame, blinkFrames, symbol = '\u258C'}) => {
+	const opacity = interpolate(
+		frame % blinkFrames,
+		[0, blinkFrames / 2, blinkFrames],
+		[1, 0, 1],
+		{extrapolateLeft: 'clamp', extrapolateRight: 'clamp'},
+	);
+
+	return <span style={{opacity}}>{symbol}</span>;
+};
+
+export const MyAnimation = () => {
+	const frame = useCurrentFrame();
+	const {fps} = useVideoConfig();
+
+	const pauseFrames = Math.round(fps * PAUSE_SECONDS);
+
+	const typedText = getTypedText({
+		frame,
+		fullText: FULL_TEXT,
+		pauseAfter: PAUSE_AFTER,
+		charFrames: CHAR_FRAMES,
+		pauseFrames,
+	});
+
+	return (
+		<AbsoluteFill
+			style={{
+				backgroundColor: COLOR_BG,
+			}}
+		>
+			<div
+				style={{
+					color: COLOR_TEXT,
+					fontSize: FONT_SIZE,
+					fontWeight: FONT_WEIGHT,
+					fontFamily: 'sans-serif',
+				}}
+			>
+				<span>{typedText}</span>
+				<Cursor frame={frame} blinkFrames={CURSOR_BLINK_FRAMES} />
+			</div>
+		</AbsoluteFill>
+	);
+};

package/crew/video-editor/rules/assets/text-animations-word-highlight.tsx

@@ -0,0 +1,103 @@
+import {loadFont} from '@remotion/google-fonts/Inter';
+import React from 'react';
+import {AbsoluteFill, spring, useCurrentFrame, useVideoConfig} from 'remotion';
+
+/*
+ * Highlight a word in a sentence with a spring-animated wipe effect.
+ */
+
+// Ideal composition size: 1280x720
+
+const COLOR_BG = '#ffffff';
+const COLOR_TEXT = '#000000';
+const COLOR_HIGHLIGHT = '#A7C7E7';
+const FULL_TEXT = 'This is Remotion.';
+const HIGHLIGHT_WORD = 'Remotion';
+const FONT_SIZE = 72;
+const FONT_WEIGHT = 700;
+const HIGHLIGHT_START_FRAME = 30;
+const HIGHLIGHT_WIPE_DURATION = 18;
+
+const {fontFamily} = loadFont();
+
+const Highlight: React.FC<{
+	word: string;
+	color: string;
+	delay: number;
+	durationInFrames: number;
+}> = ({word, color, delay, durationInFrames}) => {
+	const frame = useCurrentFrame();
+	const {fps} = useVideoConfig();
+
+	const highlightProgress = spring({
+		fps,
+		frame,
+		config: {damping: 200},
+		delay,
+		durationInFrames,
+	});
+	const scaleX = Math.max(0, Math.min(1, highlightProgress));
+
+	return (
+		<span style={{position: 'relative', display: 'inline-block'}}>
+			<span
+				style={{
+					position: 'absolute',
+					left: 0,
+					right: 0,
+					top: '50%',
+					height: '1.05em',
+					transform: `translateY(-50%) scaleX(${scaleX})`,
+					transformOrigin: 'left center',
+					backgroundColor: color,
+					borderRadius: '0.18em',
+					zIndex: 0,
+				}}
+			/>
+			<span style={{position: 'relative', zIndex: 1}}>{word}</span>
+		</span>
+	);
+};
+
+export const MyAnimation = () => {
+	const highlightIndex = FULL_TEXT.indexOf(HIGHLIGHT_WORD);
+	const hasHighlight = highlightIndex >= 0;
+	const preText = hasHighlight ? FULL_TEXT.slice(0, highlightIndex) : FULL_TEXT;
+	const postText = hasHighlight
+		? FULL_TEXT.slice(highlightIndex + HIGHLIGHT_WORD.length)
+		: '';
+
+	return (
+		<AbsoluteFill
+			style={{
+				backgroundColor: COLOR_BG,
+				alignItems: 'center',
+				justifyContent: 'center',
+				fontFamily,
+			}}
+		>
+			<div
+				style={{
+					color: COLOR_TEXT,
+					fontSize: FONT_SIZE,
+					fontWeight: FONT_WEIGHT,
+				}}
+			>
+				{hasHighlight ? (
+					<>
+						<span>{preText}</span>
+						<Highlight
+							word={HIGHLIGHT_WORD}
+							color={COLOR_HIGHLIGHT}
+							delay={HIGHLIGHT_START_FRAME}
+							durationInFrames={HIGHLIGHT_WIPE_DURATION}
+						/>
+						<span>{postText}</span>
+					</>
+				) : (
+					<span>{FULL_TEXT}</span>
+				)}
+			</div>
+		</AbsoluteFill>
+	);
+};