@morphika/andami 0.1.2

package/components/ui/ScrollToTop.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+
+export default function ScrollToTop() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const handleScroll = useCallback(() => {
+    setIsVisible(window.scrollY > 400);
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [handleScroll]);
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  return (
+    <button
+      onClick={scrollToTop}
+      className={`fixed bottom-8 right-8 z-50 flex h-12 w-12 items-center justify-center rounded-full bg-white/10 hover:bg-white/20 transition-all duration-300 ${
+        isVisible
+          ? "opacity-100 translate-y-0"
+          : "opacity-0 translate-y-4 pointer-events-none"
+      }`}
+      aria-label="Scroll to top"
+    >
+      {/* Chevron up */}
+      <svg
+        width="28"
+        height="28"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="text-brand-text"
+      >
+        <polyline points="18 15 12 9 6 15" />
+      </svg>
+    </button>
+  );
+}

package/lib/animation/enter-presets.ts

@@ -0,0 +1,147 @@
+/**
+ * Enter Animation Presets
+ *
+ * Metadata + keyframe definitions for each enter animation preset.
+ * Used by EnterAnimationWrapper (public site) and EnterAnimationPicker (builder UI).
+ *
+ * Session 116 — Animation UX Refactor.
+ */
+
+import type {
+  EnterPreset,
+  AnimationEasing,
+  EnterAnimationConfig,
+} from "./enter-types";
+import { ENTER_DEFAULTS } from "./enter-types";
+
+// ── Default config ─────────────────────────────────────────────────
+
+export const DEFAULT_ENTER_ANIMATION: Required<EnterAnimationConfig> = {
+  preset: "none",
+  duration: ENTER_DEFAULTS.duration,
+  delay: ENTER_DEFAULTS.delay,
+  easing: ENTER_DEFAULTS.easing,
+};
+
+// ── Preset metadata (for builder UI dropdowns) ─────────────────────
+
+export interface EnterPresetInfo {
+  id: EnterPreset;
+  label: string;
+  description: string;
+}
+
+/**
+ * Human-readable metadata for every enter preset.
+ * Ordered for UI display. Generic presets first, then block-specific.
+ */
+export const ENTER_PRESET_INFO: EnterPresetInfo[] = [
+  // Generic presets
+  { id: "none",      label: "None",       description: "No animation" },
+  { id: "fade",      label: "Fade",       description: "Opacity reveal" },
+  { id: "slide-up",  label: "Slide Up",   description: "Slide in from below" },
+  { id: "slide-down", label: "Slide Down", description: "Slide in from above" },
+  { id: "scale",     label: "Scale",      description: "Subtle zoom-in" },
+  { id: "blur",      label: "Blur",       description: "Blur dissolve reveal" },
+  { id: "reveal",    label: "Reveal",     description: "Clip-path wipe" },
+  // Block-specific presets
+  { id: "typewriter", label: "Typewriter", description: "Character-by-character typing" },
+  { id: "blur-in",    label: "Blur In",    description: "Text blur dissolve" },
+];
+
+/**
+ * Quick lookup: preset ID → metadata.
+ */
+export const ENTER_PRESET_MAP: Record<EnterPreset, EnterPresetInfo> = Object.fromEntries(
+  ENTER_PRESET_INFO.map((p) => [p.id, p])
+) as Record<EnterPreset, EnterPresetInfo>;
+
+// ── Easing options (for builder UI) ────────────────────────────────
+
+export const ENTER_EASINGS: { id: AnimationEasing; label: string }[] = [
+  { id: "ease-out",    label: "Ease Out" },
+  { id: "ease",        label: "Ease" },
+  { id: "ease-in",     label: "Ease In" },
+  { id: "ease-in-out", label: "Ease In Out" },
+  { id: "linear",      label: "Linear" },
+];
+
+// ── Duration / delay ranges (for builder UI sliders) ───────────────
+
+export const DURATION_RANGE = { min: 100, max: 5000, step: 50, default: 600 } as const;
+export const DELAY_RANGE    = { min: 0,   max: 5000, step: 50, default: 0 } as const;
+
+// ── Keyframe definitions ───────────────────────────────────────────
+
+export interface PresetKeyframes {
+  /** CSS properties at animation start (hidden state) */
+  from: Record<string, string>;
+  /** CSS properties at animation end (visible state) */
+  to: Record<string, string>;
+}
+
+/**
+ * Returns the CSS keyframe from/to values for an enter preset.
+ *
+ * Intensity is removed in the new system — presets use fixed,
+ * sensible transform values.
+ *
+ * Returns null for "none" and for presets handled by custom
+ * renderers (typewriter).
+ */
+export function getEnterKeyframes(preset: EnterPreset): PresetKeyframes | null {
+  switch (preset) {
+    case "none":
+      return null;
+
+    case "fade":
+      return {
+        from: { opacity: "0" },
+        to:   { opacity: "1" },
+      };
+
+    case "slide-up":
+      return {
+        from: { opacity: "0", transform: "translateY(30px)" },
+        to:   { opacity: "1", transform: "translateY(0)" },
+      };
+
+    case "slide-down":
+      return {
+        from: { opacity: "0", transform: "translateY(-30px)" },
+        to:   { opacity: "1", transform: "translateY(0)" },
+      };
+
+    case "scale":
+      return {
+        from: { opacity: "0", transform: "scale(0.85)" },
+        to:   { opacity: "1", transform: "scale(1)" },
+      };
+
+    case "blur":
+      return {
+        from: { opacity: "0", filter: "blur(10px)" },
+        to:   { opacity: "1", filter: "blur(0px)" },
+      };
+
+    case "blur-in":
+      // Similar to blur but tuned for text — lighter blur, no opacity
+      return {
+        from: { opacity: "0", filter: "blur(6px)" },
+        to:   { opacity: "1", filter: "blur(0px)" },
+      };
+
+    case "reveal":
+      return {
+        from: { opacity: "0", clipPath: "inset(0 100% 0 0)" },
+        to:   { opacity: "1", clipPath: "inset(0 0% 0 0)" },
+      };
+
+    case "typewriter":
+      // Handled by TypewriterWrapper, not CSS keyframes
+      return null;
+
+    default:
+      return null;
+  }
+}

