@orvui/vue 0.0.0-stage → 0.1.1

package/src/motion/range-slider/src/RulerSlider.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, watch } from "vue";
+import { animate, motion, useMotionValue } from "motion-v";
+import { useReducedMotion } from "../../../lib/composables";
+import { cn } from "../../../lib/utils";
+import { snapSliderValue, useSlider, type SliderOptions } from "./useSlider";
+const props = withDefaults(defineProps<SliderOptions & { gap?: number; majorEvery?: number; unit?: string }>(), { gap: 14, majorEvery: 5 });
+const emit = defineEmits(["update:modelValue", "change", "valueCommit"]);
+const decimals = computed(() => String(props.step ?? 1).split(".")[1]?.length ?? 0);
+const options = new Proxy(props, { get(target, key) { if (key !== "formatValueText") return Reflect.get(target, key); return props.formatValueText ?? (props.unit ? (value: number) => `${value.toFixed(decimals.value)} ${props.unit}` : undefined); } });
+const { current, min, max, step, commit, sliderRef, sliderProps } = useSlider(options, emit);
+const reduced = useReducedMotion();
+const intervals = computed(() => Number(((max.value - min.value) / step.value).toFixed(6)));
+const maxOffset = computed(() => intervals.value * props.gap);
+const ticks = computed(() => { const full = Math.floor(intervals.value); const rows = Array.from({ length: Math.min(full + 1, 10000) }, (_, index) => ({ value: Number((min.value + index * step.value).toFixed(6)), major: index % props.majorEvery === 0, offset: index * props.gap })); if (intervals.value > full) rows.push({ value: max.value, major: true, offset: maxOffset.value }); return rows; });
+const x = useMotionValue(-(current.value - min.value) / step.value * props.gap);
+let moving = false;
+let held = false;
+let revision = 0;
+let animation: ReturnType<typeof animate> | undefined;
+const unsubscribe = x.on("change", offset => { if (moving) commit(min.value - offset / props.gap * step.value); });
+watch([current, min, step, () => props.gap], ([value, minimum, increment, gap]) => { if (!moving) x.set(-(value - minimum) / increment * gap); });
+function snap() { const value = snapSliderValue(min.value - x.get() / props.gap * step.value, min.value, max.value, step.value); const offset = -(value - min.value) / step.value * props.gap; animation?.stop(); const version = ++revision; if (reduced.value) { x.set(offset); moving = false; } else animation = animate(x, offset, { type: "spring", stiffness: 500, damping: 40, mass: .6, onComplete: () => { if (version === revision) moving = false; } }); }
+function start() { ++revision; moving = true; held = true; animation?.stop(); }
+function end() { held = false; if (reduced.value) snap(); }
+function momentumEnd() { if (!held) snap(); }
+function key(event: KeyboardEvent) { x.stop(); ++revision; moving = false; held = false; sliderProps.value.onKeydown(event); }
+onBeforeUnmount(() => { ++revision; unsubscribe(); animation?.stop(); });
+</script>
+<template><div ref="sliderRef" v-bind="sliderProps" @keydown="key" :class="cn('relative w-full touch-none select-none overflow-hidden rounded-2xl outline-none ring-foreground/30 focus-visible:ring-4', disabled ? 'pointer-events-none opacity-50' : 'cursor-grab active:cursor-grabbing')"><div class="pointer-events-none flex items-baseline justify-center gap-1 pb-3 pt-1"><span class="text-3xl font-semibold tabular-nums text-foreground">{{ current.toFixed(decimals) }}</span><span v-if="unit" class="text-sm text-muted-foreground">{{ unit }}</span></div><div class="relative h-12 [mask-image:linear-gradient(to_right,transparent,black_18%,black_82%,transparent)]"><motion.div :drag="disabled ? false : 'x'" :drag-constraints="{ left: -maxOffset, right: 0 }" :drag-elastic=".03" :drag-momentum="!reduced" :drag-transition="{ power: .22, timeConstant: 320 }" @drag-start="start" @drag-end="end" @drag-transition-end="momentumEnd" :style="{ x, marginLeft: `${-gap / 2}px`, width: `${maxOffset + gap}px` }" class="absolute inset-y-0 left-1/2"><span v-for="tick in ticks" :key="tick.value" class="absolute bottom-0 flex -translate-x-1/2 flex-col items-center pb-[18px]" :style="{ left: `${tick.offset + gap / 2}px` }"><span :class="cn('w-px rounded-full', tick.major ? 'h-7 bg-foreground/70' : 'h-3.5 bg-foreground/45')" /><span v-if="tick.major" class="absolute bottom-0 whitespace-nowrap text-[10px] tabular-nums text-muted-foreground">{{ tick.value }}</span></span></motion.div><div class="pointer-events-none absolute bottom-5 left-1/2 -translate-x-1/2"><span class="block h-9 w-[3px] rounded-full bg-foreground" /></div></div></div></template>

