trix-ui 0.2.2 → 0.2.4

package/templates/sections/signature-hero.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type SignatureHeroProps = {
+  eyebrow?: string
+  title?: string
+  description?: string
+  primaryCta?: string
+  secondaryCta?: string
+  className?: string
+}
+
+export function SignatureHero({
+  eyebrow = "Signature",
+  title = "Design systems with editorial polish",
+  description = "Layered layouts, refined typography, and restrained motion for premium product experiences.",
+  primaryCta = "Get started",
+  secondaryCta = "View docs",
+  className
+}: SignatureHeroProps) {
+  return (
+    <section
+      className={cn(
+        "relative overflow-hidden rounded-[32px] border border-border bg-background p-8 shadow-[0_30px_80px_-60px_rgba(15,23,42,0.6)] md:p-12",
+        className
+      )}
+    >
+      <div className="absolute inset-0">
+        <div className="absolute -left-24 -top-24 h-64 w-64 rounded-full bg-primary/15 blur-3xl" />
+        <div className="absolute -bottom-24 -right-24 h-72 w-72 rounded-full bg-muted/30 blur-3xl" />
+      </div>
+
+      <div className="relative z-10 grid gap-10 md:grid-cols-[1.2fr_0.8fr]">
+        <div className="space-y-5">
+          <p className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+            {eyebrow}
+          </p>
+          <h1 className="text-3xl font-semibold tracking-tight text-foreground md:text-4xl">
+            {title}
+          </h1>
+          <p className="max-w-xl text-sm text-muted-foreground md:text-base">
+            {description}
+          </p>
+          <div className="flex flex-wrap items-center gap-3 pt-2">
+            <button
+              type="button"
+              className="rounded-full bg-primary px-6 py-2 text-sm font-semibold text-primary-foreground shadow-sm"
+            >
+              {primaryCta}
+            </button>
+            <button
+              type="button"
+              className="rounded-full border border-border px-6 py-2 text-sm font-semibold text-foreground"
+            >
+              {secondaryCta}
+            </button>
+          </div>
+        </div>
+
+        <div className="grid gap-4">
+          {[
+            {
+              label: "Typography",
+              value: "System-led type scales"
+            },
+            {
+              label: "Layout",
+              value: "Adaptive grid + spacing"
+            },
+            {
+              label: "Motion",
+              value: "Subtle, purposeful animations"
+            }
+          ].map((item) => (
+            <div
+              key={item.label}
+              className="rounded-2xl border border-border/60 bg-card/70 p-4 backdrop-blur"
+            >
+              <p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
+                {item.label}
+              </p>
+              <p className="mt-2 text-sm font-semibold text-foreground">
+                {item.value}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/templates/wrappers/Interative-wrapper.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
-import { cn } from "../../lib/utils";
+import { cn } from "@/lib/utils";
 
 type AnyElement = HTMLElement;
 

package/templates/wrappers/progress-wrapper.tsx

@@ -0,0 +1,248 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+type Axis = "y" | "x";
+
+export type ScrollProgressState = {
+  /** 0..1 (clamped if clamp=true) */
+  progress: number;
+  /** Raw (can go <0 or >1 when clamp=false) */
+  rawProgress: number;
+  /** True if any part of the element intersects the viewport */
+  inView: boolean;
+  /** Element rect in viewport coordinates */
+  rect: DOMRect | null;
+};
+
+export interface ScrollProgressWrapProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onProgress"> {
+  /** Render-prop child gets scroll progress state */
+  children: (state: ScrollProgressState) => React.ReactNode;
+
+  /** Scroll axis (default "y") */
+  axis?: Axis;
+
+  /**
+   * When progress should start/end.
+   * - "cover": progress=0 when element just enters, progress=1 when it just leaves (default)
+   * - "contain": progress=0 when element top hits viewport top, progress=1 when bottom hits viewport bottom
+   */
+  mode?: "cover" | "contain";
+
+  /** Clamp progress to 0..1 (default true) */
+  clamp?: boolean;
+
+  /**
+   * Call on every progress change (rAF throttled)
+   * Receives clamped progress.
+   */
+  onProgress?: (progress: number, state: ScrollProgressState) => void;
+
+  /**
+   * Additional offset (px) applied to viewport size.
+   * Useful to trigger earlier/later without rootMargin complexity.
+   * Default 0.
+   */
+  viewportOffset?: number;
+
+  /**
+   * Update frequency control. If true (default), uses requestAnimationFrame while scrolling/resizing.
+   * If false, uses scroll+resize events directly (still throttled by rAF internally).
+   */
+  raf?: boolean;
+
+  /**
+   * Debug overlay (default false)
+   * Shows progress and a small bar.
+   */
+  debug?: boolean;
+}
+
+function clamp01(n: number) {
+  if (n < 0) return 0;
+  if (n > 1) return 1;
+  return n;
+}
+
+function usePrefersReducedMotion(): boolean {
+  const [reduced, setReduced] = React.useState(false);
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const onChange = () => setReduced(media.matches);
+    onChange();
+    media.addEventListener?.("change", onChange);
+    return () => media.removeEventListener?.("change", onChange);
+  }, []);
+
+  return reduced;
+}
+
+/**
+ * ScrollProgressWrap
+ * Exposes element-local scroll progress (0..1) for timelines, progress bars, parallax, etc.
+ */
+export function ScrollProgressWrap({
+  axis = "y",
+  mode = "cover",
+  clamp = true,
+  onProgress,
+  viewportOffset = 0,
+  raf = true,
+  debug = false,
+  className,
+  style,
+  children,
+  ...props
+}: ScrollProgressWrapProps): React.JSX.Element {
+  const ref = React.useRef<HTMLDivElement | null>(null);
+  const reducedMotion = usePrefersReducedMotion();
+
+  const [state, setState] = React.useState<ScrollProgressState>({
+    progress: 0,
+    rawProgress: 0,
+    inView: false,
+    rect: null,
+  });
+
+  const last = React.useRef({
+    progress: Number.NaN,
+    rawProgress: Number.NaN,
+    inView: false,
+  });
+
+  const compute = React.useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const rect = el.getBoundingClientRect();
+
+    // viewport size with optional offset
+    const vw = window.innerWidth + viewportOffset * 2;
+    const vh = window.innerHeight + viewportOffset * 2;
+
+    // shift coordinates if viewportOffset is used (simulate bigger viewport)
+    const top = rect.top - viewportOffset;
+    const left = rect.left - viewportOffset;
+
+    const size = axis === "y" ? rect.height : rect.width;
+    const viewportSize = axis === "y" ? vh : vw;
+    const start = axis === "y" ? top : left;
+    const end = start + size;
+
+    const inView = end > 0 && start < viewportSize;
+
+    let rawProgress: number;
+
+    if (mode === "cover") {
+      // progress from "just entering" (end=0) to "just leaving" (start=viewport)
+      // When element end touches 0 => progress 0
+      // When element start touches viewport => progress 1
+      const denom = size + viewportSize || 1;
+      rawProgress = (viewportSize - start) / denom;
+    } else {
+      // "contain": from top hits viewport top to bottom hits viewport bottom
+      // top=0 => 0, bottom=viewport => 1
+      const denom = Math.max(1, viewportSize - size);
+      rawProgress = (-start) / denom;
+    }
+
+    const progress = clamp ? clamp01(rawProgress) : rawProgress;
+
+    // avoid excessive re-renders
+    const changed =
+      progress !== last.current.progress ||
+      rawProgress !== last.current.rawProgress ||
+      inView !== last.current.inView;
+
+    if (!changed) return;
+
+    last.current = { progress, rawProgress, inView };
+
+    const next: ScrollProgressState = {
+      progress,
+      rawProgress,
+      inView,
+      rect,
+    };
+
+    setState(next);
+    onProgress?.(progress, next);
+  }, [axis, mode, clamp, onProgress, viewportOffset]);
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    // Reduced motion doesn't mean "no updates", but we can still compute normally.
+    // Keeping this here in case you want to short-circuit later:
+    // if (reducedMotion) return;
+
+    let ticking = false;
+
+    const schedule = () => {
+      if (ticking) return;
+      ticking = true;
+      requestAnimationFrame(() => {
+        ticking = false;
+        compute();
+      });
+    };
+
+    // initial
+    schedule();
+
+    const onScroll = () => schedule();
+    const onResize = () => schedule();
+
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onResize);
+
+    // If raf=true, we also keep things smooth during momentum scrolling on some devices
+    // by scheduling repeatedly while the page is scrolling.
+    // We still only update when events fire, but rAF ensures we render at the right time.
+    // (If you want "always-on" tracking, we can add an optional loop mode later.)
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [compute, reducedMotion, raf]);
+
+  return (
+    <div
+      ref={ref}
+      {...props}
+      className={cn("relative", className)}
+      style={style}
+    >
+      {children(state)}
+
+      {debug ? (
+        <div className="pointer-events-none absolute right-3 top-3 z-10 w-36 rounded-xl border border-border/60 bg-background/80 p-3 text-[11px] text-muted-foreground shadow-sm backdrop-blur">
+          <div className="flex items-center justify-between">
+            <span>progress</span>
+            <span className="font-medium text-foreground">
+              {Math.round(state.progress * 100)}%
+            </span>
+          </div>
+          <div className="mt-2 h-2 w-full overflow-hidden rounded-full bg-muted">
+            <div
+              className="h-full bg-foreground"
+              style={{ width: `${clamp01(state.progress) * 100}%` }}
+            />
+          </div>
+          <div className="mt-2 flex items-center justify-between">
+            <span>inView</span>
+            <span className="font-medium text-foreground">
+              {state.inView ? "true" : "false"}
+            </span>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+ScrollProgressWrap.displayName = "ScrollProgressWrap";

package/templates/wrappers/reveal-wrap.tsx

@@ -0,0 +1,136 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+type RevealDirection = "up" | "down" | "left" | "right" | "none"
+
+export interface RevealWrapProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** Reveal only once (default true) */
+  once?: boolean
+
+  /** IntersectionObserver threshold (default 0.2) */
+  threshold?: number
+
+  /** IntersectionObserver rootMargin (default "0px 0px -10% 0px") */
+  rootMargin?: string
+
+  /** Transition delay in ms (default 0) */
+  delay?: number
+
+  /** Transition duration in ms (default 600) */
+  duration?: number
+
+  /** Direction to reveal from (default "up") */
+  direction?: RevealDirection
+
+  /** Offset distance in px (default 18) */
+  distance?: number
+}
+
+function usePrefersReducedMotion(): boolean {
+  const [reduced, setReduced] = React.useState(false)
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return
+    const media = window.matchMedia("(prefers-reduced-motion: reduce)")
+    const onChange = () => setReduced(media.matches)
+    onChange()
+    media.addEventListener?.("change", onChange)
+    return () => media.removeEventListener?.("change", onChange)
+  }, [])
+
+  return reduced
+}
+
+export function RevealWrap({
+  once = true,
+  threshold = 0.2,
+  rootMargin = "0px 0px -10% 0px",
+  delay = 0,
+  duration = 600,
+  direction = "up",
+  distance = 18,
+  className,
+  style,
+  children,
+  ...props
+}: RevealWrapProps): React.JSX.Element {
+  const ref = React.useRef<HTMLDivElement | null>(null)
+  const [visible, setVisible] = React.useState(false)
+  const reducedMotion = usePrefersReducedMotion()
+
+  React.useEffect(() => {
+    if (reducedMotion) {
+      setVisible(true)
+      return
+    }
+
+    const el = ref.current
+    if (!el) return
+
+    if (typeof IntersectionObserver === "undefined") {
+      setVisible(true)
+      return
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0]
+        if (!entry) return
+
+        if (entry.isIntersecting) {
+          setVisible(true)
+          if (once) observer.unobserve(entry.target)
+        } else if (!once) {
+          setVisible(false)
+        }
+      },
+      { threshold, rootMargin }
+    )
+
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [once, threshold, rootMargin, reducedMotion])
+
+  const clampedDistance = Math.max(0, distance)
+  const clampedDuration = Math.max(0, duration)
+  const clampedDelay = Math.max(0, delay)
+
+  const offsetClass =
+    direction === "up"
+      ? "translate-y-[var(--reveal-distance)]"
+      : direction === "down"
+      ? "-translate-y-[var(--reveal-distance)]"
+      : direction === "left"
+      ? "translate-x-[var(--reveal-distance)]"
+      : direction === "right"
+      ? "-translate-x-[var(--reveal-distance)]"
+      : ""
+
+  return (
+    <div
+      ref={ref}
+      {...props}
+      className={cn(
+        "transition-[opacity,transform] ease-out will-change-[opacity,transform]",
+        "motion-reduce:transition-none motion-reduce:transform-none",
+        visible
+          ? "opacity-100 translate-x-0 translate-y-0"
+          : cn("opacity-0", offsetClass),
+        className
+      )}
+      style={{
+        "--reveal-distance": `${clampedDistance}px`,
+        transitionDuration: `${clampedDuration}ms`,
+        transitionDelay: `${clampedDelay}ms`,
+        ...style,
+      } as React.CSSProperties}
+    >
+      {children}
+    </div>
+  )
+}
+
+RevealWrap.displayName = "RevealWrap"