luckiest-co 1.0.41 → 1.0.42

package/skills/video-studio/references/styles/keynote-ui.md

@@ -0,0 +1,59 @@
+# Product Keynote Screens
+
+- id: `keynote-ui`
+- Source: huashu-art-motion `references/动画语法/t2_keynote_ui.md` (MIT)
+- Best for: product or feature launches, release notes, "three new features", pricing and spec reveals, UI walkthrough steps. 30-90s, voiceover made of nouns and numbers.
+- Not for: explaining how something works (use a morphing style), data trends, bad news or serious events, topics with no product or object to enlarge.
+- Triggers: apple keynote, apple event, product launch video, linear, stripe, openai launch, release video, feature announcement, glass card, ui walkthrough, screen recording explainer
+- Tone cell: calm-sharp
+- Clock: smooth 30/60 fps
+
+## Look
+- Start from the real thing: a screenshot, screen recording or product photo goes full frame (at least 80% of width, 90% on vertical) and is pushed in to the part being discussed. Do not crop key UI.
+- Background near-black: `#050508`, or `#08090a` with text `#f7f8f8`. Take the product's own brand color for accents, not a default purple-blue.
+- Text: primary `#f5f5f7`, secondary white at 60%, eyebrow `#a7a7b4` with +6px tracking.
+- Type: Inter (or a similar neutral grotesque). Headings weight 600, large sizes tightened to -0.02em to -0.03em at 64px and up.
+- Optional wrappers, pick two at most per video: blurred color blobs, frosted glass cards, gradient text, blur-in text, floating. All five together reads as an AI template.
+- Glass card, if used: blur 40px, 7.5% white fill, 14% top light band, 1.5px gradient border, shadow blur 70-80 with y +30-40 at alpha 0.5. Radius 36px, inner radius = outer minus padding (22px). Glass needs colorful content behind it.
+- Shapes: rounded rectangles, capsules, thin round-cap line icons.
+
+## Motion
+- Springs are the main tool, defined by duration and bounce. Default bounce 0, entrances 0.15 to 0.3, never above 0.4. Card entrance duration 0.75s, small bubble 0.5s.
+- Non-spring curves: `cubic-bezier(.25,.1,.25,1)` for text reveals, `cubic-bezier(.4,0,.6,1)` for nav moves at 0.32s, Stripe-like `(.2,1,.2,1)` under 500ms.
+- Text enters: blur 18-26px to 0, rise 16-40px, opacity 0 to 1, 0.7-1.0s. Eyebrow, name, subtitle stagger 0.2-0.4s. Do this only on some screens.
+- Card entrance (no screenshot): from 170px below, rotate about 31 degrees around Y facing outward, scale 0.9 to 1, 0.1s stagger.
+- Camera: still after settle. Slow push about 0.9s to the area being discussed, 0.7s to move to the next area. Fast push 0.28s only for a reveal or comparison. Number or big word slams in 0.17s (1.55 to 0.94 to 1.0).
+- Count-up: 0.9s, ease-out-expo, tabular digits, counted once only.
+
+## Signature features (judged against these)
+- One idea per screen: one noun, one number, or one screenshot.
+- Real screenshot or product is the hero at 80% width or more and gets zoomed to a detail.
+- Large headings visibly tightened, no loose tracking at 64px+.
+- Spring bounce 0 to 0.3, never wobbly.
+- Numbers settle on the exact spoken moment and are counted once.
+- After a settle nothing floats and nothing creeps. Next motion happens at the next noun.
+- Layout changes every screen (title, screenshot zoom, big number, comparison), no title-three-cards loop.
+- Accent color comes from the product, not a default blue-violet.
+
+## Beat pattern (30-60s)
+- 0-3s: product on screen first, name rises 0.2-0.3s before the voice says it.
+- Next 15-25s: screenshot beats. Full-frame, push to detail on the spoken noun, glide to the next area, pull back out.
+- 50-70%: hero reveal. Two timings or two screenshots compared, then the ratio slams in over the screenshot, dimmed.
+- Insert one empty or quiet screen after a dense run.
+- Last 3-5s: closing name or single line, hold 0.6s or more.
+
+## Sound
+Clean minimal electronic or soft piano, 90-110 BPM or no beat. Soft click on text landing, low thud on a slam, subtle whoosh on a blur push.
+
+## Build it in HyperFrames
+- CSS plus canvas. Screenshot is an image layer with a camera transform (translate and scale) driven by a keyframe table.
+- Blur and spring are pure functions of t. Never read a clock. Seed any grain.
+- Blur push transition: old scene scales to 0.92 with 24px blur and fades, new scene arrives from 1.06 with blur to 1.0, 0.55s. Put a 1.08x heavily blurred copy of the old scene underneath so the edges never show black.
+- Shared-element expand: selected card grows from its rect to full screen with spring duration 0.55 and bounce 0. The new content is opaque on frame one.
+
+## Watch out
+- Glass over a flat dark color is just a grey rectangle.
+- Springs too bouncy, or several groups moving at once.
+- Floating cards and constant slow push were old habits in the source and should not be copied.
+- A count that restarts from 0 after a card expands, or a second copy of the same text during the expand.
+- Bright good-news mood used on serious subject matter.

package/skills/video-studio/references/styles/kinetic-type.md

