animot-presenter 0.1.3 → 0.2.2

package/dist/engine/utils.d.ts

@@ -1,4 +1,9 @@
+export declare function easeLinear(t: number): number;
+export declare function easeInCubic(t: number): number;
+export declare function easeOutCubic(t: number): number;
 export declare function easeInOutCubic(t: number): number;
+export declare function easeSpring(t: number): number;
+export declare function getEasingFn(name?: string): (t: number) => number;
 export declare function interpolateColor(color1: string, color2: string, progress: number): string;
 export declare function hashFraction(str: string, salt?: number): number;
 export declare function getFloatAnimName(direction: string, seed: string): string;

package/dist/engine/utils.js

@@ -1,6 +1,24 @@
+export function easeLinear(t) { return t; }
+export function easeInCubic(t) { return t * t * t; }
+export function easeOutCubic(t) { return 1 - Math.pow(1 - t, 3); }
 export function easeInOutCubic(t) {
     return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
 }
+export function easeSpring(t) {
+    const c4 = (2 * Math.PI) / 3;
+    return t === 0 ? 0 : t === 1 ? 1 : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
+}
+export function getEasingFn(name) {
+    switch (name) {
+        case 'linear': return easeLinear;
+        case 'ease-in': return easeInCubic;
+        case 'ease-out': return easeOutCubic;
+        case 'spring': return easeSpring;
+        case 'ease': return easeOutCubic;
+        case 'ease-in-out':
+        default: return easeInOutCubic;
+    }
+}
 export function interpolateColor(color1, color2, progress) {
     if (color1 === 'transparent')
         color1 = '#00000000';

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 export { default as AnimotPresenter } from './AnimotPresenter.svelte';
-export type { AnimotProject, AnimotPresenterProps, Slide, SlideCanvas, CanvasElement, CanvasBackground, TransitionConfig, TransitionType, ProjectSettings, BaseElement, CodeElement, TextElement, ArrowElement, ImageElement, ShapeElement, CounterElement, ChartElement, IconElement, ElementAnimationConfig, FloatingAnimationConfig, ParticlesConfig, ConfettiConfig } from './types';
+export type { AnimotProject, AnimotPresenterProps, Slide, SlideCanvas, CanvasElement, CanvasBackground, TransitionConfig, TransitionType, ProjectSettings, BaseElement, CodeElement, TextElement, ArrowElement, ImageElement, ShapeElement, CounterElement, ChartElement, IconElement, SvgElement, MotionPathElement, PathPoint, MotionPathConfig, ElementAnimationConfig, FloatingAnimationConfig, ParticlesConfig, ConfettiConfig } from './types';

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-export type ElementType = 'code' | 'text' | 'arrow' | 'image' | 'shape' | 'counter' | 'chart' | 'icon';
+export type ElementType = 'code' | 'text' | 'arrow' | 'image' | 'shape' | 'counter' | 'chart' | 'icon' | 'svg' | 'motionPath';
 export type ShapeType = 'rectangle' | 'circle' | 'triangle' | 'ellipse' | 'star' | 'hexagon';
 export interface Position {
     x: number;
@@ -9,19 +9,23 @@ export interface Size {
     height: number;
 }
 export type TiltOrigin = string;
-export type AnimatableProperty = 'position' | 'rotation' | 'tilt' | 'skew' | 'size' | 'opacity' | 'borderRadius' | 'color';
+export type AnimatableProperty = 'position' | 'rotation' | 'tilt' | 'skew' | 'size' | 'opacity' | 'borderRadius' | 'color' | 'perspective';
 export interface PropertySequence {
     property: AnimatableProperty;
     order: number;
     delay: number;
     duration: number;
 }
+export type EntranceAnimation = 'fade' | 'none';
+export type ExitAnimation = 'fade' | 'none';
 export interface ElementAnimationConfig {
     order: number;
     delay: number;
     duration: number;
     easing: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
     propertySequences?: PropertySequence[];
+    entrance?: EntranceAnimation;
+    exit?: ExitAnimation;
 }
 export type FloatingDirection = 'vertical' | 'horizontal' | 'both';
 export interface FloatingAnimationConfig {
@@ -32,6 +36,20 @@ export interface FloatingAnimationConfig {
     amplitudeRandomness: number;
     speedRandomness: number;
 }
+export interface PathPoint {
+    x: number;
+    y: number;
+    handleIn?: Position;
+    handleOut?: Position;
+}
+export interface MotionPathConfig {
+    motionPathId: string;
+    startPercent: number;
+    endPercent: number;
+    autoRotate: boolean;
+    orientationOffset: number;
+    loop: boolean;
+}
 export interface BaseElement {
     id: string;
     type: ElementType;
@@ -48,8 +66,12 @@ export interface BaseElement {
     tiltOrigin: TiltOrigin;
     zIndex: number;
     visible: boolean;
+    perspective?: number;
+    backfaceVisibility?: 'visible' | 'hidden';
     animationConfig?: ElementAnimationConfig;
     floatingAnimation?: FloatingAnimationConfig;
+    motionPathId?: string;
+    motionPathConfig?: MotionPathConfig;
 }
 export type CodeAnimationMode = 'instant' | 'typewriter' | 'highlight-changes';
 export interface CodeAnimationConfig {
@@ -139,6 +161,7 @@ export interface ImageElement extends BaseElement {
     borderRadius: number;
     opacity: number;
     blur: number;
+    backgroundColor?: string;
     clipMask?: {
         enabled: boolean;
         shapeType: ShapeType;
@@ -214,7 +237,23 @@ export interface IconElement extends BaseElement {
     strokeWidth: number;
     fillMode: 'stroke' | 'fill' | 'both';
 }
-export type CanvasElement = CodeElement | TextElement | ArrowElement | ImageElement | ShapeElement | CounterElement | ChartElement | IconElement;
+export interface SvgElement extends BaseElement {
+    type: 'svg';
+    svgContent: string;
+    color?: string;
+    opacity: number;
+    preserveAspectRatio: string;
+    viewBox?: string;
+}
+export interface MotionPathElement extends BaseElement {
+    type: 'motionPath';
+    points: PathPoint[];
+    closed: boolean;
+    pathColor: string;
+    pathWidth: number;
+    showInPresentation: boolean;
+}
+export type CanvasElement = CodeElement | TextElement | ArrowElement | ImageElement | ShapeElement | CounterElement | ChartElement | IconElement | SvgElement | MotionPathElement;
 export type ParticleShape = 'circle' | 'square' | 'star' | 'triangle';
 export interface ParticlesConfig {
     enabled: boolean;
@@ -252,7 +291,7 @@ export interface CanvasBackground {
     particles?: ParticlesConfig;
     confetti?: ConfettiConfig;
 }
-export type TransitionType = 'none' | 'fade' | 'slide-left' | 'slide-right' | 'slide-up' | 'slide-down' | 'zoom-in' | 'zoom-out' | 'flip';
+export type TransitionType = 'none' | 'fade' | 'slide-left' | 'slide-right' | 'slide-up' | 'slide-down' | 'zoom-in' | 'zoom-out' | 'flip' | 'flip-x' | 'flip-y';
 export interface TransitionConfig {
     type: TransitionType;
     duration: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "animot-presenter",
-	"version": "0.1.3",
+	"version": "0.2.2",
 	"description": "Embed animated presentations anywhere. Works with vanilla JS, React, Vue, Angular, Svelte, and any frontend framework. Morphing animations, code highlighting, charts, particles, and more.",
 	"type": "module",
 	"svelte": "./dist/index.js",