Skill Tracer
Skills › HyperFrames › media-use › media-treatment-recipes.md

media-treatment-recipes.md

929 lines · skills/media-use/references/media-treatment-recipes.md at a595755

Open on GitHub

Most marks come from matching words in the file, so treat them as pointers.

1# Media treatment recipes
2
3These are optional tested seeds, not the complete capability surface. Read the
4shared policy and choose one relevant section through `media-treatments.md`.
5Agents may modify or combine a seed with compatible canonical controls after
6inspecting the media, or assemble a bespoke payload from
7`hyperframes media-treatment --capabilities --json` when no seed fits.
8

Media treatment recipes

These are optional tested seeds, not the complete capability surface. Read the shared policy and choose one relevant section through media-treatments.md. Agents may modify or combine a seed with compatible canonical controls after inspecting the media, or assemble a bespoke payload from hyperframes media-treatment --capabilities --json when no seed fits.

Raw lines 1 to 8
9## Natural Portrait
11Use for a talking head, interview, presenter, or people-focused photo whose
12intended result is natural, polished, and restrained.
14Do not use when the face is incidental or tiny, the source is intentionally
15neon/monochrome/strongly stylized, or the requested result is beauty retouching.
16This treatment changes the whole frame; it is not a face mask or skin-smoothing
17effect.
19Inspect face exposure, highlight retention, shadow detail, white balance, and
20whether the existing look is intentional. Signalstats do not detect faces or
21creative intent.

Natural Portrait

Use for a talking head, interview, presenter, or people-focused photo whose intended result is natural, polished, and restrained.

Do not use when the face is incidental or tiny, the source is intentionally neon/monochrome/strongly stylized, or the requested result is beauty retouching. This treatment changes the whole frame; it is not a face mask or skin-smoothing effect.

Inspect face exposure, highlight retention, shadow detail, white balance, and whether the existing look is intentional. Signalstats do not detect faces or creative intent.

Raw lines 9 to 22
23### Base payload
25Start here, then tune only when the sampled frames justify it:
27```json
28{ "preset": "skin-soft", "intensity": 0.6 }
29```
31`skin-soft` is a global tonal/color preset whose vibrance math is reduced for
32skin-like colors. It does not blur, retouch, segment, or track a face.

Base payload

Start here, then tune only when the sampled frames justify it:

{ "preset": "skin-soft", "intensity": 0.6 }

skin-soft is a global tonal/color preset whose vibrance math is reduced for skin-like colors. It does not blur, retouch, segment, or track a face.

Raw lines 23 to 33
34### Bounded tuning
36Adjustment values are absolute values in the final payload, not deltas added to
37the preset. Keep changes inside these conservative ranges unless the user asks
38for a stylized result:
40| Property | Natural Portrait range |
41| ----------- | ---------------------- |
42| intensity | 0.45 to 0.75 |
43| exposure | -0.06 to 0.14 |
44| contrast | -0.05 to 0.08 |
45| highlights | -0.18 to -0.04 |
46| shadows | 0.04 to 0.18 |
47| whites | -0.10 to 0.04 |
48| blacks | -0.06 to 0.06 |
49| temperature | -0.05 to 0.10 |
50| tint | -0.03 to 0.05 |
51| vibrance | 0 to 0.06 |
52| saturation | -0.04 to 0.06 |
54Leave grain, blur, and pixelate at zero. A vignette is optional at `0` to
55`0.05` only when it improves subject focus without looking like an effect.
57Manual controls must stay inside their schema section; they are never
58top-level keys. A tuned Natural Portrait payload looks like this:
60```json
62 "preset": "skin-soft",
63 "intensity": 0.58,
64 "adjust": {
65 "highlights": -0.08,
66 "shadows": 0.08,
67 "temperature": 0.02,
68 "vibrance": 0.02
69 },
70 "details": { "vignette": 0.03 }
72```
74Use the same nested shape in `grade-compare` candidate files. `adjust` owns
75tonal/color controls, `details` owns vignette/grain, and `effects` owns blur,
76pixelate, chroma bleed, and the advanced treatment primitives below.
78During the common comparison, reject any result that makes skin implausible,
79loses highlight detail, flattens or desaturates dark skin, or casts clothing and
80background colors accidentally.

Bounded tuning

Adjustment values are absolute values in the final payload, not deltas added to the preset. Keep changes inside these conservative ranges unless the user asks for a stylized result:

PropertyNatural Portrait range
intensity0.45 to 0.75
exposure-0.06 to 0.14
contrast-0.05 to 0.08
highlights-0.18 to -0.04
shadows0.04 to 0.18
whites-0.10 to 0.04
blacks-0.06 to 0.06
temperature-0.05 to 0.10
tint-0.03 to 0.05
vibrance0 to 0.06
saturation-0.04 to 0.06

Leave grain, blur, and pixelate at zero. A vignette is optional at 0 to 0.05 only when it improves subject focus without looking like an effect.

Manual controls must stay inside their schema section; they are never top-level keys. A tuned Natural Portrait payload looks like this:

{
  "preset": "skin-soft",
  "intensity": 0.58,
  "adjust": {
    "highlights": -0.08,
    "shadows": 0.08,
    "temperature": 0.02,
    "vibrance": 0.02
  },
  "details": { "vignette": 0.03 }
}

Use the same nested shape in grade-compare candidate files. adjust owns tonal/color controls, details owns vignette/grain, and effects owns blur, pixelate, chroma bleed, and the advanced treatment primitives below.

During the common comparison, reject any result that makes skin implausible, loses highlight detail, flattens or desaturates dark skin, or casts clothing and background colors accidentally.

Raw lines 34 to 81
82## Product Polish
84Use for photographed or filmed physical products when the goal is clean,
85accurate, dimensional presentation. Protect product color, material texture,
86label readability, specular highlights, and intentional lighting.
88Do not use this treatment for literal app/site screenshots or screen captures;
89follow UI Fidelity below. Do not neutralize a lifestyle scene's deliberate
90ambient color, and do not infer exact brand-color correction without a neutral
91reference or known product color.
93Inspect the product separately from its background. Check white balance, label
94legibility, surface texture, highlight clipping, shadow detail, white point,
95and black point. Statistics cannot identify a white package, metallic
96highlight, amber glass, or intentional warm light.

Product Polish

Use for photographed or filmed physical products when the goal is clean, accurate, dimensional presentation. Protect product color, material texture, label readability, specular highlights, and intentional lighting.

Do not use this treatment for literal app/site screenshots or screen captures; follow UI Fidelity below. Do not neutralize a lifestyle scene's deliberate ambient color, and do not infer exact brand-color correction without a neutral reference or known product color.

Inspect the product separately from its background. Check white balance, label legibility, surface texture, highlight clipping, shadow detail, white point, and black point. Statistics cannot identify a white package, metallic highlight, amber glass, or intentional warm light.

Raw lines 82 to 97
98### Base payload
100Compare this restrained correction against the untouched source:
102```json
104 "intensity": 0.7,
105 "adjust": {
106 "exposure": 0.01,
107 "contrast": 0.06,
108 "highlights": -0.1,
109 "shadows": 0.04,
110 "whites": 0.02,
111 "blacks": -0.03,
112 "vibrance": 0.03,
113 "saturation": 0.02
114 }
116```
118This is a comparison starting point, not an instruction to change an already
119finished source. If the original has accurate color, clean endpoints, and good
120texture, leave the pixels unchanged and polish through framing or motion.

Base payload

Compare this restrained correction against the untouched source:

{
  "intensity": 0.7,
  "adjust": {
    "exposure": 0.01,
    "contrast": 0.06,
    "highlights": -0.1,
    "shadows": 0.04,
    "whites": 0.02,
    "blacks": -0.03,
    "vibrance": 0.03,
    "saturation": 0.02
  }
}

This is a comparison starting point, not an instruction to change an already finished source. If the original has accurate color, clean endpoints, and good texture, leave the pixels unchanged and polish through framing or motion.

Raw lines 98 to 121
122### Bounded tuning
124| Property | Product Polish range |
125| ----------- | -------------------- |
126| intensity | 0.45 to 0.8 |
127| exposure | -0.08 to 0.1 |
128| contrast | 0 to 0.1 |
129| highlights | -0.16 to 0 |
130| shadows | 0 to 0.12 |
131| whites | -0.08 to 0.05 |
132| blacks | -0.06 to 0.04 |
133| temperature | -0.05 to 0.05 |
134| tint | -0.03 to 0.03 |
135| vibrance | 0 to 0.06 |
136| saturation | -0.04 to 0.05 |
138Temperature and tint stay at zero unless the frames show a plausible cast.
139Leave grain, vignette, blur, and pixelate at zero for catalog/e-commerce media.
140For a lifestyle product shot, a vignette up to `0.04` is acceptable only when
141it improves focus without changing the product itself.
143During the common comparison, reject any result that clips white packaging,
144muddies black products, shifts a known brand color, hides texture, or makes
145labels harder to read. Report when preserving the original was the deliberate
146decision.