@@ -0,0 +1,58 @@
+# Beat-Locked Kinetic Type
+
+- id: `kinetic-type`
+- Source: huashu-art-motion `references/动画语法/y5_kinetic_type.md` (MIT)
+- Best for: list openers ("3 stages", "5 reasons"), chapter cards, quotes, one-number-per-shot reveals, intros and conclusions where the structure is the message. 15-45s of type per segment, mixed with evidence shots in longer films.
+- Not for: stories and emotion (no face to relate to), long explanatory voiceover on a screen of words, lists over 5 items, anything that is all type for more than 30-60s.
+- Triggers: kinetic typography, lyric video, text animation, saul bass, typographic video, animated quote, title sequence, big word slam, text reveal, after effects type
+- Tone cell: kinetic-sharp
+- Clock: smooth 30/60 fps, with all landings on a beat grid (for example 120 BPM)
+
+## Look
+- One main word per screen, left-aligned in the left third to half (or mirrored), helper line right under it, a small label top left with a progress track, and an evidence object on the other side (code card, chat bubble, checklist). At least 130px margin.
+- Type scale about 3.4 : 1 : 0.4. Demo: main word 340px (heavy black weight), helper line 96px (heavy), label 40px (bold, 6px tracking). The main word is two words or four characters at most so it reads in 0.3s. Helper line 14 characters or fewer.
+- Each chapter has its own full-screen background color, so color is the chapter number. Demo set: yellow `#FFD23F`, coral `#FF5A36`, navy `#14213D`, off-white `#F4EFE6`, plus ink `#111111` and white. One accent per screen (for example coral circle, yellow highlighter, blue bubble `#3A86FF`, green check `#2BB673`).
+- Shapes: rounded rectangles (card r=26, bubble r=30, keycap r=22), circles for numbers, slanted highlighter blocks (slope 0.18). Dot grid background at 64px spacing, 6-10% opacity. No outlined or shadowed type. Only soft card shadows (8-18%).
+- Giant stage numeral at 900px, 5-13% opacity, bottom right behind everything.
+
+## Motion
+- Main word slam: scale 1.7 to 1, opacity 0 to 1 in the first 0.06s, under-damped spring `1 - e^(-10t) cos(2 pi 2.2 t)`, about 8% overshoot, settles in 0.35s. Title first word also rotates -8 to 0 degrees.
+- Helper line and label rise from a mask under the baseline: from +1.2 text height to 0, expo-out, 0.30-0.35s.
+- Icons, numbers, bubbles, keycaps pop with back-out s=2.6-3.0 (17-20% overshoot), 0.30-0.42s.
+- Cards slide in from 700px sideways or 260px below, 3.4 degree rotation to zero, expo-out 0.40s.
+- Typing 26 characters per second with a 2 Hz cursor. Code completion shows grey text instantly, then turns solid on the Tab press (keycap squash 14%).
+- Highlighter wipes left to right in expo-out 0.30s, 1-3 eighth notes after the word lands. Key word scales to 1.35 on the emphasis beat and stays.
+- Exit faster than entry: expo-in 0.18s, stagger 0.03s, shrink to 0.6, drop 60px, fade.
+- Stagger words by one eighth note (0.25s at 120 BPM).
+- Continuous layer is only camera drift (5px sine, 7s and 2.7s periods, +-0.5 degrees), a beat pulse (1.2% scale on each quarter, decay e^(-25t) about 0.12s), and the dot grid sliding 36px/s. Words never drift or breathe after they land.
+
+## Signature features (judged against these)
+- Main word at least 3:1 against the helper line, one thing entering at a time.
+- Chapter color changes per screen and one accent color on it.
+- Main word slams on a strong beat, small items on eighths.
+- Entry slower than exit, exit under 0.2s.
+- After landing the type is still. Motion lives in camera, beat pulse and background.
+- Every landing is on a beat number or a spoken word. Picture early, never late (at most 1 frame ahead of voice).
+- Never more than 3 same-layout pages in a row, evidence object or number slam breaks them.
+- Transition reveal frame lands on the bar line.
+
+## Beat pattern (30-60s)
+- Use one bar per screen. Per bar: beat 1 main word slams (plus giant numeral), beat 1.5 evidence object, beat 2 helper line rises, beat 3 evidence action, beat 3.5 key word grows with highlighter, beat 4 rest or exit.
+- 120 BPM gives 2s per bar. A 4-bar demo is 8.5s, a 30-60s piece uses 15-30 bars and groups them into chapters.
+- Open with a number slam or a title. Hero moment at 60-75% is the final chapter or a zoom-through transition. Finish with a last-beat hit and hold 0.5s.
+- Hold time: main word of 2 characters at least 0.5s, helper line of 7-8 characters at least 1.0s.
+
+## Sound
+Beat-driven: kick every beat, clap on 2 and 4, hat on offbeats, bass root note per bar at 105-128 BPM (demo 120). Boom on a main word, pop on small items, click on typing, rising pop on checks, riser 0.3s before each transition.
+
+## Build it in HyperFrames
+- Canvas 2D or CSS. Define `beat(n)` and write every cue in beats, not seconds. Segment start = bar line minus reveal point x transition length.
+- Transitions: zoom into a shape (first 55% expo-in to 30x, last 45% expo-out, the shape color becomes the next background), three slanted color bands sweeping with 12% stagger (0.5s), and push (0.35s expo in-out, count its "arrival" at about 90% displacement, p near 0.58, not at p=1).
+- Progress track is drawn from the global timeline as a fixed overlay, not inside each page.
+
+## Watch out
+- All text the same size and moving together.
+- Type that keeps drifting while being read.
+- Animation that lands off the beat grid, or aimed at the transition's first frame instead of the reveal frame. Each stray landing loosens the whole piece.
+- Dense four-pages-in-a-row of the same layout becomes a slideshow.
+- Real lyric videos land about once per beat. Eighth-note density works for a short opener only.

package/skills/video-studio/references/styles/line-art.md

