BadtzUIBeta
Docs
Spaceship Scrollbar

Spaceship Scrollbar

An animated scrollbar that dynamically tracks progress, offering a sleek and interactive user experience.

Once upon a time, in a small village nestled at the foot of the Japanese mountains, there was a young boy named Haruto. Haruto was known for his insatiable curiosity and his love for the ancient legends his grandmother told him.

One evening, as the moon shone brightly in the sky, Haruto sat by the fire with his grandmother. She told him the story of Ryujin, the dragon king of the seas. Ryujin lived in a coral palace at the bottom of the ocean and possessed a magical pearl that controlled the tides.

Fascinated by this story, Haruto dreamed of meeting Ryujin. One day, he decided to set out on an adventure. He walked for days, crossing dense forests and rushing rivers, until he reached the coast.

There, he met a giant turtle, who offered to take him to Ryujin's palace. Haruto gladly accepted and climbed onto the turtle's back. Together, they dove into the depths of the ocean.

At the palace, Ryujin welcomed Haruto with kindness. The dragon, impressed by the boy's courage, offered him a fragment of his magical pearl. With this gift, Haruto could now understand the language of animals and the elements.

Back in his village, Haruto used this gift to help his people, predicting storms and protecting the crops. He became a local hero, and his story was passed down from generation to generation, inspiring other young people to follow their dreams and respect nature.

And so, Haruto, the curious boy, became a legend in his own right, thanks to his encounter with the dragon of the seas.

Installation

pnpm dlx shadcn@latest add https://badtz-ui.com/r/spaceship-scrollbar.json

Usage

import { SpaceshipScrollbar } from "@/components/ui/spaceship-scrollbar";
<div>
  <SpaceshipScrollbar />
</div>

Note
We recommend disabling the default scrollbars on your site to fully enjoy the sleek and seamless experience this custom scrollbar provides.

Credits

  • This component has been built by @Vexoa
  • Mouse Wave ShaderSocial Proof Avatars