fancy-ui-svelte 0.6.0 → 0.8.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 (43) hide show
  1. package/README.md +84 -71
  2. package/dist/fancy-ui/fluid-cursor/FluidCursor.svelte +1132 -1111
  3. package/dist/fancy-ui/fluid-cursor/FluidCursor.svelte.d.ts +3 -5
  4. package/dist/fancy-ui/fluid-cursor/FluidCursor.test.js +29 -0
  5. package/dist/fancy-ui/fluid-cursor/README.md +57 -6
  6. package/dist/fancy-ui/fluid-cursor/fluid-shared.d.ts +40 -0
  7. package/dist/fancy-ui/fluid-cursor/fluid-shared.js +125 -0
  8. package/dist/fancy-ui/fluid-cursor/fluid-shared.test.d.ts +1 -0
  9. package/dist/fancy-ui/fluid-cursor/fluid-shared.test.js +39 -0
  10. package/dist/fancy-ui/fluid-cursor/webgpu-engine.d.ts +29 -0
  11. package/dist/fancy-ui/fluid-cursor/webgpu-engine.js +847 -0
  12. package/dist/fancy-ui/frosted-glass/FrostedGlass.svelte +204 -0
  13. package/dist/fancy-ui/frosted-glass/FrostedGlass.svelte.d.ts +20 -0
  14. package/dist/fancy-ui/frosted-glass/FrostedGlass.test.d.ts +1 -0
  15. package/dist/fancy-ui/frosted-glass/FrostedGlass.test.js +48 -0
  16. package/dist/fancy-ui/frosted-glass/README.md +61 -0
  17. package/dist/fancy-ui/frosted-glass/index.d.ts +1 -0
  18. package/dist/fancy-ui/frosted-glass/index.js +1 -0
  19. package/dist/fancy-ui/index.d.ts +2 -0
  20. package/dist/fancy-ui/index.js +2 -0
  21. package/dist/fancy-ui/liquid-glass/LiquidGlass.svelte +19 -2
  22. package/dist/fancy-ui/liquid-glass/LiquidGlass.svelte.d.ts +4 -0
  23. package/dist/fancy-ui/liquid-glass/LiquidGlass.test.js +14 -0
  24. package/dist/fancy-ui/liquid-glass/README.md +7 -1
  25. package/dist/fancy-ui/liquid-text/LiquidText.svelte +1151 -0
  26. package/dist/fancy-ui/liquid-text/LiquidText.svelte.d.ts +37 -0
  27. package/dist/fancy-ui/liquid-text/LiquidText.test.d.ts +1 -0
  28. package/dist/fancy-ui/liquid-text/LiquidText.test.js +219 -0
  29. package/dist/fancy-ui/liquid-text/README.md +139 -0
  30. package/dist/fancy-ui/liquid-text/index.d.ts +2 -0
  31. package/dist/fancy-ui/liquid-text/index.js +1 -0
  32. package/dist/fancy-ui/registry.js +192 -0
  33. package/dist/fancy-ui/themes.d.ts +38 -0
  34. package/dist/fancy-ui/themes.js +356 -0
  35. package/dist/utils/animation.d.ts +109 -0
  36. package/dist/utils/animation.js +198 -0
  37. package/dist/utils/color.d.ts +128 -0
  38. package/dist/utils/color.js +314 -0
  39. package/dist/utils/geometry.d.ts +125 -0
  40. package/dist/utils/geometry.js +250 -0
  41. package/dist/utils/index.d.ts +8 -0
  42. package/dist/utils/index.js +39 -0
  43. package/package.json +13 -4
package/README.md CHANGED
@@ -31,88 +31,88 @@ Beautiful animation and UI components for **Svelte 5**.
31
31
 
32
32
  ### Buttons
33
33
 