@@ -0,0 +1,41 @@
+# Continuous Line Art
+
+- id: `line-art`
+- Source: mg-styles-15 `prompts/02-line-art.md` (MIT, Vincentwei1021)
+- Best for: luxury, finance, architecture and design-studio brand films, logo animation, monogram reveals
+- Not for: loud, playful, data-dense or colorful content
+- Triggers: line art, one line, single line, continuous line, draw-on, stroke animation, outline, minimal luxury, monoline, logo reveal, architecture film
+- Tone cell: calm-sharp
+- Clock: smooth 30 fps
+
+## Look
+Midnight ground #0B1320 or near-black. One champagne-gold line #E9D7A5, constant 3px (2-4px range) for the whole film, round caps. Softly glowing pen tip leads the draw. Lots of negative space. Optional second color, never more. Thin letter-spaced serif wordmark (for example an invented "ATELIER LINEA"). Older segments dim to about 35% as the camera moves on.
+
+## Motion
+Draw-on by stroke-dashoffset from 100% to 0. Draw speed eases into corners with cubic-bezier(0.65,0,0.35,1), slightly slower at turns. One-stroke narrative: the tail of each figure is the start of the next (seed, sapling, branches become building structure, skyline, horizon lifts and loops into a monogram). Virtual camera follows the pen tip with drift and push, then dollies out at the end to reveal the full drawing as a poster. Line-to-fill moment: the logo fills with gold from its anchor point. Wordmark fades up last.
+
+## Signature features (judged against these)
+- Single monochrome (or two-color) line is the only form language.
+- Line width constant across the film (2-4px), round caps.
+- Continuous path, each figure grows out of the previous one.
+- Draw speed decelerates at corners.
+- Glowing pen tip visible and leading the stroke.
+- Camera follows the tip, final dolly-out reveals the full composition.
+- Line-to-fill conversion on the logo.
+- Old lines dim to about 35%.
+
+## 10-second beat seed
+- 0-1.2s: tip appears and draws a seed, line already moving.
+- 1.2-6s: sapling, branches into building, skyline, horizon; camera tracking.
+- 6-7.5s (hero at 60-75%): horizon lifts into monogram, gold fill sweeps in from anchor.
+- 7.5-8.8s: dolly out to the composed poster, wordmark fades up.
+- 8.8-10s: hold with a slow tip glint or breathing glow.
+
+## Sound
+Minimal felt piano with a soft string swell. Pen-on-paper whisper whose loudness follows tip speed. Delicate chime on the fill.
+
+## Build it in HyperFrames
+Inline SVG paths pre-joined into one path, animated with stroke-dasharray = length and stroke-dashoffset as a function of t (use getTotalLength). Camera is a transform on a parent group, computed from the path point at t (getPointAtLength) with smoothing. Glow with an SVG blur filter on a duplicate stroke. Fill via a clip or mask expanding from the anchor.
+
+## Watch out
+Shimmer on thin lines at 3px: render at 2x supersample. Do not vary line width. Keep the path truly continuous or the idea breaks. Avoid camera jitter from raw tip positions.

package/skills/video-studio/references/styles/liquid.md

@@ -0,0 +1,40 @@
+# Liquid Metaball Motion
+
+- id: `liquid`
+- Source: mg-styles-15 `prompts/07-liquid.md` (MIT, Vincentwei1021)
+- Best for: music video packaging, food and drink ads, logo genesis, transition packs
+- Not for: precise technical content, minimal corporate, long text
+- Triggers: liquid, fluid, metaball, goo, gooey, paint splash, drip, melt, blob, ink flood, liquid transition, logo reveal
+- Tone cell: kinetic-soft
+- Clock: smooth 30 fps
+
+## Look
+Deep plum ground. Glossy candy liquid going hot orange to pink to violet, with specular highlights and fresnel rim so it reads as thick 3D liquid, not flat blobs. Organic curves, never straight lines. Wordmark (invented, for example "FLUX") formed from the liquid, blended with metaballs.
+
+## Motion
+Flung, never uniform: cubic-bezier(0.22,1,0.36,1). Droplets fall and splash, flat squash on landing. Blobs fuse with stretched necks that snap, both ends rebound 2-3 frames. Secondary droplets follow the main body 2-3 frames late. A big liquid wave floods the frame as the transition, with a wavy front carrying 3-5 phase-offset bulges. Liquid coalesces into the wordmark. Last drip falls from the logo and ripples.
+
+## Signature features (judged against these)
+- Metaball fusion with visible stretched necks and snap.
+- Wavy flood transition with 3-5 phase-offset bulges.
+- Secondary droplets lag the body by 2-3 frames.
+- Rebound of 2-3 frames at the snap.
+- Fake 3D lighting: specular and fresnel rim, not flat fills.
+- Ease is fast-out slow-in, never constant speed.
+- Wordmark formed from liquid, final drip and ripple.
+
+## 10-second beat seed
+- 0-2s: droplets fall and splash.
+- 2-4s: blobs merge with stretched necks, snap, rebound.
+- 4-6s: flood wave crosses the frame.
+- 6-8.5s (hero at 60-75%): liquid coalesces into the wordmark.
+- 8.5-10s: last drip, ripple, hold.
+
+## Sound
+Bubbly gloops, pour, splash and drip, deep bass swell under a glossy synth bed.
+
+## Build it in HyperFrames
+WebGL2 fragment shader: sum of 2D SDF circles with smooth-min (polynomial k about 0.2 of radius), normals from the field gradient for fake 3D lighting, text as an SDF texture blended with the same field. Positions come from closed-form springs and splines of t. Cheaper fallback: SVG blur 20px+ then an feColorMatrix alpha threshold for the goo, add highlights as a second pass.
+
+## Watch out
+Flat blob look if lighting is skipped. Necks that never snap read as jelly. Banding in gradients: add 2-3% noise. Keep wave front phase offsets seeded, not random per frame.

package/skills/video-studio/references/styles/math-explainer.md

