velloo 0.0.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (267) hide show
  1. package/BUN-LICENSE.md +91 -0
  2. package/LICENSE +202 -0
  3. package/NOTICE +9 -0
  4. package/README.md +288 -2
  5. package/THIRD-PARTY-NOTICES.md +467 -0
  6. package/assets/elsewhere-alps-9fqhv029.jpg +0 -0
  7. package/assets/elsewhere-bali-vp60g115.jpg +0 -0
  8. package/assets/elsewhere-forest-xgn23zrj.jpg +0 -0
  9. package/assets/elsewhere-japan-qs7qkbr2.jpg +0 -0
  10. package/assets/elsewhere-kyoto-map-n2bvkrya.svg +1 -0
  11. package/assets/elsewhere-kyoto-qemtn6nk.jpg +0 -0
  12. package/assets/elsewhere-room-g1gaw7cs.jpg +0 -0
  13. package/canvas/apple-touch-icon.png +0 -0
  14. package/canvas/assets/index-BCvDZiBo.css +2 -0
  15. package/canvas/assets/index-ClaBqcaS.js +28 -0
  16. package/canvas/assets/lucide-all-iIF-pmzN.js +1 -0
  17. package/canvas/assets/radix-C3HaOB-d.js +41 -0
  18. package/canvas/assets/react-D0Ec-185.js +9 -0
  19. package/canvas/assets/rolldown-runtime-hePW80VL.js +1 -0
  20. package/canvas/assets/vendor-CKmQ-Zst.js +53 -0
  21. package/canvas/favicon.ico +0 -0
  22. package/canvas/favicon.svg +12 -0
  23. package/canvas/fonts/OFL-1.1.txt +93 -0
  24. package/canvas/fonts/poppins-700.woff2 +0 -0
  25. package/canvas/icon-192.png +0 -0
  26. package/canvas/icon-512.png +0 -0
  27. package/canvas/index.html +22 -0
  28. package/canvas/site.webmanifest +11 -0
  29. package/chunk-08sv3k41.js +4 -0
  30. package/chunk-0fe83yzt.js +2 -0
  31. package/chunk-0t68szgr.js +3 -0
  32. package/chunk-1h55s5he.js +2 -0
  33. package/chunk-2c7jbx46.js +2 -0
  34. package/chunk-2smsg2ct.js +7 -0
  35. package/chunk-308ynsxd.js +2 -0
  36. package/chunk-3e8vez4d.js +1229 -0
  37. package/chunk-40xgcth8.js +63 -0
  38. package/chunk-4dn75m6t.js +3 -0
  39. package/chunk-4fj5tahv.js +3 -0
  40. package/chunk-6nqghjda.js +3 -0
  41. package/chunk-6tx68d90.js +3 -0
  42. package/chunk-6w6ch4ce.js +2 -0
  43. package/chunk-735ezz23.js +86 -0
  44. package/chunk-7eq7nx37.js +7 -0
  45. package/chunk-7eyb8yrf.js +6 -0
  46. package/chunk-80fjfyha.js +86 -0
  47. package/chunk-80r93t2e.js +4 -0
  48. package/chunk-94vx1yb0.js +3 -0
  49. package/chunk-9vg3yafz.js +3 -0
  50. package/chunk-a84n72m2.js +4 -0
  51. package/chunk-ampmdzz4.js +10 -0
  52. package/chunk-avns4dbf.js +2 -0
  53. package/chunk-ayrb3qnm.js +3 -0
  54. package/chunk-bwnvcncx.js +3 -0
  55. package/chunk-ccszg02q.js +5 -0
  56. package/chunk-cvn689d5.js +3 -0
  57. package/chunk-cxe6jjwj.js +3 -0
  58. package/chunk-dg6z4vdd.js +3 -0
  59. package/chunk-dgwjpbp9.js +3 -0
  60. package/chunk-dy41n60j.js +52 -0
  61. package/chunk-ek71z2fv.js +226 -0
  62. package/chunk-er1fxb7d.js +2 -0
  63. package/chunk-eyr8hrzf.js +2 -0
  64. package/chunk-fjbzk4sw.js +3 -0
  65. package/chunk-fsbsksga.js +3 -0
  66. package/chunk-h6gchare.js +3 -0
  67. package/chunk-hcb68zt7.js +85 -0
  68. package/chunk-hggap8fq.js +3 -0
  69. package/chunk-j11fyeqh.js +2 -0
  70. package/chunk-jb21jkp1.js +8 -0
  71. package/chunk-jfx9xjmr.js +18 -0
  72. package/chunk-jr0ss0mm.js +303 -0
  73. package/chunk-jrsknzjt.js +3 -0
  74. package/chunk-jv0xggh0.js +2 -0
  75. package/chunk-k17gfwq3.js +2 -0
  76. package/chunk-mh2pr7cq.js +5 -0
  77. package/chunk-mnapdp1y.js +2 -0
  78. package/chunk-mzhdrawd.js +3 -0
  79. package/chunk-n9gs6yx9.js +2 -0
  80. package/chunk-ngnymg2q.js +3 -0
  81. package/chunk-nwx5700b.js +3 -0
  82. package/chunk-pjtg3wnm.js +4 -0
  83. package/chunk-pp86v6m6.js +3 -0
  84. package/chunk-r22epxz2.js +3 -0
  85. package/chunk-rgasy862.js +5 -0
  86. package/chunk-rpwpeph5.js +3 -0
  87. package/chunk-s23gtejf.js +3 -0
  88. package/chunk-sjgqnykd.js +6 -0
  89. package/chunk-sn3x2m0m.js +6 -0
  90. package/chunk-t448rrfr.js +2 -0
  91. package/chunk-tdsk5wxa.js +451 -0
  92. package/chunk-v40fn08f.js +442 -0
  93. package/chunk-vbk1qhdz.js +3 -0
  94. package/chunk-vdkrbzh1.js +2 -0
  95. package/chunk-vgmr98cv.js +40 -0
  96. package/chunk-vsv8z729.js +6 -0
  97. package/chunk-x4f4k9pp.js +26 -0
  98. package/chunk-xt5ayg7g.js +4 -0
  99. package/chunk-ydhwv29b.js +244 -0
  100. package/chunk-zb6hc1y0.js +2 -0
  101. package/cli.js +3 -0
  102. package/launcher.cjs +97 -0
  103. package/package.json +58 -5
  104. package/pkgs/helpers/src/box.tsx +21 -0
  105. package/pkgs/helpers/src/cn.ts +32 -0
  106. package/pkgs/helpers/src/descriptors.ts +270 -0
  107. package/pkgs/helpers/src/divider.tsx +123 -0
  108. package/pkgs/helpers/src/gradient.tsx +90 -0
  109. package/pkgs/helpers/src/heading.tsx +20 -0
  110. package/pkgs/helpers/src/icon-data.ts +8009 -0
  111. package/pkgs/helpers/src/icon.tsx +53 -0
  112. package/pkgs/helpers/src/image.tsx +111 -0
  113. package/pkgs/helpers/src/index.ts +29 -0
  114. package/pkgs/helpers/src/layer.tsx +61 -0
  115. package/pkgs/helpers/src/lowering.ts +53 -0
  116. package/pkgs/helpers/src/paths.ts +47 -0
  117. package/pkgs/helpers/src/placeholder.tsx +88 -0
  118. package/pkgs/helpers/src/prose.tsx +42 -0
  119. package/pkgs/helpers/src/registry.ts +41 -0
  120. package/pkgs/helpers/src/svg.tsx +62 -0
  121. package/pkgs/helpers/src/text.tsx +16 -0
  122. package/pkgs/provider-antd/src/index.ts +78 -0
  123. package/pkgs/provider-antd/src/intro.ts +14 -0
  124. package/pkgs/provider-antd/src/manifest.ts +439 -0
  125. package/pkgs/provider-antd/src/overlays.ts +176 -0
  126. package/pkgs/provider-antd/src/registry.ts +104 -0
  127. package/pkgs/provider-antd/src/render-pass.ts +43 -0
  128. package/pkgs/provider-antd/src/tailwind-entry.css +21 -0
  129. package/pkgs/provider-antd/src/theme.ts +132 -0
  130. package/pkgs/provider-antd/src/version.ts +8 -0
  131. package/pkgs/provider-chakra/src/index.ts +80 -0
  132. package/pkgs/provider-chakra/src/intro.ts +14 -0
  133. package/pkgs/provider-chakra/src/manifest.ts +421 -0
  134. package/pkgs/provider-chakra/src/overlays.ts +246 -0
  135. package/pkgs/provider-chakra/src/registry.ts +227 -0
  136. package/pkgs/provider-chakra/src/render-pass.ts +55 -0
  137. package/pkgs/provider-chakra/src/tailwind-entry.css +21 -0
  138. package/pkgs/provider-chakra/src/theme.ts +180 -0
  139. package/pkgs/provider-chakra/src/version.ts +8 -0
  140. package/pkgs/provider-mui/src/index.ts +117 -0
  141. package/pkgs/provider-mui/src/intro.ts +12 -0
  142. package/pkgs/provider-mui/src/manifest.ts +263 -0
  143. package/pkgs/provider-mui/src/overlays.ts +124 -0
  144. package/pkgs/provider-mui/src/registry.ts +120 -0
  145. package/pkgs/provider-mui/src/render-pass.ts +36 -0
  146. package/pkgs/provider-mui/src/tailwind-entry.css +21 -0
  147. package/pkgs/provider-mui/src/theme.ts +129 -0
  148. package/pkgs/provider-mui/src/version.ts +8 -0
  149. package/pkgs/provider-none/src/components-inline.tsx +204 -0
  150. package/pkgs/provider-none/src/components.tsx +155 -0
  151. package/pkgs/provider-none/src/index.ts +57 -0
  152. package/pkgs/provider-none/src/intro.ts +18 -0
  153. package/pkgs/provider-none/src/manifest.ts +163 -0
  154. package/pkgs/provider-none/src/registry-inline.ts +36 -0
  155. package/pkgs/provider-none/src/registry.ts +39 -0
  156. package/pkgs/provider-none/src/tailwind-entry.css +57 -0
  157. package/pkgs/provider-none/src/version.ts +10 -0
  158. package/pkgs/schema/src/annotation.ts +120 -0
  159. package/pkgs/schema/src/asset.ts +66 -0
  160. package/pkgs/schema/src/board.ts +71 -0
  161. package/pkgs/schema/src/comment.ts +107 -0
  162. package/pkgs/schema/src/config.ts +185 -0
  163. package/pkgs/schema/src/css-sanitize.ts +56 -0
  164. package/pkgs/schema/src/extension.ts +105 -0
  165. package/pkgs/schema/src/fonts.ts +690 -0
  166. package/pkgs/schema/src/frame.ts +40 -0
  167. package/pkgs/schema/src/icon-name.ts +21 -0
  168. package/pkgs/schema/src/ids.ts +14 -0
  169. package/pkgs/schema/src/index.ts +169 -0
  170. package/pkgs/schema/src/migrate.ts +297 -0
  171. package/pkgs/schema/src/node.ts +229 -0
  172. package/pkgs/schema/src/paths.ts +28 -0
  173. package/pkgs/schema/src/repo.ts +134 -0
  174. package/pkgs/schema/src/screen.ts +30 -0
  175. package/pkgs/schema/src/snippet-resolve.ts +193 -0
  176. package/pkgs/schema/src/snippet.ts +104 -0
  177. package/pkgs/schema/src/svg-sanitize.ts +487 -0
  178. package/pkgs/schema/src/theme.ts +218 -0
  179. package/pkgs/schema/src/typeset.ts +693 -0
  180. package/pkgs/schema/src/validate-ids.ts +46 -0
  181. package/pkgs/schema/src/viewport.ts +8 -0
  182. package/pkgs/shadcn-snapshot/dist/manifest.json +8109 -0
  183. package/pkgs/shadcn-snapshot/src/components/canvas-portal.tsx +55 -0
  184. package/pkgs/shadcn-snapshot/src/components/ui/accordion.tsx +122 -0
  185. package/pkgs/shadcn-snapshot/src/components/ui/alert-dialog.tsx +164 -0
  186. package/pkgs/shadcn-snapshot/src/components/ui/alert.tsx +74 -0
  187. package/pkgs/shadcn-snapshot/src/components/ui/aspect-ratio.tsx +13 -0
  188. package/pkgs/shadcn-snapshot/src/components/ui/attachment.tsx +197 -0
  189. package/pkgs/shadcn-snapshot/src/components/ui/avatar.tsx +100 -0
  190. package/pkgs/shadcn-snapshot/src/components/ui/badge.tsx +50 -0
  191. package/pkgs/shadcn-snapshot/src/components/ui/breadcrumb.tsx +109 -0
  192. package/pkgs/shadcn-snapshot/src/components/ui/bubble.tsx +130 -0
  193. package/pkgs/shadcn-snapshot/src/components/ui/button-group.tsx +82 -0
  194. package/pkgs/shadcn-snapshot/src/components/ui/button.tsx +72 -0
  195. package/pkgs/shadcn-snapshot/src/components/ui/calendar.tsx +229 -0
  196. package/pkgs/shadcn-snapshot/src/components/ui/card.tsx +92 -0
  197. package/pkgs/shadcn-snapshot/src/components/ui/carousel.tsx +235 -0
  198. package/pkgs/shadcn-snapshot/src/components/ui/chart-option.ts +250 -0
  199. package/pkgs/shadcn-snapshot/src/components/ui/chart.tsx +177 -0
  200. package/pkgs/shadcn-snapshot/src/components/ui/checkbox.tsx +41 -0
  201. package/pkgs/shadcn-snapshot/src/components/ui/collapsible.tsx +32 -0
  202. package/pkgs/shadcn-snapshot/src/components/ui/combobox.tsx +196 -0
  203. package/pkgs/shadcn-snapshot/src/components/ui/context-menu.tsx +227 -0
  204. package/pkgs/shadcn-snapshot/src/components/ui/dialog.tsx +131 -0
  205. package/pkgs/shadcn-snapshot/src/components/ui/direction.tsx +24 -0
  206. package/pkgs/shadcn-snapshot/src/components/ui/drawer.tsx +112 -0
  207. package/pkgs/shadcn-snapshot/src/components/ui/dropdown-menu.tsx +205 -0
  208. package/pkgs/shadcn-snapshot/src/components/ui/empty.tsx +98 -0
  209. package/pkgs/shadcn-snapshot/src/components/ui/field.tsx +228 -0
  210. package/pkgs/shadcn-snapshot/src/components/ui/hover-card.tsx +51 -0
  211. package/pkgs/shadcn-snapshot/src/components/ui/input-group.tsx +148 -0
  212. package/pkgs/shadcn-snapshot/src/components/ui/input.tsx +43 -0
  213. package/pkgs/shadcn-snapshot/src/components/ui/item.tsx +187 -0
  214. package/pkgs/shadcn-snapshot/src/components/ui/kbd.tsx +30 -0
  215. package/pkgs/shadcn-snapshot/src/components/ui/label.tsx +25 -0
  216. package/pkgs/shadcn-snapshot/src/components/ui/marker.tsx +71 -0
  217. package/pkgs/shadcn-snapshot/src/components/ui/menubar.tsx +243 -0
  218. package/pkgs/shadcn-snapshot/src/components/ui/message.tsx +89 -0
  219. package/pkgs/shadcn-snapshot/src/components/ui/native-select.tsx +60 -0
  220. package/pkgs/shadcn-snapshot/src/components/ui/navigation-menu.tsx +165 -0
  221. package/pkgs/shadcn-snapshot/src/components/ui/pagination.tsx +117 -0
  222. package/pkgs/shadcn-snapshot/src/components/ui/popover.tsx +66 -0
  223. package/pkgs/shadcn-snapshot/src/components/ui/progress.tsx +35 -0
  224. package/pkgs/shadcn-snapshot/src/components/ui/radio-group.tsx +48 -0
  225. package/pkgs/shadcn-snapshot/src/components/ui/scroll-area.tsx +59 -0
  226. package/pkgs/shadcn-snapshot/src/components/ui/select.tsx +180 -0
  227. package/pkgs/shadcn-snapshot/src/components/ui/separator.tsx +32 -0
  228. package/pkgs/shadcn-snapshot/src/components/ui/sheet.tsx +107 -0
  229. package/pkgs/shadcn-snapshot/src/components/ui/skeleton.tsx +17 -0
  230. package/pkgs/shadcn-snapshot/src/components/ui/slider.tsx +68 -0
  231. package/pkgs/shadcn-snapshot/src/components/ui/sonner.tsx +91 -0
  232. package/pkgs/shadcn-snapshot/src/components/ui/spinner.tsx +21 -0
  233. package/pkgs/shadcn-snapshot/src/components/ui/switch.tsx +41 -0
  234. package/pkgs/shadcn-snapshot/src/components/ui/table.tsx +93 -0
  235. package/pkgs/shadcn-snapshot/src/components/ui/tabs.tsx +84 -0
  236. package/pkgs/shadcn-snapshot/src/components/ui/textarea.tsx +24 -0
  237. package/pkgs/shadcn-snapshot/src/components/ui/toggle-group.tsx +94 -0
  238. package/pkgs/shadcn-snapshot/src/components/ui/toggle.tsx +50 -0
  239. package/pkgs/shadcn-snapshot/src/components/ui/tooltip.tsx +47 -0
  240. package/pkgs/shadcn-snapshot/src/examples.ts +36 -0
  241. package/pkgs/shadcn-snapshot/src/groups.ts +87 -0
  242. package/pkgs/shadcn-snapshot/src/index.ts +43 -0
  243. package/pkgs/shadcn-snapshot/src/lib/utils.ts +4 -0
  244. package/pkgs/shadcn-snapshot/src/manifest.ts +12 -0
  245. package/pkgs/shadcn-snapshot/src/notes.ts +97 -0
  246. package/pkgs/shadcn-snapshot/src/paths.ts +47 -0
  247. package/pkgs/shadcn-snapshot/src/registry-files.ts +293 -0
  248. package/pkgs/shadcn-snapshot/src/registry.ts +631 -0
  249. package/pkgs/shadcn-snapshot/src/shadcn-tailwind.css +632 -0
  250. package/pkgs/shadcn-snapshot/src/tailwind-entry.css +159 -0
  251. package/pkgs/shadcn-snapshot/src/version.ts +8 -0
  252. package/plugins/claude/velloo/.claude-plugin/plugin.json +6 -0
  253. package/plugins/claude/velloo/agents/velloo-design-reviewer.md +33 -0
  254. package/plugins/claude/velloo/agents/velloo-designer.md +39 -0
  255. package/plugins/claude/velloo/commands/design.md +11 -0
  256. package/plugins/claude/velloo/commands/implement.md +10 -0
  257. package/plugins/claude/velloo/commands/review.md +8 -0
  258. package/plugins/gemini/GEMINI.md +31 -0
  259. package/plugins/gemini/commands/velloo/design.toml +10 -0
  260. package/plugins/gemini/commands/velloo/implement.toml +9 -0
  261. package/plugins/gemini/gemini-extension.json +9 -0
  262. package/skills/velloo-brand/SKILL.md +124 -0
  263. package/skills/velloo-design/SKILL.md +144 -0
  264. package/skills/velloo-design-system/SKILL.md +90 -0
  265. package/skills/velloo-implement/SKILL.md +101 -0
  266. package/skills/velloo-logo/SKILL.md +93 -0
  267. package/skills/velloo-setup/SKILL.md +156 -0
