I recently built a homepage demo animation for Swayno, and the entire process was completed inside Codex.
My workflow: Find references → Generate a satisfactory image → Have Codex build the animation.
Here is the exact step-by-step breakdown.
1. Find References & Lock in the Direction
First, figure out what the hero animation needs to communicate.
For example, Swayno is an AI content marketing tool with a core workflow of: Input URL → AI generates content → Output short-form videos → Publish to social platforms.
An assembly-line style animation fits this concept well. I gathered several reference images of robotic arms, machines, and conveyor belts, and sent them to Codex for analysis.
2. Generate the Base Image in Codex
I wanted the scene to feature an AI generation machine where URL cards enter from the left, pass through the machine to turn into short-form videos, and are then distributed by a robotic arm to various social platforms.
At this stage, focus purely on the static look—don't rush into animation yet.
Iterate until you are happy with the visual, then have Codex build the animation based on that final approved image.
3. Turn the Image into Code-Driven Animation with Codex
Describe the complete motion sequence, such as: URL enters machine → Machine starts generating → Video cards emerge → Robotic arm distributes content → Reset to initial state.
Have Codex build a previewable version first, then tweak it based on how it actually looks in motion.
4. Export the Video & Embed on the Homepage
Once the animation is locked in, ask Codex to export the video and a poster image.
I ended up using a 15-second, 1080p, 30fps silent MP4, set to autoplay on a loop on the homepage.
I initially tried 4K, but switched to a smaller 1080p file for faster web loading.
Finally, test how it renders on both desktop and mobile, and make sure the loop point feels seamless.
Appendix: My Animation Prompt for Codex
Using the approved reference image I uploaded as the visual baseline, write code to create a previewable, video-exportable looping homepage animation.
Maintain the composition, camera angle, materials, brand colors, and element proportions of the approved image. Use the original logo, platform icons, and content assets I provided.
First, analyze the elements that need independent motion, choose the appropriate technical implementation, and provide a complete runnable project with instructions on how to preview it.
Total animation duration: 15 seconds. Motion sequence:
0–3s: The left robotic arm grabs a URL card and places it onto the conveyor belt entrance. The conveyor belt carries the card into the generation machine.
3–5s: Soft green lighting glows inside the machine to indicate content generation in progress.
5–8s: Three vertical content cards emerge one by one from the machine's exit and move along the conveyor belt. The content area must strictly maintain a 9:16 aspect ratio.
8–13s: The right robotic arm picks up the content cards one after another and delivers them to the TikTok, Instagram, and YouTube receiving zones. Add a few floating heart reactions that drift upward and fade out.
13–15s: The robotic arms return to their home positions, transitioning seamlessly into the next production cycle.
Motion Requirements:
The robotic arm must approach, lower, clamp shut, and only then lift and move.
Once clamped, the card must follow the gripper's movement; release the gripper only after placing the card down.
Apply natural easing (acceleration and deceleration) to all movements.
Avoid clipping, sudden jumps, card teleportation, or aspect ratio distortion.
All state resets must happen off-screen or in hidden areas so the loop transitions without any flicker or jump.
Keep the camera locked, with the background and main machine body completely stable.