@@ -0,0 +1,58 @@
+# Morphing Math Explainer
+
+- id: `math-explainer`
+- Source: huashu-art-motion `references/动画语法/t1_3b1b.md` (MIT)
+- Best for: explaining a mechanism step by step (neural net, matrix, gradient descent, probability, algorithm flow), 30-120s with a voiceover made of action sentences.
+- Not for: product launches, brand or mood films, real data trends, opinion or story voiceover, anything under 8s.
+- Triggers: 3blue1brown, 3b1b, manim, math explainer, linear algebra, neural network explainer, gradient descent, black background math, transform animation, equation morph
+- Tone cell: calm-sharp
+- Clock: smooth 30/60 fps
+
+## Look
+- Background pure black `#000000`. Do not use a navy gradient or bloom. The "glow" comes from saturated thin lines on black, with saturation pushed about 1.5x.
+- Palette: blue `#58C4DD`, red `#FC6255`, yellow `#FFFF00`, teal `#5CD0B3`, green `#83C167`, greys `#DDD/#888/#444`. Max 4 semantic colors per video.
+- Color is the concept name. Example: yellow = activation or signal, blue = positive weight, red = negative weight. A symbol in the formula and its object on screen share the color, and it never changes mid-video.
+- Type: serif math face (Computer Modern or CMU Serif look) for formulas, a serif for labels. Title 58px, formula 64px at 1080p.
+- Strokes: default 4px, axes and network edges 2px, grid 2px with 1px sub-grid at 25% opacity. Neuron: white 2px outline, fill opacity equals its value.
+- One main subject per screen, centered or symmetric. Title and formula pinned to the top eighth, never moving with the camera.
+
+## Motion
+- Default easing is the quintic smooth curve 6t^5 - 15t^4 + 10t^3. Linear only for write-on strokes, constant rotation, and signal flashes.
+- Rhythm: one animation runs 1-3s, then the frame holds about 1s. One concept lasts 8-20s.
+- Lagged groups: lag ratio 0.1 for small sets, 0.01 for 100 items (about 1.1s total), 0.006 for 160 edges.
+- Write-on: outline strokes first, then fill fades in over the last 60%. Under 15 glyphs takes 1s, more takes 2s.
+- Transform: resample both shapes to the same point count, align start points, interpolate linearly point by point plus color. Square grid to circles, weights flying to one neuron.
+- Signal: copy the edge, color it yellow at 1.5x width, reveal a moving window along it, stagger rows by 0.04s.
+- Camera: still while waiting. It moves only to look at the next object, one smooth push of about 1s. One fast push (0.28s, 18-32% in) at most once or twice, only when a conclusion lands.
+
+## Signature features (judged against these)
+- Black `#000000` background with no gradient and no bloom.
+- Each shot states "what becomes what", and the first frame already shows an object, not a title.
+- No more than 2 text points on screen at once, and none appears as a bullet list.
+- One color per concept, 4 semantic colors or fewer, formula symbols matching object colors.
+- Concepts connect by morph, not by cut. The last frame of one shot equals the first frame of the next.
+- Holds are truly still: no slow drift, breathing, or floating.
+- Each animation matches a verb in the voiceover, then waits about 1s.
+- A number counts up with the fill, never before the picture shows it.
+
+## Beat pattern (30-60s)
+- 0-3s: first frame is the object (grid, curve, pixels). Question title writes on after it appears.
+- Every 8-15s: one concept. Voice says the verb, one Transform plays, then 1s hold.
+- Middle: color legend appears the first time a color means something, and stays.
+- 60-75%: hero moment. Camera pushes through or into the key object (for example the one neuron that matters), preceded by a 0.3s yellow outline.
+- Last 6-8s: result settles, number counts to its final value, hold 0.6s or more. Legend remains to the end.
+
+## Sound
+Soft ambient pad or sparse piano, no beat. Quiet pen or tick on write-on, low pop on Transform landing. Voiceover leads, music 15-20 dB below.
+
+## Build it in HyperFrames
+- Canvas 2D or SVG. Every frame is a pure function of t. Write-on is a dash-offset driven by progress.
+- Morph with arrays of points: sample each shape to N points, lerp by smooth(p). Seed any layout noise.
+- Camera is a keyframe table (hold, push, hold). Zoom through an opening with log interpolation: zoom = Z^e, with Z at least 1100 / object radius so the opening covers the screen.
+- Lay out the formula once with per-token colors, then replace tokens by name between formulas.
+
+## Watch out
+- Adding glow or a navy gradient turns it into a "tech slide".
+- Using ease or linear everywhere and packing animations too fast. 8 seconds with 5 concepts is the upper limit, real use should be 2-3x slower.
+- Color meaning changing mid-video, or more than 4 colors.
+- Logic errors: connecting an output neuron to pixels when it connects to the hidden layer. Check the diagram against the claim.

package/skills/video-studio/references/styles/morph.md

@@ -0,0 +1,39 @@
+# Shape Morph Chain
+
+- id: `morph`
+- Source: mg-styles-15 `prompts/08-morph.md` (MIT, Vincentwei1021)
+- Best for: keynote-grade storytelling, icon sequences, feature walkthroughs, brand reveal built from meaningful symbols
+- Not for: character acting, texture-heavy looks, hard-cut montage
+- Triggers: morph, morphing, shape transition, icon morph, shape shifting, one shape becomes another, Apple keynote, visual storytelling, flubber
+- Tone cell: calm-sharp
+- Clock: smooth 30 fps
+
+## Look
+One hero shape, flat clean icons. Background color fields change with each morph via clean color-block wipes. Palette of 4-6 brand colors, one per beat. Invented logo and wordmark at the end (for example "morphe"). Centred, generous negative space.
+
+## Motion
+Chain of 6-8 meaningful icons on the beat, for example cup, circle, sun, sunset over sea, gull, paper plane, location pin, heart, logo. Each A to B goes through a simple intermediate (circle or capsule): A to circle then circle to B, 8-12 frames each. Rotation plus 10-15% squash and stretch through the morph. Sub-parts morph in sync (steam becomes sun rays becomes waves). Ease cubic-bezier(0.7,0,0.3,1), fastest in the middle, 3-frame cushions at start and end.
+
+## Signature features (judged against these)
+- Continuous outline with no jump cut between shapes.
+- Every complex morph bridges through a circle or capsule.
+- No knotting or tangling at any mid-point still.
+- 10-15% squash and stretch plus slight rotation during morphs.
+- Sub-parts morph in sync with the hero.
+- Color-field wipe with each morph.
+- Each morph lands on a beat.
+
+## 10-second beat seed
+- 0-1s: first icon pops in, hold 3 frames, begin morph (hook on frame 0).
+- 1-6s: 5-6 morphs on the beat, each with a color wipe.
+- 6-8s (hero at 60-75%): the most surprising morph (paper plane to pin to heart) with synced sub-parts.
+- 8-10s: shape becomes the brand logo, wordmark fades in, hold with micro-motion.
+
+## Sound
+Rhythmic plucky arpeggio. A pitched whoosh per morph landing on the beat.
+
+## Build it in HyperFrames
+SVG with GSAP MorphSVGPlugin if licensed, otherwise flubber or a custom resampler: resample both paths to the same N points (about 200), rotate the start index to minimise total vertex distance, then lerp with the easing curve. All as a pure function of t. Always render mid-point stills for every morph and inspect for knots.
+
+## Watch out
+Mismatched vertex counts and starting points cause knots. Skipping the intermediate circle on complex pairs. Mechanical look when squash and rotation are missing. Make beat times come from a single cue sheet.

package/skills/video-studio/references/styles/mosaic.md

