@heyramzi/ui 7.0.0 → 8.1.0

package/src/effects/interactive-hover-button/InteractiveHoverButton.svelte

@@ -0,0 +1,338 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import { ArrowRight } from "phosphor-svelte";
+
+// =========================
+// TYPES
+// =========================
+type Props = {
+	href?: string;
+	/** `submit` posts the form the button sits in. */
+	type?: "button" | "submit";
+	disabled?: boolean;
+	size?: "default" | "md" | "sm";
+	tone?: "ink" | "coral";
+	beam?: boolean;
+	dot?: boolean;
+	class?: string;
+	onclick?: (event: MouseEvent) => void;
+	children: import("svelte").Snippet;
+};
+
+// =========================
+// PROPS
+// =========================
+let { href, type = "button", disabled = false, size = "default", tone = "ink", beam = true, dot = true, class: className, onclick, children }: Props = $props();
+
+// =========================
+// DERIVED
+// =========================
+let classes = $derived(
+	[
+		"cta-hover",
+		size === "md" && "cta-hover--md",
+		size === "sm" && "cta-hover--sm",
+		tone === "coral" && "cta-hover--coral",
+		!beam && "cta-hover--no-beam",
+		!dot && "cta-hover--no-dot",
+		className,
+	]
+		.filter(Boolean)
+		.join(" "),
+);
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+{#if href}
+	<a {href} {onclick} class={classes}>
+		<span class="cta-hover__resting">
+			{#if dot}<span class="cta-hover__dot"></span>{/if}
+			<span class="cta-hover__label">{@render children()}</span>
+			{#if !dot}<ArrowRight class="cta-hover__arrow cta-hover__arrow--inline" weight="bold" />{/if}
+		</span>
+		{#if dot}
+			<span class="cta-hover__reveal" aria-hidden="true">
+				<span class="cta-hover__label">{@render children()}</span>
+				<ArrowRight class="cta-hover__arrow" weight="bold" />
+			</span>
+		{/if}
+	</a>
+{:else}
+	<button {type} {disabled} {onclick} class={classes}>
+		<span class="cta-hover__resting">
+			{#if dot}<span class="cta-hover__dot"></span>{/if}
+			<span class="cta-hover__label">{@render children()}</span>
+			{#if !dot}<ArrowRight class="cta-hover__arrow cta-hover__arrow--inline" weight="bold" />{/if}
+		</span>
+		{#if dot}
+			<span class="cta-hover__reveal" aria-hidden="true">
+				<span class="cta-hover__label">{@render children()}</span>
+				<ArrowRight class="cta-hover__arrow" weight="bold" />
+			</span>
+		{/if}
+	</button>
+{/if}
+
+<!-- =========================== -->
+<!-- STYLE -->
+<!-- =========================== -->
+<style>
+	@keyframes rotate-chime {
+		from {
+			transform: translate(-50%, -50%) rotate(0deg);
+		}
+		to {
+			transform: translate(-50%, -50%) rotate(360deg);
+		}
+	}
+
+	.cta-hover {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		height: 44px;
+		padding: 0 24px;
+		border-radius: var(--radius-lg, 8px);
+		font-family: var(--font-sans);
+		font-size: 14px;
+		font-weight: 550;
+		letter-spacing: -0.01em;
+		cursor: pointer;
+		overflow: hidden;
+		background: transparent;
+		color: var(--color-background);
+		text-decoration: none;
+		will-change: transform;
+		transition: transform var(--duration-quick) var(--ease-smooth-out);
+	}
+
+	/* Spinning gradient circle, clipped by overflow:hidden to button shape */
+	.cta-hover::before {
+		content: "";
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: max(200%, 150px);
+		aspect-ratio: 1;
+		border-radius: 50%;
+		background: conic-gradient(
+			transparent 0deg,
+			transparent 220deg,
+			oklch(0.65 0.20 30) 280deg,
+			oklch(0.82 0.10 30) 320deg,
+			transparent 360deg
+		);
+		transform: translate(-50%, -50%);
+		animation: rotate-chime 5s linear infinite;
+		pointer-events: none;
+		z-index: 0;
+		transition: opacity var(--duration-fast) var(--ease-smooth-out);
+	}
+
+	:global(.dark) .cta-hover::before {
+		background: conic-gradient(
+			transparent 0deg,
+			transparent 220deg,
+			oklch(0.78 0.08 40) 280deg,
+			oklch(0.88 0.04 40) 320deg,
+			transparent 360deg
+		);
+	}
+
+	/* Inner fill: leaves 1.5px border gap showing the spinning gradient */
+	.cta-hover::after {
+		content: "";
+		position: absolute;
+		inset: 1.5px;
+		border-radius: calc(var(--radius-lg, 8px) - 1.5px);
+		background: var(--color-foreground);
+		z-index: 1;
+		pointer-events: none;
+	}
+
+	/* 40px, between 44px and 32px, for a CTA in a condensed bar. 32px is too
+	   small to read as the main action, so only the label shrinks, to 13px. */
+	.cta-hover--md {
+		height: 40px;
+		padding: 0 24px;
+		font-size: 13px;
+	}
+
+	.cta-hover--md .cta-hover__dot {
+		width: 7px;
+		height: 7px;
+	}
+
+	.cta-hover--sm {
+		height: 32px;
+		padding: 0 20px;
+		font-size: 13px;
+	}
+
+	.cta-hover--sm .cta-hover__dot {
+		width: 6px;
+		height: 6px;
+	}
+
+	.cta-hover--no-beam::before {
+		display: none;
+	}
+
+	.cta-hover--no-beam {
+		background: var(--color-foreground);
+	}
+
+	/* No-dot variant: arrow inline, shifts right on hover */
+	:global(.cta-hover__arrow--inline) {
+		width: 14px;
+		height: 14px;
+		flex-shrink: 0;
+		transition: transform var(--duration-quick) var(--ease-smooth-out);
+	}
+
+	@media (hover: hover) and (pointer: fine) {
+		.cta-hover--no-dot:hover :global(.cta-hover__arrow--inline) {
+			transform: translateX(3px);
+		}
+	}
+
+	.cta-hover:active {
+		transform: scale(0.97);
+	}
+
+	/* In flight: the label still reads, the button stops answering. */
+	.cta-hover:disabled {
+		opacity: 0.7;
+		cursor: default;
+	}
+
+	.cta-hover:disabled:active {
+		transform: none;
+	}
+
+	/* The CTA shipped with no focus ring. This is shadcn's ring-3 ring-ring/50,
+	   written as a box-shadow because this component is plain CSS. */
+	.cta-hover:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-ring) 50%, transparent);
+	}
+
+	.cta-hover__resting {
+		position: relative;
+		z-index: 2;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 8px;
+		width: 100%;
+		transition: opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out);
+	}
+
+	/* terra-600, not terra-400: the dot becomes the hover fill under a cream
+	   label, and cream on terra-400 is 3.24:1. It works in both themes. */
+	.cta-hover__dot {
+		width: 8px;
+		height: 8px;
+		border-radius: 50%;
+		background: var(--color-terra-600);
+		flex-shrink: 0;
+		transition: transform var(--duration-fast) var(--ease-smooth-out);
+	}
+
+	.cta-hover__label {
+		white-space: nowrap;
+		transition:
+			transform var(--duration-fast) var(--ease-smooth-out),
+			opacity var(--duration-fast) var(--ease-smooth-out);
+	}
+
+	.cta-hover__reveal {
+		position: absolute;
+		inset: 0;
+		z-index: 3;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 8px;
+		opacity: 0;
+		transform: translateX(48px);
+		transition:
+			transform var(--duration-fast) var(--ease-smooth-out),
+			opacity var(--duration-fast) var(--ease-smooth-out);
+		/* The reveal label always lands on the terra-600 dot fill, where cream
+		   clears AA at button-label sizes. */
+		color: var(--color-brand-cream);
+		pointer-events: none;
+	}
+
+	:global(.cta-hover__arrow) {
+		width: 16px;
+		height: 16px;
+		flex-shrink: 0;
+	}
+
+	/* Coral fill, heavier than the ink default. It comes after the .dark rules
+	   so one set of colors covers both themes. */
+	.cta-hover--coral {
+		/* Cream label on terra-600: on terra-400 it's 3.24:1 and fails AA. */
+		color: var(--color-brand-cream);
+	}
+
+	.cta-hover--coral::after {
+		background: var(--color-terra-600);
+	}
+
+	.cta-hover--coral.cta-hover--no-beam {
+		background: var(--color-terra-600);
+	}
+
+	.cta-hover--coral::before,
+	:global(.dark) .cta-hover--coral::before {
+		background: conic-gradient(
+			transparent 0deg,
+			transparent 220deg,
+			var(--color-brand-cream) 280deg,
+			var(--color-terra-200) 320deg,
+			transparent 360deg
+		);
+	}
+
+	/* Ink dot on coral, so hover turns the button black under a cream label
+	   instead of washing it out to cream. */
+	.cta-hover--coral .cta-hover__dot,
+	:global(.dark) .cta-hover--coral .cta-hover__dot {
+		background: var(--color-brand-ink);
+	}
+
+	@media (hover: hover) and (pointer: fine) {
+		.cta-hover:hover::before {
+			opacity: 0;
+		}
+
+		.cta-hover:hover .cta-hover__dot {
+			transform: scale(100);
+		}
+
+		.cta-hover:not(.cta-hover--no-dot):hover .cta-hover__resting .cta-hover__label {
+			transform: translateX(48px);
+			opacity: 0;
+		}
+
+		.cta-hover:not(.cta-hover--no-dot):hover .cta-hover__reveal {
+			opacity: 1;
+			transform: translateX(-4px);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.cta-hover::before {
+			animation: none;
+			opacity: 0;
+		}
+	}
+</style>

package/src/effects/magic-card/MagicCard.css

@@ -0,0 +1,47 @@
+/* The glow and the hover edge read `--magic-card-glow`, so a caller picks the
+   brand colour with a class: `[--magic-card-glow:var(--brand-accent)]`. */
+.magic-card {
+  transition:
+    border-color 300ms ease,
+    box-shadow 300ms ease;
+}
+
+.magic-card:hover {
+  border-color: color-mix(in oklch, var(--magic-card-glow, var(--color-primary)) 30%, var(--color-border));
+  box-shadow: 0 0 0 1px color-mix(in oklch, var(--magic-card-glow, var(--color-primary)) 8%, transparent);
+}
+
+.magic-card:focus-within {
+  outline: 2px solid var(--magic-card-glow, var(--color-primary));
+  outline-offset: 2px;
+}
+
+.magic-card__glow {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 300ms ease;
+  background: radial-gradient(
+    var(--magic-card-radius, 500px) circle at var(--magic-card-x, 50%) var(--magic-card-y, 50%),
+    color-mix(
+        in oklch,
+        var(--magic-card-glow, var(--color-primary)) var(--magic-card-strength, 6%),
+        transparent
+      )
+      0%,
+    transparent 40%
+  );
+}
+
+.magic-card:hover .magic-card__glow {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .magic-card,
+  .magic-card__glow {
+    transition: none;
+  }
+}

package/src/effects/magic-card/MagicCard.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import "./MagicCard.css";
+	import { cn } from "@heyramzi/utils";
+	import type { Snippet } from "svelte";
+
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		children: Snippet;
+		/** Draw the pointer-following glow. Off leaves the frosted card and the hover edge. */
+		glow?: boolean;
+		/** Glow radius in px. */
+		radius?: number;
+		class?: string;
+		/** Classes for the padded box around the children. */
+		contentClass?: string;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let { children, glow = true, radius = 500, class: className, contentClass }: Props = $props();
+
+	// =========================
+	// FUNCTIONS
+	// =========================
+	function handlePointerMove(event: PointerEvent) {
+		const card = event.currentTarget as HTMLElement;
+		const rect = card.getBoundingClientRect();
+		card.style.setProperty("--magic-card-x", `${event.clientX - rect.left}px`);
+		card.style.setProperty("--magic-card-y", `${event.clientY - rect.top}px`);
+	}
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<div
+	role="group"
+	onpointermove={glow ? handlePointerMove : undefined}
+	style:--magic-card-radius="{radius}px"
+	class={cn(
+		"magic-card relative overflow-hidden rounded-lg border border-border/50 bg-card/85 shadow-xs backdrop-blur-md [--magic-card-strength:6%] dark:border-border/40 dark:bg-card/70 dark:[--magic-card-strength:10%]",
+		className,
+	)}
+>
+	{#if glow}
+		<div class="magic-card__glow" aria-hidden="true"></div>
+	{/if}
+	<div class={cn("relative z-[1] p-6", contentClass)}>
+		{@render children()}
+	</div>
+</div>

package/src/effects/marquee/Marquee.css

@@ -14,7 +14,7 @@
   flex-shrink: 0;
   justify-content: space-around;
   gap: var(--gap, 1rem);
-  animation: marquee-x var(--duration, 40s) linear infinite;
+  animation: marquee-x var(--duration, 40s) linear var(--marquee-delay, 0s) infinite;
 }
 .marquee--vertical .marquee__track {
   flex-direction: column;
@@ -23,6 +23,32 @@
 .marquee__track--reverse {
   animation-direction: reverse;
 }
+.marquee[data-overflow-only] {
+  width: fit-content;
+  max-width: 100%;
+  padding: 0;
+}
+.marquee[data-still] .marquee__track {
+  animation: none;
+}
+.marquee[data-fade] {
+  mask-image: linear-gradient(
+    to right,
+    transparent,
+    black var(--marquee-fade),
+    black calc(100% - var(--marquee-fade)),
+    transparent
+  );
+}
+.marquee--vertical[data-fade] {
+  mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    black var(--marquee-fade),
+    black calc(100% - var(--marquee-fade)),
+    transparent
+  );
+}
 .marquee[data-pause-hover]:hover .marquee__track {
   animation-play-state: paused;
 }

package/src/effects/marquee/Marquee.svelte

@@ -18,6 +18,18 @@
 		repeat?: number;
 		duration?: string;
 		gap?: string;
+		/** Scroll speed in px/s. Sets the loop time from the measured track, and wins over `duration`. */
+		speed?: number;
+		/** Fades both ends along the scroll axis. Any CSS length, such as `16px` or `13%`. */
+		fade?: string;
+		/** Waits this many ms before the first scroll starts. */
+		delay?: number;
+		/**
+		 * Scrolls only while the content is longer than the box, for a line of text with a max width.
+		 * The box shrinks to its content, drops its padding, and shows one still copy when it fits.
+		 */
+		overflowOnly?: boolean;
+		style?: string;
 	}
 
 	// =========================
@@ -32,6 +44,11 @@
 		repeat = 4,
 		duration,
 		gap,
+		speed,
+		fade,
+		delay,
+		overflowOnly = false,
+		style,
 	}: MarqueeProps = $props();
 
 	// =========================
@@ -40,6 +57,9 @@
 	let rootEl = $state<HTMLDivElement | null>(null);
 	let isVisible = $state(true);
 	let tabActive = $state(true);
+	let boxSize = $state(0);
+	let trackSize = $state(0);
+	let gapSize = $state(0);
 
 	// =========================
 	// DERIVED
@@ -48,10 +68,27 @@
 	// background-tab marquee stops burning paint/compositor budget.
 	let paused = $derived(!isVisible || !tabActive);
 
+	// WHY: the 0.5px slack absorbs the rounding between a fractional text width and its box.
+	let overflowing = $derived(trackSize > boxSize + 0.5);
+	let still = $derived(overflowOnly && !overflowing);
+	// WHY: two copies loop seamlessly once one copy is wider than the box.
+	let copies = $derived(overflowOnly ? (overflowing ? 2 : 1) : repeat);
+	let loopSeconds = $derived(
+		speed && trackSize > 0 ? (trackSize + gapSize) / speed : undefined,
+	);
+
 	// WHY: only emit the CSS vars that were passed as props, so a consumer can
 	// still override timing or spacing with a `[--duration:24s]` utility class.
 	let styleVars = $derived(
-		[duration && `--duration:${duration}`, gap && `--gap:${gap}`].filter(Boolean).join(";"),
+		[
+			loopSeconds ? `--duration:${loopSeconds}s` : duration && `--duration:${duration}`,
+			gap && `--gap:${gap}`,
+			fade && `--marquee-fade:${fade}`,
+			delay && `--marquee-delay:${delay}ms`,
+			style,
+		]
+			.filter(Boolean)
+			.join(";"),
 	);
 
 	// =========================
@@ -69,6 +106,27 @@
 		return () => observer.disconnect();
 	});
 
