@hyvnt/hyvui 0.3.0 → 0.4.0

package/dist/components/ambient/EnergyArc.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	/**
+	 * Decorative energy arc (SVG quadratic bezier) between two points.
+	 * Under `hextech`: single clean cyan arc with traveling dot.
+	 * Under `arcane`: violet arc with jitter and brighter particle.
+	 * Parent must have `position: relative`. Renders `aria-hidden`.
+	 *
+	 * @example
+	 * <div style="position: relative; height: 100px;">
+	 *   <EnergyArc x1="10%" y1="100%" x2="90%" y2="100%" bend={-40} />
+	 * </div>
+	 */
+	interface Props {
+		/** Start x (CSS %). */
+		x1?: string;
+		/** Start y (CSS %). */
+		y1?: string;
+		/** End x (CSS %). */
+		x2?: string;
+		/** End y (CSS %). */
+		y2?: string;
+		/** Control point y-offset in px (negative = arc up, positive = arc down). */
+		bend?: number;
+		/** Traveling particle speed in seconds. */
+		speed?: number;
+		/** Enable traveling particle. */
+		animated?: boolean;
+		/** Additional CSS classes. */
+		class?: string;
+	}
+
+	let {
+		x1 = '10%',
+		y1 = '50%',
+		x2 = '90%',
+		y2 = '50%',
+		bend = -32,
+		speed = 2,
+		animated = true,
+		class: className = ''
+	}: Props = $props();
+
+	const prefersReduced =
+		typeof window !== 'undefined'
+			? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+			: false;
+
+	const dur = $derived(`${speed}s`);
+	const durJitter = $derived(`${speed * 1.4}s`);
+	const shouldAnimate = $derived(animated && !prefersReduced);
+
+	// We don't know actual px coords until render, so the bezier control point
+	// is expressed as a data attribute and animated via SVG animateTransform.
+	// For the path `d` we use a placeholder that gets overridden by JS,
+	// but since this is a portoflio component, a CSS-only approximation works:
+	// we anchor a <path> using % units for x/y and em for control offset.
+
+	const filterId = `ea-glow-${Math.random().toString(36).slice(2, 8)}`;
+
+	// Bezier path string: Q cx,cy x2,y2 — control point is midpoint elevated by `bend`
+	// We use computed path as a string and pass it as an attribute.
+	// Since SVG doesn't mix % and px in path d, we keep all in % and treat bend as %.
+	const bendPct = $derived(`${bend}px`);
+
+	// Path using SVG's ability to do absolute coordinates in %. Not directly possible,
+	// so we use a wrapper approach: the SVG has viewBox "0 0 100 100" and we translate %.
+	// Keep it simple: use an SVG with proportional coordinates.
+	// The consumer positions the SVG fill on the parent, so 0 0 100 100 viewBox is fine.
+	const mid = '50%';
+	const path = $derived(`M ${x1} ${y1} Q ${mid} calc(50% + ${bendPct}) ${x2} ${y2}`);
+</script>
+
+<svg class={cn('hyvui-energy-arc', className)} aria-hidden="true">
+	<defs>
+		<filter id={filterId} x="-50%" y="-100%" width="200%" height="300%">
+			<feGaussianBlur stdDeviation="2" result="blur" />
+			<feMerge>
+				<feMergeNode in="blur" />
+				<feMergeNode in="SourceGraphic" />
+			</feMerge>
+		</filter>
+	</defs>
+
+	<!-- glow halo -->
+	<path
+		class="hyvui-ea-halo"
+		d={path}
+		fill="none"
+		stroke-width="5"
+		filter="url(#{filterId})"
+	/>
+
+	<!-- main arc line -->
+	<path
+		class="hyvui-ea-line"
+		d={path}
+		fill="none"
+		stroke-width="1"
+	/>
+
+	<!-- traveling particle -->
+	{#if shouldAnimate}
+		<circle class="hyvui-ea-particle" r="3">
+			<animateMotion dur={dur} repeatCount="indefinite" keyPoints="0;1" keyTimes="0;1" calcMode="linear">
+				<mpath>
+					<path d={path} />
+				</mpath>
+			</animateMotion>
+			<animate
+				attributeName="opacity"
+				values="0;1;1;0"
+				keyTimes="0;0.1;0.85;1"
+				dur={dur}
+				repeatCount="indefinite"
+			/>
+		</circle>
+
+		<!-- arcane gets a second jitter particle traveling opposite direction -->
+		<circle class="hyvui-ea-particle hyvui-ea-particle--jitter" r="2">
+			<animateMotion dur={durJitter} repeatCount="indefinite" keyPoints="1;0" keyTimes="0;1" calcMode="linear">
+				<mpath>
+					<path d={path} />
+				</mpath>
+			</animateMotion>
+			<animate
+				attributeName="opacity"
+				values="0;0.5;0.5;0"
+				keyTimes="0;0.12;0.88;1"
+				dur={durJitter}
+				repeatCount="indefinite"
+			/>
+		</circle>
+	{/if}
+</svg>
+
+<style>
+	.hyvui-energy-arc {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+		overflow: visible;
+	}
+
+	/* ── default (field-notebook) ─────────────────────────────────────── */
+	.hyvui-ea-halo     { stroke: transparent; }
+	.hyvui-ea-line     { stroke: rgba(199, 156, 87, 0.25); }
+	.hyvui-ea-particle { fill: rgba(199, 156, 87, 0.8); }
+	.hyvui-ea-particle--jitter { display: none; }
+
+	/* ── hextech: clean cyan arc, single particle ─────────────────────── */
+	:global([data-register='hextech']) .hyvui-ea-halo {
+		stroke: rgba(93, 217, 240, 0.12);
+	}
+	:global([data-register='hextech']) .hyvui-ea-line {
+		stroke: rgba(93, 217, 240, 0.55);
+	}
+	:global([data-register='hextech']) .hyvui-ea-particle {
+		fill: rgba(184, 230, 242, 1);
+	}
+	:global([data-register='hextech']) .hyvui-ea-particle--jitter {
+		display: none;
+	}
+
+	/* ── arcane: violet arc, bidirectional particles ──────────────────── */
+	:global([data-register='arcane']) .hyvui-ea-halo {
+		stroke: rgba(184, 69, 201, 0.2);
+	}
+	:global([data-register='arcane']) .hyvui-ea-line {
+		stroke: rgba(184, 69, 201, 0.6);
+	}
+	:global([data-register='arcane']) .hyvui-ea-particle {
+		fill: rgba(233, 76, 188, 1);
+	}
+	:global([data-register='arcane']) .hyvui-ea-particle--jitter {
+		display: block;
+		fill: rgba(184, 69, 201, 0.7);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hyvui-ea-particle,
+		.hyvui-ea-particle--jitter {
+			display: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,32 @@
+/**
+ * Decorative energy arc (SVG quadratic bezier) between two points.
+ * Under `hextech`: single clean cyan arc with traveling dot.
+ * Under `arcane`: violet arc with jitter and brighter particle.
+ * Parent must have `position: relative`. Renders `aria-hidden`.
+ *
+ * @example
+ * <div style="position: relative; height: 100px;">
+ *   <EnergyArc x1="10%" y1="100%" x2="90%" y2="100%" bend={-40} />
+ * </div>
+ */
+interface Props {
+    /** Start x (CSS %). */
+    x1?: string;
+    /** Start y (CSS %). */
+    y1?: string;
+    /** End x (CSS %). */
+    x2?: string;
+    /** End y (CSS %). */
+    y2?: string;
+    /** Control point y-offset in px (negative = arc up, positive = arc down). */
+    bend?: number;
+    /** Traveling particle speed in seconds. */
+    speed?: number;
+    /** Enable traveling particle. */
+    animated?: boolean;
+    /** Additional CSS classes. */
+    class?: string;
+}
+declare const EnergyArc: import("svelte").Component<Props, {}, "">;
+type EnergyArc = ReturnType<typeof EnergyArc>;
+export default EnergyArc;

package/dist/components/ambient/GlyphMark.svelte

@@ -1,6 +1,12 @@
 <script lang="ts">
 	import { cn } from '../../utils/cn.js';
 
+	/**
+	 * Decorative SVG glyph. Renders `aria-hidden`.
+	 * @example
+	 * <GlyphMark variant="reticle" size={32} />
+	 * <GlyphMark variant="cross" color="var(--accent)" />
+	 */
 	interface Props {
 		/** Glyph variant. */
 		variant?: 'cross' | 'reticle' | 'coord' | 'mark';

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

@@ -1,3 +1,9 @@
+/**
+ * Decorative SVG glyph. Renders `aria-hidden`.
+ * @example
+ * <GlyphMark variant="reticle" size={32} />
+ * <GlyphMark variant="cross" color="var(--accent)" />
+ */
 interface Props {
     /** Glyph variant. */
     variant?: 'cross' | 'reticle' | 'coord' | 'mark';

package/dist/components/ambient/GridOverlay.svelte

@@ -1,6 +1,14 @@
 <script lang="ts">
 	import { cn } from '../../utils/cn.js';
 
+	/**
+	 * 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/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

@@ -2,6 +2,13 @@
 	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;
@@ -25,7 +32,8 @@
 <style>
 	.hyvui-parallax {
 		will-change: transform;
-		transition: transform 0.15s ease-out;
+		backface-visibility: hidden;
+		transition: transform 0.15s var(--ease-smooth);
 	}
 
 	@media (prefers-reduced-motion: reduce) {

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,6 +1,14 @@
 <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;

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;