A minimal paper footer in one row: brand mark, links whose letters roll up one by one into the accent on hover, a live local clock with a blinking colon, and a back to top button whose arrow swaps out. It stacks neatly on small containers.
Next project
Harbor & Pine, a hotel identity
npx shadcn@latest add https://hyperblur.dev/r/footer-single-line.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/footer-single-line.tsx.
import { FooterSingleLine } from "@/components/hyperblur/footer-single-line"
<FooterSingleLine brand="Atlas Works" city="Berlin" timeZone="Europe/Berlin" />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Lumen Studio" | Brand name next to the mark. |
| year | number | 2026 | Year in the copyright. |
| links | { label: string; href: string }[] | 5 links | Links in the row. |
| city | string | "Lisbon" | City label beside the clock. |
| timeZone | string | "Europe/Lisbon" | IANA time zone for the clock. The clock renders after mount. |
| showTop | boolean | true | Shows the back to top button. |
| onTop | () => void | Called when the back to top button is pressed, before scrolling. | |
| appearance | "light" | "dark" | "light" | Paper or dark palette. |
| accent | string | "#ff5b2e" | Mark and rolled letter color. |
| className | string | "" | Extra classes for the root element. |
| style | CSSProperties | Inline styles merged after the accent variables. |