View prompt

The user wants me to create a 20-second recruiting animation for their AFL (Arena Football League) team called “Puerto Rico Coquis” in Roblox, using the 12 panels shown in the image as storyboard frames. Let me look at what’s in the image: • 12 panels in a 4x3 grid showing a Roblox-style football recruiting video storyboard • The team is “Puerto Rico Coquis” • Features a Roblox character in navy blue jersey with red/white accents, number 5 • Various scenes: Puerto Rico beach, San Juan street, stadium tunnel, football action shots • Final panel displays the “Puerto Rico Coquis - NOW RECRUITING” logo I’ll build an HTML animation that sequences through these 12 panels over 20 seconds with cinematic transitions and text overlays, using the navy, red, and white color scheme to capture the team’s branding and the visual storytelling from the storyboard. Building the animation structure… Writing the animation code… - Fog and mist effects plus stadium audio cues for immersion Then I’m mapping out the remaining scenes: a close-up of the navy helmet with the red stripe and white star, the stadium hero shot with dramatic lighting and fog, the low-angle snap action with motion blur, the impact moment with turf flying, a shadowy close-up showing the player’s number and direct eye contact, the team formation under blazing lights, and finally the “NOW RECRUITING” finale. For the final scene, I’m layering in the logo reveal with the coqui frog, Puerto Rico flag, team name, and a shine effect to make it pop as the call to action. Building out the React component with state management for scene timing and CSS animations… I need to think through the structure more carefully—I want each of the 12 scenes to flow smoothly over 20 seconds with cinematic transitions, using bold athletic fonts and the team colors to create that Roblox recruiting video energy. I’m planning to use injected keyframe animations and className-based styling to handle the transitions between scenes.