بناء موقع Motion احترافي باستخدام Fable 5 وHiggsfield خطوة بخطوة

I added a project skill file for this BurgerLab motion website workflow.

Please inspect the skill file, install it correctly for this Claude Code project, and confirm that the skill is available before we start the actual build.

Do not generate media yet.
Do not build the website yet.
For now, only install the skill and summarize what it will help with in this project.

We are starting the BurgerLab motion website project.
The BurgerLab project skill is now installed and available in this Claude Code workspace.
Follow the installed BurgerLab skill and create the initial project workspace only.
Create the recommended project structure, including:

- assets/images
- assets/videos
- assets/references
- copy
- scripts

Create these planning files:

- copy/brand-kit.md
- copy/asset-plan.md
- copy/image-prompts.md
- copy/video-prompt.md
- copy/website-brief.md
- README.md

In the planning files, define the BurgerLab brand identity, visual direction, required media assets, image prompts, Seedance 2.0 video concept, website section plan, and build workflow.
Use the installed skill as the source of truth.

Important:
- Do not generate any images yet.
- Do not generate any videos yet.
- Do not create or build the website yet.
- Do not spend any Higgsfield credits yet.

After creating the folders and files, summarize exactly what was created and show me the planned next steps before we move into media generation.

The BurgerLab planning files are approved.

Now use Higgsfield MCP to generate the approved still image assets with GPT Image 2 only.

Use the prompts from:
copy/image-prompts.md

Generate exactly these seven images and save them in the correct folders, but follow this order carefully:

Step 1 — Generate the assembled hero burger first:
1. assets/images/hero-burger.png

Step 2 — Use assets/images/hero-burger.png as the visual reference for the exploded burger image:
2. assets/images/exploded-burger-reference.png

The exploded burger must look like the same BurgerLab flagship burger from the hero image, but separated vertically into clean ingredient layers.

Step 3 — Generate the remaining supporting images:
3. assets/images/ingredients-detail.png
4. assets/images/catalog-classic-stack.png
5. assets/images/catalog-smoky-bacon.png
6. assets/images/catalog-spicy-lab.png
7. assets/images/catalog-truffle-melt.png

Settings:
- Model: GPT Image 2
- Aspect ratio: 16:9
- Quality: high
- Style: realistic cinematic food advertising

Important rules:
- Do not generate extra variations.
- Do not generate video yet.
- Do not build the website yet.
- Save every generated image immediately to the exact path listed above.
- Keep all images free of text, real logos, people, hands, and third-party marks.
- Preserve visual consistency between the hero burger and the exploded burger.

After generation, report the saved files and wait for review before moving to video generation.

The BurgerLab still images are approved.

Now use Higgsfield MCP with Seedance 2.0 to generate the final scroll-driven background video.

Use only this image as the product reference:
assets/images/hero-burger.png

Use Seedance 2.0 with these settings:
- Aspect ratio: 16:9
- Resolution: 720p
- Duration: 8 to 12 seconds
- Quality: high

Send this detailed video prompt to Seedance 2.0:

Create a dynamic hyper-motion cinematic video for a premium BurgerLab landing page.

Use the provided hero burger image as the only product reference. The video should feature the exact same BurgerLab flagship burger from the reference image, in the same dark luxury food-commercial style.

This video will be used as a full-screen website background controlled by scroll progress with GSAP ScrollTrigger, Lenis, and frame-by-frame video scrubbing. The motion should be dynamic, cinematic, and visually impressive, but still readable when scrubbed manually by scroll.

Core concept:
A single continuous hyper-motion burger reveal. The video starts with the assembled hero burger, uses bold cinematic camera movement around the product, and in the second half the existing visible layers of the burger separate vertically into a clean exploded-view composition.

Important:
This must be one continuous uninterrupted shot. No cuts, no scene changes, no montage, no jump cuts, no separate camera angles stitched together. The full video must feel like one seamless camera move around the same burger in the same environment.

Critical product consistency rule:
Do not add any new ingredients that are not already visible in the reference burger image. Do not invent extra lettuce, tomato, onion, bacon, jalapeños, sauce layers, extra patties, extra cheese, or additional buns. The second half should only separate the existing visible layers of the reference burger. The burger must keep the same ingredient count, same visual identity, same colors, same proportions, and same overall look from start to finish.

Visual style:
- hyper-motion food advertising
- premium cinematic burger commercial
- dark luxury restaurant campaign
- dramatic amber and orange lighting
- deep charcoal background
- glossy reflective black surface
- realistic burger textures
- subtle steam rising from the burger
- controlled sesame seed particles, tiny sauce droplets, spice particles, and grill sparks as minimal accents
- high-end product reveal energy
- premium website hero background

Camera and motion direction:
Start with the burger centered in a dramatic hero position on a dark reflective surface. Begin with a cinematic push-in toward the burger, then smoothly transition into an orbiting camera move around the product. The camera should rotate around the burger in a premium product-commercial style, revealing the glossy bun, melted cheese, grilled patty texture, sauce, pickles, and the visible layers from the reference image.

Use dynamic camera movement: orbit, parallax, slight roll, controlled rotation, fast-but-smooth push-ins, and elegant pull-backs. The motion should feel energetic and expensive, not chaotic. The burger should remain the clear focal point at all times.

First half of the video:
Show the assembled BurgerLab hero burger as a premium product reveal. Keep the burger fully intact while the camera moves around it with cinematic energy. Use moving amber light sweeps, steam, controlled particles, sesame seeds, and subtle sparks to create a hyper-motion commercial look.

Second half of the video:
Transition into a controlled vertical separation effect. The burger should not explode randomly. Instead, the exact existing visible layers from the reference image should gently separate upward and downward into a clean floating stack.

