wizz-method 2.18.0 → 2.19.1

package/src/skills-lib/wizz-video-styles/data/recipes.json

@@ -368,6 +368,37 @@
     "Shipping 16:9: every measured reference is horizontal; recompose for 9:16 with the keyword in the upper-middle and nothing in the bottom 20%."
    ],
    "template": null
+  },
+  "ui-morph": {
+   "title": "UI morph: one shape, many UI states (twoclipping, verbove, AnnaCher)",
+   "needs": "The product's real screens or a list of 8 to 12 UI states that tell its story (button, loader, player, slider, toggle, tabs, chart, ⌘K, toast), one accent colour and a track around 120 BPM. Nobody on camera, no footage: everything is drawn in code (HyperFrames).",
+   "fits": "App and SaaS launches, a feature announcement, a product promo for the site or the store page, a portfolio piece. Strong on X and LinkedIn with a product audience; it shows the product working instead of describing it. Weak for teaching step by step or for anything that needs a face.",
+   "look": [
+    "One shape on screen the whole time, never cut: it becomes button, loader, player, slider, toggle, tabs, chart, ⌘K and toast, changing size, corners and colour (the same language as the iPhone Dynamic Island).",
+    "Warm light grey canvas (#EDEBE6), components in black and white, at most one accent colour; a dark variant (navy with one yellow) for a product film.",
+    "Real UI and real data: the product's own labels and numbers, never lorem ipsum or generic components.",
+    "A cursor drives every change with real clicks and drags; the camera zooms so each state fills the frame."
+   ],
+   "palette": "Warm grey #EDEBE6 or beige #E6E2DA, black #111, white, plus ONE accent (orange, peach or yellow) used only where the eye must go. Dark variant: #0B1020 base, one yellow accent.",
+   "type": "One UI sans (Inter, Geist or the product's own font) in regular and semibold; mono only for a URL or a code line. No display fonts.",
+   "motion": [
+    "Every state grows out of the previous one by a spring (size, corner radius, colour), with at most one small overshoot; content swaps with a short blur.",
+    "Something happens on every beat; the state changes land on the downbeats of the beat grid (scripts/beat_grid.py), not on a hand-counted 120 BPM.",
+    "Build it as a pure function of time (seek(t)): closed-form springs, no CSS transitions or timers, so every frame renders the same. HyperFrames does this natively.",
+    "The last frame equals the first, so the piece loops."
+   ],
+   "captions": "None. The text is the interface's own (button labels, track title, chart numbers). A single short line at most, in the UI font, when the product needs one sentence.",
+   "hook": "The first state already on screen at 0 s (a button or the brand pill) and the cursor arriving on the first beat. No logo intro, no title card.",
+   "cta": "The shape returns to the first state or closes on the brand pill with the URL in small mono under it, held 1 to 2 s.",
+   "music": "The track is the whole soundtrack: a continuous bed in 4 of 6 measured pieces, around -14 LUFS. Pick an electronic or lo-fi track with a clear kick so the beat grid is reliable.",
+   "sfx": "Sparse and tied to UI events: a soft click on a press, a low tick on a snap. The measured pieces range from none to a hit on most state changes; never whooshes on every move.",
+   "dont": [
+    "Cutting between screens: the moment it cuts it becomes a screen recording, not this style.",
+    "Bouncy easing, particles, glow, gradients on the UI chrome, icons with uneven stroke, dead time, template look.",
+    "Generic components instead of the product's real UI and numbers.",
+    "Shipping square or 16:9: every measured piece is 1:1 or 16:9; recompose for 9:16 with the shape in the upper-middle and nothing in the bottom 20 %."
+   ],
+   "template": null
   }
  }
-}
+}

package/src/skills-lib/wizz-video-styles/data/references.json

@@ -3568,5 +3568,215 @@
   },
   "lufs": "-10.7",
   "formato": "16:9 (horizontal); adaptar para 9:16"
