Animated Footer
A breathing, full-screen footer: two hands rendered as live, hover-reactive ASCII art with soft parallax, and a wordmark that splits and reveals on scroll. Built with GSAP and Lenis.
npx shadcn@latest add https://ui.aryank.space/r/animated-footer.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | [string, string] | ["Blank", "Space"] | The big two-part wordmark, shown bottom-left and bottom-right. |
| links | { label: string; href: string }[] | Work / About / Writing / Contact | Nav links rendered in the top-left. |
| description | string | "Blank — a software developer…" | Short studio paragraph rendered in the top-right. |
| leftImage | string | "https://ui.aryank.space/assets/animated-footer/blank-hand-right.png" | Left hand image, sampled into ASCII. Defaults to the Compronents asset route backed by Vercel Blob. |
| rightImage | string | "https://ui.aryank.space/assets/animated-footer/blank-hand-left.png" | Right hand image, sampled into ASCII. Defaults to the Compronents asset route backed by Vercel Blob. |
| charColor | string | "#803500" | Base color of the resting ASCII glyphs. |
| hoverColor | string | "#ff6a00" | Color of the glyph clusters lit under the cursor. |
| embedded | boolean | false | Contain the footer to a bounded, relatively-positioned parent (absolute + reveal-on-enter) instead of taking over the viewport. |
headingtupleTwo wordmark halves, tuned independently so narrow names still hold the footer edges.
descriptiontextareaThe studio paragraph in the upper-right; short copy preserves the wide empty field.
linkslinksFour compact nav links work best because the line reveal has room to breathe.
charColorcolorResting ASCII glyph color.
hoverColorcolorLit cluster fill color.
leftImage/rightImageasset-urlHosted through https://ui.aryank.space/assets/animated-footer/blank-hand-right.png and the matching right-hand route.
gsaplenis