jamesob
Featured
local-llm
A comprehensive guide for building and configuring a high-end local machine to run state-of-the-art LLMs, with detailed hardware choices, BIOS tuning, and Docker-based model serving.
How-I-built-Flight-Website
A detailed guide on using Claude Opus 5 and Higgsfield CLI to replace a static hero video on an existing landing page with a seamless, AI-generated 16-second flight film, emphasizing engineering discipline over generative hype.
Stars
12
7-day growth
No data
Forks
1
Open issues
0
License
No data
Last updated
2026-07-27
AI repository intelligence
FR-AI / ANALYSISWhy it is worth attention
It systematically tackles the hardest parts of integrating generative video into a real design—numeric seam verification, non-deterministic output handling, CSP-compliant self-contained builds, and autoplay fallbacks—rather than just showing off the AI output.
Who it is for
- Web developers integrating AI-generated media into production sites
- Designers wanting to extend existing visual languages with generative video
- Video creators using generative AI pipelines (e.g., Seedance, Higgsfield)
- Engineers dealing with strict CSP and iframe autoplay constraints
Use cases
- Replacing static hero images with seamless looping video on landing pages
- Building deterministic pipelines around probabilistic AI video generation
- Creating self-contained, CSP-compliant web pages with inlined media
- Chaining multiple generative clips into a continuous film without visible cuts
Strengths
- Provides a reproducible numeric seam check (mean pixel difference < 8) that catches non-deterministic failures
- Documents real costs (288 credits, 216 usable) and gotchas like orphaned jobs after lost CLI responses
- Emphasizes fidelity to existing design system (palette, copy, photography) over AI's design opinions
- Offers a complete self-contained build pipeline (1080p master, 720p web cut, inlined fonts/images/film) for CSP-locked environments
Considerations
- Non-deterministic output requires budgeting for roughly one in three seams needing a re-roll
- CLI reliability issues: lost responses still bill, requiring manual orphaned-job adoption
- Autoplay does not work inside cross-origin iframes without explicit `allow=autoplay`; needs user-gesture fallback
- High credit cost (288 credits for 16s) may be prohibitive for casual experimentation
README quick start
Turning a static hero into an AI-generated flight film
How Claude Opus 5 replaced a landing page's static hero video with a continuous, seamless 16-second flight film — using the Higgsfield CLI, the scroll-world skill, and a numeric seam check that turns out to be the whole ballgame.
Read this first: what this actually is
Being precise about scope, because it changes what you'll get out of it.
This is not "an AI built a website from scratch." The site — Flight, a fictional whole-aircraft charter company — already existed. A human made it. What Opus 5 did was:
- Study the existing site closely enough to extend it without breaking its visual language
- Generate a continuous flight film with Higgsfield and wire it into the hero
- Convert the page into a self-contained build that survives a strict CSP, and publish it
So this is a guide about AI-generated motion inside a real design, and the engineering around it. That's a narrower claim than "AI builds websites," and a more useful one — the hard parts here are the parts nobody warns you about.
A note on two tool names you may have seen attached to this work:
| What it's often called | What it actually is |
|---|---|
| "Higgsfield MCP" | The Higgsfield CLI — @higgsfield/cli on npm, a higgsfield binary. Not an MCP server. |
| "Claude design" | The artifact-design skill, a Claude Code skill that calibrates design treatment. Here it mostly said don't redesign anything — see Part 6. |
And scroll-world is a Claude Code skill wrapping the Higgsfield pipeline. This project used its generation method and its seam discipline, but not its scroll-scrub engine — the hero autoplays and loops; it isn't scrubbed by scroll. Don't expect the Apple-style scroll-driven camera here.
The result
| Before | After | |
|---|---|---|
| Hero | 5s static plate, looped | 16.08s continuous flight film |
| Motion | essentially none, played at 0.6× | passenger boards → door seals → taxi → rotation → climb |
| Cuts | — | zero — every seam is frame-identical |
| Source | 1280×720 | 1920×1080 master, 1280×720 web cut |
The film opens on the exact frame the original hero opened on, then that frame starts moving. That single decision is what makes it read as an extension of the site rather than a replacement for it.
Description
How Claude Opus 5 turned a landing page's static hero into a seamless AI-generated flight film — Higgsfield CLI, frame-locked seams, and a self-contained CSP-safe build.
Related repositories
Similar projects matched by category, topics, and programming language.
0xwilliamortiz
Featured
openclaude-improved
OpenClaude is an open-source CLI coding agent that runs on any platform and supports a wide range of LLM providers, offering the same tools and workflows as Claude Code.
mereyabdenbekuly-ctrl
Featured
clodex-ide
Clodex is an open-source, local-first agentic IDE that combines persistent AI tasks, code, terminal, browser, Git, models, memory, and governed execution in one Electron workspace, currently in technical preview.