Build a Cinematic Scroll Website with AI

Download and install Claude Desktop

Download Claude Desktop

https://claude.com/download

Create an empty project folder

Open the folder in Claude Desktop

Claude Desktop Code Local Select the project folder Open Trust Workspace

Install the Scroll World skill

Scroll World

/plugin marketplace add oso95/scroll-world /plugin install scroll-world@scroll-world

Connect Higgsfield to Claude

Open the Higgsfield MCP page

https://higgsfield.ai/mcp

Copy the connector URL.

Claude Desktop Customize Connectors Add custom connector

Name it “Higgsfield,” paste the URL, then connect and sign in.

Open Hostinger and prepare your account

Open Hostinger

Set up hosting for direct deployment from Claude.

https://www.hostg.xyz/SHJoR

Connect Hostinger to Claude Code

Paste this command into Terminal and press Enter.

claude mcp add hostinger -- npx -y hostinger-api-mcp

Complete the browser sign-in

Return to Claude Code and use the Hostinger connection. Sign in and approve access when the browser opens.

Customize the website project

Build the Cinematic Scroll Website

Use the installed Scroll World skill to plan and build a cinematic scroll-controlled website for {{PROJECT_NAME}}. Use the connected Higgsfield MCP for visual generation. Before beginning the production workflow, inspect the installed Scroll World skill and handle only the local dependencies that are genuinely required for this project. Do not ask the user to install optional tools or duplicate Higgsfield integrations. If a local CLI is absolutely required for a specific Scroll World operation that cannot be completed through the connected MCP, explain the reason before installing or using it. PROJECT - Niche: {{NICHE}} - Main visitor goal: {{PRIMARY_GOAL}} - Context or location: {{PROJECT_CONTEXT}} - Visual direction: {{VISUAL_DIRECTION}} - Number of main scenes: {{SCENE_COUNT}} - Scene journey: {{SCENE_JOURNEY}} - Main call to action: {{MAIN_CTA}} - Additional instructions: {{ADDITIONAL_INSTRUCTIONS}} VISUAL SOURCE {{VISUAL_SOURCE}} MOBILE {{MOBILE_STRATEGY}} Everything you decide — the scene ideas, the content sections, the wording, and the call to action — must fit this niche and move the visitor toward that one goal. Keep the real identity of any property, product, architecture, or brand exactly as it appears in the material I give you, and never present an invented room, feature, specification, or business claim as factual. FIRST, PRODUCE A PRODUCTION PLAN — do not generate any paid asset yet. Cover: 1. The art direction, and how you will hold visual consistency across every scene. 2. The ordered scene journey and the camera movement for each scene. 3. The transition strategy between neighbouring scenes. 4. The desktop assets, and the mobile assets if a dedicated sequence is required. 5. The estimated Higgsfield generation usage and cost. 6. The website content and the call to action. Stop there and wait for my explicit approval. AFTER I APPROVE Generate the scene images and camera clips through the authenticated Higgsfield account connected to Claude, and save or download every generated asset into the project as the website workflow requires. Extract or create the boundary frames and the connectors between neighbouring scenes, then integrate the finished sequence into the Scroll World website engine. Build the website around it with content this niche actually needs, working navigation and buttons, and a final call to action that matches the goal above. Then run the site locally and give me the preview address.

Project or Brand Name

The project or brand name

Niche

The business, product, or portfolio category

Primary Website Goal

The main visitor action

Project Context

The location or important background

Main Visual Source

Choose an option

Visual Direction

The desired art and design direction

Number of Main Scenes

The number of main visual scenes

Scene Journey

Choose an option

Mobile Visual Strategy

Choose an option

Main Call to Action

The final call-to-action text

Additional Instructions

Optional — any required style or content restrictions

Add reference assets if needed

If you selected your own media, add it here before sending the prompt.

Project folder reference-assets

Add images, videos, logos, renders, and brand documents.

Send the generated prompt to Claude Code

Review and approve the production plan

Check the scene order, visual consistency, camera flow, mobile strategy, and estimated generation cost, then approve the plan.

Open the local preview

Open the preview address provided by Claude when the build is complete.

Inspect the scene transitions

Check for flashes, jumps, sudden direction changes, inconsistent frames, or visible cuts.

Review the pacing and content

Check the scroll speed, text placement, content sections, buttons, and final call to action.

Test the mobile layout

Confirm that the visuals, text, and buttons display correctly on a narrow screen.

Request final corrections

Request Targeted Corrections

Apply only these corrections: [YOUR_CORRECTIONS] Change nothing else. Keep every unrelated scene, approved visual asset, transition, and content section exactly as it is, including anything I did not mention, and keep the responsive behaviour unchanged. Then run the website locally again and tell me precisely what changed.

Deploy the website to Hostinger

Deploy the Website to Hostinger

Deploy this project to my connected Hostinger account. Preserve the approved cinematic experience exactly as it is, and do not regenerate any approved visual asset. First confirm that every required asset exists and that the desktop and mobile asset references resolve correctly. Then optimize the site for production, run the production build, and inspect and fix any build error that would block deployment. Choose the deployment method that fits this project through the connected Hostinger account, and publish to a temporary live URL first when that is supported. Report the build result, the deployment result, and the live URL.

Review the live website

Check the cinematic sequence, content, buttons, call to action, and mobile layout.

Connect the final domain

Once the website is approved, ask Claude to connect your selected domain through Hostinger.

Publish future updates

Describe the change, then ask Claude to rebuild and republish the website.