Footer with Giant Wordmark

Realestate77: Footer with Giant Wordmark

A typographic footer for a property development led by a huge wordmark (text-7xl on small screens, text-9xl from the md breakpoint) that rises out of a clipped line as it enters the viewport. Under it sit three ruled rows: the site links in one wrapping row, the sales suite address with the phone number and email on the right, and the copyright line with policy links. Each hairline draws from the left together with the row it rules.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://beste.dev/r/realestate77?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://beste.dev/r-base/realestate77?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/realestate77.tsx; it uses no shadcn/ui primitives and no shared components, only framer-motion and the cn helper.

Quick start

The installed file exports realestate77Demo alongside the block: the exact props behind the preview above. Spread it to get a working footer in one line.

import { Realestate77, realestate77Demo } from "@/components/beste/block/realestate77";

export default function Page() {
  return <Realestate77 {...realestate77Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Realestate77 } from "@/components/beste/block/realestate77";

export default function Page() {
  return (
    <Realestate77
      brand="Alder Row"
      items={[
        { label: "Residences", href: "/residences" },
        { label: "Location", href: "/location" },
        { label: "Register", href: "/register" },
      ]}
      address="Sales suite, 2 Mill Lane, Riverside. Open daily, 10 to 6."
      phone={{ label: "+44 20 7946 0000", href: "tel:+442079460000" }}
      email={{ label: "[email protected]", href: "mailto:[email protected]" }}
      copyright="2026 Hartwell & Lowe. Computer-generated images are indicative only."
      legalLinks={[
        { label: "Privacy", href: "/privacy" },
        { label: "Terms", href: "/terms" },
      ]}
    />
  );
}

Props

type FooterLink = { label: string; href: string };

Behavior notes

• The wordmark sits inside an overflow-hidden wrapper and travels from 100% of its own height to zero while fading in, so it appears to rise out of the first hairline; the move takes 1.2 seconds on the set's ease.
• The link row, the contact row and the bottom row are each a relative block with a hairline motion.span that scales from the left as the row enters the viewport, once, with a -10% margin.
• Links rise in one after another 80 ms apart; the address and the phone and email group follow, and the copyright row comes last.
• The contact row is a twelve-column grid from the md breakpoint with the address across seven columns and the phone and email right-aligned in the last four; on small screens the two stack.
• With prefers-reduced-motion the wordmark rise, every entrance and the hairline draws are skipped and the footer renders in its final state.