Bounded tuning

PropertyProduct Polish range
intensity0.45 to 0.8
exposure-0.08 to 0.1
contrast0 to 0.1
highlights-0.16 to 0
shadows0 to 0.12
whites-0.08 to 0.05
blacks-0.06 to 0.04
temperature-0.05 to 0.05
tint-0.03 to 0.03
vibrance0 to 0.06
saturation-0.04 to 0.05

Temperature and tint stay at zero unless the frames show a plausible cast. Leave grain, vignette, blur, and pixelate at zero for catalog/e-commerce media. For a lifestyle product shot, a vignette up to 0.04 is acceptable only when it improves focus without changing the product itself.

During the common comparison, reject any result that clips white packaging, muddies black products, shifts a known brand color, hides texture, or makes labels harder to read. Report when preserving the original was the deliberate decision.

Raw lines 122 to 147
148## UI Fidelity
150Use for literal app, website, dashboard, terminal, slide, or screen-recording
151pixels whose colors and readability are part of the product being shown.
153The default payload is **none**: do not add `data-color-grading`. Global color
154changes affect brand colors, status colors, charts, screenshots, and tiny text
155together, so even a tasteful photographic look can make the demonstration less
156truthful.
158Polish UI footage with crop, scale, pacing, cursor emphasis, surrounding DOM
159overlays, or seek-safe motion outside the captured pixels. If the user
160explicitly asks for a stylized UI look, preview it against the original and
161state that exact UI color is no longer preserved. If a camera filmed a screen,
162correct only a demonstrated capture cast or exposure issue and still verify
163text and brand colors across representative frames.

UI Fidelity

Use for literal app, website, dashboard, terminal, slide, or screen-recording pixels whose colors and readability are part of the product being shown.

The default payload is none: do not add data-color-grading. Global color changes affect brand colors, status colors, charts, screenshots, and tiny text together, so even a tasteful photographic look can make the demonstration less truthful.

Polish UI footage with crop, scale, pacing, cursor emphasis, surrounding DOM overlays, or seek-safe motion outside the captured pixels. If the user explicitly asks for a stylized UI look, preview it against the original and state that exact UI color is no longer preserved. If a camera filmed a screen, correct only a demonstrated capture cast or exposure issue and still verify text and brand colors across representative frames.

Raw lines 148 to 164
165## Film Memory
167Use when the story explicitly calls for a warm memory, restrained flashback,
168personal archive, or film-like recollection. This is not the default meaning of
169"cinematic", and it is not scanned-film-stock emulation.
171Do not use for literal UI, product catalog media, technical demonstrations, or
172footage whose accurate current-day color is important. Use a separate camcorder
173treatment for VHS/REC language. Do not add dust, scratches, light leaks, film
174burns, or halation unless an owned component is available and the requested
175story actually benefits from it.
177Check that the source has enough highlight and shadow detail to tolerate a
178faded treatment, and confirm nostalgia or temporal separation belongs in the
179story. Compare the full moving treatment, not only a still preset card.

Film Memory

Use when the story explicitly calls for a warm memory, restrained flashback, personal archive, or film-like recollection. This is not the default meaning of "cinematic", and it is not scanned-film-stock emulation.

Do not use for literal UI, product catalog media, technical demonstrations, or footage whose accurate current-day color is important. Use a separate camcorder treatment for VHS/REC language. Do not add dust, scratches, light leaks, film burns, or halation unless an owned component is available and the requested story actually benefits from it.

Check that the source has enough highlight and shadow detail to tolerate a faded treatment, and confirm nostalgia or temporal separation belongs in the story. Compare the full moving treatment, not only a still preset card.

Raw lines 165 to 180
181### Static pixel base
183Start with this owned shader recipe:
185```json
187 "preset": "vintage-wash",
188 "intensity": 0.6,
189 "details": {
190 "vignette": 0.12,
191 "grain": 0.12,
192 "grainSize": 0.2,
193 "grainRoughness": 0.6
194 }
196```
198Keep the static values inside these ranges:
200| Property | Film Memory range |
201| -------------- | ----------------- |
202| intensity | 0.5 to 0.75 |
203| vignette | 0.08 to 0.16 |
204| grain | 0.08 to 0.16 |
205| grainSize | 0.16 to 0.24 |
206| grainRoughness | 0.5 to 0.7 |
208The stronger end can flatten dark skin, black clothing, or already-faded
209footage. Compare against the source and lower strength when it does.

Static pixel base

Start with this owned shader recipe:

{
  "preset": "vintage-wash",
  "intensity": 0.6,
  "details": {
    "vignette": 0.12,
    "grain": 0.12,
    "grainSize": 0.2,
    "grainRoughness": 0.6
  }
}

Keep the static values inside these ranges:

PropertyFilm Memory range
intensity0.5 to 0.75
vignette0.08 to 0.16
grain0.08 to 0.16
grainSize0.16 to 0.24
grainRoughness0.5 to 0.7

The stronger end can flatten dark skin, black clothing, or already-faded footage. Compare against the source and lower strength when it does.

Raw lines 181 to 210
211### Temporal character
213Use the existing registered paused GSAP timeline on the same media element:
215- author `--hf-color-grading-exposure: 0` in the media element's inline
216 `style`;
217- move it through a finite irregular sequence within `-0.03` to `0.03`, using
218 gentle `sine.inOut` segments around `0.45` to `0.8` seconds;
219- for gate weave, keep `x`/`y` within `0.15%` of the shorter composition edge,
220 rotation within `0.03` degrees, and scale between `1.005` and `1.01` to
221 protect the frame edges;
222- return close to the starting exposure and transform at the treatment end.
224Do not use randomness, infinite CSS keyframes, timers, or `onUpdate`. Flicker
225is a gentle exposure pulse, not a flash. Weave is slight mechanical drift, not
226handheld shake.
228Also run focused keyframe diagnostics and seek directly to the final-minus-frame
229position. Reject brightness pumping, distracting drift, clipped edges, or
230skin/detail loss. Report the motion ranges and describe this as an HF
231film-memory treatment, not camera-stock emulation. If motion reads as an effect
232before it reads as a memory, reduce or remove it.

Temporal character

Use the existing registered paused GSAP timeline on the same media element:

  • author --hf-color-grading-exposure: 0 in the media element's inline style;
  • move it through a finite irregular sequence within -0.03 to 0.03, using gentle sine.inOut segments around 0.45 to 0.8 seconds;
  • for gate weave, keep x/y within 0.15% of the shorter composition edge, rotation within 0.03 degrees, and scale between 1.005 and 1.01 to protect the frame edges;
  • return close to the starting exposure and transform at the treatment end.

Do not use randomness, infinite CSS keyframes, timers, or onUpdate. Flicker is a gentle exposure pulse, not a flash. Weave is slight mechanical drift, not handheld shake.

Also run focused keyframe diagnostics and seek directly to the final-minus-frame position. Reject brightness pumping, distracting drift, clipped edges, or skin/detail loss. Report the motion ranges and describe this as an HF film-memory treatment, not camera-stock emulation. If motion reads as an effect before it reads as a memory, reduce or remove it.

Raw lines 211 to 233
234## Creator Camcorder
236Use when the story explicitly calls for a creator-camera recording, consumer
237camcorder memory, or restrained digital-video character. This treatment is a
238modern camcorder language, not VHS restoration, CRT simulation, surveillance,
239or a promise to reproduce a specific camera model.
241Do not apply it to literal UI, product catalog media, tiny media tiles, or
242already compressed footage that has distracting color bleed. Do not add a REC
243HUD merely because the source contains a person talking; the camera-device
244language must support the story or the user's requested style.
246Check skin, saturated edges, fine text, source compression, and whether the
247source already has a deliberate camera look. Reject softened chroma that
248damages labels, graphics, or identifying product color. Judge chroma softness
249and grain in motion, not one still.

Creator Camcorder

Use when the story explicitly calls for a creator-camera recording, consumer camcorder memory, or restrained digital-video character. This treatment is a modern camcorder language, not VHS restoration, CRT simulation, surveillance, or a promise to reproduce a specific camera model.

Do not apply it to literal UI, product catalog media, tiny media tiles, or already compressed footage that has distracting color bleed. Do not add a REC HUD merely because the source contains a person talking; the camera-device language must support the story or the user's requested style.

