@morphika/andami 0.5.0 → 0.5.2

package/components/builder/settings-panel/SectionV2Settings.tsx

@@ -101,7 +101,7 @@ function PresetGrid({ section }: { section: PageSectionV2 }) {
             onClick={() => !isCustom && applyPresetV2(section._key, preset.id)}
             className={`flex flex-col items-center gap-1 p-2 rounded-lg border transition-all ${
               isActive
-                ? "border-[#4794e2] bg-[#4794e2]/5"
+                ? "border-[#3580f9] bg-[#3580f9]/5"
                 : isCustom
                 ? "border-neutral-200 bg-neutral-50 opacity-60 cursor-default"
                 : "border-neutral-200 bg-white hover:border-neutral-300 hover:bg-neutral-50"
@@ -121,7 +121,7 @@ function PresetGrid({ section }: { section: PageSectionV2 }) {
                   <div
                     key={i}
                     className={`rounded-sm transition-colors ${
-                      isActive ? "bg-[#4794e2]" : "bg-neutral-300"
+                      isActive ? "bg-[#3580f9]" : "bg-neutral-300"
                     }`}
                     style={{ flex: span }}
                   />
@@ -129,7 +129,7 @@ function PresetGrid({ section }: { section: PageSectionV2 }) {
               )}
             </div>
             <span className={`text-[9px] font-medium ${
-              isActive ? "text-[#4794e2]" : "text-neutral-500"
+              isActive ? "text-[#3580f9]" : "text-neutral-500"
             }`}>
               {preset.label}
             </span>
@@ -140,15 +140,15 @@ function PresetGrid({ section }: { section: PageSectionV2 }) {
       {/* + Add Column button */}
       <button
         onClick={handleAddColumn}
-        className="flex flex-col items-center gap-1 p-2 rounded-lg border border-dashed border-neutral-300 transition-all hover:border-[#4794e2] hover:bg-[#4794e2]/5 group"
+        className="flex flex-col items-center gap-1 p-2 rounded-lg border border-dashed border-neutral-300 transition-all hover:border-[#3580f9] hover:bg-[#3580f9]/5 group"
         title="Add a column (fills first gap, or adds new row below)"
       >
         <div className="flex items-center justify-center w-full h-4">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" className="text-neutral-400 group-hover:text-[#4794e2] transition-colors">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" className="text-neutral-400 group-hover:text-[#3580f9] transition-colors">
             <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
           </svg>
         </div>
-        <span className="text-[9px] font-medium text-neutral-400 group-hover:text-[#4794e2] transition-colors">
+        <span className="text-[9px] font-medium text-neutral-400 group-hover:text-[#3580f9] transition-colors">
           Add Col
         </span>
       </button>
@@ -204,8 +204,8 @@ export default function SectionV2Settings({ section }: { section: PageSectionV2
       {/* Responsive info banner */}
       {isResponsive && (
         <div className="px-4 pt-3">
-          <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#4794e2]/8 border border-[#4794e2]/15">
-            <span className="text-[11px] font-medium text-[#4794e2]">
+          <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#3580f9]/8 border border-[#3580f9]/15">
+            <span className="text-[11px] font-medium text-[#3580f9]">
               Editing {activeViewport === "tablet" ? "Tablet" : "Phone"} overrides
             </span>
           </div>
@@ -218,7 +218,7 @@ export default function SectionV2Settings({ section }: { section: PageSectionV2
           <div className="flex gap-2">
             <button
               onClick={handleStack}
-              className="flex-1 rounded-lg bg-[#4794e2]/8 border border-[#4794e2]/20 py-2 text-xs font-medium text-[#4794e2] hover:bg-[#4794e2]/15 transition-colors"
+              className="flex-1 rounded-lg bg-[#3580f9]/8 border border-[#3580f9]/20 py-2 text-xs font-medium text-[#3580f9] hover:bg-[#3580f9]/15 transition-colors"
               title="Stack all columns vertically (full width, one per row)"
             >
               Stack Columns
@@ -237,7 +237,7 @@ export default function SectionV2Settings({ section }: { section: PageSectionV2
             </button>
           </div>
           {hasAnyOverrides && (
-            <p className="text-[10px] text-[#4794e2]/60 mt-1.5">
+            <p className="text-[10px] text-[#3580f9]/60 mt-1.5">
               {hasColOverrides ? "Column layout" : ""}
               {hasColOverrides && hasSettingsOverrides ? " + " : ""}
               {hasSettingsOverrides ? "settings" : ""}
@@ -266,7 +266,7 @@ export default function SectionV2Settings({ section }: { section: PageSectionV2
           <span>
             Col Gap
             {isResponsive && hasSectionV2SettingOverride(section, activeViewport, "col_gap") && (
-              <span className="ml-1 text-[9px] text-[#4794e2]">overridden</span>
+              <span className="ml-1 text-[9px] text-[#3580f9]">overridden</span>
             )}
           </span>
         }>
@@ -278,7 +278,7 @@ export default function SectionV2Settings({ section }: { section: PageSectionV2
               step={4}
               value={getGapValue("col_gap", 20)}
               onChange={(e) => updateSettingResponsive("col_gap", parseInt(e.target.value))}
-              className="flex-1 accent-[#4794e2]"
+              className="flex-1 accent-[#3580f9]"
             />
             <span className="text-xs text-neutral-900 w-12 text-right">
               {getGapValue("col_gap", 20)}px
@@ -298,7 +298,7 @@ export default function SectionV2Settings({ section }: { section: PageSectionV2
           <span>
             Row Gap
             {isResponsive && hasSectionV2SettingOverride(section, activeViewport, "row_gap") && (
-              <span className="ml-1 text-[9px] text-[#4794e2]">overridden</span>
+              <span className="ml-1 text-[9px] text-[#3580f9]">overridden</span>
             )}
           </span>
         }>
@@ -310,7 +310,7 @@ export default function SectionV2Settings({ section }: { section: PageSectionV2
               step={4}
               value={getGapValue("row_gap", 20)}
               onChange={(e) => updateSettingResponsive("row_gap", parseInt(e.target.value))}
-              className="flex-1 accent-[#4794e2]"
+              className="flex-1 accent-[#3580f9]"
             />
             <span className="text-xs text-neutral-900 w-12 text-right">
               {getGapValue("row_gap", 20)}px

package/components/builder/settings-panel/TRBLInputs.tsx

@@ -42,7 +42,7 @@ export function TRBLInputs({
             value={f.value || "0"}
             onFocus={() => store._pushSnapshot()}
             onChange={(e) => onChange(f.key, e.target.value)}
-            className="w-full rounded-lg border border-transparent bg-[#f5f5f5] px-1.5 py-[6px] text-xs text-neutral-900 text-center outline-none transition-all hover:bg-[#efefef] focus:bg-white focus:border-[#076bff] focus:shadow-[0_0_0_3px_rgba(7,107,255,0.06)]"
+            className="w-full rounded-lg border border-transparent bg-[#f5f5f5] px-1.5 py-[6px] text-xs text-neutral-900 text-center outline-none transition-all hover:bg-[#efefef] focus:bg-white focus:border-[#3580f9] focus:shadow-[0_0_0_3px_rgba(53, 128, 249,0.06)]"
           />
         </div>
       ))}

package/lib/animation/enter-types.ts

@@ -73,9 +73,12 @@ export const BLOCK_ENTER_PRESETS: Record<BlockType, readonly EnterPreset[]> = {
   imageGridBlock:         ["fade", "scale", "slide-up"],
   videoBlock:             ["fade", "slide-up"],
   buttonBlock:            ["fade", "slide-up", "scale"],
+  beforeAfterBlock:       ["fade", "slide-up", "scale"],
+  audioBlock:             ["fade", "slide-up", "scale"],
   spacerBlock:            [],           // invisible — no animation
   projectGridBlock:       [],           // uses card_entrance system
   projectCarouselBlock:   [],           // uses card_entrance system
+  marqueeBlock:           ["fade", "slide-up", "scale"],
 };
 
 // ── Enter animation config ─────────────────────────────────────────

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

@@ -1,210 +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;
-  }
-}
+/**
+ * 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(53, 128, 249,0)",
+        },
+        hover: {
+          boxShadow: "0 0 8px 4px rgba(53, 128, 249,0.40)",
+        },
+      };
+
+    default:
+      return null;
+  }
+}

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

@@ -66,9 +66,12 @@ export const BLOCK_HOVER_PRESETS: Record<BlockType, readonly HoverPreset[]> = {
   imageGridBlock:         ["tilt-3d"],
   videoBlock:             [],   // video has play/pause interaction
   buttonBlock:            ["scale-up", "lift", "border-glow"],
+  beforeAfterBlock:       [],   // slider handles its own drag interaction
+  audioBlock:             [],   // audio has play/pause interaction
   spacerBlock:            [],   // invisible
   projectGridBlock:       ["scale-up", "lift"],  // per-card effect
   projectCarouselBlock:   [],   // uses per-card hover_effect field directly
+  marqueeBlock:           [],   // already animating — hover effects fight the motion
 };
 
 // ── Hover effect config ────────────────────────────────────────────