Documentation

Animations

Designers provides pre-built animation components and utilities to help you add motion and transitions to your UI with ease. All animations are theme-aware and accessible by default.

Fade Animation

Use Fade to animate the appearance and disappearance of elements:

import { Fade } from 'designers/animations'

export function DemoFade({ show, children }) {
  return (
    <Fade in={show} duration={300}>
      {children}
    </Fade>
  )
}

Slide Animation

Use Slide for sliding transitions in any direction:

import { Slide } from 'designers/animations'

export function DemoSlide({ open, children }) {
  return (
    <Slide in={open} direction="up" duration={400}>
      {children}
    </Slide>
  )
}

Custom Animations

You can also use framer-motion directly for custom animations:

import { motion } from 'framer-motion'

export function CustomAnimation({ children }) {
  return (
    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }}>
      {children}
    </motion.div>
  )
}

Tip: All animation components support custom durations, delays, and can be composed for complex effects.