Check skin, saturated edges, fine text, source compression, and whether the source already has a deliberate camera look. Reject softened chroma that damages labels, graphics, or identifying product color. Judge chroma softness and grain in motion, not one still.

Raw lines 234 to 250
251### Static pixel base
253Start with the proven shader payload below, then tune only inside the bounded
254ranges when representative frames justify it:
256```json
258 "intensity": 0.72,
259 "adjust": {
260 "contrast": 0.08,
261 "highlights": -0.05,
262 "shadows": 0.02,
263 "whites": 0.03,
264 "blacks": -0.04,
265 "temperature": -0.03,
266 "tint": -0.015,
267 "vibrance": -0.03,
268 "saturation": -0.06
269 },
270 "details": {
271 "vignette": 0.06,
272 "grain": 0.08,
273 "grainSize": 0.18,
274 "grainRoughness": 0.58
275 },
276 "effects": { "chromaBleed": 0.55 }
278```
280| Property | Creator Camcorder range |
281| -------------- | ----------------------- |
282| intensity | 0.55 to 0.8 |
283| contrast | 0.03 to 0.1 |
284| highlights | -0.1 to 0 |
285| shadows | 0 to 0.06 |
286| whites | 0 to 0.05 |
287| blacks | -0.08 to -0.01 |
288| temperature | -0.06 to 0.04 |
289| tint | -0.03 to 0.02 |
290| vibrance | -0.06 to 0.02 |
291| saturation | -0.12 to -0.02 |
292| vignette | 0.03 to 0.1 |
293| grain | 0.04 to 0.12 |
294| grainSize | 0.14 to 0.24 |
295| grainRoughness | 0.45 to 0.7 |
296| chromaBleed | 0.35 to 0.7 |
298Leave blur and pixelate at zero. Square pixels, scanlines, RGB splitting, and
299tracking noise are different visual languages and are not defaults for this
300treatment.

Static pixel base

Start with the proven shader payload below, then tune only inside the bounded ranges when representative frames justify it:

{
  "intensity": 0.72,
  "adjust": {
    "contrast": 0.08,
    "highlights": -0.05,
    "shadows": 0.02,
    "whites": 0.03,
    "blacks": -0.04,
    "temperature": -0.03,
    "tint": -0.015,
    "vibrance": -0.03,
    "saturation": -0.06
  },
  "details": {
    "vignette": 0.06,
    "grain": 0.08,
    "grainSize": 0.18,
    "grainRoughness": 0.58
  },
  "effects": { "chromaBleed": 0.55 }
}
PropertyCreator Camcorder range
intensity0.55 to 0.8
contrast0.03 to 0.1
highlights-0.1 to 0
shadows0 to 0.06
whites0 to 0.05
blacks-0.08 to -0.01
temperature-0.06 to 0.04
tint-0.03 to 0.02
vibrance-0.06 to 0.02
saturation-0.12 to -0.02
vignette0.03 to 0.1
grain0.04 to 0.12
grainSize0.14 to 0.24
grainRoughness0.45 to 0.7
chromaBleed0.35 to 0.7

Leave blur and pixelate at zero. Square pixels, scanlines, RGB splitting, and tracking noise are different visual languages and are not defaults for this treatment.

Raw lines 251 to 301
302### Optional camera HUD
304When the narrative benefits from explicit recording-device language, install
305the Registry overlay block:
307```bash
308npx hyperframes add camcorder-hud --no-clipboard
309```
311Insert the printed `data-composition-src` host over the intended media range.
312Edit the displayed date/time/mode/counter in
313`compositions/camcorder-hud.html`. The block's paused GSAP timeline derives
314its counter and REC blink from composition time, so play, scrub, and render
315agree. Keep the HUD finite and scoped to the shot.
317The HUD is an optional authored overlay. The pixel payload remains useful
318without it, and the HUD alone is not evidence that the footage was treated.

Optional camera HUD

When the narrative benefits from explicit recording-device language, install the Registry overlay block:

npx hyperframes add camcorder-hud --no-clipboard

Insert the printed data-composition-src host over the intended media range. Edit the displayed date/time/mode/counter in compositions/camcorder-hud.html. The block's paused GSAP timeline derives its counter and REC blink from composition time, so play, scrub, and render agree. Keep the HUD finite and scoped to the shot.

The HUD is an optional authored overlay. The pixel payload remains useful without it, and the HUD alone is not evidence that the footage was treated.

Raw lines 302 to 319
320### Optional source-to-camera reveal
322Global grading intensity fades only primary correction and LUT output; it does
323not fade the independent camcorder effects. For a visible source-to-camera
324mode change, use two synchronized media layers and a finite opacity crossfade
325from untreated to treated footage. Fade the HUD in on that same paused GSAP
326timeline. Do not animate shader state with callbacks or an independent clock.
328Also verify HUD placement and framing in each aspect ratio the project supports.
329Report whether the HUD was used and describe this as an HF camcorder treatment,
330not camera/VHS emulation. If an effect artifact is more noticeable than the
331subject, reduce chroma bleed/grain or keep the source unchanged.

Optional source-to-camera reveal

Global grading intensity fades only primary correction and LUT output; it does not fade the independent camcorder effects. For a visible source-to-camera mode change, use two synchronized media layers and a finite opacity crossfade from untreated to treated footage. Fade the HUD in on that same paused GSAP timeline. Do not animate shader state with callbacks or an independent clock.

Also verify HUD placement and framing in each aspect ratio the project supports. Report whether the HUD was used and describe this as an HF camcorder treatment, not camera/VHS emulation. If an effect artifact is more noticeable than the subject, reduce chroma bleed/grain or keep the source unchanged.

Raw lines 320 to 332
333## VHS Playback
335Use when the story explicitly calls for analog home-video tape, a dated archive,
336or a visibly degraded VHS playback. This treatment is not Creator Camcorder,
337generic pixelation, CRT display simulation, or a default retro look.
339Do not use for literal UI, product catalog media, small text, clean modern
340creator footage, or any source whose identifying color/detail must remain exact.
341Inspect high-contrast vertical edges, faces, saturated objects, and the bottom
342of the frame in motion. Analog damage must support the story without making the
343subject hard to read.

VHS Playback

Use when the story explicitly calls for analog home-video tape, a dated archive, or a visibly degraded VHS playback. This treatment is not Creator Camcorder, generic pixelation, CRT display simulation, or a default retro look.

Do not use for literal UI, product catalog media, small text, clean modern creator footage, or any source whose identifying color/detail must remain exact. Inspect high-contrast vertical edges, faces, saturated objects, and the bottom of the frame in motion. Analog damage must support the story without making the subject hard to read.

Raw lines 333 to 344
345### Pixel payload
347Start with the complete proven combination, not `tapeDamage` alone:
349```json
351 "intensity": 1,
352 "adjust": { "contrast": -0.04, "saturation": -0.08 },
353 "details": {
354 "grain": 0.16,
355 "grainSize": 0.12,
356 "grainRoughness": 0.72
357 },
358 "effects": {
359 "tapeDamage": 0.82,
360 "tapeTracking": 0.85,
361 "tapeNoise": 0.3,
362 "tapeSpeed": 0.5,
363 "chromaBleed": 0.5,
364 "chromaticAberration": 0.18,
365 "chromaticAngle": 0,
366 "scanlines": 0.35,
367 "scanlineCount": 0.17,
368 "scanlineSoftness": 1,
369 "digitalGlitch": 0.32,
370 "digitalGlitchColorSplit": 0,
371 "digitalGlitchLineTear": 0.08,
372 "digitalGlitchPixelate": 0,
373 "digitalGlitchBlockAmount": 0,
374 "digitalGlitchBlockDisplacement": 0,
375 "digitalGlitchBlockOpacity": 0,
376 "digitalGlitchSpeed": 0.5
377 }
379```
381| Property | VHS Playback range |
382| --------------------- | ------------------ |
383| intensity | 0.75 to 1 |
384| contrast | -0.1 to 0 |
385| saturation | -0.16 to 0 |
386| grain | 0.08 to 0.18 |
387| grainSize | 0.08 to 0.18 |
388| grainRoughness | 0.55 to 0.8 |
389| tapeDamage | 0.65 to 0.9 |
390| tapeTracking | 0.5 to 0.9 |
391| tapeNoise | 0.15 to 0.45 |
392| tapeSpeed | 0.35 to 0.65 |
393| chromaBleed | 0.35 to 0.65 |
394| chromaticAberration | 0.08 to 0.22 |
395| scanlines | 0.2 to 0.4 |
396| scanlineCount | 0.14 to 0.2 |
397| digitalGlitch | 0.2 to 0.4 |
398| digitalGlitchLineTear | 0.04 to 0.1 |
400`tapeDamage` owns deterministic horizontal line jitter, slow time-base wobble,
401bottom-edge head switching, luma bandwidth loss, restrained ghosting, noise,
402and sparse dropouts. Its subordinate tracking/noise/speed controls add bounded
403moving tape tears and control their signal character without introducing a new
404clock. `chromaBleed` separately reduces horizontal chroma detail. The restrained
405scanline and chromatic settings supply the remaining tape-playback character.
406The digital stage is used only for rare horizontal row tears: keep its color
407split, pixelation, block displacement, block opacity, and corruption values at
408zero. Leave blur, CRT curvature, generic pixelation, and a camera HUD off.
410These values are an original HyperFrames recipe calibrated on the same public
411Orange Cat source used for the external visual reference. They are not copied
412shader code or a claim of pixel-identical output from the external reference. The scanline count is
413mapped to the reference's approximately 127-cycle primary line pattern; the HF
414tracking math stays bounded in media pixels and uses the composition clock.
416The shader damage evolves from the existing deterministic media time, so it
417needs no CSS loop or private timeline. Global grading intensity does not fade
418tape damage or other independent effects. If the story requires a finite
419source-to-tape reveal, crossfade synchronized untreated and treated media layers
420on the host's paused GSAP timeline. During the common workflow, inspect dense
421consecutive frames and reject hard edge tearing, face
422smearing, frozen noise, square blocks, blank borders, or a bottom disturbance
423that competes with the subject.

