Skip to main content

​
Installation

    ​
    Usage

    showLineNumbers
    import { ScrollVelocityContainer, ScrollVelocityRow } from "@/components/ui/scroll-based-velocity"
    showLineNumbers
    <ScrollVelocityContainer>
  <ScrollVelocityRow baseVelocity={5}>
    <span>Scroll to see the effect • </span>
  </ScrollVelocityRow>
</ScrollVelocityContainer>

    ​
    Components

    ​
    ScrollVelocityContainer

    Wrapper component that provides scroll velocity context to child rows.
    PropTypeDefaultDescription
    childrenReact.ReactNode-The ScrollVelocityRow components.
    classNamestring-Additional class names for the container.
    …restReact.HTMLAttributes<HTMLDivElement>-All standard div HTML attributes are supported.

    ​
    ScrollVelocityRow

    A row that moves based on scroll velocity.
    PropTypeDefaultDescription
    childrenReact.ReactNode-The content to scroll (will be duplicated).
    baseVelocitynumber5Base scrolling speed.
    direction1 | -11Direction of scroll (1 for right, -1 for left).
    classNamestring-Additional class names for the row.
    …restReact.HTMLAttributes<HTMLDivElement>-All standard div HTML attributes are supported.

    ​
    Examples

    ​
    Multiple Rows

    showLineNumbers
    <ScrollVelocityContainer>
  <ScrollVelocityRow baseVelocity={5}>
    <span>First row • </span>
  </ScrollVelocityRow>
  <ScrollVelocityRow baseVelocity={-3}>
    <span>Second row (reverse) • </span>
  </ScrollVelocityRow>
</ScrollVelocityContainer>

    ​
    Independent Row (without container)

    showLineNumbers
    <ScrollVelocityRow baseVelocity={10} direction={-1}>
  <span>Independent row • </span>
</ScrollVelocityRow>

    Build docs developers (and LLMs) love

    Get started for freeTalk to us