Footers That Earn Their Place: Structure, Motion and Giant Wordmarks in React

The footer is where people go when they are lost

Most teams treat the footer as the last thing they build. It gets a column of links, a copyright line and whatever legal pages the lawyers asked for. Then it ships and nobody looks at it again. That is a missed opportunity, because the footer is one of the few places on a page where people arrive with a clear question: where is the thing I could not find?

Visitors scroll to the bottom for specific reasons. They want contact details, a pricing page, a status page, a privacy policy, or a way to follow the company. Some have simply reached the end of the content and need a sign of what to do next. A footer that answers those needs quietly is doing real work, and one that adds a little character on top makes the whole page feel finished.

This guide covers how to structure a footer, how much motion it can carry, and where a bold brand moment helps rather than hurts. The examples come from the Uncode catalog, so you can open each one, read the code and adapt it.

Start with the job, not the layout

Before choosing a layout, list what the footer must do. For most products the list is short: help people find secondary pages, show who is behind the site, offer a way to stay in touch, and meet legal expectations. Everything else is optional.

Then sort the links by the question they answer rather than by who owns them internally. A column called Product, one called Resources, one called Company and one called Legal covers a surprising range of sites. Keep each column to five or six items. If a column grows past that, the extra links probably belong in a page of their own, not in a footer people skim in two seconds.

Order matters too. People read columns left to right, so put the destinations people want most on the left. Put the legal links in the bottom bar, where they are findable but out of the way. And write link labels the way people say them. "Pricing" beats "Plans and billing options", and "Contact" beats "Get in touch with our team".

Layouts that hold up

The classic multi-column footer is popular for a reason. It scales from a handful of links to dozens, it reads well on wide screens and it collapses into stacked groups on a phone without much effort. If you do nothing else, build that and make it solid.

A centred layout works when you have few links and a strong brand line. The Modem Animated Footer takes this approach: brand name and description on top, a row of social icons, a short navigation row, and a large faded wordmark behind a floating brand icon. It is a good fit for a small product or a personal site, where a big grid of links would feel empty.

Whatever you choose, give the footer room. A cramped footer feels like an afterthought, while generous padding tells people the page ended on purpose. On small screens, keep tap targets at least 44 pixels tall and let link groups wrap into two columns at most.

Giant wordmarks without the gimmick

Oversized brand names at the bottom of the page have become a small trend, and they work because they give the page a clear last beat. The risk is that they become decoration that pushes useful links off screen. The rule that keeps them honest is simple: the links come first, the wordmark comes second, and the wordmark never hides content.

The Beam Wordmark Footer shows how to do this well. Link columns and social buttons sit on top, a slow shaft of light drifts across the section, and the brand name is fitted to the full width and cropped by the bottom edge. The beam passes through the letters as well as the background, so the light feels like one object. Letters lift on hover and hop on click, which is playful without getting in the way.

The Kiln Wordmark Footer goes further. Its wordmark is not a font at all but a small geometric alphabet drawn in SVG, so the stroke weight is a number the code can change. Letters swell under the pointer and press flat when clicked, and clicking an empty part of the panel turns the coloured tile behind it to a new composition. It is a lot of personality for a footer, so reserve something like it for brands that can carry it.

Uncode UI

Build with AI, not against it.

Over 1,400 React and Tailwind components that run live in the browser, with a prompt ready to paste into Claude, Cursor or v0. Plus a community of people building real sites with AI.

Create a free account Browse components Join the community

Motion: make it a reward, not a requirement

A footer is read late and quickly, so motion should never block anything. A few principles keep it safe.

First, animate on arrival only once. A fade and rise when the footer enters the viewport is pleasant the first time and tiresome the tenth. Trigger it with an intersection observer and stop there.

Second, pause anything continuous when it is off screen. A looping animation that keeps running below the fold wastes battery on every page view. The Tangle Footer handles this properly: five nested rings of text rotate slowly like a marquee bent into arches, and the animation pauses as soon as the footer leaves the viewport. It also respects the reduced motion setting, which brings us to the third point.

Third, honour prefers-reduced-motion. Anyone who has asked their system for less movement should get a static footer that still shows all the content. If a component does not check that setting, add the check before you ship it.

Calls to action and forms

A footer is a natural home for a newsletter signup, but a signup that interrupts the links does more harm than good. Keep it to one field and one button, label the field properly, and say in a few words what people will get. If your page has a bigger conversion goal, such as starting a trial, repeat that button above the link columns so it is the first thing people see.

If your product has usage-based pricing, the footer is also a fair place to remind people how it works. The Volume Pricing Card shows a slider that recalculates the monthly price as the visitor drags, with the price digits animating into place. It suits a pricing page better than a footer, but it is a useful reference for how to explain a usage model in one glance. For a more tactile take on the same problem, the Receipt Pricing section prints each plan like a thermal receipt, with a line for the subtotal and a stamp for the yearly discount.

Small signals that make a footer feel finished

Some of the best footer details are almost invisible. A status indicator that shows whether the service is up saves a support ticket. A small "back to top" button helps on long pages, as long as it is a real button with a label for screen readers. Social links should be icon buttons with accessible names, since a bare icon tells assistive technology nothing.

Also think about what happens while content loads. Footers often render before images and data arrive, which makes them jump. Reserve their height, and where a spinner or skeleton belongs elsewhere on the page, pick one that matches your visual language. The loaders in the catalog, such as the Orbit Ring Loader, the Waveform Loader and the Dynamic Island Loader, are small enough to drop into a button or a card without any layout cost.

Accessibility checklist

• Use a real footer element and wrap each link group in a nav with a label.
• Check contrast for muted link text on dark backgrounds, since grey on near black often fails.
• Make sure every interactive element has a visible focus style.
• Keep decorative wordmarks hidden from screen readers and provide the brand name as plain text instead.
• Respect reduced motion for every continuous or scroll-triggered effect.

Pick one idea and finish it

A good footer rarely needs more than one big idea. Choose clean structure and add a single flourish, whether that is a light beam, a giant wordmark or a rotating ring of copy. Then test it on a phone, with a keyboard and with motion turned off.

Every footer mentioned here has a live preview and copyable code in the Uncode catalog. If you build in Claude Code, Cursor or another editor with MCP support, you can connect the catalog to your editor and ask for a footer by name, then change the brand, links and colours in place. The goal is a page that ends as carefully as it begins.