import React, { useState } from 'react'; import { useVideoState } from './useVideoState'; import { motion, useTransform, AnimatePresence, useMotionValue, useMotionValueEvent, type MotionValue } from 'framer-motion'; import { Bell, Bot, Brain, Check, ChevronLeft, ChevronRight, Film, LogOut, Menu, Plus, Send, Settings, Sparkles, User } from 'lucide-react'; import { Area, Bar } from 'recharts'; // ─── Scene Components ───────────────────────────────────────────────────── function Scene0({ time }: { time: MotionValue }) { return (

{/* ChatGPT Representation */}

ChatGPT

+ {/* Gemini Representation */}

Gemini

ChatGPT + Gemini:{" "} The FASTEST Way{" "} to Build Creative Campaigns!

); } function Scene1({ time }) { const bullet1Opacity = useTransform(time, [2.5, 3.0], [0, 1]); const bullet2Opacity = useTransform(time, [11.0, 11.5], [0, 1]); const bullet3Opacity = useTransform(time, [21.0, 21.5], [0, 1]); return (

What You'll Learn

Parallel Workflow Setup

How to combine ChatGPT for rapid drafting and Gemini for critical refinement and validation.

Strategic Tool Switching

When and why to switch between tools to leverage ChatGPT's conversational iteration and Gemini's fresh perspective.

Complete Campaign Build

An end-to-end process taking a creative brief through to a polished campaign with minimal rewrites.

); } function Scene2({ time }: { time: MotionValue }) { const fullPrompt = "I'm launching a new autumn spice latte at my independent coffee shop. I need three different creative angles for a social media campaign. Each angle should have a headline and a one-sentence description of the vibe. Keep it casual and authentic."; const typingStartTime = 17.2; const typingEndTime = 30.4; const charIndex = useTransform( time, [typingStartTime, typingEndTime], [0, fullPrompt.length], { clamp: true } ); const [displayedPrompt, setDisplayedPrompt] = useState(""); useMotionValueEvent(charIndex, "change", (latest) => { setDisplayedPrompt(fullPrompt.slice(0, Math.round(latest))); }); // Cursor blink logic const cursorBlinkOpacity = useTransform( time, (t) => { // Blink before typing starts if (t < typingStartTime) { return Math.sin(t * Math.PI * 2) > 0 ? 1 : 0; } // Visible during typing if (t >= typingStartTime && t < typingEndTime) { return 1; } // Blink after typing ends return Math.sin((t - typingEndTime) * Math.PI * 2) > 0 ? 1 : 0; } ); return (

{/* Sidebar */}

ChatGPT

My account

Settings

{/* Main Chat Area */}

{/* Header */}

Autumn Spice Latte Campaign

{/* Chat History - Empty for this scene */}

How can I help you today?

{/* Input Field */}

{/* Text and Cursor Container */}

{displayedPrompt}

ChatGPT can make mistakes. Consider checking important information.

); } function Scene3({ time }) { // Angle appearance timings const angle1Opacity = useTransform(time, [1.2, 2.2], [0, 1]); const angle2Opacity = useTransform(time, [2.2, 3.2], [0, 1]); const angle3Opacity = useTransform(time, [3.2, 4.8], [0, 1]); // Highlight timings for each angle const highlight1Progress = useTransform(time, [4.8, 7.8, 8.0], [0, 1, 0]); const highlight2Progress = useTransform(time, [8.0, 11.0, 11.2], [0, 1, 0]); const highlight3Progress = useTransform(time, [11.2, 14.2, 14.4], [0, 1, 0]); const angle1Shadow = useTransform(highlight1Progress, [0, 1], ['0 0px 0px 0px rgba(0,0,0,0)', '0 0px 0px 4px rgba(99, 102, 241, 0.4)']); const angle2Shadow = useTransform(highlight2Progress, [0, 1], ['0 0px 0px 0px rgba(0,0,0,0)', '0 0px 0px 4px rgba(99, 102, 241, 0.4)']); const angle3Shadow = useTransform(highlight3Progress, [0, 1], ['0 0px 0px 0px rgba(0,0,0,0)', '0 0px 0px 4px rgba(99, 102, 241, 0.4)']); // Input area pulse animation const inputScale = useTransform(time, [17.6, 18.0, 18.4, 23.2], [1, 1.02, 1, 1]); const inputShadow = useTransform(time, [17.6, 18.0, 18.4, 23.2], ['0 0px 0px 0px rgba(0,0,0,0)', '0 4px 12px -2px rgba(99, 102, 241, 0.4)', '0 0px 0px 0px rgba(0,0,0,0)', '0 0px 0px 0px rgba(0,0,0,0)']); return (

{/* Chat Header */}

ChatGPT

Online

{/* Chat Messages Area */}

{/* User Prompt */}

Generate three distinct campaign angles for a seasonal spiced drink, targeting different emotional connections.

{/* AI Response */}

Here are three campaign angles for your spiced drink:

{/* Angle 1 */}

1. Cozy Season Is Here

Embrace warmth and comfort with nostalgic flavors, perfect for chilly evenings.

{/* Angle 2 */}

2. Support Local, Sip Better

Connect with community and local businesses, highlighting ethical sourcing and local charm.

{/* Angle 3 */}

3. Your New Fall Ritual

Position the drink as an essential part of a daily self-care or relaxation routine.

{/* Input Bar */}

); } function Scene4({ time }: { time: MotionValue }) { const fullText = "I like the cozy angle best. Can you expand that into a full campaign concept with three Instagram post ideas?"; const typeStartTime = 0.8; const typeEndTime = typeStartTime + (fullText.length / 10); // 10 characters per second typing speed // Calculated typeEndTime = 0.8 + (118 / 10) = 0.8 + 11.8 = 12.6s const charIndex = useTransform(time, [typeStartTime, typeEndTime], [0, fullText.length], { clamp: true }); const [displayedText, setDisplayedText] = useState(""); useMotionValueEvent(charIndex, "change", (v) => { setDisplayedText(fullText.slice(0, Math.round(v))); }); // Cursor animation: invisible before typing, solid during typing, blinking after typing const finalCursorOpacity = useTransform(time, (v) => { if (v < typeStartTime) return 0; // Cursor not visible before typing starts if (v < typeEndTime) return 1; // Cursor visible and solid during typing // After typing ends, start blinking const blinkTime = (v - typeEndTime) % 0.6; // 0.6s blink cycle (0.3s on, 0.3s off) return blinkTime < 0.3 ? 1 : 0; // Visible for first 0.3s, hidden for next 0.3s }); return (

{/* Chat Header */}

Bot

ChatGPT

Settings EllipsisVertical

{/* Chat History */}

{/* Previous User Message */}

User You

Suggest campaign angles for a new coffee shop. Focus on warmth and community.

{/* Previous Bot Response */}

Bot ChatGPT

Here are a few angles for your coffee shop:

The 'Cozy Corner' Angle: Focus on comfort, warmth, and a home-away-from-home feel.
The 'Community Hub' Angle: Emphasize the shop as a gathering place for locals, events, and connection.

{/* Input Bar */}

); } function Scene5({ time }: { time: MotionValue }) { // Post 1 highlight animation const post1Scale = useTransform(time, [2.5, 3.5, 4.8], [1, 1.02, 1]); const post1Shadow = useTransform(time, [2.5, 3.5, 4.8], ['shadow-md', 'shadow-lg', 'shadow-md']); const post1BorderColor = useTransform(time, [2.5, 3.5, 4.8], ['rgb(226 232 240)', 'rgb(99 102 241)', 'rgb(226 232 240)']); // slate-200 to indigo-500 // Post 2 highlight animation const post2Scale = useTransform(time, [4.8, 5.8, 7.5], [1, 1.02, 1]); const post2Shadow = useTransform(time, [4.8, 5.8, 7.5], ['shadow-md', 'shadow-lg', 'shadow-md']); const post2BorderColor = useTransform(time, [4.8, 5.8, 7.5], ['rgb(226 232 240)', 'rgb(99 102 241)', 'rgb(226 232 240)']); // slate-200 to indigo-500 // Post 3 highlight animation const post3Scale = useTransform(time, [7.5, 8.5, 11.0], [1, 1.02, 1]); const post3Shadow = useTransform(time, [7.5, 8.5, 11.0], ['shadow-md', 'shadow-lg', 'shadow-md']); const post3BorderColor = useTransform(time, [7.5, 8.5, 11.0], ['rgb(226 232 240)', 'rgb(99 102 241)', 'rgb(226 232 240)']); // slate-200 to indigo-500 // Generic effect on all posts const genericOpacity = useTransform(time, [13.0, 13.5, 16.5], [1, 0.7, 0.7]); const genericTranslateY = useTransform(time, [13.0, 13.5, 16.5], [0, -5, -5]); // Gemini hint appearance const geminiOpacity = useTransform(time, [16.5, 17.5], [0, 1]); const geminiY = useTransform(time, [16.5, 17.5], [20, 0]); const posts = [ { title: "Post 1: The First Sip Moment", caption: "That first sip feeling... pure bliss! ☕ What's your go-to coffee order? #CoffeeLove #MorningRitual #CafeVibes", visual: "Close-up shot of hands holding a warm coffee cup, steam gently rising. Focus on the rich texture of the drink and cozy ambiance." }, { title: "Post 2: Cafe Atmosphere & Ambiance", caption: "Stepping into our cafe is like a warm hug. ✨ Find your favorite corner and let the good times brew! #CafeLife #CozyCorner #RelaxAndRecharge", visual: "Wider interior shot showcasing the cafe's aesthetic: warm lighting, comfortable seating, perhaps a few customers enjoying their drinks/laptops. Emphasize inviting atmosphere." }, { title: "Post 3: User-Generated Cozy Moments", caption: "We love seeing your moments! Share your favorite cozy memory from our cafe using #MyCozyCafeMoment and tag us! 📸 Best ones get featured! #CommunityLove #ShareYourStory #CafeCommunity", visual: "Collage or montage of diverse user-submitted photos (implied, not actual images) showing different people enjoying the cafe. Focus on authenticity and connection." } ]; const postStyles = [ { scale: post1Scale, shadow: post1Shadow, borderColor: post1BorderColor }, { scale: post2Scale, shadow: post2Shadow, borderColor: post2BorderColor }, { scale: post3Scale, shadow: post3Shadow, borderColor: post3BorderColor } ]; return ( {/* Header */}

ChatGPT Campaign Concept

Draft 1.0

{/* Campaign Posts Grid */} {posts.map((post, index) => (

{post.title}

Caption:

{post.caption}

Visual Direction:

{post.visual}

))} {/* Gemini Hint */} Bring in Gemini ); } function Scene6({ time }) { return (

Why switch to Gemini now?

{/* ChatGPT Strengths Column */}

ChatGPT Strengths

Fast drafting
Conversational iteration
Builds on context

{/* Gemini Strengths Column */}

Gemini Strengths

Fresh perspective
Alternative angles
Catches generic phrasing

); } function Scene7({ time }) { const fullPromptText = "Here's a social media campaign for a new autumn drink at an independent coffee shop. What's missing? What would make this feel less generic and more memorable?"; const charIndex = useTransform(time, [13.6, 25.1], [0, fullPromptText.length], { clamp: true, }); const [displayedPrompt, setDisplayedPrompt] = useState(""); useMotionValueEvent(charIndex, "change", (v) => { setDisplayedPrompt(fullPromptText.slice(0, Math.round(v))); }); const sendButtonOpacity = useTransform(time, [24.5, 25.1], [0, 1], { clamp: true }); const sendButtonScale = useTransform(time, [24.5, 25.1], [0.8, 1], { clamp: true }); const cursorBlinkOpacity = useTransform(time, (latest) => { const typingStartTime = 13.6; const typingEndTime = 25.1; if (latest < typingStartTime || latest > typingEndTime) { return 0; // Cursor not visible outside typing window } // Blink every 0.5 seconds return Math.floor((latest - typingStartTime) * 2) % 2 === 0 ? 1 : 0; }); return (

{/* Gemini Header */}

Gemini

{/* Chat Area */}

{/* Initial Bot Message */}

How can I help you today?

{/* Prompt Input Area */}

{displayedPrompt}

); } function Scene8({ time }) { const point1Opacity = useTransform(time, [4.0, 4.5], [0, 1]); const point2Opacity = useTransform(time, [10.0, 10.5], [0, 1]); const point3Opacity = useTransform(time, [16.0, 16.5], [0, 1]); return (

{/* Header */}

Gemini's Analysis

{/* Feedback Points */}

Inconsistent Brand Voice: Captions lack a unique tone; they could belong to any coffee shop.

Missing Signature Phrase: Suggest a tagline or phrase to tie all posts together.

Generic Visual Descriptions: Reference specific details to make the shop unique, not just "cozy cafe interior."

); } function Scene9({ time }: { time: MotionValue }) { const fullPromptText = "Based on that feedback, suggest three tagline options that could tie the campaign together. Make them short and warm."; const charIndex = useTransform(time, [5.0, 10.0], [0, fullPromptText.length], { clamp: true }); const [displayedPrompt, setDisplayedPrompt] = useState(""); useMotionValueEvent(charIndex, "change", (v) => setDisplayedPrompt(fullPromptText.slice(0, Math.round(v)))); const responseOpacity = useTransform(time, [10.5, 11.5], [0, 1], { clamp: true }); const responseY = useTransform(time, [10.5, 11.5], [20, 0], { clamp: true }); const taglines = [ "Your corner of cozy.", "Small batch. Big comfort.", "Made here. Felt here." ]; return (

{/* Header */}

Gemini AI

{/* Chat Messages Area */}

{/* Previous context (optional, but good for a starting point) */}

Okay, I've analyzed the feedback. It seems the main points are about authenticity and coziness.

{/* User Prompt */} 4.5 ? 1 : 0, y: time.get() > 4.5 ? 0 : 20 }} transition={{ duration: 0.5 }} className="flex items-start gap-3 self-end max-w-[80%]" >

{displayedPrompt} {displayedPrompt.length < fullPromptText.length && ( | )}

{/* Gemini's Response */}

Here are three tagline options:

{tagline}

); } function Scene10({ time }: { time: MotionValue }) { const fullPromptText = "I got some feedback on the campaign. Let's use the tagline 'Your corner of cozy' and make the captions feel more personal and specific. Rewrite the three Instagram captions with that in mind."; const charIndex = useTransform(time, [4.0, 9.0], [0, fullPromptText.length], { clamp: true }); const [displayedPrompt, setDisplayedPrompt] = useState(""); useMotionValueEvent(charIndex, "change", (latest) => { setDisplayedPrompt(fullPromptText.slice(0, Math.round(latest))); }); const chatMessages = [ { sender: "User", icon: , text: "Generate 3 Instagram captions for a cozy home decor brand. Focus on hygge, comfort, and warmth.", bgColor: "bg-indigo-50", textColor: "text-indigo-800", }, { sender: "ChatGPT", icon: , text: "Here are three Instagram captions for your cozy home decor brand:\n\n1. ✨ Embrace the Hygge: Wrap yourself in comfort with our latest collection. Perfect for those quiet moments at home. #CozyVibes #HyggeHome\n\n2. 🏡 Your sanctuary awaits. Discover pieces that bring warmth and serenity to every corner. Crafting comfort, one detail at a time. #HomeDecor #ComfortLiving\n\n3. ☕️ Sip, relax, and unwind. Our decor is designed to create that perfect snug ambiance. Make every day feel like a warm hug. #WarmthAndCozy #RelaxAtHome", bgColor: "bg-emerald-50", textColor: "text-emerald-800", }, { sender: "User", icon: , text: "How about some taglines for the brand?", bgColor: "bg-indigo-50", textColor: "text-indigo-800", }, { sender: "ChatGPT", icon: , text: "Certainly! Here are a few tagline options for your cozy home decor brand:\n\n- Where Comfort Lives.\n- Crafting Your Cozy Corner.\n- Embrace the Warmth. Embrace Home.\n- Your Everyday Escape.\n- Thoughtfully Designed for Comfort.", bgColor: "bg-emerald-50", textColor: "text-emerald-800", }, ]; return (

{/* Header */}

ChatGPT

{/* Chat Messages */}

{chatMessages.map((msg, index) => (

{msg.sender !== 'User' && (

{msg.icon}

)}

{msg.text}

{msg.sender === 'User' && (

{msg.icon}

)}

))}

{/* Input Area */}

{displayedPrompt} {/* Typing indicator (blinking cursor) */} {time.get() >= 4.0 && time.get() < 9.0 && ( )}

); } function Scene11({ time }) { // Animation for Caption 1 const caption1Opacity = useTransform(time, [0.0, 0.5], [0, 1]); const caption1Y = useTransform(time, [0.0, 0.5], [20, 0]); // Animation for Caption 2 const caption2Opacity = useTransform(time, [0.5, 1.0], [0, 1]); const caption2Y = useTransform(time, [0.5, 1.0], [20, 0]); // Animation for Caption 3 const caption3Opacity = useTransform(time, [1.0, 1.5], [0, 1]); const caption3Y = useTransform(time, [1.0, 1.5], [20, 0]); // Common styles for chat bubbles const userBubbleClasses = "max-w-[70%] bg-blue-500 text-white p-3 rounded-lg self-end shadow-sm"; const botBubbleClasses = "max-w-[70%] bg-slate-100 text-slate-800 p-3 rounded-lg self-start shadow-sm"; return (

{/* Chat Header */}

ChatGPT

{/* Chat Messages Area */}

{/* Previous prompt/response (summarized) */}

"Revise the Instagram captions for more personality and sensory details, ending with 'Your corner of cozy'."

"Understood! Here are the revised captions, designed to evoke a warmer, more personal connection:"

{/* Revised Captions */}

The aroma of fresh espresso, a quiet corner, and the perfect book. Some moments are just meant for you. Your corner of cozy.

Remember that first rainy Tuesday morning? The one with the warm mug and a soft blanket? Rediscover that feeling. Your corner of cozy.

From the rich, cinnamon-dusted foam to the gentle clinking of ceramic. Every detail here whispers comfort. Your corner of cozy.

{/* Chat Input Area */}

); } function Scene12({ time }) { const step1Opacity = useTransform(time, [4.0, 4.5], [0, 1]); const step1Y = useTransform(time, [4.0, 4.5], [20, 0]); const step2Opacity = useTransform(time, [8.5, 9.0], [0, 1]); const step2Y = useTransform(time, [8.5, 9.0], [20, 0]); const step3Opacity = useTransform(time, [13.0, 13.5], [0, 1]); const step3Y = useTransform(time, [13.0, 13.5], [20, 0]); const step4Opacity = useTransform(time, [17.5, 18.0], [0, 1]); const step4Y = useTransform(time, [17.5, 18.0], [20, 0]); const step5Opacity = useTransform(time, [22.0, 22.5], [0, 1]); const step5Y = useTransform(time, [22.0, 22.5], [20, 0]); const steps = [ { title: "Draft fast in ChatGPT", description: "Use its conversational interface to get ideas out quickly and explore different angles.", opacity: step1Opacity, y: step1Y, }, { title: "Iterate in ChatGPT", description: "Refine your concept through follow-up prompts, building on the context it remembers.", opacity: step2Opacity, y: step2Y, }, { title: "Validate in Gemini", description: "Paste your work and ask what's missing or what could be stronger.", opacity: step3Opacity, y: step3Y, }, { title: "Gather specific feedback in Gemini", description: "Use its suggestions to sharpen your concept and add unique elements.", opacity: step4Opacity, y: step4Y, }, { title: "Final polish in ChatGPT", description: "Bring the feedback back and revise with the full context still intact.", opacity: step5Opacity, y: step5Y, }, ]; return (

The 5-step workflow

{steps.map((step, index) => (

{index + 1}

{step.title}

{step.description}

))}

); } function Scene13({ time }) { const prompt1Opacity = useTransform(time, [8.1, 8.6], [0, 1]); const prompt2Opacity = useTransform(time, [24.6, 25.1], [0, 1]); const prompt3Opacity = useTransform(time, [36.7, 37.2], [0, 1]); const prompt1Text = "Give me three different angles for this project. Each should have a headline and a one-sentence description."; const prompt2Text = "I like this angle best. Expand that into three social posts."; const prompt3Text = "Here's my work. What's missing? What would make this less generic?"; return (

Time-saving Prompt Templates

1. Initial Brainstorm (ChatGPT)

"{prompt1Text}"

2. Idea Expansion (ChatGPT)

"{prompt2Text}"

3. Validation & Refinement (Gemini)

"{prompt3Text}"

); } function Scene14({ time }) { const chatGptLabelOpacity = useTransform(time, [12.1, 12.6, 15.4, 15.9], [0, 1, 1, 0]); const geminiLabelOpacity = useTransform(time, [15.4, 15.9, 19.1, 19.6], [0, 1, 1, 0]); const arrowRightOpacity = useTransform(time, [19.1, 19.6, 23.0, 23.5], [0, 1, 1, 0]); const arrowLeftOpacity = useTransform(time, [24.0, 24.5, 27.0, 27.5], [0, 1, 1, 0]); const workflowCentralTextOpacity = useTransform(time, [31.95, 32.45, 38.35, 38.85], [0, 1, 1, 0]); const chatGptBorderColor = useTransform(time, [12.1, 12.6, 15.4, 15.9], ['#e2e8f0', '#059669', '#059669', '#e2e8f0']); // slate-200 to emerald-600 const geminiBorderColor = useTransform(time, [15.4, 15.9, 19.1, 19.6], ['#e2e8f0', '#4f46e5', '#4f46e5', '#e2e8f0']); // slate-200 to indigo-600 const chatGptMessages = [ { type: 'ai', text: 'Drafting a campaign for a new coffee shop. Initial ideas:' }, { type: 'ai', text: '1. "Wake Up & Smell the Future" - tech-focused.' }, { type: 'ai', text: '2. "Your Daily Brew, Elevated" - premium focus.' }, ]; const geminiMessages = [ { type: 'ai', text: 'Analyzing campaign ideas. "Wake Up & Smell the Future" has high novelty but low emotional resonance.' }, { type: 'ai', text: '"Your Daily Brew, Elevated" has good resonance but needs more unique selling points.' }, { type: 'user', text: 'Suggest improvements for "Your Daily Brew, Elevated".' }, ]; return (

{/* ChatGPT Panel */}

ChatGPT

{chatGptMessages.map((msg, i) => (

{msg.text}

))} Drafting & Iteration Engine

{/* Connecting Elements */}

Switch Tools & Iterate

{/* Gemini Panel */}

Gemini

{geminiMessages.map((msg, i) => (

{msg.text}

))} Validation & Fresh Perspective

); } function Scene15({ time }) { return (

AI Unwrap

@AI-Unwrap

Subscribe for more practical AI workflows

); } // ─── Scene Error Boundary ───────────────────────────────────────────────── class SceneErrorBoundary extends React.Component< { children: React.ReactNode; sceneIndex: number }, { error: string | null } > { constructor(props: { children: React.ReactNode; sceneIndex: number }) { super(props); this.state = { error: null }; } static getDerivedStateFromError(err: Error): { error: string } { return { error: err.message }; } componentDidCatch(err: Error) { // Notify the host (StudioPlayer) so it can show the Auto-Fix / Show Code overlay try { window.parent.postMessage({ type: 'scene-boundary-error', message: err.message }, '*'); } catch (_) {} } render() { if (this.state.error) { return (

⚠️

Scene {this.props.sceneIndex + 1} rendering error

{this.state.error}

); } return this.props.children; } } // ─── App Wrapper ───────────────────────────────────────────────────────── export default function App() { const { time, sceneIndex } = useVideoState(); return (

{sceneIndex === 0 && } {sceneIndex === 1 && } {sceneIndex === 2 && } {sceneIndex === 3 && } {sceneIndex === 4 && } {sceneIndex === 5 && } {sceneIndex === 6 && } {sceneIndex === 7 && } {sceneIndex === 8 && } {sceneIndex === 9 && } {sceneIndex === 10 && } {sceneIndex === 11 && } {sceneIndex === 12 && } {sceneIndex === 13 && } {sceneIndex === 14 && } {sceneIndex === 15 && }

); }

Building a Creative Workflow: Combining ChatGPT and Gemini for Maximum Output

Create Your Own Custom Tutorial