The Prompt-Writing Prompt

Write me a detailed prompt for Claude Code to add an animated hero section to a personal portfolio site. The site uses HTML, CSS, and vanilla JavaScript.

I want a typing animation for the headline text, a subtle gradient background that shifts between 2 colors, and a scroll-down indicator at the bottom. It should be responsive and accessible.

Add an animated hero section to my portfolio site
I have a personal portfolio site built with plain HTML, CSS, and vanilla JavaScript (no frameworks, no build step). I want you to add an animated hero section at the top of the page. Please work with my existing files rather than creating a new project, and match the code style already present.
Layout & structure

A full-viewport-height hero (100svh, not 100vh, to avoid mobile address-bar jump) as the first section of the page.
Inside: a headline (<h1>), a short subheadline (<p>), and a scroll-down indicator anchored to the bottom.
Use semantic HTML. The headline must be a real <h1> so the typing effect doesn't break the document outline.

Typing animation (headline)

Type out the headline text character by character on load, with a blinking cursor.
Drive it from a JS array of strings so I can easily edit the phrases later, cycling through 2 to 3 phrases (type, pause, delete, type next). Add clear comments showing where I edit the text and timing.
The real headline text must exist in the static HTML as the <h1>'s content (or an aria-label), so it's present for SEO and screen readers even if JS fails.
Mark the animating element aria-hidden="true" and expose the full headline to assistive tech separately, so screen readers get the complete text once, not one character at a time.

Gradient background

A subtle background that smoothly shifts between two colors on a slow loop (CSS @keyframes animating background-position on a linear-gradient, not a JS interpolation loop).
Expose the two colors and the animation duration as CSS custom properties at :root so I can retheme quickly.

Scroll-down indicator

A small animated chevron or "scroll" cue pinned near the bottom-center of the hero, with a gentle bounce.
Make it a real <a href="#next-section"> so it's keyboard-focusable and actually scrolls to the next section. Give it an accessible label (aria-label="Scroll to content").

Responsiveness

Fluid type sizing with clamp() for the headline and subheadline.
Verify it looks right from ~320px up to large desktop. No horizontal overflow from the gradient or cursor.

Accessibility (important)

Wrap all motion (typing, gradient shift, chevron bounce) in @media (prefers-reduced-motion: reduce). When reduced motion is set: show the final headline text immediately with no cursor animation, hold the gradient static, and stop the chevron bounce.
Ensure text/background contrast stays at WCAG AA across the full gradient sweep, checking the worst-case color, not just the starting one.

Constraints

Vanilla JS only, no dependencies. Keep the JS in my existing script file.
Don't restructure unrelated parts of the page.

When done, briefly tell me which files you changed, where the editable text/colors/timing live, and confirm how to test the reduced-motion path.