package/src/motion/range-slider/src/WaveSlider.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { motion } from "motion-v";
+import { useReducedMotion } from "../../../lib/composables";
+import { cn } from "../../../lib/utils";
+import { useSlider, type SliderOptions } from "./useSlider";
+const props = withDefaults(defineProps<SliderOptions & { bars?: number }>(), { bars: 32 });
+const emit = defineEmits(["update:modelValue", "change", "valueCommit"]);
+const { percent, dragging, trackRef, sliderRef, trackProps, sliderProps } = useSlider(props, emit);
+const reduced = useReducedMotion();
+const lanes = computed(() => { const center = percent.value / 100 * (props.bars - 1); return Array.from({ length: props.bars }, (_, index) => { const distance = Math.abs(index - center); return { index, distance, height: Math.exp(-.5 * (distance / 2.6) ** 2), filled: index <= Math.round(center) }; }); });
+</script>
+<template><div ref="trackRef" v-bind="trackProps" :class="cn('relative flex h-20 w-full touch-none items-center justify-between gap-1 select-none', disabled ? 'pointer-events-none opacity-50' : 'cursor-grab active:cursor-grabbing')"><motion.span v-for="lane in lanes" :key="lane.index" :class="cn('h-14 flex-1 origin-center rounded-full', lane.filled ? 'bg-foreground' : 'bg-foreground/45')" :animate="{ scaleY: reduced ? .4 : .22 + lane.height * (dragging ? .78 : .6) }" :transition="reduced ? { duration: 0 } : { type: 'spring', stiffness: 420, damping: 20, mass: .5, delay: Math.min(lane.distance * .012, .12) }" /><button ref="sliderRef" type="button" v-bind="sliderProps" class="absolute inset-0 touch-none rounded-xl outline-none ring-foreground/30 focus-visible:ring-4" /></div></template>

package/src/motion/range-slider/src/api-types.ts

@@ -0,0 +1,19 @@
+// Vue public prop types, derived from the actual components.
+export type BubbleSliderProps = InstanceType<
+  (typeof import("./BubbleSlider.vue"))["default"]
+>["$props"];
+export type FluidSliderProps = InstanceType<
+  (typeof import("./FluidSlider.vue"))["default"]
+>["$props"];
+export type InlineSliderProps = InstanceType<
+  (typeof import("./InlineSlider.vue"))["default"]
+>["$props"];
+export type RangeSliderProps = InstanceType<
+  (typeof import("./RangeSlider.vue"))["default"]
+>["$props"];
+export type RulerSliderProps = InstanceType<
+  (typeof import("./RulerSlider.vue"))["default"]
+>["$props"];
+export type WaveSliderProps = InstanceType<
+  (typeof import("./WaveSlider.vue"))["default"]
+>["$props"];

package/src/motion/range-slider/src/inline-state.ts

