Skip to content
P2Lab Stage

Layer Style

Double-click any layer (on the canvas or in the Layers panel) to open Layer style — a tabbed modal where each tab is one effect. Effects are independent: each one has an enable toggle, and only the enabled ones contribute to the final rendered layer.

Effects are stored in the layer’s effects JSON. The seven tabs:

Parallax

Section titled “Parallax”

Makes the layer follow the cursor with a depth + tilt offset on the storefront. Used for the “subtle 3D” feel — background elements barely move, foreground ones drift more.

  • Enable — turn the effect on/off for this layer.
  • Depth (-1 to 1) — translate offset multiplier. Background layers should use values near 0 (or slightly negative); foreground layers up to ~0.7. Negative values move opposite to cursor.
  • Tilt (0 to 1) — rotateX/rotateY multiplier. Adds a tilt-toward-cursor feel.
  • Respect reduced-motion preference — skip parallax for visitors whose OS reports prefers-reduced-motion: reduce. Recommended on for accessibility.

The intensity slider in Stage settings → Parallax is a global multiplier on top of every layer’s depth/tilt. Set it to 0 to disable parallax stage-wide without touching individual layers.

Drop shadow

Section titled “Drop shadow”

A CSS box-shadow projected from the layer’s bounding box.

  • Enable
  • X / Y offset — pixels.
  • Blur — pixels.
  • Spread — pixels.
  • Color — RGBA picker.
  • Inset — checkbox; when on, projects shadow inward.

Stroke

Section titled “Stroke”

A CSS border around the layer.

  • Enable
  • Width — pixels.
  • Style — Solid / Dashed / Dotted / Double / None.
  • Color — RGBA picker.

Background

Section titled “Background”

A solid background color behind the layer’s content.

  • Enable
  • Color — RGBA picker.

Useful for text layers that need a colored band, or for shaping a button hover state via the timeline.

Transform

Section titled “Transform”

3D transforms applied to the layer’s wrapper.

  • Enable
  • Rotation X / Y / Z — degrees.
  • Perspective — pixels (CSS perspective).
  • Scale X / Y — multiplier (1 = no scale).
  • Skew X / Y — degrees.

Useful for parallax tilts you want baked in regardless of cursor, isometric mockups, or simple 3D effects (a card that’s permanently rotated 15° on the Y axis).

Filter

Section titled “Filter”

CSS filter() chain applied to the layer.

  • Enable
  • Brightness — slider.
  • Contrast — slider.
  • Saturate — slider.
  • Blur — pixels.
  • Hue rotate — degrees.
  • Invert — toggle.

These chain in CSS filter order. Use to color-grade an image without re-exporting it, or to gradually focus a blurred image via the timeline.

Click action

Section titled “Click action”

Makes the entire layer clickable, irrespective of layer type. (Button layers already have their own action config; this tab is the equivalent for any other layer.)

  • Enable
  • Action — three modes:
    • Open URL — navigates to a URL.
    • Close popup — dismisses the popup for this visit.
    • Scroll to selector — smoothly scrolls the page to a CSS selector you provide.
  • Value — depends on action: URL for Open URL, CSS selector for Scroll to selector.
  • Open in — for Open URL: Same window or New tab.

Applying effects to multiple layers

Section titled “Applying effects to multiple layers”

Right-click a layer with effects configured → Copy effects. Then select one or many target layers, right-click → Paste effects. The plugin reports how many layers received the paste.

Visual cues in the Layers panel

Section titled “Visual cues in the Layers panel”

A layer with one or more enabled effects shows a small Effects badge in its row (tooltip: “This layer has active effects”). The badge’s eye sub-icon respects the visible flag on each effect — toggling visibility lets you preview the layer without permanently removing the effect.

Persisting

Section titled “Persisting”

Click Save layer style at the bottom of the modal to confirm. The change goes into the editor’s undo stack as one action — undo restores all effects to their previous state. Saving the stage persists it to the database; until then it lives in the working copy.

Where to go next

Section titled “Where to go next”