@@ -0,0 +1,52 @@
+# Stone Mosaic
+
+- id: `mosaic`
+- Source: huashu-art-motion `04_roman.md` (MIT)
+- Best for: heritage, food, travel, history, floor-tile and craft brands, bold logos and badges (narrow use)
+- Not for: faces in close-up at small tile sizes, fast-motion UI, fine text
+- Triggers: mosaic, roman mosaic, pompeii, tesserae, tile, byzantine, ancient floor, stone tiles
+- Tone cell: calm-sharp
+- Clock: smooth 30/60 fps (stones fixed, color flows through them)
+
+## Look
+Hundreds of small stone tiles placed along outlines, with grout between them.
+- Wall `#e4ddcd`, halo ring `#f5f1e8` (a 44-50 px halo around every figure), outline `#46322a`, red frame `#a8322a` with `#7c221d` line, gold `#d0a23c`, grout rgb(112,103,92) with noise.
+- Tile size by region: wall 12 px, halo 11, figures 10, face 5-6 (small), hair 8, border strip 7.6, text 7, ground 13. Color jitter +/-4 to 8%, 9% warm tiles (+12,+4,-8), 7% cool.
+- Each tile is a rotated square with half-widths `s/2*(1.08-1.28)` each, rotation +/-0.06 rad. Grout appears along the bisector between neighbors (gap 0.75-1.25 px).
+- Edge shading: within 2.2 px of the edge, light direction (-0.6,-0.8) gives +/-16% light or dark; dome term `-5%*D1^2`; 3% pixel grain.
+- Lettering: monospace thick-stroke letters about 2 tiles wide per stroke.
+
+## Motion
+- Layout is computed once. Each frame, colors from a flat drawing flow through the fixed stones.
+- Border band as a conveyor: a pre-baked 2,106 px stone strip (26 repeats of an 81 px pattern) translated by phase `15*lt + 81*easeInOut(...)`, so the stones travel with the pattern.
+- Smoke or small props drift (55 px/s cloud band, 12 ember squares on parabolas); a small tile-sprite (emblema) carries moving objects.
+- Transition family: mosaic tiles flip over and spread outward from a point.
+
+## Signature features (judged against these)
+- Tiles laid along outline contours (distance-field iso-lines), then filled in staggered rows.
+- Visible grout formed by the bisector between irregular stones.
+- Halo of lighter tiles around every figure.
+- Smaller tiles on faces and focal details, larger on background.
+- Color flows across fixed tiles (the tiles never move except in the border conveyor).
+- Props smaller than 3 tiles wide are sprites with their own small tiles.
+
+## 10-second beat seed
+- 0-1.2s: tile border drifts, central picture assembles.
+- 1.2-6s: color moves through the stones, smoke and sparks.
+- 6-7.5s (hero): focal object flips tile by tile into the key message.
+- 8.8-10s: hold, border continues.
+
+## Sound
+Lyre and frame drum, 80-100 BPM, stone click foley per tile flip.
+
+## Build it in HyperFrames
+Canvas 2D with typed arrays; build once at init (about 200 ms).
+- Distance transform (Felzenszwalb-Huttenlocher) on a structure map, then walk iso-contours placing stones spaced at the tile size using a spatial hash with minimum spacing 0.8 x size; fill remaining gaps with staggered rows.
+- Per pixel store tile id and shade; per frame sample the flat drawing at each tile center and write color x shade. Draw to an offscreen canvas then `drawImage` (direct `putImageData` ignores scaling and transitions).
+
+## Watch out
+- Current weak spot: facial detail gets lost at small tile sizes.
+- Hand, cup and face crowd together at 6-8.5 px tiles. Use bigger gestures or sprite inserts.
+- Slow pattern shifts under one tile width get quantized away if only colors change. Move the stones too or move far.
+- Do not use a special small tile size in one region only; it shows as a patch when still.
+- Thin serif letters break into wrong letters at 7-9 px tiles.

package/skills/video-studio/references/styles/newsroom-collage.md

@@ -0,0 +1,60 @@
+# Evidence Desk Collage
+
+- id: `newsroom-collage`
+- Source: huashu-art-motion `references/动画语法/y2_vox.md` (MIT)
+- Best for: news, history, politics and "how did this happen" explainers built on real material (clippings, screenshots, photos, maps, quotes). Journalist-style argument with evidence. 45-180s.
+- Not for: pure concept or mechanism with nothing real to show (it becomes fake archive), derivations, character-driven comedy.
+- Triggers: vox, johnny harris, explainer journalism, news explainer, documentary collage, paper desk, red string, highlighter, investigation board, map explainer, archive footage collage
+- Tone cell: calm-sharp
+- Clock: on twos (elements step at 12 fps, camera smooth 24-60 fps)
+
+## Look
+- Three-color system: near-black `#171716`, paper white `#E0DCDA` to `#EEEDED`, one red in two steps (bright `#B65255` for lines, dark `#93403C` for fills). Highlighter yellow `#DACF08` for emphasis only. Old map paper `#E4DCCF`, parchment `#CFB195`. No pure white, no pure black.
+- Used in the demo: desk `#e4ddcf`, clue red `#b8433f` (slightly brighter for 1080p legibility), highlighter `rgba(218,207,8,.9)` with multiply blend, a large black card `#1b1b1a` on the desk for one shot.
+- Real material is the main picture: screenshots, original text, photos fill the frame or close to it, then push to the sentence being read. A shot where material is under 60% of the frame width, more than twice in a row, is the "photo frame" layout.
+- Photos are grayscale with a 45 degree halftone, white border, two semi-transparent tape pieces. Clippings have torn, yellowed edges and a serif headline. Labels are black bars with bold white text. Index cards have ruled lines.
+- Paper texture is static. No per-frame grain. Shadows are weak (blur 10, offset (3, 6), alpha 0.28).
+- Intentionally imperfect so it reads as editorial, not advertising.
+- People can appear as cut-out stickers with a white border and shadow.
+
+## Motion
+- Two frame rates. Camera runs smooth. Elements (map color growth, red line tracing, typing, hand-drawn circles, pop-ins) step at 12 fps. Use `step(t - at, 12)` so the first frame is exactly at the cue.
+- Camera easing from 13 measured moves: median 1.29s, range 0.71-1.96s, none linear. Seven are symmetric sine in-out for long hops, six are fast-start long-tail near `cubic-bezier(.33,0,.2,1)` for reveals and tracking.
+- Defaults: push 0.6-1.5s, pull-out about 1s, follow a clue 1.3-1.8s, find next card 0.5-0.9s, fast push 0.28s only for a reveal.
+- Archive photos and clippings appear on the cut, no bounce. Only when following a timeline does the next card slide in from off-screen with a 5-15 degree tilt, flatten, about 0.8s.
+- Pen work: red underline 0.5-1s, red oval about 1s in one stroke (not closed, slightly crossing), highlighter 1.5-3s per line following the spoken words, typing about 13 characters per second.
+- When the camera is parked and a card has internal animation, the camera holds. Static cards use a push to the line being read, not a slow drift.
+
+## Signature features (judged against these)
+- Real material fills the frame and is pushed in to the exact sentence.
+- Black, paper white, one red, plus a muted highlighter, no big yellow fields.
+- Camera glides while elements step at 12 fps.
+- No tear-off paper transition and no per-frame grain.
+- Reveal actions rotate (cut-in, push, glide, highlighter, red line, stamp), never the same sequence more than 3 times.
+- Text to read is on the topmost layer and drawn last.
+- Highlighter timing follows the speaker, not the music.
+- The same event is acted out only once. After a zoom, it is not replayed.
+
+## Beat pattern (30-60s)
+- 0-4s: the source document or photo is on screen, camera framed on the claim.
+- 4-20s: slow tier holds each card 3-7s using internal motion (highlighter, typed label, red circle). Fast tier (1.4-1.8s) is image cuts only.
+- 50-70%: follow a red string from the key line to a second piece of evidence. The camera chases for 1.1-1.8s with short motion blur.
+- Then a push into the photo and a hard cut to the sharper scan of the same image.
+- Last 6-8s: pull out to the whole desk (0.85s long tail), then a closing line typed on black, hold 1s.
+
+## Sound
+Understated documentary bed, minimal pulse, change music about every 20s. Paper slide, marker squeak, soft typewriter ticks. Voice is the lead.
+
+## Build it in HyperFrames
+- Canvas 2D or SVG. Cache each paper, photo and clipping as a sprite. Seeded paper texture tiles seamlessly (sample on a torus) with fibers.
+- Halftone: convert grayscale to a 45 degree dot grid as one path. Torn edges via noise.
+- Hand-drawn lines: resample and add low-frequency noise, reveal by length.
+- Camera framing: compute the rect that contains the target plus margin. Do not hand-type coordinates. Push no further than keeps the red circle in frame.
+- Short motion blur on fast moves by stacking 7 samples along the velocity vector.
+
+## Watch out
+- Everything moving smooth at 60 fps looks like a corporate film. Everything at 12 fps makes the camera dizzy.
+- Template-style tricks (tear-off transitions, every image bouncing in, jittering paper) are not part of this look.
+- Cards stacked so two labels read together as a false sentence ("exceeded" beside "acquired"). Read the visible text in order.
+- A photo, clip or later card covering the text that is being read.
+- The source marks a highlighter that starts outside the visible frame. Move the camera first.