Pixel payload

Start with the complete proven combination, not tapeDamage alone:

{
  "intensity": 1,
  "adjust": { "contrast": -0.04, "saturation": -0.08 },
  "details": {
    "grain": 0.16,
    "grainSize": 0.12,
    "grainRoughness": 0.72
  },
  "effects": {
    "tapeDamage": 0.82,
    "tapeTracking": 0.85,
    "tapeNoise": 0.3,
    "tapeSpeed": 0.5,
    "chromaBleed": 0.5,
    "chromaticAberration": 0.18,
    "chromaticAngle": 0,
    "scanlines": 0.35,
    "scanlineCount": 0.17,
    "scanlineSoftness": 1,
    "digitalGlitch": 0.32,
    "digitalGlitchColorSplit": 0,
    "digitalGlitchLineTear": 0.08,
    "digitalGlitchPixelate": 0,
    "digitalGlitchBlockAmount": 0,
    "digitalGlitchBlockDisplacement": 0,
    "digitalGlitchBlockOpacity": 0,
    "digitalGlitchSpeed": 0.5
  }
}
PropertyVHS Playback range
intensity0.75 to 1
contrast-0.1 to 0
saturation-0.16 to 0
grain0.08 to 0.18
grainSize0.08 to 0.18
grainRoughness0.55 to 0.8
tapeDamage0.65 to 0.9
tapeTracking0.5 to 0.9
tapeNoise0.15 to 0.45
tapeSpeed0.35 to 0.65
chromaBleed0.35 to 0.65
chromaticAberration0.08 to 0.22
scanlines0.2 to 0.4
scanlineCount0.14 to 0.2
digitalGlitch0.2 to 0.4
digitalGlitchLineTear0.04 to 0.1

tapeDamage owns deterministic horizontal line jitter, slow time-base wobble, bottom-edge head switching, luma bandwidth loss, restrained ghosting, noise, and sparse dropouts. Its subordinate tracking/noise/speed controls add bounded moving tape tears and control their signal character without introducing a new clock. chromaBleed separately reduces horizontal chroma detail. The restrained scanline and chromatic settings supply the remaining tape-playback character. The digital stage is used only for rare horizontal row tears: keep its color split, pixelation, block displacement, block opacity, and corruption values at zero. Leave blur, CRT curvature, generic pixelation, and a camera HUD off.

These values are an original HyperFrames recipe calibrated on the same public Orange Cat source used for the external visual reference. They are not copied shader code or a claim of pixel-identical output from the external reference. The scanline count is mapped to the reference's approximately 127-cycle primary line pattern; the HF tracking math stays bounded in media pixels and uses the composition clock.

The shader damage evolves from the existing deterministic media time, so it needs no CSS loop or private timeline. Global grading intensity does not fade tape damage or other independent effects. If the story requires a finite source-to-tape reveal, crossfade synchronized untreated and treated media layers on the host's paused GSAP timeline. During the common workflow, inspect dense consecutive frames and reject hard edge tearing, face smearing, frozen noise, square blocks, blank borders, or a bottom disturbance that competes with the subject.

Raw lines 345 to 424
425## 8mm Home Movie
427Use for personal archive, family-memory, childhood, travel-memory, or explicit
428small-gauge home-movie language. This is stronger and more materially film-like
429than Film Memory, but it is still an owned HyperFrames treatment rather than a
430claim to reproduce a named film stock, camera, or laboratory process.
432Do not use for literal UI, technical demonstrations, catalog products, clean
433interviews, or footage where dust/scratches would imply false provenance. Check
434skin, highlights, dark clothing, and frame edges before applying it.

8mm Home Movie

Use for personal archive, family-memory, childhood, travel-memory, or explicit small-gauge home-movie language. This is stronger and more materially film-like than Film Memory, but it is still an owned HyperFrames treatment rather than a claim to reproduce a named film stock, camera, or laboratory process.

Do not use for literal UI, technical demonstrations, catalog products, clean interviews, or footage where dust/scratches would imply false provenance. Check skin, highlights, dark clothing, and frame edges before applying it.

Raw lines 425 to 435
436### Pixel payload
438```json
440 "preset": "vintage-wash",
441 "intensity": 0.72,
442 "details": {
443 "vignette": 0.28,
444 "vignetteMidpoint": 0.54,
445 "vignetteFeather": 0.72,
446 "grain": 0.34,
447 "grainSize": 0.18,
448 "grainRoughness": 0.72
449 },
450 "effects": { "filmArtifacts": 0.62 }
452```
454| Property | 8mm Home Movie range |
455| -------------- | -------------------- |
456| intensity | 0.6 to 0.8 |
457| vignette | 0.18 to 0.34 |
458| grain | 0.22 to 0.42 |
459| grainSize | 0.12 to 0.24 |
460| grainRoughness | 0.6 to 0.8 |
461| filmArtifacts | 0.35 to 0.7 |
463`filmArtifacts` owns only deterministic sparse dust and short scratches. The
464existing preset/details own color, vignette, and grain; the host's paused GSAP
465timeline owns optional gate weave. Keep weave within `0.15%` of the shorter
466composition edge, rotation within `0.03` degrees, and scale between `1.005` and
467`1.015`. Use finite `sine.inOut` segments around `0.6` to `1` second, return
468near the starting transform, and never use randomness, timers, `onUpdate`, or
469an infinite CSS animation.
471Reject a result when dust is constantly visible, scratches persist unnaturally,
472the frame pumps, weave exposes an edge, highlights turn muddy, or the material
473artifacts are more noticeable than the memory. For a subtler nostalgic result,
474use Film Memory instead.

Pixel payload

{
  "preset": "vintage-wash",
  "intensity": 0.72,
  "details": {
    "vignette": 0.28,
    "vignetteMidpoint": 0.54,
    "vignetteFeather": 0.72,
    "grain": 0.34,
    "grainSize": 0.18,
    "grainRoughness": 0.72
  },
  "effects": { "filmArtifacts": 0.62 }
}
Property8mm Home Movie range
intensity0.6 to 0.8
vignette0.18 to 0.34
grain0.22 to 0.42
grainSize0.12 to 0.24
grainRoughness0.6 to 0.8
filmArtifacts0.35 to 0.7

filmArtifacts owns only deterministic sparse dust and short scratches. The existing preset/details own color, vignette, and grain; the host's paused GSAP timeline owns optional gate weave. Keep weave within 0.15% of the shorter composition edge, rotation within 0.03 degrees, and scale between 1.005 and 1.015. Use finite sine.inOut segments around 0.6 to 1 second, return near the starting transform, and never use randomness, timers, onUpdate, or an infinite CSS animation.

Reject a result when dust is constantly visible, scratches persist unnaturally, the frame pumps, weave exposes an edge, highlights turn muddy, or the material artifacts are more noticeable than the memory. For a subtler nostalgic result, use Film Memory instead.

Raw lines 436 to 475
476## Editorial Halftone
478Use for print/editorial transitions, poster frames, comic/newsprint language,
479stylized product or portrait beats, and graphic sequences where visible ink
480screening is the point. This is a real four-angle CMYK raster treatment, not a
481dotted DOM overlay.
483Do not use on literal UI, dense text, tiny labels, footage that must remain
484photorealistic, or a long talking-head segment unless the user explicitly asks
485for strong print stylization. Preserve text/captions as ungraded DOM above the
486media whenever they must stay readable.