@@ -0,0 +1,44 @@
+import { computed, onBeforeUnmount, ref, watch, type Ref } from "vue";
+import { animate, useMotionValue, useTransform } from "motion-v";
+import { SPRING_GLIDE } from "../../../lib/ease";
+import { snapSliderValue, useSlider, type SliderOptions } from "./useSlider";
+import { observeSliderGeometry } from "./visual-state";
+export function useInlineSlider(props: SliderOptions & { showTicks: boolean }, emit: (...args: any[]) => void, reduced: Ref<boolean>) {
+  const precision = computed(() => (props.step ?? 1).toFixed(6).replace(/0+$/, "").split(".")[1]?.length ?? 0);
+  const options = new Proxy(props, { get: (target, key) => key === "step" ? 10 ** -precision.value : Reflect.get(target, key) });
+  const slider = useSlider(options, emit);
+  const labelRef = ref<HTMLElement | null>(null);
+  const readoutRef = ref<HTMLElement | null>(null);
+  const geometry = ref({ width: 292, labelWidth: 22, readoutWidth: 24 });
+  const width = useMotionValue(292);
+  const labelWidth = useMotionValue(22);
+  const readoutWidth = useMotionValue(24);
+  observeSliderGeometry(() => [slider.trackRef.value, labelRef.value, readoutRef.value], () => { const track = slider.trackRef.value; if (!track || !labelRef.value || !readoutRef.value) return; const measured = track.getBoundingClientRect().width; if (!measured) return; const bounds = { width: measured, labelWidth: labelRef.value.getBoundingClientRect().width, readoutWidth: readoutRef.value.getBoundingClientRect().width }; geometry.value = bounds; width.set(bounds.width); labelWidth.set(bounds.labelWidth); readoutWidth.set(bounds.readoutWidth); });
+  const endX = computed(() => Math.max(8, geometry.value.width - 12));
+  const stops = computed(() => { const step = props.step && props.step > 0 ? props.step : 1; const values = Array.from(new Set(Array.from({ length: 10 }, (_, index) => snapSliderValue(slider.min.value + index / 9 * (slider.max.value - slider.min.value), slider.min.value, slider.max.value, step)))); return values.map((value, index) => ({ value, x: values.length === 1 ? 8 : 8 + index / (values.length - 1) * (endX.value - 8) })); });
+  function map(point: number, from: "x" | "value", to: "x" | "value") { const rows = stops.value; const index = rows.findIndex(stop => stop[from] >= point); const upper = rows[index < 0 ? rows.length - 1 : index]; const lower = rows[Math.max(0, index - 1)]; return lower[from] === upper[from] ? upper[to] : lower[to] + (point - lower[from]) / (upper[from] - lower[from]) * (upper[to] - lower[to]); }
+  const restingX = computed(() => map(slider.current.value, "value", "x"));
+  const handleX = useMotionValue(restingX.value);
+  const dragging = ref(false);
+  let animation: ReturnType<typeof animate> | undefined;
+  let frame = 0;
+  let pending: number | undefined;
+  let gesture: { id: number; element: HTMLElement; left: number; offset: number; x: number } | undefined;
+  function settle(target: number) { animation?.stop(); if (reduced.value) handleX.jump(target); else animation = animate(handleX, target, { type: "spring", ...SPRING_GLIDE }); }
+  watch(restingX, value => { if (!gesture) settle(value); });
+  const fillX = useTransform(() => { const x = handleX.get(); const w = width.get(); return (x >= Math.max(8, w - 12) ? w - 2 : x + 8) - w + 2; });
+  const split = useTransform(() => { const x = handleX.get(); const w = width.get(); const overlap = (start: number, end: number) => Math.max(0, Math.min(1, (x + 4 - start) / 6, (end - x) / 6)); return Math.max(overlap(20, 20 + labelWidth.get()), overlap(w - 20 - readoutWidth.get(), w - 20)); });
+  const stemOpacity = useTransform(split, value => 1 - value);
+  const capTop = useTransform(split, value => -value);
+  const capBottom = useTransform(split, value => value);
+  const ticks = computed(() => props.showTicks ? stops.value.map(stop => stop.x).filter(x => !(x + 2 >= 20 && x - 2 <= 20 + geometry.value.labelWidth) && !(x + 2 >= geometry.value.width - 20 - geometry.value.readoutWidth && x - 2 <= geometry.value.width - 20)) : []);
+  function cancelQueue() { cancelAnimationFrame(frame); frame = 0; pending = undefined; }
+  function queue(value: number) { pending = value; if (frame) return; frame = requestAnimationFrame(() => { frame = 0; if (pending !== undefined) slider.commit(pending); pending = undefined; }); }
+  function down(event: PointerEvent) { if (props.disabled || event.button !== 0 || gesture) return; const element = event.currentTarget as HTMLElement; const bounds = element.getBoundingClientRect(); if (!bounds.width) return; event.preventDefault(); const point = event.clientX - bounds.left; const thumb = handleX.get(); gesture = { id: event.pointerId, element, left: bounds.left, offset: Math.abs(point - thumb - 2) <= 12 ? point - thumb : 2, x: thumb }; dragging.value = true; handleX.stop(); cancelQueue(); try { element.setPointerCapture(event.pointerId); } catch {} slider.sliderRef.value?.focus({ preventScroll: true }); }
+  function move(event: PointerEvent) { if (!gesture || gesture.id !== event.pointerId || props.disabled) return; const point = Math.max(8, Math.min(endX.value, event.clientX - gesture.left - gesture.offset)); gesture.x = point; handleX.set(point); queue(map(point, "x", "value")); }
+  function release() { const current = gesture; gesture = undefined; if (current) try { if (current.element.hasPointerCapture(current.id)) current.element.releasePointerCapture(current.id); } catch {} return current; }
+  function end(event: PointerEvent) { if (!gesture || gesture.id !== event.pointerId) return; const current = release()!; cancelQueue(); dragging.value = false; if (!props.disabled && geometry.value.width > 0) { const point = event.type === "pointerup" ? event.clientX - current.left - current.offset : current.x; const stop = stops.value.reduce((nearest, candidate) => Math.abs(candidate.x - point) < Math.abs(nearest.x - point) ? candidate : nearest); slider.commit(stop.value); emit("valueCommit", stop.value); settle(props.modelValue === undefined ? stop.x : restingX.value); } else settle(restingX.value); }
+  function key(event: KeyboardEvent) { if (props.disabled) return; const higher = stops.value.find(stop => stop.value > slider.current.value)?.value ?? slider.max.value; const lower = stops.value.slice().reverse().find(stop => stop.value < slider.current.value)?.value ?? slider.min.value; const keys: Record<string, number> = { ArrowRight: higher, ArrowUp: higher, ArrowLeft: lower, ArrowDown: lower, Home: slider.min.value, End: slider.max.value, PageUp: slider.max.value, PageDown: slider.min.value }; if (!(event.key in keys)) return; event.preventDefault(); slider.commit(keys[event.key]); emit("valueCommit", keys[event.key]); }
+  onBeforeUnmount(() => { release(); animation?.stop(); handleX.stop(); cancelQueue(); });
+  return { ...slider, labelRef, readoutRef, dragging, handleX, fillX, stemOpacity, capTop, capBottom, ticks, down, move, end, key };
+}