package/skills/video-studio/references/styles/pixel.md

@@ -0,0 +1,46 @@
+# Pixel Art 8-bit
+
+- id: `pixel`
+- Source: mg-styles-15 `prompts/20-pixel.md` (MIT, Vincentwei1021)
+- Best for: game trailers and attract screens, 8-bit music videos, nostalgic brand marketing, indie game promos
+- Not for: smooth premium brand films, photoreal, long text
+- Triggers: pixel art, 8-bit, 16-bit, retro game, sprite, chiptune, side scroller, CRT, dithering, PICO-8, Aseprite, Minecraft, Terraria
+- Tone cell: kinetic-sharp
+- Clock: stepped 10-12 fps for sprites (30 fps timeline for scrolling)
+
+## Look
+Internal resolution 320x180 scaled x6 to 1920x1080 with nearest-neighbour. Limited palette (PICO-8-like 16-32 colors), dithered sky gradient. 3-4 parallax layers (sky, far mountains, mid forest or city, near ground tiles). Sprites hand-authored 16x16 to 24x24 as pixel arrays. Chunky pixel logo (for example "PIXEL QUEST"), pixel font dialogue box. Optional CRT pass: scanlines, slight barrel, phosphor glow, without blurring pixels into mush.
+
+## Motion
+Strictly integer pixel positions and stepped timing, no smooth easing on sprites. Run cycle 6-8 frames at about 10-12 fps. Coin sparkle, slime bop, chest opens with a light burst. Parallax layers move by whole pixels at different speeds. Palette shifts day to sunset. Dialogue types out character by character. Logo drops in with a shine sweep.
+
+## Signature features (judged against these)
+- Hard pixel edges via nearest-neighbour, no anti-aliasing.
+- Limited palette (8-32 colors) with dither.
+- Sprite animation at 8-12 fps, steps() timing.
+- Integer-pixel positions only, including parallax.
+- 3-4 parallax layers at different whole-pixel speeds.
+- Typewriter dialogue box in a pixel font.
+- CRT scanlines that keep pixels crisp.
+
+## 10-second beat seed
+- 0-1.2s: sky and hero already running, coin sparkle.
+- 1.2-4s: run, jump, bop a slime, parallax scrolling.
+- 4-7s (hero at 60-75%): palette shifts to sunset, chest opens with a light burst.
+- 7-8.5s: dialogue typed out.
+- 8.5-10s: pixel logo drops in with shine sweep, held with blink.
+
+## Sound
+Chiptune: pulse lead, triangle bass, noise drums, plus jump, coin and chest SFX.
+
+## Build it in HyperFrames
+Canvas 2D at 320x180 with imageSmoothingEnabled = false, then drawImage upscaled x6 (or CSS image-rendering: pixelated). Sprite frame = floor(t*10) mod N. Parallax offset = floor(t * speed). Palette as an array of hex values, palette shift by lerping and re-quantising. Ordered-dither (Bayer 4x4) for gradients. CRT pass applied after upscale.
+
+## Watch out
+Fractional positions cause shimmer. Never use a smooth scale or rotation on sprites. Scanlines that are too heavy hide the art. Pixel CJK fonts must be OFL.
+
+## Art-history variant (huashu-art-motion `14_8bit`)
+- Draw the whole scene on a 240x135 canvas (1 low pixel = 8 screen pixels), scale up once with image smoothing off. Gradients become a 3-tone checkerboard dither band (sky `#0856ef #47c4f8 #aae9fb`).
+- Sprites: rasterize each part on its own layer, drop alpha under 110, quantize to a 14-color palette, give each part its own 1px black outline. Draw small props directly at low resolution, never scaled down from smooth paths.
+- HUD text at full resolution in Press Start 2P (OFL) with an 8px drop shadow; icons as 8x8 bitmaps.
+- Motion stepped: 4-pose loops at 15 fps, integer pixel shakes `[0,1,0,-1]`, coin pop as a half sine of 9px, 1px cloud moves every 2 frames. Transition in: pixel blocks scale up then down.

