← Visual Library / Effects

AI-generated hero video (Higsfield + MCP)

Generate a 3–5 second brand-specific video clip (phone exploding, product spinning, abstract motion) via Higsfield's Sedence 2.0 model, called directly from Claude via MCP.

Effects Captured

Use when — client wants a custom hero video instead of generic stock footage. $15/month per workspace + a few minutes per clip. Replaces what would have been a week of designer work or thousands of dollars of agency footage.

Live demo

// mock — real AI-generated mp4 goes here

CSS

<!-- Once you've generated and saved your video -->
<section class="hero-video">
  <video autoplay muted loop playsinline preload="auto">
    <source src="/assets/hero.mp4" type="video/mp4">
  </video>
  <div class="hero-overlay">
    <h1>...</h1>
  </div>
</section>

<style>
  .hero-video {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .hero-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
</style>

The Higsfield + MCP workflow

Sign up at higsfield.ai. $15/mo for the credits and Sedence 2.0 access.
Google "Higsfield MCP" → copy the MCP URL.
Claude.ai → Settings → Connectors (or Customize) → Add custom connector → paste URL.
Allow all permissions (the point is to let Claude call generate/fetch).
Prompt Claude to write a video generation prompt for you, e.g. "build a prompt for a phone exploding outward, pausing, then reassembling cleanly."
Tell Claude: "please create this video inside Higsfield via MCP."
Iterate: ask Claude to regenerate with adjustments. 2–4 takes typically.
Download the final mp4 → save to /assets/ → embed.

Optimization for the web

# Compress for web hero use (target ~2 MB for 5s)
ffmpeg -i hero-raw.mp4 \
  -vf "scale=1280:-2" \
  -an \                        # no audio
  -c:v libx264 -crf 25 \       # quality 25
  -preset slow \               # slower = better compression
  -movflags +faststart \        # start streaming before fully downloaded
  hero.mp4

Accessibility + performance

autoplay + muted + playsinline — autoplay requires muted on mobile browsers.
poster image — show a still frame before video loads. Add poster="/assets/hero-poster.webp".
prefers-reduced-motion — pause via JS for users with that setting.
Don't autoplay above ~3 MB on slow connections — lazy-load via Intersection Observer.

Source: Jono Catliff masterclass, 2026-05-19. See masterclass notes.