# Tune Layers

> Adjust --md-parallax-depth and --md-image-position values on existing parallax layers based on user description of visual problems.

- Skill: `nirholas/tune-layers` (Agent Skill)
- Install (CLI): `npx skillmds@latest add nirholas/tune-layers`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nirholas/tune-layers/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: nirholas (https://skillmd.com/u/nirholas)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/nirholas/tune-layers

---


# tune-layers

Adjust layer depth and image position values in `docs/overrides/home.html`.

## 1. Purpose

The two inline CSS variables on each `<picture>` element control the
parallax effect. This skill diagnoses visual problems and adjusts the
values, one layer at a time.

## 2. Variables explained

```
--md-parallax-depth: N
```
Controls how far back the layer sits in 3D space.
- Higher N → layer pushed further back → scrolls slower → more parallax
- Lower N → layer closer → scrolls faster → less parallax
- Adjacent layers should differ by at least 2 for visible separation

```
--md-image-position: X%
```
Maps to CSS `object-position` (horizontal axis).
- `0%` shows the left edge of the image
- `50%` shows the center
- `100%` shows the right edge
- Adjust when the subject of the image is cropped out

## 3. Diagnosis map

| User reports | Likely cause | Fix |
|---|---|---|
| "Far background barely moves" | Depth too high (e.g. 8 on a shallow scene) | Lower far bg depth to 4–6 |
| "Layers look glued together" | Depths too close (e.g. 2, 3, 4, 5) | Spread to 1, 3, 6, 9 |
| "Effect disappears on ultrawide monitor" | Perspective too small | Increase `--md-parallax-perspective` to 3rem |
| "Wrong part of image shows" | `--md-image-position` off | Adjust in 10% increments until subject is centered |
| "Plants/fg layer cut off at bottom" | `object-position` anchors to center | Set `--md-image-position` to `50%` and check image dimensions |
| "Hero scrolls past too quickly" | First group not tall enough | Not a depth issue — see `advanced-css.md` group height |

## 4. Workflow

1. Read current `docs/overrides/home.html`.
2. Print a table of current layer filenames, depths, and positions.
3. Ask the user which layer(s) are problematic if not clear from the description.
4. Propose new values with a one-sentence explanation of the expected change.
5. Write the updated values.
6. Run `mkdocs build` and confirm success.

## 5. Changelog

- `0.1.0` — Initial skill.