A product loop for a website hero is a short silent clip whose last frame matches its first, so it can play on repeat without a visible jump. On 8frame you get it by giving one approved product still to a video node as both the start image and the end frame, on a model that accepts an end frame, then trimming and compressing the file for the page. The limit people do not expect: the default Kling model (Kling v3) takes no end frame, and the models that do return files from about 3 MB to over 30 MB for 10 seconds, so the model you pick decides your page weight as much as your picture.
A hero loop has three jobs: show the product moving, start instantly, and not slow the page. Generation solves the first. The other two are delivery problems, and they shape which model and which length you choose.
TL;DR
| Step | Node or model on 8frame | Fixed price | Needs as input |
|---|---|---|---|
| Hero still | Nano Banana 2 | 11 credits per image at 1K, 17 at 2K | Your product photo and a prompt |
| Loop, 1080p, no audio track | Kling 2.5 Turbo Pro | 48 credits for 5 s, 95 for 10 s | The still as start image and end frame |
| Loop, 720p, smaller file | Kling O3 | 57 credits for 5 s silent | The still as start image and end frame |
| Loop, 480p or 720p | Seedance 2.5 | 70 / 157 credits for 5 s | The still as start image and end frame |
| Compress and strip audio | Your own encoder | no credits | The downloaded file |
The board, node by node
There is no hero-loop template on 8frame yet; this is a small board you build once and reuse per product. Neighbouring recipes cover the still itself (product hero shot to motion) and planning a full demo (how to storyboard a product demo). This page is about the loop and the file.
1. One approved still
Make or pick the still that will open and close the loop: the product in its final position, at the hero's ratio (16:9 for a desktop hero, often a separate 9:16 for mobile), with clean space where the headline sits. This frame is what visitors see most, because it is both the first frame and the poster image while the video loads, so treat it as the hero image in its own right.
2. Make the loop
Connect the same still as start image and end frame on a model that takes an end frame on the canvas (the list is on first and last frame in AI video; the Kling tool opens on Kling v3, which does not, so switch model first), prompt a motion that returns to where it started, and play the download on repeat to check the seam. The loop basics page covers which subjects loop easily and what to do when a seam will not close. For a hero, two extra choices matter: keep the motion small enough that the headline over it stays readable, and keep the product's position fixed so the layout around it does not seem to move.
3. Make the mobile version on purpose
A desktop hero is usually wide and a phone hero is tall, and cropping a 16:9 loop to 9:16 often cuts the product or leaves it too small. Make a separate 9:16 still from the same product photo, with the product higher in the frame so the headline fits under it, and make its own loop. Serve the vertical file to small screens with a media query or a <source> choice. On a phone the page also loads over mobile data, so this is the file where a lower resolution and a lower bitrate pay off most.
4. Choose the poster
The poster image shows until the video starts, and on a slow connection or with data saver on it may be all a visitor sees. Use the approved still from step 1, exported as a compressed image at the size the hero displays. Because the loop starts and ends on that same frame, the switch from poster to video does not jump.
5. Prepare the file for the page
8frame does not re-encode video: the download is the provider's file, H.264 in MP4 at 24 fps. For a hero you will usually re-encode it yourself for the web, remove the audio track, and set the poster image to the still from step 1.
Which model for which step
The table below joins end-frame support with what we measured in generated files on 8frame (median bitrate over 120 days, template examples excluded). Size for 10 seconds is the median bitrate times 1.25 MB; halve it for 5 seconds.
| Model | End frame | Resolution | Median bitrate | About 10 s at the median | Audio track in files | Price |
|---|---|---|---|---|---|---|
| Kling 2.5 Turbo Pro | Yes | 1080p | 26.3 Mbps | 33 MB | None in our sample | 48 for 5 s, 95 for 10 s |
| Kling O3 | Yes | 720p | 6.9 Mbps | 9 MB | None in our sample (sound off by default) | 57 silent, 76 with sound for 5 s |
| Seedance 2.5, 720p | Yes | 720p | 12.3 Mbps | 15 MB | Yes | 157 for 5 s |
| Seedance 2.5, 480p | Yes | 480p | 2.8 Mbps | 3.5 MB | Yes | 70 for 5 s |
| Seedance 2.0, 720p | Yes | 720p | 4.7 Mbps | 6 MB | Yes, in most files | 108 for 5 s |
Three things follow from this table that are easy to miss.
The sharpest file is also the heaviest. Kling 2.5 Turbo Pro gives 1080p and files around 33 MB for 10 seconds, more than most hero budgets allow without re-encoding. That is fine as a master; it is not what you ship.
Bitrate is not resolution. Seedance 2.5 at 720p measured more than twice the bitrate of Seedance 2.0 at 720p. Two clips of the same size on screen can differ by a factor of two on disk.
Audio tracks matter for autoplay. Seedance files come with an audio track; Kling 2.5 Turbo Pro and O3 files in our sample did not. That changes what the browser allows, below.
The full table for all models is in AI video file size by model. These are medians of what came out, not a promise for your clip; check the file you download.
Where it breaks
- Default model has no end frame. Kling v3 is the Kling tool's default and cannot take one. Switch to Kling 2.5 Turbo Pro or O3, or use Seedance with a start image.
- Lengths are fixed per model. Kling 2.5 Turbo Pro makes 5 or 10 seconds; Kling O3 takes 3 to 15. A loop shorter than the model allows means trimming, and a trim moves the seam away from the matched frame.
- No 4K video and no video upscaler. Video on 8frame tops out below 4K, and Topaz, BRIA and Clarity upscale images only. For a very large hero, generate at 1080p and let the still carry the sharpness as poster.
- The seam can drift. The end frame is a target. If the last frame differs slightly from the first, a short cross-fade in your editor at the loop point hides it, at the cost of a second of blended frames.
- Fine text on the product. Labels can change in motion and come back in the end frame, which makes the seam obvious. Keep lettering small in the frame or out of it; the composite fix is in why AI changes a product label.
The browser rules a hero loop has to follow
A hero that does not start on its own is a still with a play button. Browsers decide that, not your page.
Chrome. Chrome's autoplay policy says: "Muted autoplay is always allowed." Autoplay with sound needs the user to have interacted with the domain, or on desktop a Media Engagement Index above Chrome's threshold. A hero loop is silent, so mark it muted.
Safari on iPhone. WebKit's policy says <video> elements "will be allowed to autoplay without a user gesture if their source media contains no audio tracks", and that <video muted> elements are also allowed. On iPhone, <video playsinline> lets the clip play in place instead of going fullscreen.
Put together for a hero: autoplay muted loop playsinline, a poster image, and a file with the audio track removed. Removing the track (not only muting it) also saves bytes, and it means the WebKit rule is met by the file itself. If your loop came from Seedance, strip the audio when you re-encode; if it came from Kling 2.5 Turbo Pro or O3 without sound, check the file anyway, since our figure is a sample share, not a guarantee.
If the same clip also goes on a Shopify product page, Shopify accepts product videos up to 10 minutes, up to 1 GB, up to 4K, as MP4, MOV or WebM, so the store is not the constraint; your page speed is.
FAQ
How do I make an AI video loop without a visible jump? Use the same still as start image and end frame on a model that accepts an end frame on the canvas, such as Kling 2.5 Turbo Pro, Kling O3 or Seedance with a start image, and prompt motion that naturally returns to the start.
Why won't my hero video autoplay on iPhone?
Safari autoplays without a tap only if the video is muted or its file has no audio track, and plays inline only with playsinline. Add muted and playsinline, and strip the audio track when you re-encode.
Which model gives the smallest file? In our measurements, Seedance 2.5 at 480p and Seedance 2.0 at 720p had the lowest bitrates among end-frame models, about 3.5 MB and 6 MB for 10 seconds at the median. Re-encoding usually matters more than the model.
Does 8frame compress the video for web? No. 8frame does not re-encode video; you download the provider's H.264 MP4 at 24 fps and compress it yourself for the page.
How long should a hero loop be? Long enough for one complete motion, often 5 seconds. Longer loops weigh more and give the seam more frames to drift over.
Sources
- 8frame prices, defaults and limits: the 8frame app, checked 2026-11-09 (Nano Banana 2, Kling 2.5 Turbo Pro, Kling O3, Seedance 2.5, Seedance 2.0; end-frame support per model on the canvas)
- Median bitrate, size at 10 s, codec, frame rate and output resolution by model: 8frame read-only check of generated video files, 120 days to 2026-09-30, template examples excluded (shares and medians only)
- Audio track in output files by model: 8frame read-only check, 120 days to 2026-10-02 (shares only)
- "Muted autoplay is always allowed" and the sound conditions: Chrome for Developers, Autoplay policy in Chrome, checked 2026-11-09
- Autoplay without a gesture for media with no audio tracks or
muted, andplaysinlineon iPhone: WebKit, New video policies for iOS (2016-07-25), checked 2026-11-09 - Shopify product video limits, up to 10 minutes, 1 GB, 4K, MP4, MOV or WebM: Shopify Help Center, Product media types, checked 2026-11-09
Try it without signing up: the 8frame canvas opens on a real board. The canvas is free and unlimited; generation is paid from $19/month.