@autumnsgrove/gossamer 0.0.1 → 0.1.0

package/src/svelte/GossamerText.svelte

@@ -0,0 +1,239 @@
+<script lang="ts" module>
+  import type { PatternType } from '../index';
+
+  export interface GossamerTextProps {
+    /** Text content to display */
+    text: string;
+    /** Character set for effect (light to dark) */
+    characters?: string;
+    /** Text color */
+    color?: string;
+    /** Font size in pixels */
+    fontSize?: number;
+    /** Font family */
+    fontFamily?: string;
+    /** Enable animation effect */
+    animated?: boolean;
+    /** Animation pattern */
+    pattern?: PatternType;
+    /** Animation speed */
+    speed?: number;
+    /** Effect intensity */
+    intensity?: number;
+    /** Target FPS */
+    fps?: number;
+    /** Additional CSS class */
+    class?: string;
+  }
+</script>
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import {
+    perlinNoise2D,
+    createVisibilityObserver,
+    onReducedMotionChange,
+    CHARACTER_SETS,
+  } from '../index';
+
+  // Props with defaults
+  let {
+    text,
+    characters = CHARACTER_SETS.minimal.characters,
+    color = 'currentColor',
+    fontSize = 48,
+    fontFamily = 'monospace',
+    animated = false,
+    pattern = 'perlin',
+    speed = 0.5,
+    intensity = 0.3,
+    fps = 30,
+    class: className = '',
+  }: GossamerTextProps = $props();
+
+  // State
+  let canvas: HTMLCanvasElement;
+  let container: HTMLDivElement;
+  let isVisible = true;
+  let reducedMotion = false;
+  let animationId: number | null = null;
+  let textMetrics: { width: number; height: number } = { width: 0, height: 0 };
+
+  const shouldAnimate = $derived(animated && isVisible && !reducedMotion);
+
+  function measureText(): void {
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    ctx.font = `${fontSize}px ${fontFamily}`;
+    const metrics = ctx.measureText(text);
+
+    textMetrics = {
+      width: Math.ceil(metrics.width) + 20,
+      height: fontSize + 20,
+    };
+
+    canvas.width = textMetrics.width;
+    canvas.height = textMetrics.height;
+  }
+
+  function renderText(time: number = 0): void {
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.font = `${fontSize}px ${fontFamily}`;
+    ctx.textBaseline = 'top';
+    ctx.fillStyle = color;
+
+    // Render each character with potential effect
+    let x = 10;
+    const y = 10;
+
+    for (let i = 0; i < text.length; i++) {
+      const char = text[i];
+      const charWidth = ctx.measureText(char).width;
+
+      if (animated && time > 0) {
+        // Apply noise-based effect to character
+        const noise = perlinNoise2D(
+          i * 0.5 + time * speed * 0.001,
+          time * speed * 0.0005
+        );
+
+        // Slight position offset based on noise
+        const offsetY = noise * intensity * 5;
+
+        // Slight opacity variation
+        ctx.globalAlpha = 0.7 + (noise + 1) * 0.15;
+
+        ctx.fillText(char, x, y + offsetY);
+        ctx.globalAlpha = 1;
+      } else {
+        ctx.fillText(char, x, y);
+      }
+
+      x += charWidth;
+    }
+  }
+
+  let startTime = 0;
+
+  function animate(currentTime: number): void {
+    if (!shouldAnimate) return;
+
+    const elapsed = currentTime - startTime;
+    renderText(elapsed);
+    animationId = requestAnimationFrame(animate);
+  }
+
+  function startAnimation(): void {
+    if (animationId !== null) return;
+    startTime = performance.now();
+    animationId = requestAnimationFrame(animate);
+  }
+
+  function stopAnimation(): void {
+    if (animationId !== null) {
+      cancelAnimationFrame(animationId);
+      animationId = null;
+    }
+  }
+
+  // Lifecycle
+  onMount(() => {
+    measureText();
+    renderText();
+
+    const cleanupMotion = onReducedMotionChange((prefers) => {
+      reducedMotion = prefers;
+    });
+
+    const cleanupVisibility = createVisibilityObserver(
+      container,
+      (visible) => {
+        isVisible = visible;
+        if (visible && shouldAnimate) {
+          startAnimation();
+        } else {
+          stopAnimation();
+          renderText();
+        }
+      },
+      0.1
+    );
+
+    if (shouldAnimate) {
+      startAnimation();
+    }
+
+    return () => {
+      cleanupMotion();
+      cleanupVisibility();
+      stopAnimation();
+    };
+  });
+
+  // React to text changes
+  $effect(() => {
+    if (text) {
+      measureText();
+      if (shouldAnimate) {
+        // Animation will handle rendering
+      } else {
+        renderText();
+      }
+    }
+  });
+
+  // React to animation state changes
+  $effect(() => {
+    if (shouldAnimate) {
+      startAnimation();
+    } else {
+      stopAnimation();
+      renderText();
+    }
+  });
+</script>
+
+<div
+  bind:this={container}
+  class="gossamer-text {className}"
+  style:width={textMetrics.width ? `${textMetrics.width}px` : 'auto'}
+  style:height={textMetrics.height ? `${textMetrics.height}px` : 'auto'}
+>
+  <canvas
+    bind:this={canvas}
+    aria-hidden="true"
+    class="gossamer-canvas"
+  ></canvas>
+  <span class="gossamer-text-sr">{text}</span>
+</div>
+
+<style>
+  .gossamer-text {
+    position: relative;
+    display: inline-block;
+  }
+
+  .gossamer-canvas {
+    display: block;
+  }
+
+  .gossamer-text-sr {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+</style>

package/src/svelte/index.ts

@@ -0,0 +1,75 @@
+/**
+ * Gossamer - Svelte 5 Components
+ *
+ * ASCII visual effects components for Svelte applications.
+ *
+ * @packageDocumentation
+ */
+
+// =============================================================================
+// Components
+// =============================================================================
+
+export { default as GossamerClouds } from './GossamerClouds.svelte';
+export { default as GossamerImage } from './GossamerImage.svelte';
+export { default as GossamerText } from './GossamerText.svelte';
+export { default as GossamerOverlay } from './GossamerOverlay.svelte';
+export { default as GossamerBorder } from './GossamerBorder.svelte';
+
+// =============================================================================
+// Component Types
+// =============================================================================
+
+export type { GossamerCloudsProps } from './GossamerClouds.svelte';
+export type { GossamerImageProps } from './GossamerImage.svelte';
+export type { GossamerTextProps } from './GossamerText.svelte';
+export type { GossamerOverlayProps, BlendMode } from './GossamerOverlay.svelte';
+export type { GossamerBorderProps, BorderStyle } from './GossamerBorder.svelte';
+
+// =============================================================================
+// Presets
+// =============================================================================
+
+export {
+  PRESETS,
+  grovePresets,
+  seasonalPresets,
+  ambientPresets,
+  getPreset,
+  getPresetNames,
+  getPresetsByCategory,
+} from './presets';
+
+// =============================================================================
+// Re-exports from Core
+// =============================================================================
+
+export {
+  // Core types
+  type GossamerConfig,
+  type PresetConfig,
+  type PatternConfig,
+  type PatternType,
+  type CharacterSet,
+
+  // Constants
+  DEFAULT_CHARACTERS,
+  DEFAULT_CONFIG,
+  CHARACTER_SETS,
+
+  // Core functions
+  calculateBrightness,
+  brightnessToChar,
+
+  // Character utilities
+  getCharacterSet,
+  getCharacters,
+  getCharacterSetNames,
+  invertCharacters,
+
+  // Performance utilities
+  prefersReducedMotion,
+
+  // Version
+  VERSION,
+} from '../index';

package/src/svelte/presets.ts

@@ -0,0 +1,174 @@
+/**
+ * Preset configurations for Gossamer effects
+ */
+
+import type { PresetConfig } from '../index';
+
+/**
+ * Grove-themed presets
+ * Organic, nature-inspired effects
+ */
+export const grovePresets: Record<string, PresetConfig> = {
+  'grove-mist': {
+    name: 'Grove Mist',
+    description: 'Soft fog effect drifting through the trees',
+    characters: ' ·∙•◦',
+    pattern: 'perlin',
+    frequency: 0.03,
+    amplitude: 0.8,
+    speed: 0.3,
+    opacity: 0.2,
+  },
+  'grove-fireflies': {
+    name: 'Grove Fireflies',
+    description: 'Twinkling points of light in the darkness',
+    characters: ' ·*✦✧',
+    pattern: 'static',
+    frequency: 0.01,
+    amplitude: 1.2,
+    speed: 0.8,
+    opacity: 0.3,
+  },
+  'grove-rain': {
+    name: 'Grove Rain',
+    description: 'Gentle rain falling through the canopy',
+    characters: ' │\\|/',
+    pattern: 'waves',
+    frequency: 0.05,
+    amplitude: 1.0,
+    speed: 1.5,
+    opacity: 0.15,
+  },
+  'grove-dew': {
+    name: 'Grove Dew',
+    description: 'Morning dew glistening on spider silk',
+    characters: ' ·∘∙●',
+    pattern: 'fbm',
+    frequency: 0.04,
+    amplitude: 0.7,
+    speed: 0.1,
+    opacity: 0.15,
+  },
+};
+
+/**
+ * Seasonal presets
+ * Effects themed around the four seasons
+ */
+export const seasonalPresets: Record<string, PresetConfig> = {
+  'winter-snow': {
+    name: 'Winter Snow',
+    description: 'Gentle snowfall on a quiet night',
+    characters: ' ·∙*❄',
+    pattern: 'perlin',
+    frequency: 0.04,
+    amplitude: 0.9,
+    speed: 0.5,
+    opacity: 0.25,
+  },
+  'autumn-leaves': {
+    name: 'Autumn Leaves',
+    description: 'Scattered leaves drifting on the wind',
+    characters: ' 🍂·∙',
+    pattern: 'perlin',
+    frequency: 0.06,
+    amplitude: 1.1,
+    speed: 0.4,
+    opacity: 0.2,
+  },
+  'spring-petals': {
+    name: 'Spring Petals',
+    description: 'Cherry blossom petals floating on the breeze',
+    characters: ' ·✿❀',
+    pattern: 'waves',
+    frequency: 0.05,
+    amplitude: 0.8,
+    speed: 0.6,
+    opacity: 0.2,
+  },
+  'summer-heat': {
+    name: 'Summer Heat',
+    description: 'Heat shimmer rising from sun-warmed ground',
+    characters: ' ~≈∿',
+    pattern: 'waves',
+    frequency: 0.08,
+    amplitude: 1.3,
+    speed: 1.0,
+    opacity: 0.1,
+  },
+};
+
+/**
+ * Ambient presets
+ * Subtle background textures
+ */
+export const ambientPresets: Record<string, PresetConfig> = {
+  'ambient-static': {
+    name: 'Ambient Static',
+    description: 'Gentle static noise texture',
+    characters: ' .:',
+    pattern: 'static',
+    frequency: 0.1,
+    amplitude: 0.5,
+    speed: 0.2,
+    opacity: 0.08,
+  },
+  'ambient-waves': {
+    name: 'Ambient Waves',
+    description: 'Soft flowing wave pattern',
+    characters: ' ·~',
+    pattern: 'waves',
+    frequency: 0.02,
+    amplitude: 0.6,
+    speed: 0.3,
+    opacity: 0.1,
+  },
+  'ambient-clouds': {
+    name: 'Ambient Clouds',
+    description: 'Drifting cloud-like patterns',
+    characters: ' .:-',
+    pattern: 'fbm',
+    frequency: 0.02,
+    amplitude: 0.7,
+    speed: 0.15,
+    opacity: 0.12,
+  },
+};
+
+/**
+ * All presets combined for easy access
+ */
+export const PRESETS: Record<string, PresetConfig> = {
+  ...grovePresets,
+  ...seasonalPresets,
+  ...ambientPresets,
+};
+
+/**
+ * Get a preset by name
+ */
+export function getPreset(name: string): PresetConfig | undefined {
+  return PRESETS[name];
+}
+
+/**
+ * List all available preset names
+ */
+export function getPresetNames(): string[] {
+  return Object.keys(PRESETS);
+}
+
+/**
+ * List preset names by category
+ */
+export function getPresetsByCategory(): {
+  grove: string[];
+  seasonal: string[];
+  ambient: string[];
+} {
+  return {
+    grove: Object.keys(grovePresets),
+    seasonal: Object.keys(seasonalPresets),
+    ambient: Object.keys(ambientPresets),
+  };
+}

package/src/utils/canvas.ts

@@ -0,0 +1,210 @@
+/**
+ * Canvas Utilities
+ *
+ * Helper functions for canvas creation, setup, and manipulation.
+ */
+
+/**
+ * Options for canvas creation
+ */
+export interface CanvasOptions {
+  /** Canvas width in pixels */
+  width?: number;
+  /** Canvas height in pixels */
+  height?: number;
+  /** Whether to use high DPI scaling */
+  highDPI?: boolean;
+  /** CSS class to add to canvas */
+  className?: string;
+  /** Inline styles to apply */
+  style?: Partial<CSSStyleDeclaration>;
+}
+
+/**
+ * Create a canvas element with optimal settings
+ */
+export function createCanvas(options: CanvasOptions = {}): HTMLCanvasElement {
+  const { width = 300, height = 150, highDPI = true, className, style } = options;
+
+  const canvas = document.createElement('canvas');
+
+  if (highDPI) {
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+
+    const ctx = canvas.getContext('2d');
+    if (ctx) {
+      ctx.scale(dpr, dpr);
+    }
+  } else {
+    canvas.width = width;
+    canvas.height = height;
+  }
+
+  if (className) {
+    canvas.className = className;
+  }
+
+  if (style) {
+    Object.assign(canvas.style, style);
+  }
+
+  return canvas;
+}
+
+/**
+ * Get the device pixel ratio
+ */
+export function getDevicePixelRatio(): number {
+  return typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
+}
+
+/**
+ * Resize canvas to match container dimensions
+ */
+export function resizeCanvasToContainer(
+  canvas: HTMLCanvasElement,
+  container: HTMLElement,
+  highDPI: boolean = true
+): { width: number; height: number } {
+  const rect = container.getBoundingClientRect();
+  const dpr = highDPI ? getDevicePixelRatio() : 1;
+
+  const width = rect.width;
+  const height = rect.height;
+
+  canvas.width = width * dpr;
+  canvas.height = height * dpr;
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+
+  if (highDPI) {
+    const ctx = canvas.getContext('2d');
+    if (ctx) {
+      ctx.scale(dpr, dpr);
+    }
+  }
+
+  return { width, height };
+}
+
+/**
+ * Create an offscreen canvas for buffer rendering
+ */
+export function createOffscreenCanvas(width: number, height: number): HTMLCanvasElement | OffscreenCanvas {
+  if (typeof OffscreenCanvas !== 'undefined') {
+    return new OffscreenCanvas(width, height);
+  }
+
+  // Fallback for environments without OffscreenCanvas
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  return canvas;
+}
+
+/**
+ * Clear a canvas
+ */
+export function clearCanvas(
+  ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+  width: number,
+  height: number,
+  backgroundColor?: string
+): void {
+  if (backgroundColor) {
+    ctx.fillStyle = backgroundColor;
+    ctx.fillRect(0, 0, width, height);
+  } else {
+    ctx.clearRect(0, 0, width, height);
+  }
+}
+
+/**
+ * Get image data from a canvas region
+ */
+export function getImageData(
+  ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+  x: number = 0,
+  y: number = 0,
+  width?: number,
+  height?: number
+): ImageData {
+  const canvas = ctx.canvas;
+  const w = width ?? canvas.width;
+  const h = height ?? canvas.height;
+
+  return ctx.getImageData(x, y, w, h);
+}
+
+/**
+ * Set optimal rendering context settings
+ */
+export function optimizeContext(ctx: CanvasRenderingContext2D): void {
+  // Disable image smoothing for crisp ASCII rendering
+  ctx.imageSmoothingEnabled = false;
+
+  // Use source-over for standard compositing
+  ctx.globalCompositeOperation = 'source-over';
+}
+
+/**
+ * Set text rendering options for ASCII display
+ */
+export function setupTextRendering(
+  ctx: CanvasRenderingContext2D,
+  fontSize: number,
+  fontFamily: string = 'monospace',
+  color: string = '#ffffff'
+): void {
+  ctx.font = `${fontSize}px ${fontFamily}`;
+  ctx.textBaseline = 'top';
+  ctx.textAlign = 'left';
+  ctx.fillStyle = color;
+}
+
+/**
+ * Measure text width for a given font configuration
+ */
+export function measureTextWidth(
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  fontSize: number,
+  fontFamily: string = 'monospace'
+): number {
+  const originalFont = ctx.font;
+  ctx.font = `${fontSize}px ${fontFamily}`;
+  const metrics = ctx.measureText(text);
+  ctx.font = originalFont;
+  return metrics.width;
+}
+
+/**
+ * Calculate optimal cell size for a given canvas and desired columns
+ */
+export function calculateCellSize(
+  canvasWidth: number,
+  canvasHeight: number,
+  targetCols: number
+): { cellWidth: number; cellHeight: number; cols: number; rows: number } {
+  const cellWidth = Math.floor(canvasWidth / targetCols);
+  // Use a typical monospace aspect ratio of ~0.6
+  const cellHeight = Math.floor(cellWidth * 1.5);
+  const cols = Math.floor(canvasWidth / cellWidth);
+  const rows = Math.floor(canvasHeight / cellHeight);
+
+  return { cellWidth, cellHeight, cols, rows };
+}
+
+/**
+ * Apply a CSS blend mode to canvas compositing
+ */
+export function setBlendMode(
+  ctx: CanvasRenderingContext2D,
+  mode: 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'soft-light' | 'hard-light' | 'difference' | 'exclusion'
+): void {
+  ctx.globalCompositeOperation = mode === 'normal' ? 'source-over' : mode;
+}