canvas-effects

Render canvas noise and grain effects with offscreen buffers and throttled loops.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/sreejithraman/shayna --skill canvas-effects
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: canvas-effects
Source: https://github.com/sreejithraman/shayna/tree/main/.claude/skills/canvas-effects
Command: npx skills add https://github.com/sreejithraman/shayna --skill canvas-effects

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Per-frame canvas work can be CPU/GPU heavy. This Skill focuses on efficient rendering, offscreen techniques, and throttled loops for noise, grain, and particles.

Core Features & Use Cases

  • ImageData Noise/Grain: Fast per-pixel manipulation
  • Offscreen Canvas: Separate rendering to boost performance
  • Throttled Rendering: Frame pacing for grain effects
  • Use Case: Render a subtle grain overlay that scales with canvas size.

Quick Start

Setup a loop that renders grain to a visible canvas at 30fps using an offscreen buffer.