package/lib/animation/enter-resolve.ts

@@ -0,0 +1,90 @@
+/**
+ * Enter Animation Cascade Resolution
+ *
+ * 4-level cascade: block → column → section → page → null.
+ * Full override at each level — no field-level merging.
+ *
+ * Session 116 — Animation UX Refactor.
+ */
+
+import type {
+  EnterAnimationConfig,
+  ResolvedEnterAnimationConfig,
+} from "./enter-types";
+import { ENTER_DEFAULTS } from "./enter-types";
+
+/**
+ * Resolves the effective enter animation for a block.
+ *
+ * Cascade order (first defined wins):
+ *   1. Block-level enter_animation
+ *   2. Column-level enter_animation
+ *   3. Section-level enter_animation
+ *   4. Page-level enter_animation
+ *   5. null (no animation)
+ *
+ * Full override semantics — if a level defines any property,
+ * that entire config is used (no merging with parent levels).
+ *
+ * Returns null if no level has an animation configured.
+ */
+export function resolveEnterAnimation(
+  blockConfig?: EnterAnimationConfig,
+  columnConfig?: EnterAnimationConfig,
+  sectionConfig?: EnterAnimationConfig,
+  pageConfig?: EnterAnimationConfig,
+): ResolvedEnterAnimationConfig | null {
+  // Block-level wins
+  if (blockConfig && isConfigured(blockConfig)) {
+    return normalizeEnterConfig(blockConfig);
+  }
+
+  // Column-level
+  if (columnConfig && isConfigured(columnConfig)) {
+    return normalizeEnterConfig(columnConfig);
+  }
+
+  // Section-level
+  if (sectionConfig && isConfigured(sectionConfig)) {
+    return normalizeEnterConfig(sectionConfig);
+  }
+
+  // Page-level
+  if (pageConfig && isConfigured(pageConfig)) {
+    return normalizeEnterConfig(pageConfig);
+  }
+
+  // No animation anywhere
+  return null;
+}
+
+/**
+ * Check if a config has any meaningful property set.
+ * A config with only undefined values is treated as "not configured".
+ */
+function isConfigured(config: EnterAnimationConfig): boolean {
+  return (
+    config.preset !== undefined ||
+    config.duration !== undefined ||
+    config.delay !== undefined ||
+    config.easing !== undefined
+  );
+}
+
+/**
+ * Fill defaults for any missing fields in a partial config.
+ * Returns a fully resolved config with all fields present.
+ *
+ * If preset is "none", still resolves — the wrapper component
+ * will detect "none" and skip rendering.
+ */
+export function normalizeEnterConfig(
+  config: EnterAnimationConfig,
+): ResolvedEnterAnimationConfig {
+  return {
+    preset: config.preset ?? "none",
+    duration: config.duration ?? ENTER_DEFAULTS.duration,
+    delay: config.delay ?? ENTER_DEFAULTS.delay,
+    easing: config.easing ?? ENTER_DEFAULTS.easing,
+  };
+}