Editorial Halftone

Use for print/editorial transitions, poster frames, comic/newsprint language, stylized product or portrait beats, and graphic sequences where visible ink screening is the point. This is a real four-angle CMYK raster treatment, not a dotted DOM overlay.

Do not use on literal UI, dense text, tiny labels, footage that must remain photorealistic, or a long talking-head segment unless the user explicitly asks for strong print stylization. Preserve text/captions as ungraded DOM above the media whenever they must stay readable.

Raw lines 476 to 487
488### Pixel payload
490```json
492 "intensity": 1,
493 "adjust": { "contrast": 0.04, "saturation": 0.04 },
494 "effects": { "halftone": 0.94, "halftoneSize": 0.36 }
496```
498| Property | Editorial Halftone range |
499| ------------ | ------------------------ |
500| intensity | 0.8 to 1 |
501| contrast | -0.02 to 0.08 |
502| saturation | -0.04 to 0.08 |
503| halftone | 0.75 to 1 |
504| halftoneSize | 0.15 to 0.55 |
506The shader uses fixed C/M/Y/K screen angles of 15/75/0/45 degrees, separate ink
507coverage, a warm paper base, and resolution-aware dot-cell sizing. Keep those
508screen semantics fixed; tune only amount and size unless a future visual proof
509justifies a broader schema. Judge the result at final output resolution because
510browser zoom can misrepresent the screen. Reject unstable moire, unreadable
511subjects, clipped ink detail, excessive dot size, or any treatment that looks
512like a transparent dot texture laid over unchanged footage.

Pixel payload

{
  "intensity": 1,
  "adjust": { "contrast": 0.04, "saturation": 0.04 },
  "effects": { "halftone": 0.94, "halftoneSize": 0.36 }
}
PropertyEditorial Halftone range
intensity0.8 to 1
contrast-0.02 to 0.08
saturation-0.04 to 0.08
halftone0.75 to 1
halftoneSize0.15 to 0.55

The shader uses fixed C/M/Y/K screen angles of 15/75/0/45 degrees, separate ink coverage, a warm paper base, and resolution-aware dot-cell sizing. Keep those screen semantics fixed; tune only amount and size unless a future visual proof justifies a broader schema. Judge the result at final output resolution because browser zoom can misrepresent the screen. Reject unstable moire, unreadable subjects, clipped ink detail, excessive dot size, or any treatment that looks like a transparent dot texture laid over unchanged footage.

Raw lines 488 to 513
514## Two-Ink Editorial Print
516Use for poster frames, editorial portraits, music/social cutaways, zine
517graphics, and bold print-led transitions where two visible spot inks are more
518appropriate than photographic color. This is a fixed original HyperFrames
519vermilion/teal treatment, not a claim to emulate a named printer, ink set, or
520commercial print process.
522Do not use for literal UI, brand-color-critical products, small labels, natural
523talking heads, or media that must remain photorealistic. Keep captions and
524graphics as normal DOM above the treated media.

Two-Ink Editorial Print

Use for poster frames, editorial portraits, music/social cutaways, zine graphics, and bold print-led transitions where two visible spot inks are more appropriate than photographic color. This is a fixed original HyperFrames vermilion/teal treatment, not a claim to emulate a named printer, ink set, or commercial print process.

Do not use for literal UI, brand-color-critical products, small labels, natural talking heads, or media that must remain photorealistic. Keep captions and graphics as normal DOM above the treated media.

Raw lines 514 to 525
526### Pixel payload
528```json
530 "intensity": 1,
531 "adjust": { "contrast": 0.08, "highlights": -0.06, "shadows": 0.04 },
532 "effects": { "twoInkPrint": 1, "twoInkPrintSize": 0.42 }
534```
536| Property | Two-Ink range |
537| --------------- | ------------- |
538| intensity | 0.8 to 1 |
539| contrast | 0.02 to 0.1 |
540| highlights | -0.1 to 0 |
541| shadows | 0 to 0.08 |
542| twoInkPrint | 0.8 to 1 |
543| twoInkPrintSize | 0.18 to 0.55 |
545The shader maps warm midtones to vermilion, deep/cool shadows to teal, and
546shared dark coverage to a dark overprint on warm paper. It uses separate
54715/75-degree screens, a subtle fixed registration offset, deterministic paper
548texture, and resolution-aware dot sizing. Do not combine it with `halftone` or
549a duotone LUT: that re-separates the result and defeats the two-ink contract.
551Judge it at output resolution and across multiple frames. Reject missing second
552ink, crushed faces, unstable moire, illegible silhouettes, or a result that
553reads as a red tint with dots rather than two screened inks.

Pixel payload

{
  "intensity": 1,
  "adjust": { "contrast": 0.08, "highlights": -0.06, "shadows": 0.04 },
  "effects": { "twoInkPrint": 1, "twoInkPrintSize": 0.42 }
}
PropertyTwo-Ink range
intensity0.8 to 1
contrast0.02 to 0.1
highlights-0.1 to 0
shadows0 to 0.08
twoInkPrint0.8 to 1
twoInkPrintSize0.18 to 0.55

The shader maps warm midtones to vermilion, deep/cool shadows to teal, and shared dark coverage to a dark overprint on warm paper. It uses separate 15/75-degree screens, a subtle fixed registration offset, deterministic paper texture, and resolution-aware dot sizing. Do not combine it with halftone or a duotone LUT: that re-separates the result and defeats the two-ink contract.

Judge it at output resolution and across multiple frames. Reject missing second ink, crushed faces, unstable moire, illegible silhouettes, or a result that reads as a red tint with dots rather than two screened inks.

Raw lines 526 to 554
555## Monochrome Screen Print
557Use for graphic portrait beats, posterized social inserts, newspaper-like
558screens, or a finite transition into visible monochrome cells. Keep captions
559and typography as normal DOM above the treated media.
561```json
563 "intensity": 1,
564 "effects": {
565 "monoScreen": 1,
566 "monoScreenSize": 0.35,
567 "monoScreenAngle": 0.25,
568 "monoScreenSpread": 0.3,
569 "monoScreenShape": 0,
570 "monoScreenInvert": 0
571 },
572 "palette": ["#111319", "#f2ecdc"]
574```
576Use `monoScreenShape` `0..4` for circle, square, diamond, triangle, or line.
577Keep cell size within `0.15..0.55` and spread within `0.15..0.55`. Reject faces
578that lose their silhouette, unstable moire, or cells too small to survive the
579final encoded resolution.

Monochrome Screen Print

Use for graphic portrait beats, posterized social inserts, newspaper-like screens, or a finite transition into visible monochrome cells. Keep captions and typography as normal DOM above the treated media.

{
  "intensity": 1,
  "effects": {
    "monoScreen": 1,
    "monoScreenSize": 0.35,
    "monoScreenAngle": 0.25,
    "monoScreenSpread": 0.3,
    "monoScreenShape": 0,
    "monoScreenInvert": 0
  },
  "palette": ["#111319", "#f2ecdc"]
}

Use monoScreenShape 0..4 for circle, square, diamond, triangle, or line. Keep cell size within 0.15..0.55 and spread within 0.15..0.55. Reject faces that lose their silhouette, unstable moire, or cells too small to survive the final encoded resolution.

Raw lines 555 to 580
581## Engraved Illustration
583Use for editorial portraits, historical/technical illustration, title-card
584cutaways, or a source-to-line-art reveal. It is not routine correction and
585should not be applied to literal UI or brand-color-critical product footage.
587```json
589 "intensity": 1,
590 "effects": {
591 "engraving": 1,
592 "engravingSpacing": 0.4118,
593 "engravingMinThickness": 0.2,
594 "engravingMaxThickness": 0.4571,
595 "engravingAngle": 0.25,
596 "engravingContrast": 0.4667,
597 "engravingSharpness": 0.59,
598 "engravingWave": 0.2,
599 "engravingWaveFrequency": 0.2222
600 },
601 "palette": ["#101216", "#f3eddf"]
603```
605Preserve the calibrated base first. Tune spacing within `0.25..0.6`, contrast
606within `0.3..0.65`, and wave within `0..0.35`. Reject squeezed framing, broken
607contours, noisy flat backgrounds, or lines that flicker across moving frames.

Engraved Illustration

Use for editorial portraits, historical/technical illustration, title-card cutaways, or a source-to-line-art reveal. It is not routine correction and should not be applied to literal UI or brand-color-critical product footage.

