/** * Cube Animation Primitives * * Animation utilities specifically for the CREATE SOMETHING cube mark. * Built on the base animation primitives from visual/animations.ts, * specialized for isometric cube geometry. * * Three core animations aligned with brand philosophy: * - reveal: Faces fade in sequentially (DRY - unified from hidden) * - assemble: Faces slide into position (Heidegger - parts become whole) * - pulse: Subtle breathing effect (Rams - functional vitality) * * "Animation should reveal truth, not decorate surface." */ import { type CubeFace } from '../types.js'; /** * Easing functions from Canon */ export declare const cubeEasing: { /** Standard Material Design easing */ readonly standard: "cubic-bezier(0.4, 0, 0.2, 1)"; /** Emphasized entry for dramatic effect */ readonly emphasized: "cubic-bezier(0.2, 0, 0, 1)"; /** SVG spline format for SMIL animations */ readonly splineStandard: "0.4 0 0.2 1"; readonly splineEmphasized: "0.2 0 0 1"; }; /** * Duration scale in milliseconds - matches CSS Canon tokens */ export declare const cubeDuration: { /** Micro-interactions (hover states) */ readonly micro: 200; /** Standard transitions */ readonly standard: 300; /** Complex/multi-part animations */ readonly complex: 500; /** Dramatic reveal sequences */ readonly dramatic: 800; }; /** * Default stagger delays between cube faces (ms) */ export declare const cubeStagger: { /** Quick sequential reveal */ readonly fast: 50; /** Standard reveal timing */ readonly standard: 100; /** Dramatic assembly timing */ readonly slow: 150; }; /** * Isometric offset vectors for assembly animations * Each face slides in from a direction that emphasizes 3D depth */ export declare const cubeFaceOffsets: Record; /** * Face render order (back to front for proper layering) */ export declare const cubeFaceOrder: CubeFace[]; export interface CubeAnimationOptions { /** Base duration in ms (default: 500) */ duration?: number; /** Stagger delay between faces in ms (default: 100) */ stagger?: number; /** Starting delay before animation begins in ms (default: 0) */ delay?: number; } /** * Generate SVG animate element for cube face reveal * Fades a face from transparent to its Canon opacity */ export declare function cubeRevealAnimation(face: CubeFace, faceIndex: number, opts?: CubeAnimationOptions): string; /** * Generate SVG animate elements for cube face assembly * Face slides in from offset position while fading in */ export declare function cubeAssembleAnimation(face: CubeFace, faceIndex: number, opts?: CubeAnimationOptions): string; /** * Generate SVG animate element for cube pulse * Subtle breathing effect for loading/activity states */ export declare function cubePulseAnimation(opts?: { duration?: number; minOpacity?: number; maxOpacity?: number; }): string; /** * Generate complete SMIL animation group for a cube face * Combines opacity and transform animations based on type */ export declare function cubeFaceAnimationSMIL(face: CubeFace, animationType: 'reveal' | 'pulse' | 'assemble', opts?: CubeAnimationOptions): string; /** * Generate CSS keyframes for cube reveal animation */ export declare function cubeRevealKeyframes(name?: string): string; /** * Generate CSS keyframes for cube assembly animation */ export declare function cubeAssembleKeyframes(name: string, face: CubeFace): string; /** * Generate CSS keyframes for cube pulse animation */ export declare function cubePulseKeyframes(name?: string, min?: number, max?: number): string; /** * Generate complete CSS for all cube animation variants */ export declare function generateCubeAnimationCSS(): string; /** * Calculate stagger delay for a face based on position */ export declare function cubeStaggerDelay(face: CubeFace, baseDelay?: number): number; /** * Generate inline style for animated face */ export declare function cubeFaceAnimationStyle(face: CubeFace, animationType: 'reveal' | 'pulse' | 'assemble', opts?: CubeAnimationOptions): string; /** * Get CSS custom property values for cube animation */ export declare function getCubeAnimationVars(opts?: CubeAnimationOptions): Record; export interface CubeAnimationAction { /** Trigger the animation */ play: () => void; /** Reset to initial state */ reset: () => void; /** Pause the animation */ pause: () => void; } /** * Create animation controller for programmatic control * Used with Svelte's use: directive for advanced scenarios * * @example * const controller = createCubeAnimationController(cubeElement); * controller.play(); // Resume animations * controller.pause(); // Pause animations * controller.reset(); // Restart animations from beginning */ export declare function createCubeAnimationController(element: SVGElement): CubeAnimationAction;