Add click ripple extension example

EXTENSIONS.md

@@ -289,3 +289,4 @@ Use `parentSection` to nest your panel inside an existing area such as `cursor`
 ## Examples
 
 - `extension-examples/webadderall.more-wallpapers` shows a user-installable wallpaper bundle that registers 180 packaged wallpapers through `registerWallpaper()`.
+- `extension-examples/willytop8.click-ripple` shows a cursor-effect extension with ripple, pulse, and burst click animations.

extension-examples/willytop8.click-ripple/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+*.log
+.DS_Store

extension-examples/willytop8.click-ripple/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 willytop8
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

extension-examples/willytop8.click-ripple/README.md

@@ -0,0 +1,60 @@
+# Recordly Click Ripple
+
+Cursor click effects for [Recordly](https://www.recordly.dev): ripple, pulse, and burst.
+
+## Install
+
+1. Clone or download this repo.
+2. Run `npm install && npm run build`.
+3. In Recordly, go to **Extensions → Open Directory**.
+4. Copy the entire `willytop8.click-ripple/` folder into that directory.
+5. Restart Recordly. **Click Ripple** should appear as active in the Extensions panel.
+
+## Settings
+
+Open **Settings → Cursor → Click Effects**. All settings update live.
+
+| Setting | Default | Range |
+|---|---|---|
+| Enable | on | toggle |
+| Style | Ripple | Ripple / Pulse / Burst |
+| Color | `#2563EB` | color picker |
+| Size | 1.0 | 0.5–2.5 |
+| Duration (ms) | 600 | 200–1500 |
+| Line thickness | 2 | 1–8 |
+| Distinct right-click style | on | toggle |
+
+Size scales relative to the scene area rather than the canvas, so effects look consistent across different export resolutions and padding settings.
+
+## Styles
+
+**Ripple** — two concentric rings that expand and fade.
+
+**Pulse** — a soft halo that scales up and fades out.
+
+**Burst** — eight radial lines extending from the click point.
+
+When **Distinct right-click style** is on, right-clicks render with dashed lines instead of solid ones.
+
+## Building from source
+
+```bash
+npm install
+npm run build      # one-off build
+npm run watch      # rebuild on save
+```
+
+Output goes to `dist/index.js`.
+
+## How it works
+
+The extension registers one cursor effect with `registerCursorEffect()`. The callback draws each animation frame until the effect duration elapses.
+
+## Permissions
+
+- `cursor` — to register click effects
+- `ui` — to register the settings panel
+
+## License
+
+MIT — see [LICENSE](./LICENSE).

extension-examples/willytop8.click-ripple/build.mjs

@@ -0,0 +1,21 @@
+import { build, context } from "esbuild";
+
+const config = {
+  entryPoints: ["src/index.ts"],
+  outfile: "dist/index.js",
+  bundle: true,
+  format: "esm",
+  target: "es2022",
+  platform: "browser",
+  minify: false,
+  sourcemap: false,
+};
+
+if (process.argv.includes("--watch")) {
+  const ctx = await context(config);
+  await ctx.watch();
+  console.log("Watching src/ — Ctrl-C to stop");
+} else {
+  await build(config);
+  console.log("Built dist/index.js");
+}

extension-examples/willytop8.click-ripple/dist/index.js

@@ -0,0 +1,119 @@
+// src/index.ts
+var easeOut2 = (t) => 1 - Math.pow(1 - t, 2);
+var easeOut3 = (t) => 1 - Math.pow(1 - t, 3);
+function activate(api) {
+  api.registerSettingsPanel({
+    id: "click-ripple-settings",
+    label: "Click Effects",
+    icon: "sparkles",
+    parentSection: "cursor",
+    fields: [
+      { id: "enabled", label: "Enable click effects", type: "toggle", defaultValue: true },
+      {
+        id: "style",
+        label: "Style",
+        type: "select",
+        defaultValue: "ripple",
+        options: [
+          { label: "Ripple (concentric rings)", value: "ripple" },
+          { label: "Pulse (soft halo)", value: "pulse" },
+          { label: "Burst (radial spokes)", value: "burst" }
+        ]
+      },
+      { id: "color", label: "Color", type: "color", defaultValue: "#2563EB" },
+      { id: "size", label: "Size", type: "slider", defaultValue: 1, min: 0.5, max: 2.5, step: 0.1 },
+      { id: "durationMs", label: "Duration (ms)", type: "slider", defaultValue: 600, min: 200, max: 1500, step: 50 },
+      { id: "thickness", label: "Line thickness", type: "slider", defaultValue: 2, min: 1, max: 8, step: 1 },
+      { id: "differentiateRightClick", label: "Distinct right-click style", type: "toggle", defaultValue: true }
+    ]
+  });
+  api.registerCursorEffect((ctx) => {
+    if (!api.getSetting("enabled")) return false;
+    const style = api.getSetting("style");
+    const color = api.getSetting("color");
+    const size = api.getSetting("size");
+    const durationMs = api.getSetting("durationMs");
+    const thickness = api.getSetting("thickness");
+    const differentiateRC = api.getSetting("differentiateRightClick");
+    if (ctx.elapsedMs >= durationMs) return false;
+    const progress = ctx.elapsedMs / durationMs;
+    const distinct = ctx.interactionType === "right-click" && differentiateRC;
+    const t = ctx.sceneTransform;
+    let x = ctx.cx * ctx.width;
+    let y = ctx.cy * ctx.height;
+    if (t != null && t.scale !== 0) {
+      x = (x - t.x) / t.scale;
+      y = (y - t.y) / t.scale;
+    }
+    const sceneWidth = ctx.videoLayout?.maskRect.width ?? ctx.width;
+    const baseRadius = sceneWidth * 0.04 * size;
+    switch (style) {
+      case "ripple":
+        drawRipple(ctx.ctx, x, y, progress, baseRadius, color, thickness, distinct);
+        break;
+      case "pulse":
+        drawPulse(ctx.ctx, x, y, progress, baseRadius, color, thickness, distinct);
+        break;
+      case "burst":
+        drawBurst(ctx.ctx, x, y, progress, baseRadius, color, thickness, distinct);
+        break;
+    }
+    return true;
+  });
+}
+function deactivate() {
+}
+function drawRipple(ctx, x, y, p, base, color, thick, distinct) {
+  if (p > 0.15) {
+    const op = (p - 0.15) / 0.85;
+    drawRing(ctx, x, y, base * 1.4 * easeOut3(op), color, thick, 1 - op, distinct);
+  }
+  drawRing(ctx, x, y, base * easeOut3(p), color, thick, 1 - p, distinct);
+}
+function drawRing(ctx, x, y, r, color, thick, alpha, dashed) {
+  ctx.save();
+  ctx.globalAlpha = Math.max(0, Math.min(1, alpha));
+  ctx.strokeStyle = color;
+  ctx.lineWidth = thick;
+  if (dashed) ctx.setLineDash([thick * 2, thick * 2]);
+  ctx.beginPath();
+  ctx.arc(x, y, r, 0, Math.PI * 2);
+  ctx.stroke();
+  ctx.restore();
+}
+function drawPulse(ctx, x, y, p, base, color, thick, distinct) {
+  const r = base * 0.9 * easeOut2(p);
+  ctx.save();
+  ctx.globalAlpha = (1 - p) * 0.65;
+  ctx.beginPath();
+  ctx.arc(x, y, r, 0, Math.PI * 2);
+  ctx.strokeStyle = color;
+  ctx.lineWidth = thick;
+  if (distinct) {
+    ctx.setLineDash([thick * 2, thick * 2]);
+  }
+  ctx.stroke();
+  ctx.restore();
+}
+function drawBurst(ctx, x, y, p, base, color, thick, distinct) {
+  const innerR = base * 0.3 * easeOut2(p);
+  const outerR = base * 1.1 * easeOut2(p);
+  ctx.save();
+  ctx.globalAlpha = 1 - p;
+  ctx.strokeStyle = color;
+  ctx.lineWidth = thick;
+  ctx.lineCap = "round";
+  if (distinct) ctx.setLineDash([thick * 1.5, thick * 1.5]);
+  for (let i = 0; i < 8; i++) {
+    const angle = i / 8 * Math.PI * 2;
+    ctx.beginPath();
+    ctx.moveTo(x + Math.cos(angle) * innerR, y + Math.sin(angle) * innerR);
+    ctx.lineTo(x + Math.cos(angle) * outerR, y + Math.sin(angle) * outerR);
+    ctx.stroke();
+  }
+  ctx.restore();
+}
+export {
+  activate,
+  deactivate
+};