FlipFlow
A looping flow of flip cards with smooth motion and subtle interactive effects.
Installation
npx shadcn@latest add https://scrollxui.dev/registry/flipflow.json Add these animations to your tailwind.config.ts:
tailwind.config.ts
// tailwind.config.ts
export default {
theme: {
extend: {
keyframes: {
"canopy-x": {
from: { transform: "translateX(0)" },
to: { transform: "translateX(calc(-100% - var(--gap)))" },
},
"canopy-y": {
from: { transform: "translateY(0)" },
to: { transform: "translateY(calc(-100% - var(--gap)))" },
},
},
animation: {
"canopy-horizontal": "canopy-x var(--duration) infinite linear",
"canopy-vertical": "canopy-y var(--duration) linear infinite",
},
},
},
}Usage
import { FlipFlow } from "@/components/ui/flipflow";
const keyData = [
{ name: "SCROLLX UI" },
{ name: "SCROLLX UI" },
{ name: "SCROLLX UI" },
{ name: "SCROLLX UI" },
{ name: "SCROLLX UI" },
{ name: "SCROLLX UI" },
];<FlipFlow
data={keyData}
cardClassName="h-20 w-48"
/>API Reference
FlipFlow
A looping flow of flip cards with smooth motion and subtle interactive effects.