package/src/motion/range-slider/src/useSlider.ts

@@ -0,0 +1,104 @@
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { useMotionState } from "../../state";
+import { resolveElement } from "../../../lib/composables";
+
+const bounded = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
+const precise = (value: number) => Number(value.toFixed(6));
+
+/** The upper endpoint is legal even when it is between regular grid points. */
+export function snapSliderValue(next: number, min: number, max: number, step: number): number {
+  if (max <= min) return min;
+  if (!(step > 0)) return bounded(next, min, max);
+  const count = Math.floor(precise((max - min) / step));
+  const nearby = Math.min(count, Math.max(0, Math.round((next - min) / step)));
+  const grid = precise(min + nearby * step);
+  return precise(Math.abs(max - next) <= Math.abs(grid - next) ? max : grid);
+}
+export interface SliderOptions {
+  modelValue?: number;
+  defaultValue?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  ariaLabel?: string;
+  formatValueText?: (value: number) => string;
+}
+export function useSlider(props: SliderOptions, emit: (...args: any[]) => void) {
+  const value = useMotionState(props, emit, "modelValue", props.defaultValue ?? 0);
+  const min = computed(() => props.min ?? 0);
+  const max = computed(() => Math.max(min.value, props.max ?? 100));
+  const step = computed(() => props.step && props.step > 0 ? props.step : 1);
+  const current = computed(() => bounded(value.value, min.value, max.value));
+  const percent = computed(() => max.value === min.value ? 0 : 100 * (current.value - min.value) / (max.value - min.value));
+  const dragging = ref(false);
+  const trackRef = ref<HTMLElement | null>(null), sliderRef = ref<HTMLElement | null>(null);
+  let capture: { element: HTMLElement; pointer: number } | null = null;
+  function commit(request: number) {
+    if (!props.disabled) value.value = snapSliderValue(request, min.value, max.value, step.value);
+  }
+  function atPointer(event: PointerEvent) {
+    const bounds = resolveElement<HTMLElement>(trackRef.value)?.getBoundingClientRect();
+    if (!bounds?.width) return;
+    const fraction = bounded((event.clientX - bounds.left) / bounds.width, 0, 1);
+    commit(min.value + fraction * (max.value - min.value));
+  }
+  function releaseCapture() {
+    const previous = capture;
+    capture = null;
+    if (previous) {
+      try { previous.element.releasePointerCapture(previous.pointer); } catch { /* Detached or already released. */ }
+    }
+  }
+  function finish() {
+    if (!dragging.value) return;
+    dragging.value = false;
+    releaseCapture();
+    emit("valueCommit", current.value);
+  }
+  function begin(event: PointerEvent) {
+    if (props.disabled || event.button !== 0 || dragging.value) return;
+    const element = event.currentTarget as HTMLElement;
+    capture = { element, pointer: event.pointerId };
+    dragging.value = true;
+    try { element.setPointerCapture(event.pointerId); } catch { /* Capture is optional for synthetic events. */ }
+    resolveElement<HTMLElement>(sliderRef.value)?.focus({ preventScroll: true });
+    atPointer(event);
+  }
+  function move(event: PointerEvent) {
+    if (dragging.value && !props.disabled && event.pointerId === capture?.pointer) atPointer(event);
+  }
+  function end(event: PointerEvent) {
+    if (!capture || event.pointerId === capture.pointer) finish();
+  }
+  function key(event: KeyboardEvent) {
+    if (props.disabled) return;
+    let request: number;
+    switch (event.key) {
+      case "Home": request = min.value; break;
+      case "End": request = max.value; break;
+      case "ArrowRight": case "ArrowUp": request = current.value + step.value; break;
+      case "ArrowLeft": case "ArrowDown": request = current.value - step.value; break;
+      case "PageUp": request = current.value + 10 * step.value; break;
+      case "PageDown": request = current.value - 10 * step.value; break;
+      default: return;
+    }
+    event.preventDefault();
+    commit(request);
+    emit("valueCommit", current.value);
+  }
+  watch(() => props.disabled, disabled => {
+    if (!disabled) return;
+    dragging.value = false;
+    releaseCapture();
+  });
+  onBeforeUnmount(() => { dragging.value = false; releaseCapture(); });
+  const trackProps = { onPointerdown: begin, onPointermove: move, onPointerup: end, onPointercancel: end, onLostpointercapture: end };
+  const sliderProps = computed(() => ({
+    role: "slider", tabindex: props.disabled ? -1 : 0,
+    "aria-label": props.ariaLabel, "aria-valuemin": min.value, "aria-valuemax": max.value,
+    "aria-valuenow": current.value, "aria-valuetext": props.formatValueText?.(current.value),
+    "aria-disabled": props.disabled || undefined, onKeydown: key,
+  }));
+  return { value, current, percent, dragging, min, max, step, commit, trackRef, sliderRef, trackProps, sliderProps };
+}

package/src/motion/range-slider/src/visual-state.ts