{
  "intensity": 1,
  "effects": {
    "engraving": 1,
    "engravingSpacing": 0.4118,
    "engravingMinThickness": 0.2,
    "engravingMaxThickness": 0.4571,
    "engravingAngle": 0.25,
    "engravingContrast": 0.4667,
    "engravingSharpness": 0.59,
    "engravingWave": 0.2,
    "engravingWaveFrequency": 0.2222
  },
  "palette": ["#101216", "#f3eddf"]
}

Preserve the calibrated base first. Tune spacing within 0.25..0.6, contrast within 0.3..0.65, and wave within 0..0.35. Reject squeezed framing, broken contours, noisy flat backgrounds, or lines that flicker across moving frames.

Raw lines 581 to 608
609## Crosshatched Sketch
611Use for hand-rendered editorial beats, comic/documentary cutaways, and short
612illustrative transformations where multiple line directions should preserve
613the subject contour.
615```json
617 "intensity": 1,
618 "effects": {
619 "crosshatch": 1,
620 "crosshatchSpacing": 0.28,
621 "crosshatchThickness": 0.25,
622 "crosshatchAngle": 0.25,
623 "crosshatchContrast": 0.3333,
624 "crosshatchEdges": 0.5,
625 "crosshatchLineWeight": 0,
626 "crosshatchWave": 0.33,
627 "crosshatchWaveFrequency": 0.2222
628 },
629 "palette": ["#101216", "#f3eddf"]
631```
633Tune spacing within `0.18..0.5`, edge detail within `0.3..0.7`, and wave within
634`0.1..0.45`. Reject distorted aspect ratio, dense black fill that hides the
635subject, or temporal shimmer stronger than the intended sketch language.

Crosshatched Sketch

Use for hand-rendered editorial beats, comic/documentary cutaways, and short illustrative transformations where multiple line directions should preserve the subject contour.

{
  "intensity": 1,
  "effects": {
    "crosshatch": 1,
    "crosshatchSpacing": 0.28,
    "crosshatchThickness": 0.25,
    "crosshatchAngle": 0.25,
    "crosshatchContrast": 0.3333,
    "crosshatchEdges": 0.5,
    "crosshatchLineWeight": 0,
    "crosshatchWave": 0.33,
    "crosshatchWaveFrequency": 0.2222
  },
  "palette": ["#101216", "#f3eddf"]
}

Tune spacing within 0.18..0.5, edge detail within 0.3..0.7, and wave within 0.1..0.45. Reject distorted aspect ratio, dense black fill that hides the subject, or temporal shimmer stronger than the intended sketch language.

Raw lines 609 to 636
637## CRT Display
639Use when the media is intentionally shown as an older monitor, terminal, game
640screen, or broadcast display. Curvature alone is geometry, not a complete CRT
641treatment, so pair it with restrained scanlines and only slight channel
642separation.
644```json
646 "intensity": 1,
647 "effects": {
648 "crtCurvature": 0.2,
649 "scanlines": 0.35,
650 "scanlineCount": 0.17,
651 "scanlineSoftness": 1,
652 "chromaticAberration": 0.08,
653 "chromaticAngle": 0
654 }
656```
658Keep curvature within `0.08..0.28`, scanlines within `0.18..0.45`, and channel
659separation within `0..0.12`. Reject excessive black corners, unreadable UI,
660large color fringes, or applying the display language to ordinary footage when
661the user only asked for correction.

CRT Display

Use when the media is intentionally shown as an older monitor, terminal, game screen, or broadcast display. Curvature alone is geometry, not a complete CRT treatment, so pair it with restrained scanlines and only slight channel separation.

{
  "intensity": 1,
  "effects": {
    "crtCurvature": 0.2,
    "scanlines": 0.35,
    "scanlineCount": 0.17,
    "scanlineSoftness": 1,
    "chromaticAberration": 0.08,
    "chromaticAngle": 0
  }
}

Keep curvature within 0.08..0.28, scanlines within 0.18..0.45, and channel separation within 0..0.12. Reject excessive black corners, unreadable UI, large color fringes, or applying the display language to ordinary footage when the user only asked for correction.

Raw lines 637 to 662
663## Procedural ASCII
665Use for a deliberate terminal, code, data, surveillance, editorial, or
666source-to-character reveal. This is a real shader-generated 5x7 glyph field,
667not monospace text placed over unchanged footage.
669Do not use as routine talking-head polish, on literal UI or dense text, or when
670recognizing a face/product precisely matters. Keep captions and graphics as
671normal DOM above the treated media.
673Choose one of these proven starting points:
675```json
677 "effects": { "ascii": 1, "asciiSize": 0.08, "asciiInvert": 1 },
678 "palette": ["#020605", "#38ff78"]
680```
682The first is **Terminal ASCII**: dark field, bright green glyphs, appropriate
683for code/data/device language. For a warmer print-like **Editorial ASCII**, use:
685```json
687 "effects": { "ascii": 1, "asciiSize": 0.066, "asciiInvert": 0 },
688 "palette": ["#0b0d0d", "#eee9db"]
690```
692Keep `ascii` between `0.75` and `1` for a fully readable treatment and
693`asciiSize` between `0.04` and `0.15`. A finite reveal may author
694`--hf-color-grading-ascii: 0` inline and tween it to `1` with the registered
695paused GSAP timeline. Reject unstable cells, lost silhouette/face structure,
696unreadable composition, or a palette that conflicts with the project.

Procedural ASCII

Use for a deliberate terminal, code, data, surveillance, editorial, or source-to-character reveal. This is a real shader-generated 5x7 glyph field, not monospace text placed over unchanged footage.

Do not use as routine talking-head polish, on literal UI or dense text, or when recognizing a face/product precisely matters. Keep captions and graphics as normal DOM above the treated media.

Choose one of these proven starting points:

{
  "effects": { "ascii": 1, "asciiSize": 0.08, "asciiInvert": 1 },
  "palette": ["#020605", "#38ff78"]
}

The first is Terminal ASCII: dark field, bright green glyphs, appropriate for code/data/device language. For a warmer print-like Editorial ASCII, use:

{
  "effects": { "ascii": 1, "asciiSize": 0.066, "asciiInvert": 0 },
  "palette": ["#0b0d0d", "#eee9db"]
}

Keep ascii between 0.75 and 1 for a fully readable treatment and asciiSize between 0.04 and 0.15. A finite reveal may author --hf-color-grading-ascii: 0 inline and tween it to 1 with the registered paused GSAP timeline. Reject unstable cells, lost silhouette/face structure, unreadable composition, or a palette that conflicts with the project.

Raw lines 663 to 697
698## Ordered Palette Dither
700Use for posterized social beats, music/editorial cutaways, pixel-art language,
701or a finite source-to-palette reveal. The shader uses a stable 4x4 Bayer
702threshold matrix and an explicit dark-to-light palette. Do not describe it as
703Floyd-Steinberg, Atkinson, or another sequential error-diffusion process.
705Do not use on literal UI, brand-color-critical products, tiny labels, or long
706photorealistic sections. Start with one of these original palettes:
708```json
710 "effects": { "dither": 1, "ditherSize": 0.25 },
711 "palette": ["#17121a", "#824c50", "#e09873", "#f7ddb1"]
713```
715The four-color option is **Warm Print**. For a louder social/music beat, use
716the six-color **Electric Ink** palette:
718```json
720 "effects": { "dither": 1, "ditherSize": 0.4 },
721 "palette": ["#080717", "#3c185f", "#7e2278", "#d9339f", "#ff6b66", "#aafae0"]
723```
725HyperFrames also owns these named ramps. The name is an authoring shortcut;
726persist the listed colors through the existing `palette` array:
728| Group | Palette ID | Ordered colors |
729| ----------- | ---------------- | ---------------------------------------------------------------- |
730| Classic | `noir` | `#000000`, `#ffffff` |
731| Classic | `ink-paper` | `#1a1a2e`, `#f5f5dc` |
732| Classic | `terminal` | `#001100`, `#00ff00` |
733| Classic | `amber-glow` | `#1a0f00`, `#ffcc00` |
734| Classic | `handheld-green` | `#0f380f`, `#306230`, `#8bac0f`, `#9bbc0f` |
735| Mood | `golden-hour` | `#1a1205`, `#4a3510`, `#8b6914`, `#d4a017`, `#fff8dc` |
736| Mood | `deep-sea` | `#0a1628`, `#1a3a5c`, `#2d6187`, `#5ba4c9`, `#a8dce8` |
737| Mood | `arctic-night` | `#0a0a14`, `#1a2a4a`, `#3a5a8a`, `#6a9aca`, `#cae8ff` |
738| Mood | `synthwave` | `#120458`, `#7b2cbf`, `#e040fb`, `#ff6ec7`, `#fff59d` |
739| Mood | `vaporwave` | `#1a0a2e`, `#3d1a5c`, `#ff71ce`, `#01cdfe`, `#fffb96` |
740| Mood | `forest` | `#1a2e1a`, `#2d4a2d`, `#4a7c4a`, `#7ab37a`, `#c8e6c8` |
741| Mono | `sepia` | `#1a1610`, `#3d3020`, `#6b5a40`, `#a89070`, `#e8dcc8` |
742| Mono | `blueprint` | `#001830`, `#003060`, `#0050a0`, `#0080e0`, `#e0f0ff` |
743| HyperFrames | `warm-print` | `#17121a`, `#824c50`, `#e09873`, `#f7ddb1` |
744| HyperFrames | `electric-ink` | `#080717`, `#3c185f`, `#7e2278`, `#d9339f`, `#ff6b66`, `#aafae0` |
746Choose by inspected source and project language, not by palette name alone.
747For example, `terminal` fits device/code language, `warm-print` fits editorial
748print, and `synthwave` is an intentional stylization rather than generic polish.
750`palette` must contain two to six exact `#RRGGBB` colors in authored order. Use
751dark-to-light order for this treatment; the runtime validates colors but does
752not reorder them, so reversing the array intentionally inverts the mapping.
753Keep `dither` between `0.7` and `1` and `ditherSize` between `0.1` and `0.5`.
754A finite reveal may author `--hf-color-grading-dither: 0` inline and tween it
755to the chosen amount with GSAP. Judge the moving result at output resolution;
756reject shimmer, lost subject structure, accidental muddy intermediate colors,
757or a palette chosen without regard to the project's design language.

