Landing page animations with Claude Code

To make a landing page animation with Claude Code, describe the section, its timing and its look in one prompt, let Claude Code build it as a small HTML, CSS and GSAP section, and check it by scrolling to it in a browser. Keep it calm: one idea per animation, finished in about five seconds, with a still end frame that reads on its own.

Describe the section and its job

Start with the job, not the effect. "A hero where each word of the headline comes into focus" says what the visitor should notice. "Make it pop" does not. A useful prompt names four things: the section (hero, pricing, signup), the order of events with times in seconds, the look (colors, fonts, one accent) and the end state.

Build a pricing section as one HTML file with GSAP.
SCENES: 0.4 s a Monthly / Yearly switch fades in. 1.2 s three plan cards rise 24 px, 0.1 s apart.
At 3.0 s the switch flips to Yearly and the prices roll to their yearly numbers, power3.out, 0.7 s.
At 4.2 s a small badge pops in next to the switch. Hold until 7 s.
STYLE: white cards on light grey, one orange accent, Inter, no shadows heavier than a soft card shadow.

The same five-part structure used for video prompts works here, see the guide to prompt structure.

Build it as scoped HTML and CSS

Ask Claude Code to scope every rule under one class, such as .uim-pricing, and to use no ids. A scoped section can be pasted into any page without touching the rest of the styles. Put every text, number and color in a variable, so a name or a price changes in one place. Use invented names for demo content: a pricing animation filled with a real brand's plans is a claim you did not mean to make.

Animate it with one timeline

One GSAP timeline per section keeps the order of events in one place. Two rules make it reliable:

• Use fromTo for every tween. A tween that states both its start and its end can restart cleanly, so the section can loop on the page.
• Keep it deterministic. No random values and no clock reads. If you need scattered confetti or a drifting pattern, use a seeded generator so every run looks the same.

Calm eases such as power3.out for entrances and power2.inOut for moves read as quality. Reserve overshoot for small things like a badge, and keep blur short and on few elements.

Respect reduced motion

Some visitors ask their device for less motion. For them, jump the timeline to its end so the section is complete and readable without movement. Also pause the animation when the section leaves the screen and start it only when it is near the viewport. Both keep the page light.

Reuse it as a video slide

Because the section is one timeline over plain HTML, HyperFrames can render the same page to a 4:5 MP4, which is the shape Instagram carousels use. That is how each animation in UI Motion works: one animation, two outputs. For the carousel itself, see Instagram carousels with Claude Code.

The twelve landing page animations in UI Motion

The Landing page series covers the sections that turn a visit into a signup:

• Headline Focus: each word of the headline comes into focus, with a stats card rising below.
• Swap Word: an accent pill in the headline swaps its word four times and resizes to fit.
• Live Signups: signup notifications stack in while a weekly counter counts up.
• Logo Wall: two rows of invented wordmarks drift in opposite directions above a star score.
• Metric Tiles: three KPI tiles with a count-up, a ring that draws itself and growing bars.
• Bento Build: five tiles click into a bento grid, each with a small living detail.
• Cursor Demo: a cursor clicks "New project", a window opens and a name is typed.
• Steps Path: a curved line draws through three steps and ticks each one.
• Compare Slider: a slider sweeps between an old and a new page.
• Pricing Toggle: monthly and yearly prices roll like an odometer.
• FAQ Accordion: questions open one after another with smooth height.
• Signup Success: an email is typed, the button turns into a check and a small burst plays.

All 36 animations in the pack follow the same rules: scoped CSS, one timeline, variables for every text and color, and a finished end state. Names and numbers inside them are invented illustration, so replace them with your own before you publish.

Try it free

Three of them, Headline Focus, Metric Tiles and Add to Cart, are in the free starter kit, each as a video project and a web page you can open in a browser.