@@ -0,0 +1,18 @@
+import { onBeforeUnmount, onMounted, watch, type Ref } from "vue";
+import { useMotionValue, useMotionValueEvent, useSpring } from "motion-v";
+import { SPRING_GLIDE } from "../../../lib/ease";
+export function useSliderMotion(percent: Ref<number>, reduced: Ref<boolean>) {
+  const target = useMotionValue(percent.value);
+  const spring = useSpring(target, SPRING_GLIDE);
+  const position = useMotionValue(percent.value);
+  watch(percent, value => target.set(value));
+  useMotionValueEvent(target, "change", value => { if (reduced.value) position.set(value); });
+  useMotionValueEvent(spring, "change", value => { if (!reduced.value) position.set(value); });
+  watch(reduced, value => position.jump(value ? target.get() : spring.get()));
+  return { target, spring, position };
+}
+export function observeSliderGeometry(elements: () => (HTMLElement | null)[], update: () => void) {
+  let observer: ResizeObserver | undefined;
+  onMounted(() => { update(); if (typeof ResizeObserver === "undefined") return; observer = new ResizeObserver(update); for (const element of elements()) if (element) observer.observe(element); });
+  onBeforeUnmount(() => observer?.disconnect());
+}

package/src/motion/scroll-animation/index.ts

@@ -0,0 +1,10 @@
+export { default as SmoothScroll } from "./src/SmoothScroll.vue";
+export { default as ScrollReveal } from "./src/ScrollReveal.vue";
+export { default as ScrollProgress } from "./src/ScrollProgress.vue";
+export { default as Parallax } from "./src/Parallax.vue";
+export { default as ScrollTo } from "./src/ScrollTo.vue";
+
+export type * from "./src/api-types";
+export * from "./src/useSmoothScroll";
+
+export type * from "./src/public-types";

package/src/motion/scroll-animation/src/Parallax.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, type Ref } from "vue";
+import { motion, useMotionValue, useSpring } from "motion-v";
+import { resolveElement, useReducedMotion } from "../../../lib/composables";
+
+const props = withDefaults(defineProps<{
+  speed?: number; axis?: "x" | "y"; container?: HTMLElement | Ref<HTMLElement | null> | null; spring?: boolean;
+}>(), { speed: 0.3, axis: "y", spring: true });
+const reduced = useReducedMotion();
+const element = ref<HTMLElement | null>(null);
+const drift = useMotionValue(props.speed * 100);
+const eased = useSpring(drift, { stiffness: 120, damping: 30, mass: 0.6 });
+const displacement = computed(() => props.spring && !reduced.value ? eased : drift);
+let surface: Window | HTMLElement | undefined;
+let revision = 0, disposed = false;
+function update() {
+  const target = element.value;
+  if (disposed || !target) return;
+  const parent = resolveElement<HTMLElement>(props.container);
+  const bounds = target.getBoundingClientRect(), frame = parent?.getBoundingClientRect();
+  const viewport = parent?.clientHeight ?? window.innerHeight;
+  const top = bounds.top - (frame?.top ?? 0) - (props.axis === "y" ? displacement.value.get() : 0);
+  const progress = Math.min(1, Math.max(0, (viewport - top) / (viewport + bounds.height)));
+  drift.set(props.speed * 100 * (1 - 2 * progress));
+}
+async function bind() {
+  surface?.removeEventListener("scroll", update);
+  const version = ++revision;
+  await nextTick();
+  if (disposed || version !== revision) return;
+  surface = resolveElement<HTMLElement>(props.container) ?? window;
+  surface.addEventListener("scroll", update, { passive: true });
+  update();
+}
+onMounted(() => { void bind(); window.addEventListener("resize", update); });
+watch(() => resolveElement<HTMLElement>(props.container), bind, { flush: "post" });
+watch(() => [props.speed, props.axis, props.spring, reduced.value], update, { flush: "post" });
+onBeforeUnmount(() => {
+  disposed = true; revision += 1;
+  surface?.removeEventListener("scroll", update);
+  window.removeEventListener("resize", update);
+  drift.destroy();
+});
+</script>
+<template>
+  <motion.div :ref="node => element = resolveElement<HTMLElement>(node)"
+    :style="reduced ? {} : axis === 'x' ? { x: displacement } : { y: displacement }"><slot /></motion.div>
+</template>

