hero-loop-background

Hero Boomerang Video

This skill creates a full-bleed hero section backed by a looping boomerang video — the clip plays forward, then reverses, creating a seamless loop with no hard cut. Gradient overlays are calibrated so hero text remains readable regardless of which frame is playing.

Requires ffmpeg on PATH.

---

Step 0 — Gather Inputs

Confirm these with the user before starting:

• VIDEO_PATH — absolute path to the source video file
• OUTPUT_DIR — where to write the encoded video (default: assets/)
• HEADLINE — the hero headline text (needed to calibrate overlay contrast)
• TEXT_COLOR — light (white text on dark video) or dark (dark text on light video). Default: light
• POSTER_PATH — optional fallback image shown while video loads. If not provided, skip the poster attribute.
• HERO_HEIGHT — default 100vh (full viewport). Change for partial-height heroes.

---

Step 1 — Probe the Source Video

ffprobe -v quiet -print_format json -show_streams "VIDEO_PATH" 2>&1

Note: width, height, r_frame_rate, duration. The boomerang will be duration × 2 seconds long.

---

Step 2 — Create the Boomerang

The boomerang filter reverses the clip in memory and concatenates it after the original: forward → reverse. At the loop point, the last frame of the reversed segment is identical to the first frame of the forward segment — a truly seamless loop.

ffmpeg -y -i "VIDEO_PATH" \
  -an \
  -filter_complex "[0:v]reverse[rv];[0:v][rv]concat=n=2:v=1[outv]" \
  -map "[outv]" \
  -crf 20 \
  -preset slow \
  -movflags +faststart \
  "OUTPUT_DIR/hero-bg.mp4"

Flag notes:

• -an — strip audio (background video is muted; no need to encode audio)
• [0:v]reverse[rv] — creates a reversed copy of the video stream in the filter graph
• concat=n=2:v=1 — concatenates the original + reversed streams
• -crf 20 — slightly lower quality than scrub video is fine here (always playing, never paused on a frame)
• -movflags +faststart — moov atom at front so autoplay starts before the full file loads