whatisgithub

What is cinematic-landing-kit?

medhachoum/cinematic-landing-kit — explained in plain English

Analysis updated 2026-05-18

55HTMLAudience · vibe coderComplexity · 3/5Setup · moderate

In one sentence

cinematic-landing-kit is a set of instruction files for Claude Code that guides it to build luxury, scroll-driven landing pages with AI-generated cinematic visuals via Higgsfield.

Mindmap

mindmap
  root((landing kit))
    What it does
      Memory files for Claude Code
      Cinematic scroll pages
      Higgsfield asset pipeline
    Tech stack
      HTML
      GSAP
      Canvas
      Node.js
      Python OpenCV
    Use cases
      Product landing pages
      Branded visual assets
      Reusable page templates
    Requirements
      Claude Code
      Higgsfield account
      Node preview server

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Give Claude Code a product description and reference image to auto-generate a cinematic landing page.

USE CASE 2

Produce scroll-driven video-style hero sections without manually configuring animation code.

USE CASE 3

Generate a consistent set of branded visual assets through the Higgsfield pipeline.

USE CASE 4

Reuse the same memory files across multiple product landing pages for consistent quality.

What is it built with?

HTMLGSAPCanvasNode.jsPythonOpenCV

How does it compare?

medhachoum/cinematic-landing-kitdarkly22/gauntletsong39641-spec/reaper-daw-workstation-pro
Stars555555
LanguageHTMLHTMLHTML
Setup difficultymoderateeasyhard
Complexity3/52/51/5
Audiencevibe codervibe codergeneral

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 1h+

Requires a logged-in Higgsfield account plus Node.js and Python with OpenCV installed locally.

License terms are not stated in the README, author says it may be reused freely.

So what is it?

cinematic-landing-kit is a set of reference files meant to be dropped into a project folder so that Claude Code can build a luxury, cinematic, scroll-driven landing page for any product, in the style of high-end brand sites. Instead of relying on a single prompt, which can cause an AI assistant to forget instructions or make things up on a complex build, this kit provides memory files that describe the whole approach in advance, so Claude Code understands the structure and rules before it starts writing code. The package includes a main instructions file plus nine detailed memory documents covering things like the page's animation engine, how to turn a generated video into a smooth frame sequence on a canvas instead of a regular video element, how to make section transitions seamless, how to build a hero section that feels alive rather than a static image with a fade effect, light and dark theming, and a pipeline for generating visual assets through a tool called Higgsfield. There are also template files, including a ready-made HTML skeleton for the page structure and a template for writing prompts to Higgsfield. To use it, a person copies the kit's files into their project, opens Claude Code in that folder, and describes their product along with a reference image. Claude Code then reads the instructions automatically, decides on a visual theme and story for the product, builds the page from the provided HTML skeleton, generates the needed images and video assets through Higgsfield, and checks the results by previewing them in a visible browser tab, since a hidden tab can stop animations from running. Using the kit requires Claude Code itself, an active Higgsfield connection, Node.js to preview the static page locally, and Python with OpenCV to extract video frames. The kit also documents a set of firm rules the generated page must follow, such as never using raw video playback for the cinematic sequence, keeping the product's visual identity consistent across all generated assets, and requiring modest depictions of any people shown.

Copy-paste prompts

Prompt 1
Using cinematic-landing-kit, build a luxury landing page for my product called X, here is a reference image.
Prompt 2
Explain how cinematic-landing-kit turns a Higgsfield video into a frame sequence on a canvas.
Prompt 3
What do I need installed locally before I can use cinematic-landing-kit with Claude Code?
Prompt 4
Walk me through the golden rules cinematic-landing-kit enforces for hero sections and transitions.

Frequently asked questions

What is cinematic-landing-kit?

cinematic-landing-kit is a set of instruction files for Claude Code that guides it to build luxury, scroll-driven landing pages with AI-generated cinematic visuals via Higgsfield.

What language is cinematic-landing-kit written in?

Mainly HTML. The stack also includes HTML, GSAP, Canvas.

What license does cinematic-landing-kit use?

License terms are not stated in the README, author says it may be reused freely.

How hard is cinematic-landing-kit to set up?

Setup difficulty is rated moderate, with roughly 1h+ to a first successful run.

Who is cinematic-landing-kit for?

Mainly vibe coder.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.