animot-presenter 0.1.0

package/dist/types.d.ts

@@ -0,0 +1,319 @@
+export type ElementType = 'code' | 'text' | 'arrow' | 'image' | 'shape' | 'counter' | 'chart' | 'icon';
+export type ShapeType = 'rectangle' | 'circle' | 'triangle' | 'ellipse' | 'star' | 'hexagon';
+export interface Position {
+    x: number;
+    y: number;
+}
+export interface Size {
+    width: number;
+    height: number;
+}
+export type TiltOrigin = string;
+export type AnimatableProperty = 'position' | 'rotation' | 'tilt' | 'skew' | 'size' | 'opacity' | 'borderRadius' | 'color';
+export interface PropertySequence {
+    property: AnimatableProperty;
+    order: number;
+    delay: number;
+    duration: number;
+}
+export interface ElementAnimationConfig {
+    order: number;
+    delay: number;
+    duration: number;
+    easing: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+    propertySequences?: PropertySequence[];
+}
+export type FloatingDirection = 'vertical' | 'horizontal' | 'both';
+export interface FloatingAnimationConfig {
+    enabled: boolean;
+    direction: FloatingDirection;
+    amplitude: number;
+    speed: number;
+    amplitudeRandomness: number;
+    speedRandomness: number;
+}
+export interface BaseElement {
+    id: string;
+    type: ElementType;
+    name?: string;
+    locked?: boolean;
+    groupId?: string;
+    position: Position;
+    size: Size;
+    rotation: number;
+    skewX: number;
+    skewY: number;
+    tiltX: number;
+    tiltY: number;
+    tiltOrigin: TiltOrigin;
+    zIndex: number;
+    visible: boolean;
+    animationConfig?: ElementAnimationConfig;
+    floatingAnimation?: FloatingAnimationConfig;
+}
+export type CodeAnimationMode = 'instant' | 'typewriter' | 'highlight-changes';
+export interface CodeAnimationConfig {
+    mode: CodeAnimationMode;
+    highlightColor: string;
+    typewriterSpeed: number;
+    highlightDuration: number;
+}
+export interface CodeElement extends BaseElement {
+    type: 'code';
+    code: string;
+    language: string;
+    theme: string;
+    filename: string;
+    showLineNumbers: boolean;
+    highlightedLines: number[];
+    blurredLines: number[];
+    fontSize: number;
+    fontWeight: number;
+    padding: number;
+    borderRadius: number;
+    showHeader: boolean;
+    headerStyle: 'macos' | 'windows' | 'none';
+    animation: CodeAnimationConfig;
+    transparentBackground?: boolean;
+}
+export type TextAnimationMode = 'instant' | 'typewriter' | 'fade-words';
+export interface TextAnimationConfig {
+    mode: TextAnimationMode;
+    typewriterSpeed: number;
+}
+export interface TextElement extends BaseElement {
+    type: 'text';
+    content: string;
+    fontSize: number;
+    fontWeight: number;
+    fontFamily: string;
+    fontStyle?: 'normal' | 'italic';
+    textDecoration?: 'none' | 'underline' | 'line-through';
+    color: string;
+    backgroundColor: string;
+    padding: number;
+    borderRadius: number;
+    textAlign: 'left' | 'center' | 'right';
+    opacity: number;
+    animation?: TextAnimationConfig;
+    textStroke?: {
+        enabled: boolean;
+        width: number;
+        color: string;
+    };
+    textShadow?: {
+        enabled: boolean;
+        offsetX: number;
+        offsetY: number;
+        blur: number;
+        color: string;
+    };
+    hollow?: boolean;
+    backgroundImage?: string;
+    backgroundPositionX?: number;
+    backgroundPositionY?: number;
+    backgroundScale?: number;
+}
+export type ArrowAnimationMode = 'none' | 'grow' | 'draw';
+export interface ArrowAnimationConfig {
+    mode: ArrowAnimationMode;
+    duration: number;
+}
+export interface ArrowElement extends BaseElement {
+    type: 'arrow';
+    startPoint: Position;
+    endPoint: Position;
+    controlPoints: Position[];
+    color: string;
+    strokeWidth: number;
+    headSize: number;
+    style: 'solid' | 'dashed' | 'dotted';
+    showHead: boolean;
+    opacity: number;
+    animation?: ArrowAnimationConfig;
+}
+export interface ImageElement extends BaseElement {
+    type: 'image';
+    src: string;
+    objectFit: 'cover' | 'contain' | 'fill';
+    borderRadius: number;
+    opacity: number;
+    blur: number;
+    clipMask?: {
+        enabled: boolean;
+        shapeType: ShapeType;
+        borderRadius?: number;
+    };
+}
+export interface ShapeElement extends BaseElement {
+    type: 'shape';
+    shapeType: ShapeType;
+    fillColor: string;
+    strokeColor: string;
+    strokeWidth: number;
+    opacity: number;
+    borderRadius: number;
+    boxShadow?: {
+        enabled: boolean;
+        offsetX: number;
+        offsetY: number;
+        blur: number;
+        spread: number;
+        color: string;
+    };
+}
+export type CounterType = 'number' | 'letter' | 'percentage' | 'currency';
+export interface CounterElement extends BaseElement {
+    type: 'counter';
+    counterType: CounterType;
+    startValue: number;
+    endValue: number;
+    prefix: string;
+    suffix: string;
+    decimals: number;
+    duration: number;
+    fontSize: number;
+    fontWeight: number;
+    fontFamily: string;
+    color: string;
+    backgroundColor: string;
+    padding: number;
+    borderRadius: number;
+    textAlign: 'left' | 'center' | 'right';
+    opacity: number;
+}
+export type ChartType = 'bar' | 'line' | 'pie' | 'donut' | 'area';
+export interface ChartDataPoint {
+    label: string;
+    value: number;
+    color?: string;
+}
+export interface ChartElement extends BaseElement {
+    type: 'chart';
+    chartType: ChartType;
+    data: ChartDataPoint[];
+    title: string;
+    showLabels: boolean;
+    showValues: boolean;
+    showGrid: boolean;
+    showLegend: boolean;
+    animationDuration: number;
+    colors: string[];
+    backgroundColor: string;
+    textColor: string;
+    fontSize: number;
+    padding: number;
+    borderRadius: number;
+}
+export interface IconElement extends BaseElement {
+    type: 'icon';
+    iconName: string;
+    iconLibrary: 'lucide' | 'tabler';
+    svgContent: string;
+    color: string;
+    strokeWidth: number;
+    fillMode: 'stroke' | 'fill' | 'both';
+}
+export type CanvasElement = CodeElement | TextElement | ArrowElement | ImageElement | ShapeElement | CounterElement | ChartElement | IconElement;
+export type ParticleShape = 'circle' | 'square' | 'star' | 'triangle';
+export interface ParticlesConfig {
+    enabled: boolean;
+    count: number;
+    color: string;
+    opacity: number;
+    minSize: number;
+    maxSize: number;
+    speed: number;
+    shape: ParticleShape;
+    connectDistance: number;
+    direction: 'up' | 'down' | 'left' | 'right' | 'random';
+}
+export type ConfettiMode = 'burst' | 'continuous' | 'fireworks' | 'snow';
+export interface ConfettiConfig {
+    enabled: boolean;
+    mode: ConfettiMode;
+    particleCount: number;
+    spread: number;
+    colors: string[];
+    gravity: number;
+    drift: number;
+    startVelocity: number;
+    scalar: number;
+}
+export interface CanvasBackground {
+    type: 'solid' | 'gradient' | 'image' | 'transparent';
+    color?: string;
+    gradient?: {
+        type: 'linear' | 'radial';
+        angle?: number;
+        colors: string[];
+    };
+    image?: string;
+    particles?: ParticlesConfig;
+    confetti?: ConfettiConfig;
+}
+export type TransitionType = 'none' | 'fade' | 'slide-left' | 'slide-right' | 'slide-up' | 'slide-down' | 'zoom-in' | 'zoom-out' | 'flip';
+export interface TransitionConfig {
+    type: TransitionType;
+    duration: number;
+    easing: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
+}
+export interface SlideCanvas {
+    width: number;
+    height: number;
+    background: CanvasBackground;
+    elements: CanvasElement[];
+}
+export interface Slide {
+    id: string;
+    name: string;
+    canvas: SlideCanvas;
+    transition: TransitionConfig;
+    duration: number;
+}
+export interface ProjectSettings {
+    defaultCanvasWidth: number;
+    defaultCanvasHeight: number;
+    defaultTransition: TransitionConfig;
+    defaultSlideDuration: number;
+}
+/** Animot project JSON format */
+export interface AnimotProject {
+    /** Schema version for forward compatibility. Default: 1 */
+    schemaVersion?: number;
+    id: string;
+    name: string;
+    slides: Slide[];
+    createdAt: number;
+    updatedAt: number;
+    settings: ProjectSettings;
+}
+/** Props for the AnimotPresenter component */
+export interface AnimotPresenterProps {
+    /** URL to JSON file (fetched automatically) */
+    src?: string;
+    /** Inline JSON object */
+    data?: AnimotProject;
+    /** Start playing automatically (default: false) */
+    autoplay?: boolean;
+    /** Loop back to start when reaching end (default: false) */
+    loop?: boolean;
+    /** Show bottom playback bar (default: true) */
+    controls?: boolean;
+    /** Show left/right carousel arrows (default: false) */
+    arrows?: boolean;
+    /** Show progress bar (default: true) */
+    progress?: boolean;
+    /** Enable keyboard navigation (default: true) */
+    keyboard?: boolean;
+    /** Override all slide durations (ms) */
+    duration?: number;
+    /** Initial slide index (default: 0) */
+    startSlide?: number;
+    /** CSS class for outer container */
+    class?: string;
+    /** Fired when slide changes */
+    onslidechange?: (index: number, total: number) => void;
+    /** Fired when last slide is reached (non-loop mode) */
+    oncomplete?: () => void;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,83 @@
+{
+	"name": "animot-presenter",
+	"version": "0.1.0",
+	"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",
+	"main": "./dist/cdn/animot-presenter.min.js",
+	"module": "./dist/cdn/animot-presenter.esm.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"svelte": "./dist/index.js",
+			"types": "./dist/index.d.ts",
+			"import": "./dist/cdn/animot-presenter.esm.js",
+			"require": "./dist/cdn/animot-presenter.min.js"
+		},
+		"./element": {
+			"import": "./dist/cdn/animot-presenter.esm.js",
+			"require": "./dist/cdn/animot-presenter.min.js"
+		},
+		"./styles": "./dist/styles/presenter.css"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"scripts": {
+		"dev": "vite dev",
+		"build": "npm run build:svelte && npm run build:element",
+		"build:svelte": "svelte-kit sync && svelte-package -o dist",
+		"build:element": "vite build --config vite.element.config.ts",
+		"package": "npm run build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"prepublishOnly": "npm run build"
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"peerDependenciesMeta": {
+		"svelte": {
+			"optional": true
+		}
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@types/canvas-confetti": "^1.9.0",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"typescript": "^5.0.0",
+		"vite": "^5.0.0"
+	},
+	"dependencies": {
+		"@animotion/motion": "^2.0.1",
+		"canvas-confetti": "^1.9.4",
+		"shiki": "^1.0.0"
+	},
+	"keywords": [
+		"svelte",
+		"react",
+		"vue",
+		"angular",
+		"web-component",
+		"animation",
+		"presentation",
+		"slides",
+		"morphing",
+		"animot",
+		"code-animation",
+		"typewriter",
+		"charts",
+		"particles"
+	],
+	"license": "BUSL-1.1",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/animot/animot-presenter"
+	}
+}