@@ -0,0 +1,632 @@
1
+ /* Vendored from shadcn@4.20.1 (dist/tailwind.css) — imported by
2
+ * tailwind-entry.css. Regenerate with `bun run vendor`; do not hand-edit.
3
+ */
4
+ @theme inline {
5
+ @keyframes accordion-down {
6
+ from {
7
+ height: 0;
8
+ }
9
+ to {
10
+ height: var(
11
+ --radix-accordion-content-height,
12
+ var(--accordion-panel-height, auto)
13
+ );
14
+ }
15
+ }
16
+
17
+ @keyframes accordion-up {
18
+ from {
19
+ height: var(
20
+ --radix-accordion-content-height,
21
+ var(--accordion-panel-height, auto)
22
+ );
23
+ }
24
+ to {
25
+ height: 0;
26
+ }
27
+ }
28
+ }
29
+
30
+ /* Custom variants */
31
+ @custom-variant data-open {
32
+ &:where([data-state="open"]),
33
+ &:where([data-open]:not([data-open="false"])) {
34
+ @slot;
35
+ }
36
+ }
37
+
38
+ @custom-variant data-closed {
39
+ &:where([data-state="closed"]),
40
+ &:where([data-closed]:not([data-closed="false"])) {
41
+ @slot;
42
+ }
43
+ }
44
+
45
+ @custom-variant data-checked {
46
+ &:where([data-state="checked"]),
47
+ &:where([data-checked]:not([data-checked="false"])) {
48
+ @slot;
49
+ }
50
+ }
51
+
52
+ @custom-variant data-unchecked {
53
+ &:where([data-state="unchecked"]),
54
+ &:where([data-unchecked]:not([data-unchecked="false"])) {
55
+ @slot;
56
+ }
57
+ }
58
+
59
+ @custom-variant data-selected {
60
+ &:where([data-selected="true"]) {
61
+ @slot;
62
+ }
63
+ }
64
+
65
+ @custom-variant data-disabled {
66
+ &:where([data-disabled="true"]),
67
+ &:where([data-disabled]:not([data-disabled="false"])) {
68
+ @slot;
69
+ }
70
+ }
71
+
72
+ @custom-variant data-active {
73
+ &:where([data-state="active"]),
74
+ &:where([data-active]:not([data-active="false"])) {
75
+ @slot;
76
+ }
77
+ }
78
+
79
+ @custom-variant data-horizontal {
80
+ &:where([data-orientation="horizontal"]) {
81
+ @slot;
82
+ }
83
+ }
84
+
85
+ @custom-variant data-vertical {
86
+ &:where([data-orientation="vertical"]) {
87
+ @slot;
88
+ }
89
+ }
90
+
91
+ @utility no-scrollbar {
92
+ -ms-overflow-style: none;
93
+ scrollbar-width: none;
94
+
95
+ &::-webkit-scrollbar {
96
+ display: none;
97
+ }
98
+ }
99
+
100
+ /* scroll-fade */
101
+ @property --scroll-fade-t {
102
+ syntax: "<length-percentage>";
103
+ inherits: false;
104
+ initial-value: 0px;
105
+ }
106
+ @property --scroll-fade-b {
107
+ syntax: "<length-percentage>";
108
+ inherits: false;
109
+ initial-value: 0px;
110
+ }
111
+ @property --scroll-fade-s {
112
+ syntax: "<length-percentage>";
113
+ inherits: false;
114
+ initial-value: 0px;
115
+ }
116
+ @property --scroll-fade-e {
117
+ syntax: "<length-percentage>";
118
+ inherits: false;
119
+ initial-value: 0px;
120
+ }
121
+ @property --scroll-fade-mask {
122
+ syntax: "*";
123
+ inherits: false;
124
+ }
125
+
126
+ @theme inline {
127
+ @keyframes scroll-fade-reveal-t {
128
+ from {
129
+ --scroll-fade-t: 0px;
130
+ }
131
+ to {
132
+ --scroll-fade-t: var(--_scroll-fade-size-t, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
133
+ }
134
+ }
135
+ @keyframes scroll-fade-reveal-b {
136
+ from {
137
+ --scroll-fade-b: var(--_scroll-fade-size-b, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
138
+ }
139
+ to {
140
+ --scroll-fade-b: 0px;
141
+ }
142
+ }
143
+ @keyframes scroll-fade-reveal-s {
144
+ from {
145
+ --scroll-fade-s: 0px;
146
+ }
147
+ to {
148
+ --scroll-fade-s: var(--_scroll-fade-size-s, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
149
+ }
150
+ }
151
+ @keyframes scroll-fade-reveal-e {
152
+ from {
153
+ --scroll-fade-e: var(--_scroll-fade-size-e, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
154
+ }
155
+ to {
156
+ --scroll-fade-e: 0px;
157
+ }
158
+ }
159
+ }
160
+
161
+ @utility scroll-fade {
162
+ --_scroll-fade-size-t: var(
163
+ --scroll-fade-t-size,
164
+ var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
165
+ );
166
+ --_scroll-fade-size-b: var(
167
+ --scroll-fade-b-size,
168
+ var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
169
+ );
170
+ --scroll-fade-block: linear-gradient(
171
+ to bottom,
172
+ transparent 0,
173
+ #000 var(--scroll-fade-t, 0px),
174
+ #000 calc(100% - var(--scroll-fade-b, 0px)),
175
+ transparent 100%
176
+ );
177
+ -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
178
+ mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
179
+ -webkit-mask-composite: source-in;
180
+ mask-composite: intersect;
181
+ -webkit-mask-repeat: no-repeat;
182
+ mask-repeat: no-repeat;
183
+
184
+ @supports (animation-timeline: scroll()) {
185
+ animation:
186
+ scroll-fade-reveal-t 1ms ease-in-out,
187
+ scroll-fade-reveal-b 1ms ease-in-out;
188
+ animation-timeline: scroll(self y), scroll(self y);
189
+ animation-range:
190
+ 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
191
+ calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
192
+ animation-fill-mode: both;
193
+ }
194
+
195
+ @supports not (animation-timeline: scroll()) {
196
+ --scroll-fade-t: var(--_scroll-fade-size-t);
197
+ --scroll-fade-b: var(--_scroll-fade-size-b);
198
+ }
199
+ }
200
+
201
+ @utility scroll-fade-y {
202
+ --_scroll-fade-size-t: var(
203
+ --scroll-fade-t-size,
204
+ var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
205
+ );
206
+ --_scroll-fade-size-b: var(
207
+ --scroll-fade-b-size,
208
+ var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
209
+ );
210
+ --scroll-fade-block: linear-gradient(
211
+ to bottom,
212
+ transparent 0,
213
+ #000 var(--scroll-fade-t, 0px),
214
+ #000 calc(100% - var(--scroll-fade-b, 0px)),
215
+ transparent 100%
216
+ );
217
+ -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
218
+ mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
219
+ -webkit-mask-composite: source-in;
220
+ mask-composite: intersect;
221
+ -webkit-mask-repeat: no-repeat;
222
+ mask-repeat: no-repeat;
223
+
224
+ @supports (animation-timeline: scroll()) {
225
+ animation:
226
+ scroll-fade-reveal-t 1ms ease-in-out,
227
+ scroll-fade-reveal-b 1ms ease-in-out;
228
+ animation-timeline: scroll(self y), scroll(self y);
229
+ animation-range:
230
+ 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
231
+ calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
232
+ animation-fill-mode: both;
233
+ }
234
+
235
+ @supports not (animation-timeline: scroll()) {
236
+ --scroll-fade-t: var(--_scroll-fade-size-t);
237
+ --scroll-fade-b: var(--_scroll-fade-size-b);
238
+ }
239
+ }
240
+
241
+ @utility scroll-fade-x {
242
+ --_scroll-fade-size-s: var(
243
+ --scroll-fade-s-size,
244
+ var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
245
+ );
246
+ --_scroll-fade-size-e: var(
247
+ --scroll-fade-e-size,
248
+ var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
249
+ );
250
+ --scroll-fade-inline: linear-gradient(
251
+ to right,
252
+ transparent 0,
253
+ #000 var(--scroll-fade-s, 0px),
254
+ #000 calc(100% - var(--scroll-fade-e, 0px)),
255
+ transparent 100%
256
+ );
257
+ &:where([dir="rtl"], [dir="rtl"] *) {
258
+ --scroll-fade-inline: linear-gradient(
259
+ to left,
260
+ transparent 0,
261
+ #000 var(--scroll-fade-s, 0px),
262
+ #000 calc(100% - var(--scroll-fade-e, 0px)),
263
+ transparent 100%
264
+ );
265
+ }
266
+ -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
267
+ mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
268
+ -webkit-mask-composite: source-in;
269
+ mask-composite: intersect;
270
+ -webkit-mask-repeat: no-repeat;
271
+ mask-repeat: no-repeat;
272
+
273
+ @supports (animation-timeline: scroll()) {
274
+ animation:
275
+ scroll-fade-reveal-s 1ms ease-in-out,
276
+ scroll-fade-reveal-e 1ms ease-in-out;
277
+ animation-timeline: scroll(self inline), scroll(self inline);
278
+ animation-range:
279
+ 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
280
+ calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
281
+ animation-fill-mode: both;
282
+ }
283
+
284
+ @supports not (animation-timeline: scroll()) {
285
+ --scroll-fade-s: var(--_scroll-fade-size-s);
286
+ --scroll-fade-e: var(--_scroll-fade-size-e);
287
+ }
288
+ }
289
+
290
+ @utility scroll-fade-t {
291
+ --_scroll-fade-size-t: var(
292
+ --scroll-fade-t-size,
293
+ var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
294
+ );
295
+ --scroll-fade-mask: linear-gradient(
296
+ to bottom,
297
+ transparent 0,
298
+ #000 var(--scroll-fade-t, 0px),
299
+ #000 100%
300
+ );
301
+ -webkit-mask-image: var(--scroll-fade-mask);
302
+ mask-image: var(--scroll-fade-mask);
303
+ -webkit-mask-composite: source-in;
304
+ mask-composite: intersect;
305
+ -webkit-mask-repeat: no-repeat;
306
+ mask-repeat: no-repeat;
307
+
308
+ @supports (animation-timeline: scroll()) {
309
+ animation: scroll-fade-reveal-t 1ms ease-in-out;
310
+ animation-timeline: scroll(self y);
311
+ animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24));
312
+ animation-fill-mode: both;
313
+ }
314
+
315
+ @supports not (animation-timeline: scroll()) {
316
+ --scroll-fade-t: var(--_scroll-fade-size-t);
317
+ }
318
+ }
319
+
320
+ @utility scroll-fade-b {
321
+ --_scroll-fade-size-b: var(
322
+ --scroll-fade-b-size,
323
+ var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
324
+ );
325
+ --scroll-fade-mask: linear-gradient(
326
+ to bottom,
327
+ #000 0,
328
+ #000 calc(100% - var(--scroll-fade-b, 0px)),
329
+ transparent 100%
330
+ );
331
+ -webkit-mask-image: var(--scroll-fade-mask);
332
+ mask-image: var(--scroll-fade-mask);
333
+ -webkit-mask-composite: source-in;
334
+ mask-composite: intersect;
335
+ -webkit-mask-repeat: no-repeat;
336
+ mask-repeat: no-repeat;
337
+
338
+ @supports (animation-timeline: scroll()) {
339
+ animation: scroll-fade-reveal-b 1ms ease-in-out;
340
+ animation-timeline: scroll(self y);
341
+ animation-range: calc(
342
+ 100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))
343
+ )
344
+ 100%;
345
+ animation-fill-mode: both;
346
+ }
347
+
348
+ @supports not (animation-timeline: scroll()) {
349
+ --scroll-fade-b: var(--_scroll-fade-size-b);
350
+ }
351
+ }
352
+
353
+ @utility scroll-fade-l {
354
+ --_scroll-fade-size-s: var(
355
+ --scroll-fade-s-size,
356
+ var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
357
+ );
358
+ --scroll-fade-mask: linear-gradient(
359
+ to right,
360
+ transparent 0,
361
+ #000 var(--scroll-fade-s, 0px),
362
+ #000 100%
363
+ );
364
+ -webkit-mask-image: var(--scroll-fade-mask);
365
+ mask-image: var(--scroll-fade-mask);
366
+ -webkit-mask-composite: source-in;
367
+ mask-composite: intersect;
368
+ -webkit-mask-repeat: no-repeat;
369
+ mask-repeat: no-repeat;
370
+
371
+ @supports (animation-timeline: scroll()) {
372
+ animation: scroll-fade-reveal-s 1ms ease-in-out;
373
+ animation-timeline: scroll(self x);
374
+ animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24));
375
+ animation-fill-mode: both;
376
+ }
377
+
378
+ @supports not (animation-timeline: scroll()) {
379
+ --scroll-fade-s: var(--_scroll-fade-size-s);
380
+ }
381
+ }
382
+
383
+ @utility scroll-fade-r {
384
+ --_scroll-fade-size-e: var(
385
+ --scroll-fade-e-size,
386
+ var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
387
+ );
388
+ --scroll-fade-mask: linear-gradient(
389
+ to right,
390
+ #000 0,
391
+ #000 calc(100% - var(--scroll-fade-e, 0px)),
392
+ transparent 100%
393
+ );
394
+ -webkit-mask-image: var(--scroll-fade-mask);
395
+ mask-image: var(--scroll-fade-mask);
396
+ -webkit-mask-composite: source-in;
397
+ mask-composite: intersect;
398
+ -webkit-mask-repeat: no-repeat;
399
+ mask-repeat: no-repeat;
400
+
401
+ @supports (animation-timeline: scroll()) {
402
+ animation: scroll-fade-reveal-e 1ms ease-in-out;
403
+ animation-timeline: scroll(self x);
404
+ animation-range: calc(
405
+ 100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))
406
+ )
407
+ 100%;
408
+ animation-fill-mode: both;
409
+ }
410
+
411
+ @supports not (animation-timeline: scroll()) {
412
+ --scroll-fade-e: var(--_scroll-fade-size-e);
413
+ }
414
+ }
415
+
416
+ @utility scroll-fade-s {
417
+ --_scroll-fade-size-s: var(
418
+ --scroll-fade-s-size,
419
+ var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
420
+ );
421
+ --scroll-fade-mask: linear-gradient(
422
+ to right,
423
+ transparent 0,
424
+ #000 var(--scroll-fade-s, 0px),
425
+ #000 100%
426
+ );
427
+ &:where([dir="rtl"], [dir="rtl"] *) {
428
+ --scroll-fade-mask: linear-gradient(
429
+ to left,
430
+ transparent 0,
431
+ #000 var(--scroll-fade-s, 0px),
432
+ #000 100%
433
+ );
434
+ }
435
+ -webkit-mask-image: var(--scroll-fade-mask);
436
+ mask-image: var(--scroll-fade-mask);
437
+ -webkit-mask-composite: source-in;
438
+ mask-composite: intersect;
439
+ -webkit-mask-repeat: no-repeat;
440
+ mask-repeat: no-repeat;
441
+
442
+ @supports (animation-timeline: scroll()) {
443
+ animation: scroll-fade-reveal-s 1ms ease-in-out;
444
+ animation-timeline: scroll(self inline);
445
+ animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24));
446
+ animation-fill-mode: both;
447
+ }
448
+
449
+ @supports not (animation-timeline: scroll()) {
450
+ --scroll-fade-s: var(--_scroll-fade-size-s);
451
+ }
452
+ }
453
+
454
+ @utility scroll-fade-e {
455
+ --_scroll-fade-size-e: var(
456
+ --scroll-fade-e-size,
457
+ var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
458
+ );
459
+ --scroll-fade-mask: linear-gradient(
460
+ to right,
461
+ #000 0,
462
+ #000 calc(100% - var(--scroll-fade-e, 0px)),
463
+ transparent 100%
464
+ );
465
+ &:where([dir="rtl"], [dir="rtl"] *) {
466
+ --scroll-fade-mask: linear-gradient(
467
+ to left,
468
+ #000 0,
469
+ #000 calc(100% - var(--scroll-fade-e, 0px)),
470
+ transparent 100%
471
+ );
472
+ }
473
+ -webkit-mask-image: var(--scroll-fade-mask);
474
+ mask-image: var(--scroll-fade-mask);
475
+ -webkit-mask-composite: source-in;
476
+ mask-composite: intersect;
477
+ -webkit-mask-repeat: no-repeat;
478
+ mask-repeat: no-repeat;
479
+
480
+ @supports (animation-timeline: scroll()) {
481
+ animation: scroll-fade-reveal-e 1ms ease-in-out;
482
+ animation-timeline: scroll(self inline);
483
+ animation-range: calc(
484
+ 100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))
485
+ )
486
+ 100%;
487
+ animation-fill-mode: both;
488
+ }
489
+
490
+ @supports not (animation-timeline: scroll()) {
491
+ --scroll-fade-e: var(--_scroll-fade-size-e);
492
+ }
493
+ }
494
+
495
+ @utility scroll-fade-* {
496
+ --scroll-fade-size: calc(var(--spacing) * --value(integer));
497
+ --scroll-fade-size: --value([length], [percentage]);
498
+ }
499
+
500
+ @utility scroll-fade-t-* {
501
+ --scroll-fade-t-size: calc(var(--spacing) * --value(integer));
502
+ --scroll-fade-t-size: --value([length], [percentage]);
503
+ }
504
+
505
+ @utility scroll-fade-b-* {
506
+ --scroll-fade-b-size: calc(var(--spacing) * --value(integer));
507
+ --scroll-fade-b-size: --value([length], [percentage]);
508
+ }
509
+
510
+ @utility scroll-fade-s-* {
511
+ --scroll-fade-s-size: calc(var(--spacing) * --value(integer));
512
+ --scroll-fade-s-size: --value([length], [percentage]);
513
+ }
514
+
515
+ @utility scroll-fade-e-* {
516
+ --scroll-fade-e-size: calc(var(--spacing) * --value(integer));
517
+ --scroll-fade-e-size: --value([length], [percentage]);
518
+ }
519
+
520
+ @utility scroll-fade-none {
521
+ --scroll-fade-mask: none;
522
+ }
523
+
524
+ /* shimmer */
525
+ @property --shimmer-angle {
526
+ syntax: "<angle>";
527
+ inherits: true;
528
+ initial-value: 20deg;
529
+ }
530
+ @property --shimmer-image {
531
+ syntax: "*";
532
+ inherits: false;
533
+ }
534
+ @property --shimmer-text-fill {
535
+ syntax: "*";
536
+ inherits: false;
537
+ }
538
+
539
+ @theme inline {
540
+ @keyframes tw-shimmer {
541
+ from {
542
+ background-position: 100% 0;
543
+ }
544
+ to {
545
+ background-position: 0 0;
546
+ }
547
+ }
548
+ }
549
+
550
+ @utility shimmer {
551
+ --_spread: var(--shimmer-spread, calc(3ch + 40px));
552
+ --_base: currentColor;
553
+ --_highlight: var(
554
+ --shimmer-color,
555
+ oklch(from currentColor l c h / calc(alpha* 0.2))
556
+ );
557
+
558
+ background-image: var(
559
+ --shimmer-image,
560
+ linear-gradient(
561
+ calc(90deg + var(--shimmer-angle)),
562
+ var(--_base) calc(50% - var(--_spread)),
563
+ color-mix(in oklch, var(--_highlight), var(--_base) 50%)
564
+ calc(50% - var(--_spread) * 0.5),
565
+ var(--_highlight) 50%,
566
+ color-mix(in oklch, var(--_highlight), var(--_base) 50%)
567
+ calc(50% + var(--_spread) * 0.5),
568
+ var(--_base) calc(50% + var(--_spread))
569
+ )
570
+ );
571
+ background-repeat: no-repeat;
572
+ background-size: calc(200% + var(--_spread) * 2) 100%;
573
+ background-position: 0 0;
574
+ background-clip: text;
575
+ -webkit-background-clip: text;
576
+ -webkit-text-fill-color: var(--shimmer-text-fill, transparent);
577
+ animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;
578
+
579
+ @variant dark {
580
+ --_highlight: var(
581
+ --shimmer-color,
582
+ oklch(from currentColor max(0.8, calc(l + 0.4)) c h / calc(alpha + 0.4))
583
+ );
584
+ }
585
+
586
+ &:where([dir="rtl"], [dir="rtl"] *) {
587
+ animation-direction: reverse;
588
+ }
589
+ }
590
+
591
+ @utility shimmer-once {
592
+ animation-iteration-count: 1;
593
+ }
594
+
595
+ @utility shimmer-reverse {
596
+ animation-direction: reverse;
597
+ }
598
+
599
+ @utility shimmer-none {
600
+ --shimmer-image: none;
601
+ --shimmer-text-fill: currentColor;
602
+ }
603
+
604
+ @utility shimmer-color-* {
605
+ --shimmer-color: --value(--color, [color]);
606
+ --shimmer-color: color-mix(
607
+ in oklch,
608
+ --value(--color, [color]) calc(--modifier(integer) * 1%),
609
+ transparent
610
+ );
611
+ }
612
+
613
+ @utility shimmer-duration-* {
614
+ --shimmer-duration: calc(--value(integer) * 1ms);
615
+ }
616
+
617
+ @utility shimmer-spread-* {
618
+ --shimmer-spread: calc(var(--spacing) * --value(integer));
619
+ --shimmer-spread: --value([length], [percentage]);
620
+ }
621
+
622
+ @utility shimmer-angle-* {
623
+ --shimmer-angle: calc(--value(integer) * 1deg);
624
+ }
625
+
626
+ @media (prefers-reduced-motion: reduce) {
627
+ .shimmer {
628
+ animation: none;
629
+ background-image: none;
630
+ -webkit-text-fill-color: currentColor;
631
+ }
632
+ }