+ },
+ {
+  "id": "x-twoclipping-2103273003555402193",
+  "url": "https://x.com/twoclipping/status/2103273003555402193",
+  "channel": "zero",
+  "views": "1164424",
+  "nicho": "a",
+  "idioma": "en",
+  "style": "ui-morph",
+  "estilo_visual": "Uma forma preta só sobre cinza quente claro, que vira botão, player, slider de volume, toggle, abas, gráfico, ⌘K e toast, e volta ao botão do início (loop)",
+  "motion_transicoes": "Sem corte nenhum: cada estado nasce do anterior por mola (tamanho, cantos, cor); o conteúdo troca com blur curto; um cursor clica e arrasta de verdade",
+  "legenda": "Nenhuma; o texto é o da própria interface (rótulos de botão, título da faixa, número do gráfico)",
+  "hook_0_3s": "Botão \"Generate\" parado e o cursor chegando nele no primeiro tempo",
+  "paleta": "cinza quente #EDEBE6, preto, branco; um gradiente só na capa do player",
+  "tipografia": "uma sans de interface (tipo Inter), pesos regular e semibold",
+  "ritmo": {
+   "cuts_per_10s": 0.0,
+   "shot_median_s": 14.06
+  },
+  "musica": {
+   "guess": "continua",
+   "ratio": 0.33,
+   "impressão": "heurística de áudio; nome da faixa não confirmado"
+  },
+  "sfx": {
+   "counts": {
+    "pop_click": 0,
+    "whoosh": 1,
+    "impact_low": 0
+   },
+   "per_10s": 0.71,
+   "on_cuts": "0/0"
+  },
+  "lufs": "-14.1",
+  "formato": "1:1 (quadrado); recompor para 9:16"
+ },
+ {
+  "id": "x-verbove-2103483957266268381",
+  "url": "https://x.com/verbove/status/2103483957266268381",
+  "channel": "Martijn Verbove",
+  "views": "17438",
+  "nicho": "d",
+  "idioma": "en",
+  "style": "ui-morph",
+  "estilo_visual": "A mesma forma contínua contando um produto real (MakerMap): pílula da marca, busca, cartão de perfil, globo de pontos com os makers, lista de matches, contador, evento com RSVP",
+  "motion_transicoes": "Sem corte: morfose de pílula para cartão e para globo; o globo gira e se enche de pontos; cursor dirige cada passo",
+  "legenda": "Nenhuma; dados reais na interface (2.266 produtos, 6 matches)",
+  "hook_0_3s": "Pílula preta com o nome do produto e o ponto laranja da marca",
+  "paleta": "cinza quente claro, preto, branco e um laranja de destaque",
+  "tipografia": "sans de interface; mono só na URL do fim",
+  "ritmo": {
+   "cuts_per_10s": 0.0,
+   "shot_median_s": 20.05
+  },
+  "musica": {
+   "guess": "continua",
+   "ratio": 0.3,
+   "impressão": "heurística de áudio; nome da faixa não confirmado"
+  },
+  "sfx": {
+   "counts": {
+    "pop_click": 2,
+    "whoosh": 2,
+    "impact_low": 31
+   },
+   "per_10s": 17.45,
+   "on_cuts": "0/0"
+  },
+  "lufs": "-14.6",
+  "formato": "1:1 (quadrado); recompor para 9:16"
+ },
+ {
+  "id": "x-AnnaCher___-2103571096549433425",
+  "url": "https://x.com/AnnaCher___/status/2103571096549433425",
+  "channel": "Anna Chernikova",
+  "views": "1605",
+  "nicho": "d",
+  "idioma": "en",
+  "style": "ui-morph",
+  "estilo_visual": "Promo feito da própria interface do produto (Sprites): spinner, biblioteca de anúncios, slider de orçamento, abas de plataforma, gráfico de ROAS, toggle de piloto automático, ⌘K",
+  "motion_transicoes": "Sem corte: um componente vira o próximo; números contam; o cursor arrasta o orçamento e liga o toggle",
+  "legenda": "Nenhuma; a interface carrega a mensagem (4.2x ROAS, $200/dia)",
+  "hook_0_3s": "Spinner sozinho no centro, o produto já trabalhando",
+  "paleta": "bege quente, preto, branco e um pêssego de destaque no gráfico",
+  "tipografia": "sans de interface única",
+  "ritmo": {
+   "cuts_per_10s": 0.0,
+   "shot_median_s": 42.09
+  },
+  "musica": {
+   "guess": "sem",
+   "ratio": 0.0,
+   "impressão": "heurística de áudio; nome da faixa não confirmado"
+  },
+  "sfx": {
+   "counts": {
+    "pop_click": 2,
+    "whoosh": 27,
+    "impact_low": 0
+   },
+   "per_10s": 6.89,
+   "on_cuts": "0/0"
+  },
+  "lufs": "-24.0",
+  "formato": "1:1 (quadrado); recompor para 9:16"
+ },
+ {
+  "id": "x-nezbuilds-2103487427365294391",
+  "url": "https://x.com/nezbuilds/status/2103487427365294391",
+  "channel": "Nez",
+  "views": "519",
+  "nicho": "a",
+  "idioma": "en",
+  "style": "ui-morph",
+  "estilo_visual": "Refeito com o mesmo prompt: botão \"Get started\", loader, ilha que abre em player, volume, toggle, abas, gráfico com tooltip, ⌘K \"Export chart\" e toast com Undo",
+  "motion_transicoes": "Sem corte; molas com overshoot pequeno; cursor arrasta a barra do player e escolhe a aba",
+  "legenda": "Nenhuma",
+  "hook_0_3s": "Botão com seta e o cursor clicando no primeiro tempo",
+  "paleta": "bege quente, preto, branco",
+  "tipografia": "sans de interface única",
+  "ritmo": {
+   "cuts_per_10s": 0.0,
+   "shot_median_s": 14.06
+  },
+  "musica": {
+   "guess": "continua",
+   "ratio": 0.226,
+   "impressão": "heurística de áudio; nome da faixa não confirmado"
+  },
+  "sfx": {
+   "counts": {
+    "pop_click": 3,
+    "whoosh": 3,
+    "impact_low": 20
+   },
+   "per_10s": 18.49,
+   "on_cuts": "0/0"
+  },
+  "lufs": "-19.2",
+  "formato": "1:1 (quadrado); recompor para 9:16"
+ },
+ {
+  "id": "x-dzhohola-2103605737595249003",
+  "url": "https://x.com/dzhohola/status/2103605737595249003",
+  "channel": "Andromedus",
+  "views": "222",
+  "nicho": "a",
+  "idioma": "en",
+  "style": "ui-morph",
+  "estilo_visual": "A mesma técnica sobre a interface real de um app (T3 Code): diff de código, menu de esforço, permissões, toggles, temas, gráfico de uso, lista de PRs, celular e contador de estrelas do GitHub",
+  "motion_transicoes": "Sem corte; troca de tema claro para escuro no meio; cada cartão nasce do anterior",
+  "legenda": "Nenhuma",
+  "hook_0_3s": "Pílula \"Working 2m\" com spinner",
+  "paleta": "branco e cinza claros, depois quase preto; azul só nos toggles",
+  "tipografia": "sans de interface; mono no diff",
+  "ritmo": {
+   "cuts_per_10s": 0.0,
+   "shot_median_s": 60.05
+  },
+  "musica": {
+   "guess": "continua",
+   "ratio": 0.454,
+   "impressão": "heurística de áudio; nome da faixa não confirmado"
+  },
+  "sfx": {
+   "counts": {
+    "pop_click": 0,
+    "whoosh": 7,
+    "impact_low": 0
+   },
+   "per_10s": 1.17,
+   "on_cuts": "0/0"
+  },
+  "lufs": "-14.2",
+  "formato": "1:1 (quadrado); recompor para 9:16"
+ },
+ {
+  "id": "x-daniel_haida-2104139720829636937",
+  "url": "https://x.com/daniel_haida/status/2104139720829636937",
+  "channel": "Daniel Haida",
+  "views": "3968",
+  "nicho": "d",
+  "idioma": "en",
+  "style": "ui-morph",
+  "estilo_visual": "Variante escura: filme de produto de um app de contabilidade (taxtello) feito em React, painel com número grande, gráfico, recibo de papel, anel de score e a marca no fim",
+  "motion_transicoes": "Câmera em perspectiva passando sobre o painel; elementos entram em sequência sem corte; o logo fecha",
+  "legenda": "Duas frases curtas grandes (\"Alles im Blick.\", \"In guter Ordnung\")",
+  "hook_0_3s": "Ícone do app sozinho no escuro",
+  "paleta": "azul-marinho quase preto, um amarelo de destaque, verde no score",
+  "tipografia": "sans de interface, números grandes em mono",
+  "ritmo": {
+   "cuts_per_10s": 0.0,
+   "shot_median_s": 14.06
+  },
+  "musica": {
+   "guess": "sem",
+   "ratio": 0.033,
+   "impressão": "heurística de áudio; nome da faixa não confirmado"
+  },
+  "sfx": {
+   "counts": {
+    "pop_click": 0,
+    "whoosh": 0,
+    "impact_low": 3
+   },
+   "per_10s": 2.13,
+   "on_cuts": "0/0"
+  },
+  "lufs": "-17.1",
+  "formato": "16:9 (horizontal); recompor para 9:16"
  }
