fancy-ui
Beautiful animation and UI components for Svelte 5.
Features
- Svelte 5 Runes — Built with
$state,$derived,$effect, and$props - Tailwind CSS 4 — Utility-first styling with theme tokens
- TypeScript — Fully typed props and events
- 52 Components — Buttons, text animations, backgrounds, effects, and more
- Dark Mode — All components support light and dark themes
- Tested — Component tests with Vitest and Testing Library
Components
Buttons
| Component | Description | Demo |
|---|---|---|
| RainbowButton | Animated rainbow gradient border effect | Demo |
| RippleButton | Ripple click effect | Demo |
| ShimmerButton | Rotating conic-gradient shimmer border | Demo |
| GradientButton | Rotating conic-gradient rainbow border | Demo |
| InteractiveHoverButton | Hover effect revealing alternate content | Demo |
Cards
| Component | Description | Demo |
|---|---|---|
| Card3D | 3D tilt card with mouse tracking | Demo |
| CardSpotlight | Spotlight effect following mouse | Demo |
| DirectionAwareHover | Overlay slides in from mouse entry direction | Demo |
| FlipCard | Two-sided card with flip animation | Demo |
| GlareCard | Glare reflection effect on hover | Demo |
| TextRevealCard | Text reveal on hover | Demo |
Text & Typography
| Component | Description | Demo |
|---|---|---|
| BlurReveal | Scroll-triggered blur-to-clear reveal | Demo |
| BoxReveal | Sliding colored box reveal animation | Demo |
| ColourfulText | Per-character color animation | Demo |
| ContainerTextFlip | Text flipping inside a container | Demo |
| FlipWords | Cycling word animation with per-letter effects | Demo |
| HyperText | Character scramble on hover | Demo |
| LetterPullup | Staggered letter pull-up animation | Demo |
| LineShadowText | Text with animated line shadow | Demo |
| NumberTicker | Animated number counter with easing | Demo |
| SparklesText | Animated SVG sparkle stars overlay | Demo |
| TextGenerateEffect | Word-by-word text generation effect | Demo |
Backgrounds
| Component | Description | Demo |
|---|---|---|
| FallingStarsBg | Canvas 3D starfield with motion trails | Demo |
| FlickeringGrid | Canvas grid with flickering opacity | Demo |
| InteractiveGridPattern | SVG grid with hover highlights | Demo |
| StarsBackground | Starfield with parallax mouse tracking | Demo |
Effects & Animations
| Component | Description | Demo |
|---|---|---|
| AnimatedBeam | SVG beams connecting elements | Demo |
| BorderBeam | Beam effect traveling around borders | Demo |
| Confetti | Configurable confetti burst | Demo |
| FluidCursor | WebGL fluid simulation following cursor | Demo |
| GlowBorder | Animated glowing border with gradients | Demo |
| GlowingEffect | Glowing highlight on hover | Demo |
| ImageTrailCursor | Cursor-following image trail (8 variants) | Demo |
| LiquidGlass | Liquid glass morphism effect | Demo |
| Meteors | Animated meteor shower effect | Demo |
| NeonBorder | Dual-color neon glow border | Demo |
| Ripple | Expanding ripple rings | Demo |
| SmoothCursor | Smooth lagging cursor follower | Demo |
| Sparkles | Particle sparkle canvas | Demo |
| TracingBeam | Scroll-driven tracing beam | Demo |
Layout
| Component | Description | Demo |
|---|---|---|
| BentoGrid | Bento-style responsive grid layout | Demo |
| Book | 3D book flip animation | Demo |
| ContainerScroll | 3D scroll perspective container | Demo |
| Focus | Focus-expand card layout | Demo |
| Marquee | Infinite scrolling for text, images, or cards | Demo |
Navigation & Display
| Component | Description | Demo |
|---|---|---|
| AnimatedTooltip | Avatar row with mouse-following tooltips | Demo |
| Compare | Before/after image comparison slider | Demo |
| Dock | macOS-style dock with icon magnification | Demo |
| LogoCloud | Marquee, grid, and icon logo layouts | Demo |
| Timeline | Vertical timeline with scroll-driven progress | Demo |
Quick Start
Install via npm:
npm install fancy-ui
Then import any component:
import { Marquee, BorderBeam, Confetti } from 'fancy-ui';
To include Tailwind classes, add this to your app's CSS:
@import "fancy-ui/tailwind.css";
Or browse and copy a component:
- Find the component you need in the live demo
- Copy the source from
src/lib/fancy-ui/[component-name]/ - Paste into your project
Or clone the full demo locally:
git clone https://github.com/RamaHerbin/fancy-ui.git
cd fancy-ui
pnpm install
pnpm dev
Development
pnpm dev # Start dev server
pnpm check # Run Svelte type checker
pnpm test # Run tests
pnpm test:watch # Run tests in watch mode
pnpm build # Production build
Project Structure
src/
├── lib/
│ ├── fancy-ui/ # UI components (one folder per component)
│ │ ├── rainbow-button/
│ │ │ ├── RainbowButton.svelte
│ │ │ ├── RainbowButton.test.ts
│ │ │ ├── index.ts
│ │ │ └── README.md
│ │ ├── registry.ts # Component registry & metadata
│ │ └── index.ts # Barrel exports
│ └── components/ui/ # shadcn-svelte primitives
├── routes/
│ ├── +page.svelte # Home page
│ └── demo/ # Component demo pages
│ └── [component]/+page.svelte
└── tests/
Contributing
Contributions are welcome! 52 components and counting — PRs for new components, bug fixes, and improvements are appreciated.
Adding a new component
- Create the component folder under
src/lib/fancy-ui/ - Implement the component in idiomatic Svelte 5
- Add a demo page at
src/routes/demo/[slug]/+page.svelte - Register it in
src/lib/fancy-ui/registry.ts - Export it from
src/lib/fancy-ui/index.ts
Tech Stack
| Technology | Version | Purpose |
|---|---|---|
| Svelte | 5 | UI framework |
| SvelteKit | 2 | App framework |
| Tailwind CSS | 4 | Styling |
| TypeScript | 5 | Type safety |
| Vitest | 4 | Testing |
| bits-ui | 2 | Headless primitives |
| GSAP | 3 | Advanced animations |
Credits
Inspired by Inspira UI, Aceternity UI and Magic UI.
License
MIT