package/lib/animation/enter-types.ts

@@ -0,0 +1,128 @@
+/**
+ * Enter Animation System — Type definitions
+ *
+ * Replaces the old scroll/enter/load trigger system with a unified "enter"
+ * behavior: IntersectionObserver with above-the-fold detection.
+ *
+ * Session 116 — Animation UX Refactor.
+ */
+
+import type { ContentBlock } from "../../lib/sanity/types";
+
+// ── Block type alias (mirrors builder types.ts) ────────────────────
+
+type BlockType = ContentBlock["_type"];
+
+// ── Easing ─────────────────────────────────────────────────────────
+
+export type AnimationEasing =
+  | "linear"
+  | "ease"
+  | "ease-in"
+  | "ease-out"
+  | "ease-in-out";
+
+// ── Generic enter presets (page / section / column) ────────────────
+
+export type GenericEnterPreset =
+  | "none"
+  | "fade"
+  | "slide-up"
+  | "slide-down"
+  | "scale"
+  | "blur"
+  | "reveal";
+
+/** Array of generic enter presets for builder UI dropdowns */
+export const GENERIC_ENTER_PRESETS: GenericEnterPreset[] = [
+  "none",
+  "fade",
+  "slide-up",
+  "slide-down",
+  "scale",
+  "blur",
+  "reveal",
+];
+
+// ── Block-specific enter presets ───────────────────────────────────
+
+/** Presets exclusive to specific block types */
+export type BlockSpecificEnterPreset =
+  | "typewriter"   // textBlock only
+  | "blur-in";     // textBlock only (separate from generic "blur")
+
+/**
+ * Union of ALL enter presets — generic + block-specific.
+ * Used as the field type in EnterAnimationConfig so any preset
+ * can be stored regardless of context.
+ */
+export type EnterPreset = GenericEnterPreset | BlockSpecificEnterPreset;
+
+// ── Per-block-type preset registry ─────────────────────────────────
+
+/**
+ * Which enter presets are available for each block type.
+ * Block types not listed here have no block-specific enter animation
+ * (they rely on the generic cascade from column/section/page).
+ *
+ * Based on the registry table in ANIMATION-UX-ROADMAP.md.
+ */
+export const BLOCK_ENTER_PRESETS: Record<BlockType, readonly EnterPreset[]> = {
+  textBlock:              ["typewriter", "fade", "blur-in", "slide-up"],
+  imageBlock:             ["fade", "blur", "reveal", "scale", "slide-up"],
+  imageGridBlock:         ["fade", "scale", "slide-up"],
+  videoBlock:             ["fade", "slide-up"],
+  buttonBlock:            ["fade", "slide-up", "scale"],
+  coverBlock:             ["fade", "blur", "reveal", "scale"],
+  spacerBlock:            [],           // invisible — no animation
+  projectGridBlock:       [],           // uses card_entrance system
+};
+
+// ── Enter animation config ─────────────────────────────────────────
+
+/**
+ * Stored in Sanity on pages, sections, columns, and blocks.
+ * All fields optional — consumers use resolveEnterAnimation()
+ * or fill defaults at the call-site.
+ */
+export interface EnterAnimationConfig {
+  preset?: EnterPreset;
+  duration?: number;        // ms, default 600
+  delay?: number;           // ms, default 0
+  easing?: AnimationEasing; // default "ease-out"
+}
+
+/**
+ * Fully resolved config — all fields guaranteed present.
+ * Returned by resolveEnterAnimation().
+ */
+export interface ResolvedEnterAnimationConfig {
+  preset: EnterPreset;
+  duration: number;
+  delay: number;
+  easing: AnimationEasing;
+}
+
+// ── Typewriter config (textBlock only) ─────────────────────────────
+
+/**
+ * Extra config for the "typewriter" enter preset.
+ * Stored on textBlock.typewriter_config when preset === "typewriter".
+ */
+export interface TypewriterConfig {
+  speed?: number;                         // chars/sec, default 40, range 10–100
+  mode?: "character" | "word";            // default "character"
+}
+
+// ── Defaults ───────────────────────────────────────────────────────
+
+export const ENTER_DEFAULTS = {
+  duration: 600,
+  delay: 0,
+  easing: "ease-out" as AnimationEasing,
+} as const;
+
+export const TYPEWRITER_DEFAULTS: Required<TypewriterConfig> = {
+  speed: 40,
+  mode: "character",
+} as const;

