Equalizer Wordmark Footer
A footer led by the brand as an equalizer wordmark whose letters bounce like levels on hover and focus.
Controls
<FooterEqualizerWordmark />About
Built on Equalizer Wordmark, for music, media and playful brands.
Use it when
- Playful brands with short names.
Skip it when
- Formal professions: use
footer-columns.
Install
The demo above is live today. Installing Pro items opens with VibeBox Motion Pro; join the waitlist to hear first.
Code
The source is part of VibeBox Motion Pro.
Licensed per seat; it installs with the same shadcn command once Pro opens.
See Pro and join the waitlistContent
Typed slots from schema.ts. Facts (hours, prices, quotes, names) come only from the business; until then they render as fill-ins.
| Slot | Label | Type | Limit | Fact |
|---|---|---|---|---|
| brand.name | Business name | text | 40 chars | — |
| brand.descriptor | Trade line | text | 32 chars | — |
| brand.logo | Logo | image | — | — |
| brand.mark.shape | Mark shape | choice | — | — |
| brand.mark.content | Mark content | choice | — | — |
| brand.mark.glyph | Mark glyph | choice | — | — |
| brand.mark.initial | Mark initial | text | 2 chars | — |
| brand.mark.ring | Mark ring | flag | — | — |
| blurb | About line | text | 160 chars | — |
| columns | Link columns | list | up to 4 | — |
| columns[].title | Column title | text | 24 chars | — |
| columns[].links | Links | list | up to 8 | — |
| columns[].links[] | Link | link | 40 chars | — |
| channels | Ways to reach you | list | up to 4 | — |
| channels[].kind | Channel | choice | — | — |
| channels[].label | Label | text | 24 chars | — |
| channels[].value | Value | fact | 120 chars | Yes, a fill-in until given |
| legal | Legal links | list | up to 4 | — |
| legal[] | Legal link | link | 40 chars | — |
| credit | Credit | link | 40 chars | — |
Variants
Fulldefault
full
Wordmark and channels left, columns right.
Compact
compact
Wordmark on top, columns and channels side by side.
Accessibility and motion
- Keyboard
- The wordmark link, links, legal, credit.
- Screen readers
- The wordmark is a link named by the brand; a named footer navigation.
- Touch
- Tapping the wordmark goes home; the bounce is decoration.
- Reduced motion
- The letters do not bounce.
Edge cases and limits
- The credit line comes from content.
Related
A footer that ends with the brand's name set edge to edge, its letters springing up into view.
Footers block · Server
Column Footer
FreeLinks, contact details and legal pages: the brand and a line with link columns, or one compact row.
Footers block · Server