Type Glossariesv1.0.0 • Strict TypeScript

TypeScript Types

Comprehensive TypeScript definitions, interface schemas, and prop types for GlideCN. All types are strictly validated and exported directly from the barrel.

TypeScript Types CLI Commands 69+ Transitions Interactive Studio

ES Module Import

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

Configuration Types

Interfaces controlling timing, easing curves, directional flow, and animation states.

TransitionConfig

export interface TransitionConfig {
  /** Duration in seconds (default: 0.4) */
  duration?: number;

  /** Delay before animation starts, in seconds */
  delay?: number;

  /** Easing preset or custom cubic-bezier tuple */
  ease?: EasingPreset;

  /** Direction for directional transitions */
  direction?: TransitionDirection;

  /** Stagger children delay in seconds */
  stagger?: number;

  /** Arbitrary custom parameters passed to transitions */
  custom?: Record<string, unknown>;
}

export interface TransitionConfig {  /** Duration in seconds (default: 0.4) */  duration?: number;  /** Delay before animation starts, in seconds */  delay?: number;  /** Easing preset or custom cubic-bezier tuple */  ease?: EasingPreset;  /** Direction for directional transitions */  direction?: TransitionDirection;  /** Stagger children delay in seconds */  stagger?: number;  /** Arbitrary custom parameters passed to transitions */  custom?: Record<string, unknown>;}

Enums & Unions

export type TransitionDirection = 'left' | 'right' | 'up' | 'down';

export type AnimationState = 'idle' | 'entering' | 'exiting' | 'complete';

export type EasingPreset =
  | 'linear'
  | 'easeIn'
  | 'easeOut'
  | 'easeInOut'
  | 'spring'
  | [number, number, number, number]
  | string;

export type TransitionCategory =
  | 'flow'
  | 'portal'
  | 'paper'
  | 'mask'
  | 'spatial'
  | 'dynamic'
  | 'experimental'
  | 'retro';

export type TransitionDirection = 'left' | 'right' | 'up' | 'down';export type AnimationState = 'idle' | 'entering' | 'exiting' | 'complete';export type EasingPreset =  | 'linear'  | 'easeIn'  | 'easeOut'  | 'easeInOut'  | 'spring'  | [number, number, number, number]  | string;export type TransitionCategory =  | 'flow'  | 'portal'  | 'paper'  | 'mask'  | 'spatial'  | 'dynamic'  | 'experimental'  | 'retro';

Definition Schemas

Types required to build custom transitions and register them with TransitionRegistry.

TransitionDefinition

export interface TransitionDefinition {
  /** Metadata for docs and UI listings */
  metadata: TransitionMetadata;

  /** Default configuration values */
  defaultConfig: TransitionConfig;

  /** Resolves Framer Motion variants for this transition */
  getVariants: (config: Required<TransitionConfig>) => TransitionVariants;

  /** Optional Framer Motion transition timing override */
  getTransition?: (config: Required<TransitionConfig>) => import('framer-motion').Transition;
}

export interface TransitionDefinition {  /** Metadata for docs and UI listings */  metadata: TransitionMetadata;  /** Default configuration values */  defaultConfig: TransitionConfig;  /** Resolves Framer Motion variants for this transition */  getVariants: (config: Required<TransitionConfig>) => TransitionVariants;  /** Optional Framer Motion transition timing override */  getTransition?: (config: Required<TransitionConfig>) => import('framer-motion').Transition;}

TransitionMetadata & Variants

export interface TransitionMetadata {
  name: string;
  displayName: string;
  description: string;
  category: TransitionCategory;
  props: TransitionPropSchema[];
}

export interface TransitionVariants {
  initial: import('framer-motion').Variant;
  animate: import('framer-motion').Variant;
  exit: import('framer-motion').Variant;
}

export interface TransitionMetadata {  name: string;  displayName: string;  description: string;  category: TransitionCategory;  props: TransitionPropSchema[];}export interface TransitionVariants {  initial: import('framer-motion').Variant;  animate: import('framer-motion').Variant;  exit: import('framer-motion').Variant;}

Component Props

Props accepted by <GlideCNProvider>, <GlideCN>, and <Page>.

Component Props Interfaces

export interface PageProps {
  children: React.ReactNode;
  transition?: string;
  duration?: number;
  delay?: number;
  ease?: EasingPreset;
  direction?: TransitionDirection;
  stagger?: number;
  custom?: Record<string, unknown>;
  className?: string;
  style?: React.CSSProperties;
}

export interface GlideCNProviderProps {
  children: React.ReactNode;
  defaultTransition?: string;
  defaultConfig?: TransitionConfig;
  reducedMotion?: boolean;
}

export interface GlideCNContextValue {
  currentTransition: string;
  transitionDefinition: TransitionDefinition | null;
  config: Required<TransitionConfig>;
  animationState: AnimationState;
  reducedMotion: boolean;
  setTransition: (name: string) => void;
  setConfig: (config: TransitionConfig) => void;
}

export interface PageProps {  children: React.ReactNode;  transition?: string;  duration?: number;  delay?: number;  ease?: EasingPreset;  direction?: TransitionDirection;  stagger?: number;  custom?: Record<string, unknown>;  className?: string;  style?: React.CSSProperties;}export interface GlideCNProviderProps {  children: React.ReactNode;  defaultTransition?: string;  defaultConfig?: TransitionConfig;  reducedMotion?: boolean;}export interface GlideCNContextValue {  currentTransition: string;  transitionDefinition: TransitionDefinition | null;  config: Required<TransitionConfig>;  animationState: AnimationState;  reducedMotion: boolean;  setTransition: (name: string) => void;  setConfig: (config: TransitionConfig) => void;}

← Animation Engine CLI Reference →