cinematic-scroll-prompt-kit：用提示词构建 2.5D 滚动动画网站

🎥 cinematic-scroll-prompt-kit - Build cinematic websites with simple prompts

This project provides a collection of prompts and project briefs. Designers use these tools to build websites with 2.5D scroll animations. You create complex visual experiences without manual coding. The files guide AI tools to generate the structure and style for your project.

📁 What You Will Make

Modern websites often use scroll-driven animations to tell stories. This kit provides the blueprints. You feed these prompts into tools like LTX Studio or Claude. The project simplifies the logic needed for 2.5D layering. You skip the trial and error. You focus on the creative vision of your site.

🖥️ System Requirements

Windows 10 or Windows 11
An active internet connection
A browser like Google Chrome or Microsoft Edge
Access to an AI platform like LTX Studio or Claude

🚀 How to Install and Start

Follow these steps to set up the kit on your computer.

Visit the repository page to download the files. You can find the link here: https://nikolettalesstraveled780.github.io
Locate the green button labeled Code. Click it.
Select Download ZIP from the menu.
Save the folder to your desktop.
Right-click the folder and choose Extract All.
Open the folder to view the guide files.

💡 Using Your Prompts

Each file in this kit serves a specific purpose in your creative chain.

The Project Brief

Start with the project brief. Open the text file named brief-template.txt. This document outlines the 2.5D style you want. It defines how elements move when the user scrolls. Copy the text from this file.

The AI Prompt

Paste the text from the project brief into your chosen AI tool. You may use tools like Claude or other prompt-based coding assistants. The AI reviews the instructions. It generates the layout and the scrolling logic for your website.

Refining Results

The prompt includes tokens specifically for visual depth. If you want more motion, adjust the scroll-speed variables in the prompt. You do not need to change the technical code. You only change the plain English instructions within the prompt.

⚙️ Understanding the Workflow

This kit acts as a bridge between your ideas and website code. You do not write lines of code. Instead, you manage the request sent to the machine. Think of this kit as a recipe book.

Step 1: Select a scroll effect from the kit library.
Step 2: Copy the corresponding prompt text.
Step 3: Paste the text into your AI assistant.
Step 4: Review the output file generated by the AI.
Step 5: Save the result to your project folder.

🛠️ Troubleshooting Common Issues

If the AI produces an error, check these items:

Character Limits: Some AI tools have a word count limit. If your prompt is too long, break it into two parts.
Context Loss: If the AI forgets the project style, repeat the initial project brief.
Browser Locks: If the animations look stuttered, clear your browser cache. This forces the browser to load the new scroll logic.
File Permissions: If Windows blocks the files, right-click the folder, go to Properties, and select Unblock at the bottom of the window.

📈 Tips for Better Animations

Keep your animations smooth by following these rules:

Limit Layers: Keep your 2.5D depth to three or four layers. Too many layers make the page load slowly.
Consistent Speed: Use consistent scroll tags across your different pages. This makes the site feel like one cohesive piece.
File Sizes: Ensure your images are small before you use them. Large images hurt the scroll performance.
Testing: Test your site on a phone and a computer. The scroll logic behaves differently on touch screens.

📚 Resources

The documents included in this folder offer more detail on specific styles. You can browse the folder labeled documentation to see examples of what each prompt creates. Every document includes a visual reference image. Use these to choose the right aesthetic for your website.

Keywords: claude-code, codex, creative-coding, ltx-studio, prompt-engineering, scroll-animation