Remotion and Next.js

{"type":"queue-operation","operation":"dequeue","timestamp":"2026-01-26T18:41:13.903Z","sessionId":"af80c4c2-fd99-43f9-a6c6-c0bf4fa8442b"} {"parentUuid":null,"isSidechain":false,"userType":"external","cwd":"/tmp/builder","sessionId":"af80c4c2-fd99-43f9-a6c6-c0bf4fa8442b","version":"2.1.19","gitBranch":"","type":"user","message":{"role":"user","content":[{"type":"text","text":"Human: \n\n[FIRST MESSAGE - IMPORTANT]\nBefore starting the main work, you MUST first use the mcp__custom__set_project_name tool to give this project a meaningful name based on what the user wants to create. The name should be:\n- Short: 2-4 words maximum\n- Descriptive: Reflect the video content (e.g., \"Product Launch Promo\", \"Birthday Celebration\", \"Tech Tutorial Intro\")\n- Professional: Use title case\n\nCall set_project_name FIRST, then proceed with the video creation.\nNote: You can update the project name later if the project direction changes significantly.\n\nFix error and commit push"}]},"uuid":"e089f2d3-b779-4645-8e61-c3dd97f546c2","timestamp":"2026-01-26T18:41:13.923Z","permissionMode":"acceptEdits"} {"parentUuid":"e089f2d3-b779-4645-8e61-c3dd97f546c2","isSidechain":false,"userType":"external","cwd":"/tmp/builder","sessionId":"af80c4c2-fd99-43f9-a6c6-c0bf4fa8442b","version":"2.1.19","gitBranch":"","message":{"model":"claude-opus-4-5-20251101","id":"msg_01WCdebqzK3e7Xh6FMcqwr7K","type":"message","role":"assistant","content":[{"type":"text","text":"I'll first check the current project state and identify any errors, then fix them."}],"stop_reason":null,"stop_sequence":null,"usage":{"input_tokens":3,"cache_creation_input_tokens":26612,"cache_read_input_tokens":13615,"cache_creation":{"ephemeral_5m_input_tokens":26612,"ephemeral_1h_input_tokens":0},"output_tokens":3,"service_tier":"standard"}},"requestId":"req_011CXWUn6QZN5ctWGPXUdgDE","type":"assistant","uuid":"bb671125-2537-4bec-9f3d-e05b4aaeb52e","timestamp":"2026-01-26T18:41:16.967Z"} {"parentUuid":"bb671125-2537-4bec-9f3d-e05b4aaeb52e","isSidechain":false,"userType":"external","cwd":"/tmp/builder","sessionId":"af80c4c2-fd99-43f9-a6c6-c0bf4fa8442b","version":"2.1.19","gitBranch":"","message":{"model":"claude-opus-4-5-20251101","id":"msg_01WCdebqzK3e7Xh6FMcqwr7K","type":"message","role":"assistant","content":[{"type":"tool_use","id":"toolu_01SbPzDj94PfT3pc5mwnWrBF","name":"mcp__vm__checkProjectHealth","input":{}}],"stop_reason":null,"stop_sequence":null,"usage":{"input_tokens":3,"cache_creation_input_tokens":26612,"cache_read_input_tokens":13615,"cache_creation":{"ephemeral_5m_input_tokens":26612,"ephemeral_1h_input_tokens":0},"output_tokens":3,"service_tier":"standard"}},"requestId":"req_011CXWUn6QZN5ctWGPXUdgDE","type":"assistant","uuid":"c21eeed7-08a2-4805-bf3d-45ffcf2b9ab3","timestamp":"2026-01-26T18:41:17.125Z"} {"parentUuid":"c21eeed7-08a2-4805-bf3d-45ffcf2b9ab3","isSidechain":false,"userType":"external","cwd":"/tmp/builder","sessionId":"af80c4c2-fd99-43f9-a6c6-c0bf4fa8442b","version":"2.1.19","gitBranch":"","message":{"model":"claude-opus-4-5-20251101","id":"msg_01WCdebqzK3e7Xh6FMcqwr7K","type":"message","role":"assistant","content":[{"type":"tool_use","id":"toolu_01CFhfkH8HZZfkU2md8kYFhi","name":"mcp__vm__lint","input":{"check":"both","fix":true}}],"stop_reason":null,"stop_sequence":null,"usage":{"input_tokens":3,"cache_creation_input_tokens":26612,"cache_read_input_tokens":13615,"cache_creation":{"ephemeral_5m_input_tokens":26612,"ephemeral_1h_input_tokens":0},"output_tokens":3,"service_tier":"standard"}},"requestId":"req_011CXWUn6QZN5ctWGPXUdgDE","type":"assistant","uuid":"3b9484eb-a7c0-416a-8b04-01c292b1121f","timestamp":"2026-01-26T18:41:17.452Z"} {"parentUuid":"c21eeed7-08a2-4805-bf3d-45ffcf2b9ab3","isSidechain":false,"userType":"external","cwd":"/tmp/builder","sessionId":"af80c4c2-fd99-43f9-a6c6-c0bf4fa8442b","version":"2.1.19","gitBranch":"","type":"user","message":{"role":"user","content":[{"type":"tool_result","content":"Claude requested permissions to use mcp__vm__checkProjectHealth, but you haven't granted it yet.","is_error":true,"tool_use_id":"toolu_01SbPzDj94PfT3pc5mwnWrBF"}]},"uuid":"133f2c73-7da1-40c7-9ee7-cd29d5de6616","timestamp":"2026-01-26T18:41:17.495Z","toolUseResult":"Error: Claude requested permissions to use mcp__vm__checkProjectHealth, but you haven't granted it yet.","sourceToolAssistantUUID":"c21eeed7-08a2-4805-bf3d-45ffcf2b9ab3"} {"parentUuid":"3b9484eb-a7c0-416a-8b04-01c292b1121f","isSidechain":false,"userType":"external","cwd":"/tmp/builder","sessionId":"af80c4c2-fd99-43f9-a6c6-c0bf4fa8442b","version":"2.1.19","gitBranch":"","type":"user","message":{"role":"user","content":[{"tool_use_id":"toolu_01CFhfkH8HZZfkU2md8kYFhi","type":"tool_result","content":[{"type":"text","text":"{\n \"summary\": \"ESLint: ✓ PASS (0 errors, 0 warnings)\\nTypeScript: ✓ PASS (0 errors)\",\n \"lint\": {\n \"success\": true,\n \"errorCount\": 0,\n \"warningCount\": 0,\n \"issues\": [],\n \"output\": \"\\n> template-next-app@0.1.0 fix\\n> prettier --write src && eslint src --fix --fix-type problem,suggestion,layout; tsc --noEmit\\n\\nsrc/app/layout.tsx 87ms (unchanged)\\nsrc/app/page.tsx 24ms (unchanged)\\nsrc/components/Button/Button.tsx 10ms (unchanged)\\nsrc/components/Button/styles.module.css 24ms (unchanged)\\nsrc/components/Container.tsx 3ms (unchanged)\\nsrc/components/Input.tsx 7ms (unchanged)\\nsrc/components/Spinner/Spinner.tsx 9ms (unchanged)\\nsrc/components/Spinner/styles.module.css 4ms (unchanged)\\nsrc/remotion/base/components/TextAnimation.tsx 15ms (unchanged)\\nsrc/remotion/base/hooks/useGsapTimeline.tsx 11ms (unchanged)\\nsrc/remotion/compositions.ts 5ms (unchanged)\\nsrc/remotion/compositions/Main.tsx 136ms\\nsrc/remotion/index.ts 18ms (unchanged)\\nsrc/remotion/Root.tsx 5ms (unchanged)\\nsrc/remotion/SimpleText.tsx 41ms (unchanged)\\nsrc/styles/global.css 2ms (unchanged)\\nsrc/types/constants.ts 10ms (unchanged)\\n\"\n },\n \"typecheck\": {\n \"success\": true,\n \"errorCount\": 0,\n \"issues\": [],\n \"output\": \"\\n> template-next-app@0.1.0 type-check\\n> tsc --noEmit 2>&1 || echo 'Typescript check failed'\\n\\n\"\n }\n}"}]}]},"uuid":"f6e19160-3645-415f-a252-0016353a668c","timestamp":"2026-01-26T18:41:27.303Z","toolUseResult":[{"type":"text","text":"{\n \"summary\": \"ESLint: ✓ PASS (0 errors, 0 warnings)\\nTypeScript: ✓ PASS (0 errors)\",\n \"lint\": {\n \"success\": true,\n \"errorCount\": 0,\n \"warningCount\": 0,\n \"issues\": [],\n \"output\": \"\\n> template-next-app@0.1.0 fix\\n> prettier --write src && eslint src --fix --fix-type problem,suggestion,layout; tsc --noEmit\\n\\nsrc/app/layout.tsx 87ms (unchanged)\\nsrc/app/page.tsx 24ms (unchanged)\\nsrc/components/Button/Button.tsx 10ms (unchanged)\\nsrc/components/Button/styles.module.css 24ms (unchanged)\\nsrc/components/Container.tsx 3ms (unchanged)\\nsrc/components/Input.tsx 7ms (unchanged)\\nsrc/components/Spinner/Spinner.tsx 9ms (unchanged)\\nsrc/components/Spinner/styles.module.css 4ms (unchanged)\\nsrc/remotion/base/components/TextAnimation.tsx 15ms (unchanged)\\nsrc/remotion/base/hooks/useGsapTimeline.tsx 11ms (unchanged)\\nsrc/remotion/compositions.ts 5ms (unchanged)\\nsrc/remotion/compositions/Main.tsx 136ms\\nsrc/remotion/index.ts 18ms (unchanged)\\nsrc/remotion/Root.tsx 5ms (unchanged)\\nsrc/remotion/SimpleText.tsx 41ms (unchanged)\\nsrc/styles/global.css 2ms (unchanged)\\nsrc/types/constants.ts 10ms (unchanged)\\n\"\n },\n \"typecheck\": {\n \"success\": true,\n \"errorCount\": 0,\n \"issues\": [],\n \"output\": \"\\n> template-next-app@0.1.0 type-check\\n> tsc --noEmit 2>&1 || echo 'Typescript check failed'\\n\\n\"\n }\n}"}],"sourceToolAssistantUUID":"3b9484eb-a7c0-416a-8b04-01c292b1121f"} {"parentUuid":"f6e19160-3645-415f-a252-0016353a668c","isSidechain":false,"userType":"external","cwd":"/tmp/builder","sessionId":"af80c4c2-fd99-43f9-a6c6-c0bf4fa8442b","version":"2.1.19","gitBranch":"","message":{"model":"claude-opus-4-5-20251101","id":"msg_018sdTMPV62sTNDxgpwXWrpy","type":"message","role":"assistant","content":[{"type":"text","text":"The lint and TypeScript checks pass. Let me check the project health and also read the Main.tsx file to see the current state:"}],"stop_reason":null,"stop_sequence":null,"usage":{"input_tokens":1,"cache_creation_input_tokens":704,"cache_read_input_tokens":40227,"cache_creation":{"ephemeral_5m_input_tokens":704,"ephemeral_1h_input_tokens":0},"output_tokens":1,"service_tier":"standard"}},"requestId":"req_011CXWUo5dhc19UikyRqWsHa","type":"assistant","uuid":"fa3a9e1c-d856-4dc3-997b-64688fdbb3a5","timestamp":"2026-01-26T18:41:30.210Z"} {"parentUuid":"fa3a9e1c-d856-4dc3-997b-64688fdbb3a5","isSidechain":false,"userType":"external","cwd":"/tmp/builder","sessionId":"af80c4c2-fd99-43f9-a6c6-c0bf4fa8442b","version":"2.1.19","gitBranch":"","message":{"model":"claude-opus-4-5-20251101","id":"msg_018sdTMPV62sTNDxgpwXWrpy","type":"message","role":"assistant","content":[{"type":"tool_use","id":"toolu_01Ax3Z4Vjd8Lz21UyWkZpHab","name":"mcp__vm__readFile","input":{"path":"/workspace/src/remotion/compositions/Main.tsx"}}],"stop_reason":null,"stop_sequence":null,"usage":{"input_tokens":1,"cache_creation_input_tokens":704,"cache_read_input_tokens":40227,"cache_creation":{"ephemeral_5m_input_tokens":704,"ephemeral_1h_input_tokens":0},"output_tokens":1,"service_tier":"standard"}},"requestId":"req_011CXWUo5dhc19UikyRqWsHa","type":"assistant","uuid":"4aebf902-c95a-4b9a-a615-e6456a5ebf8b","timestamp":"2026-01-26T18:41:30.742Z"} {"parentUuid":"4aebf902-c95a-4b9a-a615-e6456a5ebf8b","isSidechain":false,"userType":"external","cwd":"/tmp/builder","sessionId":"af80c4c2-fd99-43f9-a6c6-c0bf4fa8442b","version":"2.1.19","gitBranch":"","message":{"model":"claude-opus-4-5-20251101","id":"msg_018sdTMPV62sTNDxgpwXWrpy","type":"message","role":"assistant","content":[{"type":"tool_use","id":"toolu_01NQE8PoQT3Maa2UzaZpz7mE","name":"mcp__vm__exec","input":{"cmd":"curl -s http://localhost:3000 2>&1 | head -100"}}],"stop_reason":null,"stop_sequence":null,"usage":{"input_tokens":1,"cache_creation_input_tokens":704,"cache_read_input_tokens":40227,"cache_creation":{"ephemeral_5m_input_tokens":704,"ephemeral_1h_input_tokens":0},"output_tokens":1,"service_tier":"standard"}},"requestId":"req_011CXWUo5dhc19UikyRqWsHa","type":"assistant","uuid":"784b4176-0d85-406f-a5be-00181a3664a4","timestamp":"2026-01-26T18:41:31.271Z"} {"parentUuid":"4aebf902-c95a-4b9a-a615-e6456a5ebf8b","isSidechain":false,"userType":"external","cwd":"/tmp/builder","sessionId":"af80c4c2-fd99-43f9-a6c6-c0bf4fa8442b","version":"2.1.19","gitBranch":"","type":"user","message":{"role":"user","content":[{"tool_use_id":"toolu_01Ax3Z4Vjd8Lz21UyWkZpHab","type":"tool_result","content":[{"type":"text","text":" 1|import {\n 2| AbsoluteFill,\n 3| Artifact,\n 4| useCurrentFrame,\n 5| Sequence,\n 6| Audio,\n 7| Img,\n 8| interpolate,\n 9| Easing,\n 10| spring,\n 11| useVideoConfig,\n 12|} from \"remotion\";\n 13|import { loadFont as loadSatoshi } from \"@remotion/google-fonts/Outfit\";\n 14|import { loadFont as loadClash } from \"@remotion/google-fonts/Sora\";\n 15|\n 16|// Assets\n 17|const LOGO_URL =\n 18| \"https://pub-e3bfc0083b0644b296a7080b21024c5f.r2.dev/clawd/1769447248505_nv1dlkov8sg_logo.svg\";\n 19|\n 20|// Voiceovers\n 21|const VO1 =\n 22| \"https://pub-e3bfc0083b0644b296a7080b21024c5f.r2.dev/audio/1769447267253_5ofhap6sjy9_Josh_Meet_Clawd__A_person.mp3\";\n 23|const VO2 =\n 24| \"https://pub-e3bfc0083b0644b296a7080b21024c5f.r2.dev/audio/1769447269059_y7dxfm3hcu_Josh_It_connects_to_any_c.mp3\";\n 25|const VO3 =\n 26| \"https://pub-e3bfc0083b0644b296a7080b21024c5f.r2.dev/audio/1769447270529_cx2iwmznb9t_Josh_It_remembers_your_pr.mp3\";\n 27|const VO4 =\n 28| \"https://pub-e3bfc0083b0644b296a7080b21024c5f.r2.dev/audio/1769447272086_nf5voqfky9e_Josh_Open_source__Private.mp3\";\n 29|const VO5 =\n 30| \"https://pub-e3bfc0083b0644b296a7080b21024c5f.r2.dev/audio/1769447273645_5gw6z6ym1fb_Josh_This_is_Clawd__The_A.mp3\";\n 31|const MUSIC =\n 32| \"https://pub-e3bfc0083b0644b296a7080b21024c5f.r2.dev/music/1769447314266_efx8yjimjbm_music_Ambient_tech_corpora.mp3\";\n 33|\n 34|// Brand colors from clawd.bot\n 35|const COLORS = {\n 36| background: \"#050810\",\n 37| primary: \"#F0F4FF\",\n 38| accent: \"#191D28\",\n 39| lobsterGradientStart: \"#FF4D4D\",\n 40| lobsterGradientEnd: \"#991B1B\",\n 41| eyeGlow: \"#00E5CC\",\n 42|};\n 43|\n 44|// Chat app icons\n 45|const CHAT_APPS = [\n 46| { name: \"WhatsApp\", icon: \"logos:whatsapp-icon\" },\n 47| { name: \"Telegram\", icon: \"logos:telegram\" },\n 48| { name: \"Discord\", icon: \"logos:discord-icon\" },\n 49| { name: \"Slack\", icon: \"logos:slack-icon\" },\n 50| { name: \"iMessage\", icon: \"simple-icons:imessage\" },\n 51|];\n 52|\n 53|// Floating particle component\n 54|const FloatingParticle: React.FC<{\n 55| delay: number;\n 56| size: number;\n 57| x: number;\n 58| y: number;\n 59|}> = ({ delay, size, x, y }) => {\n 60| const frame = useCurrentFrame();\n 61|\n 62| const floatY = Math.sin((frame + delay) / 30) * 15;\n 63| const floatX = Math.cos((frame + delay) / 45) * 10;\n 64| const opacity = interpolate(\n 65| Math.sin((frame + delay) / 60),\n 66| [-1, 1],\n 67| [0.1, 0.4],\n 68| );\n 69|\n 70| return (\n 71| \n 85| );\n 86|};\n 87|\n 88|// Animated background with subtle grid and particles\n 89|const AnimatedBackground: React.FC = () => {\n 90| const frame = useCurrentFrame();\n 91|\n 92| const gridOpacity = interpolate(frame, [0, 30], [0, 0.03], {\n 93| extrapolateRight: \"clamp\",\n 94| });\n 95|\n 96| return (\n 97| \n 98| {/* Subtle grid pattern */}\n 99| \n 108|\n 109| {/* Radial gradient overlay */}\n 110| \n 117|\n 118| {/* Floating particles */}\n 119| {[...Array(12)].map((_, i) => (\n 120| \n 127| ))}\n 128| \n 129| );\n 130|};\n 131|\n 132|// Lobster logo component with animation\n 133|const LobsterLogo: React.FC<{ scale?: number }> = ({ scale = 1 }) => {\n 134| const frame = useCurrentFrame();\n 135| const { fps } = useVideoConfig();\n 136|\n 137| const logoSpring = spring({\n 138| frame,\n 139| fps,\n 140| config: { damping: 12, stiffness: 80, mass: 0.8 },\n 141| });\n 142|\n 143| const bounce = Math.sin(frame / 20) * 3;\n 144|\n 145| return (\n 146| \n 154| \n 162| \n 163| );\n 164|};\n 165|\n 166|// Sequence 1: Intro with logo\n 167|const IntroSequence: React.FC = () => {\n 168| const frame = useCurrentFrame();\n 169| const { fontFamily: headingFont } = loadClash();\n 170| const { fontFamily: bodyFont } = loadSatoshi();\n 171|\n 172| const titleOpacity = interpolate(frame, [30, 50], [0, 1], {\n 173| extrapolateLeft: \"clamp\",\n 174| extrapolateRight: \"clamp\",\n 175| });\n 176|\n 177| const titleY = interpolate(frame, [30, 50], [30, 0], {\n 178| extrapolateLeft: \"clamp\",\n 179| extrapolateRight: \"clamp\",\n 180| easing: Easing.out(Easing.back(1.5)),\n 181| });\n 182|\n 183| const subtitleOpacity = interpolate(frame, [50, 70], [0, 1], {\n 184| extrapolateLeft: \"clamp\",\n 185| extrapolateRight: \"clamp\",\n 186| });\n 187|\n 188| const subtitleY = interpolate(frame, [50, 70], [20, 0], {\n 189| extrapolateLeft: \"clamp\",\n 190| extrapolateRight: \"clamp\",\n 191| easing: Easing.out(Easing.cubic),\n 192| });\n 193|\n 194| return (\n 195| \n 196| \n 197|\n 198| \n 205| \n 215| Clawd\n 216| \n 217| \n 218|\n 219| \n 226| \n 235| Personal AI Assistant\n 236|

\n 237| \n 238| \n 239| );\n 240|};\n 241|\n 242|// Sequence 2: Chat apps integration\n 243|const ChatAppsSequence: React.FC = () => {\n 244| const frame = useCurrentFrame();\n 245| const { fps } = useVideoConfig();\n 246| const { fontFamily: headingFont } = loadClash();\n 247| const { fontFamily: bodyFont } = loadSatoshi();\n 248|\n 249| const titleOpacity = interpolate(frame, [0, 20], [0, 1], {\n 250| extrapolateRight: \"clamp\",\n 251| });\n 252|\n 253| return (\n 254| \n 255| \n 261| \n 270| Connect to Any Chat App\n 271| \n 272| \n 273|\n 274|

\n 275| {CHAT_APPS.map((app, index) => {\n 276| const delay = index * 8;\n 277| const appSpring = spring({\n 278| frame: frame - delay,\n 279| fps,\n 280| config: { damping: 12, stiffness: 100 },\n 281| });\n 282|\n 283| const bounce = Math.sin((frame - delay) / 15) * 4;\n 284|\n 285| return (\n 286| 0.5 ? bounce : 0}px)`,\n 290| opacity: appSpring,\n 291| }}\n 292| className=\"flex flex-col items-center gap-4\"\n 293| >\n 294| \n 306| \n 310|

\n 311| \n 318| {app.name}\n 319| \n 320| \n 321| );\n 322| })}\n 323| \n 324| \n 325| );\n 326|};\n 327|\n 328|// Sequence 3: Features\n 329|const FeaturesSequence: React.FC = () => {\n 330| const frame = useCurrentFrame();\n 331| const { fps } = useVideoConfig();\n 332| const { fontFamily: headingFont } = loadClash();\n 333| const { fontFamily: bodyFont } = loadSatoshi();\n 334|\n 335| const features = [\n 336| {\n 337| icon: \"ph:brain-fill\",\n 338| title: \"Persistent Memory\",\n 339| desc: \"Remembers everything\",\n 340| color: COLORS.eyeGlow,\n 341| },\n 342| {\n 343| icon: \"ph:globe-fill\",\n 344| title: \"Browser Control\",\n 345| desc: \"Browses the web\",\n 346| color: COLORS.lobsterGradientStart,\n 347| },\n 348| {\n 349| icon: \"ph:terminal-fill\",\n 350| title: \"System Access\",\n 351| desc: \"Runs commands\",\n 352| color: COLORS.primary,\n 353| },\n 354| ];\n 355|\n 356| return (\n 357| \n 358|

\n 359| {features.map((feature, index) => {\n 360| const delay = index * 12;\n 361| const cardSpring = spring({\n 362| frame: frame - delay,\n 363| fps,\n 364| config: { damping: 14, stiffness: 80 },\n 365| });\n 366|\n 367| const iconPulse = 1 + Math.sin((frame - delay) / 20) * 0.05;\n 368|\n 369| return (\n 370| \n 384| \n 397| \n 401|

\n 402| \n 411| {feature.title}\n 412| \n 413| \n 420| {feature.desc}\n 421|

\n 422| \n 423| );\n 424| })}\n 425| \n 426| \n 427| );\n 428|};\n 429|\n 430|// Sequence 4: Open Source\n 431|const OpenSourceSequence: React.FC = () => {\n 432| const frame = useCurrentFrame();\n 433| const { fps } = useVideoConfig();\n 434| const { fontFamily: headingFont } = loadClash();\n 435|\n 436| const items = [\n 437| { icon: \"ph:lock-open-fill\", text: \"Open Source\" },\n 438| { icon: \"ph:shield-check-fill\", text: \"Private by Default\" },\n 439| { icon: \"ph:database-fill\", text: \"Your Data Stays Yours\" },\n 440| ];\n 441|\n 442| return (\n 443| \n 444|

\n 445| {items.map((item, index) => {\n 446| const delay = index * 15;\n 447| const itemSpring = spring({\n 448| frame: frame - delay,\n 449| fps,\n 450| config: { damping: 14, stiffness: 100 },\n 451| });\n 452|\n 453| return (\n 454| \n 462| \n 473| \n 477|

\n 478| \n 486| {item.text}\n 487| \n 488| \n 489| );\n 490| })}\n 491| \n 492| \n 493| );\n 494|};\n 495|\n 496|// Sequence 5: Closing\n 497|const ClosingSequence: React.FC = () => {\n 498| const frame = useCurrentFrame();\n 499| const { fps } = useVideoConfig();\n 500| const { fontFamily: headingFont } = loadClash();\n 501| const { fontFamily: bodyFont } = loadSatoshi();\n 502|\n 503| const logoSpring = spring({\n 504| frame,\n 505| fps,\n 506| config: { damping: 12, stiffness: 60 },\n 507| });\n 508|\n 509| const textOpacity = interpolate(frame, [20, 40], [0, 1], {\n 510| extrapolateRight: \"clamp\",\n 511| });\n 512|\n 513| const textY = interpolate(frame, [20, 40], [30, 0], {\n 514| extrapolateRight: \"clamp\",\n 515| easing: Easing.out(Easing.back(1.2)),\n 516| });\n 517|\n 518| const taglineOpacity = interpolate(frame, [45, 65], [0, 1], {\n 519| extrapolateRight: \"clamp\",\n 520| });\n 521|\n 522| const urlOpacity = interpolate(frame, [70, 90], [0, 1], {\n 523| extrapolateRight: \"clamp\",\n 524| });\n 525|\n 526| return (\n 527| \n 528|

\n 529| \n 530|

\n 531|\n 532| \n 539| \n 548| Clawd\n 549| \n 550| \n 551|\n 552| \n 558| \n 566| The AI that actually does things\n 567|

\n 568| \n 569|\n 570| \n 580| \n 589| clawd.bot\n 590| \n 591| \n 592| \n 593| );\n 594|};\n 595|\n 596|// Main composition\n 597|export const Main: React.FC = () => {\n 598| const frame = useCurrentFrame();\n 599| const { durationInFrames } = useVideoConfig();\n 600|\n 601| // Timeline (in frames at 30fps):\n 602| // Seq1: 0-150 (0-5s) - Intro\n 603| // Seq2: 150-330 (5-11s) - Chat apps\n 604| // Seq3: 330-480 (11-16s) - Features\n 605| // Seq4: 480-600 (16-20s) - Open source\n 606| // Seq5: 600-930 (20-31s) - Closing\n 607|\n 608| // Music fade out\n 609| const musicVolume = interpolate(\n 610| frame,\n 611| [durationInFrames - 60, durationInFrames],\n 612| [0.25, 0],\n 613| { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" },\n 614| );\n 615|\n 616| return (\n 617| <>\n 618| {frame === 0 && (\n 619| \n 620| )}\n 621|\n 622| {/* Background music */}\n 623|