Endless Motion Footer

A premium, modular React component from the React Bytes collection. Built with React and TypeScript.

Installation

npm install @reactbytes/endless-motion-footer

Usage

import { EndlessMotionFooter } from "@reactbytes/endless-motion-footer";

export default function Example() {
  return (
    <EndlessMotionFooter />
  );
}

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | text | string | React Bytes | The repeated text string to display across scrolling lines. | | mode | select | internal | The scroll behavior mode. 'internal' sets self-contained scrolling, while 'page-footer' hooks into page scroll. | | minScale | number | 0.5 | The final scale multiplier for the text as it is scrolled into view (from 1 down to minScale). | | lineCount | number | 5 | The number of lines displayed in each scroll loop group (increases vertical height). | | infinite | boolean | true | Enables Lenis smooth scrolling with an infinite viewport scroll loop. | | autoScroll | boolean | true | Enables an automatic marquee-style scrolling drift when the user is not actively scrolling. | | autoScrollSpeed | number | 1 | Speed of the auto-scrolling marquee drift in pixels per frame. | | textColor | color | #e8e5d8 | The CSS text color of the repeated lines. | | bgColor | color | #000000 | The CSS background color of the footer section. |

Presets

This component includes the following design presets:

• Classic Ocean (default)
• Cyberpunk Acid (cyberpunk)
• Crimson Phantom (crimson)
• Monochrome Sleek (monochrome)

Credits & Inspiration

Libraries

• GSAP - Animation Engine
• Lenis - Smooth Scroll Engine

Project Author

• ChandruMIT-o - Creator & Lead Designer

For interactive playgrounds, customizable controls, and code copy-pasting, visit the full showcase page at React Bytes - Endless Motion Footer.