A footer that sits beneath the page and is uncovered as the content above scrolls away, with a gradient wordmark that follows the pointer, link columns and a newsletter field. Wrap the page above it in FooterRevealUnderPage so it covers the footer.
npx shadcn@latest add https://hyperblur.dev/r/footer-reveal-under.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/footer-reveal-under.tsx.
import { FooterRevealUnder } from "@/components/hyperblur/footer-reveal-under"
<><FooterRevealUnderPage><main>Page content</main></FooterRevealUnderPage><FooterRevealUnder brand="Fieldnote" accent="#2f7bff" /></>| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Fieldnote" | Brand name shown next to the logo mark and used for the copyright line. |
| wordmark | string | Text of the oversized wordmark. Falls back to the brand name. Always rendered in capitals and stretched to the full width. | |
| tagline | string | "Notes that organize themselves, wherever you happen to write them." | Short description under the brand. |
| columns | { title: string; links: { label: string; href: string }[] }[] | Product, Company, Resources | Link columns on the right. |
| socials | { label: string; href: string }[] | X, GitHub, LinkedIn | Links in the bottom bar. |
| legal | { label: string; href: string }[] | Privacy, Terms | Legal links in the bottom bar. |
| newsletterTitle | string | "A monthly letter, no noise" | Label of the email field. |
| placeholder | string | "you@studio.com" | Placeholder of the email field. |
| buttonLabel | string | "Subscribe" | Label of the submit button. |
| successMessage | string | "You are on the list. See you next month." | Message announced after a successful submit. |
| onSubscribe | (email: string) => void | Called with the email when the form is submitted. | |
| copyright | string | Text after the copyright sign. Defaults to the brand name followed by All rights reserved. | |
| accent | string | "#2f7bff" | Accent color for the logo mark, wordmark highlight, focus rings and link underlines. |
| showBackdrop | boolean | false | Render a decorative page stub on top that slides away on a loop. Use it for previews; in a real page leave it off. |
| className | string | Extra class for the root footer. |