Motion

Motion tokens provide baseline durations and easing curves, while spring physics presets add configurable tension, friction, and mass with deterministic settle durations.

Spring Physics

Phase 7.1 introduces configurable spring dynamics. Use preset names or pass customtension,friction, andmass values.

Gesture Primitives

Use pointer-based primitives for drag, swipe, and pinch without adding runtime dependencies.

import { createSwipeGesture } from "@glinui/motion"

const swipe = createSwipeGesture({
  axis: "x",
  onSwipe: ({ swipe }) => {
    if (!swipe) return
    console.log(swipe.direction, swipe.velocity)
  }
})

element.onpointerdown = swipe.onPointerDown
element.onpointermove = swipe.onPointerMove
element.onpointerup = swipe.onPointerUp
element.onpointercancel = swipe.onPointerCancel

Scroll-linked Effects

Tie blur, opacity, and transform values to scroll progress with one resolver.

import { createScrollLinkedEffect } from "@glinui/motion"

const heroEffect = createScrollLinkedEffect({
  start: 0,
  end: 600,
  opacity: [0.6, 1],
  blur: [12, 0],
  translateY: [32, 0]
})

const style = heroEffect.style(window.scrollY)

View Transitions

Presets provide page and component enter/exit choreography with consistent opacity and transform transitions.

import { resolveViewTransition } from "@glinui/motion"

const transition = resolveViewTransition("pageSlide")

// Initial render style
const initialStyle = transition.initial
// Apply on mount
const enterStyle = transition.enter
// Apply before unmount
const exitStyle = transition.exit

Stagger System

Orchestrate list and grid choreography with deterministic stagger delays.

import { createStaggerSequence } from "@glinui/motion"

const stagger = createStaggerSequence({
  count: items.length,
  direction: "center-out",
  stepMs: 48,
  initialDelayMs: 40
})

const style = stagger.getStyle(index) // { transitionDelay: "..." }

Reduced Motion

Every motion primitive supports reduced-motion fallbacks through explicit options.

Motion Playground

Tune spring parameters and inspect derived damping, frequency, settle duration, and easing output.

Framer Motion Adapter

Optional adapters let you reuse Glin motion tokens with Framer Motion variants and spring transitions.

// Optional peer
pnpm add framer-motion

import { motion } from "framer-motion"
import { toFramerSpring, toFramerVariants } from "@glinui/motion"

const variants = toFramerVariants("glassLift")
const spring = toFramerSpring("snappy")

export function Card() {
  return (
    <motion.div
      initial="initial"
      animate="animate"
      exit="exit"
      variants={variants}
      transition={spring}
    />
  )
}