edbnedbn/ui
Get Started
WelcomeChoosing a VariantChangelogLicense
Components
OverviewButtonAlert DialogPopoverDropdown MenuPull Down MenuSheetWheel Picker
Motion Utilities
Motion ProviderSpring Presets
Hooks
0installs
ComponentsBlocksMaps
GitHub stars
HomeDocsUtilitiesMotion

On this page

Motion Utilities

Spring presets, transition configurations, and animation variant factories. The foundation for all edbn/ui motion.

Spring Presets

Pre-configured spring physics for consistent animations across your app.

TypeScript
import { springPresets } from "@/lib/motion"

// Use with Motion components
<motion.div
  animate={{ scale: 1 }}
  transition={springPresets.snappy}
>
  Snappy animation
</motion.div>

// Available presets
springPresets.snappy      // Quick, responsive (buttons, toggles)
springPresets.bouncy      // Playful with overshoot (notifications)
springPresets.smooth      // Smooth, no bounce (modals, sheets)
springPresets.gentle      // Subtle, barely perceptible (fades)
springPresets.interactive // For user interactions (drag)
springPresets.morphing    // For layoutId transitions (zero bounce)

Transitions

Common transition configurations for consistent timing.

TypeScript
import { transitions } from "@/lib/motion"

// Fade transition (opacity changes)
<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={transitions.fade}
/>

// Scale transition (grow/shrink)
<motion.div
  initial={{ scale: 0.95 }}
  animate={{ scale: 1 }}
  transition={transitions.scale}
/>

// Slide transition (position changes)
<motion.div
  initial={{ y: 20 }}
  animate={{ y: 0 }}
  transition={transitions.slide}
/>

// Available transitions:
transitions.fade     // duration: 0.15, ease: "easeOut"
transitions.scale    // springPresets.snappy
transitions.slide    // springPresets.smooth
transitions.stagger  // For staggered children
28 lines

Stagger Variants

Factory functions for creating staggered animations.

TypeScript
import { createStaggerVariants } from "@/lib/motion"

// Create container variants
const containerVariants = createStaggerVariants({
  staggerChildren: 0.05,  // 50ms between each child
  delayChildren: 0.1,     // 100ms before first child
})

// Use with AnimatePresence
<motion.ul
  variants={containerVariants}
  initial="initial"
  animate="animate"
  exit="exit"
>
  {items.map(item => (
    <motion.li key={item.id} variants={itemVariants}>
      {item.label}
    </motion.li>
  ))}
</motion.ul>
21 lines

Slide Variants

Create directional slide animations for sheets and modals.

TypeScript
import { createSlideVariants } from "@/lib/motion"

// Slide from right (default for sheets)
const rightSlide = createSlideVariants("right")
// initial: { x: "100%" }
// animate: { x: 0 }
// exit: { x: "100%" }

// Slide from bottom
const bottomSlide = createSlideVariants("bottom")
// initial: { y: "100%" }
// animate: { y: 0 }
// exit: { y: "100%" }

// All directions
createSlideVariants("top")
createSlideVariants("right")
createSlideVariants("bottom")
createSlideVariants("left")

// Usage
<motion.div
  variants={bottomSlide}
  initial="initial"
  animate="animate"
  exit="exit"
>
  Sheet content
</motion.div>
29 lines

Drag Config

Configuration for drag-to-dismiss gestures.

TypeScript
import { dragConfig } from "@/lib/motion"

// Sheet drag configuration
const { 
  dismissThreshold,    // 100 - pixels to trigger dismiss
  velocityThreshold,   // 500 - px/s to trigger dismiss
} = dragConfig.sheet

// Dialog drag configuration  
const { 
  dismissThreshold,    // 80
  velocityThreshold,   // 300
} = dragConfig.dialog

// Custom drag handling
function handleDragEnd(event, info) {
  const { velocity, offset } = info
  
  if (
    offset.y > dragConfig.sheet.dismissThreshold ||
    velocity.y > dragConfig.sheet.velocityThreshold
  ) {
    onClose()
  }
}
25 lines

CSS Keyframes

CSS keyframes defined in globals.css for non-Motion animations.

TypeScript
/* globals.css - CSS keyframes */

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes blur-in {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(var(--blur-lg));
  }
}

@keyframes spring-in {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(10px);
  }
  60% {
    transform: scale(1.02);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Usage */
.my-element {
  animation: scale-in 0.3s ease-out;
}
42 lines

Blur Scale

Consistent blur values for glassmorphism effects.

Variable--blur-sm
Value4px
Use CaseSubtle backgrounds
Variable--blur-md
Value8px
Use CaseCards, tooltips
Variable--blur-lg
Value16px
Use CasePopovers, dropdowns
Variable--blur-xl
Value24px
Use CaseModals, dialogs
Variable--blur-2xl
Value40px
Use CaseFull-screen overlays
Variable--blur-3xl
Value64px
Use CaseHero sections
VariableValueUse Case
--blur-sm4pxSubtle backgrounds
--blur-md8pxCards, tooltips
--blur-lg16pxPopovers, dropdowns
--blur-xl24pxModals, dialogs
--blur-2xl40pxFull-screen overlays
--blur-3xl64pxHero sections

Performance

backdrop-filter: blur() can be expensive on mobile devices. Use the useLowPowerDevice hook to reduce blur on low-power devices.