wizz-method 2.22.0 → 2.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (118) hide show
  1. package/THIRD-PARTY-NOTICES.md +7 -1
  2. package/package.json +1 -1
  3. package/removals.txt +3 -0
  4. package/skills-registry.yaml +93 -5
  5. package/src/bmm-skills/1-analysis/research/wizz-market-research/steps/step-06-research-completion.md +27 -0
  6. package/src/modules/lowticket/README.md +2 -1
  7. package/src/modules/lowticket/module.yaml +1 -1
  8. package/src/modules/lowticket/skills/wizz-clone-do-expert/SKILL.md +86 -0
  9. package/src/modules/lowticket/skills/wizz-clone-do-expert/references/clone-prompt-template.md +21 -0
  10. package/src/modules/wizz/_shared/video-pipeline.md +2 -0
  11. package/src/modules/wizz/agents/wizz-copy/customize.toml +1 -1
  12. package/src/modules/wizz/agents/wizz-copy/knowledge/playbook.md +2 -2
  13. package/src/modules/wizz/agents/wizz-growth/customize.toml +7 -2
  14. package/src/modules/wizz/agents/wizz-growth/knowledge/playbook.md +3 -2
  15. package/src/skills-lib/wizz-ios-build/SKILL.md +61 -0
  16. package/src/skills-lib/wizz-offer-forge/SKILL.md +2 -2
  17. package/src/skills-lib/wizz-paywall-upgrade-cro/SKILL.md +1 -0
  18. package/src/skills-lib/{wizz-pesquisa-de-publico-do-piva → wizz-pesquisa-de-publico}/README.md +13 -13
  19. package/src/skills-lib/{wizz-pesquisa-de-publico-do-piva → wizz-pesquisa-de-publico}/SKILL.md +11 -7
  20. package/src/skills-lib/{wizz-pesquisa-de-publico-do-piva → wizz-pesquisa-de-publico}/assets/template.html +8 -21
  21. package/src/skills-lib/wizz-pesquisa-de-publico/references/interview-mode.md +69 -0
  22. package/src/skills-lib/wizz-premium-landing-ui-researcher/references/component-sources.md +23 -0
  23. package/src/skills-lib/wizz-premium-landing-ui-researcher/references/design-sources.yaml +73 -0
  24. package/src/skills-lib/wizz-router/references/routing-table-flat.md +5 -1
  25. package/src/skills-lib/wizz-seo-audit/SKILL.md +4 -0
  26. package/src/skills-lib/wizz-seo-audit/references/gsc-regex-perguntas.md +64 -0
  27. package/src/skills-lib/wizz-signup-flow-cro/SKILL.md +1 -0
  28. package/src/skills-lib/wizz-signup-flow-cro/references/trial-abuse.md +40 -0
  29. package/src/skills-lib/wizz-ui-ux-pro-max/SKILL.md +1 -1
  30. package/src/skills-lib/wizz-ui-ux-pro-max/references/common-rules-checklist.md +11 -0
  31. package/src/skills-lib/wizz-video-effects/SKILL.md +3 -1
  32. package/src/skills-lib/wizz-video-effects/assets/effects.config.template.json +10 -0
  33. package/src/skills-lib/wizz-video-effects/references/data-contract.md +2 -0
  34. package/src/skills-lib/wizz-video-effects/references/gates.md +1 -0
  35. package/src/skills-lib/wizz-video-effects/references/one-take.md +41 -0
  36. package/src/skills-lib/wizz-video-effects/scripts/check_one_take.py +159 -0
  37. package/src/skills-lib/wizz-video-effects/scripts/test_one_take.py +126 -0
  38. package/src/skills-lib/wizz-video-styles/LICENSE-lemo-opuscar.txt +21 -0
  39. package/src/skills-lib/wizz-video-styles/SKILL.md +12 -7
  40. package/src/skills-lib/wizz-video-styles/assets/film-styles/dark-keynote.html +78 -0
  41. package/src/skills-lib/wizz-video-styles/assets/film-styles/remotion/Riso.tsx +63 -0
  42. package/src/skills-lib/wizz-video-styles/assets/film-styles/risograph.html +69 -0
  43. package/src/skills-lib/wizz-video-styles/assets/film-styles/swiss-motion.html +84 -0
  44. package/src/skills-lib/wizz-video-styles/references/check-ins.md +25 -0
  45. package/src/skills-lib/wizz-video-styles/references/film-styles/DIRECTOR.md +139 -0
  46. package/src/skills-lib/wizz-video-styles/references/film-styles/archive-lighttable.md +109 -0
  47. package/src/skills-lib/wizz-video-styles/references/film-styles/art-deco.md +112 -0
  48. package/src/skills-lib/wizz-video-styles/references/film-styles/ascii-crt.md +115 -0
  49. package/src/skills-lib/wizz-video-styles/references/film-styles/backrooms.md +125 -0
  50. package/src/skills-lib/wizz-video-styles/references/film-styles/blueprint.md +120 -0
  51. package/src/skills-lib/wizz-video-styles/references/film-styles/brick-toy.md +114 -0
  52. package/src/skills-lib/wizz-video-styles/references/film-styles/briefing-board.md +122 -0
  53. package/src/skills-lib/wizz-video-styles/references/film-styles/caption-news.md +137 -0
  54. package/src/skills-lib/wizz-video-styles/references/film-styles/cel-anime-80s.md +119 -0
  55. package/src/skills-lib/wizz-video-styles/references/film-styles/city-symphony.md +142 -0
  56. package/src/skills-lib/wizz-video-styles/references/film-styles/countdown.md +132 -0
  57. package/src/skills-lib/wizz-video-styles/references/film-styles/crayon-book.md +109 -0
  58. package/src/skills-lib/wizz-video-styles/references/film-styles/dark-keynote.md +117 -0
  59. package/src/skills-lib/wizz-video-styles/references/film-styles/data-physical.md +119 -0
  60. package/src/skills-lib/wizz-video-styles/references/film-styles/dataviz.md +123 -0
  61. package/src/skills-lib/wizz-video-styles/references/film-styles/engraving.md +123 -0
  62. package/src/skills-lib/wizz-video-styles/references/film-styles/game-show.md +118 -0
  63. package/src/skills-lib/wizz-video-styles/references/film-styles/glass-product.md +110 -0
  64. package/src/skills-lib/wizz-video-styles/references/film-styles/halftone-dossier.md +122 -0
  65. package/src/skills-lib/wizz-video-styles/references/film-styles/hd-2d.md +111 -0
  66. package/src/skills-lib/wizz-video-styles/references/film-styles/hologram-hud.md +129 -0
  67. package/src/skills-lib/wizz-video-styles/references/film-styles/impasto.md +124 -0
  68. package/src/skills-lib/wizz-video-styles/references/film-styles/ink-wash.md +120 -0
  69. package/src/skills-lib/wizz-video-styles/references/film-styles/iso-infographic.md +117 -0
  70. package/src/skills-lib/wizz-video-styles/references/film-styles/kino-montage.md +151 -0
  71. package/src/skills-lib/wizz-video-styles/references/film-styles/lidar-survey.md +118 -0
  72. package/src/skills-lib/wizz-video-styles/references/film-styles/living-screencast.md +124 -0
  73. package/src/skills-lib/wizz-video-styles/references/film-styles/lowpoly-island.md +112 -0
  74. package/src/skills-lib/wizz-video-styles/references/film-styles/microgame.md +122 -0
  75. package/src/skills-lib/wizz-video-styles/references/film-styles/microscope.md +108 -0
  76. package/src/skills-lib/wizz-video-styles/references/film-styles/midcentury-toon.md +124 -0
  77. package/src/skills-lib/wizz-video-styles/references/film-styles/news-package.md +158 -0
  78. package/src/skills-lib/wizz-video-styles/references/film-styles/newsreel.md +136 -0
  79. package/src/skills-lib/wizz-video-styles/references/film-styles/one-line.md +114 -0
  80. package/src/skills-lib/wizz-video-styles/references/film-styles/paper-lantern.md +116 -0
  81. package/src/skills-lib/wizz-video-styles/references/film-styles/paper-popup.md +119 -0
  82. package/src/skills-lib/wizz-video-styles/references/film-styles/papercut-red.md +110 -0
  83. package/src/skills-lib/wizz-video-styles/references/film-styles/pictogram-motion.md +119 -0
  84. package/src/skills-lib/wizz-video-styles/references/film-styles/pixel-rpg.md +117 -0
  85. package/src/skills-lib/wizz-video-styles/references/film-styles/risograph.md +125 -0
  86. package/src/skills-lib/wizz-video-styles/references/film-styles/rubber-hose.md +112 -0
  87. package/src/skills-lib/wizz-video-styles/references/film-styles/satellite-briefing.md +116 -0
  88. package/src/skills-lib/wizz-video-styles/references/film-styles/scifi-toon.md +121 -0
  89. package/src/skills-lib/wizz-video-styles/references/film-styles/shadow-puppet.md +124 -0
  90. package/src/skills-lib/wizz-video-styles/references/film-styles/silent-film.md +109 -0
  91. package/src/skills-lib/wizz-video-styles/references/film-styles/silkscreen-poster.md +140 -0
  92. package/src/skills-lib/wizz-video-styles/references/film-styles/spy-titles.md +116 -0
  93. package/src/skills-lib/wizz-video-styles/references/film-styles/stained-glass.md +123 -0
  94. package/src/skills-lib/wizz-video-styles/references/film-styles/swiss-motion.md +115 -0
  95. package/src/skills-lib/wizz-video-styles/references/film-styles/teardown.md +127 -0
  96. package/src/skills-lib/wizz-video-styles/references/film-styles/telestrator.md +137 -0
  97. package/src/skills-lib/wizz-video-styles/references/film-styles/tilt-shift.md +107 -0
  98. package/src/skills-lib/wizz-video-styles/references/film-styles/ukiyoe.md +112 -0
  99. package/src/skills-lib/wizz-video-styles/references/film-styles/urban-sketch.md +126 -0
  100. package/src/skills-lib/wizz-video-styles/references/film-styles/visual-investigation.md +140 -0
  101. package/src/skills-lib/wizz-video-styles/references/film-styles/watercolor.md +113 -0
  102. package/src/skills-lib/wizz-video-styles/references/film-styles/white-model.md +115 -0
  103. package/src/skills-lib/wizz-video-styles/references/film-styles/whiteboard.md +118 -0
  104. package/src/skills-lib/wizz-video-styles/references/film-styles/woodcut.md +122 -0
  105. package/src/skills-lib/wizz-video-styles/references/film-styles.md +140 -0
  106. package/src/skills-lib/wizz-video-styles/references/insert-recipes.md +33 -0
  107. package/src/skills-lib/wizz-video-styles/scripts/beat_grid.py +38 -6
  108. package/src/skills-lib/wizz-vsl/SKILL.md +1 -1
  109. package/src/skills-lib/wizz-vsl/references/assembly-qa.md +1 -1
  110. package/src/skills-lib/wizz-vsl/references/blocks-and-leads.md +1 -1
  111. package/src/skills-lib/wizz-vsl/references/diagnosis.md +2 -2
  112. package/src/skills-lib/wizz-vsl/references/intake.md +5 -5
  113. package/src/skills-lib/wizz-web-security/SKILL.md +2 -0
  114. package/tools/installer/guided/labels.js +16 -0
  115. package/tools/installer/install-text.js +2 -0
  116. package/tools/installer/modules/cli-config.js +3 -0
  117. package/tools/installer/ui.js +6 -0
  118. /package/src/skills-lib/{wizz-pesquisa-de-publico-do-piva → wizz-pesquisa-de-publico}/prompts.md +0 -0