-]
+]

package/src/skills-lib/wizz-video-styles/data/styles.json

@@ -777,5 +777,59 @@
     "url": "https://www.youtube.com/watch?v=5EoO5413dBY"
    }
   ]
+ },
+ "ui-morph": {
+  "n": 6,
+  "nichos": [
+   "a",
+   "d"
+  ],
+  "langs": [
+   "en"
+  ],
+  "views_max": 1164424,
+  "views_median": 2786,
+  "cuts_per_10s": [
+   0.0,
+   0.0,
+   0.0
+  ],
+  "shot_median_s": 17.05,
+  "music": {
+   "continua": 4,
+   "fraca": 0,
+   "sem": 2
+  },
+  "sfx_on_cuts": [
+   0,
+   0
+  ],
+  "top": [
+   {
+    "channel": "zero",
+    "views": "1164424",
+    "url": "https://x.com/twoclipping/status/2103273003555402193"
+   },
+   {
+    "channel": "Martijn Verbove",
+    "views": "17438",
+    "url": "https://x.com/verbove/status/2103483957266268381"
+   },
+   {
+    "channel": "Daniel Haida",
+    "views": "3968",
+    "url": "https://x.com/daniel_haida/status/2104139720829636937"
+   },
+   {
+    "channel": "Anna Chernikova",
+    "views": "1605",
+    "url": "https://x.com/AnnaCher___/status/2103571096549433425"
+   },
+   {
+    "channel": "Nez",
+    "views": "519",
+    "url": "https://x.com/nezbuilds/status/2103487427365294391"
+   }
+  ]
  }
 }

