Something went wrong?

Usually the animation library is not loaded, the script runs before the page exists, or your computer's "reduce motion" setting is on (the template then shows a calm version on purpose).

The animations on my page do not play. Check these in order and fix whatever you find, without changing any motion values (durations, easings, stagger, scrub, pin lengths):
1. GSAP and ScrollTrigger (and SplitText and Lenis, if the page uses them) are installed and imported, and every plugin is registered with gsap.registerPlugin before it is used.
2. The script runs after the page elements exist, and every selector in it matches an element.
3. If Lenis is used: it is connected to ScrollTrigger (lenis.on('scroll', ScrollTrigger.update)) and driven by gsap.ticker.
4. ScrollTrigger.refresh() is called after fonts and images have loaded.
5. No CSS leaves an element at opacity 0 or translated away without an animation that brings it back.
6. The browser console shows no errors; fix every one.
Then tell me in two lines what was wrong.

Fixed widths, huge headings or 100vh sections often overflow on small screens. The fix is to make sizes flexible, not to change the design.

On a 390 px wide phone my page has this problem: [describe it: sideways scrolling / overlapping text / headings too large / something cut off]. Fix the layout for screens from 320 to 430 px wide without changing the desktop layout or any motion values:
- use clamp() for font sizes and spacing
- replace fixed widths with max-width: 100%
- make images and videos width: 100% with object-fit: cover
- use 100svh instead of 100vh for full-screen sections
- add min-width: 0 to grid and flex children that overflow
- find the element that makes the page wider than the screen and fix that element
- keep every tap target at least 44 px
Test at 320, 390 and 430 px and tell me what you changed.

The template's fonts are not being loaded, so the browser shows a fallback font. Fonts have to come with your site or be linked from a font service.

My fonts look different from the template. Load exactly the fonts named in the template's tech stack: [paste the font names here]. Use self-hosted files or Fontsource or Google Fonts, with font-display: swap. Preload the main text font, set font-family stacks with a similar fallback and size-adjust so the text does not jump, and make sure the weights and variable axes used by the headings are the ones the template specifies. Then confirm in the network tab that every font file loads without errors.

The template uses placeholder photos. Your own files work best when they have the same shape (ratio) as the placeholders, so the crop stays right.

Replace the placeholder images with mine. Put my files in the project's images folder and keep the same aspect ratio and size as each placeholder. Use object-fit: cover, width and height attributes, loading="lazy" for everything except the first screen, and clear alt text. Use WebP or JPG under 300 KB each. At the end, list every image slot with the file name it expects, so I know which of my files goes where.

A new page should reuse the same header, footer, fonts, colours and motion, so the site feels like one piece.

Add a new page called [page name] at /[path]. Reuse the same header, footer, fonts, colours and motion tokens as the home page. The page should say: [what it should say]. Add a link to it in the main navigation. Do not change the home page's scripts or any existing animation. Make sure the page works at 390 px wide and with reduced motion turned on.

Colours should live in one place, as variables at the top of the stylesheet. Then changing the brand takes one edit, not fifty.

Change my site's colours to: accent [#hex], background [#hex], text [#hex]. Change them only in the CSS variables at the top of the stylesheet; do not hard-code a colour anywhere else. Update any canvas or WebGL colours so they read from the same variables. Keep text contrast at least 4.5 to 1. Do not touch any motion values.

AI tools sometimes "improve" timings on their own. Paste the animation part of your original prompt below and ask for a line-by-line check.

You changed motion values that I wanted to keep. Restore every animation value to exactly what my original prompt specifies: durations, easings, delays, stagger, scrub, pin lengths, trigger start and end positions, and breakpoints. Compare your code with the animation spec below line by line, list each difference you find, fix them, and from now on change only content, colours and images, never motion.

Animation spec from my original prompt:
[paste the "Animation spec" part of the prompt here]

Most deploy errors are a wrong build command or output folder, a missing Node version, or a file name with the wrong capital letters (online hosting is case-sensitive).

My site works on my computer but fails when I deploy it to [Cloudflare Pages / Netlify / Vercel]. The exact error is:
[paste the error here]
Find the cause and fix it. Check that the build command and output folder match my host, that the Node version is set, that every import and asset path uses the exact file name capitalisation, that assets use root-relative paths, that no file is over the host's size limit, and that no secret or environment variable is needed. At the end, tell me the exact build settings to type into my host.