Wordmark Footer
A starter footer with a giant wordmark whose letters rise and light up as your cursor passes.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Link columns, a newsletter field, a status pill and a back-to-top link, plus a full-width wordmark with a proximity wave and a cursor-following gradient fill.
Installation
$ npx shadcn@latest add https://guetix.com/r/wordmark-footer.json
Uses the shadcn CLI. It creates components/guetix/wordmark-footer.tsx and installs nothing else.
Usage
example.tsx
import { WordmarkFooter } from "@/components/guetix/wordmark-footer";
export default function Example() {
return <WordmarkFooter />;
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | — | Wordmark text. |
| columns | { title; links }[] | — | Link columns. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Columns are labelled navs; the wordmark is decorative.