DepthText v1.2.0

Added

• New layerClassMap option: Map custom CSS classes to individual layers by index
  • Allows unique styling per layer (e.g., different colors for each depth level)
  • Available via JavaScript API: layerClassMap: ["front", "middle", "back"]
  • Combines with addClass for maximum flexibility
  • Example: Create rainbow gradients across depth layers
• Auto-generated layer classes: Each layer now receives depthtext-layer-N class (0-indexed)
  • Enables precise CSS targeting: .depthtext-layer-0, .depthtext-layer-1, etc.
  • Works independently of layerClassMap for even more control
• Public .update() method: Dynamically modify options after initialization
  • Change depth, layers, event type, etc. without recreating instance
  • Useful for responsive designs and interactive controls
  • Example: instance.update({ depth: "2rem", event: "scroll" })

Fixed

• CRITICAL: data-depth attribute parsing
  • Fixed bug where data-depth value was incorrectly assigned to engaged option
  • Now correctly uses data-depth-engaged for enabling/disabling instances
  • data-depth now exclusively controls depth value as intended
  • Prevents accidental instance disabling when using numeric depth values
• Enhanced engaged validation
  • Properly handles boolean, string boolean ("true"/"false"), and undefined values
  • More robust type coercion prevents unexpected behavior
• Event type validation
  • Added whitelist validation for event option
  • Console warning for invalid event types with automatic fallback to "none"
  • Prevents silent failures from typos
• ResizeObserver memory leak
  • Added destruction check in ResizeObserver callback
  • Prevents updates on destroyed instances
  • Improves cleanup and garbage collection
• Duplicate CSS classes
  • Layer creation now uses Set to eliminate duplicate class names
  • More efficient and cleaner DOM output
• Data attribute parsing
  • Now supports both camelCase and lowercase variants: data-depth-event-rotation and data-depth-eventrotation
  • Empty string data attributes (data-depth="") now correctly treated as undefined
  • Improved robustness across different HTML coding styles

Changed

• Type safety improvements
  • Removed any from MaybeElement type definition
  • Now strictly typed as HTMLElement | Element | null
  • Better TypeScript inference and error catching
• Destruction tracking
  • Added internal _isDestroyed flag
  • Prevents double-destroy and updates on destroyed instances
  • More predictable lifecycle management

Technical

• Refactored _validateOptions() with specialized normalizer functions
• Added normalizeEngaged() and normalizeEvent() helpers
• Improved options merging logic in DepthTextify()
• Enhanced data attribute reading with getDataAttr() helper
• Layer class application now uses Set for deduplication
• Better separation of concerns in validation layer

Documentation

• Added important notes about layer styling limitations
• Documented layerClassMap behavior when fewer classes than layers
• Updated all examples to reflect new data-depth-engaged attribute
• Added CSS best practices for individual layer coloring

DepthText v1.1.0

Added

• New addClass option: Add custom CSS classes to all depth layers for advanced styling control
• Supports single or multiple classes (space-separated)
• Available via JavaScript API: addClass: "my-class"
• Available via HTML attribute: data-depth-add-class="my-class"
• Enables gradient effects, animations, and custom styling per instance
• Improved class normalization to handle arrays and multiple whitespace formats

Changed

• Enhanced options validation to support the new addClass parameter
• Updated layer creation logic to apply custom classes while maintaining base depthtext-layer class

Technical

• Added normalizeAddClass() helper function for robust class string handling
• Extended DepthTextOptions interface with addClass property
• Updated DEPTHTEXT_DEFAULTS to include addClass: ""

DepthText v1.0.0

• Initial release of DepthText.
• High-performance 3D layered text rendering.
• Interactive depth effects with pointer and scroll events.
• Configurable depth, layers, direction, and rotation.
• Automatic initialization via data-depth attributes.
• TypeScript support with full type definitions.
• ESM, CJS, and IIFE (Global) build artifacts.
• Motion smoothing (lerp) for fluid pointer interaction.
• Accessibility features (aria-hidden layers).