wizz-method 2.21.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.
- package/THIRD-PARTY-NOTICES.md +24 -0
- package/package.json +4 -2
- package/removals.txt +3 -0
- package/skills-registry.yaml +133 -4
- package/src/bmm-skills/1-analysis/research/wizz-market-research/steps/step-06-research-completion.md +27 -0
- package/src/bmm-skills/1-analysis/wizz-set-feature/SKILL.md +1 -1
- package/src/bmm-skills/4-implementation/wizz-code-review/SKILL.md +1 -1
- package/src/bmm-skills/4-implementation/wizz-create-story/SKILL.md +1 -1
- package/src/bmm-skills/4-implementation/wizz-dev-story/SKILL.md +8 -1
- package/src/bmm-skills/4-implementation/wizz-quick-dev/SKILL.md +2 -2
- package/src/bmm-skills/4-implementation/wizz-quick-dev/step-03-implement.md +2 -0
- package/src/bmm-skills/4-implementation/wizz-sprint-status/SKILL.md +1 -1
- package/src/core-skills/wizz-party-mode/customize.toml +3 -3
- package/src/modules/lowticket/README.md +2 -1
- package/src/modules/lowticket/module.yaml +1 -1
- package/src/modules/lowticket/skills/wizz-clone-do-expert/SKILL.md +86 -0
- package/src/modules/lowticket/skills/wizz-clone-do-expert/references/clone-prompt-template.md +21 -0
- package/src/modules/lowticket/skills/wizz-lowticket-trafego/references/reguas.md +2 -0
- package/src/modules/wizz/_shared/cerebro.md +1 -1
- package/src/modules/wizz/_shared/organizacao.md +2 -2
- package/src/modules/wizz/_shared/video-pipeline.md +2 -0
- package/src/modules/wizz/agents/wizz-copy/SKILL.md +1 -0
- package/src/modules/wizz/agents/wizz-copy/customize.toml +5 -0
- package/src/modules/wizz/agents/wizz-copy/knowledge/playbook.md +3 -2
- package/src/modules/wizz/agents/wizz-growth/customize.toml +7 -2
- package/src/modules/wizz/agents/wizz-growth/knowledge/playbook.md +3 -2
- package/src/modules/wizz/agents/wizz-social/knowledge/blueprint-roteiro-viral.md +14 -0
- package/src/modules/wizz/agents/wizz-social/knowledge/legenda-instagram.md +12 -0
- package/src/skills-lib/wizz-cerebro/SKILL.md +18 -5
- package/src/skills-lib/wizz-design-needs/SKILL.md +7 -0
- package/src/skills-lib/wizz-design-needs/references/design-state.md +34 -2
- package/src/skills-lib/wizz-design-needs/references/gap-analysis.md +1 -1
- package/src/skills-lib/wizz-design-needs/scripts/design_state.py +305 -0
- package/src/skills-lib/wizz-design-needs/scripts/tests/test_design_state.py +143 -0
- package/src/skills-lib/wizz-impeccable/references/design-rules.md +18 -0
- package/src/skills-lib/wizz-ios-build/SKILL.md +61 -0
- package/src/skills-lib/wizz-motion-3d-director/references/motion-paths.md +2 -0
- package/src/skills-lib/wizz-offer-forge/SKILL.md +2 -2
- package/src/skills-lib/wizz-paid-ads/SKILL.md +2 -1
- package/src/skills-lib/wizz-paywall-upgrade-cro/SKILL.md +1 -0
- package/src/skills-lib/{wizz-pesquisa-de-publico-do-piva → wizz-pesquisa-de-publico}/README.md +13 -13
- package/src/skills-lib/{wizz-pesquisa-de-publico-do-piva → wizz-pesquisa-de-publico}/SKILL.md +11 -7
- package/src/skills-lib/{wizz-pesquisa-de-publico-do-piva → wizz-pesquisa-de-publico}/assets/template.html +8 -21
- package/src/skills-lib/wizz-pesquisa-de-publico/references/interview-mode.md +69 -0
- package/src/skills-lib/wizz-premium-landing-ui-researcher/SKILL.md +6 -2
- package/src/skills-lib/wizz-premium-landing-ui-researcher/references/audit-protocol.md +7 -34
- package/src/skills-lib/wizz-premium-landing-ui-researcher/references/component-sources.md +25 -0
- package/src/skills-lib/wizz-premium-landing-ui-researcher/references/design-sources.yaml +325 -0
- package/src/skills-lib/wizz-premium-landing-ui-researcher/references/mandatory-process.md +1 -1
- package/src/skills-lib/wizz-premium-landing-ui-researcher/references/mining-rubric.md +123 -0
- package/src/skills-lib/wizz-premium-landing-ui-researcher/references/source-first-protocol.md +10 -4
- package/src/skills-lib/wizz-premium-landing-ui-researcher/references/web-access-and-evidence.md +1 -1
- package/src/skills-lib/wizz-premium-landing-ui-researcher/scripts/design_sources.py +221 -0
- package/src/skills-lib/wizz-premium-landing-ui-researcher/scripts/tests/test_design_sources.py +130 -0
- package/src/skills-lib/wizz-router/references/routing-table-flat.md +7 -1
- package/src/skills-lib/wizz-seo-audit/SKILL.md +4 -0
- package/src/skills-lib/wizz-seo-audit/references/gsc-regex-perguntas.md +64 -0
- package/src/skills-lib/wizz-signup-flow-cro/SKILL.md +1 -0
- package/src/skills-lib/wizz-signup-flow-cro/references/trial-abuse.md +40 -0
- package/src/skills-lib/wizz-taste-skill/references/anti-slop-tells.md +8 -0
- package/src/skills-lib/wizz-ui-component-curator/SKILL.md +8 -7
- package/src/skills-lib/wizz-ui-ux-pro-max/SKILL.md +1 -1
- package/src/skills-lib/wizz-ui-ux-pro-max/references/common-rules-checklist.md +11 -0
- package/src/skills-lib/wizz-video-effects/LICENSE-motionmaxxing.txt +202 -0
- package/src/skills-lib/wizz-video-effects/SKILL.md +7 -2
- package/src/skills-lib/wizz-video-effects/assets/chrome/collect_layout.js +113 -0
- package/src/skills-lib/wizz-video-effects/assets/effects.config.template.json +45 -0
- package/src/skills-lib/wizz-video-effects/references/data-contract.md +32 -1
- package/src/skills-lib/wizz-video-effects/references/gates.md +4 -1
- package/src/skills-lib/wizz-video-effects/references/one-take.md +41 -0
- package/src/skills-lib/wizz-video-effects/scripts/check_chrome.py +376 -0
- package/src/skills-lib/wizz-video-effects/scripts/check_dead_frames.py +193 -0
- package/src/skills-lib/wizz-video-effects/scripts/check_one_take.py +159 -0
- package/src/skills-lib/wizz-video-effects/scripts/config.py +13 -0
- package/src/skills-lib/wizz-video-effects/scripts/test_chrome.py +181 -0
- package/src/skills-lib/wizz-video-effects/scripts/test_dead_frames.py +171 -0
- package/src/skills-lib/wizz-video-effects/scripts/test_one_take.py +126 -0
- package/src/skills-lib/wizz-video-styles/LICENSE-lemo-opuscar.txt +21 -0
- package/src/skills-lib/wizz-video-styles/SKILL.md +16 -7
- package/src/skills-lib/wizz-video-styles/assets/film-styles/dark-keynote.html +78 -0
- package/src/skills-lib/wizz-video-styles/assets/film-styles/remotion/Riso.tsx +63 -0
- package/src/skills-lib/wizz-video-styles/assets/film-styles/risograph.html +69 -0
- package/src/skills-lib/wizz-video-styles/assets/film-styles/swiss-motion.html +84 -0
- package/src/skills-lib/wizz-video-styles/references/check-ins.md +25 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/DIRECTOR.md +139 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/archive-lighttable.md +109 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/art-deco.md +112 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/ascii-crt.md +115 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/backrooms.md +125 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/blueprint.md +120 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/brick-toy.md +114 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/briefing-board.md +122 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/caption-news.md +137 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/cel-anime-80s.md +119 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/city-symphony.md +142 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/countdown.md +132 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/crayon-book.md +109 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/dark-keynote.md +117 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/data-physical.md +119 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/dataviz.md +123 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/engraving.md +123 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/game-show.md +118 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/glass-product.md +110 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/halftone-dossier.md +122 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/hd-2d.md +111 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/hologram-hud.md +129 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/impasto.md +124 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/ink-wash.md +120 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/iso-infographic.md +117 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/kino-montage.md +151 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/lidar-survey.md +118 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/living-screencast.md +124 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/lowpoly-island.md +112 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/microgame.md +122 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/microscope.md +108 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/midcentury-toon.md +124 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/news-package.md +158 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/newsreel.md +136 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/one-line.md +114 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/paper-lantern.md +116 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/paper-popup.md +119 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/papercut-red.md +110 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/pictogram-motion.md +119 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/pixel-rpg.md +117 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/risograph.md +125 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/rubber-hose.md +112 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/satellite-briefing.md +116 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/scifi-toon.md +121 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/shadow-puppet.md +124 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/silent-film.md +109 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/silkscreen-poster.md +140 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/spy-titles.md +116 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/stained-glass.md +123 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/swiss-motion.md +115 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/teardown.md +127 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/telestrator.md +137 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/tilt-shift.md +107 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/ukiyoe.md +112 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/urban-sketch.md +126 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/visual-investigation.md +140 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/watercolor.md +113 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/white-model.md +115 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/whiteboard.md +118 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles/woodcut.md +122 -0
- package/src/skills-lib/wizz-video-styles/references/film-styles.md +140 -0
- package/src/skills-lib/wizz-video-styles/references/insert-recipes.md +33 -0
- package/src/skills-lib/wizz-video-styles/references/motion-laws.md +62 -0
- package/src/skills-lib/wizz-video-styles/references/styles/desafio-numero.md +1 -0
- package/src/skills-lib/wizz-video-styles/scripts/beat_grid.py +38 -6
- package/src/skills-lib/wizz-video-styles/scripts/blind_review.py +159 -0
- package/src/skills-lib/wizz-video-styles/scripts/taste.mjs +110 -0
- package/src/skills-lib/wizz-video-styles/scripts/test_blind_review.py +82 -0
- package/src/skills-lib/wizz-vsl/LICENSE +49 -0
- package/src/skills-lib/wizz-vsl/SKILL.md +122 -0
- package/src/skills-lib/wizz-vsl/references/assembly-qa.md +123 -0
- package/src/skills-lib/wizz-vsl/references/blocks-and-leads.md +149 -0
- package/src/skills-lib/wizz-vsl/references/diagnosis.md +95 -0
- package/src/skills-lib/wizz-vsl/references/intake.md +200 -0
- package/src/skills-lib/wizz-vsl/references/mechanisms.md +138 -0
- package/src/skills-lib/wizz-vsl/references/niches.md +40 -0
- package/src/skills-lib/wizz-vsl/references/offer.md +91 -0
- package/src/skills-lib/wizz-vsl/references/production.md +75 -0
- package/src/skills-lib/wizz-web-security/SKILL.md +2 -0
- package/tools/hooks/README.md +10 -9
- package/tools/hooks/wizz-arrumar.js +1 -0
- package/tools/hooks/wizz-artifact-guard.js +31 -5
- package/tools/hooks/wizz-cerebro-lib.js +36 -13
- package/tools/hooks/wizz-feature-lib.js +4 -1
- package/tools/hooks/wizz-feature.js +66 -76
- package/tools/hooks/wizz-sprint-archive-lib.js +311 -0
- package/tools/installer/core/hooks-settings.js +1 -0
- package/tools/installer/core/installer.js +6 -0
- package/tools/installer/guided/labels.js +16 -0
- package/tools/installer/install-text.js +2 -0
- package/tools/installer/modules/cli-config.js +3 -0
- package/tools/installer/modules/core-seed.js +72 -0
- package/tools/installer/modules/mcp-config.js +3 -0
- package/tools/installer/ui.js +22 -26
- /package/src/skills-lib/{wizz-pesquisa-de-publico-do-piva → wizz-pesquisa-de-publico}/prompts.md +0 -0
|
@@ -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.
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
<!-- Vendored from lemo-opuscar (https://github.com/lemomo-ai/lemo-opuscar/tree/413a6bd6/styles/engraving), 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
|
+
# Copperplate Engraving — Style Prompt
|
|
4
|
+
|
|
5
|
+
> An intaglio plate that engraves itself: a burin cuts swelling lines into copper, a proof is pulled, and the figure builds up — outline, hatching, cross-hatching — until engraved lettering, magnified details and a hand-laid wash make a finished plate.
|
|
6
|
+
> References (grammar only): 19th-century natural-history plates — Haeckel, Audubon, Westwood, the *Britannica* copperplates (centred subject, numbered roundels, roman title over an italic name, "del." / "sculp." credits, the plate mark); Hogarth and Doré for the burin line (hatching that follows the form, crossing only in half-tones); hand-coloured plates for washes laid after printing. Never copy a plate, pose, border or title.
|
|
7
|
+
|
|
8
|
+
## 1. Essence, and what it is not
|
|
9
|
+
|
|
10
|
+
An **intaglio print**: the line is ink held in a groove a burin cut into copper. Three rules:
|
|
11
|
+
|
|
12
|
+
1. **Tone is made of lines, never of fills.** Light is bare paper; half-tone is one family of parallel lines; shadow a second family crossing it; the deepest dark a third, lozenge-making family. No grey fill anywhere in the ink.
|
|
13
|
+
2. **Every line swells and tapers.** The burin enters fine, bites deeper mid-run and lifts out to a point. Lines thicken where the form turns from the light and vanish where it faces it; contours are cut in several runs and thin where runs hand over. A uniform-width line reads as a pen or vector drawing — never.
|
|
14
|
+
3. **Colour comes afterwards, by hand**: transparent watercolour laid flat region by region over the finished black print, spilling past the lines, pooling at its edges, ink always on top. A film may stay monochrome long; colour arriving is an event.
|
|
15
|
+
|
|
16
|
+
Not a woodcut (black block, white gouges — `woodcut`), not a pen sketch (loose broken lines — `urban-sketch`), not an engineering drawing (`blueprint`), not a sepia filter.
|
|
17
|
+
|
|
18
|
+
## 2. Materials & rendering
|
|
19
|
+
|
|
20
|
+
- **The sheet is the world**: 1920×1080 world units of laid paper (cream, ~`#f1e8d2`) with world-space texture (fibres, laid lines, sparse foxing) that zooms with the camera; a pressed, bevelled **plate mark** and a ruled border (rule + hairline) frame it.
|
|
21
|
+
- **Ink** is one warm near-black (~`#1c1510`). Width ratios: outlines heaviest (swelling ×0.45–1.35), first hatching from a hair (~0.18 px) to ~2 px, crossing ~0.8×, third family ~0.6×, hair and stipple finest. Spacing is **relative to the figure** (~1/180 of its height, a little wider per later family) so small figures never go grey.
|
|
22
|
+
- **Swell law** for every hatch line: width × (0.2 + 0.8·sin(πu)^0.7), tapered over its first and last ~22 %. Families switch on by tone thresholds (~0.14, ~0.5, ~0.75 on a 0–1 tone).
|
|
23
|
+
- **One light direction** for the whole film (upper left by convention); heavier outlines away from it; tone fields come from the shape (pillow lighting, analytic spheres and cylinders), never from texture. **Occlusion** is geometric: lines stop at the shapes in front.
|
|
24
|
+
- **Roundels**: double-ruled circle, ruled-machine ground with a white halo round the subject, content authored at a large radius and scaled in. **Leaders**: hairlines from a dot on the part to the rim, routed with clearance, a small italic figure number at the root.
|
|
25
|
+
- **Hand colouring** multiplies over paper and under ink: a few px of spill, slight misregister, tide-line at the wet edge, low-frequency density lift, occasional backruns, granulation; each region blooms from where the brush touched.
|
|
26
|
+
- **Copper** (when shown): polished warm metal, polishing hairlines, a soft reflected window; grooves = dark trough + bright burr toward the light. The **burin** (lozenge steel shaft, bevelled face, mushroom handle) is held low and turned ≤ 15° off the line so the fresh groove shows; **swarf** is a narrowing ribbon curling ahead of the point, one edge lit.
|
|
27
|
+
|
|
28
|
+
## 3. Colour logic
|
|
29
|
+
|
|
30
|
+
- The print is two values, paper and ink; all tone is line density.
|
|
31
|
+
- Colour is **transparent wash only**, in muted earth and mineral pigments, one stronger pigment at most. Never opaque, never on lettering, rules or paper outside the figure.
|
|
32
|
+
- Reserve it: the whole subject at one moment, or only the part that matters — or none.
|
|
33
|
+
- Example wash sets: an amber insect with blue-grey wings; a map with a sea-green coastal band on buff land; one madder-rose organ on an otherwise black anatomy plate.
|
|
34
|
+
|
|
35
|
+
## 4. Type & subtitles
|
|
36
|
+
|
|
37
|
+
- Lettering belongs to the plate: **roman capitals** (Bodoni Moda; title ~44–56 px, wide tracking; labels ~15–19 px), **italics** for scientific names (~20–24 px), **script** (Pinyon Script) for notes, fixed size, balanced over two lines, never shrunk.
|
|
38
|
+
- Roman letters are **cut glyph by glyph**; script is **written** in one left-to-right stroke. Nothing fades in.
|
|
39
|
+
- Subtitles: script on a deckled paper slip, bottom centre, ≤ 2 lines, never over a label. Hold ≥ max(1.8 s, speech + 0.6 s). An engraved note stays in frame chars ÷ 12 + 1 s from when it starts writing.
|
|
40
|
+
|
|
41
|
+
## 5. Motion quality
|
|
42
|
+
|
|
43
|
+
- **Cutting order is the animation**: outline → first hatching sweeping across each form → crossing → darks, hair, stipple. Strokes run at constant burin speed, many at once (a few for outlines, dozens for hatching).
|
|
44
|
+
- A long single stroke may be followed by the camera; start it partly cut so no frame is empty. Keep a full build to a few seconds.
|
|
45
|
+
- Roundels fly on an eased arc with a small lift, growing log-linearly to size. Colour blooms from one point with a ragged front and a wet rim that dries; regions staggered.
|
|
46
|
+
- Nothing fades or slides like UI: lines are cut, text cut or written, colour blooms, sheets are pressed, peeled or laid down.
|
|
47
|
+
|
|
48
|
+
## 6. Camera grammar
|
|
49
|
+
|
|
50
|
+
The camera is a **loupe over a sheet**. A vocabulary, not a route. Opening and ending come from the topic.
|
|
51
|
+
|
|
52
|
+
| Move | Expresses | Can serve |
|
|
53
|
+
|---|---|---|
|
|
54
|
+
| Loupe following the burin tip | One point of attention; making | a first mark; a signature |
|
|
55
|
+
| Log-zoom pull-out | The line was part of something larger | scale reveal; context |
|
|
56
|
+
| Push to a part, ride with its roundel | Where → what, in one take | an invisible detail; a mechanism |
|
|
57
|
+
| Tilt/pan along the sheet at reading zoom | Labels in order | a parts list; a coastline |
|
|
58
|
+
| Pull back while something flies | Everything placed in relation | acceleration; summary |
|
|
59
|
+
| Locked frame, or a ≤ 2 % breathing push | The plate as document | reading time; colour moving |
|
|
60
|
+
| Raking view across the copper | The groove as depth | the cost of craft |
|
|
61
|
+
| Cut from mirrored copper to true proof | Reversal | a hidden truth; before/after |
|
|
62
|
+
|
|
63
|
+
Framing: subject inside the plate mark, labels and roundels in the margins; order details so push-ins never crop a note early. Transitions from printmaking only (proof pulled, tissue guard laid over, region burnished out and re-cut, new sheet on the bed); no dissolves or wipes.
|
|
64
|
+
|
|
65
|
+
## 7. Sound palette
|
|
66
|
+
|
|
67
|
+
- **Foley by material**: paper (peel crackle, slip tapped down, tissue rustle, sheet whoosh); press (roller rumble, thump); copper and steel (high band-passed burin hiss with chatter and faint plate ring, swarf pings, a tick on lift, circular scribe, burnishing rub); ink and water (pen scratch, ticks for cut letters, a water plip and wet brush swish). Hatching = micro-scratches denser each pass.
|
|
68
|
+
- **Room**: a quiet workroom (faint clock), paper room once the print exists.
|
|
69
|
+
- **Instruments** (choose): harpsichord, string quartet, solo cello or viola da gamba, lute, chamber organ, glass harmonica for a cold subject. Plucked and dry while lines are cut; bowed or sustained only when something soft arrives; tiny tings for a scribed ring, a low pluck on landing.
|
|
70
|
+
- **Silence** is real: cut room tone too, keep at most one small sound.
|
|
71
|
+
- **Mix**: melody an octave above the voice, music ~half under speech, −14 LUFS. Voice: a quiet curator or naturalist.
|
|
72
|
+
|
|
73
|
+
## 8. Native moves
|
|
74
|
+
|
|
75
|
+
A menu: use the ones your story needs.
|
|
76
|
+
|
|
77
|
+
- **The cut.** Burin mid-stroke, swarf rising, nothing else. *Fits:* the first line of a treaty; a watchmaker's scribe; a coast being charted.
|
|
78
|
+
- **The three passes.** Form gains volume pass by pass. *Fits:* a building from its plan; a portrait emerging; a skill improving.
|
|
79
|
+
- **Magnification roundel.** Ring scribed, burnished, re-cut larger, flown to a margin with a leader, label cut on landing. *Fits:* a gear in a clock; a pollen grain; a harbour inset on a chart.
|
|
80
|
+
- **The proof.** Sheet peels off; mirrored copper becomes true paper. *Fits:* a secret out; a draft made final; a coin's die and strike.
|
|
81
|
+
- **States of the plate.** A region burnished out and re-cut. *Fits:* a border redrawn; before/after; a design revision.
|
|
82
|
+
- **Hand colouring.** Washes bloom after the print. *Fits:* one organ lit; a flag on a historical map; a ripening fruit.
|
|
83
|
+
- **Natural size.** A tiny true-scale figure beside the engraving. *Fits:* a seed by its tree; a chip by its circuit; a stamp by its enlargement.
|
|
84
|
+
- **The finished plate.** Every label and credit, locked. *Fits:* a museum label; a frontispiece; a certificate.
|
|
85
|
+
|
|
86
|
+
## 9. Pitfalls of the medium
|
|
87
|
+
|
|
88
|
+
- Uniform width reads as pen → swell hatches, pinch contours between runs (`hatch({swell})`, `outline({run, pinch})`), keep wMin hair-fine.
|
|
89
|
+
- Overlaps without occlusion → pass occluders as `excl` (subtracted ring by ring; even-odd would cancel overlaps).
|
|
90
|
+
- Outline-only parts beside a hatched body → hatch along each part's axis, a dark at every joint.
|
|
91
|
+
- Burin along the cut hides the groove; big skew looks like poking → ≤ 15°. Regular swarf helix reads as a spring → vary winding, twist, light one edge.
|
|
92
|
+
- Reflections over grooves wash them out → copper light first. Roundels authored small freeze sub-pixel → author large, scale in. Leaders hugging the subject read as crossing it → clearance.
|
|
93
|
+
- A long early stroke never draws → the ink's early exit must look ahead by the longest stroke.
|
|
94
|
+
- A push-in cropping a fresh note breaks the reading rule → put consecutive details on one side.
|
|
95
|
+
- Scientific names: TTS may manage, ASR won't → give the checker a plain spelling.
|
|
96
|
+
|
|
97
|
+
## 10. Engine
|
|
98
|
+
|
|
99
|
+
`demo/engine/`: `burin.js` (`B.Ink` ordered stroke store + `schedule`, `B.hatch`, `B.engraveTone`, `B.contourHatch`, `B.outline`/`B.stroke`, `B.stipple`, `B.fur`, tone fields), `plate.js` (`drawSheet`, `engraveText`, `writeScript`, `roundelFrame`), `wash.js` (`Wash`), `copper.js` (copper, burin, swarf), `index.js` (`engraveShape(svgPath, {at, light, spacing, style})`: any SVG shape → engraved figure). `demo/example/index.html` engraves and colours a four-pointed spark in ~20 lines; code and function table in DEMO.md "Engine reference".
|
|
100
|
+
|
|
101
|
+
## 11. Variation space
|
|
102
|
+
|
|
103
|
+
You decide subject, details, order, opening, ending, camera path, colour, pacing and music. Use cases are **grammar for the order and duration of information**; build your own timeline from the user's facts.
|
|
104
|
+
|
|
105
|
+
| Use case | Information order | Hold per layer | Length |
|
|
106
|
+
|---|---|---|---|
|
|
107
|
+
| **Museum label / case screen** | title + scientific name → detail + term + note (×N) → where to see it | title ≥ 2.2 s; note ≥ chars/12 + 1 s; final ≥ 4 s | 30–40 s |
|
|
108
|
+
| **"One minute on …"** | question → name → 2–3 facts → one number → follow prompt | number ≥ 2.5 s alone | 35–60 s |
|
|
109
|
+
| **Textbook figure** | figure → parts labelled one by one → caption | label ≥ chars/12 + 1 s | 20–45 s |
|
|
110
|
+
| **Craft heritage** | object → 2–3 craft details → maker / edition | as above | 30–45 s |
|
|
111
|
+
| **Map / site plan** | place → insets → legend → visiting info | inset ≥ 3 s; legend ≥ 4 s | 30–45 s |
|
|
112
|
+
|
|
113
|
+
All far from our demo:
|
|
114
|
+
|
|
115
|
+
- Structures: **states of one plate** (one view re-cut three times as a place changes); **a book of plates** (four small plates turned like pages, one fact each, no roundels); **a dissection** (parts labelled in teaching order, colour only on the part taught).
|
|
116
|
+
- Openings: **the finished proof burnished back** to its first line; **on paper at 1×** (title cut first, figure grows below); **raking light over blank copper** as the design is traced.
|
|
117
|
+
- Endings: **plate beside its proof**; **the natural-size figure** held alone; **a blank new sheet** laid on the stack.
|
|
118
|
+
|
|
119
|
+
Swapping `demo/content.json` and rebuilding is a technical check that the engine re-flows, not a way to make a film.
|
|
120
|
+
|
|
121
|
+
---
|
|
122
|
+
|
|
123
|
+
How our demo was made (story, shots, score, end card, build, content fields): [DEMO.md](https://github.com/lemomo-ai/lemo-opuscar/blob/413a6bd6/styles/engraving/DEMO.md). Read it after your treatment exists.
|