Footer

Footers 169

About

A modern, sticky footer built with Framer Motion, featuring smooth animations, reusable components, and a responsive grid layout. Includes dynamic navigation links, social media icons with hover effects, and a gradient background with animated blobs for a visually engaging, scroll-triggered design.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Footer to your project and fits it to your theme.

Code

How Footer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import StickyFooter from "@/components/ui/footer";

const DemoOne = () => {
  return    (<main className="bg-background text-foreground">
      {/* Main Content */}
      <div className="h-screen flex text-[4vw] md:text-[2vw] items-center justify-center bg-gradient-to-br from-background via-muted to-background px-4">
        <div className=" text-center">
          <h2 className="leading-none font-serif text-transparent bg-clip-text bg-gradient-to-r from-foreground via-muted-foreground to-foreground/60 mb-6">
            This is an example of a sticky footer 
          </h2>
          <div className="w-16 md:w-24 h-0.5 bg-gradient-to-r from-primary to-secondary mx-auto"></div>
        </div>
      </div>

      <StickyFooter />
    </main>
  );
};

export { DemoOne };