Loading component…
Components /Animated Footer
Reveal-on-scroll footer with cursor-lit ASCII art and parallax
Run the following command
npx shadcn@latest add https://raw.githubusercontent.com/Ashutoshx7/VengeanceUI/main/public/r/animated-footer.json| Prop Name | Type | Default | Description |
|---|---|---|---|
| headingLines | string[] | ["VengeanceUI"] | The large display words along the bottom edge. |
| leftImage | string | '/animated-footer/hand-left.jpg' | Left image URL, sampled into ASCII art. Same-origin or CORS-enabled. |
| rightImage | string | '/animated-footer/hand-right.jpg' | Right image URL, sampled into ASCII art. Same-origin or CORS-enabled. |
| background | string | undefined | Footer background color. Defaults to tailwind classes. |
| textColor | string | undefined | Text color for headings. Defaults to tailwind classes. |
| asciiChars | string | '........:::=+xX#0369' | Character ramp, ordered dark → light, used to render the ASCII art. |
| charColor | string | Adaptive | Color of the ASCII glyphs. Adapts to dark/light mode by default. |
| hoverColor | string | '#ff6a00' | Fill color of a highlighted (hovered) cell. |
| hoverCharColor | string | Adaptive | Glyph color inside a highlighted cell. Adapts to dark/light mode by default. |
| columns | number | 80 | Number of columns each image is sampled to. |
| cellSize | number | 20 | Pixel size of each ASCII cell. |
| fontSize | number | 18 | Font size (px) of the ASCII glyphs. |
| parallaxStrength | number | 20 | Pointer parallax strength in px; set to 0 to disable. |
| hoverRadius | number | 8 | Cursor influence radius, in cells, for the hover highlight. |
| revealOnScroll | boolean | true | Play the reveal when the footer scrolls into view (else show immediately). |
| revealed | boolean | - | Controlled reveal. When set, ignores the built-in observer and plays in (true) / out (false) to match — drive it from your own scroll trigger to reveal the footer from behind other content. |
| className | string | - | Additional classes for the root element. |