0xMarioNawfal · Launch Video Breakdown: Hook, Pacing & Motion Design
CLAUDE CODE CAN NOW TEST YOUR ENTIRE IOS APP ON ITS OWN. EVERY SCREEN. EVERY FLOW. DEBUG LOGS AND A FULL BUG REPORT AT THE END.
0:00 · The Hook · AI Initiates iOS App Test
0:00 / 0:00
Scene-by-scene timeline & spoken transcript
The Hook
AI Initiates iOS App Test
“(No spoken dialogue — ambient typing sounds, subtle UI clicks)”
- On screen
- Debug Wanderlist on simulator and test all major flows Claude Code v2.1.95 Opus 4.6 (1M context) with medium effort : Claude Max ~/Projects/Wanderlist Launch Wanderlist in debug mode on the simulator using MobAI, then walk through every major flow: 1. Add places - add 2-3 places with different statuses (Done / To Try), tags, ratings, and Photos. 2. Map view - verify places appear on the map with correct pins, tap a pin to open details 3. Collections - create a collection, add places to it, open and browse the collection 4. Discovery - check the Discover tab, try Near Me 5. Profile - open Profile, verify stats and saved places show correctly 6. Edit & delete - edit a place's details, then delete a place and confirm it's removed I'll start by loading the MobAI skill and reading the relevant references. Skill(controlling-mobile-devices) Successfully loaded skill readMcPResource(Read resource "mobai://reference/device-automation" from server "mobai") { "contents": " +200 lines (ctrl-o to expand) mobai - list_devices (MCP) filtering. (thinking with medium effort) esc to interrupt 2 MCP servers need auth : /mcp iPhone 17 Pro iOS 18.2 00:32 Fitness Watch Productivity Utilities MobAI-Runner Wanderlist Search
- Camera
- Static overhead shot of a desktop setup, focusing on a terminal window and an iPhone simulator.
- Motion
- Split-screen display with real-time terminal output on the left and a simulated iOS app on the right, showing automated UI interaction.
Product Reveal
AI Navigates App Flows Autonomously
“(No spoken dialogue — ambient typing sounds, subtle UI clicks)”
- On screen
- Debug Wanderlist on simulator and test all major flows readMcPResource(Read resource "mobai://reference/device-automation" from server "mobai") { "contents": " +200 lines (ctrl-o to expand) mobai - list_devices (MCP) Good - I have an iPhone 17 Pro simulator ready. Let me first check the app's bundle ID and then launch it in debug mode. Searched for 2 patterns (ctrl-o to expand) Bundle ID is run.mobai.wanderlist. Let me launch it in debug mode. mobai - debug_app (MCP){device_id: "FB47F8C9-3B15-4A4B-9BFB-908002380416", bundle_id: "run.mobai.wanderlist"} App launched in debug mode. Let me observe the current screen and set up task tracking. mobai - execute_dsl (MCP){device_id: "FB47F8C9-3B15-4A4B-9BFB-908002380416", commands: "{\"version\ \":\"1.0.2\",\"steps\":[{\"action\":\"wait_for\",\"stable\":true,\"timeout_ms\":5000}, {\"action\":\"observe\",\"include\":[\"ui_tree\"]}]}"} App is running - there's a location permission dialog. Let me handle it and set up task tracking. Seasoning (34s - 395 tokens) Add 2-3 places with different statuses, tags, ratings, photos verify map view - pins and pin details Collections - create, add places, browse Discovery - check Discover tab and Near Me Profile - verify stats and saved places Edit & delete a place esc to interrupt | ctrl-t to hide tasks iPhone 17 Pro iOS 18.2 00:33 @user_pS9dXJxC 2 places Map List Allow "Wanderlist" to also use your location even when you are not using the app? Wanderlist uses your location in the background to alert you when you're near saved places on your list. Keep Only While Using Change to Always Allow Discover My Map Collections Profile Add Place Search for a place... Current location Pick on map Save Place Blue Bottle Coffee Market St, San Francisco, CA, United States +1 (415) 653-3394 bluebottlecoffee.com View on Google Maps Status Done To Try Tags Restaurant Hotel Shopping Friend Bar Cafe Museum Park + New tag Note Add Place Search for a place... Golden Gate Park Golden Gate Park Stanyan St, San Francisco, CA, United States - 6.9km Save Place Golden Gate Park Stanyan St, San Francisco, CA, United States +1 (415) 631-2700 sfrecpark.org View on Google Maps Status Done To Try Save to my map Add Place Search for a place... Golden Gate Park Golden Gate Park Stanyan St, San Francisco, CA, United States - 6.9km SFMONA Found. Let me select it, set as "To Try" with "Museum" tag. 3 places saved! I can see: - Blue Bottle Coffee pin on the map - San Francisco Museum of Modern Art (SFMOMA) pin on the map - Golden Gate Park (off-screen, further west) - Counter shows "3 places" Verifying map view. (3s - 2.7k tokens) Add 2-3 places with different statuses, tags, ratings, photos Verify map view - pins and pin details Collections - create, add places, browse Discovery - check Discover tab and Near Me Profile - verify stats and saved places Edit & delete a place Place Details Done Blue Bottle Coffee Market St, San Francisco, CA, United States +1 (415) 653-3394 bluebottlecoffee.com Your Save To Try Cafe Edit Delete @user_pS9dXJxC 2 places Map List Done To Try Restaurant Hotel Shopping San Francisco Museum of Modern Art 3rd St, San Francisco, CA, United States To Try Museum Golden Gate Park Stanyan St, San Francisco, CA, United States To Try Park Blue Bottle Coffee Market St, San Francisco, CA, United States Done Restaurant Cafe Discover My Map Collections Profile Collections + No collections yet Create Collection Cancel New Collection Create SF Weekend Trip 0 places Cancel Add Places Add (2) San Francisco Museum of Modern Art 3rd St, San Francisco, CA, United States Golden Gate Park Stanyan St, San Francisco, CA, United States Blue Bottle Coffee Market St, San Francisco, CA, United States Discover Restaurants Cafes Bars Hotels @user_pS9dXJxC Profile Sign Out N nothing special 3 Places 1 Collections My Collections SF Weekend Trip 2 places Discover My Map Collections Profile Place Details Done Blue Bottle Coffee Market St, San Francisco, CA, United States +1 (415) 653-3394 bluebottlecoffee.com Your Save Done Restaurant Cafe Edit Delete Place Details Done Blue Bottle Coffee Market St, San Francisco, CA, United States +1 (415) 653-3394 bluebottlecoffee.com Your Save Done Restaurant Cafe Edit Delete @user_pS9dXJxC 2 places Map List Done To Try Restaurant Hotel Shopping San Francisco Museum of Modern Art 3rd St, San Francisco, CA, United States To Try Museum Blue Bottle Coffee Market St, San Francisco, CA, United States Done Restaurant Cafe 1. Collections Pass 2. Map view Pass 3. Discover Pass 4. Discovery Discover tab shows Near Me results sorted by distance (3M-99M+) with category filters (Restaurants, Cafes, Bars, Hotels, Museums, Parks, Shopping, Attractions). Each result has a quick-add (+) button. 5. Profile Shows avatar, username, bio, stats (3 Places, 1 Collection), and "My Collections" section. Stats are accurate. 6. Edit & delete Edited Blue Bottle Coffee: changed status to Try -> Done, added Restaurant tag. Deleted Golden Gate Park - removed immediately, counter updated to 2 places. Observations - No confirmation dialog on delete - tapping Delete removes the place instantly. Consider adding a confirmation alert to prevent accidental deletions. - Status toggle UX - the "To Try" / "Done" toggle works but the accessibility state ([selected]) didn't always update in the tree immediately, though the save reflected correctly. - Note field - the note text field was visible on the save form but tapping it didn't open the keyboard reliably on first attempt. Scrolled for 27s For shortcuts
- Camera
- Static overhead shot, maintaining focus on the terminal and simulator.
- Motion
- Automated UI interactions (taps, scrolls, text input) on the iOS simulator, synchronized with real-time log output in the terminal, demonstrating the AI's testing process.
Feature Teaser
Comprehensive Bug Reporting
“(No spoken dialogue — ambient typing sounds, subtle UI clicks)”
- On screen
- Debug Wanderlist on simulator and test all major flows 1. Add places - add 2-3 places with different statuses (Done / To Try), tags, ratings, and Photos. 2. Map view - verify places appear on the map with correct pins, tap a pin to open details 3. Collections - create a collection, add places to it, open and browse the collection 4. Discovery - check the Discover tab, try Near Me 5. Profile - open Profile, verify stats and saved places show correctly 6. Edit & delete - edit a place's details, then delete a place and confirm it's removed Observations - No confirmation dialog on delete - tapping Delete removes the place instantly. Consider adding a confirmation alert to prevent accidental deletions. - Status toggle UX - the "To Try" / "Done" toggle works but the accessibility state ([selected]) didn't always update in the tree immediately, though the save reflected correctly. - Note field - the note text field was visible on the save form but tapping it didn't open the keyboard reliably on first attempt. I'm done. Here's the full bug report. Bug Report App: Wanderlist Version: 1.0.2 Device: iPhone 17 Pro (iOS 18.2) Test Date: 2024-05-15 Tester: Claude Code v2.1.95 (Opus 4.6) Summary: Claude Code successfully tested all major flows of the Wanderlist app on an iOS simulator. It identified several UX and accessibility issues, and confirmed core functionality. Detailed Findings: 1. **Flow: Add places** - **Status:** Pass - **Details:** Successfully added 3 places with varying statuses (Done/To Try), tags, and photos. Map view correctly displayed pins and details for saved places. 2. **Flow: Collections** - **Status:** Pass - **Details:** Created a new collection ("SF Weekend Trip") and added 2 places to it. Collection browsing and management worked as expected. 3. **Flow: Discovery** - **Status:** Pass - **Details:** The "Near Me" feature in the Discover tab functioned correctly, displaying results sorted by distance with category filters. Quick-add button was present. 4. **Flow: Profile** - **Status:** Pass - **Details:** Profile screen displayed accurate user information (avatar, username, bio, stats) and listed "My Collections" correctly. 5. **Flow: Edit & Delete** - **Status:** Partial Pass (UX/Accessibility Issues) - **Details:** - **Bug 1: Instant Delete (UX Issue)** - **Description:** Tapping the "Delete" button for a saved place immediately removes it without a confirmation dialog. This can lead to accidental data loss. - **Severity:** Medium - **Recommendation:** Implement a confirmation alert before deleting a place. - **Bug 2: Status Toggle Accessibility (Accessibility Issue)** - **Description:** While the "To Try" / "Done" status toggle visually updates and saves correctly, its accessibility state ([selected]) in the UI tree does not always reflect the current state immediately after interaction. - **Severity:** Low - **Recommendation:** Ensure the accessibility state of the toggle updates synchronously with its visual and functional state. - **Bug 3: Note Field Keyboard (UX Issue)** - **Description:** On the "Save Place" form, the "Note" text field was visible but tapping it did not reliably open the iOS keyboard on the first attempt, requiring multiple taps. - **Severity:** Low - **Recommendation:** Investigate and fix the keyboard activation issue for the note field. Conclusion: Claude Code successfully executed the test plan, validating core functionalities and identifying actionable improvements for user experience and accessibility. The app is stable but would benefit from addressing the identified issues. iPhone 17 Pro iOS 18.2 00:41 @user_pS9dXJxC 2 places Map List Done To Try Restaurant Hotel Shopping San Francisco Museum of Modern Art 3rd St, San Francisco, CA, United States To Try Museum Blue Bottle Coffee Market St, San Francisco, CA, United States Done Restaurant Cafe Discover My Map Collections Profile
- Camera
- Static overhead shot, maintaining focus on the terminal and simulator.
- Motion
- The terminal transitions from live log output to a structured, detailed bug report, while the iOS simulator remains static, showcasing the AI's analytical capabilities.
Call to Action
The Future of iOS Testing
“(No spoken dialogue — ambient typing sounds, subtle UI clicks)”
- On screen
- CLAUDE CODE CAN NOW TEST YOUR ENTIRE IOS APP ON ITS OWN. EVERY SCREEN. EVERY FLOW. DEBUG LOGS AND A FULL BUG REPORT AT THE END. 0xMarioNawfal
- Camera
- The camera slowly zooms out from the desktop setup, revealing the full context of the work environment.
- Motion
- A slow, deliberate zoom-out combined with a fade-in of a bold, impactful text overlay, emphasizing the product's core value proposition and creator.
Motion design primitives
Synthesizable in Remotion · key components of the ai-dev-tool-showcase template.
DualTerminalRaceSplit
A split-screen layout where a terminal window on the left displays rapidly scrolling text (logs, commands) while an iOS simulator on the right shows synchronized UI interactions.
+ Code construction recipe
Use `AbsoluteFill` for the background. Implement two `Sequence` components side-by-side. The left `Sequence` will render `CodeSurfer` or a custom text component with `typewriter` effect and `scroll` animations. The right `Sequence` will render `Img` or `Video` components for the iOS simulator, precisely timed with `spring` or `tween` for taps and scrolls.
AutomatedUITap
A subtle, precise visual indicator (e.g., a small circle or ripple effect) appears on the iOS simulator screen, mimicking a finger tap, followed by the corresponding UI element reacting.
+ Code construction recipe
Overlay a `Circle` or `Ripple` component on the `Video` or `Img` of the iOS simulator. Animate its `opacity` from 0 to 1 and back to 0, and its `scale` from 0.5 to 1.2, using a `spring` animation with high damping for a quick, responsive feel. Position it using `absolute` coordinates relative to the UI element being tapped.
DynamicBugReportScroll
A terminal window transitions from live, fast-scrolling code/logs to a static, structured bug report, which then slowly scrolls to reveal detailed findings.
+ Code construction recipe
Utilize a `TransitionSeries` to switch from the `CodeSurfer` component (fast scroll) to a static `Text` component displaying the bug report. Implement a `scroll` animation on the bug report `Text` component, using `interpolate` with a `linear` easing for a smooth, readable reveal of the content over a longer duration.
Style DNA & aesthetic system
Dimension
Style DNA
Craft detail
Visual aesthetic
A clean, functional, and highly technical aesthetic, combining the raw utility of a developer terminal with the polished interface of an iOS app. The visual focus is on clarity and direct demonstration of functionality.
—
Typography
Monospace fonts are predominantly used for the terminal output, conveying a technical and precise feel. Sans-serif fonts are used for the iOS UI, maintaining a modern and clean aesthetic. The final call-to-action uses a bold, impactful sans-serif for emphasis.
—
Motion
Pacing is deliberate and functional, driven by the speed of the AI's execution and the readability of the terminal output. Interpolation curves are generally `linear` for text scrolls and `ease-in-out` for UI interactions, reflecting a precise, automated process.
—
Special effects
Minimal special effects; emphasis on direct screen capture and clear text rendering. No overt shaders, dither, scanlines, or lens blur. Subtle motion blur on UI transitions is implied by the simulator's native animations.
—
Pacing & rhythm
The video maintains a consistent, steady rhythm with a single scene cut across its 67.5-second duration (1 cuts/minute), creating a continuous, uninterrupted demonstration flow. The internal pacing is dictated by the AI's task execution speed.
—
Conceptual story rhythm
- 1
Setup & Task Definition
Purpose. Introduce the AI and the testing objective, setting the stage for the demonstration.
Execution. Terminal displays initial setup commands and a clear list of test flows for the 'Wanderlist' app.
- 2
Automated Execution
Purpose. Showcase the AI's capability to autonomously navigate and interact with the iOS app.
Execution. Real-time, synchronized interaction between the scrolling terminal logs and the iOS simulator performing various app functions (adding places, creating collections, etc.).
- 3
Analysis & Reporting
Purpose. Highlight the AI's ability to identify issues and generate a comprehensive bug report.
Execution. Terminal output transitions from live logs to a detailed, structured bug report, listing findings and recommendations, while the simulator remains static.
- 4
Value Proposition & CTA
Purpose. Summarize the core benefit of the technology and call the viewer to action.
Execution. Slow zoom-out revealing the full desktop setup, overlaid with a bold, concise text statement about the product's power and the founder's name.
Remix in Animatiq Studio
Master remix prompt · agent-ready
Recreate the 'AI-Driven iOS App Testing' video style for a new product, 'QuantumFlow', a developer tool for optimizing cloud infrastructure. Maintain the split-screen terminal and UI demonstration, but adapt the UI to a web-based dashboard. The terminal should show real-time resource allocation and optimization commands, while the web UI dynamically updates with performance metrics and infrastructure changes. Conclude with a similar impactful text overlay and a subtle zoom-out.
Sample remix
Objective
Demonstrate 'QuantumFlow', a cloud infrastructure optimization tool.How the recipe adapts
The split-screen will feature a Linux terminal on the left, displaying `kubectl` commands and QuantumFlow's optimization algorithms. The right side will show a web-based dashboard with real-time graphs and resource utilization metrics. Automated 'taps' will become 'clicks' on dashboard elements, triggering command-line actions. The final bug report will be replaced by a 'Performance Report' detailing efficiency gains.Remix blueprint · ai-dev-tool-showcase
Scene durations (4 scenes, 67s)
4s
16s
25s
22s
Key Remotion components
Related Developer Tools Product Launches
Explore all Developer Tools launches →
Hook 8.9204.0M
SpaceXAIDeveloper Tools
xAI opens voice cloning on its API: build a custom voice in about two minutes or pick from 80+ voices in 28 languages.
@SpaceXAI
Hook 9.178.3M
ClaudeDeveloper Tools
Claude can now operate your Mac, opening apps, browsing and filling spreadsheets, as a research preview in Cowork and Claude Code.
@claudeai
Hook 8.873.2M
xAIDeveloper Tools
Agentic CLI for coding, building apps, and automating workflows.
@SpaceXAI