@hyvnt/hyvui 0.2.0 → 0.4.0

package/dist/components/ambient/GridOverlay.svelte.d.ts

@@ -1,3 +1,11 @@
+/**
+ * Decorative. Parent must have `position: relative`. Renders `aria-hidden`.
+ * @example
+ * <div style="position: relative;">
+ *   <GridOverlay />
+ *   content here
+ * </div>
+ */
 interface Props {
     /** Additional CSS classes. */
     class?: string;

package/dist/components/ambient/HexGrid.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	/**
+	 * Decorative hex grid overlay. Adapts color and character per active register:
+	 * hextech → cyan precise etching; arcane → violet cracked. Parent must have
+	 * `position: relative`. Renders `aria-hidden`.
+	 * @example
+	 * <div style="position: relative;">
+	 *   <HexGrid />
+	 *   content here
+	 * </div>
+	 */
+	interface Props {
+		/** Controls animation playback. */
+		animated?: boolean;
+		/** Override grid opacity (0–1). Defaults to register's --reg-ornament-opacity. */
+		opacity?: number | undefined;
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let { animated = true, opacity = undefined, class: className = '' }: Props = $props();
+
+	const prefersReduced =
+		typeof window !== 'undefined'
+			? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+			: false;
+
+	const shouldAnimate = $derived(animated && !prefersReduced);
+</script>
+
+<div
+	class={cn('hyvui-hex-grid', shouldAnimate && 'hyvui-hex-grid--animated', className)}
+	style={opacity !== undefined ? `--hex-opacity-override: ${opacity}` : undefined}
+	aria-hidden="true"
+></div>
+
+<style>
+	.hyvui-hex-grid {
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+
+		/* Hex pattern via three-angle stripes (vertical + two diagonals).
+		   Color and opacity come from register tokens so they shift automatically. */
+		background-image:
+			linear-gradient(to right, var(--hg-color) 1px, transparent 1px),
+			linear-gradient(60deg, var(--hg-color) 1px, transparent 1px),
+			linear-gradient(-60deg, var(--hg-color) 1px, transparent 1px);
+		background-size: 40px 23px;
+
+		opacity: var(--hex-opacity-override, var(--reg-ornament-opacity));
+		mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
+		-webkit-mask-image: linear-gradient(
+			to bottom,
+			transparent,
+			black 12%,
+			black 88%,
+			transparent
+		);
+
+		/* default color (field-notebook) */
+		--hg-color: rgba(199, 156, 87, 0.45);
+	}
+
+	/* ── hextech ─ cyan precision ─────────────────────────────────────── */
+	:global([data-register='hextech']) .hyvui-hex-grid {
+		--hg-color: rgba(93, 217, 240, 0.55);
+		background-size: 48px 28px;
+	}
+
+	/* ── arcane ─ violet instability ─────────────────────────────────── */
+	:global([data-register='arcane']) .hyvui-hex-grid {
+		--hg-color: rgba(184, 69, 201, 0.5);
+		background-size: 40px 23px;
+	}
+
+	/* ── pulse animation ─────────────────────────────────────────────── */
+	.hyvui-hex-grid--animated {
+		animation: hg-pulse var(--orn-shimmer-rate, 4s) var(--orn-pulse-rhythm, ease-in-out) infinite;
+	}
+
+	:global([data-register='arcane']) .hyvui-hex-grid--animated {
+		animation:
+			hg-pulse var(--orn-shimmer-rate, 2.4s) var(--orn-pulse-rhythm, ease-in-out) infinite,
+			hg-flicker 7s step-end infinite;
+	}
+
+	@keyframes hg-pulse {
+		0%,
+		100% {
+			opacity: var(--hex-opacity-override, var(--reg-ornament-opacity));
+		}
+		50% {
+			opacity: calc(var(--hex-opacity-override, var(--reg-ornament-opacity)) * 1.8);
+		}
+	}
+
+	@keyframes hg-flicker {
+		0%,
+		97%,
+		100% {
+			opacity: var(--hex-opacity-override, var(--reg-ornament-opacity));
+		}
+		98% {
+			opacity: 0.02;
+		}
+		99% {
+			opacity: calc(var(--hex-opacity-override, var(--reg-ornament-opacity)) * 2.2);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-hex-grid--animated {
+			animation: none;
+		}
+	}
+</style>

package/dist/components/ambient/HexGrid.svelte.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Decorative hex grid overlay. Adapts color and character per active register:
+ * hextech → cyan precise etching; arcane → violet cracked. Parent must have
+ * `position: relative`. Renders `aria-hidden`.
+ * @example
+ * <div style="position: relative;">
+ *   <HexGrid />
+ *   content here
+ * </div>
+ */
+interface Props {
+    /** Controls animation playback. */
+    animated?: boolean;
+    /** Override grid opacity (0–1). Defaults to register's --reg-ornament-opacity. */
+    opacity?: number | undefined;
+    /** Additional CSS classes. */
+    class?: string;
+}
+declare const HexGrid: import("svelte").Component<Props, {}, "">;
+type HexGrid = ReturnType<typeof HexGrid>;
+export default HexGrid;

package/dist/components/ambient/ParallaxLayer.svelte

@@ -1,41 +1,45 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    /** Motion multiplier applied to --px/--py custom properties. */
-    strength?: number;
-    /** Additional CSS classes. */
-    class?: string;
-    /** Content to apply parallax to. */
-    children?: Snippet;
-  }
-
-  let {
-    strength = 18,
-    class: className = '',
-    children,
-  }: Props = $props();
-</script>
-
-<div
-  class={cn('hyvui-parallax', className)}
-  style:transform="translate(calc(var(--px, 0) * {strength}px), calc(var(--py, 0) * {strength}px))"
-  aria-hidden="true"
->
-  {#if children}{@render children()}{/if}
-</div>
-
-<style>
-  .hyvui-parallax {
-    will-change: transform;
-    transition: transform 0.15s ease-out;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .hyvui-parallax {
-      transform: none !important;
-      transition: none;
-    }
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * Reads `--px` and `--py` CSS custom properties for pointer-driven parallax. Set these on a parent via JS.
+	 * @example
+	 * <div onpointermove={trackPointer} style="position:relative;">
+	 *   <ParallaxLayer strength={12}><GlyphMark /></ParallaxLayer>
+	 * </div>
+	 */
+	interface Props {
+		/** Motion multiplier applied to --px/--py custom properties. */
+		strength?: number;
+		/** Additional CSS classes. */
+		class?: string;
+		/** Content to apply parallax to. */
+		children?: Snippet;
+	}
+
+	let { strength = 18, class: className = '', children }: Props = $props();
+</script>
+
+<div
+	class={cn('hyvui-parallax', className)}
+	style:transform="translate(calc(var(--px, 0) * {strength}px), calc(var(--py, 0) * {strength}px))"
+	aria-hidden="true"
+>
+	{#if children}{@render children()}{/if}
+</div>
+
+<style>
+	.hyvui-parallax {
+		will-change: transform;
+		backface-visibility: hidden;
+		transition: transform 0.15s var(--ease-smooth);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-parallax {
+			transform: none !important;
+			transition: none;
+		}
+	}
+</style>

package/dist/components/ambient/ParallaxLayer.svelte.d.ts

@@ -1,4 +1,11 @@
 import type { Snippet } from 'svelte';
+/**
+ * Reads `--px` and `--py` CSS custom properties for pointer-driven parallax. Set these on a parent via JS.
+ * @example
+ * <div onpointermove={trackPointer} style="position:relative;">
+ *   <ParallaxLayer strength={12}><GlyphMark /></ParallaxLayer>
+ * </div>
+ */
 interface Props {
     /** Motion multiplier applied to --px/--py custom properties. */
     strength?: number;

package/dist/components/ambient/ScanBand.svelte

@@ -1,91 +1,103 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-
-  interface Props {
-    /** Enable the scan animation. */
-    active?: boolean;
-    /** Animation axis. */
-    axis?: 'x' | 'y';
-    /** Thickness/width of the band. */
-    size?: string;
-    /** Animation duration. */
-    duration?: string;
-    /** Gradient used for the band. */
-    gradient?: string;
-    /** Additional CSS classes. */
-    class?: string;
-  }
-
-  let {
-    active = true,
-    axis = 'y',
-    size = '1px',
-    duration = '8s',
-    gradient = 'linear-gradient(90deg, transparent, rgba(199, 156, 87, 0.18), transparent)',
-    class: className = '',
-  }: Props = $props();
-</script>
-
-{#if active}
-  <div
-    class={cn('hyvui-scan-band', axis === 'x' ? 'hyvui-scan-band-x' : 'hyvui-scan-band-y', className)}
-    style:--scan-size={size}
-    style:--scan-duration={duration}
-    style:--scan-gradient={gradient}
-    aria-hidden="true"
-  ></div>
-{/if}
-
-<style>
-  .hyvui-scan-band {
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    overflow: hidden;
-  }
-
-  .hyvui-scan-band::after {
-    content: '';
-    position: absolute;
-    background: var(--scan-gradient);
-  }
-
-  .hyvui-scan-band-y::after {
-    left: 0;
-    right: 0;
-    height: var(--scan-size);
-    animation: scan-band-y var(--scan-duration) linear infinite;
-  }
-
-  .hyvui-scan-band-x::after {
-    top: 0;
-    bottom: 0;
-    width: var(--scan-size);
-    animation: scan-band-x var(--scan-duration) linear infinite;
-  }
-
-  @keyframes scan-band-y {
-    0% {
-      transform: translateY(-100%);
-    }
-    100% {
-      transform: translateY(100vh);
-    }
-  }
-
-  @keyframes scan-band-x {
-    0% {
-      transform: translateX(-120%);
-    }
-    100% {
-      transform: translateX(520%);
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .hyvui-scan-band::after {
-      animation: none;
-      display: none;
-    }
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	/**
+	 * Decorative. Parent must have `position: relative`. Renders `aria-hidden`.
+	 * @example
+	 * <div style="position: relative;">
+	 *   <ScanBand axis="x" duration="6s" />
+	 *   content with scan line
+	 * </div>
+	 */
+	interface Props {
+		/** Enable the scan animation. */
+		active?: boolean;
+		/** Animation axis. */
+		axis?: 'x' | 'y';
+		/** Thickness/width of the band. */
+		size?: string;
+		/** Animation duration. */
+		duration?: string;
+		/** Gradient used for the band. */
+		gradient?: string;
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let {
+		active = true,
+		axis = 'y',
+		size = '1px',
+		duration = '8s',
+		gradient = 'linear-gradient(90deg, transparent, rgba(199, 156, 87, 0.18), transparent)',
+		class: className = ''
+	}: Props = $props();
+</script>
+
+{#if active}
+	<div
+		class={cn(
+			'hyvui-scan-band',
+			axis === 'x' ? 'hyvui-scan-band-x' : 'hyvui-scan-band-y',
+			className
+		)}
+		style:--scan-size={size}
+		style:--scan-duration={duration}
+		style:--scan-gradient={gradient}
+		aria-hidden="true"
+	></div>
+{/if}
+
+<style>
+	.hyvui-scan-band {
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+		overflow: hidden;
+	}
+
+	.hyvui-scan-band::after {
+		content: '';
+		position: absolute;
+		background: var(--scan-gradient);
+	}
+
+	.hyvui-scan-band-y::after {
+		left: 0;
+		right: 0;
+		height: var(--scan-size);
+		animation: scan-band-y var(--scan-duration) linear infinite;
+	}
+
+	.hyvui-scan-band-x::after {
+		top: 0;
+		bottom: 0;
+		width: var(--scan-size);
+		animation: scan-band-x var(--scan-duration) linear infinite;
+	}
+
+	@keyframes scan-band-y {
+		0% {
+			transform: translateY(-100%);
+		}
+		100% {
+			transform: translateY(100%);
+		}
+	}
+
+	@keyframes scan-band-x {
+		0% {
+			transform: translateX(-120%);
+		}
+		100% {
+			transform: translateX(520%);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-scan-band::after {
+			animation: none;
+			display: none;
+		}
+	}
+</style>

package/dist/components/ambient/ScanBand.svelte.d.ts

@@ -1,3 +1,11 @@
+/**
+ * Decorative. Parent must have `position: relative`. Renders `aria-hidden`.
+ * @example
+ * <div style="position: relative;">
+ *   <ScanBand axis="x" duration="6s" />
+ *   content with scan line
+ * </div>
+ */
 interface Props {
     /** Enable the scan animation. */
     active?: boolean;

package/dist/components/ambient/ShimmerCloud.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import { onMount } from 'svelte';
+
+	/**
+	 * Particle-smoke ambient effect using canvas.
+	 * Under `hextech`: slow blue-mist dots, precise motion.
+	 * Under `arcane`: pink/violet shimmer drift, chaotic.
+	 * Parent must have `position: relative`. Renders `aria-hidden`.
+	 *
+	 * @example
+	 * <div style="position: relative;">
+	 *   <ShimmerCloud />
+	 *   content
+	 * </div>
+	 */
+	interface Props {
+		/** Particle count. */
+		count?: number;
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let { count = 28, class: className = '' }: Props = $props();
+
+	const prefersReduced =
+		typeof window !== 'undefined'
+			? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+			: false;
+
+	let canvas: HTMLCanvasElement | undefined = $state();
+	let rafId: number | undefined;
+
+	type Particle = {
+		x: number;
+		y: number;
+		r: number;
+		vx: number;
+		vy: number;
+		alpha: number;
+		alphaDir: number;
+		alphaSpeed: number;
+	};
+
+	function getRegister(): string {
+		if (typeof document === 'undefined') return '';
+		return document.body.dataset.register ?? '';
+	}
+
+	function getParticleColor(register: string): string {
+		if (register === 'hextech') return '93, 217, 240';
+		if (register === 'arcane') return '184, 69, 201';
+		return '199, 156, 87';
+	}
+
+	function getParticleColorB(register: string): string {
+		// Second color for arcane (two-color particles add richness)
+		if (register === 'arcane') return '233, 76, 188';
+		return getParticleColor(register);
+	}
+
+	onMount(() => {
+		if (prefersReduced || !canvas) return;
+
+		const ctx = canvas.getContext('2d');
+		if (!ctx) return;
+
+		let particles: Particle[] = [];
+
+		function resize() {
+			if (!canvas || !canvas.parentElement) return;
+			const { width, height } = canvas.parentElement.getBoundingClientRect();
+			canvas.width = width;
+			canvas.height = height;
+		}
+
+		function spawn(): Particle {
+			const w = canvas?.width ?? 400;
+			const h = canvas?.height ?? 300;
+			const register = getRegister();
+			const fast = register === 'arcane';
+			return {
+				x: Math.random() * w,
+				y: Math.random() * h,
+				r: 1 + Math.random() * (fast ? 3 : 2),
+				vx: (Math.random() - 0.5) * (fast ? 0.45 : 0.2),
+				vy: -(Math.random() * (fast ? 0.5 : 0.3) + 0.05),
+				alpha: Math.random() * 0.3,
+				alphaDir: 1,
+				alphaSpeed: 0.003 + Math.random() * (fast ? 0.008 : 0.004)
+			};
+		}
+
+		resize();
+		particles = Array.from({ length: count }, spawn);
+
+		const ro = new ResizeObserver(resize);
+		if (canvas.parentElement) ro.observe(canvas.parentElement);
+
+		let io_visible = true;
+		const io = new IntersectionObserver((entries) => {
+			io_visible = entries[0]?.isIntersecting ?? true;
+		});
+		io.observe(canvas);
+
+		function draw() {
+			if (!ctx || !canvas) return;
+			const register = getRegister();
+			const colorA = getParticleColor(register);
+			const colorB = getParticleColorB(register);
+
+			ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+			if (io_visible) {
+				particles.forEach((p, i) => {
+					// breathing alpha
+					p.alpha += p.alphaDir * p.alphaSpeed;
+					if (p.alpha >= (register === 'arcane' ? 0.38 : 0.22)) p.alphaDir = -1;
+					if (p.alpha <= 0.02) p.alphaDir = 1;
+
+					// drift
+					p.x += p.vx;
+					p.y += p.vy;
+
+					// wrap
+					if (p.y < -10) p.y = canvas.height + 10;
+					if (p.x < -10) p.x = canvas.width + 10;
+					if (p.x > canvas.width + 10) p.x = -10;
+
+					const color = i % 2 === 0 ? colorA : colorB;
+					ctx.beginPath();
+					ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+					ctx.fillStyle = `rgba(${color}, ${p.alpha})`;
+					ctx.fill();
+				});
+			}
+
+			rafId = requestAnimationFrame(draw);
+		}
+
+		rafId = requestAnimationFrame(draw);
+
+		return () => {
+			if (rafId !== undefined) cancelAnimationFrame(rafId);
+			ro.disconnect();
+			io.disconnect();
+		};
+	});
+</script>
+
+<canvas
+	bind:this={canvas}
+	class={cn('hyvui-shimmer-cloud', className)}
+	aria-hidden="true"
+></canvas>
+
+<style>
+	.hyvui-shimmer-cloud {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+		opacity: 0.7;
+	}
+
+	:global([data-register='hextech']) .hyvui-shimmer-cloud {
+		opacity: 0.55;
+	}
+
+	:global([data-register='arcane']) .hyvui-shimmer-cloud {
+		opacity: 0.85;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-shimmer-cloud {
+			display: none;
+		}
+	}
+</style>

package/dist/components/ambient/ShimmerCloud.svelte.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Particle-smoke ambient effect using canvas.
+ * Under `hextech`: slow blue-mist dots, precise motion.
+ * Under `arcane`: pink/violet shimmer drift, chaotic.
+ * Parent must have `position: relative`. Renders `aria-hidden`.
+ *
+ * @example
+ * <div style="position: relative;">
+ *   <ShimmerCloud />
+ *   content
+ * </div>
+ */
+interface Props {
+    /** Particle count. */
+    count?: number;
+    /** Additional CSS classes. */
+    class?: string;
+}
+declare const ShimmerCloud: import("svelte").Component<Props, {}, "">;
+type ShimmerCloud = ReturnType<typeof ShimmerCloud>;
+export default ShimmerCloud;