@heyramzi/ui 0.0.0-stage → 1.53.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/magnetic/magnetic.ts

@@ -0,0 +1,81 @@
+import type { Action } from "svelte/action";
+
+export type MagneticOptions = {
+  /** How far the element travels, as a fraction of the pointer offset. */
+  intensity?: number;
+  /** Radius the pointer has to be inside, in px. */
+  range?: number;
+  /** What arms the pull: the element itself, or its parent. */
+  from?: "self" | "parent";
+  /** Return time, in ms. */
+  duration?: number;
+};
+
+const EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
+
+/**
+ * Pulls an element toward the pointer while it is inside `range`.
+ * Port of motion-primitives' `Magnetic` with a CSS transition instead of a spring.
+ */
+export const magnetic: Action<HTMLElement, MagneticOptions | undefined> = (node, options) => {
+  let intensity = options?.intensity ?? 0.6;
+  let range = options?.range ?? 100;
+  let from = options?.from ?? "self";
+  let duration = options?.duration ?? 350;
+  let armed = false;
+
+  // WHY: the pull is a hover affordance with no state behind it, so reduced-motion
+  // gets a no-op rather than a shorter version of the same movement.
+  const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
+
+  const zone = () => (from === "parent" ? (node.parentElement ?? node) : node);
+
+  const reset = () => {
+    node.style.transition = `translate ${duration}ms ${EASE}`;
+    node.style.translate = "0px 0px";
+  };
+
+  const onMove = (event: PointerEvent) => {
+    if (!armed || reduced.matches) return;
+    const rect = node.getBoundingClientRect();
+    const dx = event.clientX - (rect.left + rect.width / 2);
+    const dy = event.clientY - (rect.top + rect.height / 2);
+    const distance = Math.hypot(dx, dy);
+    if (distance > range) return reset();
+    const falloff = intensity * (1 - distance / range);
+    node.style.transition = "translate 0ms";
+    node.style.translate = `${dx * falloff}px ${dy * falloff}px`;
+  };
+
+  const arm = () => (armed = true);
+  const disarm = () => {
+    armed = false;
+    reset();
+  };
+
+  let target = zone();
+  target.addEventListener("pointerenter", arm);
+  target.addEventListener("pointerleave", disarm);
+  document.addEventListener("pointermove", onMove);
+
+  return {
+    update(next) {
+      intensity = next?.intensity ?? 0.6;
+      range = next?.range ?? 100;
+      duration = next?.duration ?? 350;
+      const nextFrom = next?.from ?? "self";
+      if (nextFrom === from) return;
+      target.removeEventListener("pointerenter", arm);
+      target.removeEventListener("pointerleave", disarm);
+      from = nextFrom;
+      target = zone();
+      target.addEventListener("pointerenter", arm);
+      target.addEventListener("pointerleave", disarm);
+    },
+    destroy() {
+      target.removeEventListener("pointerenter", arm);
+      target.removeEventListener("pointerleave", disarm);
+      document.removeEventListener("pointermove", onMove);
+    },
+  };
+};

package/src/effects/marquee/Marquee.css

@@ -0,0 +1,78 @@
+.marquee {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gap, 1rem);
+  overflow: hidden;
+  padding: 0.5rem;
+}
+.marquee--vertical {
+  flex-direction: column;
+}
+.marquee__track {
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+  justify-content: space-around;
+  gap: var(--gap, 1rem);
+  animation: marquee-x var(--duration, 40s) linear var(--marquee-delay, 0s) infinite;
+}
+.marquee--vertical .marquee__track {
+  flex-direction: column;
+  animation-name: marquee-y;
+}
+.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;
+}
+.marquee[data-paused] .marquee__track {
+  animation-play-state: paused;
+}
+@keyframes marquee-x {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(calc(-100% - var(--gap, 1rem)));
+  }
+}
+@keyframes marquee-y {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(calc(-100% - var(--gap, 1rem)));
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .marquee__track {
+    animation: none;
+  }
+}