Ordered Palette Dither

Use for posterized social beats, music/editorial cutaways, pixel-art language, or a finite source-to-palette reveal. The shader uses a stable 4x4 Bayer threshold matrix and an explicit dark-to-light palette. Do not describe it as Floyd-Steinberg, Atkinson, or another sequential error-diffusion process.

Do not use on literal UI, brand-color-critical products, tiny labels, or long photorealistic sections. Start with one of these original palettes:

{
  "effects": { "dither": 1, "ditherSize": 0.25 },
  "palette": ["#17121a", "#824c50", "#e09873", "#f7ddb1"]
}

The four-color option is Warm Print. For a louder social/music beat, use the six-color Electric Ink palette:

{
  "effects": { "dither": 1, "ditherSize": 0.4 },
  "palette": ["#080717", "#3c185f", "#7e2278", "#d9339f", "#ff6b66", "#aafae0"]
}

HyperFrames also owns these named ramps. The name is an authoring shortcut; persist the listed colors through the existing palette array:

GroupPalette IDOrdered colors
Classicnoir#000000, #ffffff
Classicink-paper#1a1a2e, #f5f5dc
Classicterminal#001100, #00ff00
Classicamber-glow#1a0f00, #ffcc00
Classichandheld-green#0f380f, #306230, #8bac0f, #9bbc0f
Moodgolden-hour#1a1205, #4a3510, #8b6914, #d4a017, #fff8dc
Mooddeep-sea#0a1628, #1a3a5c, #2d6187, #5ba4c9, #a8dce8
Moodarctic-night#0a0a14, #1a2a4a, #3a5a8a, #6a9aca, #cae8ff
Moodsynthwave#120458, #7b2cbf, #e040fb, #ff6ec7, #fff59d
Moodvaporwave#1a0a2e, #3d1a5c, #ff71ce, #01cdfe, #fffb96
Moodforest#1a2e1a, #2d4a2d, #4a7c4a, #7ab37a, #c8e6c8
Monosepia#1a1610, #3d3020, #6b5a40, #a89070, #e8dcc8
Monoblueprint#001830, #003060, #0050a0, #0080e0, #e0f0ff
HyperFrameswarm-print#17121a, #824c50, #e09873, #f7ddb1
HyperFrameselectric-ink#080717, #3c185f, #7e2278, #d9339f, #ff6b66, #aafae0

Choose by inspected source and project language, not by palette name alone. For example, terminal fits device/code language, warm-print fits editorial print, and synthwave is an intentional stylization rather than generic polish.

palette must contain two to six exact #RRGGBB colors in authored order. Use dark-to-light order for this treatment; the runtime validates colors but does not reorder them, so reversing the array intentionally inverts the mapping. Keep dither between 0.7 and 1 and ditherSize between 0.1 and 0.5. A finite reveal may author --hf-color-grading-dither: 0 inline and tween it to the chosen amount with GSAP. Judge the moving result at output resolution; reject shimmer, lost subject structure, accidental muddy intermediate colors, or a palette chosen without regard to the project's design language.

Raw lines 698 to 758
759## Cached Error Diffusion
761Use exact error diffusion for a deliberate 1-bit Macintosh, newspaper/print,
762limited-palette game, or crunchy editorial treatment. It bakes a new image or
763MP4 because every processed block depends on error from earlier blocks; it is
764not a realtime shader setting.
766Choose the algorithm by visible intent:
768- `floyd-steinberg`: balanced default with organic fine texture.
769- `atkinson`: higher-contrast, more open and distinctly early-Macintosh.
770- `jarvis-judice-ninke`: smoother gradients with a wider 12-neighbor field.
771- `stucki`: smooth, slightly sharper alternative to JJN.
772- `burkes`: compact two-row texture.
773- `sierra`, `sierra-lite`, `two-row-sierra`: progressively different
774 speed/texture tradeoffs; use only after comparing frames.
776Run the exact processor and register its output through the existing media
777ledger/cache:
779```bash
780node <SKILL_DIR>/scripts/dither.mjs \
781 --input .media/videos/video_001.mp4 \
782 --out .media/generated/video_001.atkinson.mp4 \
783 --algorithm atkinson \
784 --palette '#17121a,#824c50,#e09873,#f7ddb1' \
785 --point-size 3
787npx hyperframes media-use resolve \
788 --from .media/generated/video_001.atkinson.mp4 --type video --project .
789```
791Use the registered output path on a real `<img>` or `<video>`. Keep text,
792captions, logos, and interface graphics outside the processed media. For a
793finite reveal, overlap the original and processed media with identical framing
794and crossfade or wipe them using the registered paused GSAP timeline. Do not
795label the realtime Bayer shader as Floyd-Steinberg/Atkinson, and do not process
796PQ/HLG footage without an explicit SDR tone-map decision.

Cached Error Diffusion

Use exact error diffusion for a deliberate 1-bit Macintosh, newspaper/print, limited-palette game, or crunchy editorial treatment. It bakes a new image or MP4 because every processed block depends on error from earlier blocks; it is not a realtime shader setting.

Choose the algorithm by visible intent:

  • floyd-steinberg: balanced default with organic fine texture.
  • atkinson: higher-contrast, more open and distinctly early-Macintosh.
  • jarvis-judice-ninke: smoother gradients with a wider 12-neighbor field.
  • stucki: smooth, slightly sharper alternative to JJN.
  • burkes: compact two-row texture.
  • sierra, sierra-lite, two-row-sierra: progressively different speed/texture tradeoffs; use only after comparing frames.

Run the exact processor and register its output through the existing media ledger/cache:

node <SKILL_DIR>/scripts/dither.mjs \
  --input .media/videos/video_001.mp4 \
  --out .media/generated/video_001.atkinson.mp4 \
  --algorithm atkinson \
  --palette '#17121a,#824c50,#e09873,#f7ddb1' \
  --point-size 3

npx hyperframes media-use resolve \
  --from .media/generated/video_001.atkinson.mp4 --type video --project .

Use the registered output path on a real <img> or <video>. Keep text, captions, logos, and interface graphics outside the processed media. For a finite reveal, overlap the original and processed media with identical framing and crossfade or wipe them using the registered paused GSAP timeline. Do not label the realtime Bayer shader as Floyd-Steinberg/Atkinson, and do not process PQ/HLG footage without an explicit SDR tone-map decision.

Raw lines 759 to 797
Runs code scripts/dither.mjs :780
798## Organic Light Leak
800Use for one motivated memory beat, time shift, warm scene handoff, or tactile
801transition. It is a finite deterministic CSS/GSAP overlay, not a looping
802texture, generic flash, or film-stock emulation.
804Install the Registry overlay block:
806```bash
807npx hyperframes add organic-light-leak-overlay --no-clipboard
808```
810Insert the printed `data-composition-src` host at the intended beat and keep
811its duration finite. Its paused timeline owns one rise, peak, and complete
812recovery and scales those phases to the placed duration. Inspect the source
813before, at the brightest frame, and after recovery. Reject clipped faces, an
814unmotivated warm wash, visible black from incorrect blend mode, or a leak that
815conceals the subject longer than the transition needs.

