Getting Started
Templates
Components
| Prop | Type | Default | Description |
|---|---|---|---|
headline | string[] | ["Building Digital", "Experiences™"] | Array of headline lines with flicker effect |
tagline | string | Default tagline | Tagline text (supports newlines) |
coordinates | { x: string; y: string } | { x: "2048PX", y: "256PX" } | Decorative coordinates display |
projectBy | string | "ACME STUDIO" | Project attribution text |
ingredients | Ingredient[] | Default ingredients | Tech stack or ingredients list |
chapters | NavLink[] | Default chapters | Navigation links |
height | number | 550 | Footer height in pixels |
showMenu | boolean | true | Show/hide menu button |
className | string | - | Additional CSS classes |
interface NavLink {
title: string
href: string
}
interface Ingredient {
title: string
href?: string
}<FlickerFooter
headline={["Creative", "Agency™"]}
tagline={`Designing the future\nof digital experiences`}
coordinates={{ x: "1920PX", y: "1080PX" }}
projectBy="DESIGN STUDIO"
ingredients={[
{ title: "REACT" },
{ title: "NEXT.JS" },
{ title: "TAILWIND" },
]}
chapters={[
{ title: "01. ABOUT", href: "/about" },
{ title: "02. WORK", href: "/work" },
{ title: "03. CONTACT", href: "/contact" },
]}
height={800}
/><FlickerFooter headline={["Hello", "World™"]} showMenu={false} />