{
  "id": "mui_wave_cta",
  "name": "Wave CTA",
  "width": 720,
  "height": 360,
  "cornerRadius": 0,
  "fit": "Layout",
  "backgroundColor": "#0a0c08",
  "opacity": 1,
  "x": -360,
  "y": -180,
  "responsive": {
    "enabled": true,
    "mode": "constraint",
    "width": {
      "type": "fixed"
    },
    "height": {
      "type": "fixed"
    },
    "maintainAspectRatio": false,
    "scaleObjects": false,
    "breakpoints": [
      {
        "id": "bp_mobile",
        "name": "Mobile",
        "minWidth": 0,
        "maxWidth": 599
      },
      {
        "id": "bp_tablet",
        "name": "Tablet",
        "minWidth": 600,
        "maxWidth": 1023
      },
      {
        "id": "bp_desktop",
        "name": "Desktop",
        "minWidth": 1024
      }
    ]
  },
  "layoutProps": {
    "mode": "linear",
    "direction": "vertical",
    "gap": 0,
    "padding": {
      "top": 0,
      "right": 0,
      "bottom": 0,
      "left": 0
    },
    "alignItems": "stretch",
    "layoutSizingHorizontal": "fixed",
    "layoutSizingVertical": "fixed"
  },
  "seo": {
    "title": "Wave CTA — Exode Motion UI",
    "description": "A button that fills with liquid on hover. The surface tilts toward the cursor, sloshes when you leave, and a click sends a ripple."
  },
  "stateMachine": {
    "inputs": [
      {
        "id": "in_label",
        "name": "label",
        "value": {
          "type": "Text",
          "value": "Start building",
          "defaultValue": "Start building"
        }
      },
      {
        "id": "in_wave",
        "name": "wave",
        "value": {
          "type": "Number",
          "value": 1,
          "defaultValue": 1
        }
      },
      {
        "id": "in_speed",
        "name": "speed",
        "value": {
          "type": "Number",
          "value": 1,
          "defaultValue": 1
        }
      },
      {
        "id": "in_radius",
        "name": "radius",
        "value": {
          "type": "Number",
          "value": 1,
          "defaultValue": 1
        }
      },
      {
        "id": "in_accent",
        "name": "accent",
        "value": {
          "type": "Text",
          "value": "#c8ff5a",
          "defaultValue": "#c8ff5a"
        }
      },
      {
        "id": "in_text",
        "name": "text",
        "value": {
          "type": "Text",
          "value": "#f2f5ea",
          "defaultValue": "#f2f5ea"
        }
      },
      {
        "id": "in_bg",
        "name": "bg",
        "value": {
          "type": "Text",
          "value": "#0a0c08",
          "defaultValue": "#0a0c08"
        }
      }
    ],
    "layers": [
      {
        "name": "Base",
        "entryStateId": "s_idle",
        "states": [
          {
            "id": "s_idle",
            "name": "Idle",
            "loop": true,
            "transitions": []
          }
        ]
      }
    ],
    "logicNodes": []
  },
  "animations": [],
  "physics": {
    "enabled": false,
    "gravity": {
      "x": 0,
      "y": 9.8
    }
  },
  "animationFlow": [],
  "navigation": [],
  "stateVariables": [],
  "objects": [
    {
      "id": "stage",
      "name": "Stage",
      "type": "Group",
      "transform": {
        "x": 0,
        "y": 0,
        "rotation": 0,
        "scale_x": 1,
        "scale_y": 1,
        "opacity": 1,
        "skew_x": 0,
        "skew_y": 0
      },
      "width": 720,
      "height": 360,
      "geometry": {
        "type": "Rectangle",
        "width": 720,
        "height": 360,
        "cornerRadius": 0
      },
      "cornerRadius": 0,
      "children": [],
      "clipContent": true,
      "style": {
        "fill": {
          "type": "Solid",
          "color": "#0a0c08",
          "opacity": 1
        },
        "effects": [
          {
            "id": "fx_wave-cta",
            "type": "CustomEffect",
            "name": "Wave CTA",
            "isEnabled": true,
            "params": {},
            "code": "/* Shared by every motion-ui effect (prepended to each one).\n   Rules for this file and the effects: the .bexode compiler minifies effect\n   code, so use explicit semicolons, block comments only, and never write a\n   minus followed by a negative value (it collapses to a decrement). */\n\n/* Read a live state-machine input, falling back to a default. */\nfunction inp(env, name, fallback) {\n  const v = env.inputs ? env.inputs[name] : undefined;\n  if (v === undefined || v === null || v === '') return fallback;\n  if (typeof fallback === 'number') {\n    const n = Number(v);\n    return isFinite(n) ? n : fallback;\n  }\n  if (typeof fallback === 'boolean') return v === true || v === 1 || v === 'true';\n  return v;\n}\n\n/* '#rgb' / '#rrggbb' to [r, g, b]; anything else falls back to white. */\nfunction rgbOf(hex) {\n  let h = String(hex || '').trim().replace('#', '');\n  if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];\n  if (!/^[0-9a-fA-F]{6}$/.test(h)) return [255, 255, 255];\n  const n = parseInt(h, 16);\n  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];\n}\n\nfunction rgba(hex, a) {\n  const c = rgbOf(hex);\n  return 'rgba(' + c[0] + ',' + c[1] + ',' + c[2] + ',' + Math.max(0, Math.min(1, a)) + ')';\n}\n\nfunction mix(a, b, t) {\n  const x = rgbOf(a), y = rgbOf(b);\n  const r = Math.round(x[0] + (y[0] - x[0]) * t);\n  const g = Math.round(x[1] + (y[1] - x[1]) * t);\n  const bl = Math.round(x[2] + (y[2] - x[2]) * t);\n  return '#' + ((1 << 24) + (r << 16) + (g << 8) + bl).toString(16).slice(1);\n}\n\n/* A soft round glow, rendered once per colour and blitted with drawImage\n   (much cheaper than shadowBlur on every particle). */\nconst __glows = {};\nfunction glowSprite(hex) {\n  if (__glows[hex]) return __glows[hex];\n  const s = 64;\n  const c = document.createElement('canvas');\n  c.width = s; c.height = s;\n  const g = c.getContext('2d');\n  const gr = g.createRadialGradient(s / 2, s / 2, 0, s / 2, s / 2, s / 2);\n  gr.addColorStop(0, rgba(hex, 1));\n  gr.addColorStop(0.18, rgba(hex, 0.55));\n  gr.addColorStop(0.45, rgba(hex, 0.14));\n  gr.addColorStop(1, rgba(hex, 0));\n  g.fillStyle = gr;\n  g.fillRect(0, 0, s, s);\n  __glows[hex] = c;\n  return c;\n}\n\nfunction glow(ctx, hex, x, y, r, a) {\n  if (r <= 0 || a <= 0) return;\n  ctx.globalAlpha = Math.min(1, a);\n  ctx.drawImage(glowSprite(hex), x - r, y - r, r * 2, r * 2);\n  ctx.globalAlpha = 1;\n}\n\n/* Frame clock: seconds since start and a clamped delta. */\nfunction tick(S) {\n  const now = performance.now();\n  if (!S.t0) { S.t0 = now; S.last = now; }\n  S.dt = Math.min(0.05, Math.max(0.001, (now - S.last) / 1000));\n  S.last = now;\n  S.age = (now - S.t0) / 1000;\n  return S.dt;\n}\n\n/* Deterministic pseudo-random so layouts are stable across resizes. */\nfunction rng(seed) {\n  let s = seed >>> 0 || 1;\n  return function () {\n    s = (s * 1664525 + 1013904223) >>> 0;\n    return s / 4294967296;\n  };\n}\n\nfunction ease(x) { return x < 0.5 ? 4 * x * x * x : 1 + (Math.pow(2 * x - 2, 3)) / 2; }\nfunction clamp(v, a, b) { return v < a ? a : v > b ? b : v; }\n\nconst SANS = 'Inter, Helvetica, Arial, sans-serif';\nconst MONO = 'ui-monospace, Menlo, monospace';\n\nfunction roundRect(ctx, x, y, w, h, r) {\n  r = Math.min(r, w / 2, h / 2);\n  ctx.beginPath();\n  ctx.moveTo(x + r, y);\n  ctx.arcTo(x + w, y, x + w, y + h, r);\n  ctx.arcTo(x + w, y + h, x, y + h, r);\n  ctx.arcTo(x, y + h, x, y, r);\n  ctx.arcTo(x, y, x + w, y, r);\n  ctx.closePath();\n}\n\n/* Shared backdrop: flat colour, soft vignette and fine grain. */\nfunction backdrop(ctx, W, H, bg, tint, amt) {\n  ctx.fillStyle = bg;\n  ctx.fillRect(0, 0, W, H);\n  if (tint && amt > 0) {\n    const gr = ctx.createRadialGradient(W / 2, H * 0.45, 0, W / 2, H * 0.45, Math.max(W, H) * 0.7);\n    gr.addColorStop(0, rgba(tint, 0.10 * amt));\n    gr.addColorStop(1, rgba(tint, 0));\n    ctx.fillStyle = gr;\n    ctx.fillRect(0, 0, W, H);\n  }\n  const vg = ctx.createRadialGradient(W / 2, H / 2, Math.min(W, H) * 0.3, W / 2, H / 2, Math.max(W, H) * 0.8);\n  vg.addColorStop(0, 'rgba(0,0,0,0)');\n  vg.addColorStop(1, 'rgba(0,0,0,0.45)');\n  ctx.fillStyle = vg;\n  ctx.fillRect(0, 0, W, H);\n}\n\n/* Greedy word wrap with the current ctx.font. */\nfunction wrap(ctx, text, maxW) {\n  const out = [];\n  String(text).split('\\n').forEach(function (para) {\n    const words = para.split(' ');\n    let cur = '';\n    for (let i = 0; i < words.length; i++) {\n      const next = cur ? cur + ' ' + words[i] : words[i];\n      if (cur && ctx.measureText(next).width > maxW) { out.push(cur); cur = words[i]; } else cur = next;\n    }\n    out.push(cur);\n  });\n  return out;\n}\n\n/* Largest font size (up to max) at which text wraps into maxLines within maxW. */\nfunction fitFont(ctx, text, weight, family, maxW, maxLines, max, min) {\n  let fs = max;\n  while (fs > min) {\n    ctx.font = weight + ' ' + fs + 'px ' + family;\n    if (wrap(ctx, text, maxW).length <= maxLines) break;\n    fs = fs * 0.92;\n  }\n  ctx.font = weight + ' ' + fs + 'px ' + family;\n  return fs;\n}\n\n/* Smoothed pointer that idles along a slow figure-eight when the cursor is away. */\nfunction follow(S, env, W, H, k) {\n  const pt = env.pointer || {};\n  const t = S.age || 0;\n  const tx = pt.isHovered ? pt.localX : W / 2 + Math.sin(t * 0.37) * W * 0.3;\n  const ty = pt.isHovered ? pt.localY : H / 2 + Math.sin(t * 0.74) * H * 0.22;\n  if (S.px === undefined) { S.px = tx; S.py = ty; }\n  S.px += (tx - S.px) * Math.min(1, S.dt * (k || 6));\n  S.py += (ty - S.py) * Math.min(1, S.dt * (k || 6));\n  S.inside = !!pt.isHovered;\n  return pt;\n}\n\n/* Optional centred headline over a background effect. */\nfunction title(ctx, W, H, text, sub, ink, accent, bg) {\n  if (!text) return;\n  if (bg) {\n    /* Soft scrim so the headline reads over busy motion. */\n    const sc = ctx.createRadialGradient(W / 2, H / 2, 0, W / 2, H / 2, Math.min(W * 0.5, 560));\n    sc.addColorStop(0, rgba(bg, 0.72));\n    sc.addColorStop(1, rgba(bg, 0));\n    ctx.fillStyle = sc;\n    ctx.fillRect(0, 0, W, H);\n  }\n  ctx.textAlign = 'center';\n  ctx.textBaseline = 'alphabetic';\n  const maxW = Math.min(W * 0.86, 900);\n  const fs = fitFont(ctx, text, 600, SANS, maxW, 2, clamp(W * 0.065, 26, 72), 16);\n  const lines = wrap(ctx, text, maxW);\n  const lh = fs * 1.08;\n  const y0 = H / 2 - (lines.length * lh) / 2 + fs * 0.8 - (sub ? fs * 0.35 : 0);\n  ctx.fillStyle = ink;\n  lines.forEach(function (l, i) { ctx.fillText(l, W / 2, y0 + i * lh); });\n  if (sub) {\n    ctx.font = '500 ' + clamp(fs * 0.24, 11, 15) + 'px ' + MONO;\n    ctx.fillStyle = rgba(accent, 0.85);\n    ctx.fillText(String(sub).toUpperCase(), W / 2, y0 + (lines.length - 1) * lh + fs * 0.9);\n  }\n}\n\n/* Wave CTA: a pill button that fills with liquid on hover. The surface tilts\n   toward the cursor, sloshes when you leave, and a click sends a ripple and\n   emits \"click\". Inputs: label, wave, speed, radius, accent, text, bg. */\nlet S = null;\n\nfunction surface(S, x, x0, bw, base, amp, t) {\n  const u = (x - x0) / bw;\n  return base\n    + Math.sin(u * 7 + t * 3.1) * amp * 0.55\n    + Math.sin(u * 13 - t * 4.3) * amp * 0.25\n    + (u - 0.5) * S.tilt * amp * 2.2;\n}\n\nfunction render(ctx, env) {\n  const W = env.width, H = env.height;\n  if (!S) S = { fill: 0.12, fv: 0, tilt: 0, press: 0, wasDown: false, ripples: [], hover: 0 };\n  const dt = tick(S);\n\n  const label = String(inp(env, 'label', 'Start building'));\n  const wave = clamp(inp(env, 'wave', 1), 0, 3);\n  const speed = inp(env, 'speed', 1);\n  const rad = clamp(inp(env, 'radius', 1), 0, 1);\n  const A = inp(env, 'accent', '#c8ff5a');\n  const ink = inp(env, 'text', '#f2f5ea');\n  const bg = inp(env, 'bg', '#0a0c08');\n  const t = S.age * speed;\n\n  ctx.save();\n  ctx.translate(-W / 2, -H / 2);\n  backdrop(ctx, W, H, bg, A, 0.8);\n\n  /* Button size follows the label and the container. */\n  const s = Math.min(W, H);\n  let fs = clamp(s * 0.07, 15, 26);\n  ctx.font = '600 ' + fs + 'px ' + SANS;\n  let tw = ctx.measureText(label).width;\n  const maxW = W * 0.84;\n  if (tw + fs * 3.4 > maxW) { fs = fs * (maxW - fs * 3.4) / tw; ctx.font = '600 ' + fs + 'px ' + SANS; tw = ctx.measureText(label).width; }\n  const bh = fs * 2.9;\n  const bw = tw + fs * 3.4;\n  const r = bh / 2 * rad + 4 * (1 - rad);\n  const pt = env.pointer || {};\n  const over = !!pt.isHovered && Math.abs(pt.localX - W / 2) < bw / 2 + 6 && Math.abs(pt.localY - H / 2) < bh / 2 + 6;\n\n  S.hover += ((over ? 1 : 0) - S.hover) * Math.min(1, dt * 10);\n  if (over && pt.isDown && !S.wasDown) {\n    S.press = 1;\n    S.ripples.push({ x: pt.localX, y: pt.localY, t: 0 });\n    if (env.emit) env.emit('click');\n  }\n  S.wasDown = !!pt.isDown;\n  S.press *= Math.pow(0.004, dt);\n\n  /* Liquid level is a damped spring toward its target, which gives a slosh. */\n  const target = over ? 1.08 : 0.12;\n  S.fv += (target - S.fill) * dt * 38 - S.fv * dt * 7;\n  S.fill += S.fv * dt;\n  const tiltTo = over ? clamp((pt.localX - W / 2) / (bw / 2), -1, 1) * 0.6 : 0;\n  S.tilt += (tiltTo - S.tilt) * Math.min(1, dt * 5) + S.fv * dt * 0.8;\n\n  const sc = 1 - S.press * 0.04 + S.hover * 0.02;\n  const cx = W / 2, cy = H / 2;\n  ctx.translate(cx, cy);\n  ctx.scale(sc, sc);\n  ctx.translate(-cx, -cy);\n  const x0 = cx - bw / 2, y0 = cy - bh / 2;\n\n  /* Halo. */\n  ctx.globalCompositeOperation = 'lighter';\n  glow(ctx, A, cx, cy + bh * 0.2, bw * (0.6 + S.hover * 0.25), 0.12 + S.hover * 0.22);\n  ctx.globalCompositeOperation = 'source-over';\n\n  /* Shell. */\n  roundRect(ctx, x0, y0, bw, bh, r);\n  ctx.fillStyle = mix(bg, ink, 0.04);\n  ctx.fill();\n  ctx.save();\n  roundRect(ctx, x0, y0, bw, bh, r);\n  ctx.clip();\n\n  /* Liquid. */\n  const level = y0 + bh * (1 - clamp(S.fill, 0, 1.15));\n  const amp = bh * 0.07 * wave * (0.6 + Math.min(1, Math.abs(S.fv) * 0.6));\n  const steps = 48;\n  const drawLiquid = function (shift, alpha, col) {\n    ctx.beginPath();\n    ctx.moveTo(x0 - 2, y0 + bh + 2);\n    for (let i = 0; i <= steps; i++) {\n      const x = x0 + (i / steps) * bw;\n      ctx.lineTo(x, surface(S, x + shift, x0, bw, level, amp, t + shift * 0.01));\n    }\n    ctx.lineTo(x0 + bw + 2, y0 + bh + 2);\n    ctx.closePath();\n    ctx.fillStyle = rgba(col, alpha);\n    ctx.fill();\n  };\n  drawLiquid(bw * 0.18, 0.45, mix(A, '#ffffff', 0.25));\n  drawLiquid(0, 1, A);\n  const sh = ctx.createLinearGradient(0, level - amp, 0, y0 + bh);\n  sh.addColorStop(0, 'rgba(255,255,255,0.22)');\n  sh.addColorStop(0.25, 'rgba(255,255,255,0)');\n  ctx.fillStyle = sh;\n  ctx.fillRect(x0, level - amp, bw, y0 + bh - level + amp);\n\n  /* Ripples inside the button. */\n  for (let k = S.ripples.length - 1; k >= 0; k--) {\n    const R = S.ripples[k];\n    R.t += dt;\n    if (R.t > 0.7) { S.ripples.splice(k, 1); continue; }\n    ctx.beginPath();\n    ctx.arc(R.x, R.y, ease(R.t / 0.7) * bw * 0.8, 0, Math.PI * 2);\n    ctx.fillStyle = 'rgba(255,255,255,' + 0.28 * (1 - R.t / 0.7) + ')';\n    ctx.fill();\n  }\n\n  /* Label: dark where it is under the liquid, light above it. */\n  ctx.textAlign = 'center';\n  ctx.textBaseline = 'middle';\n  ctx.font = '600 ' + fs + 'px ' + SANS;\n  const ty = cy + fs * 0.04;\n  const arrow = fs * 0.9 * S.hover;\n  ctx.fillStyle = ink;\n  ctx.fillText(label, cx - arrow * 0.3, ty);\n  ctx.save();\n  ctx.beginPath();\n  ctx.moveTo(x0, y0 + bh);\n  for (let i = 0; i <= steps; i++) {\n    const x = x0 + (i / steps) * bw;\n    ctx.lineTo(x, surface(S, x, x0, bw, level, amp, t));\n  }\n  ctx.lineTo(x0 + bw, y0 + bh);\n  ctx.closePath();\n  ctx.clip();\n  ctx.fillStyle = mix(bg, '#000000', 0.3);\n  ctx.fillText(label, cx - arrow * 0.3, ty);\n  ctx.restore();\n  /* Arrow slides in on hover. */\n  if (S.hover > 0.02) {\n    const ax = cx + tw / 2 + fs * 0.35 - arrow * 0.3 + (1 - S.hover) * -6;\n    ctx.strokeStyle = rgba(mix(bg, '#000000', 0.3), S.hover);\n    ctx.lineWidth = Math.max(1.5, fs * 0.09);\n    ctx.lineCap = 'round';\n    ctx.beginPath();\n    ctx.moveTo(ax, ty);\n    ctx.lineTo(ax + fs * 0.6, ty);\n    ctx.moveTo(ax + fs * 0.35, ty - fs * 0.25);\n    ctx.lineTo(ax + fs * 0.6, ty);\n    ctx.lineTo(ax + fs * 0.35, ty + fs * 0.25);\n    ctx.stroke();\n  }\n  ctx.restore();\n\n  roundRect(ctx, x0 + 0.5, y0 + 0.5, bw - 1, bh - 1, r);\n  ctx.strokeStyle = rgba(mix(ink, A, S.hover), 0.22 + S.hover * 0.5);\n  ctx.lineWidth = 1;\n  ctx.stroke();\n\n  ctx.restore();\n}\n"
          }
        ]
      },
      "layoutProps": {
        "layoutSizingHorizontal": "fill",
        "layoutSizingVertical": "fill"
      },
      "zIndex": 1,
      "interactions": []
    }
  ]
}