package/skills/video-studio/references/styles/pointillist.md

@@ -0,0 +1,49 @@
+# Pointillist Dots
+
+- id: `pointillist`
+- Source: huashu-art-motion `29_seurat.md` (MIT)
+- Best for: calm brand films, art and culture content, premium reveals, color theory explainers
+- Not for: fast action, small text, flat vector UI
+- Triggers: pointillism, seurat, signac, dots, optical color mixing, stipple painting, divisionism
+- Tone cell: calm-soft
+- Clock: on twos (dot recolor at 6 fps, light shimmer)
+
+## Look
+The picture is built from equal-size dots placed on a hex grid (pitch 10, row spacing 8.66, radius 4.5, +/-1.2 px static jitter, about 24,000 dots). Only 21 pure palette colors exist; mixed tones come from placing two neighbors side by side in proportion.
+- 14 saturated: `#1a2058 #2a3a9a #3f6fd0 #6aaee6 #1f6a52 #2f9a5a #a8c83a #f2cf3a #f08a2a #e0432a #c0306a #7a4aa8 #f8f4e8 #e8b48a`
+- 7 pale (mixed with white): `#f6e49a #f6c48a #cfe08a #b0cff0 #f2b8c8 #c99a4a #9a7ac8`
+A blurred, slightly desaturated copy of the flat painting sits under the dots as ground color. A dark blue 28 px border, also dotted, frames the picture. Compose for the subject; leave open flat areas so the dots read.
+
+## Motion
+- Water or sky dots re-roll their hash at 6 fps to make light shimmer.
+- 7% of dots swap to their pair color at 6 fps (4 fps and 3% read as frozen).
+- One small element drifts (a boat 40 px/s, a butterfly on `sin(2.6t)*120` with wing beat `|sin(20t)|`).
+- Transition family: the old image crystallizes into dots (grid pitch 14, radius grows to 6.4), dots recolor top-left first with a 1.35x pop, then the new image develops underneath.
+
+## Signature features (judged against these)
+- Uniform dots, no strokes, no outlines.
+- 21-color palette, tones created by optical mixing.
+- About 8% complementary-color dots (blue/orange, green/red-violet, yellow/violet).
+- Light bleed: where brightness differs by more than 45 across 14 px, add white on the bright side and deep blue on the dark side.
+- Visible deep-blue dotted border.
+- Gentle motion, adjacent-frame difference around 0.45 mean.
+
+## 10-second beat seed
+- 0-1.2s: dots crystallize from empty paper into the scene.
+- 1.2-6s: slow shimmer, one drifting element.
+- 6-7s (hero): dots pop to the new palette pair, title resolves.
+- 8.8-10s: hold, shimmer continues.
+
+## Sound
+Soft marimba or vibraphone ticks, 90-100 BPM. One tick per dot-pop wave.
+
+## Build it in HyperFrames
+Canvas 2D or WebGL. Draw a flat painting, sample color at each grid dot, pick a pair from the palette.
+- Project the target color onto the line between two palette colors to get a ratio, clamp to 0.2-0.8, add a penalty `0.004*|Pi-Pj|^2` against distant pairs, and decide per dot with `hash(i,j) < w`.
+- Add +/-20 hash jitter to the target before picking, otherwise the pair boundary forms vertical bands.
+- Batch dots into one Path2D per color, fill once per color; cache pair choices by 15-bit quantized color.
+
+## Watch out
+- Current weak spot: reads static, and the grid can look too regular. Add the shimmer and a moving element.
+- A single preferred pure color without a penalty slices gradients into stripes.
+- Without pale colors in the palette, bright walls break into white, skin and blue snow noise.

package/skills/video-studio/references/styles/presenter-explainer.md

@@ -0,0 +1,57 @@
+# Cartoon Presenter Explainer
+
+- id: `presenter-explainer`
+- Source: huashu-art-motion `references/动画语法/y6_presenter_explainer.md` (MIT)
+- Best for: business history, product mechanics and finance or tech knowledge pieces where a cartoon host walks between paper, charts and keywords and reacts emotionally. 60-180s.
+- Not for: anything without character art you can generate or supply. The source ships no character sprites and no ready-made parameterized clip, so it is a grammar and a reference approach only, not a turnkey template.
+- Triggers: presenter explainer, cartoon host, character explainer, business history video, finance explainer with mascot, spacex explainer, character walks across the chart, talking head cartoon, narrated cartoon guide
+- Tone cell: kinetic-soft
+- Clock: on twos (character frames swap, scene camera smooth)
+
+## Look
+- A cartoon presenter built from AI-generated frames stands in a scene made of paper, charts and keywords. Code controls foot anchor, position, scale and frame swaps.
+- The source gives no palette or fonts. Suggested defaults, adjust to brief: warm paper base `#F4EFE6`, ink `#1B1B1F`, one brand accent, one chart color used for the hero data. Keep chart and keyword layers quieter than the presenter.
+- Generate at least two framing sets: full body and bust. Sitting and leaning poses need their own real frames. Do not enlarge a full-body frame for a reaction close-up.
+- Layout is assigned in the storyboard, not fixed. Rotate between: presenter at the side explaining, full-screen number, left-right compare, presenter stepping into the chart, reaction close-up. Do not fix "person left, chart right" for the whole film.
+- A top bar with the year or section, the subtitles and the segment title all read from the same clock.
+
+## Motion
+- Pose changes are hard cuts with a slight pop-in, so different silhouettes never cross-dissolve into a ghost double.
+- Mouth frames switch with the voice and stop in pauses. Walking uses full gait frames, not a slide.
+- Normalize pose heights to the median height. The first cast keyframe of each segment states `x` and `s` explicitly so nothing inherits from the previous segment.
+- Numbers settle on the spoken moment. While counting, do not show assertions like "over" or "+" early. The emphasis circle appears after the number settles.
+- Nested transparency uses multiply (`*=`) so an outer fade survives.
+- Transition between pages flips only the page. Presenter and top bar continue across pages.
+- Camera: use a scene camera for pushes. Whole-frame bitmap zoom crops the character and was a known problem in the reference code.
+
+## Signature features (judged against these)
+- Presenter moves between paper, chart and keyword layers instead of sitting in a corner.
+- At least four different layouts in the film, no fixed left-right composition.
+- Full-body and bust frames used for the right shot sizes.
+- Pose swaps are hard cuts with a small pop, no dissolves between poses.
+- Mouth movement tied to the voice and silent during pauses.
+- Feet stay on a fixed anchor across frame swaps.
+- Number lands on the spoken digit, circle added afterward.
+- Year bar, subtitles and segment title share one time source.
+
+## Beat pattern (30-60s)
+- 0-5s: presenter enters at the side with a hook line, full-body frame.
+- 5-25s: alternate presenter-explaining and full-screen paper or chart beats. Keywords appear as the voice says them.
+- 60-75%: the key figure fills the screen, then the presenter steps in or reacts on a bust close-up. Leave a pause for the beat, written into the script and the voiceover.
+- Last 5-8s: presenter returns to the side with the takeaway, hold 1s with a small idle.
+- Aim for a layout change every 5-8s.
+
+## Sound
+Light upbeat bed, 90-110 BPM, ducked under the voice. Soft pops on keyword entrances, page-turn sound on page flips, a short stinger on the reaction shot.
+
+## Build it in HyperFrames
+- Canvas 2D or HTML layers. Write a `presenterFrame(pose, t)` function that picks a frame from an image set and a `drawFigure` that places it by foot anchor.
+- Cut frames from a sheet with a script that computes the foot anchor per frame.
+- Page flip is the only transition. The HUD and presenter layers draw above it from the global clock.
+- Run the project's text-in-frame QA from the first draft. For light backgrounds without subtitles, also run a subtitle-zone check.
+
+## Watch out
+- Presenter covering text, or being cropped by a push-in. Check by eye.
+- Reusing the same left-person right-chart composition across the film.
+- Pose frames that do not match (sitting needs real sitting art).
+- Using this card as a full template. Art and voice must be supplied and the source says so.

