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
• 56 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-svelte

Then import any component:

import { Marquee, BorderBeam, Confetti } from 'fancy-ui-svelte';

Add the Tailwind integration to your app's CSS (e.g. src/app.css):

@import "tailwindcss";
@import "fancy-ui-svelte/tailwind.css";

This single import tells Tailwind v4 to scan the library's components so all utility classes are generated automatically. No manual @source path needed.

@import "tailwindcss";
@source "../node_modules/fancy-ui-svelte/dist";

The path is relative to your CSS file location.

Or browse and copy a component:

1. Find the component you need in the live demo
2. Copy the source from src/lib/fancy-ui/[component-name]/
3. 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

Using with AI agents (Claude Code, Cursor, Copilot)

The docs site serves LLM-friendly documentation following the llms.txt convention:

• fancy-ui.rama.app/llms.txt — setup guide, usage rules, and component index
• fancy-ui.rama.app/llms-full.txt — full reference with every component's props

To make your coding agent use fancy-ui correctly, add this to your project's CLAUDE.md, AGENTS.md, or .cursorrules:

## UI components

Use fancy-ui-svelte (Svelte 5 + Tailwind CSS v4) for animated UI components.
Full component and props reference: https://fancy-ui.rama.app/llms-full.txt
Key rules: overlay/effect components (BorderBeam, GlowBorder, backgrounds, ...)
need a parent with `relative overflow-hidden`; cursor effects (FluidCursor,
SmoothCursor) mount once in the root +layout.svelte; Svelte 5 syntax only.

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! 56 components and counting — PRs for new components, bug fixes, and improvements are appreciated.

Adding a new component

1. Create the component folder under src/lib/fancy-ui/
2. Implement the component in idiomatic Svelte 5
3. Add a demo page at src/routes/demo/[slug]/+page.svelte
4. Register it in src/lib/fancy-ui/registry.ts
5. 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