Skip to main content
Sync UI offers a variety of background animation styles to enhance your user interface and provide visually appealing backgrounds for your components.

Variants

Gemini Wave

A gradient background with animated wave-like patterns.

Gradient Mesh

A dynamic gradient background with multiple color focal points.

Moving Shapes

Animated geometric shapes moving across a gradient background.

Flickering Grid

A grid of squares with random flickering effects.

Interactive Grid

A grid of squares that respond to hover interactions.

Grid

A simple grid background pattern.

Magnetic Connections

Interactive dots that connect to the mouse cursor with magnetic effects.

Dots

A simple dotted background pattern.

Features

  • Smooth animations using Framer Motion
  • Theme-aware (adapts to dark/light mode)
  • Interactive patterns
  • Performance optimized
  • Responsive design

Customization

Each background can be customized by modifying:
  • Colors and gradients
  • Animation speed and timing
  • Grid spacing and sizes
  • Opacity and blur effects
  • Interactive behavior

Build docs developers (and LLMs) love