Clothes Turn in the Browser: He Split a Six-Second AI Video Into 30 Frames

On the clothing website, the garments hang on a horizontal rail. When you move the mouse over one, the neighboring garments slide away, the selected one turns 90 degrees to face you, and when you move the mouse away it turns back. Amir Mušić built this interaction as a webpage, with the code and tutorial on GitHub. The video shows eight garments from the Sarajevo brand Molimao, and at the bottom of the page it says “From Sarajevo, with love.”

The author says the idea has accumulated more than 1 million views on social platforms. What is more interesting about the project itself is the implementation path.

Why not use 3D

The author considered 3D, but modeling, texturing, and rendering an entire catalog of clothing is another production pipeline. Simplified rendering would also change how the products look; fabric, fit, and print could all be distorted. He chose photos plus frame extraction from video: first, use catalog images to generate two anchors, a front view and a strict side view, then use LTX-2.5 Pro to generate a 6-second, 1080p, 50fps rotating video, extract about 30 frames, remove the green screen, align the hanging point, and package them into a WebP sprite sheet. The webpage selects frames along a timeline rather than playing the video directly.

The first prototype turned the garments into illustrations, with a large product name beside them. The author went back to the reference concept and made it explicit that selecting a garment must happen on a shared rail. That led to motion constraints: at rest, the garment faces the camera strictly from the side; on hover, the garment and wooden hanger turn 90 degrees together; neighbors slide away but are not dimmed; on mouse leave, it turns back in reverse; and clicking opens the product view.

For the image-generation step, the author used Codex's built-in image tool, called GPT Images 2 in the article. First, he generated a front anchor of the garment on a wooden hanger based on the catalog front image, then generated a strict side view from that accepted image. The green screen makes masking easier, but green garments must be handled separately; otherwise the fabric gets removed along with the background.

Video generation was connected into the Codex workflow through the LTX API. A local script sends the two images and a motion prompt, saves the task ID, checks for completion, and downloads the video. The website itself does not call the model. The asset request is 6 seconds, 1080p, 50fps, no audio track, with constraints for a smooth quarter turn, a fixed camera, and consistent lighting. Generation length and interaction duration are two different things; the UI will not make people wait 6 seconds.

Six seconds of footage has to be compressed to a few hundred milliseconds

Hover has an 80 ms intent delay, turning to the front takes 360 ms, and returning takes 280 ms. After speeding up the first version, the motion felt abrupt. The author adjusted acceleration, braking, and direction switching, and finally softened the first and last 30% of the motion curve without changing the total duration. Neighbors also get smooth acceleration, but are not dimmed. Dimming made the scene feel unlike physical objects, so that effect was removed.

The video looks fine at normal speed, but problems can appear after speeding it up. Lateral drift, wobble, and fold changes become more obvious at hover speed. The Cupid T-shirt and the purple M Bird T-shirt show visible wobble after acceleration. The fix is to regenerate, or to cut a clean interval from new footage. For Cupid, he used the forward turn from 2.8 to 4.5 seconds of new footage. For Forora, he used an early interval before the extra rotation occurs. The criterion is that the product stays stable and recognizable throughout the interaction. Easing can only change when frames appear; it cannot fix print distortion and wobble already baked into the frames.

Mobile and loading

Desktop relies on hover; mobile needs to distinguish between browsing and selecting. Swiping changes the selection; after it settles, the center garment turns around, and tapping opens the product view. Reverse swiping must stay continuous, and completing a swipe must not accidentally open a product.

The loading problem appeared after scaling to 10 products. On a 10 Mbps network, the side-view still frame appeared first, the animation was not ready, and the interface looked usable, but hover did nothing for about 5 seconds. The author added a real progress loading page, compressed the animation sprite sheets, and packaged them for download. In local tests, time to interactivity for 10 products dropped from 7.56 seconds to 4.67 seconds, and the download dropped from 7.80 MB to 4.49 MB. The starter with two T-shirts downloads about 0.84 MB of animation images, which expands to roughly 41 MB in pixels, and browser memory must be counted too.

Open-source starter

The repository includes two original T-shirt examples, prompts, and an agent workflow. Drop the GitHub link into Codex or Claude Code, follow AGENTS.md and START-HERE.md, run the local example first, and then replace it with your own products. The four completed video assets cost a total of $3.51, including rejected versions; the price is an experimental record.

The author warns that AI may change folds, shadows, and print details. Before launch, check on real devices and target networks. Sales and conversion effects were not measured in this experiment.

In the comments, some people suggested moving the same interaction logic to record stores, bookstores, and galleries. Browse horizontally, select by hovering or swiping, and after selection the item turns to face you or expands. The author made no promises. The most worthwhile part of this project is not “AI-generated video” itself, but treating generated output as assets and then splitting frames, controlling speed, and handling errors according to the UI's rhythm.