package/skills/video-studio/references/styles/retro-cgi.md

@@ -0,0 +1,52 @@
+# Retro CGI Render
+
+- id: `retro-cgi`
+- Source: huashu-art-motion `15_raytrace.md` (MIT)
+- Best for: nostalgia tech, intros for software, games, 3D-logo reveals, retro brand throwbacks (narrow use)
+- Not for: modern minimal UI, organic subjects, handmade looks
+- Triggers: 90s cgi, early ray tracing, chrome sphere, checkerboard floor, plastic render, wireframe, pov-ray, silicon graphics
+- Tone cell: kinetic-sharp
+- Clock: smooth 30/60 fps
+
+## Look
+Every object looks like glossy plastic from a 1993 render.
+- Walls teal `#7dbcb9 -> #64a6a6 -> #3f8285` with a radial light at the window; sky `#a24cc4 -> #df62ae -> #f5a08a -> #f8c070`; pink wireframe grid mountains (28 x 26 cells) with sawtooth snow caps.
+- Ground is a perspective checkerboard computed per pixel (vanishing point (960,480), `X=(x-960)/dy`, `Z=1/dy`, tile 0.27 x 0.00029, 2x2 supersampling, fog over the nearest 140 px by 35%).
+- Plastic shading helper `plastic(path, base, hx, hy, R)`: base fill, radial gradient from the highlight (white 0.55 -> 0.06 at 0.28 -> clear at 0.62 -> deep purple `rgba(10,0,30,0.42)` at the edge), `lighter` ambient bounce in the wall color, then a small hard-edged white ellipse specular (0.16R x 0.09R, alpha 0.85).
+- Limbs are cylinders: gradient across the normal (dark 0.25, bright 0.5 band at 22%, dark 0.45) plus a thin white highlight line. Joints are visible balls (toy-figure feel).
+- Floor reflections: mirror the object layer, alpha 0.34, drawn each object on its own layer first so many small pieces do not stack to opaque.
+
+## Motion
+- Ring of 140 spheres spinning about a vertical axis at 7 rad/s, tilted 0.35, depth-sorted (a dark base layer first so spheres merge into a tube).
+- Chrome ball: per-pixel environment map (down: checkerboard, up: pink-purple sky plus a window strip); the checker u coordinate shifts `t*4.5`; Fresnel rim brightens; diameter 104 px, under 2 ms.
+- Lens flare (`lighter`): core 170 px pulsing +/-8% at 23 rad/s, 12 spikes at 1.6 rad/s, 960 px horizontal bar, five circle and hexagon ghosts along the sun-to-center line sliding `sin(5t)*0.03`.
+- Glowing eyes or lights pulse +/-25% at 18 rad/s; a diagonal glass reflection slides 260 px/s.
+- Transition family: green wireframe of the new image (edges cached on first frame) then scanline-fills into the rendered picture.
+
+## Signature features (judged against these)
+- Uniform plastic shading with the same highlight logic on every object.
+- Perspective checker floor with fog and mirrored reflections.
+- Spinning ring/ball with visible per-sphere highlights.
+- Pink wireframe terrain and a gradient sunset sky.
+- Chrome sphere reflecting the scene.
+- Lens flare with ghosts, rotating spikes.
+- Wireframe to render transition.
+
+## 10-second beat seed
+- 0-1.2s: wireframe resolves to rendered scene.
+- 1.2-6s: ring spins, chrome ball rolls, flare glints.
+- 6-7.5s (hero): camera-fixed flare sweep and title in chrome.
+- 8.8-10s: hold, ring continues to spin.
+
+## Sound
+FM synth pads and a gated snare, 100-115 BPM. Whoosh on flare, "bling" on specular glints.
+
+## Build it in HyperFrames
+Fake it in Canvas 2D or really render in Three.js with MeshPhong materials and a 4x4 checker texture.
+- The checkerboard and fog are cached (cold start about 53 ms); hot frame about 23 ms.
+- Snapshot the wireframe from the first frame of the incoming scene, so that frame must be complete (no blank first frame).
+- Smooth any polyline silhouettes before applying plastic shading or corners show.
+
+## Watch out
+- Current weak spot: legs look like straight columns and the face reads like a mask. Give organic parts rounded profiles and expression.
+- Narrow use: only works when the retro 3D joke is the point.