Docs
Skiper Marquee
Skiper Marquee
A Cursor That Follow Images
References
This component is inspired by and adapted from the open source Magic ui project. We've customized it to fit our design system while maintaining the original aesthetic and functionality.
Installation
Install the required dependencies.
Use the CLI to add component to your directory
npx shadcn@latest add "http://legacy.skiper-ui.com/registry/skiper-marquee.json"Update tailwind.config.ts
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
animation: {
marquee: "marquee var(--duration) linear infinite",
"marquee-vertical": "marquee-vertical var(--duration) linear infinite",
},
keyframes: {
marquee: {
from: { transform: "translateX(0)" },
to: { transform: "translateX(calc(-100% - var(--gap)))" },
},
"marquee-vertical": {
from: { transform: "translateY(0)" },
to: { transform: "translateY(calc(-100% - var(--gap)))" },
},
},
},
},
};Usage
<SkiperMarquee />