Animated Wordmark Footer with Shutter Letter

Footers 164

About

Animated wordmark footer with a camera-shutter letter: the brand runs edge to edge in a geometric SVG alphabet and one glyph is a three-blade shutter that turns to follow the pointer. Includes a newsletter field, social and legal links.

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

Code

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

Usage.tsx

"use client"

import ShutterGlyphFooter from "@/components/ui/shutter-glyph-footer"

// The same footer re-branded and re-inked: bone on black, the shutter on the
// third letter, other links, and a signup handler that can fail — try
// fail@example.com to see the error state.
export default function Demo() {
  return (
    <div className="w-full bg-[#111110]">
      <ShutterGlyphFooter
        brand="Verso"
        company="Verso Type & Print"
        since={2017}
        background="#111110"
        ink="#efe9dc"
        signupLabel="Monthly letters from the print room"
        placeholder="Your email"
        socials={[
          { label: "Are.na", href: "#" },
          { label: "Instagram", href: "#" },
          { label: "Bandcamp", href: "#" },
        ]}
        legal={[
          { label: "Imprint", href: "#" },
          { label: "Privacy", href: "#" },
        ]}
        onSubscribe={async (email) => {
          await new Promise((r) => setTimeout(r, 900))
          return !email.startsWith("fail@")
        }}
        onLinkClick={(label) => console.log("footer link:", label)}
      />
    </div>
  )
}