site `leaf-shadow`

Web Device layout component (this site) — not an AUP primitive; not an AUP Web-only widget; not a Markdown directive.

Site package: blocklets/arcblock/.web/components/leaf-shadow/. Resolution: site override > theme default.

This site ships the package today. The player is being added to the ARC default theme (providers/runtime/web-device/themes/default/components/leaf-shadow/, ArcBlock/arc#5329). The owned gobo MP4s stay in this site. Until this site runs an arc that includes the theme package, treat the site copy as the source of truth. Site tracking: #464.

Purpose

Moving canopy-light (or any optical gobo) over a page or a section. Video loop when src is set; procedural WebGL leaf field when it is not. Blend is mix-blend-multiply.

Type on a white field is a document. Light moving over the type is a room: same words, a time of day, a reason to stay. Landing pages stop reading as a CMS template. Switch the clip (canopy, window, water, rain) and the mood changes without rewriting the copy.

Live

Full-page overlay and HUD (this site's lab):

The showcase article wears the same overlay on a real essay: Light on the page, not a picture of trees.

Not this component

Thing	Why it is different
A photograph of the scene	Overlay must be projection on a pale surface, not a subject photo
AUP widgets / Markdown directives	Author entry is layout only
Third-party shadow videos	Do not copy other sites' loops into this repo

When to use

Full-page atmosphere (variant=overlay) on a landing, a long read, or a lab. The type stays the type; the weather sits on top.
Section-local wash (variant=wash) inside a positioned ancestor, when only one block should pick up the light.
Switching among owned clips in a lab HUD, or minting a new clip with gobo-loop from a sentence.

When not to use

The file is a portrait, UI screenshot, or readable type. Multiply will print it onto every paragraph.
The clip is still several megabytes. Compress first.
You need the overlay inside Markdown body with no layout. Put leaf-shadow in layout.aup or a named layout.

Author entry

layout.aup

Overlay with a gobo (lab / article pattern)

component fx slot=leaf-fx component=leaf-shadow
    variant=overlay
    intensity=0.2
    controls=true
    src="/en/articles/leaf-shadow-gobo/canopy.mp4"

Prefer a layout whose ancestors do not create a containing block for position: fixed (transform, filter, or a late-in-flow slot like detail-content's after-content). landing-shell is the proven host on this site. The overlay layer is position: fixed; inset: 0; the HUD is also position: fixed and will pin to the wrong box if the host is transformed.

Procedural fallback (no `src`)

component fx slot=leaf-fx component=leaf-shadow
    variant=overlay
    intensity=0.28

Live hosts on this site:

Lab: /en/leaf-shadow-lab/
Showcase article: /en/articles/leaf-shadow-overlay/
Four owned clips: /en/articles/leaf-shadow-gobo/{canopy,window,caustic,rain-ripple}.mp4

Those MP4s sit in content/articles/leaf-shadow-gobo/ without content.md, so they are not listed as articles.

Props

From manifest.json.

Prop	Type	Default	Role
`variant`	string	`overlay`	`overlay` = fixed full page · `wash` = absolute, section-local
`intensity`	number	`0.2` with `src`, else `0.28`	Opacity 0–1
`speed`	number	`1`	Drift speed (procedural canvas)
`angle`	number	`0.35`	Light shear 0–1 (procedural canvas)
`controls`	boolean	`false`	HUD: toggle + intensity (this site also adds clip buttons)
`src`	string	empty	Looping gobo URL. When set, video replaces the canvas

HUD protocol (script.js)

Buttons are data-leaf-act:

`data-leaf-act`	`data-v`	Effect
`toggle`	—	Pause/hide the layer
`intensity`	`0.12` / `0.2` / `0.45`	Opacity
`src`	URL	Swap the video (`setSrc`)

The theme package HUD is toggle + intensity only. It must not hardcode this site's /en/articles/leaf-shadow-gobo/… URLs. This site package adds four src buttons for the owned demos. script.js already handles data-leaf-act="src" in both copies.

The HUD is pointer-events: auto. The layer is pointer-events: none, so page links stay clickable.

Mint a new clip: `gobo-loop`

Skill: .claude/skills/gobo-loop/SKILL.md.

Rewrite the user's scene as projection on a pale wall or floor. No subject portrait, furniture, or readable text.
Generate a 16 still of that projection.
Image-to-video, 6 seconds, 720p, camera locked, soft optical motion only.
Compress:

bash .claude/skills/gobo-loop/scripts/compress-gobo.sh <in.mp4> blocklets/arcblock/content/articles/leaf-shadow-gobo/<slug>.mp4

Target 100–400 KB, no audio, 12 fps. If ffmpeg is missing, stop and report the uncompressed path. Do not commit a 1 MB+ clip as done.

Point src at /en/articles/leaf-shadow-gobo/<slug>.mp4. Confirm mix-blend-multiply at intensity 0.2 looks like light on paper, not a photo glued on the page.

Failed animal silhouettes (sleeping cat, golden retriever) were deleted. Do not revive them without a new still that reads as umbra.

Surfaces

layout. Not the document Markdown directive surface.

Public status

released on this site (lab + showcase article + four gobo files). Theme promotion of the player is in progress in ArcBlock/arc. Do not document the theme package as already shipping in the arc binary this site currently runs. The MP4s are site media, not theme assets.

Fallback

Situation	Result
No `src`	Procedural canvas
`prefers-reduced-motion: reduce`	Video/canvas paused; intensity capped near 0.16
Dark mode + video overlay	Stays `mix-blend-mode: multiply` (see style.css)
Dark mode + procedural overlay	`mix-blend-mode: screen`
Missing file at `src`	Empty video element; no overlay texture
`controls=false`	No HUD; `aria-hidden="true"` on the root

Sample honesty

Live lab is embedded above. The showcase article is the running overlay on a real essay. Copy AUP from the fences on this page.

Evidence

Item	Path
Site package	`blocklets/arcblock/.web/components/leaf-shadow/`
Manifest	`…/leaf-shadow/manifest.json`
Renderer	`…/leaf-shadow/render.js`
Script	`…/leaf-shadow/script.js`
Style	`…/leaf-shadow/style.css`
Lab	`pages/leaf-shadow-lab/layout.aup`
Article layout	`layouts/leaf-shadow-overlay.aup`
Gobo files	`content/articles/leaf-shadow-gobo/*.mp4`
Skill	`.claude/skills/gobo-loop/SKILL.md`
Compress	`.claude/skills/gobo-loop/scripts/compress-gobo.sh`
Internal matrix	`docs/aup/capability-matrix.md` §5