@@ -0,0 +1,109 @@
1
+ <!-- Vendored from lemo-opuscar (https://github.com/lemomo-ai/lemo-opuscar/tree/413a6bd6/styles/crayon-book), MIT, (c) 2026 LemoLab; see ../../LICENSE-lemo-opuscar.txt. Paths under demo/ and core/ name that repo's engine, which is not shipped here: build the look in HyperFrames (../film-styles.md). -->
2
+
3
+ # Crayon Picture Book — Style Prompt
4
+
5
+ > A picture-book page drawn live in wax crayon on toothy paper, with a watercolour wash that reveals what the crayon was hiding.
6
+ > References (grammar only): Raymond Briggs' *The Snowman* (1982) (hand-textured frames that breathe, wordless tenderness, a lyrical passage carried by one tune, still backgrounds with living figures). Copy none of its characters, song or imagery, and never name it in the film.
7
+
8
+ ## 1. Essence, and what it is not
9
+
10
+ A children's picture book page **being drawn while you watch**: wax crayon on warm off-white paper, a limited box of crayons, child-logic perspective, colour that spills past the outline, and every line gently **boiling** because each frame is a fresh drawing. The tone is picture-book storytelling: tender, unhurried, music-led, a few lines of narration that are literally the words printed on the page. Any topic becomes **one page of a picture book that gets finished**: drawing and colouring are the plot.
11
+
12
+ It is not "cute vector art with a crayon filter": the look comes from **material physics** (wax sticks only to the peaks of the paper tooth, pressure decides how much of the tooth it reaches, watercolour is repelled by wax). Not a whiteboard explainer (no marker, no hand), not a watercolour painting (the wash is a guest, the crayon the host), not a chalkboard.
13
+
14
+ ## 2. Materials & rendering
15
+
16
+ - **Paper**: warm off-white (around `#f4efe3`). The tooth is **anchored to the page** (it pans with the camera; on zoom two octaves cross-fade so grains stay ~1 px on screen), never screen-fixed: three octaves of value noise plus a horizontal fibre term. A final pass embosses it (lit top-left), less where wax filled the tooth. Low mottling ±2 %, warm vignette.
17
+ - **Wax adhesion (the core rule)**: every crayon layer is a canvas where RGB = colour and **A = pressure**; the shader deposits wax where `tooth > 1 − k·pressure` (soft edge). Light pressure = speckled peaks; heavy = almost solid, slightly darker.
18
+ - **Strokes**: ribbons with a low-frequency hand wobble (1–2 px), width ±15 %, tapered ends, a denser core and 1–2 thin streaks. Characters and buildings get the heaviest outline; refined "adult" objects about half.
19
+ - **Colouring**: back-and-forth zig-zag hatching with a visible gap, each pass at a slightly different pressure; **overshoot the outline by a few px**; a lighter cross-hatch pass on big areas.
20
+ - **Watercolour wash**: a separate density canvas multiplied over the page. Pigment pools at edges (density minus blurred density), granulates in the deepest pits, blooms with noise, and is **resisted by wax** (density × (1 − ~0.9·wax coverage)). Brush strokes are wide bands with bristle streaks and a darker wet leading edge while moving.
21
+ - **Occlusion**: a front part erases what is behind it inside its outline; characters "keep the paper white" behind them (a knock-out that restores paper and resets wax), the way a child draws the figure first and colours around it.
22
+ - **Characters**: a skilled adult imitating a child: round head (≈2.5 heads tall), dot eyes with a white-wax catchlight, pink cheeks, tube limbs, mitten hands, bold hair shapes; objects with faces get big eyes and eyelids. **Child perspective**: gable front + slanted side wall; people bigger than doors.
23
+
24
+ ## 3. Colour logic
25
+
26
+ - **A box of about a dozen crayons, never more.** Outlines in one dark colour (indigo, dark brown, plum), **never black**. One white crayon reserved for wax resist.
27
+ - **At most one watercolour** per film, chosen for what it reveals (ultramarine for night, rose for dawn, sap green for rain). It never paints the characters.
28
+ - Saturated crayon on lots of bare paper; value comes from pressure, not extra hues. One accent on a character may echo the story.
29
+ - Example boxes: *seaside* — navy line, coral, sand, teal, turquoise, lemon, white; *orchard* — brown line, russet, apple red, mustard, olive, plum, cream, white.
30
+
31
+ ## 4. Type & subtitles
32
+
33
+ - Subtitles are **the book's printed words**: a handwriting face (Patrick Hand, OFL), 50–56 px, in the outline colour, bottom-centre, each glyph tilted and offset, boiling on twos, written left→right in ~0.35 s, on a ragged knock-out patch of blank paper (never a dark box). Hold ≥ max(1.8 s, speech + 0.6 s); none during wordless music.
34
+ - Titles are hand-lettered on the page (Gaegu Bold or similar), written letter by letter. You can't fade crayon: a title leaves by the camera moving off it, a page turn or being coloured over.
35
+
36
+ ## 5. Motion quality
37
+
38
+ - **Everything drawn steps at 12 fps** (lines, colouring, characters, boil seed); camera, the wash's leading edge and twinkles run at 24 fps.
39
+ - **Boil**: each stroke re-jitters offset (<1 px), wobble and hatching rows every 2 frames. Characters full, background lines ~0.6, background colouring still (it also halves the bitrate). Calm the boil to about half when the film goes quiet.
40
+ - **Drawing on**: lines reveal along their length in 0.4–0.9 s; colouring row by row; text letter by letter.
41
+ - **Acting**: substitution, a new drawing per pose on the beat; two key drawings alternate for a repeated action. Big simple poses; a child's drawing doesn't in-between.
42
+ - **Colouring is an action**: being coloured in *is* doing (a coat scribbled on = putting it on; pink scribble = blushing; a wash = night falling).
43
+
44
+ ## 6. Camera grammar
45
+
46
+ The camera moves over a large page. A vocabulary, not a route; every move needs a reason. Opening and ending come from the topic.
47
+
48
+ | Move | What it expresses | Can serve |
49
+ |---|---|---|
50
+ | Locked full page | Paper before drawing; the whole picture | a beginning from nothing; a tableau; a reveal that needs the page |
51
+ | Push toward a character | "This one" | a title giving way; a feeling arriving |
52
+ | Locked medium close-up | Substitution poses act | comedy; a decision; a small failure |
53
+ | Tilt along a gaze | We see what they see | discovery; longing; something huge |
54
+ | Tight follow | The world draws itself ahead of the subject | a brave act; a path; building |
55
+ | Held wide while the brush moves | The material is the motion | a wash reveal; weather; day or night falling |
56
+ | Slow truck across the page | Reading left to right | a list; a sequence; a family |
57
+ | Pull out past the page edge | The page is an object | a book on a table; a fridge drawing |
58
+ | Page turn | New chapter, time jump | before/after; the next day |
59
+
60
+ Key figures ≥ 1/4 of frame height in close shots; keep bare paper at the bottom for the printed words. Transitions: drawing on, colouring over, the wash, a pan or a page turn; never a dissolve.
61
+
62
+ ## 7. Sound palette
63
+
64
+ - **Small wooden and metal-toothed instruments, no strings or grand piano**: ukulele or nylon guitar, clarinet or bassoon (bass, humour), music box (can wind down with a pitch droop), glockenspiel or celesta (a note per uncovered sparkle), toy piano (one note per counted thing), flute or recorder as the singing voice, shaker and woodblock. A simple lilt; one theme can be held back and heard in full once.
65
+ - **Silence is a beat**: a full beat of nothing after a failure; a short breath before a wordless passage.
66
+ - **Foley follows the material**: crayon = stick-slip band-passed noise whose grain follows stroke speed (colouring = rhythmic swishes); wet brush = soft low-passed noise with bristle grain, panned with the stroke; felt puffs, fabric swishes, a sharpener, a crayon set down, a page turn (lift / whoosh / flap). Ambience: faint crickets or birds, room tone, a distant clock.
67
+ - **Mix**: music under narration, rising for wordless passages; metal voices get a gentle high lift. −14 LUFS.
68
+ - **Voice**: a soft, warm storyteller, short lines with breaths. Compress before EQ, cut the highs, de-ess, a warm near-field reverb far under the dry voice; a few dB over the bed, never louder. Whisper-check every line, dry and on the final mix. Avoid famous-book phrases.
69
+
70
+ ## 8. Native moves
71
+
72
+ A menu: use the ones your story needs.
73
+
74
+ - **Wax resist.** White crayon is invisible until a wash passes; hide the payoff in plain sight from the first frame. *Fits content like:* a farewell message; a product's hidden feature; roots under a garden.
75
+ - **Drawn live.** The world draws itself just ahead of the hero. *Fits content like:* a bridge plank by plank; a journey map; a company timeline.
76
+ - **Colouring is an action.** *Fits content like:* a town lighting up window by window; a team putting on kit; fruit ripening.
77
+ - **Boil.** A held frame is alive; calming it quiets the film. *Fits content like:* a pause for thought; grief; rest.
78
+ - **Child logic.** Wrong perspective, faces on objects, numbers in the sky. *Fits content like:* a launch countdown; a talking house on insulation; a sun that clocks out.
79
+ - **It is a book.** Pull back to the object; turn the page. *Fits content like:* a year in review; a "chapter two"; a thank-you card.
80
+
81
+ ## 9. Pitfalls of the medium
82
+
83
+ - Gaps between wash bands leave white stripes → overlap bands and cover all intended paper.
84
+ - Wavy band edges and wide light streaks read as hills → small high-frequency waviness, thin faint streaks (α ≤ 0.12).
85
+ - Light-pressure colouring goes muddy under a wash → pressure ≥ 0.8 or cross-hatch wherever the wash crosses.
86
+ - Text where the wash passes survives it (wax resists) → place it elsewhere or accept it.
87
+ - Characters vanish under a wash → composite them *after* the wash.
88
+ - Outlines over hair read as a headband → outline hair masses on their outer edge only.
89
+ - Knock-out drawn into a plain layer shows as grey crayon → use a dummy canvas.
90
+ - Page turn from rectangle strips shows a staircase → an affine transform per strip.
91
+ - Double vignette/emboss at a page-to-object transition → page with vignette 0, ramp the outer scene's in.
92
+ - Screen-fixed tooth bloats the file → anchor it, don't boil background fills, no ffmpeg grain.
93
+ - Reverb IR from unit-variance noise is hugely loud → scale wet to ~18 dB under dry.
94
+
95
+ ## 10. Engine
96
+
97
+ In `demo/`: `gl.js` (WebGL2 compositor: paper, wax adhesion, knock-out, watercolour + resist, emboss/vignette/lamp), `crayon.js` (`line` ribbons with taper, streaks, boil; `fill` hatching with overshoot; `text`; shapes), `rig.js` (occlusion + knock-out parts, limb tubes), `sheet.js` (model sheets, `?test=model&page=…`), `end.js` (page on a desk, page turn). Draw your own character's model sheet with them before any shot. File map and commands: [DEMO.md](https://github.com/lemomo-ai/lemo-opuscar/blob/413a6bd6/styles/crayon-book/DEMO.md#build-notes).
98
+
99
+ ## 11. Variation space
100
+
101
+ You decide the structure, the characters (or none), the page, the opening, the ending, the camera path, the pacing, the crayon box and whether there is a wash. All far from our demo:
102
+
103
+ - Structures: **a colouring-book page** (all outlines there from frame one; each idea colours one area); **a flip through several pages** (one stage per page, joined by turns); **two children, one page** (two crayon colours argue, then combine).
104
+ - Openings: **a finished page rubbed out** to begin again; **a crayon tip in extreme close-up** mid-stroke, pulling back; **a crumpled page being flattened**.
105
+ - Endings: **the page taped to a fridge** among others; **a last scribble** filling the frame with one colour; **a stray splash of water** finding the white-wax message.
106
+
107
+ ---
108
+
109
+ How our demo was made (story, shots, score, end card, build): [DEMO.md](https://github.com/lemomo-ai/lemo-opuscar/blob/413a6bd6/styles/crayon-book/DEMO.md). Read it after your treatment exists.
@@ -0,0 +1,117 @@
1
+ <!-- Vendored from lemo-opuscar (https://github.com/lemomo-ai/lemo-opuscar/tree/413a6bd6/styles/dark-keynote), MIT, (c) 2026 LemoLab; see ../../LICENSE-lemo-opuscar.txt. Paths under demo/ and core/ name that repo's engine, which is not shipped here: build the look in HyperFrames (../film-styles.md). -->
2
+
3
+ # Dark Tech Keynote — Style Prompt
4
+
5
+ > A software launch film where the interface itself is the star: near-black gradient, hairline grid, soft light, one brand accent, and UI that moves with snap-grid precision. Light reveals, one giant number, and a sound design that is as ordered as the pixels.
6
+ > **References (grammar only):** Apple product reveals (black stage, light sweeps, one line per screen, the lone giant number); Linear / Stripe / Vercel launch videos (snap-grid motion, 1 px lines, one accent); Steve Reich's process music (phasing, subtraction); Edgar Wright's insert cuts. Never use their names, interfaces, fonts, system controls, melodies or logos, and never name them in the film.
7
+
8
+ ## 1. Essence, and what it is not
9
+
10
+ A keynote-grade product film for **software**. There is no physical product and no glass render: the protagonist is the interface (a cursor, windows, notifications, tiles, a number). It lives on a dark stage lit by soft, cool light, with **one brand accent** reserved for the single most important element.
11
+
12
+ The style is defined by **precision**: every element snaps to a grid, every motion lands on a beat, every sound belongs to one designed family. Drama comes from contrast: disorder shown as generated UI, one decisive action, then empty space.
13
+
14
+ Not a glass product render (no physical object), not a screencast (no real OS or apps), not a hologram HUD (no scanlines), not a chart film (one number, not a chart).
15
+
16
+ ## 2. Materials & rendering
17
+
18
+ - **Stage**: a near-black base with a radial lift at the upper centre, one large cool glow at single-digit opacity off-centre, a 50–55 % corner vignette. A hairline grid (white at ~3 %, every 4th line ~6 %) on a 48 px module. No grain.
19
+ - **UI kit, all original and drawn in code**: rounded windows (title bar with only a small glyph and title; never traffic-light buttons, menu bars or docks), notification cards, file icons with mono filenames, procedural thumbnails, list rows, tabs, badges, bars, uniform tiles.
20
+ - **Surfaces**: three steps of raised dark surface, 1 px border (~8 % white), 1 px inner top highlight, soft shadows.
21
+ - **Depth**: a 2.5D camera (`s = 1/(1/zoom − z)`); cards near the lens blur with magnification. Rotations use strip-rendered perspective (rotY ≤ ~24°).
22
+ - **Light** is the reveal tool: only pixels the light has passed turn on; unlit areas sit at a few percent.
23
+
24
+ ## 3. Colour logic
25
+
26
+ - A cool neutral ladder only: near-black stage, three surface steps, text in three greys (primary, secondary, label). Neutrals are slightly blue, never warm brown.
27
+ - **One accent**, saturated and luminous, with its own glow. It is reserved for what the product *is* or *does*: the protagonist element, the call to action, confirmations, the key number. If two things are accent-coloured, one is wrong.
28
+ - **A problem colour** (typically a red for badges and warnings) may exist only while the problem exists; after the turn it never returns. Problem colour = noise, accent = the product.
29
+ - Secondary hues only as **category codes** in motion (a trail per data type), desaturated, and never on static UI.
30
+ - Example accents, pick one per film: lime `#B7F34A`, electric violet `#8B7CFF`, signal orange `#FF7A1A`.
31
+
32
+ ## 4. Type & subtitles
33
+
34
+ - **OFL faces**: Inter (UI, captions, headlines; variable weight), Inter Tight 600 for giant numbers (tracking around −4.5 %), JetBrains Mono for labels, filenames and status text (wide tracking in small-caps labels).
35
+ - One line per screen for headlines. The big number gets its own screen and **no caption over it**: the number is the message.
36
+ - **Captions are a UI component**: a bottom-centre toast (dark translucent pill, 1 px light border, soft shadow, Inter 500 around 40 px, a small accent "speaking" dot). It enters with a small rise + fade in ~0.16 s and can turn more opaque over busy frames. Hold ≥ max(1.8 s, speech + 0.6 s).
37
+ - **Typed text is its own subtitle**: text the cursor types in frame is not burned twice (it goes only into the .srt).
38
+ - Lift product content while captions are up so toasts never clip it.
39
+
40
+ ## 5. Motion quality
41
+
42
+ - 24 fps on ones, no stepping, no boil: this is precision, not craft.
43
+ - **Everything lands on the grid and on the beat.** Moves start a beat early and land on it. Easing is fast-out with one small overshoot (`back`, s ≈ 1.3) and an immediate settle. No floaty sine drift.
44
+ - **Spawns are short and typed** (drop + bounce, fling, slide-in, pop; 0.2–0.3 s), one motion per element type. Tension can be a tremble of a few px.
45
+ - **Flights** follow curved paths with overshoot along the final tangent; same-type elements bend the same way and never cross.
46
+ - **A living element can act**: squash, stretch, anticipation (≥ 8 frames of wind-up), a 2-frame contact, spring follow-through. The blink of a cursor makes a natural metronome.
47
+ - **Disappearing is designed** (retract one part per beat, CRT-off squash into a point); nothing just fades.
48
+ - The stage and grid never move on their own; only the camera moves them.
49
+
50
+ ## 6. Camera grammar
51
+
52
+ A vocabulary, not a route. Opening and ending come from the topic.
53
+
54
+ | Move | Expresses | Can serve |
55
+ |---|---|---|
56
+ | Locked extreme close-up on a tiny UI element | Intimacy, one thing alive on a screen | a single action; a thought forming; a quiet status |
57
+ | Continuous pull-back, keyed per bar in log space | Accumulation, scale growing out of one point | spreading load; a network growing; a team joining |
58
+ | Push-in through a frozen frame | Time stopped, focus narrowing | a decision; the instant before a commit; a bug found |
59
+ | Whip pull-out in one beat | Cause and effect seen at once | a sync completing; a deploy landing everywhere |
60
+ | Dive into a small UI element (log-zoom) + match cut | Going inside the detail | a counter that matters; a log line; a setting |
61
+ | Half-second inserts expanding from their source | Overload, too much to read | notification storms; errors; choice overload |
62
+ | Near-locked frame while an object turns and light sweeps | Presentation, the product as hero | a reveal; a new version; a feature name |
63
+ | Slow lateral track across a UI plane | Order read by the eye | a timeline; a pipeline |
64
+ | Top-down plan over the grid | System view, structure | architecture; permissions; a workflow map |
65
+ | Return to an earlier framing | Rhyme: what changed | before/after; a loop closed; an echo |
66
+
67
+ Framing: generous negative space, one focal element, the accent at the focal point. Dutch angle and wobble only for disorder.
68
+
69
+ **Transitions = UI expand / collapse**: every shot change is an interface element expanding into the frame or the frame collapsing into an element. No fades, no blank frames. An expansion on a beat starts one frame early so the beat frame is already ~80 % open.
70
+
71
+ ## 7. Sound palette
72
+
73
+ - **Tuned percussion and pads**: marimba, vibraphone (mallet or bowed), glockenspiel, celesta, a synth pad or drone, a low sine pulse, a shaker, plucked synth, felt piano. Clean, dry, minimal; samples e.g. VCSL (CC0).
74
+ - **Music as a visible process**: options include phasing (two voices on one pattern, one drifting), additive build (one note per bar), subtractive process (notes removed until one is left), dividing the beat to accelerate instead of changing tempo, or one chord that everything lands on. Picture events can spawn on score notes from a shared note table.
75
+ - **Two sound families = story**: disorder sounds *scattered* (detuned by tens of cents, random pans, a different timbre per source); the product's sounds are *one family* (felt ticks, glass taps, all in one mode, centred), so many landings form one in-key shimmer.
76
+ - **Foley materials**: cursor tick, low-profile keys, notification glass, file plop, window whoosh, glitch accents, stacking thumps, felt mallet + sine drop for a press, light-sweep shimmer, digit grains, CRT-off.
77
+ - **Ambience**: a quiet room, a computer fan, a high coil whine that can grow with pressure. Fan and whine live in the voice band: keep them down until a line ends.
78
+ - **Silence is a tool**: digital zero on every track when the screen pauses; near-silence (a −60 dB room) for a breath. The first sound after a silence is the most important one.
79
+ - **J / L cuts** carry sound across UI transitions (a chord ringing on, a shimmer arriving before the light).
80
+ - **Mix**: music ducks ~8 dB and foley ~4 dB under voice; −14 LUFS; no grain. **Voice**: confident and restrained, short declaratives.
81
+
82
+ ## 8. Native moves
83
+
84
+ A menu: use the ones your story needs.
85
+
86
+ - **Generated accumulation.** UI spawned by rule, faster and faster, hundreds of items; you don't draw the mess, you generate it. *Fits content like:* unread tickets piling up; cloud costs creeping; a dependency tree exploding.
87
+ - **The snap grid.** A whole promise in one motion: everything flies into a grid in one beat; the grid stays invisible until then. *Fits content like:* a CMS publishing to every channel; a scheduler filling a week; an audit turning green.
88
+ - **The living element.** The cursor (or the product's smallest live element) is the protagonist and the brand mark. *Fits content like:* a search box that grows ambitious; a progress ring that refuses to finish; a status dot.
89
+ - **Freeze.** Everything stops mid-air and the sound drops to digital zero; only a screen can stop time like this. *Fits content like:* a security breach caught; a failed deploy; the second before "send".
90
+ - **Light reveal.** A soft band sweeps across and only lit pixels turn on (soft front, glint ≤ 20 %, ≤ ~1.3 s so nothing stays dark). *Fits content like:* a redesign; a new pricing page; an API console.
91
+ - **Number from glyph noise.** Digits scramble and lock one per sixteenth note with a small bounce. *Fits content like:* latency cut; a count of users; a price.
92
+ - **Type streams.** Elements fly to their own rows along coloured curved trails, so categories read as streams. *Fits content like:* an inbox triaged; logs routed by severity; files synced by device.
93
+ - **Put-away.** The UI dismantles itself one part per beat until one element is left. *Fits content like:* "less is more" features; offboarding; focus mode.
94
+
95
+ ## 9. Pitfalls of the medium
96
+
97
+ - Strip perspective of a semi-transparent canvas shows vertical seams (overlapping slices double alpha) → project the *opaque* surface, then light it in screen space.
98
+ - A hard white glint reads as a sticker reflection → soft front, glint ≤ 20 %.
99
+ - Nearest-slot snapping looks like a flicker, not a collapse → typed destinations, curved paths, trails.
100
+ - Too few elements leave holes in a grid that read as a mistake → generate by rule, then trim or pad to exactly the slot count per group.
101
+ - A flat tinted rectangle for "closing" looks like a placeholder → squash the real surface.
102
+
103
+ ## 10. Engine
104
+
105
+ `demo/engine.js` (Canvas 2D ES module): `setAccent`, `bg`, `grid`, `panel`, `litShape` (any shape in this style), `trail`, `caret`, the UI kit, `flyPose`, `lightReveal`, `perspective`, `scramble`, `toast`, `camera` (2.5D). Function table and a minimal example: [DEMO.md](https://github.com/lemomo-ai/lemo-opuscar/blob/413a6bd6/styles/dark-keynote/DEMO.md#engine-reference); `?scene=engineDemo` renders it.
106
+
107
+ ## 11. Variation space
108
+
109
+ You decide the product's verb, the protagonist element (or none), the problem image, the accent, the structure, the opening, the ending, the camera path and the score process. All far from our demo:
110
+
111
+ - Structures: **a countdown** (a release checklist ticking through its items, each a UI moment, ending on "shipped"); **side by side** (two versions of a workflow run in split screen, the old one drowning, the new one finishing early); **a zoom ladder** (one pixel → a component → a screen → a fleet of devices, each level a new fact).
112
+ - Openings: **the number first** (a huge stat on black, its meaning revealed backwards); **a plan view of an empty grid** that fills slot by slot; **a hard insert storm** from frame one, calm arriving only later.
113
+ - Endings: **one tile left** lit in the accent on an empty grid; **the product running quietly** in a wide shot, no text; **a shipped state** (a single confirmation toast, then darkness).
114
+
115
+ ---
116
+
117
+ How our demo was made (story, shots, score, end card, build): [DEMO.md](https://github.com/lemomo-ai/lemo-opuscar/blob/413a6bd6/styles/dark-keynote/DEMO.md). Read it after your treatment exists.
@@ -0,0 +1,119 @@
1
+ <!-- Vendored from lemo-opuscar (https://github.com/lemomo-ai/lemo-opuscar/tree/413a6bd6/styles/data-physical), MIT, (c) 2026 LemoLab; see ../../LICENSE-lemo-opuscar.txt. Paths under demo/ and core/ name that repo's engine, which is not shipped here: build the look in HyperFrames (../film-styles.md). -->
2
+
3
+ # Data Physicalization — Style Prompt
4
+
5
+ > Real statistics built as real objects: every unit is a countable piece of material (a plate, a block, a coin, a bar) stacked to exact scale on a crafted base, shot like a product in a studio — soft key, long shadows, shallow depth of field, physically based materials. The camera reads a number at the edge of one plate, follows the data as it grows, and pulls back until the chart is an installation.
6
+ > References (grammar only): data-sculpture and physical-visualisation practice (one unit = one object, the object is the axis); product and still-life photography (a warm key at a low angle, a cool rim, a seamless sweep); annual-report editorial design (one reading per screen, a source line, a quiet grotesk). Copy none of them; never name them in the film.
7
+
8
+ ## 1. Essence, and what it is not
9
+
10
+ - **The unit is an object.** One plate, block or coin equals one stated quantity, and the rule is said on screen once ("1 plate = 10 GW"). A heavier material marks every tenth unit, so the stack is its own ruler.
11
+ - **Scale is exact.** Heights, counts and areas are computed from the data; rounding is one unit at most and written in the facts. Two series compared on the same base use the same unit.
12
+ - **Studio light, real matter.** Metal reflects an HDRI, wood shows grain, acrylic transmits; nothing glows, nothing is outlined, no fake UI.
13
+ - **Growth is assembly.** Data increases by pieces being placed, one after another, with weight and sound; it never scales or morphs.
14
+ - **The pull-back.** At least once the chart is revealed as a made thing: a dial, a table piece, a landscape of stacks.
15
+ - **Every number has a source on screen**: real published statistics (or the user's own figures), credited in frame.
16
+
17
+ Not Isometric Infographic (no icons, no flat colour coding), not Glass Product Render (the object is data), not Data Storytelling (no paper chart or inked axes), not Dark Tech Keynote (no black stage or neon), not Brick Toy (no toy proportions, no characters).
18
+
19
+ ## 2. Materials & rendering
20
+
21
+ - **Pieces**: thin boxes or cylinders instanced in the thousands, each with a few-millimetre random offset and yaw, a ±7 % value change and a hairline gap: that is what makes a stack read as stacked, not as a bar.
22
+ - **Material per series**, chosen so two series separate in one glance at thumbnail size: brushed metal against tinted acrylic, pale wood against dark stone, copper coins against paper. A third material (e.g. brass) only for the ruler pieces, shared by every series.
23
+ - **Base**: a real-texture slab (wood veneer, stone) with inlaid marks: a tick ring, the series' paths, the labels of categories or years, cut into the surface at the base's own scale, lit with the scene.
24
+ - **Rendering**: PBR (transmission for acrylic), an HDRI at low intensity for reflections only, a warm key at 20–35° with long soft shadows, one or two cool rims so metal and acrylic separate from wood at distance; GTAO, physical depth of field, 2× supersampling, a light vignette.
25
+ - **Screen space only for type**: readings, verdicts, the source line, subtitles, the title card. Every reading is pinned to its object through the same world → screen function as the camera.
26
+ - **Post**: grain light (the background is pale), no lens flares, no chromatic aberration.
27
+
28
+ ## 3. Colour logic
29
+
30
+ - The set is warm and neutral: a seamless greige sweep, the base in a natural material, the series in material colours (silver, pale teal, brass, oak). Material, not paint, separates series.
31
+ - **One accent** (e.g. signal orange) for the reading or verdict that matters on this screen; nothing else is accent-coloured.
32
+ - Ink is near-black at two strengths (value, then labels at ~60 %).
33
+ - No rainbow series palettes, no colour ramps on the objects, no dark mode.
34
+
35
+ Example (our demo): sweep #C4BEB4, walnut base, aluminium #C8CCD1 (metal), acrylic #9FD3D6 with teal attenuation, brass #D2B07A, ink #1C1D20, accent #D4521C.
36
+
37
+ ## 4. Type & subtitles
38
+
39
+ - **Roles**: a light grotesk for numbers (e.g. Inter 200–300; the hero reading 130–170 px, a stack reading 46–56 px); a sans for labels and verdicts in the film's language (e.g. Noto Sans SC 500, 24–46 px); a monospace for units, years and source lines (20–24 px); a serif only for the title. OFL, self-hosted, CJK subset.
40
+ - **A reading** = a dot on the object, a 1.4 px leader, a small swatch of the series' material, the category line, then the value and unit, on a translucent paper plate (~84 %). Two readings of one pair stack in one column, larger value on top.
41
+ - **The source line** (dataset, publisher, year, licence, e.g. "数据:IRENA (2026),经 Our World in Data 整理 · CC BY 4.0") is in frame with the data, small (20–22 px, ink at ~60 %) in a corner away from the subtitles, at least from the first reading to the summary, and on the title card.
42
+ - **A verdict** sits in the upper-left third on its own plate in the accent colour, underlined by a growing rule; it appears only after the readings it judges have been still for ≥ 2.5 s.
43
+ - **Subtitles**: bottom-left, a 2 px ink rule and a paper plate fading right; if the film is bilingual, the film's language on top; each line one line only, measured with the real font (`nowrap`), split into two cues rather than wrapped. Hold ≥ max(1.8 s, speech + 0.6 s).
44
+ - Labels hold ≥ CJK characters ÷ 4.5 + 1.5 s / letters ÷ 15 + 1.5 s; a counter reports its landing value; nothing below 20 px.
45
+
46
+ ## 5. Motion quality
47
+
48
+ - On ones, 24 fps; the camera never stops (2–5 % creep on holds).
49
+ - **Cascade**: a stack assembles bottom-to-top in 0.5–1.0 s, each piece dropping a few centimetres with an ease-out.
50
+ - **Feed**: one period's increase arrives piece by piece from out of frame, quintic ease-out, a yaw that unwinds ("placed", not "dropped"), 8–16 pieces per second, the counter rolling with the pieces landed.
51
+ - **A single heavy object** falls with gravity, lands with one small damped bounce, its shadow tightening.
52
+ - Readings fade in with a 16 px rise and draw their leader; they leave by fading, never by sliding.
53
+ - Never moves: the base, a piece once landed, the ruler pieces.
54
+
55
+ ## 6. Camera grammar
56
+
57
+ | Move | What it expresses | Can serve |
58
+ |---|---|---|
59
+ | Macro dolly along a stack's edge, rack focus | the unit is real and countable | the rule "1 piece = X"; a single record |
60
+ | Low lateral track along the series | time passing; growth | a decade; a ranking; a sequence of sites |
61
+ | Locked three-quarter frame on two subjects | comparison | before/after; A against B; a crossover |
62
+ | Crane with the rising top | accumulation | one year's increase; a target being reached |
63
+ | Pull-back to near top view | the whole as an object | a summary; a ratio; an ending |
64
+ | Slow orbit around the base | the installation as sculpture | a title; a breath |
65
+
66
+ The subject fills at least a third of the frame height at key moments; readings live in empty background, never over the subtitle strip; comparisons keep both subjects completely in frame. Transitions are camera moves inside one set (one continuous take where possible); no cuts to a chart, no wipes, no page turns.
67
+
68
+ ## 7. Sound palette
69
+
70
+ - **The material's own sound** is the foley: metal plates tick bright and short (inharmonic partials 3–8 kHz), acrylic toks duller (1–3 kHz), wood knocks, coins ring. A cascade is a burst of these at the landing times, scaled down as density rises.
71
+ - **The ruler sings**: every ruler piece (each 10th) rings a pitched mallet note, one timbre per series (e.g. glockenspiel for metal, glass harp for acrylic), climbing a pentatonic scale with the count — the chart becomes an arpeggio.
72
+ - **Score**: mallets and air — marimba ostinato, bowed and struck vibraphone, harp, glass, a soft synth pad and a pulse bass with audible 2nd/3rd harmonics; horns for a turn. Accelerate by subdivision (8ths → 16ths), not tempo.
73
+ - **Impacts**: a turn or a last object lands on punch (60–120 Hz) + bass drum + timpani + a bell; the two or three designed impacts are the loudest moments.
74
+ - **Silence**: a 0.3–0.6 s suck-out (music and foley −30 dB) before each designed impact; a thin studio-air bed stays.
75
+ - **Mix**: voice ~10 dB over music, ruler notes under the voice, −14 LUFS, true peak ≤ −1.2 dBTP. Voice: calm, precise, short sentences.
76
+
77
+ ## 8. Native moves
78
+
79
+ - **The unit close-up.** Push into the side of a stack until one piece fills the frame; bracket one piece ("= 10 GW") and one ruler piece ("= 100 GW"). *Fits content like:* tonnes of CO₂ as steel plates; a budget as banknote bricks; a population as wooden discs.
80
+ - **The paired climb.** Two series on one base, one material each, built year by year as the camera tracks; the crossover is held still with both readings before the verdict. *Fits content like:* imports vs exports; renewables vs fossil capacity; two companies' revenue.
81
+ - **The feed.** One period's increase arrives piece by piece onto last period's level, the counter rolling with the landings. *Fits content like:* this year's new hires on last year's team; a quarter's sales; a record harvest.
82
+ - **Chart to installation.** Pull back until the bars are a dial, a skyline or a table piece; the base's inlaid marks become its typography. *Fits content like:* twelve months as a clock; regions as a map-shaped base; product lines as a city.
83
+ - **The last object.** One single heavier piece (a brass puck, a coin, a weight) lands on the base carrying the final number engraved. *Fits content like:* a total; a ratio; a target met.
84
+
85
+ ## 9. Pitfalls of the medium
86
+
87
+ - Two materials too alike (bright aluminium vs clear acrylic) read as one series: give one a tint or a finish change, and check at thumbnail size.
88
+ - Long shadows and warm reflections turn metal brown at distance: add a cool rim light and keep the base darker than the pieces.
89
+ - Thin pieces moiré at 2–3 px per layer: random per-piece value and offset, 2× supersampling.
90
+ - A reading pinned to a moving object can leave the frame: clamp it to a safe box.
91
+ - Counters that roll by time instead of by landed pieces lie; tie them to the object count.
92
+ - Rounding to whole pieces can invert close values; when two values are within one unit, say so on screen or choose a finer unit.
93
+ - Transmission streaks at low angles: acrylic roughness ≥ 0.2, tinted attenuation.
94
+
95
+ ## 10. Engine
96
+
97
+ - `demo/set.js` — `buildSet(scene)` (HDRI, warm key + cool rims, base with inlay canvas, instanced pieces per material, the last object) and the landing schedule (`SHEETS`, `EVENTS`, `landed(stack, t)`); change `PAIRS`, the unit and the materials for any single or paired series.
98
+ - `demo/film.js` — cylindrical camera keys (`track`, `core/lib.js`) with focus on a target point, the reading kit (`pairLabels`, `verdict`, `plate`, `swatch`), counter, subtitles (`SUBCHECK`), `TEXTS`, `EV`. `demo/mix.py` — material foley (`tick_alu`, `tok_acr`), ruler notes, suck-outs, master.
99
+ - **Extra packages and packs**: beyond `setup.sh deps` only the studio HDRI, `sh tools/fetch.sh hdri` (Poly Haven, CC0, 12 MB); with narration `setup.sh deps voice`; for a sampled score `sh tools/fetch.sh instruments vsco2ce` / `vcsl` / `freepats`. The walnut veneer is in `core/assets/polyhaven/`. Anything you add (a spreadsheet reader, other textures) goes into a private venv / node_modules in the project folder, never into `$LIB/.venv`.
100
+ - Minimal example, not in the demo: one series of twelve monthly values on a 12-position circle, the annual total engraved on the last object.
101
+
102
+ ### Sources, licences, facts
103
+
104
+ - **Statistics for a new topic**: Our World in Data (each chart's "About this data" names the original source; CC BY 4.0 — credit both), World Bank Open Data (CC BY 4.0), Eurostat (CC BY 4.0), US Census / BLS / EIA (public domain); UN Data, IRENA, IEA free tables and other national statistics offices (e.g. 国家统计局): check each dataset's terms. Search the portal for the indicator, download the CSV, keep the file and its metadata in the project's `data/`.
105
+ - **Licences**: CC0, public domain and CC BY are fine with a credit. ODbL, CC BY-SA, "no known restrictions" or "free for non-commercial use" are not CC0: name the terms to the user and ask before using them. Textures and HDRIs: Poly Haven / ambientCG (CC0).
106
+ - **The user's own numbers** (annual report, ESG data, sales): ask for them and for the document they come from; never invent or round them into a better story. Never let generated images stand in for real data or material.
107
+ - **Keep a FACTS.md in the project folder** — each on-screen number and spoken claim, its source URL, the quoted wording or row, and how any derived value (ratio, difference, units per piece) was computed — and deliver it with the film.
108
+
109
+ ## 11. Variation space
110
+
111
+ Decided per film: the unit and its materials, the base and its shape, which series share it, the camera route, pacing, the last object, accent hue within the colour logic.
112
+
113
+ - Structures: a single series rising to a record; two series and their crossover; a ranking of regions laid out as a map-shaped base.
114
+ - Openings: the macro of one piece being placed; the finished installation seen from above, then the dive to the first unit; an empty base with its inlay waiting.
115
+ - Endings: the last object landing at the centre; a slow orbit of the whole installation; a single piece lifted off to show what one unit is.
116
+
117
+ ---
118
+
119
+ How our demo was made (story, shots, score, title card, build): [DEMO.md](https://github.com/lemomo-ai/lemo-opuscar/blob/413a6bd6/styles/data-physical/DEMO.md). Read it after your treatment exists.
@@ -0,0 +1,123 @@
1
+ <!-- Vendored from lemo-opuscar (https://github.com/lemomo-ai/lemo-opuscar/tree/413a6bd6/styles/dataviz), MIT, (c) 2026 LemoLab; see ../../LICENSE-lemo-opuscar.txt. Paths under demo/ and core/ name that repo's engine, which is not shipped here: build the look in HyperFrames (../film-styles.md). -->
2
+
3
+ # Data Storytelling — Style Prompt
4
+
5
+ > A chart that tells a story: real data, drawn mark by mark on cream paper by a red–blue pencil, with handwritten notes pinned to the numbers. The chart itself is the camera, the rhythm and the plot.
6
+ > References (grammar only): Hans Rosling's *200 Countries, 200 Years, 4 Minutes* (one dot is a character), Ed Hawkins' warming stripes (a diverging ramp on a reference mean, no axes), The Pudding / NYT scrollytelling (one idea at a time, growing axes, pinned notes). Copy none of their charts, layouts or typefaces; never name them in the film.
7
+
8
+ ## 1. Essence, and what it is not
9
+
10
+ **The chart is the film.** Every mark is a real number and every movement is a meaningful chart operation (a mark lands, an axis grows, the scale changes, a series morphs, a note is pinned). The data is real, openly licensed and traceable. You change the framing, never the numbers.
11
+
12
+ **Pick the chart the data asks for:**
13
+
14
+ | The data is about | Chart |
15
+ |---|---|
16
+ | comparing categories, rankings | bars, a ranked bar race |
17
+ | a relationship between two measures | scatter or bubble chart (one dot can be a character) |
18
+ | place | map, choropleth, dots on a map |
19
+ | parts of a whole, counts of people | unit / waffle chart, proportional squares |
20
+ | before → after | slope or dumbbell chart |
21
+ | a distribution | histogram, beeswarm |
22
+ | where things go | flow / Sankey |
23
+ | change over time | line or dot series, stripes, area |
24
+
25
+ Three layers make it a story, not an infographic: **a human scale** (handwritten notes pinned to marks), **a performer** (a physical pencil that draws every mark), and **sonification** (each mark is a pitch; the trend is heard before it is read).
26
+
27
+ Not a dashboard (one idea at a time), not a keynote with charts (no slides), never decoration.
28
+
29
+ ## 2. Materials & rendering
30
+
31
+ - **Paper**: warm cream, fixed-seed fibre noise and a faint dot grid in world space. **Ink**: dark warm ink for axes and series, pale warm grey for grid and zero line, IBM Plex Mono ticks.
32
+ - **Marks**: data dots carry a thin ink ring so pale values stay visible on cream. A mark lands with a short pop and a thin ripple; suppress ripples when marks arrive closer than ~0.1 s.
33
+ - **Handwriting** (Caveat) in pencil, per-glyph jitter, graphite grain, written on as the tip dances over the x-height. Leaders are wobbly curves ending in an **un-closed** ring around the mark.
34
+ - **The red–blue pencil**: hex body, blue half / red half, sharpened wood cone. Only the tip end shows, from the lower right; its shadow drifts farther and softer with lift; sharp tip, soft body.
35
+ - **Layout**: a plot box fixed in world space, a **memory zone** for early notes, every note pinned in **data space** (value + pixel offset) so rescales keep the layout, a bottom band for the caption.
36
+
37
+ ## 3. Colour logic
38
+
39
+ - Colour encodes **one thing: the value**. Diverging data uses a ramp (ColorBrewer RdBu family) centred on the mean of a meaningful reference period, with a symmetric span; data with no natural centre uses one sequential ramp. Everything else is ink on cream.
40
+ - **Honesty beats drama**: pale values stay pale; never stretch a ramp to make a change look bigger.
41
+ - The two pencil leads have meanings: **blue for memories and human notes, red for records and warnings**. A change of lead marks a turn.
42
+ - One `accent` colour may bypass the ramp for a mark that is not data (a logo, a highlight).
43
+
44
+ ## 4. Type & subtitles
45
+
46
+ - **The subtitle is the figure caption**: a text serif (Newsreader), ink colour, left-aligned with the chart, ≤ 2 lines, with a hairline rule above it and a small mono kicker for the range drawn so far. Words appear on their whisper timestamps over a paper-colour band. Hold ≥ max(1.8 s, speech + 0.6 s).
47
+ - The title is the **chart's own headline** (Newsreader), set in world space above the plot; it fades when the camera is close and returns with the full view.
48
+ - No captions over a signature chart operation or a silence.
49
+
50
+ ## 5. Motion quality
51
+
52
+ - **The rhythm of the data is the rhythm of the film.** Map the marks to a musical grid; to accelerate, one option is to **divide the beat instead of changing tempo**. Pick a tempo whose finest subdivision lands on whole frames (at 24 fps a minute has 1440 frames; the count of finest notes per minute must divide it), so picture and sound never drift.
53
+ - **Pencil acting**: lift before each tap, land with the shadow meeting the tip, a tiny rebound; hurry as data densifies, tremble like a seismograph needle at a peak. It can **flinch** (recoil and freeze), **hesitate** (hover before a mark) and **exit** (hand the story to the viewer).
54
+ - **Rescale** reads as ratchet clicks (stepped, each step eased); a calm rescale is smooth.
55
+ - **Morph**: a staggered sweep, each mark easing into its new form; notes fade as it passes and return as tiny marks.
56
+ - **No fades to blank or dissolves.** Transitions are chart operations: axis growth, pull-backs, rescales, morphs, a cell widening into the next frame.
57
+
58
+ ## 6. Camera grammar
59
+
60
+ A 2D camera `{x, y, zoom, roll}` over **one sheet of paper**. A film is one take; a hard cut is rare and meaningful. The moves below are a vocabulary, not a route. Opening and ending come from the topic.
61
+
62
+ | Move | Expresses | Can serve |
63
+ |---|---|---|
64
+ | Extreme close-up on one mark, following its leader | One fact, one life | a single case; a named person |
65
+ | Full view first, then dive to one mark | The pattern before the case | a familiar trend; a myth to correct |
66
+ | Pull back as axes grow out of the marks | The frame arrives with the unit | naming the measure; widening a claim |
67
+ | Track the pencil, newest mark at ~60 % of width | Progress: the past behind, the future ahead | a series in time; a race; a queue |
68
+ | Pedestal with rising data, a Dutch angle creeping in | Escalation, unease | runaway growth; a debt |
69
+ | Punch-in over 2 frames, decaying shake, jolt on rescale | Surprise, a broken frame | an outlier; a crash |
70
+ | Fast pull-out, roll, small constant tremor | A rush | a boom; a cascade; a panic |
71
+ | Locked-off | The transformation is the movement | a morph; a slow reading |
72
+ | Hold on one mark, then pull back | The part inside the whole | a verdict; context |
73
+ | Pull and pan to add more real data | Scale switch | a longer record; the rest of the list |
74
+ | Lateral pan across notes in the memory zone | Recollection | a biography; a timeline of events |
75
+
76
+ Framing: subjects fill ≥ 1/3 of frame height at key moments. When the real axis scrolls off-screen, pin its tick labels to a paper strip at the frame edge (frozen pane).
77
+
78
+ ## 7. Sound palette
79
+
80
+ - **Ambience** follows the places the notes evoke (J-cuts in, L-cuts out). **Foley** is graphite, paper and wood: tick-and-paper taps, scratches for handwriting, a ruler hiss for axes, a paper puncture for a broken frame, a wooden click for the pencil flip, ratchet teeth for a rescale, a paper sweep for a morph.
81
+ - **Sonification** is the music: pitch = value, rhythm = time density. Low values snap to a pentatonic scale, middle ones to semitones, extreme ones unquantized, with detune growing away from the reference. Timbre: a **low-pass-gate "plonk"** (sine + FM whose index rises with the value: wood → metal). Dense passages: quieter notes, decay ≤ 1.5 × the gap.
82
+ - **Bed**: detuned-saw pad, soft kick, noise shaker, low-passed hats, sine sub, sample-and-hold blips, drones; harmony can darken or brighten with the data.
83
+ - **Silence** is a tool: true digital silence (all layers) where the data should be heard alone, before a key mark, a morph or a verdict; the first sound after it matters most.
84
+ - **Mix**: compressed calm, neutral narration, music ducked ~−11 dB, foley light except key taps; −14 LUFS, no grain. The voice never talks over a rush, a silence or a morph.
85
+
86
+ ## 8. Native moves
87
+
88
+ A menu: use the ones your story needs.
89
+
90
+ - **One mark = one fact.** *Fits content like:* the first store a chain opened; the first patient of a trial; the first satellite launched.
91
+ - **Axes grow with the story.** The y axis arrives when the narration first names the unit. *Fits content like:* revenue; a city's population; vaccination rates.
92
+ - **Pinned annotations.** Their content and colour carry the arc. *Fits content like:* an athlete's season; a family's migrations; releases on a usage curve.
93
+ - **Breaking the frame.** The chart must make room; the torn edge stays as a scar. *Fits content like:* a viral spike; a price bubble; a record-breaking flood.
94
+ - **Encoding morph.** Bars into a waffle, a map into a ranking, a line into a slope: the reveal of the whole. *Fits content like:* a budget as units of people; countries as a ranking; daily steps as a year strip.
95
+ - **Scale switch.** One value → the series → a longer real record, never extrapolated. *Fits content like:* one day's energy use → a year; one species count → a region.
96
+ - **The empty next cell.** A dashed slot for the value nobody knows yet. *Fits content like:* next year's election; the next launch; tomorrow's reading.
97
+
98
+ ## 9. Pitfalls of the medium
99
+
100
+ - Select data columns by header name, never by index; print every fact the narration claims.
101
+ - Notes collide with later data → data-space pins, a memory zone.
102
+ - A frame break rescaled too fast is invisible → hold the pierced state ≥ half a beat.
103
+ - Right-aligned notes are still written left to right → the pencil hops to the first letter.
104
+ - Helpers that set `globalAlpha` must multiply the incoming alpha, or fades skip them.
105
+ - Tails leak across a hard silence → render before/after in separate buffers; verify on decoded samples.
106
+ - In dense passages the pencil body lies across fresh marks → steepen its angle.
107
+ - Synthesized human sounds (a laugh) are uncanny → use a soft non-human sound.
108
+
109
+ ## 10. Engine
110
+
111
+ `demo/engine.js` (Canvas 2D, world units = chart pixels at zoom 1) is the style: paper, camera, value ramps, `pencilStroke` (any polyline in pencil), `inkShape` (any closed shape: bars, areas, map shapes), `plotShape`, `handText`, `dataDot`, `morphMark`, annotation geometry, `drawPencil`, `caption`. `demo/music/score.py` holds the sonification. The function table and a minimal example are in [DEMO.md](https://github.com/lemomo-ai/lemo-opuscar/blob/413a6bd6/styles/dataviz/DEMO.md#engine-reference).
112
+
113
+ ## 11. Variation space
114
+
115
+ You decide the dataset, the chart, the human scale, the notes, the opening, the ending, the camera path, the pacing and the silences. All far from our demo:
116
+
117
+ - Structures: **a ranked race** (bars climb and overtake; one bar is the character; a newcomer breaks the frame from below); **a map that becomes a count** (dots gather on a map as events happen, then fall into a unit chart of people in one morph); **before → after dialogue** (two years face each other as a slope chart; one line left unfinished).
118
+ - Openings: **the finished chart** (the whole pattern is already drawn; the film works backwards); **the object before the axis** (a pencil drawing of the thing measured, a ticket, a shoe, becomes the first mark); **the question first** (an empty plot with only the unit and a handwritten question; the pencil hovers).
119
+ - Endings: **one mark, close** (end on a single value and its note, never the full view); **back to the object** (the chart folds into a drawing of the thing it measured); **the headline revised** (the pencil strikes a word of the title and writes the true one).
120
+
121
+ ---
122
+
123
+ How our demo was made (story, shots, score, end card, build): [DEMO.md](https://github.com/lemomo-ai/lemo-opuscar/blob/413a6bd6/styles/dataviz/DEMO.md). Read it after your treatment exists.