package/lib/animation/hover-effect-presets.ts

@@ -0,0 +1,210 @@
+/**
+ * Hover Effect Presets
+ *
+ * Unified registry of CSS-based and shader-based hover effects.
+ * The builder UI uses this for dropdowns. The public site uses
+ * getHoverEffectStyles() for CSS hovers and delegates to
+ * ShaderCanvas for shader hovers.
+ *
+ * Session 116 — Animation UX Refactor.
+ */
+
+import type {
+  HoverPreset,
+  CSSHoverPreset,
+  ShaderHoverPreset,
+  HoverEasing,
+  HoverEffectConfig,
+  ShaderSmoothness,
+} from "./hover-effect-types";
+import { HOVER_EFFECT_DEFAULTS } from "./hover-effect-types";
+
+// ── Default config ─────────────────────────────────────────────────
+
+export const DEFAULT_HOVER_EFFECT: Required<HoverEffectConfig> = {
+  preset: HOVER_EFFECT_DEFAULTS.preset,
+  duration: HOVER_EFFECT_DEFAULTS.duration,
+  easing: HOVER_EFFECT_DEFAULTS.easing,
+  shader_speed: HOVER_EFFECT_DEFAULTS.shader_speed,
+  shader_smoothness: HOVER_EFFECT_DEFAULTS.shader_smoothness,
+};
+
+// ── Preset metadata (for builder UI) ───────────────────────────────
+
+export interface HoverPresetInfo {
+  id: HoverPreset;
+  label: string;
+  description: string;
+  /** Whether this preset uses WebGL shaders */
+  isShader: boolean;
+}
+
+export const HOVER_PRESET_INFO: HoverPresetInfo[] = [
+  // CSS-based presets
+  { id: "none",         label: "None",         description: "No hover effect",         isShader: false },
+  { id: "scale-up",     label: "Scale Up",     description: "Zoom in on hover",        isShader: false },
+  { id: "scale-down",   label: "Scale Down",   description: "Zoom out on hover",       isShader: false },
+  { id: "lift",         label: "Lift",         description: "Lifts element with shadow", isShader: false },
+  { id: "tilt-3d",      label: "Tilt 3D",      description: "Perspective tilt following cursor", isShader: false },
+  { id: "color-shift",  label: "Color Shift",  description: "Brightness and saturation change", isShader: false },
+  { id: "blur-reveal",  label: "Blur Reveal",  description: "Blurred until hovered",   isShader: false },
+  { id: "border-glow",  label: "Border Glow",  description: "Glowing border on hover", isShader: false },
+  // Shader-based presets
+  { id: "ripple",       label: "Ripple",       description: "Ripple distortion from cursor", isShader: true },
+  { id: "rgb-shift",    label: "RGB Shift",    description: "Chromatic aberration on hover", isShader: true },
+  { id: "pixelate",     label: "Pixelate",     description: "Pixelation dissolve effect", isShader: true },
+];
+
+/** Quick lookup: preset ID → metadata */
+export const HOVER_PRESET_MAP: Record<HoverPreset, HoverPresetInfo> = Object.fromEntries(
+  HOVER_PRESET_INFO.map((p) => [p.id, p])
+) as Record<HoverPreset, HoverPresetInfo>;
+
+// ── Shader detection ───────────────────────────────────────────────
+
+const SHADER_PRESETS: ReadonlySet<string> = new Set<ShaderHoverPreset>([
+  "ripple",
+  "rgb-shift",
+  "pixelate",
+]);
+
+/**
+ * Check if a hover preset uses WebGL shaders.
+ * Used by the builder to show/hide shader-specific controls
+ * and by the renderer to delegate to ShaderCanvas.
+ */
+export function isShaderPreset(preset: HoverPreset): preset is ShaderHoverPreset {
+  return SHADER_PRESETS.has(preset);
+}
+
+// ── Easing options (for builder UI) ────────────────────────────────
+
+export const HOVER_EFFECT_EASINGS: { id: HoverEasing; label: string }[] = [
+  { id: "ease-out",    label: "Ease Out" },
+  { id: "ease",        label: "Ease" },
+  { id: "ease-in",     label: "Ease In" },
+  { id: "ease-in-out", label: "Ease In Out" },
+  { id: "linear",      label: "Linear" },
+];
+
+// ── Duration range (for builder UI) ────────────────────────────────
+
+export const HOVER_DURATION_RANGE = { min: 50, max: 5000, step: 25, default: 300 } as const;
+
+// ── Shader speed / smoothness ranges (for builder UI) ──────────────
+
+export const SHADER_SPEED_RANGE = { min: 0.5, max: 3.0, step: 0.1, default: 1.0 } as const;
+
+export const SHADER_SMOOTHNESS_OPTIONS: { id: ShaderSmoothness; label: string }[] = [
+  { id: "snappy", label: "Snappy" },
+  { id: "normal", label: "Normal" },
+  { id: "smooth", label: "Smooth" },
+];
+
+/** Smoothness label → lerp factor (used by ShaderCanvas renderer) */
+export const SMOOTHNESS_VALUES: Record<ShaderSmoothness, number> = {
+  snappy: 0.15,
+  normal: 0.05,
+  smooth: 0.02,
+};
+
+// ── CSS hover styles ───────────────────────────────────────────────
+
+export interface HoverStyles {
+  /** Base state CSS (always applied) */
+  base: Record<string, string>;
+  /** Hover state CSS (applied on :hover) */
+  hover: Record<string, string>;
+  /** Whether this preset needs JS mouse tracking (tilt-3d) */
+  needsJS?: boolean;
+}
+
+/**
+ * Returns CSS properties for a CSS-based hover preset.
+ * Returns null for "none" and shader presets (they use WebGL, not CSS).
+ *
+ * Intensity is removed in the new system — presets use fixed,
+ * sensible values. The old intensity multiplier created confusion
+ * without meaningful user value.
+ */
+export function getHoverEffectStyles(
+  preset: HoverPreset,
+  duration: number = 300,
+  easing: string = "ease-out",
+): HoverStyles | null {
+  // Shader presets don't use CSS
+  if (isShaderPreset(preset)) return null;
+
+  const cssPreset = preset as CSSHoverPreset;
+  const transition = `all ${duration}ms ${easing}`;
+
+  switch (cssPreset) {
+    case "none":
+      return null;
+
+    case "scale-up":
+      return {
+        base:  { transition, transform: "scale(1)" },
+        hover: { transform: "scale(1.05)" },
+      };
+
+    case "scale-down":
+      return {
+        base:  { transition, transform: "scale(1)" },
+        hover: { transform: "scale(0.95)" },
+      };
+
+    case "lift":
+      return {
+        base: {
+          transition,
+          transform: "translateY(0)",
+          boxShadow: "0 0 0 rgba(0,0,0,0)",
+        },
+        hover: {
+          transform: "translateY(-4px)",
+          boxShadow: "0 8px 20px rgba(0,0,0,0.15)",
+        },
+      };
+
+    case "tilt-3d":
+      return {
+        base: {
+          transition,
+          transform: "perspective(800px) rotateX(0deg) rotateY(0deg)",
+          transformStyle: "preserve-3d",
+        },
+        hover: {
+          // Overridden by JS mousemove handler
+          transform: "perspective(800px) rotateX(0deg) rotateY(0deg)",
+        },
+        needsJS: true,
+      };
+
+    case "color-shift":
+      return {
+        base:  { transition, filter: "brightness(1) saturate(1)" },
+        hover: { filter: "brightness(1.10) saturate(1.20)" },
+      };
+
+    case "blur-reveal":
+      return {
+        base:  { transition, filter: "blur(3px)", opacity: "0.85" },
+        hover: { filter: "blur(0px)", opacity: "1" },
+      };
+
+    case "border-glow":
+      return {
+        base: {
+          transition,
+          boxShadow: "0 0 0 0 rgba(7,107,255,0)",
+        },
+        hover: {
+          boxShadow: "0 0 8px 4px rgba(7,107,255,0.40)",
+        },
+      };
+
+    default:
+      return null;
+  }
+}