Organic Light Leak

Use for one motivated memory beat, time shift, warm scene handoff, or tactile transition. It is a finite deterministic CSS/GSAP overlay, not a looping texture, generic flash, or film-stock emulation.

Install the Registry overlay block:

npx hyperframes add organic-light-leak-overlay --no-clipboard

Insert the printed data-composition-src host at the intended beat and keep its duration finite. Its paused timeline owns one rise, peak, and complete recovery and scales those phases to the placed duration. Inspect the source before, at the brightest frame, and after recovery. Reject clipped faces, an unmotivated warm wash, visible black from incorrect blend mode, or a leak that conceals the subject longer than the transition needs.

Raw lines 798 to 816
817## Freeze-Frame Cutout
819Use for a social introduction, speaker emphasis, chapter punctuation, sports
820or creator beat, or a scrapbook/editorial hold. This requires a real alpha
821matte; decoration may not conceal a poor subject edge.
823Extract the exact deterministic source frame first, then remove its background:
825```bash
826ffmpeg -ss <seconds> -i <source-video> -frames:v 1 -y .media/generated/freeze-source.png
827npx hyperframes remove-background .media/generated/freeze-source.png \
828 -o .media/generated/freeze-cutout.png --json
829npx hyperframes add freeze-frame-dressing --no-clipboard
830```
832Add the transparent result as a direct-root timed media layer and insert the
833printed overlay block above the same time range. The block owns the paper,
834tape, and flash; the host timeline only animates the real cutout:
836```html
837<img
838 id="hf-freeze-cutout"
839 class="clip"
840 src="./.media/generated/freeze-cutout.png"
841 alt=""
842 data-start="6"
843 data-duration="3"
844 data-track-index="20"
845/>
846```
848```js
849tl.fromTo(
850 "#hf-freeze-cutout",
851 { y: 42, scale: 0.86, rotation: -2 },
852 { y: 0, scale: 1, rotation: 0.4, duration: 0.5, ease: "back.out(1.35)" },
853 freezeAt,
854);
855```
857Inspect the matte over both light and dark temporary plates before styling it.
858Reject missing hair/fingers, background halos, a cutout that changes identity,
859overly thick outline, exposed frame edges, or a flash that obscures the reveal.
860If the matte is not acceptable, choose another frame or keep the original media.

Freeze-Frame Cutout

Use for a social introduction, speaker emphasis, chapter punctuation, sports or creator beat, or a scrapbook/editorial hold. This requires a real alpha matte; decoration may not conceal a poor subject edge.

Extract the exact deterministic source frame first, then remove its background:

ffmpeg -ss <seconds> -i <source-video> -frames:v 1 -y .media/generated/freeze-source.png
npx hyperframes remove-background .media/generated/freeze-source.png \
  -o .media/generated/freeze-cutout.png --json
npx hyperframes add freeze-frame-dressing --no-clipboard

Add the transparent result as a direct-root timed media layer and insert the printed overlay block above the same time range. The block owns the paper, tape, and flash; the host timeline only animates the real cutout:

<img
  id="hf-freeze-cutout"
  class="clip"
  src="./.media/generated/freeze-cutout.png"
  alt=""
  data-start="6"
  data-duration="3"
  data-track-index="20"
/>
tl.fromTo(
  "#hf-freeze-cutout",
  { y: 42, scale: 0.86, rotation: -2 },
  { y: 0, scale: 1, rotation: 0.4, duration: 0.5, ease: "back.out(1.35)" },
  freezeAt,
);

Inspect the matte over both light and dark temporary plates before styling it. Reject missing hair/fingers, background halos, a cutout that changes identity, overly thick outline, exposed frame edges, or a flash that obscures the reveal. If the matte is not acceptable, choose another frame or keep the original media.

Raw lines 817 to 861
862## Social Flash / Editorial Reveal
864Use this treatment for one meaningful high-energy cut, creator reveal, product
865beat, or before/after handoff. It is not a default transition for every scene.
866Avoid it for calm long-form footage, accessibility-sensitive contexts, already
867clipped highlights, literal UI that must remain readable through the cut, or
868any request for repeated strobing.
870Inspect representative frames on both sides of the cut first. Grade each media
871layer for its own subject using the appropriate contract above; the flash is
872not a substitute for correction. For people, a restrained `skin-soft` payload
873is a safe starting point. For literal UI, preserve the pixels and use only the
874authored light/motion layers when they do not obscure required information.
876Install the Registry overlay block:
878```bash
879npx hyperframes add editorial-flash-overlay --no-clipboard
880```
882Insert the printed `data-composition-src` host so the block's midpoint lands
883on the cut. Its own paused timeline drives the finite flash. The host timeline
884may coordinate outgoing and incoming media motion without reaching into the
885block:
887```js
888tl.to(
889 "#outgoing-media",
890 {
891 scale: 1.035,
892 "--hf-color-grading-exposure": 0.82,
893 duration: 0.12,
894 ease: "power3.in",
895 },
896 cutAt - 0.16,
897);
898tl.fromTo(
899 "#incoming-media",
900 { scale: 1.1 },
901 { scale: 1, duration: 0.42, ease: "power3.out" },
902 cutAt,
903);
904tl.to(
905 "#incoming-media",
906 {
907 "--hf-color-grading-exposure": 0,
908 "--hf-color-grading-intensity": 0.58,
909 duration: 0.24,
910 ease: "power2.out",
911 },
912 cutAt,
913);
914```
916When the shader steps are used, author
917`--hf-color-grading-exposure: 0.72` and
918`--hf-color-grading-intensity: 0` inline on the incoming media so a fresh seek
919has the correct start state. Set the final intensity to the source-approved
920value instead of copying `0.58` blindly. Skip the shader intensity step when
921the incoming source should remain ungraded.
923Keep the rise between roughly `0.035` and `0.055` seconds and the recovery
924between `0.24` and `0.38` seconds. Default to one neutral/warm flash event,
925never saturated red, never a looping strobe, and never more than one authored
926flash inside a one-second treatment window. Verify frames immediately before,
927at, and after the cut, then inspect moving playback and a rendered draft. The
928peak must hide the cut; the recovery must reveal a correctly framed source with
929no retained prior canvas, clipped face, or unexpected highlight damage.

Social Flash / Editorial Reveal

Use this treatment for one meaningful high-energy cut, creator reveal, product beat, or before/after handoff. It is not a default transition for every scene. Avoid it for calm long-form footage, accessibility-sensitive contexts, already clipped highlights, literal UI that must remain readable through the cut, or any request for repeated strobing.

Inspect representative frames on both sides of the cut first. Grade each media layer for its own subject using the appropriate contract above; the flash is not a substitute for correction. For people, a restrained skin-soft payload is a safe starting point. For literal UI, preserve the pixels and use only the authored light/motion layers when they do not obscure required information.

Install the Registry overlay block:

npx hyperframes add editorial-flash-overlay --no-clipboard

Insert the printed data-composition-src host so the block's midpoint lands on the cut. Its own paused timeline drives the finite flash. The host timeline may coordinate outgoing and incoming media motion without reaching into the block:

tl.to(
  "#outgoing-media",
  {
    scale: 1.035,
    "--hf-color-grading-exposure": 0.82,
    duration: 0.12,
    ease: "power3.in",
  },
  cutAt - 0.16,
);
tl.fromTo(
  "#incoming-media",
  { scale: 1.1 },
  { scale: 1, duration: 0.42, ease: "power3.out" },
  cutAt,
);
tl.to(
  "#incoming-media",
  {
    "--hf-color-grading-exposure": 0,
    "--hf-color-grading-intensity": 0.58,
    duration: 0.24,
    ease: "power2.out",
  },
  cutAt,
);

When the shader steps are used, author --hf-color-grading-exposure: 0.72 and --hf-color-grading-intensity: 0 inline on the incoming media so a fresh seek has the correct start state. Set the final intensity to the source-approved value instead of copying 0.58 blindly. Skip the shader intensity step when the incoming source should remain ungraded.

Keep the rise between roughly 0.035 and 0.055 seconds and the recovery between 0.24 and 0.38 seconds. Default to one neutral/warm flash event, never saturated red, never a looping strobe, and never more than one authored flash inside a one-second treatment window. Verify frames immediately before, at, and after the cut, then inspect moving playback and a rendered draft. The peak must hide the cut; the recovery must reveal a correctly framed source with no retained prior canvas, clipped face, or unexpected highlight damage.

Raw lines 862 to 929