amirmushichge/cinematic-scroll-prompt-kit

This repository is a build kit for creating cinematic, scroll-driven websites with AI coding agents like Codex or Claude Code. Instead of providing a software library or starter template, it gives you a set of instructions and templates to guide an AI assistant through building a complete project. The result is a website where vertical scrolling moves users through a layered visual world with depth, scaling, and narrative scenes. The kit works with any web framework, from plain HTML to React or Vue. It does not require complex graphics libraries or video files. The default approach relies on standard browser features to create effects like depth-aware movement, blur, opacity changes, and subtle pointer parallax. It is designed to produce a tested, production-ready implementation, not just a visual mockup. The repository contains a main prompt file, an example project brief, and an example asset manifest. To use it, you copy these files into your own project and fill in the placeholders with your specific details. You describe your subject, narrative beats, visual direction, and technology stack. You also prepare your visual assets by separating a master composition into aligned depth layers, such as a background, midground, and foreground, ensuring they share the same perspective and lighting. Once your brief and assets are ready, you give the entire kit to your coding agent. The instructions tell the agent to inspect your existing files, identify performance risks, and map out the scenes before writing any code. You then review the output at specific scroll checkpoints to ensure composition, layer order, and responsive behavior are correct. The kit requires a full verification pass, including desktop and mobile screenshots, keyboard navigation, and reduced-motion checks. The system is reusable across multiple projects. You keep the main prompt file unchanged as a production contract and only update the brief and asset manifest for each new site. The default timeline can be adapted for various uses, including travel guides, product showcases, architecture portfolios, or event pages. The full README is longer than what was shown.