@morphika/andami 0.5.0 → 0.5.2

package/components/blocks/MarqueeBlockRenderer.tsx

@@ -0,0 +1,316 @@
+"use client";
+
+import { useEffect, useId, useRef, useState } from "react";
+import type {
+  MarqueeBlock,
+  MarqueeItem,
+  MarqueeFontSize,
+  MarqueeImageItem,
+} from "../../lib/sanity/types";
+import { useAssetUrl } from "../../lib/contexts/AssetContext";
+import { handleImageRetry } from "../../lib/asset-retry";
+
+/**
+ * Marquee Block — horizontal infinite-scroll ticker.
+ *
+ * Rendering strategy:
+ *   1. Render the items array twice back-to-back (copy A + copy B).
+ *   2. Animate container via CSS @keyframes from translateX(0) to
+ *      translateX(-<copy-width>px). When copy A scrolls fully out of
+ *      view, copy B is exactly where copy A started — seamless loop.
+ *   3. Measure copy-width after mount with a ResizeObserver so the
+ *      loop distance stays accurate when fonts load or items change.
+ *   4. Duration = copyWidth / speed — gives a constant *pixel-per-second*
+ *      rate independent of how many items the user adds.
+ *   5. IntersectionObserver pauses animation when off-screen → zero CPU
+ *      off-screen. Matches Andami's Hobby-tier CPU budget philosophy.
+ *   6. `prefers-reduced-motion`: renders a single static copy, no
+ *      animation, no duplicate.
+ *
+ * Hover effects and enter animations are handled by wrappers one level up
+ * (ScrollAnimationWrapper / HoverAnimationWrapper) — this component only
+ * deals with the marquee itself.
+ */
+
+// ── Font-size scale → rem ─────────────────────────────────────────
+const FONT_SIZE_REM: Record<MarqueeFontSize, number> = {
+  s: 0.875,
+  base: 1,
+  l: 1.25,
+  xl: 1.5,
+  "2xl": 2,
+  "3xl": 3,
+  "4xl": 4.5,
+  "5xl": 6,
+  "6xl": 8,
+};
+
+// ── Props ─────────────────────────────────────────────────────────
+
+export interface MarqueeBlockRendererProps {
+  block: MarqueeBlock;
+  /**
+   * Multiplier applied to the configured speed. The public site uses 1
+   * (the default); the builder's live preview passes 0.3 to show slow
+   * movement without distracting while editing.
+   */
+  speedMultiplier?: number;
+  /**
+   * When true, disables the IntersectionObserver pause — useful in the
+   * builder where the block is always visible inside its own scrollable
+   * canvas and the observer would otherwise report false positives.
+   */
+  alwaysPlay?: boolean;
+}
+
+// ── Helpers ───────────────────────────────────────────────────────
+
+function useReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const update = () => setReduced(mq.matches);
+    update();
+    mq.addEventListener?.("change", update);
+    return () => mq.removeEventListener?.("change", update);
+  }, []);
+  return reduced;
+}
+
+// ── Main component ───────────────────────────────────────────────
+
+export default function MarqueeBlockRenderer({
+  block,
+  speedMultiplier = 1,
+  alwaysPlay = false,
+}: MarqueeBlockRendererProps) {
+  const resolveAsset = useAssetUrl();
+  const reduced = useReducedMotion();
+  const reactId = useId();
+  const animationName = `marquee-${reactId.replace(/[^a-zA-Z0-9]/g, "")}`;
+
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const trackRef = useRef<HTMLDivElement | null>(null);
+  const copyRef = useRef<HTMLDivElement | null>(null);
+  const [copyWidth, setCopyWidth] = useState<number>(0);
+  const [inView, setInView] = useState<boolean>(true);
+
+  const items = block.items ?? [];
+  const direction = block.direction ?? "left";
+  const rawSpeed = block.speed ?? 60;
+  const speed = Math.max(1, rawSpeed * speedMultiplier);
+  const pauseOnHover = block.pause_on_hover !== false;
+
+  // Typography
+  const fontSize = FONT_SIZE_REM[block.font_size ?? "3xl"] ?? FONT_SIZE_REM["3xl"];
+  const fontWeight = block.font_weight ?? "700";
+  const color = block.color ?? "#111111";
+  const textStyle = block.text_style ?? "solid";
+  const letterSpacing = block.letter_spacing ?? 0;
+  const textTransform = block.text_transform ?? "uppercase";
+
+  // Layout
+  const gap = block.gap ?? 48;
+  const rowHeight = block.row_height ?? 120;
+  const paddingY = block.padding_y ?? 16;
+  const backgroundColor = block.background_color || undefined;
+
+  // Measure copy width on mount, resize, and when items change.
+  useEffect(() => {
+    if (reduced || !copyRef.current) return;
+    const el = copyRef.current;
+    const measure = () => setCopyWidth(el.getBoundingClientRect().width);
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [reduced, items.length, gap, rowHeight, fontSize, textStyle]);
+
+  // Pause animation when off-screen.
+  useEffect(() => {
+    if (alwaysPlay || reduced || !rootRef.current) return;
+    const el = rootRef.current;
+    const io = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) setInView(entry.isIntersecting);
+      },
+      { rootMargin: "100px" }
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, [alwaysPlay, reduced]);
+
+  // Duration derived from measured width and configured speed.
+  const durationSec = copyWidth > 0 ? copyWidth / speed : 0;
+
+  // Typography style shared between text + separator items.
+  const textItemStyle: React.CSSProperties = {
+    fontSize: `${fontSize}rem`,
+    fontWeight,
+    color: textStyle === "solid" ? color : "transparent",
+    letterSpacing: `${letterSpacing}em`,
+    textTransform,
+    lineHeight: 1,
+    whiteSpace: "nowrap",
+    fontStyle: textStyle === "italic-outline" ? "italic" : "normal",
+    // Outline via -webkit-text-stroke. Supported in all modern browsers.
+    ...(textStyle !== "solid"
+      ? {
+          WebkitTextStroke: `1px ${color}`,
+        }
+      : {}),
+  };
+
+  const renderItem = (item: MarqueeItem, keyPrefix: string) => {
+    if (item._type === "marqueeText") {
+      return (
+        <span key={`${keyPrefix}-${item._key}`} style={textItemStyle}>
+          {item.text}
+        </span>
+      );
+    }
+    if (item._type === "marqueeSeparator") {
+      return (
+        <span
+          key={`${keyPrefix}-${item._key}`}
+          style={textItemStyle}
+          aria-hidden="true"
+        >
+          {item.character || "•"}
+        </span>
+      );
+    }
+    // marqueeImage
+    const img = item as MarqueeImageItem;
+    const height = rowHeight;
+    const widthStyle: React.CSSProperties = img.width
+      ? { width: `${img.width}px` }
+      : { width: "auto" };
+    const radius = img.border_radius ? `${img.border_radius}px` : undefined;
+    return (
+      /* eslint-disable-next-line @next/next/no-img-element */
+      <img
+        key={`${keyPrefix}-${item._key}`}
+        src={resolveAsset(img.asset_path)}
+        alt={img.alt || ""}
+        onError={handleImageRetry}
+        loading="lazy"
+        decoding="async"
+        style={{
+          height: `${height}px`,
+          ...widthStyle,
+          objectFit: "contain",
+          borderRadius: radius,
+          display: "block",
+          flexShrink: 0,
+        }}
+      />
+    );
+  };
+
+  const renderCopy = (keyPrefix: string, hidden: boolean) => (
+    <div
+      ref={keyPrefix === "a" ? copyRef : undefined}
+      aria-hidden={hidden || undefined}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: `${gap}px`,
+        paddingRight: `${gap}px`, // trailing gap so last→first wrap doesn't collide
+        flexShrink: 0,
+      }}
+    >
+      {items.map((item) => renderItem(item, keyPrefix))}
+    </div>
+  );
+
+  // Graceful empty state — nothing to render.
+  if (items.length === 0) {
+    return (
+      <div
+        style={{
+          height: `${rowHeight + paddingY * 2}px`,
+          backgroundColor,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "#9ca3af",
+          fontSize: "14px",
+          fontFamily: "Inter, system-ui, sans-serif",
+        }}
+      >
+        Empty marquee — add items to get started.
+      </div>
+    );
+  }
+
+  // Reduced motion: render a single static copy, no animation.
+  if (reduced) {
+    return (
+      <div
+        ref={rootRef}
+        role="group"
+        aria-label="Marquee (animation disabled due to reduced-motion preference)"
+        style={{
+          width: "100%",
+          overflow: "hidden",
+          backgroundColor,
+          paddingTop: `${paddingY}px`,
+          paddingBottom: `${paddingY}px`,
+        }}
+      >
+        {renderCopy("a", false)}
+      </div>
+    );
+  }
+
+  const animationPlayState = inView ? "running" : "paused";
+  const animationDirection = direction === "right" ? "reverse" : "normal";
+
+  return (
+    <div
+      ref={rootRef}
+      role="group"
+      aria-label="Marquee"
+      className={pauseOnHover ? "marquee-hoverable" : undefined}
+      style={{
+        width: "100%",
+        overflow: "hidden",
+        backgroundColor,
+        paddingTop: `${paddingY}px`,
+        paddingBottom: `${paddingY}px`,
+      }}
+    >
+      {/* Inline keyframes + hover rule scoped per-instance via unique name. */}
+      <style>{`
+        @keyframes ${animationName} {
+          from { transform: translateX(0); }
+          to   { transform: translateX(-${copyWidth}px); }
+        }
+        .marquee-hoverable:hover [data-marquee-track="${animationName}"] {
+          animation-play-state: paused;
+        }
+      `}</style>
+
+      <div
+        ref={trackRef}
+        data-marquee-track={animationName}
+        style={{
+          display: "flex",
+          width: "max-content",
+          willChange: "transform",
+          animationName: durationSec > 0 ? animationName : undefined,
+          animationDuration: durationSec > 0 ? `${durationSec}s` : undefined,
+          animationTimingFunction: "linear",
+          animationIterationCount: "infinite",
+          animationPlayState,
+          animationDirection,
+        }}
+      >
+        {renderCopy("a", false)}
+        {renderCopy("b", true)}
+      </div>
+    </div>
+  );
+}

package/components/blocks/ProjectCarouselBlockRenderer.tsx

@@ -391,7 +391,7 @@ export default function ProjectCarouselBlockRenderer({
       <div
         ref={trackRef}
         onScroll={handleScroll}
-        className="flex overflow-x-auto no-scrollbar"
+        className="flex overflow-x-auto no-scrollbar py-3"
         style={{
           gap: `${gap}px`,
           scrollSnapType: snapScroll ? "x mandatory" : undefined,