Factory · Launch Video Breakdown: Hook, Pacing & Motion Design

Scene-by-scene timeline & spoken transcript

1. 0:00 – 0:04

   The Hook

   App Launch & Initial Task

   “(No spoken dialogue — The track begins with a sustained, evolving pad sound, creating an atmospheric and slightly mysterious feel. At [00:04], a subtle, high-frequency riser begins to build.)”

   On screen

   Factory

   Camera

   Static overhead shot of a desktop, then a quick zoom into the app icon, followed by a click and a smooth transition into the application window.

   Motion

   Zoom-in, click animation, smooth window reveal.

2. 0:04 – 0:10

   Product Reveal

   AI Agent Workflow Generation

   “(No spoken dialogue — A soft sub-bass drop/impact at [00:05]. This pattern repeats with a more pronounced riser at [00:08] and a stronger sub-bass impact at [00:09].)”

   On screen

   Migrating Auth Service to gRPC with Protobuf acme-productions Migrate the auth service from REST to gRPC. Keep the REST endpoints working as a fallback. Let me start by exploring the current auth service structure. Explore codebase structure Audit auth middleware usage across the codebase Good — the existing REST service has four endpoints: POST /auth/login, POST /auth/register, POST /auth/validate-token, and POST /auth/refresh-token. Let me check where that middleware is consumed before I start the proto definitions. Grepp "requireAuth|requireRole" in ../Local-Projects/Acme-Productions/src/... Generate gRPC server stubs with buf Proto definitions are in place. Running buf generate to compile TypeScript stubs. Execute cd "/Users/kal/Acme-Productions" && npx buf generate 2-4-1 khrd/... Create Users/kal/Acme-Productions/src/generated/auth/v1/auth.ts Wire gRPC server into existing entrypoint alongside REST fallback Edit .../services/grpc/index.ts Here's what was done: 1. Explored the existing REST auth service — four endpoints (login, register, validate-token, refresh-token) using Express, bcrypt, JWT, and Prisma. 2. Generated TypeScript stubs in src/generated/auth/v1/auth.ts — types for all request/response messages plus the AuthService/AuthService service definition and AuthServiceClient interface compatible with @grpc/grpc-js. 3. Implemented the gRPC server in src/services/auth/grpc/server.ts — all four RPCs mirror the REST logic with proper gRPC status codes, refresh token rotation, login attempt tracking, and peer IP extraction. 4. Updated src/services/auth/index.ts to export both the existing authRouter (REST fallback) and a new GrpcServer() function that starts the gRPC server on AUTH_GRPC_PORT (default 50051).

   Camera

   Static shot of the application window. Text content rapidly generates and expands within the window.

   Motion

   Rapid text generation, content expansion, list item reveal.

3. 0:10 – 0:22

   Feature Teaser

   Multi-Tasking & Context Switching

   “(No spoken dialogue — A new, more rhythmic element is introduced at [00:10] with a pulsing, low-frequency synth. At [00:14], a distinct high-energy sweep begins, culminating in a significant sub-bass drop/impact at [00:15]. Another high-energy sweep and riser build from [00:20] to [00:21], followed by a powerful sub-bass drop/impact at [00:22].)”

   On screen

   SESSIONS acme-productions Migrating Auth Service to gRPC wit... Now Implement dashboard from Figma 2m Building Multi-Tenant Data Pipeline... 4m Refactoring Event-Driven Architecture... 10m Designing Rate Limiter with Redis... 1h acme-web Fixing Hydration Mismatch in Product C... 2d Migrating from Webpack to Vite 2d Adding Dark Mode Toggle with CSS... 3d backend local-demos Done Pulled the dashboard layout from Figma and identified all components — stat cards, activity feed, and avatar stack pattern Mapped 4 stat card variants to existing StatCard component Identified activity feed items and avatar stack pattern here's the figma link for the new dashboard. implement the full page — the stat cards, activity feed, and chart components Extract dashboard layout and build stat cards, activity feed, and chart components Skill("figma-implement-design") figma / get design context (node: "412:8801") figma / get screenshot (3) figma / search design system ("StatCard") figma / get design context (node: "412:8934") figma / get screenshot (6) figma / get variable defs (node: "412:8801") Ask User Something's taking shape... Build the stat cards row with KPI data from the Figma layout Implement the activity feed with timeline and avatar components Add the area chart section with responsive breakpoints from Figma auto-layout

   Camera

   The camera pans and zooms slightly to highlight different sections of the application, specifically the 'Sessions' sidebar and the main content area, as new tasks are generated and completed.

   Motion

   Smooth pan and zoom, content generation, progress indication (checkboxes, text updates).

4. 0:22 – 0:31.9

   Call to Action

   Seamless AI Integration

   “(No spoken dialogue — The track continues with a driving beat and layered synth textures, building intensity. A final, extended high-energy riser and sweep begins at [00:28], leading to a climactic sub-bass drop/impact and a sustained, resonant synth chord at [00:30], which then fades out.)”

   On screen

   SESSIONS acme-productions Implement dashboard from Figma Now Migrating Auth Service to gRPC wit... 2m Building Multi-Tenant Data Pipeline... 4m Refactoring Event-Driven Architecture... 10m Designing Rate Limiter with Redis... 1h acme-web Fixing Hydration Mismatch in Product C... 2d Migrating from Webpack to Vite 2d Adding Dark Mode Toggle with CSS... 3d backend local-demos Done Pulled the dashboard layout from Figma and identified all components — stat cards, activity feed, and chart components Mapped 4 stat card variants to existing StatCard component Identified activity feed items and avatar stack pattern here's the figma link for the new dashboard. implement the full page — the stat cards, activity feed, and chart components Extract dashboard layout and build stat cards, activity feed, and chart components Skill("figma-implement-design") figma / get design context (node: "412:8801") figma / get screenshot (3) figma / search design system ("StatCard") figma / get design context (node: "412:8934") figma / get screenshot (6) figma / get variable defs (node: "412:8801") Ask User Something's taking shape... Build the stat cards row with KPI data from the Figma layout Implement the activity feed with timeline and avatar components Add the area chart section with responsive breakpoints from Figma auto-layout

   Camera

   The camera continues to pan and zoom, showcasing the completion of tasks and the dynamic nature of the AI agent's work within the application. The final shot is a wider view of the completed tasks.

   Motion

   Dynamic content updates, subtle camera movements, progress visualization.