Engine Registryv1.0.0 • Strict TypeScript

TransitionRegistry

The global registry system for discovering, listing, inspecting, and dynamically registering custom Framer Motion transitions.

TypeScript Types CLI Commands 69+ Transitions Interactive Studio

ES Module Import

import { defaultRegistry, registerTransition, resolveTransition, getTransition } from '@/components/glidecn';

Listing & Resolving

The TransitionRegistry is a singleton map storing all transition definitions.

Query registered transition names, list full definitions, or check availability at runtime.

TransitionRegistry API Methods

registerTransition(name, definition)

(name: string, def: TransitionDefinition) => void

Registers a custom transition into the global runtime registry under the specified key name.

resolveTransition(name)

(name: string) => TransitionDefinition

Resolves a transition definition by name. Throws an informative error listing available transitions if not found.

getTransition(name)

(name: string) => TransitionDefinition | undefined

Retrieves a registered transition definition by name, or returns undefined if missing.

defaultRegistry.register(name, def)

(name: string, def: TransitionDefinition) => void

Instance method to register or overwrite a transition definition in the default singleton registry.

defaultRegistry.list()

() => string[]

Returns an array of all registered transition machine names (e.g. ["fade", "slide", "cube", ...]).

defaultRegistry.listDefinitions()

() => TransitionDefinition[]

Returns an array of all registered TransitionDefinition objects with metadata and variant builders.

defaultRegistry.get(name)

(name: string) => TransitionDefinition | undefined

Returns the exact registered transition definition or undefined.

defaultRegistry.has(name)

(name: string) => boolean

Checks whether a transition is currently registered in the active registry.

Authoring Custom Transitions

Create custom transition definitions in your project and register them into the global engine using registerTransition(name, definition).

Each transition receives the resolved TransitionConfig (duration, ease, direction, delay, custom) and returns Framer Motion initial, animate, and exit variants.

components/glidecn/transitions/card-flip.tsx

import { registerTransition, type TransitionDefinition } from '@/components/glidecn';

export const cardFlip: TransitionDefinition = {
  metadata: {
    name: 'card-flip',
    displayName: 'Card Flip 3D',
    description: 'Flips the incoming view along the vertical axis with 3D depth perspective.',
    category: 'spatial',
    props: [],
  },
  defaultConfig: {
    duration: 0.7,
    ease: 'easeInOut',
    direction: 'left',
  },
  getVariants: (config) => {
    const isLeft = config.direction === 'left';
    return {
      initial: {
        opacity: 0,
        rotateY: isLeft ? 90 : -90,
        transformPerspective: 1000,
      },
      animate: {
        opacity: 1,
        rotateY: 0,
        transformPerspective: 1000,
      },
      exit: {
        opacity: 0,
        rotateY: isLeft ? -90 : 90,
        transformPerspective: 1000,
      },
    };
  },
};

// Register into global runtime
registerTransition('card-flip', cardFlip);

import { registerTransition, type TransitionDefinition } from '@/components/glidecn';export const cardFlip: TransitionDefinition = {  metadata: {    name: 'card-flip',    displayName: 'Card Flip 3D',    description: 'Flips the incoming view along the vertical axis with 3D depth perspective.',    category: 'spatial',    props: [],  },  defaultConfig: {    duration: 0.7,    ease: 'easeInOut',    direction: 'left',  },  getVariants: (config) => {    const isLeft = config.direction === 'left';    return {      initial: {        opacity: 0,        rotateY: isLeft ? 90 : -90,        transformPerspective: 1000,      },      animate: {        opacity: 1,        rotateY: 0,        transformPerspective: 1000,      },      exit: {        opacity: 0,        rotateY: isLeft ? -90 : 90,        transformPerspective: 1000,      },    };  },};// Register into global runtimeregisterTransition('card-flip', cardFlip);

← useAnimationState()Animation Engine →