Separate only what already exists in the reference burger:
- top bun
- visible sauce layer
- visible pickles/onion layer if present in the reference
- visible cheese layer
- visible beef patty or patties
- bottom bun

Do not add lettuce, tomato, bacon, jalapeños, extra patties, extra cheese, extra sauce, or any other new ingredient unless it is clearly visible in the original hero reference image.

The separation should feel like premium motion design, as if the burger is being carefully deconstructed by invisible precision. It should not look like a messy food explosion. The ingredients should move smoothly into a vertical stack while preserving the original burger’s shape, materials, and proportions.

Environmental motion:
- warm amber light sweeps across the burger
- steam moves naturally upward
- tiny sesame seeds float in slow motion
- minimal sauce droplets and spice particles pass through the foreground
- soft sparks or grill embers appear in the background
- reflective surface catches the moving light
- during the separation moment, particles should support the motion but never overpower the product

The burger must remain visually consistent with the reference image. The assembled burger and the separated burger must clearly be the same product. Preserve the same premium bun, same patty texture, same cheese color, same sauce, same visible toppings, same lighting style, and same dark luxury environment.

Sequence:
1. Start with the assembled BurgerLab hero burger in a dark cinematic studio setup.
2. Camera pushes in toward the burger with strong premium lighting.
3. Camera begins a smooth orbit around the burger, showing the existing visible layers and textures.
4. Add controlled hyper-motion energy: light sweeps, parallax particles, steam, subtle sparks, and elegant food-commercial motion.
5. In the second half, the same burger begins to separate vertically into its existing visible layers.
6. Camera slightly pulls back or continues a controlled orbit to reveal the full separated burger stack.
7. End on a powerful centered exploded-view hero frame, with only the original burger layers floating cleanly in vertical order.

Motion requirements:
- One continuous uninterrupted shot
- Dynamic hyper-motion camera movement
- Smooth orbit and rotation around the burger
- Controlled vertical separation effect in the second half
- Stable enough for scroll scrubbing
- No jump cuts
- No scene cuts
- No abrupt camera teleporting
- No extreme distortion
- No chaotic motion blur
- No flicker
- No product inconsistency
- No messy or random ingredient explosion
- No new ingredients added during the video

Important constraints:
- Use only the assembled hero burger reference as the product identity
- The burger should separate only in the second half of the video
- Keep the separation elegant, vertical, readable, and premium
- Do not add any ingredient that is not already visible in the reference image
- Do not increase the number of layers
- Do not change the burger into a different burger
- No text inside the video
- No logos
- No people
- No hands
- No packaging
- No plate clutter
- No cartoon style
- Keep the burger realistic, premium, and appetizing
- Keep enough dark negative space around the burger for website text and UI overlays

Save the raw generated video as:
assets/videos/burgerlab-scroll-background-raw.mp4

Important:
- Do not build the website yet.
- Do not re-encode the video yet.
- After generation, report the saved video path and wait for review.

The BurgerLab media assets and planning files are approved.

Switching into the website build phase now.

Use the installed BurgerLab project skill as the source of truth.

Build the website inside the `website` folder using:
- Vite
- React
- JavaScript
- GSAP
- ScrollTrigger
- Lenis
- CSS variables

Project context:
This is a single-page cinematic landing page for BurgerLab, a fictional dark luxury burger brand.
The main experience should be a full-screen scroll-controlled background video, where the video responds to scroll progress and feels like a premium product reveal.

Use the existing assets:
- assets/images/hero-burger.png
- assets/images/exploded-burger-reference.png
- assets/images/ingredients-detail.png
- assets/images/catalog-classic-stack.png
- assets/images/catalog-smoky-bacon.png
- assets/images/catalog-spicy-lab.png
- assets/images/catalog-truffle-melt.png
- assets/videos/burgerlab-scroll-background-raw.mp4

Build requirements:
1. Create the Vite React project inside `website/`.
2. Install required dependencies: `gsap` and `lenis`.
3. Copy the final image assets into `website/public/img/`.
4. Re-encode `assets/videos/burgerlab-scroll-background-raw.mp4` to all-keyframe H.264 using the existing script and save it as `website/public/bg.mp4`.
5. Build a polished single-page BurgerLab website with these sections:
   - home
   - split
   - ingredients
   - catalog
   - experience
   - cta
   - footer
6. Use the fixed full-screen background video as the main motion layer.
7. Map page scroll progress to the video `currentTime` so the video scrubs frame by frame as the user scrolls.
8. Use GSAP ScrollTrigger for scroll animations and the main pinned ingredient/impact section.
9. Use Lenis for smooth scrolling and connect Lenis correctly with ScrollTrigger.
10. Use the BurgerLab dark premium design direction: charcoal background, amber accents, rounded panels, premium food-commerce UI, strong typography, and cinematic spacing.
11. Keep all website text as HTML/CSS. Do not bake text into images or video.
12. Add responsive behavior and a mobile fallback using the hero burger image if video scrubbing is too heavy on small screens.
13. Expose development hooks for testing:
   - `window.__lenis`
   - `window.__ST`
   - `window.__bgv`
14. Run the local dev server and verify the website works.
15. Run `npm run build -- --base=./` and fix any build errors.

Important implementation notes:
- The background video should be fixed behind the content with a dark tint layer for readability.
- The hero section should introduce BurgerLab and The Lab Burger clearly.
- The split section should feel like the main scroll-controlled reveal moment.
- The catalog section should use the generated burger images in premium product cards.
- The final result should feel like a polished cinematic product landing page, not a generic restaurant template.

After the build is complete, summarize:
- what files were created
- how the scroll video system works
- how to run the project locally
- how to preview the production build
- any issues or limitations you noticed