canvas-filmstrip-testing

Test canvas-rendered matrix data progressions for visual regression consistency.

2|Updated Nov 28, 2025
One-click install
npx skills add https://github.com/joshribakoff/surfsim --skill canvas-filmstrip-testing
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: canvas-filmstrip-testing
Source: https://github.com/joshribakoff/surfsim/tree/main/.claude/skills/canvas-filmstrip-testing
Command: npx skills add https://github.com/joshribakoff/surfsim --skill canvas-filmstrip-testing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual regression testing for canvas-rendered matrix progressions to detect rendering drift across time, ensuring consistency in visuals as underlying data or logic changes.

Core Features & Use Cases

  • Validates 8-layer visual pipelines (bathymetry, energy field, shoaling, wave-breaking, energy transfer, foam grid, foam dispersion, foam contours).
  • Verifies color scales, frame alignment, and contour rendering across progression strips.
  • Supports integration with Ladle stories and progression data to reproduce exact visual scenarios in CI.

Quick Start

Run the visual regression suite to compare current canvas filmstrip renders against baselines.

Frequently Asked Questions about canvas-filmstrip-testing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run visual regression tests on canvas-rendered matrix data progressions?

Visual regression tests for canvas progressions compare current filmstrip renders against baseline images to detect rendering drift. You can execute the test suite in CI to verify color scales, frame alignment, and animation fidelity across data layers.

What is visual regression testing for canvas filmstrips used for?

Visual regression testing for canvas filmstrips ensures rendering consistency across time by detecting visual drift as underlying data or logic changes. It validates that color scales, frame alignment, and contour rendering remain stable across multiple visual layers.

Does visual regression testing work with Ladle stories for canvas wave simulations?

Yes, visual regression testing integrates with Ladle stories and progression data to reproduce exact visual scenarios in CI. This integration ensures that canvas-rendered wave simulation layers maintain rendering consistency across updates.

Can I verify color scales and frame alignment across 8-layer visual pipelines?

Yes, the visual regression suite validates 8-layer visual pipelines including bathymetry, energy field, shoaling, wave-breaking, energy transfer, foam grid, foam dispersion, and foam contours. It verifies color scales, frame alignment, and contour rendering across progression strips.

How do I detect rendering drift in canvas animations using progression strips?

To detect rendering drift in canvas animations, compare current filmstrip renders of progression strips against established baselines. This process ensures animation fidelity and visual consistency as underlying matrix data or rendering logic changes.

Are per-layer progressions definitions required to test canvas visual regressions?

Yes, testing visual regressions relies on per-layer progressions definitions, story-based pages, and visual-test definitions to validate both data and visuals. These definitions are necessary to reproduce exact visual scenarios and ensure rendering consistency.