@heyramzi/ui 0.0.0-stage → 1.53.0

package/src/effects/reveal/reveal.css

@@ -0,0 +1,141 @@
+/* Reveal engine shared by InView, AnimatedGroup and TextEffect. */
+/* Preset geometry from motion-primitives (MIT); timing from @heyramzi/ui/design. */
+
+.hr-reveal {
+  --hr-reveal-name: hr-reveal-fade;
+  --hr-reveal-play: paused;
+  --hr-reveal-duration: var(--duration-slow, 400ms);
+  --hr-reveal-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+  --hr-reveal-stagger: var(--duration-stagger, 40ms);
+  --hr-reveal-delay: 0ms;
+  --hr-reveal-distance: 20px;
+  --hr-reveal-blur: 12px;
+  --hr-reveal-scale: 0.9;
+}
+
+/* WHY: every knob is an inherited custom property, so one attribute on the root
+   drives the root itself and every descendant item without a paired selector. */
+.hr-reveal[data-reveal="in"] {
+  --hr-reveal-play: running;
+}
+
+.hr-reveal__item {
+  --i: 0;
+  animation-name: var(--hr-reveal-name);
+  animation-duration: var(--hr-reveal-duration);
+  animation-timing-function: var(--hr-reveal-ease);
+  animation-fill-mode: both;
+  animation-play-state: var(--hr-reveal-play);
+  animation-delay: calc(var(--hr-reveal-delay) + var(--i) * var(--hr-reveal-stagger));
+}
+
+.hr-reveal[data-preset="fade"] {
+  --hr-reveal-name: hr-reveal-fade;
+}
+.hr-reveal[data-preset="slide"] {
+  --hr-reveal-name: hr-reveal-slide;
+}
+.hr-reveal[data-preset="blur"] {
+  --hr-reveal-name: hr-reveal-blur;
+}
+.hr-reveal[data-preset="blur-slide"] {
+  --hr-reveal-name: hr-reveal-blur-slide;
+}
+.hr-reveal[data-preset="scale"] {
+  --hr-reveal-name: hr-reveal-scale;
+}
+.hr-reveal[data-preset="zoom"] {
+  --hr-reveal-name: hr-reveal-zoom;
+  --hr-reveal-ease: var(--ease-smooth-out);
+}
+
+@keyframes hr-reveal-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes hr-reveal-slide {
+  from {
+    opacity: 0;
+    transform: translateY(var(--hr-reveal-distance));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes hr-reveal-blur {
+  from {
+    opacity: 0;
+    filter: blur(var(--hr-reveal-blur));
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+@keyframes hr-reveal-blur-slide {
+  from {
+    opacity: 0;
+    filter: blur(var(--hr-reveal-blur));
+    transform: translateY(var(--hr-reveal-distance));
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+    transform: translateY(0);
+  }
+}
+@keyframes hr-reveal-scale {
+  from {
+    opacity: 0;
+    transform: scale(var(--hr-reveal-scale));
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes hr-reveal-zoom {
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Segment spans TextEffect emits; per-char needs the space kept and the box laid out. */
+.hr-reveal__segment {
+  display: inline-block;
+  white-space: pre;
+}
+.hr-reveal__segment--line {
+  display: block;
+  white-space: normal;
+}
+.hr-reveal__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hr-reveal__item {
+    animation: none;
+    opacity: 1;
+    filter: none;
+    transform: none;
+  }
+}

package/src/effects/reveal/types.ts

@@ -0,0 +1,32 @@
+/** Entrance geometry. Names match motion-primitives so a port reads the same. */
+export type RevealPreset = "fade" | "slide" | "blur" | "blur-slide" | "scale" | "zoom";
+
+/** How TextEffect cuts its string before staggering the pieces. */
+export type RevealPer = "char" | "word" | "line";
+
+export type RevealTiming = {
+  /** Preset geometry. Default `fade`. */
+  preset?: RevealPreset;
+  /** Wait before the first item starts, in ms. */
+  delay?: number;
+  /** Gap between consecutive items, in ms. Defaults to `--duration-stagger`. */
+  stagger?: number;
+  /** One item's run time, in ms. Defaults to `--duration-slow`. */
+  duration?: number;
+};
+
+export type RevealViewOptions = {
+  /** Play once and stay revealed, instead of replaying on every re-entry. */
+  once?: boolean;
+  /** Fraction of the element that must be visible before it plays. */
+  amount?: number;
+  /** `rootMargin` for the observer, e.g. `"0px 0px -15% 0px"`. */
+  margin?: string;
+};
+
+export type InViewActionOptions = RevealViewOptions & {
+  /** Called when the node enters the viewport. */
+  onEnter?: () => void;
+  /** Called when the node leaves the viewport. Only fires when `once` is false. */
+  onLeave?: () => void;
+};

package/src/effects/shader-gradient/ShaderGradient.svelte

@@ -0,0 +1,227 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import { untrack } from "svelte";
+	import { cn } from "@heyramzi/utils";
+	import { resolveColor } from "./color.js";
+	import {
+		createShaderGradientRenderer,
+		type ShaderGradientRenderer,
+	} from "./renderer.js";
+	import type {
+		ShaderGradientProps,
+		ShaderGradientUniforms,
+	} from "./types.js";
+
+	// =========================
+	// PROPS
+	// =========================
+	// The defaults are the shadergradient.co plane preset, so an instance with no
+	// props renders the reference field.
+	let {
+		class: className,
+		color1 = "#ff5005",
+		color2 = "#dbba95",
+		color3 = "#d0bce1",
+		bgColor = "#000000",
+		animate = true,
+		brightness = 1.2,
+		cAzimuthAngle = 180,
+		cPolarAngle = 90,
+		cDistance = 3.6,
+		fov = 45,
+		positionX = -1.4,
+		positionY = 0,
+		positionZ = 0,
+		rotationX = 0,
+		rotationY = 10,
+		rotationZ = 50,
+		uDensity = 1.3,
+		uSpeed = 0.4,
+		uStrength = 4,
+		uTime = 0,
+		grain = true,
+		grainRadius = 2,
+		pixelDensity = 1,
+	}: ShaderGradientProps = $props();
+
+	// =========================
+	// STATE
+	// =========================
+	let wrapperEl = $state<HTMLDivElement | null>(null);
+	let canvasEl = $state<HTMLCanvasElement | null>(null);
+	let renderer = $state<ShaderGradientRenderer | null>(null);
+	let sizeVersion = $state(0);
+	let isVisible = $state(false);
+	let tabActive = $state(true);
+	let reducedMotion = $state(false);
+	let failed = $state(false);
+	let retriedContext = false;
+
+	/**
+	 * Seconds of noise travel, held across pauses the way three's Clock does. uTime is
+	 * the starting offset only: the clock owns the value from the first frame on.
+	 */
+	let elapsed = untrack(() => uTime);
+
+	// =========================
+	// DERIVED
+	// =========================
+	// A gradient nobody can see is a GPU running for nothing, so the loop stops when
+	// the section scrolls away or the tab goes to the background.
+	let running = $derived(isVisible && tabActive && animate && !reducedMotion);
+
+	let uniforms = $derived<ShaderGradientUniforms>({
+		color1: resolveColor(color1, wrapperEl),
+		color2: resolveColor(color2, wrapperEl),
+		color3: resolveColor(color3, wrapperEl),
+		bgColor: resolveColor(bgColor, wrapperEl),
+		brightness,
+		cAzimuthAngle,
+		cPolarAngle,
+		cDistance,
+		fov,
+		positionX,
+		positionY,
+		positionZ,
+		rotationX,
+		rotationY,
+		rotationZ,
+		uDensity,
+		uSpeed,
+		uStrength,
+		grain,
+		grainRadius,
+	});
+
+	// =========================
+	// EFFECTS
+	// =========================
+	$effect(() => {
+		if (!wrapperEl) return;
+
+		const observer = new IntersectionObserver(([entry]) => (isVisible = entry.isIntersecting), {
+			threshold: 0,
+		});
+		observer.observe(wrapperEl);
+
+		return () => observer.disconnect();
+	});
+
+	$effect(() => {
+		const onVisibility = () => (tabActive = document.visibilityState === "visible");
+		document.addEventListener("visibilitychange", onVisibility);
+
+		const motion = window.matchMedia("(prefers-reduced-motion: reduce)");
+		reducedMotion = motion.matches;
+		const onMotion = () => (reducedMotion = motion.matches);
+		motion.addEventListener("change", onMotion);
+
+		return () => {
+			document.removeEventListener("visibilitychange", onVisibility);
+			motion.removeEventListener("change", onMotion);
+		};
+	});
+
+	// The context is built once per canvas, so changing a color or an angle never
+	// costs a new one.
+	$effect(() => {
+		const canvas = canvasEl;
+		const wrapper = wrapperEl;
+		if (!canvas || !wrapper) return;
+
+		// A device with no WebGL, or a driver that rejects the program, drops the canvas and leaves whatever the section paints behind it.
+
+		// A hero must not go blank over a background effect.
+		let created: ShaderGradientRenderer | null = null;
+		try {
+			created = createShaderGradientRenderer(canvas);
+		} catch (error) {
+			console.error(error);
+		}
+		if (!created) {
+			failed = true;
+			return;
+		}
+
+		const instance = created;
+		const scale = Math.min(pixelDensity, window.devicePixelRatio || 1);
+		const resize = new ResizeObserver(() => {
+			const rect = wrapper.getBoundingClientRect();
+			instance.setSize(rect.width * scale, rect.height * scale);
+			sizeVersion += 1;
+		});
+		resize.observe(wrapper);
+
+		/*
+		 * A browser keeps a small number of WebGL contexts, around a dozen and a half in Chrome, and drops the oldest to make room.
+		 */
+
+		/*
+		 * A page carrying several fields can cross that line, and a driver can reset one at any time on its own.
+		 */
+
+		/*
+		 * The canvas is opaque, so a lost context is a black rectangle, which is worse than no field at all.
+		 */
+
+		/*
+		 * Dropping the canvas puts the section back on its own background, and one retry covers the reset that was nobody's fault.
+		 */
+		const onLost = (event: Event) => {
+			event.preventDefault();
+			failed = true;
+			if (retriedContext) return;
+			retriedContext = true;
+			setTimeout(() => (failed = false), 1000);
+		};
+		canvas.addEventListener("webglcontextlost", onLost);
+		renderer = instance;
+
+		return () => {
+			renderer = null;
+			canvas.removeEventListener("webglcontextlost", onLost);
+			resize.disconnect();
+			instance.destroy();
+		};
+	});
+
+	// One frame per prop change while paused, a loop while running.
+	$effect(() => {
+		const instance = renderer;
+		const current = uniforms;
+		const isRunning = running;
+		void sizeVersion;
+		if (!instance) return;
+
+		let frame = 0;
+		let previous = 0;
+
+		const draw = (now: number) => {
+			if (isRunning) {
+				elapsed += previous ? (now - previous) / 1000 : 0;
+				previous = now;
+				frame = requestAnimationFrame(draw);
+			}
+			instance.render(current, elapsed);
+		};
+
+		frame = requestAnimationFrame(draw);
+
+		return () => cancelAnimationFrame(frame);
+	});
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<div
+	bind:this={wrapperEl}
+	class={cn("hr-shader-gradient relative overflow-hidden", className)}
+	aria-hidden="true"
+>
+	{#if !failed}
+		<canvas bind:this={canvasEl} class="block size-full"></canvas>
+	{/if}
+</div>

package/src/effects/shader-gradient/color.ts

@@ -0,0 +1,44 @@
+type Rgb = [number, number, number];
+
+let probe: CanvasRenderingContext2D | null | undefined;
+
+function getProbe() {
+  if (probe !== undefined) return probe;
+  probe = document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+  return probe;
+}
+
+/**
+ * Any CSS color to a 0..1 RGB triplet, `var(--token)` included.
+ */
+
+/*
+ * The values go through a 1x1 canvas rather than a hand-written parser because the brand palette is authored in oklch, and the canvas gives the browser's own conversion for every
+ */
+
+/*
+ * color space it supports instead of a second implementation that has to keep up.
+ */
+export function resolveColor(input: string, scope: Element | null): Rgb {
+  const fallback: Rgb = [0, 0, 0];
+  if (typeof document === "undefined") return fallback;
+
+  let value = input.trim();
+  const token = /^var\(\s*(--[\w-]+)\s*(?:,\s*([\s\S]+))?\)$/.exec(value);
+  if (token) {
+    const resolved = getComputedStyle(scope ?? document.documentElement)
+      .getPropertyValue(token[1])
+      .trim();
+    value = resolved || token[2]?.trim() || "";
+  }
+  if (!value) return fallback;
+
+  const context = getProbe();
+  if (!context) return fallback;
+
+  context.fillStyle = value;
+  context.clearRect(0, 0, 1, 1);
+  context.fillRect(0, 0, 1, 1);
+  const [r, g, b] = context.getImageData(0, 0, 1, 1).data;
+  return [r / 255, g / 255, b / 255];
+}

package/src/effects/shader-gradient/index.ts

@@ -0,0 +1,5 @@
+export { default as ShaderGradient } from "./ShaderGradient.svelte";
+export type {
+  ShaderGradientProps,
+  ShaderGradientUniforms,
+} from "./types.js";