A Jibe piece · for builders
The Cinematic Toolkit is a collection of Claude skills for building premium cinematic landing pages. Three approaches, each the right answer for a different brief. The page you're reading was built with one of them.
Approaches · three
Each approach is the right answer for a different kind of brief. The skills don't compose into one mega-skill — they live separately because the right tool depends on what the page is supposed to do.
The motionsites.ai pattern. AI-generated cinematic video as the substrate, minimal editorial React composition on top.
Prompt → AI video service (Higgsfield, Runway, Sora, Veo) → CDN → a <video> element behind your editorial copy. Camera path is locked at generation time; iteration is minutes, not days. 90% of premium-landing briefs land here.
Download cinematic-video-landing.skillSame motionsites.ai DNA, applied beyond the hero. Ambient looping backgrounds drive sections throughout the page, not just the opening shot.
Same video-as-substrate mechanic as Option 01, scoped to multi-section use. Looping motion behind testimonials, feature blocks, footers. Chosen when motion is the brand identity, not just the headline image.
Download cinematic-backgrounds.skillThe Apple product-page pattern. Scroll scrubs through a pre-rendered frame sequence; the camera path syncs to scroll position.
Offline render → numbered frame sequence → anchor manifest → canvas scrubber driven by Lenis + GSAP ScrollTrigger. Unmatched fidelity (path-traced stills); scroll-as-camera-path is the load-bearing UX decision.
Download scroll-cinematic-spaces.skillInstall
Each ships as its own .skill bundle.
Download whichever fits the brief — install only the ones
you need.
Free. MIT-licensed. Three skills, no framework.
About
Joinery exists because building a motionsites.ai-tier landing page used to mean a 3D artist, a render farm, and three weeks. AI video generation collapsed that into a prompt and a CDN. The web side of that pipeline is what these skills codify — about 200 lines of near- boilerplate per page, with the art direction living in the video prompt.
The art direction lives in the prompt. The web is just glass on top.
Each skill picks one mechanic and gets it right. The three approaches don't compose into one mega-skill because the right tool depends on what the page is supposed to do — a hero loop and an Apple-style scrub are different problems. Pick the brief, then the tool.
Each approach in the toolkit ships its own decision matrix — when it's the right answer, what its weaknesses are, what stack it lives on. Read the SKILL files inside each downloaded bundle for the full breakdown.