html-loop-render

by agenttrust

Install this Skill

curl -fsSL -o html-loop-render.zip https://skill.seembox.com/api/v1/skills/html-loop-render/download && unzip html-loop-render.zip

Download html-loop-render.zip

SKILL.md About

---
name: html-loop-render
description: Render animated HTML/CSS loops into GIFs using headless Chrome screenshots plus ffmpeg palette conversion. Use when an agent needs to turn a self-contained HTML animation into a GIF, especially for social assets like square LinkedIn posts, explainers, UI motion loops, or lightweight motion graphics that should be reproducible without manual screen recording.
---

# HTML Loop Render

Render self-contained HTML animations to GIF by freezing the page at many time offsets and stitching the frames with ffmpeg.

## Workflow

1. Build or edit a self-contained HTML file.
2. Add the freeze-time query-param pattern from `references/freeze-time-pattern.md`.
3. Test a still frame first with headless Chrome at one timestamp.
4. Render the full loop with `scripts/render_html_loop.sh`.
5. If the asset is for LinkedIn, prefer square layout and calmer motion.

## Quick start

Test one still frame first:

```bash
google-chrome --headless=new --disable-gpu \
  --screenshot=/tmp/preview.png \
  --window-size=1080,1080 \
  "file:///absolute/path/to/animation.html?t=3"
```

Render the full GIF:

```bash
bash skills/html-loop-render/scripts/render_html_loop.sh \
  /absolute/path/to/animation.html \
  /absolute/path/to/output.gif \
  6 8 1080 1080
```

Arguments are:

1. input HTML
2. output GIF
3. duration seconds, default `6`
4. fps, default `12`
5. width, default `1200`
6. height, default `675`

## LinkedIn guidance

Use square `1080x1080` unless the user explicitly wants landscape.

Prefer:
- one strong headline
- one central focal element
- balanced left/right groups
- large text, minimal copy
- slow, obvious motion

Avoid:
- tiny labels
- too many simultaneous animated elements
- thin low-contrast lines
- complex backgrounds that dither badly in GIFs

Good starting render settings for LinkedIn:
- duration: `4` to `6`
- fps: `6` to `8`
- size: `1080 1080`

## Troubleshooting

If the GIF is blank or static:
- confirm the HTML reads `?t=` and pauses/seeks animations correctly
- render a still frame first with `?t=3`
- ensure all assets are local or embedded, not blocked remote URLs

If the render is too slow:
- reduce fps first
- shorten duration
- reduce canvas size only as a last resort

If the GIF looks noisy:
- reduce motion complexity
- increase contrast
- remove subtle gradients or tiny text

## Resources

- Freeze-time implementation: `references/freeze-time-pattern.md`
- Renderer script: `scripts/render_html_loop.sh`

_meta.json Metadata

{
  "ownerId": "kn75h0hnrv6hvdhfdcwqzcrv1s81dx4m",
  "publishedAt": 1777746529258,
  "slug": "html-loop-render",
  "version": "1.0.0"
}