marquee.ts
2.18 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
const orientation = [
"horizontal",
"vertical"
] as const
export default {
"slots": {
"root": "group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s]",
"content": "flex items-center shrink-0 justify-around gap-(--gap) min-w-max"
},
"variants": {
"orientation": {
"horizontal": {
"content": "w-full"
},
"vertical": {
"content": "h-full"
}
},
"pauseOnHover": {
"true": {
"content": "group-hover:[animation-play-state:paused]"
}
},
"reverse": {
"true": {
"content": "![animation-direction:reverse]"
}
},
"overlay": {
"true": {
"root": "before:absolute before:pointer-events-none before:content-[\"\"] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[\"\"] after:z-2 after:from-default after:to-transparent"
}
}
},
"compoundVariants": [
{
"orientation": "horizontal" as typeof orientation[number],
"class": {
"root": "flex-row",
"content": "flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"
}
},
{
"orientation": "horizontal" as typeof orientation[number],
"overlay": true,
"class": {
"root": "before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden"
}
},
{
"orientation": "vertical" as typeof orientation[number],
"class": {
"root": "flex-col",
"content": "flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"
}
},
{
"orientation": "vertical" as typeof orientation[number],
"overlay": true,
"class": {
"root": "before:inset-x-0 before:top-0 before:w-full before:h-1/3 before:bg-gradient-to-b after:inset-x-0 after:bottom-0 after:w-full after:h-1/3 after:bg-gradient-to-t backface-hidden"
}
}
]
}