@stacksjs/stx/dist/media/client/blur-up.d.ts

A performant UI Framework. Powered by Bun.

/**
 * Initialize blur-up effect for an image
 *
 * @example
 * ```typescript
 * const img = document.querySelector('img.has-placeholder')
 * initBlurUp(img, { duration: 500 })
 * ```
 */
export declare function initBlurUp(img: HTMLImageElement, options?: BlurUpOptions): void;
/**
 * Render a thumbhash to a canvas element
 *
 * Based on https://github.com/evanw/thumbhash
 */
export declare function renderThumbhashToCanvas(hash: Uint8Array, canvas: HTMLCanvasElement): void;
/**
 * Decode a thumbhash to RGBA pixel data
 *
 * This is a minimal decoder based on the thumbhash spec.
 * Returns a 32x32 RGBA image.
 */
export declare function thumbHashToRGBA(hash: Uint8Array): { w: number; h: number; rgba: Uint8ClampedArray };
/**
 * Convert a thumbhash to a data URL
 */
export declare function thumbHashToDataURL(hash: Uint8Array): string;
/**
 * Parse a base64-encoded thumbhash string
 */
export declare function parseThumbhashString(base64: string): Uint8Array;
/**
 * Crossfade transition between two elements
 */
export declare function crossfadeTransition(from: HTMLElement, to: HTMLElement, duration?: number): Promise<void>;
/**
 * Initialize blur-up for all elements with data-stx-blur-up
 */
export declare function initAllBlurUp(options?: BlurUpOptions): void;
/**
 * Generate the client-side blur-up runtime script
 */
export declare function generateBlurUpRuntime(): string;
/**
 * Generate CSS for blur-up effect
 */
export declare function generateBlurUpCSS(): string;
/**
 * STX Media - Client-Side Blur-Up Animation
 *
 * Smooth blur-up transition from placeholder to full image.
 * Supports thumbhash, blur LQIP, and color placeholders.
 *
 * @module media/client/blur-up
 */
// =============================================================================
// Types
// =============================================================================
export declare interface BlurUpOptions {
  duration?: number
  easing?: string
  removePlaceholder?: boolean
  loadedClass?: string
  loadingClass?: string
}