{"id":"5f54fe42-799a-4506-8d15-04ac8fee19ad","entityType":"agent","slug":"clawhub-unknown-remotion-video-generator","name":"Remotion Video Generator","canonicalUrl":"https://www.xpersona.co/agent/clawhub-unknown-remotion-video-generator","canonicalPath":"/agent/clawhub-unknown-remotion-video-generator","generatedAt":"2026-10-10T04:38:45.074Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-09T22:37:28.033Z","emptyReason":null},"description":"AI video production workflow using Remotion. Use when creating videos, short films, commercials, or motion graphics. Triggers on requests to make promotional... Skill: Remotion Video Generator Summary: AI video production workflow using Remotion. Use when creating videos, short films, commercials, or motion graphics. Triggers on requests to make promotional... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-02-25T14:20:06.194Z | auto remotion-video-generator v1.0.0 - Initial release of programmatic video generation workflow using Remotion and React. - Firecrawl replaced wi","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1.9K downloads reported by the source. Last updated 10/9/2026.","installCommand":"clawhub skill install unknown:remotion-video-generator","sourceUrl":"https://clawhub.ai/unknown/remotion-video-generator","homepage":"https://clawhub.ai/unknown/skills/remotion-video-generator","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/unknown/remotion-video-generator","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/unknown/skills/remotion-video-generator","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":66,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"AI video production workflow using Remotion. Use when creating videos, short films, commercials, or motion graphics. Triggers on requests to make promotional..."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-09T22:37:28.033Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-09T22:37:28.033Z","emptyReason":null},"stars":null,"forks":null,"downloads":1933,"packageName":null,"latestVersion":"1.0.0","tractionLabel":"1.9K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-09T22:37:28.008Z","emptyReason":null},"lastUpdatedAt":"2026-10-09T22:37:28.033Z","lastCrawledAt":"2026-10-09T22:37:28.008Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-10T22:37:28.008Z","lastVerifiedAt":null,"highlights":[{"version":"1.0.0","createdAt":"2026-02-25T14:20:06.194Z","changelog":"remotion-video-generator v1.0.0 - Initial release of programmatic video generation workflow using Remotion and React. - Firecrawl replaced with Scrapling for brand data extraction. - Provides detailed step-by-step guide for setting up, building scenes, and rendering videos. - Includes troubleshooting tips for Remotion v4 API, with required scripts and usage instructions. - Supports creation of promotional, demo, social, and animated explainer videos with studio-quality motion graphics.","fileCount":7,"zipByteSize":15196}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install unknown:remotion-video-generator","setupComplexity":"low","setupSteps":["Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-unknown-remotion-video-generator/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-unknown-remotion-video-generator/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-unknown-remotion-video-generator/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-unknown-remotion-video-generator/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-unknown-remotion-video-generator/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-unknown-remotion-video-generator/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-10T04:38:45.073Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-unknown-remotion-video-generator/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-unknown-remotion-video-generator/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-unknown-remotion-video-generator/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-unknown-remotion-video-generator/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-09T22:37:28.033Z","emptyReason":null},"readme":"Skill: Remotion Video Generator\n\nSummary: AI video production workflow using Remotion. Use when creating videos, short films, commercials, or motion graphics. Triggers on requests to make promotional...\n\nTags: latest:1.0.0\n\nVersion history:\n\nv1.0.0 | 2026-02-25T14:20:06.194Z | auto\n\nremotion-video-generator v1.0.0\n\n- Initial release of programmatic video generation workflow using Remotion and React.\n- Firecrawl replaced with Scrapling for brand data extraction.\n- Provides detailed step-by-step guide for setting up, building scenes, and rendering videos.\n- Includes troubleshooting tips for Remotion v4 API, with required scripts and usage instructions.\n- Supports creation of promotional, demo, social, and animated explainer videos with studio-quality motion graphics.\n\nArchive index:\n\nArchive v1.0.0: 7 files, 15196 bytes\n\nFiles: references/components.md (5034b), references/composition-patterns.md (4454b), scripts/remotion.sh (1627b), scripts/scrapling.sh (3749b), skill-card.md (3055b), SKILL.md (18943b), _meta.json (143b)\n\nFile v1.0.0:SKILL.md\n\n---\nname: remotion-video-generator\ndescription: AI video production workflow using Remotion. Use when creating videos, short films, commercials, or motion graphics. Triggers on requests to make promotional videos, product demos, social media videos, animated explainers, or any programmatic video content. Produces polished motion graphics, not slideshows.\nversion: \"1.0.0\"\nmetadata: {\"openclaw\":{\"emoji\":\"š¬\",\"requires\":{\"bins\":[\"node\",\"npm\",\"python3\"]}, \"tags\":[\"video\", \"remotion\", \"motion-graphics\", \"production\"]}}\n---\n\n# Remotion Video Generator\n\n> \"Create professional motion graphics videos programmatically with React and Remotion.\"\n\n---\n\n## Credits & References\n\n### Original Skill\n- **Source:** [Superskills - Video Generator (Remotion)](https://superskills.vibecode.run/)\n- **Author:** Riley Brown / VibeCode Community\n\n### Modifications\n- **Firecrawl replaced with Scrapling** for brand data extraction\n- Uses Python `scrapling` library instead of Firecrawl API\n- Added comprehensive troubleshooting for Remotion v4 API\n\n### Core Technologies\n- **Remotion:** https://www.remotion.dev/\n- **Scrapling:** https://github.com/D4Vinci/Scrapling\n- **React:** https://react.dev/\n\n### Tested With\n- OpenClaw promotional video - successfully rendered! š\n\n---\n\n## Quick Usage Guide (Step-by-Step)\n\n### Step 1: Scrape Brand Data\n```bash\n# Run the scrapling script to get brand colors, logo, tagline\nbash skills/remotion-video-generator/scripts/scrapling.sh \"https://brand-website.com\"\n```\n\nThis extracts: brandName, tagline, logoUrl, faviconUrl, primaryColors, ogImageUrl, screenshotUrl\n\n### Step 2: Download Brand Assets\n```bash\nmkdir -p public/images/brand\ncurl -sL \"https://brand.com/logo.svg\" -o public/images/brand/logo.svg\ncurl -sL \"https://brand.com/og-image.png\" -o public/images/brand/og-image.png\ncurl -sL \"https://image.thum.io/get/width/1200/crop/800/https://brand.com\" -o screenshot.png\n```\n\n### Step 3: Create Project Structure\n```bash\nmkdir -p my-video/src my-video/public/images/brand my-video/public/audio\n```\n\n### Step 4: Create package.json\n```json\n{\n \"name\": \"my-video\",\n \"scripts\": {\n \"dev\": \"npx remotion studio\",\n \"build\": \"npx remotion bundle\"\n },\n \"dependencies\": {\n \"@remotion/cli\": \"^4.0.0\",\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\",\n \"remotion\": \"^4.0.0\",\n \"lucide-react\": \"^0.300.0\"\n }\n}\n```\n\n### Step 5: Install Dependencies\n```bash\ncd my-video && npm install\n```\n\n### Step 6: Create Video Component\nCreate `src/MyVideo.tsx` with:\n- AbsoluteFill for full-screen layout\n- Sequence components for scene timing\n- useCurrentFrame, useVideoConfig, interpolate, spring for animations\n\n### Step 7: Create Entry Point (Remotion v4 API)\nCreate `src/index.tsx` - **MUST use `.tsx` extension**:\n\n```tsx\nimport { registerRoot, Composition } from \"remotion\";\nimport { AbsoluteFill, Sequence, useCurrentFrame, useVideoConfig, interpolate, spring } from \"remotion\";\n\nconst MyVideo = () => {\n const frame = useCurrentFrame();\n const { fps } = useVideoConfig();\n\n // Animations - ALWAYS pass fps to spring()\n const scale = spring({ frame, fps, from: 0.8, to: 1 });\n\n return (\n \n \n
Hello World
\n \n \n );\n};\n\nregisterRoot(() => {\n return (\n \n );\n});\n```\n\n**ā ļø CRITICAL Remotion v4 Rules:**\n1. Use `.tsx` extension (NOT `.ts`) for files with JSX\n2. MUST use `registerRoot` + `Composition` API\n3. ALWAYS pass `fps` to `spring()`: `spring({ frame, fps, from: 0.8, to: 1 })`\n4. Use `useVideoConfig()` to get fps: `const { fps } = useVideoConfig()`\n5. Render with composition name: `npx remotion render MyVideo out/video.mp4`\n\n### Step 8: Start Dev Server\n```bash\ncd my-video && npm run dev\n```\nServer runs on http://localhost:3000\n\n### Step 9: Preview & Iterate\n- Open browser to preview\n- Edit source files - hot-reloads automatically\n- User reviews and requests changes\n\n### Step 10: Render Final Video (when user asks)\n```bash\nnpx remotion render index out/final-video.mp4\n```\n\n---\n\n## Credits\n\n- **Original Skill:** https://superskills.vibecode.run/\n- **Modified:** Firecrawl replaced with Scrapling for brand data extraction\n- **Remotion:** https://www.remotion.dev/\n\n---\n\n## Installation\n\n```bash\n# Install Remotion globally\nnpm install -g remotion\n\n# Install dependencies for video projects\nnpm install lucide-react\n\n# Install Scrapling (already in workspace skills)\npip install scrapling\n```\n\n---\n\n## Agent Instructions\n\n### When to Use Video Generator\n\n**Use this skill when:**\n- Creating promotional videos\n- Making product demos\n- Social media video content\n- Animated explainers\n- Commercials\n- Any programmatic video content\n\n**Do NOT use for:**\n- Simple slideshows (use other tools)\n- Video editing of existing footage\n- Live streaming\n\n---\n\n## Default Workflow (ALWAYS follow this)\n\n1. **Scrape brand data** (if featuring a product) using **Scrapling** (NOT Firecrawl)\n2. **Create the project** in `output//`\n3. **Build all scenes** with proper motion graphics\n4. **Install dependencies** with `npm install`\n5. **Fix package.json scripts** to use `npx remotion` (not bun):\n ```json\n \"scripts\": {\n \"dev\": \"npx remotion studio\",\n \"build\": \"npx remotion bundle\"\n }\n ```\n6. **Start Remotion Studio** as a background process:\n ```bash\n cd output/ && npm run dev\n ```\n7. **Expose via Cloudflare tunnel** so user can access:\n ```bash\n bash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000\n ```\n8. **Send the user the public URL** (e.g. `https://xxx.trycloudflare.com`)\n\nThe user will preview in their browser, request changes, and you edit the source files. Remotion hot-reloads automatically.\n\n---\n\n## Rendering (only when user explicitly asks to export)\n\n```bash\ncd output/\nnpx remotion render CompositionName out/video.mp4\n```\n\n---\n\n## Quick Start\n\n```bash\n# Scaffold project\ncd output && npx --yes create-video@latest my-video --template blank\ncd my-video && npm install\n\n# Add motion libraries\nnpm install lucide-react\n\n# Fix scripts in package.json (replace any \"bun\" references with \"npx remotion\")\n\n# Start dev server\nnpm run dev\n\n# Expose publicly\nbash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000\n```\n\n---\n\n## Fetching Brand Data with Scrapling\n\n**MANDATORY:** When a video mentions or features any product/company, use Scrapling to scrape the product's website for brand data, colors, screenshots, and copy BEFORE designing the video. This ensures visual accuracy and brand consistency.\n\n### Using the Scrapling Script\n\n```bash\n# Run the brand data extraction script\nbash skills/remotion-video-generator/scripts/scrapling.sh \"https://example.com\"\n```\n\nThis returns structured brand data: brandName, tagline, headline, description, features, logoUrl, faviconUrl, primaryColors, ctaText, socialLinks, plus screenshot URL and OG image URL.\n\n### Manual Scrapling Extraction\n\nIf the script isn't available, use Python directly:\n\n```python\nimport json\nfrom scrapling.fetchers import StealthyFetcher\nfrom urllib.parse import urljoin\nimport re\n\nurl = 'https://brand.com'\npage = StealthyFetcher.fetch(url, headless=True)\nhtml = page.text\n\ndef resolve(u):\n return urljoin(url, u) if u and not u.startswith('http') else u\n\ncolors = list(set(re.findall(r'#(?:[0-9a-fA-F]{3}){1,2}', html)))[:5]\n\ndata = {\n 'brandName': page.css('[property=\"og:site_name\"]::text').get() or page.title(),\n 'tagline': page.css('[property=\"og:description\"]::text').get(),\n 'headline': page.css('h1::text').get(),\n 'description': page.css('[property=\"og:description\"]::text').get(),\n 'logoUrl': resolve(page.css('[rel=\"icon\"]::attr(href)').get()),\n 'faviconUrl': resolve(page.css('[rel=\"icon\"]::attr(href)').get()),\n 'primaryColors': colors,\n 'ctaText': page.css('a[href*=\"signup\"]::text').get(),\n 'ogImageUrl': resolve(page.css('[property=\"og:image\"]::attr(content)').get()),\n 'screenshotUrl': f\"https://image.thum.io/get/width/1200/crop/800/{url}\"\n}\n\nprint(json.dumps(data, indent=2))\n```\n\n---\n\n## Download Assets After Scraping\n\n```bash\nmkdir -p public/images/brand\ncurl -s \"https://example.com/favicon.ico\" -o public/images/brand/favicon.ico\ncurl -s \"${OG_IMAGE_URL}\" -o public/images/brand/og-image.png\ncurl -sL \"${SCREENSHOT_URL}\" -o public/images/brand/screenshot.png\n```\n\n**Note:** Some S3 buckets block direct access. Use thum.io screenshot service as fallback.\n\n---\n\n## Core Architecture\n\n### Scene Management\n\nUse scene-based architecture with proper transitions:\n\n```typescript\nconst SCENE_DURATIONS: Record = {\n intro: 3000, // 3s hook\n problem: 4000, // 4s dramatic\n solution: 3500, // 3.5s reveal\n features: 5000, // 5s showcase\n cta: 3000, // 3s close\n};\n```\n\n### Video Structure Pattern\n\n```typescript\nimport { AbsoluteFill, Sequence, useCurrentFrame, useVideoConfig, interpolate, spring, Img, staticFile, Audio } from \"remotion\";\n\nexport const MyVideo = () => {\n const frame = useCurrentFrame();\n const { fps, durationInFrames } = useVideoConfig();\n\n return (\n \n {/* Background music */}\n \n\n {/* Persistent background layer - OUTSIDE sequences */}\n \n\n {/* Scene sequences */}\n \n \n \n \n \n \n \n );\n};\n```\n\n---\n\n## Motion Graphics Principles\n\n### AVOID (Slideshow patterns)\n\n- Fading to black between scenes\n- Centered text on solid backgrounds\n- Same transition for everything\n- Linear/robotic animations\n- Static screens\n- Emoji icons ā NEVER use emoji, always use Lucide React icons\n\n### PURSUE (Motion graphics)\n\n- Overlapping transitions (next starts BEFORE current ends)\n- Layered compositions (background/midground/foreground)\n- Spring physics for organic motion\n- Varied timing (2-5s scenes, mixed rhythms)\n- Continuous visual elements across scenes\n- Custom transitions with clipPath, 3D transforms, morphs\n- Lucide React for ALL icons (`npm install lucide-react`) ā never emoji\n\n---\n\n## Transition Techniques\n\n| Technique | Description |\n|-----------|-------------|\n| **Morph/Scale** | Element scales up to fill screen, becomes next scene's background |\n| **Wipe** | Colored shape sweeps across, revealing next scene |\n| **Zoom-through** | Camera pushes into element, emerges into new scene |\n| **Clip-path reveal** | Circle/polygon grows from point to reveal |\n| **Persistent anchor** | One element stays while surroundings change |\n| **Directional flow** | Scene 1 exits right, Scene 2 enters from right |\n| **Split/unfold** | Screen divides, panels slide apart |\n| **Perspective flip** | Scene rotates on Y-axis in 3D |\n\n---\n\n## Animation Timing Reference\n\n```typescript\n// Timing values (in seconds)\nconst timing = {\n micro: 0.1-0.2, // Small shifts, subtle feedback\n snappy: 0.2-0.4, // Element entrances, position changes\n standard: 0.5-0.8, // Scene transitions, major reveals\n dramatic: 1.0-1.5, // Hero moments, cinematic reveals\n};\n\n// Spring configs\nconst springs = {\n snappy: { stiffness: 400, damping: 30 },\n bouncy: { stiffness: 300, damping: 15 },\n smooth: { stiffness: 120, damping: 25 },\n};\n```\n\n---\n\n## Visual Style Guidelines\n\n### Typography\n\n- One display font + one body font max\n- Massive headlines, tight tracking\n- Mix weights for hierarchy\n- Keep text SHORT (viewers can't pause)\n\n### Colors\n\n- **Use brand colors from Scrapling scrape** as the primary palette ā match the product's actual look\n- Avoid purple/indigo gradients unless the brand uses them or the user explicitly requests them\n- Simple, clean backgrounds are generally best ā a single dark tone or subtle gradient beats layered textures\n- Intentional accent colors pulled from the brand\n\n### Layout\n\n- Use asymmetric layouts, off-center type\n- Edge-aligned elements create visual tension\n- Generous whitespace as design element\n- Use depth sparingly ā a subtle backdrop blur or single gradient, not stacked textures\n\n---\n\n## Remotion Essentials\n\n### Interpolation\n\n```typescript\nconst opacity = interpolate(frame, [0, 30], [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\"\n});\n\nconst scale = spring({\n frame,\n fps,\n from: 0.8,\n to: 1,\n durationInFrames: 30,\n config: { damping: 12 }\n});\n```\n\n### Sequences with Overlap\n\n```tsx\n\n \n\n\n \n\n```\n\n### Cross-Scene Continuity\n\nPlace persistent elements OUTSIDE Sequence blocks:\n\n```tsx\nconst PersistentShape = ({ currentScene }: { currentScene: number }) => {\n const positions = {\n 0: { x: 100, y: 100, scale: 1, opacity: 0.3 },\n 1: { x: 800, y: 200, scale: 2, opacity: 0.5 },\n 2: { x: 400, y: 600, scale: 0.5, opacity: 1 },\n };\n\n return (\n \n );\n};\n```\n\n---\n\n## Quality Tests\n\nBefore delivering, verify:\n\n- **Mute test:** Story follows visually without sound?\n- **Squint test:** Hierarchy visible when squinting?\n- **Timing test:** Motion feels natural, not robotic?\n- **Consistency test:** Similar elements behave similarly?\n- **Slideshow test:** Does NOT look like PowerPoint?\n- **Loop test:** Video loops smoothly back to start?\n\n---\n\n## Implementation Steps\n\n1. **Scrapling brand scrape** ā If featuring a product, scrape its site first\n2. **Director's treatment** ā Write vibe, camera style, emotional arc\n3. **Visual direction** ā Colors, fonts, brand feel, animation style\n4. **Scene breakdown** ā List every scene with description, duration, text, transitions\n5. **Plan assets** ā User assets + generated images/videos + brand scrape assets\n6. **Define durations** ā Vary pacing (2-3s punchy, 4-5s dramatic)\n7. **Build persistent layer** ā Animated background outside scenes\n8. **Build scenes** ā Each with enter/exit animations, 3-5 timed moments\n9. **Open with hook** ā High-impact first scene\n10. **Develop narrative** ā Content-driven middle scenes\n11. **Strong ending** ā Intentional, resolved close\n12. **Start Remotion Studio** ā `npm run dev` on port 3000\n13. **Expose via tunnel** ā `bash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000`\n14. **Send user the public URL** ā They preview and request changes live\n15. **Iterate** ā Edit source, hot-reload, repeat\n16. **Render** ā Only when user says to export final video\n\n---\n\n## File Structure\n\n```\nmy-video/\nāāā src/\nā āāā Root.tsx # Composition definitions\nā āāā index.ts # Entry point\nā āāā index.css # Global styles\nā āāā MyVideo.tsx # Main video component\nā āāā scenes/ # Scene components (optional)\nāāā public/\nā āāā images/\nā ā āāā brand/ # Scrapling-scraped assets\nā āāā audio/ # Background music\nāāā remotion.config.ts\nāāā package.json\n```\n\n---\n\n## Common Components\n\nSee `references/components.md` for reusable:\n- Animated backgrounds\n- Terminal windows\n- Feature cards\n- Stats displays\n- CTA buttons\n- Text reveal animations\n\n---\n\n## Tunnel Management\n\n```bash\n# Start tunnel (exposes port 3000 publicly)\nbash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000\n\n# Check status\nbash skills/cloudflare-tunnel/scripts/tunnel.sh status 3000\n\n# List all tunnels\nbash skills/cloudflare-tunnel/scripts/tunnel.sh list\n\n# Stop tunnel\nbash skills/cloudflare-tunnel/scripts/tunnel.sh stop 3000\n```\n\n---\n\n## Troubleshooting\n\n### Common Issues & Fixes\n\n| Issue | Solution |\n|-------|----------|\n| `Expected \">\" but found \"schema\"` | Use `.tsx` extension for files with JSX, not `.ts` |\n| `useCurrentFrame() can only be called inside a component` | Use `registerRoot` + `Composition` API (see Step 7) |\n| `\"fps\" must be a number, but you passed undefined to spring()` | Pass `fps` to spring: `spring({ frame, fps, from: 0.8, to: 1 })` |\n| `Could not find composition with ID index` | Use composition name: `npx remotion render MyVideo out.mp4` |\n| `Module build failed` | Ensure `react` and `react-dom` are in dependencies |\n| Remotion not found | Run `npm install` in project directory |\n| Hot reload not working | Ensure running `npm run dev`, not `npx remotion` directly |\n| Brand colors not extracting | Some sites use CSS variables - check page source manually |\n\n### File Extension Rules\n- Use `.tsx` for files with JSX (components with `< tags >`)\n- Use `.ts` for pure TypeScript files\n- Entry point MUST be `.tsx` if it uses JSX\n\n### Testing Your Video\n1. Start dev server: `npm run dev`\n2. Open http://localhost:3000\n3. Make changes - auto-refreshes\n4. Check composition in browser\n\n---\n\n## Changelog\n\n### v1.0.0 (2026-02-25)\n- Initial release (adapted from superskills)\n- **Firecrawl replaced with Scrapling** for brand data extraction\n- Uses StealthyFetcher for JS-heavy sites\n- Full brand data extraction: brandName, tagline, headline, description, features, logoUrl, faviconUrl, primaryColors, ctaText, socialLinks, screenshotUrl, ogImageUrl\n\n### v1.1.0 (2026-02-25)\n- Added Quick Usage Guide with step-by-step instructions\n- Added troubleshooting section for common issues\n- Tested with OpenClaw promotional video - working! š\n- Documented file extension requirements (.tsx vs .ts)\n- Fixed Remotion v4 API: `registerRoot` + `Composition` pattern\n- Fixed spring() must receive `fps` parameter\n- Fixed composition name in render command\n\n---\n\n## Practical Example: OpenClaw Promo Video\n\nHere's the actual project created during testing:\n\n**Location:** `skills/remotion-video-generator/openclaw-promo/`\n\n**Brand Data Extracted:**\n- Tagline: \"The AI that actually does things.\"\n- Logo: favicon.svg from openclaw.ai\n- Primary Color: #FF6B35 (extracted from design)\n- Screenshot: Generated via thum.io\n\n**Project Structure:**\n```\nopenclaw-promo/\nāāā src/\nā āāā index.tsx # Entry point\nā āāā OpenClawPromo.tsx # Video component\nāāā public/\nā āāā images/\nā āāā brand/\nā āāā logo.svg\nā āāā og-image.png\nā āāā screenshot.png\nāāā package.json\nāāā tsconfig.json\n```\n\n**Commands:**\n```bash\ncd skills/remotion-video-generator/openclaw-promo\nnpm run dev # Start studio at localhost:3000\nnpm run build # Bundle for production\n```\n\n---\n\n*Last updated: 2026-02-25*\n\nFile v1.0.0:_meta.json\n\n{\n \"ownerId\": \"kn7ezb7w8vhk2wpmt1t4gax5w980vfak\",\n \"slug\": \"remotion-video-generator\",\n \"version\": \"1.0.0\",\n \"publishedAt\": 1772029206194\n}\n\nFile v1.0.0:references/components.md\n\n# Video Components\n\n> \"Reusable components for Remotion videos.\"\n\n---\n\n## Animated Backgrounds\n\n```tsx\n// AnimatedGradient.tsx\nimport { useCurrentFrame, useVideoConfig, interpolate } from 'remotion';\n\nexport const AnimatedGradient = () => {\n const frame = useCurrentFrame();\n const { width, height } = useVideoConfig();\n\n const opacity = interpolate(frame, [0, 100], [0.3, 0.8]);\n\n return (\n \n );\n};\n```\n\n---\n\n## Terminal Window\n\n```tsx\n// Terminal.tsx\nimport { AbsoluteFill, interpolate, useCurrentFrame } from 'remotion';\n\nexport const Terminal = ({ text = \"npm run dev\" }: { text?: string }) => {\n const frame = useCurrentFrame();\n const charsVisible = interpolate(frame, [0, 30], [0, text.length]);\n\n return (\n \n
\n\n```\n\n---\n\n## Progress Indicator\n\n```tsx\nconst ProgressBar = ({ progress }: { progress: number }) => {\n return (\n \n );\n};\n```\n\n---\n\n## Responsive Scaling\n\nScale to fit any resolution:\n\n```tsx\nconst { width, height } = useVideoConfig();\nconst scale = Math.min(width / 1920, height / 1080);\n\n
\n \n
\n```\n\n---\n\n*More patterns to be added as needed.*\n\nFile v1.0.0:skill-card.md\n\n## Description:\n\nAI video production workflow using Remotion. Use when creating videos, short films, commercials, or motion graphics. Triggers on requests to make promotional videos, product demos, social media videos, animated explainers, or any programmatic video content. Produces polished motion graphics, not slideshows.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[zendenho7](https://clawhub.ai/user/zendenho7)\n\n### License/Terms of Use:\n\n\n## Use Case:\n\nDevelopers and content teams use this skill to create programmatic motion graphics videos, including promotional videos, product demos, short films, social media clips, animated explainers, and commercials. It helps agents scaffold Remotion projects, gather brand assets, build scenes, preview work, iterate, and render final video files.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: A crafted URL passed to the scraping helper could trigger code execution due to unsafe input handling.\n\nMitigation: Review or patch the helper script before use, validate and quote user-supplied URLs, and require explicit approval before running scraping commands.\n\nRisk: The workflow can scrape user-specified websites, download remote assets, and use third-party screenshot services.\n\nMitigation: Confirm that scraping and asset downloads are authorized for the target site, inspect downloaded assets before use, and avoid third-party screenshot services unless the user approves them.\n\nRisk: The workflow can expose a local Remotion Studio to the public internet through a tunnel.\n\nMitigation: Use local preview by default and require explicit user approval before starting any public tunnel.\n\nRisk: The workflow installs npm and pip packages without pinned versions.\n\nMitigation: Pin dependencies, review generated package files, and run installation in an isolated workspace.\n\n## Reference(s):\n\n- [Remotion](https://www.remotion.dev/)\n- [Scrapling](https://github.com/D4Vinci/Scrapling)\n- [React](https://react.dev/)\n- [Superskills - Video Generator (Remotion)](https://superskills.vibecode.run/)\n- [Video Components](references/components.md)\n- [Composition Patterns](references/composition-patterns.md)\n- [ClawHub Skill Page](https://clawhub.ai/zendenho7/skills/remotion-video-generator)\n\n## Skill Output:\n\n**Output Type(s):** [Text, Markdown, Code, Shell commands, Configuration, Guidance]\n\n**Output Format:** [Markdown guidance with bash, JSON, Python, and TypeScript/TSX code blocks]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May produce project files, Remotion source code, package configuration, preview commands, and render commands when used by an agent.]\n\n## Skill Version(s):\n\n1.0.0 (source: frontmatter and server release metadata)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.","readmeExcerpt":"Skill: Remotion Video Generator Summary: AI video production workflow using Remotion. Use when creating videos, short films, commercials, or motion graphics. Triggers on requests to make promotional... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-02-25T14:20:06.194Z | auto remotion-video-generator v1.0.0 - Initial release of programmatic video generation workflow using Remotion and React. - Firecrawl replaced wi","codeSnippets":[],"executableExamples":[{"language":"bash","snippet":"# Run the scrapling script to get brand colors, logo, tagline\nbash skills/remotion-video-generator/scripts/scrapling.sh \"https://brand-website.com\""},{"language":"bash","snippet":"curl -sL \"https://brand.com/logo.svg\" -o public/images/brand/logo.svg"},{"language":"bash","snippet":"curl -sL \"https://brand.com/og-image.png\" -o public/images/brand/og-image.png"},{"language":"bash","snippet":"curl -sL \"https://image.thum.io/get/width/1200/crop/800/https://brand.com\" -o screenshot.png"},{"language":"bash","snippet":"mkdir -p public/images/brand\ncurl -sL \"https://brand.com/logo.svg\" -o public/images/brand/logo.svg\ncurl -sL \"https://brand.com/og-image.png\" -o public/images/brand/og-image.png\ncurl -sL \"https://image.thum.io/get/width/1200/crop/800/https://brand.com\" -o screenshot.png"},{"language":"bash","snippet":"mkdir -p my-video/src my-video/public/images/brand my-video/public/audio"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: remotion-video-generator\ndescription: AI video production workflow using Remotion. Use when creating videos, short films, commercials, or motion graphics. Triggers on requests to make promotional videos, product demos, social media videos, animated explainers, or any programmatic video content. Produces polished motion graphics, not slideshows.\nversion: \"1.0.0\"\nmetadata: {\"openclaw\":{\"emoji\":\"š¬\",\"requires\":{\"bins\":[\"node\",\"npm\",\"python3\"]}, \"tags\":[\"video\", \"remotion\", \"motion-graphics\", \"production\"]}}\n---\n\n# Remotion Video Generator\n\n> \"Create professional motion graphics videos programmatically with React and Remotion.\"\n\n---\n\n## Credits & References\n\n### Original Skill\n- **Source:** [Superskills - Video Generator (Remotion)](https://superskills.vibecode.run/)\n- **Author:** Riley Brown / VibeCode Community\n\n### Modifications\n- **Firecrawl replaced with Scrapling** for brand data extraction\n- Uses Python `scrapling` library instead of Firecrawl API\n- Added comprehensive troubleshooting for Remotion v4 API\n\n### Core Technologies\n- **Remotion:** https://www.remotion.dev/\n- **Scrapling:** https://github.com/D4Vinci/Scrapling\n- **React:** https://react.dev/\n\n### Tested With\n- OpenClaw promotional video - successfully rendered! š\n\n---\n\n## Quick Usage Guide (Step-by-Step)\n\n### Step 1: Scrape Brand Data\n```bash\n# Run the scrapling script to get brand colors, logo, tagline\nbash skills/remotion-video-generator/scripts/scrapling.sh \"https://brand-website.com\"\n```\n\nThis extracts: brandName, tagline, logoUrl, faviconUrl, primaryColors, ogImageUrl, screenshotUrl\n\n### Step 2: Download Brand Assets\n```bash\nmkdir -p public/images/brand\ncurl -sL \"https://brand.com/logo.svg\" -o public/images/brand/logo.svg\ncurl -sL \"https://brand.com/og-image.png\" -o public/images/brand/og-image.png\ncurl -sL \"https://image.thum.io/get/width/1200/crop/800/https://brand.com\" -o screenshot.png\n```\n\n### Step 3: Create Project Structure\n```bash\nmkdir -p my-video/src my-video/public/images/brand my-video/public/audio\n```\n\n### Step 4: Create package.json\n```json\n{\n \"name\": \"my-video\",\n \"scripts\": {\n \"dev\": \"npx remotion studio\",\n \"build\": \"npx remotion bundle\"\n },\n \"dependencies\": {\n \"@remotion/cli\": \"^4.0.0\",\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\",\n \"remotion\": \"^4.0.0\",\n \"lucide-react\": \"^0.300.0\"\n }\n}\n```\n\n### Step 5: Install Dependencies\n```bash\ncd my-video && npm install\n```\n\n### Step 6: Create Video Component\nCreate `src/MyVideo.tsx` with:\n- AbsoluteFill for full-screen layout\n- Sequence components for scene timing\n- useCurrentFrame, useVideoConfig, interpolate, spring for animations\n\n### Step 7: Create Entry Point (Remotion v4 API)\nCreate `src/index.tsx` - **MUST use `.tsx` extension**:\n\n```tsx\nimport { registerRoot, Composition } from \"remotion\";\nimport { AbsoluteFill, Sequence, useCurrentFrame, useVideoConfig, interpolate, spring } from \"remotion\";\n\nconst MyVideo = () => {\n const frame = useCurrentFrame();\n const { fps } = useVideoC"},{"path":"_meta.json","content":"{\n \"ownerId\": \"kn7ezb7w8vhk2wpmt1t4gax5w980vfak\",\n \"slug\": \"remotion-video-generator\",\n \"version\": \"1.0.0\",\n \"publishedAt\": 1772029206194\n}"},{"path":"references/components.md","content":"# Video Components\n\n> \"Reusable components for Remotion videos.\"\n\n---\n\n## Animated Backgrounds\n\n```tsx\n// AnimatedGradient.tsx\nimport { useCurrentFrame, useVideoConfig, interpolate } from 'remotion';\n\nexport const AnimatedGradient = () => {\n const frame = useCurrentFrame();\n const { width, height } = useVideoConfig();\n\n const opacity = interpolate(frame, [0, 100], [0.3, 0.8]);\n\n return (\n \n );\n};\n```\n\n---\n\n## Terminal Window\n\n```tsx\n// Terminal.tsx\nimport { AbsoluteFill, interpolate, useCurrentFrame } from 'remotion';\n\nexport const Terminal = ({ text = \"npm run dev\" }: { text?: string }) => {\n const frame = useCurrentFrame();\n const charsVisible = interpolate(frame, [0, 30], [0, text.length]);\n\n return (\n \n