package/src/motion/scroll-animation/src/ScrollProgress.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, watch } from "vue";
+import { motion, useMotionValue, useSpring, type MotionValue } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { useReducedMotion } from "../../../lib/composables";
+import { useSmoothScroll } from "./useSmoothScroll";
+
+const props = withDefaults(defineProps<{
+  variant?: "bar" | "circle"; progress?: MotionValue<number>; spring?: boolean;
+  position?: "top" | "bottom"; height?: number; fixed?: boolean; size?: number; thickness?: number;
+}>(), { variant: "bar", spring: true, position: "top", height: 2, fixed: true, size: 40, thickness: 3 });
+const reduced = useReducedMotion();
+const fallback = useSmoothScroll().progress;
+const raw = useMotionValue(0);
+const eased = useSpring(raw, { stiffness: 120, damping: 30, mass: 0.6 });
+const value = computed(() => props.spring && !reduced.value ? eased : raw);
+const radius = computed(() => (props.size - props.thickness) / 2);
+const circumference = computed(() => 2 * Math.PI * radius.value);
+const dashOffset = useMotionValue(circumference.value);
+let unsubscribe: (() => void) | undefined;
+function updateDash() { dashOffset.set(circumference.value * (1 - value.value.get())); }
+watch(() => props.progress ?? fallback, source => {
+  unsubscribe?.();
+  raw.set(source.get());
+  unsubscribe = source.on("change", fraction => raw.set(fraction));
+}, { immediate: true });
+const unraw = raw.on("change", updateDash), uneased = eased.on("change", updateDash);
+watch([circumference, value], updateDash, { immediate: true });
+onBeforeUnmount(() => { unsubscribe?.(); unraw(); uneased(); raw.destroy(); dashOffset.destroy(); });
+</script>
+<template>
+  <motion.div v-if="variant === 'bar'" aria-hidden="true" :style="{ height: `${height}px`, scaleX: value }"
+    :class="cn('left-0 right-0 z-50 origin-left bg-foreground', fixed ? 'fixed' : 'absolute', position === 'top' ? 'top-0' : 'bottom-0')" />
+  <svg v-else aria-hidden="true" focusable="false" role="presentation" :width="size" :height="size" :viewBox="`0 0 ${size} ${size}`" class="text-foreground">
+    <circle :cx="size / 2" :cy="size / 2" :r="radius" fill="none" :stroke-width="thickness" class="stroke-current opacity-15" />
+    <motion.circle :cx="size / 2" :cy="size / 2" :r="radius" fill="none" :stroke-width="thickness" stroke-linecap="round"
+      class="stroke-current" :stroke-dasharray="circumference" :style="{ strokeDashoffset: dashOffset }" :transform="`rotate(-90 ${size / 2} ${size / 2})`" />
+  </svg>
+</template>

package/src/motion/scroll-animation/src/ScrollReveal.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, type Ref } from "vue";
+import { motion } from "motion-v";
+import { EASE_OUT } from "../../../lib/ease";
+import { resolveElement, useReducedMotion } from "../../../lib/composables";
+
+const props = withDefaults(defineProps<{
+  y?: number; blur?: number; duration?: number; delay?: number; once?: boolean;
+  amount?: number | "some" | "all"; root?: HTMLElement | Ref<HTMLElement | null> | null;
+}>(), { y: 16, blur: 8, duration: 0.6, delay: 0, once: true, amount: 0.3 });
+const element = ref<HTMLElement | null>(null), visible = ref(false);
+const reduced = useReducedMotion();
+let observer: IntersectionObserver | undefined;
+let version = 0, disposed = false, revealed = false;
+async function observe() {
+  observer?.disconnect();
+  const revision = ++version;
+  await nextTick();
+  const target = element.value;
+  if (disposed || revision !== version || !target || (props.once && revealed)) return;
+  if (typeof IntersectionObserver === "undefined") { visible.value = true; return; }
+  observer = new IntersectionObserver(entries => {
+    if (disposed || revision !== version) return;
+    visible.value = entries.some(entry => entry.target === target && entry.isIntersecting);
+    if (visible.value) { revealed = true; if (props.once) observer?.disconnect(); }
+  }, { root: resolveElement<HTMLElement>(props.root), threshold: props.amount === "all" ? 1 : props.amount === "some" ? 0 : props.amount });
+  observer.observe(target);
+}
+watch(() => [resolveElement<HTMLElement>(props.root), props.amount, props.once], observe, { flush: "post" });
+onMounted(observe);
+onBeforeUnmount(() => { disposed = true; version += 1; observer?.disconnect(); });
+const hidden = computed(() => reduced.value ? { opacity: 0 } : { opacity: 0, y: props.y, filter: `blur(${props.blur}px)` });
+const shown = computed(() => reduced.value ? { opacity: 1 } : { opacity: 1, y: 0, filter: "blur(0px)" });
+</script>
+<template>
+  <motion.div :ref="node => element = resolveElement<HTMLElement>(node)" :initial="hidden"
+    :animate="visible ? shown : hidden" :transition="{ duration, ease: EASE_OUT, delay }"><slot /></motion.div>
+</template>

package/src/motion/scroll-animation/src/ScrollTo.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { useSmoothScroll, type ScrollTarget } from "./useSmoothScroll";
+const props = defineProps<{ to?: ScrollTarget; target?: ScrollTarget; offset?: number; duration?: number; disabled?: boolean }>();
+const scrolling = useSmoothScroll();
+function activate(event: MouseEvent) {
+  if (props.disabled || event.defaultPrevented) return;
+  scrolling.scrollTo(props.to ?? props.target ?? 0, { offset: props.offset, duration: props.duration });
+}
+</script>
+<template><button type="button" :disabled="disabled" @click="activate"><slot /></button></template>

