Animated Banner
A reusable animated banner pattern built from a generated poster, short video loop, gradient overlay, and compact call to action.
Generate the still
Use an image-generation model like GPT Images 2. You can also browse model hosts like Replicate for other image models. Ask for a wide cinematic banner image with the main subject weighted toward the right so the left side has room for text.
Animate the still
Send the still into an image-to-video model like Grok Imagine. You can also compare other image-to-video models through places like Replicate. Generate a short seamless clip, around three to five seconds, with subtle motion rather than a dramatic scene change.
Export the assets
Save the still as a JPG or WebP poster and the animation as a muted MP4. Put both files in public paths that the component can reference directly.
Optimize for the web
Resize the poster to the largest size the banner actually needs, strip metadata, and compress it. Re-encode the video to a small H.264 MP4, trim it to only a few seconds, and keep the file comfortably under a few megabytes.
Create the banner frame
Build a relative, overflow-hidden link or div with a stable rounded surface. Place the video absolutely inside it with inset-0, h-full, w-full, object-cover, muted, loop, playsInline, and the poster image as fallback.
Add the overlay
Add a gradient overlay div above the video. Use a CSS variable for the overlay color, then fade from a solid color on the text side to transparent over the image side.
Add interaction depth
Add a second hover and focus overlay if you want the text side to become stronger when the banner is interactive.
Compose the content
Place the content in a relative z-index layer above the overlays. Keep the title, balanced subtitle, CTA, and timer in a flex row so the text and timer stay aligned.
Check responsiveness
Use width constraints on the subtitle and banner container. Test desktop and mobile widths to make sure the timer and text do not overlap.
Built as part of my work on
Want to work with me?
I run a lil design engineering studio in London where we do fractional design engineering for startups.