Visual Regression Demo

Toggle visual differences, then snapshot with Percy — ignore regions, scope, widths, percyCSS, and more.

Baseline — diff off → Changed — diff on
Limited offer — 20% off Pro plans this week Appears only when diff is on

Percy · Product hero

Ship UI with confidence

Baseline mode shows the approved design. Flip the toggle to introduce intentional visual changes for Percy review.

Scoped product card

scope

Percy can capture only this element via the scope option.

Product swatch

Aurora Plan

$29/mo

  • • Unlimited visual builds
  • • Cross-browser snapshots
  • • PR status checks

Dynamic content

ignore / percyCSS

This clock updates every second — ignore it in Percy so it does not create false diffs.

--:--:--
Noise badge (hidden via @media only percy)

Responsive layout grid

widths · regions

Captured at multiple widths. Diff mode reverses card order and increases gap.

Card A

Mobile-first column that stacks under 640px.

Card B

Side-by-side on tablet and desktop breakpoints.

Card C

Use layout algorithm regions for structural diffs.

Animated banner

enableJavaScript

Percy disables JS by default in its renderer. Snapshot with enableJavaScript or stabilize with percyCSS.

Tip: open with ?diff=on or ?diff=off for automated runs.