package/src/motion/scroll-animation/src/SmoothScroll.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { provide, ref } from "vue";
+import { createScrollApi, SmoothScrollKey, type SmoothScrollOptions } from "./useSmoothScroll";
+const props = withDefaults(defineProps<SmoothScrollOptions>(), {
+  root: true, lerp: 0.1, duration: 1.2, orientation: "vertical", wheelMultiplier: 1, touch: false, enabled: true,
+});
+const wrapper = ref<HTMLElement | null>(null), content = ref<HTMLElement | null>(null);
+const controller = createScrollApi(props, wrapper, content);
+provide(SmoothScrollKey, controller);
+defineExpose(controller);
+</script>
+<template>
+  <div ref="wrapper"><slot v-if="root" /><div v-else ref="content"><slot /></div></div>
+</template>

package/src/motion/scroll-animation/src/api-types.ts

@@ -0,0 +1,16 @@
+// Vue public prop types, derived from the actual components.
+export type ParallaxProps = InstanceType<
+  (typeof import("./Parallax.vue"))["default"]
+>["$props"];
+export type ScrollProgressProps = InstanceType<
+  (typeof import("./ScrollProgress.vue"))["default"]
+>["$props"];
+export type ScrollRevealProps = InstanceType<
+  (typeof import("./ScrollReveal.vue"))["default"]
+>["$props"];
+export type ScrollToProps = InstanceType<
+  (typeof import("./ScrollTo.vue"))["default"]
+>["$props"];
+export type SmoothScrollProps = InstanceType<
+  (typeof import("./SmoothScroll.vue"))["default"]
+>["$props"];

package/src/motion/scroll-animation/src/public-types.ts

@@ -0,0 +1,9 @@
+import type { ScrollProgressProps } from "./api-types";
+export type ScrollProgressBarProps = Omit<
+  ScrollProgressProps,
+  "variant" | "size" | "thickness"
+>;
+export type ScrollProgressCircleProps = Omit<
+  ScrollProgressProps,
+  "variant" | "position" | "height" | "fixed"
+>;

package/src/motion/scroll-animation/src/useSmoothScroll.ts

