54 / Blocks
Footer Wordmark
The oversized brand word that closes a page, drawn as texture rather than content.
"use client"
import { FooterWordmark } from "mischief-ui/footer-wordmark"
export function FooterWordmarkDemo() {
return (
<div className="bg-foreground text-background w-full overflow-hidden rounded-[var(--radius)] pt-8">
<FooterWordmark className="text-[clamp(3rem,12vw,9rem)]">
northstar
</FooterWordmark>
</div>
)
}Installation
Copy the source into your project, or keep it behind a package.
npx shadcn@latest add Tinkerers-Labs/mischief-ui/footer-wordmarkimport { FooterWordmark } from "mischief-ui/footer-wordmark"Or paste it in yourself. The source imports the shared cn helper from @/lib/utils, so point that at your own copy.
import * as React from "react" import { cn } from "@/lib/utils" export type FooterWordmarkProps = Omit< React.HTMLAttributes<HTMLDivElement>, "children"> & { children: string} /** * The oversized brand word that closes a page, drawn at a fraction of the * surrounding text colour and clipped by the edge. It is texture rather thanUsage
export function Close() {
return <FooterWordmark>northstar</FooterWordmark>
}Texture, not a heading
It is drawn at seven percent of the surrounding text colour and clipped by the edge of the page, which is why it is hidden from assistive technology and unselectable: a screen reader announcing an enormous brand name at the end of every page is noise, and a word that is half off-screen is not something anyone should be selecting.
Keep it to one short word. It scales with the viewport and never wraps, so anything long is cut off rather than reflowed, and the name you want read belongs in the text above it.
API
childrenstringOne short word. It is set never to wrap.classNamestringClasses for the element, to change its size or tint.Accessibility
Hidden from assistive technology and taken out of the selection, because it is a texture rather than a name. The tint is mixed from the surrounding text colour, so it stays faint on a light ground and on a dark one without being restyled.