Animated SaaS Footer with Stats Ticket

Navigation 164

About

Animated SaaS footer section for React: a hairline grid with section index, CTA, spinning SVG globe and link columns over an interactive ticket with live status, a rolling odometer counter and a halftone canvas wordmark. Recolourable, zero dependencies.

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

Code

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

Usage.tsx

"use client"

import TicketStubFooter from "@/components/ui/ticket-stub-footer"

// Same component, re-inked: a paper page, a cobalt ticket and new copy.
export default function DemoPaper() {
  return (
    <div className="w-full bg-[#eee8da]">
      <TicketStubFooter
        brand="Pilot"
        company="Pilot Support Co."
        year={2026}
        eyebrow={["Now answering in 38 languages", "Median first reply: 9 seconds", "Escalates when it isn't sure"]}
        headline={["Answer faster.", "Escalate less."]}
        description="Pilot reads your docs, drafts the reply and hands the hard ones to a human, with the context already attached."
        cta={{ label: "Book a demo" }}
        sections={[
          { label: "Overview" },
          { label: "How it works" },
          { label: "Channels" },
          { label: "Security" },
          { label: "Pricing" },
          { label: "Changelog" },
        ]}
        linkGroups={[
          {
            title: "Product",
            links: [{ label: "Inbox" }, { label: "Autopilot" }, { label: "Analytics" }, { label: "API" }],
          },
          {
            title: "Company",
            links: [{ label: "About" }, { label: "Careers" }, { label: "Press" }, { label: "Contact" }],
          },
        ]}
        statusLabels={["Online", "On hold"]}
        statusCaption="Autopilot"
        count={3480221}
        countLabel="Replies sent"
        rate={0.9}
        blurb="Plug in Zendesk, Intercom or plain email. Pilot drafts every reply from your own docs, cites its sources, and never sends what it can't stand behind."
        background="#eee8da"
        ink="#1d1c1a"
        muted="#6e685d"
        accent="#3355e8"
        accentDeep="#2742c2"
        accentInk="#f3eee2"
      />
    </div>
  )
}