@@ -0,0 +1,125 @@
+import { inject, onBeforeUnmount, onMounted, shallowRef, watch, type InjectionKey, type Ref } from "vue";
+import Lenis from "lenis";
+import { useMotionValue, type MotionValue } from "motion-v";
+import { resolveElement, useReducedMotion } from "../../../lib/composables";
+
+export type ScrollTarget = number | string | HTMLElement;
+export type ScrollToOptions = { offset?: number; immediate?: boolean; duration?: number };
+export interface SmoothScrollApi {
+  readonly lenis: Lenis | null;
+  scrollY: MotionValue<number>;
+  progress: MotionValue<number>;
+  velocity: MotionValue<number>;
+  scrollTo(target: ScrollTarget, options?: ScrollToOptions): void;
+}
+export interface SmoothScrollOptions {
+  root?: boolean; lerp?: number; duration?: number; orientation?: "vertical" | "horizontal";
+  wheelMultiplier?: number; touch?: boolean; enabled?: boolean;
+}
+export const SmoothScrollKey: InjectionKey<SmoothScrollApi> = Symbol("orvui-smooth-scroll");
+
+export function createScrollApi(props: SmoothScrollOptions, container?: Ref<HTMLElement | null>, content?: Ref<HTMLElement | null>): SmoothScrollApi {
+  const reduced = useReducedMotion();
+  const engine = shallowRef<Lenis | null>(null);
+  const scrollY = useMotionValue(0), progress = useMotionValue(0), velocity = useMotionValue(0);
+  let mounted = false;
+  let removeListener: (() => void) | undefined;
+  const horizontal = () => props.orientation === "horizontal";
+  function wrapper(): Window | HTMLElement {
+    return props.root === false ? resolveElement<HTMLElement>(container?.value) ?? window : window;
+  }
+  function nativePosition(surface: Window | HTMLElement) {
+    return surface === window
+      ? horizontal() ? window.scrollX : window.scrollY
+      : horizontal() ? (surface as HTMLElement).scrollLeft : (surface as HTMLElement).scrollTop;
+  }
+  function syncNative(surface: Window | HTMLElement) {
+    let last = nativePosition(surface), lastTime = performance.now();
+    const sync = () => {
+      const now = performance.now(), position = nativePosition(surface);
+      const element = surface === window ? document.documentElement : surface as HTMLElement;
+      const extent = horizontal() ? element.scrollWidth : element.scrollHeight;
+      const visible = surface === window ? horizontal() ? window.innerWidth : window.innerHeight
+        : horizontal() ? element.clientWidth : element.clientHeight;
+      scrollY.set(position);
+      progress.set(extent > visible ? position / (extent - visible) : 0);
+      velocity.set((position - last) * 16 / (now - lastTime || 16));
+      last = position;
+      lastTime = now;
+    };
+    sync();
+    surface.addEventListener("scroll", sync, { passive: true });
+    window.addEventListener("resize", sync);
+    return () => { surface.removeEventListener("scroll", sync); window.removeEventListener("resize", sync); };
+  }
+  function clear() {
+    removeListener?.();
+    removeListener = undefined;
+    engine.value?.destroy();
+    engine.value = null;
+  }
+  function configure() {
+    if (!mounted) return;
+    clear();
+    if (reduced.value || props.enabled === false) {
+      removeListener = syncNative(wrapper());
+      return;
+    }
+    const instance = new Lenis({
+      wrapper: props.root === false ? resolveElement<HTMLElement>(container?.value) ?? undefined : undefined,
+      content: props.root === false ? resolveElement<HTMLElement>(content?.value) ?? undefined : undefined,
+      lerp: props.lerp ?? 0.1, duration: props.duration ?? 1.2,
+      orientation: props.orientation ?? "vertical", wheelMultiplier: props.wheelMultiplier ?? 1,
+      smoothWheel: true, syncTouch: props.touch ?? false, autoRaf: true,
+      easing: time => Math.min(1, 1.001 - 2 ** (-10 * time)),
+    });
+    engine.value = instance;
+    const receive = (position: Lenis) => {
+      scrollY.set(position.scroll);
+      progress.set(position.progress);
+      velocity.set(position.velocity);
+    };
+    instance.on("scroll", receive);
+    removeListener = () => instance.off("scroll", receive);
+  }
+  function nativeTarget(target: ScrollTarget, offset: number) {
+    const surface = wrapper();
+    if (typeof target === "number") return target + offset;
+    const scope = surface === window ? document : surface as HTMLElement;
+    let element: HTMLElement | null;
+    try { element = typeof target === "string" ? scope.querySelector<HTMLElement>(target) : target; }
+    catch { return nativePosition(surface); }
+    if (!element) return nativePosition(surface);
+    const bounds = element.getBoundingClientRect();
+    const coordinate = horizontal() ? bounds.left : bounds.top;
+    if (surface === window) return coordinate + nativePosition(surface) + offset;
+    const parentBounds = (surface as HTMLElement).getBoundingClientRect();
+    return coordinate - (horizontal() ? parentBounds.left : parentBounds.top) + nativePosition(surface) + offset;
+  }
+  onMounted(() => { mounted = true; configure(); });
+  watch([
+    reduced, () => props.root, () => props.enabled, () => props.lerp, () => props.duration,
+    () => props.orientation, () => props.wheelMultiplier, () => props.touch,
+    () => container?.value, () => content?.value,
+  ], configure, { flush: "post" });
+  onBeforeUnmount(() => {
+    mounted = false;
+    clear();
+    scrollY.destroy(); progress.destroy(); velocity.destroy();
+  });
+  return {
+    get lenis() { return engine.value; }, scrollY, progress, velocity,
+    scrollTo(target, options) {
+      if (typeof window === "undefined") return;
+      if (engine.value && !reduced.value) { engine.value.scrollTo(target, options); return; }
+      const coordinate = nativeTarget(target, options?.offset ?? 0);
+      wrapper().scrollTo({
+        [horizontal() ? "left" : "top"]: coordinate,
+        behavior: reduced.value || options?.immediate ? "instant" : "smooth",
+      });
+    },
+  };
+}
+export function useSmoothScroll(): SmoothScrollApi {
+  return inject(SmoothScrollKey, null) ?? createScrollApi({ root: true, enabled: false });
+}

package/src/motion/select/index.ts

@@ -0,0 +1,13 @@
+export { default as Select } from "./src/Select.vue";
+export { default as SelectTrigger } from "./src/SelectTrigger.vue";
+export { default as SelectValue } from "./src/SelectValue.vue";
+export { default as SelectContent } from "./src/SelectContent.vue";
+export { default as SelectItem } from "./src/SelectItem.vue";
+
+export { default as MorphSelect } from "./src/MorphSelect.vue";
+export { default as MorphSelectTrigger } from "./src/MorphSelectTrigger.vue";
+export { default as MorphSelectValue } from "./src/MorphSelectValue.vue";
+export { default as MorphSelectContent } from "./src/MorphSelectContent.vue";
+export { default as MorphSelectItem } from "./src/MorphSelectItem.vue";
+
+export type * from "./src/api-types";

package/src/motion/select/src/MorphSelect.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { provide } from "vue";
+import { createSelect, selectKey, type SelectProps } from "./context";
+const props = withDefaults(defineProps<SelectProps>(), { open: undefined });
+const emit = defineEmits([
+  "update:modelValue",
+  "valueChange",
+  "change",
+  "update:open",
+  "openChange",
+]);
+const state = createSelect(props, emit, true);
+provide(selectKey, state);
+const root = state.root;
+</script>
+<template>
+  <div ref="root" :class="['relative', className]">
+    <slot :value="state.value.value" :open="state.open.value" />
+  </div>
+</template>