Scroll Float

Text 30

About

Scrolling float animation

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Scroll Float to your project and fits it to your theme.

Code

How Scroll Float is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ScrollFloat } from "@/components/ui/scroll-float";

const DemoScrollFloat = () => {
  return (
    <div className="w-full min-h-[150vh] bg-white dark:bg-gray-900 p-4 flex flex-col items-center">
      <div className="pt-20 mb-[40vh] text-center text-2xl md:text-5xl lg:text-7xl text-black dark:text-white"> 
         <p>Scroll down</p>
      </div>

       <ScrollFloat
          animationDuration={1}
          ease='back.inOut(2)'
          scrollStart='center 80%'
          scrollEnd='center 20%'
          stagger={0.05}
          textClassName="text-8xl md:text-9xl lg:text-[10rem] font-bold text-black dark:text-white text-center"
        >
           21st.dev
        </ScrollFloat>


    </div>
  );
};

export { DemoScrollFloat };