Command Palette

Search for a command to run...

Loading component...

Components free Text Scroll animation

Text Scroll animation

A dynamic scroll-based text and icon animation component featuring three different animation variants. Creates stunning parallax effects with characters and icons that move, rotate, and scale based on scroll position.

Dependencies

framer-motionlenis

Interaction Type

Scroll to trigger character animations
Characters move and transform based on scroll
3D perspective transformations

with shacn cli3.0

//components.json
  "registries": {
    "@skiper-ui": "https://skiper-ui.com//registry/{name}.json"
  }
npx shadcn add @skiper-ui/skiper31

OR with old shacncli

 npx shadcn@latest add https://skiper-ui.com/registry/skiper31.json

How to use

const Skiper31Demo = () => {
  const targetRef = useRef<HTMLDivElement | null>(null);

  const { scrollYProgress } = useScroll({
    target: targetRef,
  });

  return (
   <div
      ref={targetRef}
      className="relative box-border flex h-[210vh] items-center justify-center gap-[2vw] overflow-hidden bg-[#f5f4f3] p-[2vw]"
    >
      <div
        className="font-geist w-full max-w-4xl text-center text-6xl font-bold uppercase tracking-tighter text-black"
        style={{
          perspective: "500px",
        }}
      >
        {["S", "k", "I", "P", "E", "R", "U", "I"].map((char, index) => (
          <CharacterV1
            key={index}
            char={char}
            index={index}
            centerIndex={centerIndex}
            scrollYProgress={scrollYProgress}
          />
        ))}
      </div>
    </div>
  );

const Skiper31Demo2 = () => {
  const targetRef = useRef<HTMLDivElement | null>(null);

  const { scrollYProgress } = useScroll({
    target: targetRef,
  });

    const macIcon = [
    "/mac/Discord.png",
    "/mac/figma.png",
    "/mac/Framer.png",
    "/mac/Github.png",
    "/mac/Monog.png",
    "/mac/notion.png",
    "/mac/Pieces.png",
    "/mac/Postman.png",
    "/mac/vsCode.png",
  ];
  const iconCenterIndex = Math.floor(macIcon.length / 2);

  return (
   <div
      ref={targetRef}
      className="relative box-border flex h-[210vh] items-center justify-center gap-[2vw] overflow-hidden bg-[#f5f4f3] p-[2vw]"
    >
      <div
        className="font-geist w-full max-w-4xl text-center text-6xl font-bold uppercase tracking-tighter text-black"
        style={{
          perspective: "500px",
        }}
      >
        {macIcon.map((icon, index) => (
          <CharacterV2
            key={index}
            char={char}
            index={index}
            centerIndex={iconCenterIndex}
            scrollYProgress={scrollYProgress}
          />
        ))}
      </div>
    </div>
  );

const Skiper31Demo3 = () => {
  const targetRef = useRef<HTMLDivElement | null>(null);

const { scrollYProgress } = useScroll({
target: targetRef,
});

    const macIcon = [
    "/mac/Discord.png",
    "/mac/figma.png",
    "/mac/Framer.png",
    "/mac/Github.png",
    "/mac/Monog.png",
    "/mac/notion.png",
    "/mac/Pieces.png",
    "/mac/Postman.png",
    "/mac/vsCode.png",

];

const iconCenterIndex = Math.floor(macIcon.length / 2);

return (

<div
  ref={targetRef}
  className="relative box-border flex h-[210vh] items-center justify-center gap-[2vw] overflow-hidden bg-[#f5f4f3] p-[2vw]"
>
  <div
    className="font-geist w-full max-w-4xl text-center text-6xl font-bold uppercase tracking-tighter text-black"
    style={{
      perspective: "500px",
    }}
  >
    {macIcon.map((icon, index) => (
      <CharacterV3
        key={index}
        icon={icon}
        index={index}
        centerIndex={iconCenterIndex}
        scrollYProgress={scrollYProgress}
      />
    ))}
  </div>
</div>
); ```

<PropsTable
  props={[
    {
      name: "icon",
      type: "string",
      description: "The icon to display",
    },
    {
      name: "index",
      type: "number",
      description: "The index of the icon",
    },
    {
      name: "centerIndex",
      type: "number",
      description: "The center index of the icon",
    },
    {
      name: "scrollYProgress",
      type: "number",
      description: "The scrollYProgress of the component",
    },
  ]}
/>

Source code

Click on the top right
to view the source code

Keep in mind

Most components here are recreations of the best out there. I don't claim to be the original creator. This is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone, but if I missed something, let me know.

Contact

Additionlly, if you find any bug or issue, feel free to
Drop a dm.

License & Usage:

  • Free to use and modify in both personal and commercial projects.
  • Attribution to Skiper UI is required when using the free version.
  • No attribution required with Skiper UI Pro.
PreviousNext