Why this exists

The idea started from a manual Figma workflow shared by @thedesignely. I wanted to turn that kind of design direction into something an LLM coding agent can repeat inside real website projects. The result is not only a demo. It is a reusable implementation workflow.

The two-skill structure

The first skill, image-layer-alignment-validator, checks whether two raster layers are spatially compatible. The second skill, cursor-reveal-hero, builds or repairs the interactive canvas reveal. This split matters because a frontend effect cannot reliably hide mismatched image layers.

01

Validate layers

Compare base and reveal images, measure drift, inspect overlays, and decide whether to accept, shift, crop, or regenerate.

02

Build the compositor

Use one visible canvas plus offscreen mask and reveal canvases. Draw the base first, then apply the soft mask to the reveal layer.

03

Tune and validate

Adjust radius, feather, fade, strength, opacity, and momentum, then run browser checks so the effect is nonblank and interactive.

The core formula

final = baseImage + revealImage * softCursorTrailMask

The canvas architecture

canvas / ctx        - visible output
maskCanvas / maskCtx - fading cursor trail alpha map
revealCanvas / revealCtx - temporary reveal layer
baseImage           - always visible
revealImage         - visible only through the mask

Important tuning values

const settings = {
  radius: 245,
  feather: 0.8,
  fade: 0.028,
  strength: 0.82,
  opacity: 0.78,
  lerp: 0.14,
  idleStrength: 0
};

What the public repository contains

  • Two portable SKILL.md Agent Skills.
  • Provider adapter notes for Codex, Claude Code, Gemini CLI, Kimi Code CLI, Qwen Code, GLM-based agents, and generic assistants.
  • A vanilla HTML/CSS/JS starter for the cursor reveal hero.
  • Browser smoke-check scripts and local image alignment validation guidance.
  • Media attribution and safety notes so the reusable skill package does not leak private project details.