package/src/skills-lib/wizz-video-styles/references/generated-prompts.md

@@ -1,6 +1,6 @@
 # Generated-video prompts, by catalogue style
 
-Fifteen prompts picked from [awesome-opus5-5-videos](https://github.com/yihui-dev/awesome-opus5-5-videos) (513 entries in its `data/videos.json`, MIT, checked on 2026-10-10): videos that a model wrote as code (canvas, SVG, three.js) and that went viral. Each line says what the prompt asks for, in our words; the full prompt and the video are at the links. The prompts belong to their creators: link to them, quote at most a phrase, never paste the whole prompt into a project or a skill.
+Eighteen prompts picked from [awesome-opus5-5-videos](https://github.com/yihui-dev/awesome-opus5-5-videos) (513 entries in its `data/videos.json`, MIT, checked on 2026-10-10): videos that a model wrote as code (canvas, SVG, three.js) and that went viral. Each line says what the prompt asks for, in our words; the full prompt and the video are at the links. The prompts belong to their creators: link to them, quote at most a phrase, never paste the whole prompt into a project or a skill.
 
 This page is a fixed sample. For current videos, and to skip the ones a project already used, run `node scripts/references.mjs pick --style <key>`.
 
@@ -9,7 +9,7 @@ Use this page **after** the style is chosen ([style-picker.md](style-picker.md))
 ## How a generated piece runs in the Method
 
 - **HyperFrames draws, Remotion assembles** (`_shared/video-pipeline.md`, wizz module). A prompt that asks for "one HTML file with the music" becomes: scenes drawn silent in HyperFrames, assembled in Remotion with the audio.
-- **Timing is measured, never guessed.** Words from `ctc-align`; cuts on the downbeats from [`scripts/beat_grid.py`](../scripts/beat_grid.py). Several prompts below ask for a "120 BPM grid" by hand; the script gives the real grid of the actual song.
+- **Timing is measured, never guessed.** Words from `wizz-ctc-align`; cuts on the downbeats from [`scripts/beat_grid.py`](../scripts/beat_grid.py). Several prompts below ask for a "120 BPM grid" by hand; the script gives the real grid of the actual song.
 - **Recompose for 9:16** when the original was square or horizontal: keyword in the upper-middle, nothing important in the bottom 20 %.
 
 ## Kinetic typography and lyric video ([card](styles/tipografia-cinetica.md))
@@ -21,13 +21,23 @@ Use this page **after** the style is chosen ([style-picker.md](style-picker.md))
 | ParanoidAmerica · evil pizza parlour | A full music video synced to a `lyrics.txt`, one continuous camera journey through a place, collage plus ballpoint-pen look. | [post](https://x.com/ParanoidAmerica/status/2103570879619686717) · [video](https://skillry.dev/ai-videos/opus-5-5/paranoidamerica-686717) |
 | twoclipping · wordmark launch film | A one-word brand built in one continuous take to a 120 BPM song with a drop and a breakdown; every scene grows out of the previous one, nothing fades or cuts. | [post](https://x.com/twoclipping/status/2103835273813496100) · [video](https://skillry.dev/ai-videos/opus-5-5/twoclipping-496100) |
 
-## Motion editorial and product UI ([card](styles/motion-editorial.md))
+## UI morph: one shape, many UI states ([card](styles/ui-morph.md))
+
+The most remade prompt in the catalogue: the "8 to 12 UI states" brief appears 7 times, by different authors, with the same result. All six measured references of the style come from here.
 
 | Prompt | What it asks | Links |
 |---|---|---|
 | twoclipping · one shape, many UI states | One element morphs through 8 to 12 UI states (button, loader, player, chart), a cursor drives each change, springs, cut on a 120 BPM grid. | [post](https://x.com/twoclipping/status/2103273003555402193) · [video](https://skillry.dev/ai-videos/opus-5-5/twoclipping-402193) |
 | verbove · product story in one canvas | The same morphing-shape idea as strict rules: one `draw(t)` function, real UI and real data, something on every beat, exports in 1:1, 16:9 and 9:16. | [post](https://x.com/verbove/status/2103483957266268381) · [video](https://skillry.dev/ai-videos/opus-5-5/verbove-268381) |
 | AnnaCher · promo from the product's own UI | Same structure built from the real product UI, one accent colour, last frame equals the first so it loops; a long banned list (glows, particles, bouncy easing). | [post](https://x.com/AnnaCher___/status/2103571096549433425) · [video](https://skillry.dev/ai-videos/opus-5-5/annacher-433425) |
+| dzhohola · the template on a real app | The same "8 to 12 UI states" brief pointed at an existing product (T3 Code): diff, settings, toggles, themes, usage chart and GitHub stars, light turning dark halfway. | [post](https://x.com/dzhohola/status/2103605737595249003) · [video](https://skillry.dev/ai-videos/opus-5-5/dzhohola-249003) |
+| daniel_haida · dark product film | 15 s Apple-level film for a bookkeeping app in React + Remotion, "not a feature walkthrough"; dashboard in perspective, a paper receipt, one yellow accent, soundtrack synthesised in code. | [post](https://x.com/daniel_haida/status/2104139720829636937) · [video](https://skillry.dev/ai-videos/opus-5-5/daniel-haida-636937) |
+| Bilimfili1 · a glance inside the app (vertical) | 45 to 50 s vertical tour of every feature, recorded for real in the simulator, each feature breaking out of the phone; every number on screen comes from the recordings. | [post](https://x.com/Bilimfili1/status/2103743617848459762) · [video](https://skillry.dev/ai-videos/opus-5-5/bilimfili1-459762) |
+
+## Motion editorial and product UI ([card](styles/motion-editorial.md))
+
+| Prompt | What it asks | Links |
+|---|---|---|
 | jhylee95 · launch video | Research the product, hook in the first second, distinct beats for proof, every cut and hit retimed until it lands on a beat or drop. | [post](https://x.com/jhylee95/status/2103604431627452427) · [video](https://skillry.dev/ai-videos/opus-5-5/jhylee95-452427) |
 | twoclipping · minimal launch with real footage | 10 bars at 120 BPM, one idea per shot, masked type reveals and match cuts over the owner's real vertical clips; no placeholder cards. | [post](https://x.com/twoclipping/status/2102554209166000267) · [video](https://skillry.dev/ai-videos/opus-5-5/twoclipping-000267) |
 | Mounnna · logo reveal | Logo drawn as a wireframe, low-poly shards fly in and assemble it, then the icon background and the typed brand name. A 3 to 5 s sting for the CTA. | [post](https://x.com/Mounnna/status/2103802871934497266) · [video](https://skillry.dev/ai-videos/opus-5-5/mounnna-497266) |

package/src/skills-lib/wizz-video-styles/references/style-picker.md

@@ -8,6 +8,7 @@ The material decides which styles are **possible**. Niche and goal only rank the
 |---|---|
 | Voice only (own recording or TTS), no one on camera | [motion-editorial](styles/motion-editorial.md), [explicador-animado](styles/explicador-animado.md), [meme-rapido](styles/meme-rapido.md) |
 | A song with its lyrics, or a voice-over or slogan with no footage at all | [tipografia-cinetica](styles/tipografia-cinetica.md) (the words are the image; scenes generated in code) |
+| Only the product's UI (its screens, or a list of states), no person and no voice | [ui-morph](styles/ui-morph.md) (one shape becomes each UI state, a cursor drives it, cut on the beat) |
 | Voice + app/site screens | [motion-editorial](styles/motion-editorial.md) (screenshots in a phone card), [camera-no-setup](styles/camera-no-setup.md) (film the screen), [meme-rapido](styles/meme-rapido.md) |
 | A person on camera talking, nothing else | [talking-head-legenda](styles/talking-head-legenda.md) |
 | A person on camera + headlines, articles, charts, b-roll | [talking-head-cards](styles/talking-head-cards.md) (face bubble over full-screen b-roll is a variant) |
@@ -29,10 +30,10 @@ From [`data/references.json`](../data/references.json): the styles measured in e
 
 | Niche | Styles found (highest views) |
 |---|---|
-| dev / AI / build in public (EN) | meme-rapido (8.8M), camera-no-setup (8.1M), talking-head-legenda (5.4M), quadro-branco (4.4M), motion-editorial (0.83M), talking-head-cards (0.82M), podcast-clip (0.48M) |
+| dev / AI / build in public (EN) | meme-rapido (8.8M), camera-no-setup (8.1M), talking-head-legenda (5.4M), quadro-branco (4.4M), ui-morph (1.2M), motion-editorial (0.83M), talking-head-cards (0.82M), podcast-clip (0.48M) |
 | dev / AI / tech business (BR) | quadro-branco (1.1M), talking-head-cards (0.41M), talking-head-legenda (0.26M), meme-rapido (0.23M), camera-no-setup (0.11M) |
 | personal finance / investing | podcast-clip (1.2M), talking-head-cards (1.2M), talking-head-legenda (0.77M) |
-| product / SaaS / marketing / business / law | desafio-numero (20.9M), talking-head-legenda (9.8M), tipografia-cinetica (1.2M), camera-no-setup (0.53M), podcast-clip (0.33M), quadro-branco (0.15M), talking-head-cards (0.09M) |
+| product / SaaS / marketing / business / law | desafio-numero (20.9M), talking-head-legenda (9.8M), tipografia-cinetica (1.2M), camera-no-setup (0.53M), podcast-clip (0.33M), quadro-branco (0.15M), talking-head-cards (0.09M), ui-morph (0.02M) |
 | health / fitness / nutrition | explicador-animado (33.4M), podcast-clip (9.8M), quadro-branco (0.61M), macro-asmr (0.54M), talking-head-cards (0.43M), desafio-numero (0.22M) |
 | food / recipes / lifestyle / travel | desafio-numero (107M), pov-vlog (8.7M), macro-asmr (7.7M), tour (1.05M) |
 | beauty / fashion / local services (clinic, salon, architecture, real estate) | macro-asmr (10.6M), talking-head-legenda (3.8M), talking-head-cards (2.0M), pov-vlog (1.4M), tour (0.37M) |
@@ -45,6 +46,7 @@ BR local services (clinic, salon, law, architecture), BR travel and BR sales/mar
 
 - **Saves and comments (teach, explain a system):** motion-editorial, explicador-animado, quadro-branco, talking-head-cards.
 - **Reach and shares (curiosity, humour):** desafio-numero, experimento, meme-rapido, esquete, pov-vlog, tipografia-cinetica (music and manifestos).
+- **Show the product working (launch, new feature, store page):** ui-morph, motion-editorial.
 - **Trust and authority (a person the audience should know):** talking-head-legenda, podcast-clip, camera-no-setup.
 - **Desire for a product:** macro-asmr, desafio-numero, camera-no-setup.
 

package/src/skills-lib/wizz-video-styles/references/styles/ui-morph.md

@@ -0,0 +1,68 @@
+# UI morph: one shape, many UI states (twoclipping, verbove, AnnaCher)
+
+Measured on 6 shorts (en) in: dev / AI / build in public (EN), product / SaaS / marketing / business / law.
+
+## Measured
+
+| Metric | Value |
+|---|---|
+| Reach (views) | max 1,164,424 · median 2,786 |
+| Cuts per 10 s | min 0.0 · median 0.0 · max 0.0 |
+| Median scene length | 17.05 s |
+| Music bed (continuous / faint / none) | 4 / 0 / 2 |
+| Cuts with a sound effect on them | 0/0 |
+
+Cuts come from scene detection (it undercounts overlays and cards); music and SFX from an audio heuristic that classifies type, never names the sound ([../research-method.md](../research-method.md)).
+
+## Material it needs
+
+The product's real screens or a list of 8 to 12 UI states that tell its story (button, loader, player, slider, toggle, tabs, chart, ⌘K, toast), one accent colour and a track around 120 BPM. Nobody on camera, no footage: everything is drawn in code (HyperFrames).
+
+## When it fits
+
+App and SaaS launches, a feature announcement, a product promo for the site or the store page, a portfolio piece. Strong on X and LinkedIn with a product audience; it shows the product working instead of describing it. Weak for teaching step by step or for anything that needs a face.
+
+## Recipe
+
+**Look**
+
+- One shape on screen the whole time, never cut: it becomes button, loader, player, slider, toggle, tabs, chart, ⌘K and toast, changing size, corners and colour (the same language as the iPhone Dynamic Island).
+- Warm light grey canvas (#EDEBE6), components in black and white, at most one accent colour; a dark variant (navy with one yellow) for a product film.
+- Real UI and real data: the product's own labels and numbers, never lorem ipsum or generic components.
+- A cursor drives every change with real clicks and drags; the camera zooms so each state fills the frame.
+
+**Palette:** Warm grey #EDEBE6 or beige #E6E2DA, black #111, white, plus ONE accent (orange, peach or yellow) used only where the eye must go. Dark variant: #0B1020 base, one yellow accent.
+
+**Typography:** One UI sans (Inter, Geist or the product's own font) in regular and semibold; mono only for a URL or a code line. No display fonts.
+
+**Motion**
+
+- Every state grows out of the previous one by a spring (size, corner radius, colour), with at most one small overshoot; content swaps with a short blur.
+- Something happens on every beat; the state changes land on the downbeats of the beat grid (scripts/beat_grid.py), not on a hand-counted 120 BPM.
+- Build it as a pure function of time (seek(t)): closed-form springs, no CSS transitions or timers, so every frame renders the same. HyperFrames does this natively.
+- The last frame equals the first, so the piece loops.
+
+**Captions:** None. The text is the interface's own (button labels, track title, chart numbers). A single short line at most, in the UI font, when the product needs one sentence.
+
+**Hook (0 to 3 s):** The first state already on screen at 0 s (a button or the brand pill) and the cursor arriving on the first beat. No logo intro, no title card.
+
+**CTA:** The shape returns to the first state or closes on the brand pill with the URL in small mono under it, held 1 to 2 s.
+
+**Music:** The track is the whole soundtrack: a continuous bed in 4 of 6 measured pieces, around -14 LUFS. Pick an electronic or lo-fi track with a clear kick so the beat grid is reliable.
+
+**SFX:** Sparse and tied to UI events: a soft click on a press, a low tick on a snap. The measured pieces range from none to a hit on most state changes; never whooshes on every move.
+
+## Do not
+
+- Cutting between screens: the moment it cuts it becomes a screen recording, not this style.
+- Bouncy easing, particles, glow, gradients on the UI chrome, icons with uneven stroke, dead time, template look.
+- Generic components instead of the product's real UI and numbers.
+- Shipping square or 16:9: every measured piece is 1:1 or 16:9; recompose for 9:16 with the shape in the upper-middle and nothing in the bottom 20 %.
+
+## Watch before editing
+
+- [zero](https://x.com/twoclipping/status/2103273003555402193) · 1,164,424 views
+- [Martijn Verbove](https://x.com/verbove/status/2103483957266268381) · 17,438 views
+- [Daniel Haida](https://x.com/daniel_haida/status/2104139720829636937) · 3,968 views
+- [Anna Chernikova](https://x.com/AnnaCher___/status/2103571096549433425) · 1,605 views
+- [Nez](https://x.com/nezbuilds/status/2103487427365294391) · 519 views

package/src/skills-lib/wizz-video-styles/scripts/analyze.sh

@@ -1,12 +1,25 @@
 #!/usr/bin/env bash
-# Measures one public YouTube short: download (720p), cuts (scene detection),
+# Measures one public short: download (720p), cuts (scene detection),
 # audio (music bed, SFX type heuristic, loudness) and a 16-frame contact sheet.
-# Usage: analyze.sh <youtube_id> <out_dir>  →  <out_dir>/<id>.json + <id>-sheet.png
+# Usage: analyze.sh <youtube_id|url> <out_dir>  →  <out_dir>/<id>.json + <id>-sheet.png
+# A URL (an X post, any page yt-dlp reads) is measured the same way; its id is
+# x-<author>-<status> for X and a sanitised slug otherwise (2026-10-15: the
+# code-generated UI pieces of the ui-morph style live on X, not on YouTube).
 # The .mp4 is deleted at the end; read the contact sheet before describing the look.
 set -euo pipefail
-[ $# -eq 2 ] || { echo "uso: analyze.sh <youtube_id> <out_dir>" >&2; exit 2; }
+[ $# -eq 2 ] || { echo "uso: analyze.sh <youtube_id|url> <out_dir>" >&2; exit 2; }
 id="$1"; out="$2"
-[[ "$id" =~ ^[A-Za-z0-9_-]{11}$ ]] || { echo "id inválido: $id" >&2; exit 2; }
+if [[ "$id" =~ ^https?:// ]]; then
+  url="$id"
+  if [[ "$url" =~ (x|twitter)\.com/([A-Za-z0-9_]+)/status/([0-9]+) ]]; then
+    id="x-${BASH_REMATCH[2]}-${BASH_REMATCH[3]}"
+  else
+    id=$(printf '%s' "$url" | sed -E 's#^https?://##; s#[^A-Za-z0-9_-]+#-#g' | cut -c1-60)
+  fi
+else
+  [[ "$id" =~ ^[A-Za-z0-9_-]{11}$ ]] || { echo "id inválido: $id" >&2; exit 2; }
+  url="https://www.youtube.com/shorts/$id"
+fi
 mkdir -p "$out"; cd "$out"
 f="./$id"  # prefixo ./ : ID que começa com hífen não vira opção do ffmpeg
 # .part: a first download that fails (HTTP 403) leaves it behind before the android fallback runs.
@@ -15,12 +28,11 @@ trap 'rm -f "$f.wav" "$f.mp4" "$f".*.part' EXIT
 PY="${VIDEO_STYLES_PY:-python3}"
 "$PY" -c "import librosa, numpy" 2>/dev/null || { echo "precisa de librosa e numpy: pip install librosa numpy (ou VIDEO_STYLES_PY=/caminho/do/python)" >&2; exit 2; }
 for bin in yt-dlp ffmpeg ffprobe; do command -v "$bin" >/dev/null || { echo "falta $bin no PATH" >&2; exit 2; }; done
-url="https://www.youtube.com/shorts/$id"
 fmt="bv*[height<=1280][ext=mp4]+ba[ext=m4a]/b[ext=mp4]/b"
 # When YouTube answers "confirm you're not a bot", the android player client usually still works (no cookies used).
 [ -f "$f.mp4" ] || yt-dlp -q --no-warnings -f "$fmt" --merge-output-format mp4 -o "$f.mp4" "$url" \
   || yt-dlp -q --no-warnings --extractor-args "youtube:player_client=android" -f "$fmt" --merge-output-format mp4 -o "$f.mp4" "$url"
-meta_fmt="%(view_count)s|%(like_count)s|%(channel)s|%(upload_date)s|%(title)s"
+meta_fmt="%(view_count)s|%(like_count)s|%(channel,uploader)s|%(upload_date)s|%(title)s"
 yt-dlp -q --no-warnings --skip-download --print "$meta_fmt" "$url" > "$f.meta" \
   || yt-dlp -q --no-warnings --skip-download --extractor-args "youtube:player_client=android" --print "$meta_fmt" "$url" > "$f.meta" \
   || echo "NA|NA|NA|NA|NA" > "$f.meta"
@@ -32,9 +44,9 @@ lufs=$(ffmpeg -i "$f.mp4" -af ebur128 -f null - 2>&1 | grep -E "^\s+I:" | tail -
 d=$(ffprobe -v error -show_entries format=duration -of csv=p=0 "$f.mp4")
 step=$(python3 -c "print(max(1.0, $d/16))")
 ffmpeg -loglevel error -y -i "$f.mp4" -vf "fps=1/$step,scale=200:-1,tile=8x2" -frames:v 1 "$f-sheet.png"
-"$PY" - "$id" "$lufs" <<'PY'
+"$PY" - "$id" "$lufs" "$url" <<'PY'
 import librosa, numpy as np, json, sys
-id, lufs = sys.argv[1], sys.argv[2]
+id, lufs, url = sys.argv[1], sys.argv[2], sys.argv[3]
 y, sr = librosa.load(f"{id}.wav", sr=22050); dur = len(y)/sr
 cuts = [float(x) for x in open(f"{id}.cuts").read().split()]
 H, P = librosa.effects.hpss(y, margin=2.0)
@@ -58,7 +70,7 @@ on_cut = sum(1 for c in cuts if any(abs(t-c) < 0.15 for t,_ in events))
 shots = np.diff([0]+cuts+[dur]) if dur else np.array([0])
 bed = float(np.percentile(rh,15)/(np.percentile(rh,95)+1e-9))
 meta = open(f"{id}.meta").read().strip().split("|", 4)
-json.dump({"id": id, "url": f"https://www.youtube.com/shorts/{id}", "views": meta[0], "likes": meta[1], "channel": meta[2], "upload_date": meta[3], "title": meta[4],
+json.dump({"id": id, "url": url, "views": meta[0], "likes": meta[1], "channel": meta[2], "upload_date": meta[3], "title": meta[4],
   "duration_s": round(dur,1), "cuts": len(cuts), "cuts_per_10s": round(len(cuts)/dur*10,2), "shot_median_s": round(float(np.median(shots)),2), "shot_mean_s": round(float(shots.mean()),2),
   "music_bed_ratio": round(bed,3), "music_bed_guess": "continua" if bed > 0.13 else ("fraca" if bed > 0.07 else "sem"),
   "sfx_counts": kinds, "sfx_per_10s": round(sum(kinds.values())/dur*10,2), "sfx_on_cuts": f"{on_cut}/{len(cuts)}", "sfx_events": events[:40],

package/src/skills-lib/wizz-video-styles/scripts/references.mjs

@@ -31,6 +31,7 @@ const HISTORY_REL = path.join('_wizz-output', 'video-styles', 'historico.json');
 // tour, macro...) have no entry: a code-generated video is not a reference for them.
 const GENERATED = {
   'tipografia-cinetica': { categories: ['motion', 'explainer', '3d'], match: /lyric|music video|kinetic typograph|\bMV\b/i },
+  'ui-morph': { categories: ['motion', 'explainer', '3d', 'interactive'], match: /UI states|one shape|morph|UI moments|product film|inside the app/i },
   'motion-editorial': { categories: ['motion', 'explainer'], match: /\bUI\b|product|launch|saas|\bapp\b|logo|promo|brand/i },
   'explicador-animado': { categories: ['explainer'], match: /./ },
   'quadro-branco': { categories: ['explainer', 'motion'], match: /whiteboard|hand-drawn|sketch|doodle/i },

package/src/skills-lib/wizz-web-security/SKILL.md

@@ -32,7 +32,7 @@ The ones that show up most in an audit, with the direct fix. Use as a quick tria
 
 > The first four (SQLi, IDOR, mass assignment, and permissive RLS) are **stop-the-line**: if it shows up, fix it before anything else.
 >
-> For a full adversarial audit (hunting with exploit proof + a prioritized plan), use the `security-audit-pentest` skill. This skill here is for **fixing** a specific finding from the table.
+> For a full adversarial audit (hunting with exploit proof + a prioritized plan), use the `wizz-security-audit-pentest` skill. This skill here is for **fixing** a specific finding from the table.
 
 ## References (load on demand)
 

package/tools/fetch-assets.mjs

@@ -39,7 +39,7 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const PACKAGE_ROOT = path.resolve(__dirname, '..');
 
-export const ASSETS_BASE = 'https://wizz-assets.junior-aec.workers.dev';
+export const ASSETS_BASE = 'https://assets.wizzcomms.com';
 
 // Fonte única dos bundles conhecidos. `dest` é relativo ao root do pacote
 // (repo em dev, node_modules/wizz-method quando instalado via npm — a mesma