+	$effect(() => {
+		const firstTrack = rootEl?.firstElementChild;
+		if (!rootEl || !firstTrack || !(speed || overflowOnly)) return;
+		const root = rootEl;
+		const measure = () => {
+			const computed = getComputedStyle(root);
+			const box = root.getBoundingClientRect();
+			const track = firstTrack.getBoundingClientRect();
+			const padStart = parseFloat(vertical ? computed.paddingTop : computed.paddingLeft) || 0;
+			const padEnd = parseFloat(vertical ? computed.paddingBottom : computed.paddingRight) || 0;
+			boxSize = (vertical ? box.height : box.width) - padStart - padEnd;
+			trackSize = vertical ? track.height : track.width;
+			gapSize = parseFloat(vertical ? computed.rowGap : computed.columnGap) || 0;
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(root);
+		observer.observe(firstTrack);
+		return () => observer.disconnect();
+	});
+
 	$effect(() => {
 		const onVisibility = () => {
 			tabActive = document.visibilityState === "visible";
@@ -87,9 +145,15 @@
 	style={styleVars}
 	data-pause-hover={pauseOnHover ? "" : undefined}
 	data-paused={paused ? "" : undefined}
+	data-overflow-only={overflowOnly ? "" : undefined}
+	data-still={still ? "" : undefined}
+	data-fade={fade && !still ? "" : undefined}
 >
-	{#each Array(repeat).fill(0) as _, i (i)}
-		<div class={cn("marquee__track", reverse && "marquee__track--reverse")}>
+	{#each Array(copies).fill(0) as _, i (i)}
+		<div
+			class={cn("marquee__track", reverse && "marquee__track--reverse")}
+			aria-hidden={i > 0 ? "true" : undefined}
+		>
 			{@render children?.()}
 		</div>
 	{/each}

package/src/effects/reveal/index.ts

@@ -1,10 +1,11 @@
 export { default as InView } from "./InView.svelte";
 export { default as AnimatedGroup } from "./AnimatedGroup.svelte";
 export { default as TextEffect } from "./TextEffect.svelte";
-export { observeInView } from "./observe.js";
+export { observeInView, onInView } from "./observe.js";
 export type {
   RevealPreset,
   RevealPer,
   RevealTiming,
   RevealViewOptions,
+  InViewActionOptions,
 } from "./types.js";

package/src/effects/reveal/observe.test.ts

@@ -0,0 +1,60 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";
+import { onInView } from "./observe.js";
+
+type Callback = (entries: { isIntersecting: boolean }[]) => void;
+
+let callbacks: Callback[] = [];
+
+class FakeObserver {
+  constructor(callback: Callback) {
+    callbacks.push(callback);
+  }
+  observe() {}
+  disconnect() {}
+}
+
+function fire(isIntersecting: boolean) {
+  for (const callback of callbacks) callback([{ isIntersecting }]);
+}
+
+describe("onInView", () => {
+  beforeEach(() => {
+    callbacks = [];
+    vi.stubGlobal("IntersectionObserver", FakeObserver);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("calls onEnter once when the node first shows", () => {
+    const onEnter = vi.fn();
+    onInView(document.createElement("div"), { onEnter });
+    fire(true);
+    fire(true);
+    expect(onEnter).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls onLeave only after an enter, and only when once is off", () => {
+    const onEnter = vi.fn();
+    const onLeave = vi.fn();
+    onInView(document.createElement("div"), { once: false, onEnter, onLeave });
+    fire(false);
+    expect(onLeave).not.toHaveBeenCalled();
+    fire(true);
+    fire(false);
+    fire(true);
+    expect(onEnter).toHaveBeenCalledTimes(2);
+    expect(onLeave).toHaveBeenCalledTimes(1);
+  });
+
+  it("reads the callbacks from the latest update", () => {
+    const first = vi.fn();
+    const second = vi.fn();
+    const action = onInView(document.createElement("div"), { onEnter: first });
+    action?.update?.({ onEnter: second });
+    fire(true);
+    expect(first).not.toHaveBeenCalled();
+    expect(second).toHaveBeenCalledTimes(1);
+  });
+});