scroll-text-marquee-unidirectional

PreviousNext
Docs
ui-layoutscomponent

Preview

Loading preview…
./registry/components/text-animation/text-marque/animationone.tsx
import React from 'react';
import ScrollBaseAnimation from '@/components/ui/scroll-text-marque';

function index() {
  return (
    <>
      <div className='h-[500px] grid place-content-center'>
        <ScrollBaseAnimation
          delay={500}
          baseVelocity={-3}
          clasname='font-bold tracking-[-0.07em] leading-[90%]'
        >
          Star the repo if you like it
        </ScrollBaseAnimation>
        <ScrollBaseAnimation
          delay={500}
          baseVelocity={3}
          clasname='font-bold tracking-[-0.07em] leading-[90%]'
        >
          Share it if you like it
        </ScrollBaseAnimation>
      </div>
    </>
  );
}

export default index;

Installation

npx shadcn@latest add @ui-layouts/scroll-text-marquee-unidirectional

Usage

import { ScrollTextMarqueeUnidirectional } from "@/components/scroll-text-marquee-unidirectional"
<ScrollTextMarqueeUnidirectional />