Codex Skin Motion Preview: Make a Five-Second Loop That Still Reads

Why motion helps a skin travel

A still image shows what a skin looks like. A five-second loop shows what it feels like. On social platforms, motion stops the scroll in a way a screenshot rarely does. For a visual product, that is useful distribution.

It is also a better demo. A slow push-in reveals the composition, the panel and the accent in the order a user would notice them. A fast cut sequence shows energy but hides the product.

The export is deliberately short. Five seconds shows a drift, a pulse or a light change without becoming a file nobody finishes. It also stays small enough to share in a message. If you need a longer clip for a store listing, record two or three five-second loops and cut them together rather than exporting one long render.

How the browser export works

The studio draws the chosen image into a canvas, applies the dimming, panel and palette, then animates a slow scale and position change. It records the canvas with the browser's MediaRecorder API and downloads a WebM file. The image never leaves the browser.

This is compositing, not generative video. It does not call an AI model, does not need an API key and does not cost credits. If you want a generated video, use a separate image-to-video model; the studio preview is for showing the skin.

MediaRecorder support is not universal. Chrome and Edge are the most reliable; Safari has improved but may choose a different codec. The studio falls back from VP9 to VP8 and reports a clear error when recording is unavailable, so the still export remains the dependable path.

The five-second recipe

The panel must not move. If the text shifts, the viewer cannot read it and the video feels unstable. Animate the background, keep the interface still.

• 0.0s to 5.0s: a 4% push-in, no cuts.
• A slow horizontal drift of 1–2% for parallax.
• A faint fog or gradient drift at the edges, not over the text.
• The panel and text stay fixed; only the background moves.
• The last frame matches the first closely enough to loop.

Performance and file size

A five-second 1280x800 WebM is usually small enough for a product page, but it is still heavier than a still image. Use a poster image for the first frame, lazy-load the video and avoid autoplaying with sound.

If the page is slow, keep the still and make the video optional. The still is the product; the video is a demonstration. Do not make the page depend on the heavier asset.

Motion should never be the only way to understand the skin. The still frame has to work on its own, because many people preview with reduced motion enabled or see a screenshot before they press play. Design the poster first, then add movement that supports it.

Export at 30 frames per second, not 60. A slow push-in does not need high frame rates, and halving the frames roughly halves the encode work and the file size. Keep the resolution at the preview size; upscaling a five-second loop rarely improves it.

Accessibility rules

Respect reduced motion. If the user prefers reduced motion, show the still and do not autoplay. Avoid flashing, strobing and fast zoom. A slow push-in is safe for most viewers; a flickering candle is not.

Add captions or a text description if the video carries information. In this case, the video is decorative, so the still and the alt text carry the meaning. Do not rely on motion alone to explain the skin.

Using the clip on social

The first frame is the thumbnail on most platforms. Make it a readable composition, not a blurry transition. Keep the panel visible and the accent obvious. If the first frame is dark and empty, the clip will be scrolled past.

A five-second loop works on X, TikTok, Reels and a product page. Do not add a watermark that covers the panel; if you need attribution, put it in the caption or at the edge.

Test the file on a phone before you publish it. A loop that plays smoothly on a laptop can stutter on a mid-range device, and the first impression is usually mobile.

What the studio does not do

The browser export does not generate new scenes, animate characters or create AI video. It composites the skin you already designed. That is a feature: it is fast, private, free and predictable.

If you want a generated video from a still, use an image-to-video model and keep the same discipline: subtle motion, stable identity, no flashing. The skin preview and the AI video are different products with different costs.

Treat the clip as a presentation layer, not a compatibility claim. It does not prove an engine works and it does not replace a real screenshot after installation; run the restore test on the target platform before publishing.

FAQ