Landing Page Sections
Gradient Scroll Footer
A footer that starts nearly neutral when it first enters the viewport and transitions to a rich warm sunset gradient (off-white through terracotta to deep navy) as the reader scrolls into it. Text colors shift from dark to white in sync with the background. Designed to close an editorial parallax narrative with a satisfying color landing.
Live preview
Requires framer-motion. React 18+ and Tailwind CSS v3+ assumed. Save as GradientScrollFooter.tsx.
Or rebuild it with a prompt
Paste the prompt into the tool you already use. Each version is written specifically for that tool, matched to the same design constraints so the output stays consistent.
Build components/GradientScrollFooter.tsx. Client component. sectionRef. useScroll({ target: sectionRef, offset: ["start end","end end"] }). Four framer-motion useTransform calls interpolate the gradient color stops from a neutral warm start palette to the final rich palette as scrollYProgress goes 0 to 1. The background is set via a motion.footer style prop that computes a linear-gradient from the four live color stop MotionValues. Text color transitions from dark (rgba 0,0,0,0.5 / #222) to white/muted across the same progress. Footer layout: max-w-[1200px] mx-auto px-8 sm:px-16. Top section: four-column grid (brand column + three link columns). Bottom: border-t border-white/15, copyright left, Privacy+Terms right. Respect prefers-reduced-motion (start at final deep state). Props: logo, tagline, columns: FooterColumn[] ({ heading, links: FooterLink[] }), copyright. Single default export. Export FooterColumn and FooterLink types.How to use this Gradient Scroll Footer as a prompt
- Paste the prompt into Claude Code, Cursor, or Google Stitch to build a Gradient Scroll Footer where the sunset gradient deepens as the React footer scrolls into view.
- Best for editorial landing pages, parallax narrative sites, and any layout that uses a warm gradient close.
- Ask Codex or Lovable to change the gradient palette, add social links, or wire the column links to a CMS.
How to use this Gradient Scroll Footer as code
- Drop the React + Tailwind file into `components/layout/` and pass logo, tagline, columns, and copyright props.
- Uses framer-motion useScroll and useTransform to interpolate each gradient stop and the text color as the footer scrolls in. Reduced-motion users see the final deep gradient state immediately.
- Compatible with Next.js App Router, Astro, and Vite React.
Other React landing page section components like the Gradient Scroll Footer
More landing page section components with matching AI prompts for Claude Code, Cursor, Codex, Lovable, Replit, and Google Stitch.
Landing Page Sections
Parallax CTA Banner
Parallax CTA banner with a background image moving at 0.4x scroll speed and a headline that scales up as the section enters the viewport, for landing page conversion sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Landing Page Sections
Apple-Style Product Hero Section
Apple-style product hero section for landing pages, product launches, and marketing sites, with a display headline, one subtitle, and two text links. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Landing Page Sections
Orbit Image Gallery Hero Section
Orbit image gallery hero section with cards rotating around a centered headline, for portfolio landing pages and agency hero sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Related prompts for landing page sections
Frequently asked questions about the Gradient Scroll Footer
How do I add a Gradient Scroll Footer to my website?+
Copy the source code from the "Copy code" button above and save it as a .tsx file in your components folder. The Gradient Scroll Footer is built with React, Tailwind CSS, and Framer Motion — add those as dependencies if they are not already in your project. Import and render the component wherever you need it. Every prop is optional and typed.
Can I use the Gradient Scroll Footer with Claude Code, Cursor, or Lovable?+
Yes. Each prompt tab above is tuned specifically for Claude Code, Cursor, Codex, Lovable, Replit, and Google Stitch. Paste the prompt into whichever AI coding tool you are using and it will generate a Gradient Scroll Footer matched to your existing file structure, design tokens, and brand color. Claude Code and Cursor work best when your project is already open — they slot the component directly into your codebase. Lovable and Replit are fastest for a standalone preview.
How do I customise the footer design and colors?+
The Gradient Scroll Footer uses Tailwind utility classes throughout, so every color, spacing value, and font weight is one class away from changing. Replace any color class with your brand token (for example, swap `bg-black` for `bg-[#your-hex]`). To change the animation timing, update the `duration-` or `delay-` classes, or pass new values into the Framer Motion `transition` prop if the component uses it. For a full brand restyle, paste the component into Claude Code or Cursor and describe your design system.
Is the Gradient Scroll Footer free to use in commercial projects?+
Yes. Every component in the AI Library, including the Gradient Scroll Footer, is free to copy, adapt, and ship in commercial projects, client work, SaaS products, open-source repos, and internal tools. No attribution required, no license fee, no royalty.
What gradient frameworks does the Gradient Scroll Footer support?+
The Gradient Scroll Footer is a plain React 18 client component written in React + Framer Motion + Tailwind. It runs on Next.js (App Router and Pages Router), Vite, Remix, Gatsby, and any other framework that supports React 18 and Tailwind CSS v3. Keep the "use client" directive at the top of the file when you paste it into a Next.js App Router project.
Does the Gradient Scroll Footer work with TypeScript?+
Yes. The component is written in TypeScript with fully typed props and exported interfaces. Paste it into a TypeScript project and it compiles without modification. If you need a plain JavaScript version, ask Claude Code or Cursor to strip the type annotations.
Can I combine the Gradient Scroll Footer with other AI Library sections?+
Yes. Every component in the AI Library is standalone with no shared global state, no conflicting resets, and no namespace collisions. Drop the Gradient Scroll Footer alongside any other section component. They are compatible with shadcn/ui, Radix UI, MUI, and any other component library you are already using.