34
- | Component | Description | Demo |
35
- |-----------|-------------|------|
36
- | RainbowButton | Animated rainbow gradient border effect | [Demo](https://fancy-ui.rama.app/demo/rainbow-button) |
37
- | RippleButton | Ripple click effect | [Demo](https://fancy-ui.rama.app/demo/ripple-button) |
38
- | ShimmerButton | Rotating conic-gradient shimmer border | [Demo](https://fancy-ui.rama.app/demo/shimmer-button) |
39
- | GradientButton | Rotating conic-gradient rainbow border | [Demo](https://fancy-ui.rama.app/demo/gradient-button) |
34
+ | Component | Description | Demo |
35
+ | ---------------------- | ---------------------------------------- | --------------------------------------------------------------- |
36
+ | RainbowButton | Animated rainbow gradient border effect | [Demo](https://fancy-ui.rama.app/demo/rainbow-button) |
37
+ | RippleButton | Ripple click effect | [Demo](https://fancy-ui.rama.app/demo/ripple-button) |
38
+ | ShimmerButton | Rotating conic-gradient shimmer border | [Demo](https://fancy-ui.rama.app/demo/shimmer-button) |
39
+ | GradientButton | Rotating conic-gradient rainbow border | [Demo](https://fancy-ui.rama.app/demo/gradient-button) |
40
40
  | InteractiveHoverButton | Hover effect revealing alternate content | [Demo](https://fancy-ui.rama.app/demo/interactive-hover-button) |
41
41
 
42
42
  ### Cards
43
43
 
44
- | Component | Description | Demo |
45
- |-----------|-------------|------|
46
- | Card3D | 3D tilt card with mouse tracking | [Demo](https://fancy-ui.rama.app/demo/card-3d) |
47
- | CardSpotlight | Spotlight effect following mouse | [Demo](https://fancy-ui.rama.app/demo/card-spotlight) |
44
+ | Component | Description | Demo |
45
+ | ------------------- | -------------------------------------------- | ------------------------------------------------------------ |
46
+ | Card3D | 3D tilt card with mouse tracking | [Demo](https://fancy-ui.rama.app/demo/card-3d) |
47
+ | CardSpotlight | Spotlight effect following mouse | [Demo](https://fancy-ui.rama.app/demo/card-spotlight) |
48
48
  | DirectionAwareHover | Overlay slides in from mouse entry direction | [Demo](https://fancy-ui.rama.app/demo/direction-aware-hover) |
49
- | FlipCard | Two-sided card with flip animation | [Demo](https://fancy-ui.rama.app/demo/flip-card) |
50
- | GlareCard | Glare reflection effect on hover | [Demo](https://fancy-ui.rama.app/demo/glare-card) |
51
- | TextRevealCard | Text reveal on hover | [Demo](https://fancy-ui.rama.app/demo/text-reveal-card) |
49
+ | FlipCard | Two-sided card with flip animation | [Demo](https://fancy-ui.rama.app/demo/flip-card) |
50
+ | GlareCard | Glare reflection effect on hover | [Demo](https://fancy-ui.rama.app/demo/glare-card) |
51
+ | TextRevealCard | Text reveal on hover | [Demo](https://fancy-ui.rama.app/demo/text-reveal-card) |
52
52
 
53
53
  ### Text & Typography
54
54
 
55
- | Component | Description | Demo |
56
- |-----------|-------------|------|
57
- | BlurReveal | Scroll-triggered blur-to-clear reveal | [Demo](https://fancy-ui.rama.app/demo/blur-reveal) |
58
- | BoxReveal | Sliding colored box reveal animation | [Demo](https://fancy-ui.rama.app/demo/box-reveal) |
59
- | ColourfulText | Per-character color animation | [Demo](https://fancy-ui.rama.app/demo/colourful-text) |
60
- | ContainerTextFlip | Text flipping inside a container | [Demo](https://fancy-ui.rama.app/demo/container-text-flip) |
61
- | FlipWords | Cycling word animation with per-letter effects | [Demo](https://fancy-ui.rama.app/demo/flip-words) |
62
- | HyperText | Character scramble on hover | [Demo](https://fancy-ui.rama.app/demo/hyper-text) |
63
- | LetterPullup | Staggered letter pull-up animation | [Demo](https://fancy-ui.rama.app/demo/letter-pullup) |
64
- | LineShadowText | Text with animated line shadow | [Demo](https://fancy-ui.rama.app/demo/line-shadow-text) |
65
- | NumberTicker | Animated number counter with easing | [Demo](https://fancy-ui.rama.app/demo/number-ticker) |
66
- | SparklesText | Animated SVG sparkle stars overlay | [Demo](https://fancy-ui.rama.app/demo/sparkles-text) |
67
- | TextGenerateEffect | Word-by-word text generation effect | [Demo](https://fancy-ui.rama.app/demo/text-generate-effect) |
55
+ | Component | Description | Demo |
56
+ | ------------------ | ---------------------------------------------- | ----------------------------------------------------------- |
57
+ | BlurReveal | Scroll-triggered blur-to-clear reveal | [Demo](https://fancy-ui.rama.app/demo/blur-reveal) |
58
+ | BoxReveal | Sliding colored box reveal animation | [Demo](https://fancy-ui.rama.app/demo/box-reveal) |
59
+ | ColourfulText | Per-character color animation | [Demo](https://fancy-ui.rama.app/demo/colourful-text) |
60
+ | ContainerTextFlip | Text flipping inside a container | [Demo](https://fancy-ui.rama.app/demo/container-text-flip) |
61
+ | FlipWords | Cycling word animation with per-letter effects | [Demo](https://fancy-ui.rama.app/demo/flip-words) |
62
+ | HyperText | Character scramble on hover | [Demo](https://fancy-ui.rama.app/demo/hyper-text) |
63
+ | LetterPullup | Staggered letter pull-up animation | [Demo](https://fancy-ui.rama.app/demo/letter-pullup) |
64
+ | LineShadowText | Text with animated line shadow | [Demo](https://fancy-ui.rama.app/demo/line-shadow-text) |
65
+ | NumberTicker | Animated number counter with easing | [Demo](https://fancy-ui.rama.app/demo/number-ticker) |
66
+ | SparklesText | Animated SVG sparkle stars overlay | [Demo](https://fancy-ui.rama.app/demo/sparkles-text) |
67
+ | TextGenerateEffect | Word-by-word text generation effect | [Demo](https://fancy-ui.rama.app/demo/text-generate-effect) |
68
68
 
69
69
  ### Backgrounds
70
70
 
71
- | Component | Description | Demo |
72
- |-----------|-------------|------|
73
- | FallingStarsBg | Canvas 3D starfield with motion trails | [Demo](https://fancy-ui.rama.app/demo/bg-falling-stars) |
74
- | FlickeringGrid | Canvas grid with flickering opacity | [Demo](https://fancy-ui.rama.app/demo/flickering-grid) |
75
- | InteractiveGridPattern | SVG grid with hover highlights | [Demo](https://fancy-ui.rama.app/demo/interactive-grid-pattern) |
76
- | StarsBackground | Starfield with parallax mouse tracking | [Demo](https://fancy-ui.rama.app/demo/bg-stars) |
71
+ | Component | Description | Demo |
72
+ | ---------------------- | -------------------------------------- | --------------------------------------------------------------- |
73
+ | FallingStarsBg | Canvas 3D starfield with motion trails | [Demo](https://fancy-ui.rama.app/demo/bg-falling-stars) |
74
+ | FlickeringGrid | Canvas grid with flickering opacity | [Demo](https://fancy-ui.rama.app/demo/flickering-grid) |
75
+ | InteractiveGridPattern | SVG grid with hover highlights | [Demo](https://fancy-ui.rama.app/demo/interactive-grid-pattern) |
76
+ | StarsBackground | Starfield with parallax mouse tracking | [Demo](https://fancy-ui.rama.app/demo/bg-stars) |
77
77
 
78
78
  ### Effects & Animations
79
79
 
80
- | Component | Description | Demo |
81
- |-----------|-------------|------|
82
- | AnimatedBeam | SVG beams connecting elements | [Demo](https://fancy-ui.rama.app/demo/animated-beam) |
83
- | BorderBeam | Beam effect traveling around borders | [Demo](https://fancy-ui.rama.app/demo/border-beam) |
84
- | Confetti | Configurable confetti burst | [Demo](https://fancy-ui.rama.app/demo/confetti) |
85
- | FluidCursor | WebGL fluid simulation following cursor | [Demo](https://fancy-ui.rama.app/demo/fluid-cursor) |
86
- | GlowBorder | Animated glowing border with gradients | [Demo](https://fancy-ui.rama.app/demo/glow-border) |
87
- | GlowingEffect | Glowing highlight on hover | [Demo](https://fancy-ui.rama.app/demo/glowing-effect) |
80
+ | Component | Description | Demo |
81
+ | ---------------- | ----------------------------------------- | --------------------------------------------------------- |
82
+ | AnimatedBeam | SVG beams connecting elements | [Demo](https://fancy-ui.rama.app/demo/animated-beam) |
83
+ | BorderBeam | Beam effect traveling around borders | [Demo](https://fancy-ui.rama.app/demo/border-beam) |
84
+ | Confetti | Configurable confetti burst | [Demo](https://fancy-ui.rama.app/demo/confetti) |
85
+ | FluidCursor | WebGL fluid simulation following cursor | [Demo](https://fancy-ui.rama.app/demo/fluid-cursor) |
86
+ | GlowBorder | Animated glowing border with gradients | [Demo](https://fancy-ui.rama.app/demo/glow-border) |
87
+ | GlowingEffect | Glowing highlight on hover | [Demo](https://fancy-ui.rama.app/demo/glowing-effect) |
88
88
  | ImageTrailCursor | Cursor-following image trail (8 variants) | [Demo](https://fancy-ui.rama.app/demo/image-trail-cursor) |
89
- | LiquidGlass | Liquid glass morphism effect | [Demo](https://fancy-ui.rama.app/demo/liquid-glass) |
90
- | Meteors | Animated meteor shower effect | [Demo](https://fancy-ui.rama.app/demo/meteors) |
91
- | NeonBorder | Dual-color neon glow border | [Demo](https://fancy-ui.rama.app/demo/neon-border) |
92
- | Ripple | Expanding ripple rings | [Demo](https://fancy-ui.rama.app/demo/ripple) |
93
- | SmoothCursor | Smooth lagging cursor follower | [Demo](https://fancy-ui.rama.app/demo/smooth-cursor) |
94
- | Sparkles | Particle sparkle canvas | [Demo](https://fancy-ui.rama.app/demo/sparkles) |
95
- | TracingBeam | Scroll-driven tracing beam | [Demo](https://fancy-ui.rama.app/demo/tracing-beam) |
89
+ | LiquidGlass | Liquid glass morphism effect | [Demo](https://fancy-ui.rama.app/demo/liquid-glass) |
90
+ | Meteors | Animated meteor shower effect | [Demo](https://fancy-ui.rama.app/demo/meteors) |
91
+ | NeonBorder | Dual-color neon glow border | [Demo](https://fancy-ui.rama.app/demo/neon-border) |
92
+ | Ripple | Expanding ripple rings | [Demo](https://fancy-ui.rama.app/demo/ripple) |
93
+ | SmoothCursor | Smooth lagging cursor follower | [Demo](https://fancy-ui.rama.app/demo/smooth-cursor) |
94
+ | Sparkles | Particle sparkle canvas | [Demo](https://fancy-ui.rama.app/demo/sparkles) |
95
+ | TracingBeam | Scroll-driven tracing beam | [Demo](https://fancy-ui.rama.app/demo/tracing-beam) |
96
96
 
97
97
  ### Layout
98
98
 
99
- | Component | Description | Demo |
100
- |-----------|-------------|------|
101
- | BentoGrid | Bento-style responsive grid layout | [Demo](https://fancy-ui.rama.app/demo/bento-grid) |
102
- | Book | 3D book flip animation | [Demo](https://fancy-ui.rama.app/demo/book) |
103
- | ContainerScroll | 3D scroll perspective container | [Demo](https://fancy-ui.rama.app/demo/container-scroll) |
104
- | Focus | Focus-expand card layout | [Demo](https://fancy-ui.rama.app/demo/focus) |
105
- | Marquee | Infinite scrolling for text, images, or cards | [Demo](https://fancy-ui.rama.app/demo/marquee) |
99
+ | Component | Description | Demo |
100
+ | --------------- | --------------------------------------------- | ------------------------------------------------------- |
101
+ | BentoGrid | Bento-style responsive grid layout | [Demo](https://fancy-ui.rama.app/demo/bento-grid) |
102
+ | Book | 3D book flip animation | [Demo](https://fancy-ui.rama.app/demo/book) |
103
+ | ContainerScroll | 3D scroll perspective container | [Demo](https://fancy-ui.rama.app/demo/container-scroll) |
104
+ | Focus | Focus-expand card layout | [Demo](https://fancy-ui.rama.app/demo/focus) |
105
+ | Marquee | Infinite scrolling for text, images, or cards | [Demo](https://fancy-ui.rama.app/demo/marquee) |
106
106
 
107
107
  ### Navigation & Display
108
108
 
109
- | Component | Description | Demo |
110
- |-----------|-------------|------|
111
- | AnimatedTooltip | Avatar row with mouse-following tooltips | [Demo](https://fancy-ui.rama.app/demo/animated-tooltip) |
112
- | Compare | Before/after image comparison slider | [Demo](https://fancy-ui.rama.app/demo/compare) |
113
- | Dock | macOS-style dock with icon magnification | [Demo](https://fancy-ui.rama.app/demo/dock) |
114
- | LogoCloud | Marquee, grid, and icon logo layouts | [Demo](https://fancy-ui.rama.app/demo/logo-cloud) |
115
- | Timeline | Vertical timeline with scroll-driven progress | [Demo](https://fancy-ui.rama.app/demo/timeline) |
109
+ | Component | Description | Demo |
110
+ | --------------- | --------------------------------------------- | ------------------------------------------------------- |
111
+ | AnimatedTooltip | Avatar row with mouse-following tooltips | [Demo](https://fancy-ui.rama.app/demo/animated-tooltip) |
112
+ | Compare | Before/after image comparison slider | [Demo](https://fancy-ui.rama.app/demo/compare) |
113
+ | Dock | macOS-style dock with icon magnification | [Demo](https://fancy-ui.rama.app/demo/dock) |
114
+ | LogoCloud | Marquee, grid, and icon logo layouts | [Demo](https://fancy-ui.rama.app/demo/logo-cloud) |
115
+ | Timeline | Vertical timeline with scroll-driven progress | [Demo](https://fancy-ui.rama.app/demo/timeline) |
116
116
 
117
117
  ## Quick Start
118
118
 
@@ -125,7 +125,7 @@ npm install fancy-ui-svelte
125
125
  Then import any component:
126
126
 
127
127
  ```ts
128
- import { Marquee, BorderBeam, Confetti } from 'fancy-ui-svelte';
128
+ import { Marquee, BorderBeam, Confetti } from "fancy-ui-svelte";
129
129
  ```
130
130
 
131
131
  Add the Tailwind integration to your app's CSS (e.g. `src/app.css`):
@@ -146,9 +146,11 @@ This single import tells Tailwind v4 to scan the library's components so all uti
146
146
  ```
147
147
 
148
148
  The path is relative to your CSS file location.
149
+
149
150
  </details>
150
151
 
151
152
  **Or browse and copy a component:**
153
+
152
154
  1. Find the component you need in the [live demo](https://fancy-ui.rama.app)
153
155
  2. Copy the source from `src/lib/fancy-ui/[component-name]/`
154
156
  3. Paste into your project
@@ -189,8 +191,11 @@ pnpm check # Run Svelte type checker
189
191
  pnpm test # Run tests
190
192
  pnpm test:watch # Run tests in watch mode
191
193
  pnpm build # Production build
194
+ pnpm storybook # Component workshop on :6006
192
195
  ```
193
196
 
197
+ Component stories live in `src/stories/` — see the [Storybook section in CONTRIBUTING.md](./CONTRIBUTING.md#storybook).
198
+
194
199
  ## Project Structure
195
200
 
196
201
  ```
@@ -226,15 +231,15 @@ Contributions are welcome! 56 components and counting — PRs for new components
226
231
 
227
232
  ## Tech Stack
228
233
 
229
- | Technology | Version | Purpose |
230
- |------------|---------|---------|
231
- | [Svelte](https://svelte.dev) | 5 | UI framework |
232
- | [SvelteKit](https://svelte.dev/docs/kit) | 2 | App framework |
233
- | [Tailwind CSS](https://tailwindcss.com) | 4 | Styling |
234
- | [TypeScript](https://www.typescriptlang.org) | 5 | Type safety |
235
- | [Vitest](https://vitest.dev) | 4 | Testing |
236
- | [bits-ui](https://bits-ui.com) | 2 | Headless primitives |
237
- | [GSAP](https://gsap.com) | 3 | Advanced animations |
234
+ | Technology | Version | Purpose |
235
+ | -------------------------------------------- | ------- | ------------------- |
236
+ | [Svelte](https://svelte.dev) | 5 | UI framework |
237
+ | [SvelteKit](https://svelte.dev/docs/kit) | 2 | App framework |
238
+ | [Tailwind CSS](https://tailwindcss.com) | 4 | Styling |
239
+ | [TypeScript](https://www.typescriptlang.org) | 5 | Type safety |
240
+ | [Vitest](https://vitest.dev) | 4 | Testing |
241
+ | [bits-ui](https://bits-ui.com) | 2 | Headless primitives |
242
+ | [GSAP](https://gsap.com) | 3 | Advanced animations |
238
243
 
239
244
  ## Credits
240
245
 
@@ -243,3 +248,11 @@ Inspired by [Inspira UI](https://inspira-ui.com), [Aceternity UI](https://ui.ace
243
248
  ## License
244
249
 
245
250
  MIT
251
+
252
+ ---
253
+
254
+ <p align="center">
255
+ <a href="https://www.anthropic.com/claude-code">
256
+ <img src=".github/claude-code-open-source-program.svg" alt="Claude Code Open Source Program" width="420" />
257
+ </a>
258
+ </p>