luckiest-co 1.0.41 → 1.0.43

package/skills/video-studio/references/styles/ink-wash.md

@@ -0,0 +1,49 @@
+# Ink Wash (sumi-e)
+
+- id: `ink-wash`
+- Source: huashu-art-motion `17_ink.md` (MIT)
+- Best for: tea, wellness, craft, East Asian brands, poetic intros, minimal luxury, philosophy content
+- Not for: loud kinetic ads, high-saturation product shots, busy UI
+- Triggers: ink wash, sumi-e, chinese painting, calligraphy, brush, shuimo, qi baishi, bada shanren, zen, rice paper
+- Tone cell: calm-sharp
+- Clock: smooth 30/60 fps
+
+## Look
+Paper is the base and ink is only added. Rice paper `#efe6d0` with noise grain and about 2,600 short fibers, a vignette up to alpha 0.22 at the edges. Ink is one near-black `[16,14,12]` used in five tones: scorched 0.9, thick 0.8, heavy 0.6, light 0.35, clear 0.15. Accent pigments used sparingly: ochre `#c47a3c`, blue-gray `#6f8aa0`, yellow `#e2aa34`, a single red for the seal `#c4281e` and tiny vermilion touches (`#d8553f`). Lots of empty space. Whites are carved out of washes with `destination-out`, not painted white.
+
+## Motion
+- Opening: the picture writes itself stroke by stroke over about 0.45 s (`reveal = smoothstep(d, d+l, lt/0.45)`), offset so frame 0 already has ink.
+- Ink bleed: halo blur grows over time, so wash edges keep spreading.
+- Branches sway `sin(2.9t)*0.11`, leaves flip `sin(7t+g)*0.2`, mist bands (paper-colored blurred ellipses) slide 150-270 px/s.
+- A bird crosses at 420 px/s, wings 8 beats per second.
+- Seal stamps down from 1.5x to 1x with multiply.
+- Transition family: strokes write in, ink blooms across the paper.
+
+## Signature features (judged against these)
+- Brush strokes with pressure taper and dry-brush gaps (flying white).
+- Washes with soft spreading edges.
+- Five ink tones, not flat black.
+- Large negative space.
+- A red seal in the corner.
+- Whites by carving, not by paint.
+- Only 2-3 spots of color.
+
+## 10-second beat seed
+- 0-1.2s: strokes write in.
+- 1.2-6s: wash blooms spread, branch sways, mist slides.
+- 6-7s (hero): single bold stroke or bird crossing, seal lands.
+- 8.8-10s: hold with mist moving slowly.
+
+## Sound
+Guzheng or sparse bamboo flute, 60-72 BPM, occasional low drum. One plucked note per stroke.
+
+## Build it in HyperFrames
+Canvas 2D, cache the static strokes after they finish writing.
+- Resample brush paths to 4 px arc length (so dry-brush noise frequency is constant). Pressure profile `smoothstep(0,head,q)*(1-0.7*smoothstep(1-tail,1,q))`.
+- Each bristle is one continuous polyline with butt caps, broken where `noise(k*1.9, i*0.09)` is below `dry*q^1.2*0.95+0.05`. Segment-by-segment strokes leave knots.
+- Washes: draw shape on scratch canvas, multiply twice (outer halo blur, inner body blur), grow 0 to 1 over lt.
+
+## Watch out
+- Current weak spot: figures are not loose enough (review 6/10). Use few strokes and let the wash do the form.
+- Multiply washes are transparent, so lines show through the shapes. Underpaint paper color inside each silhouette first.
+- A pure white first frame fails as a cover. Start with some ink already down.

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

@@ -0,0 +1,40 @@
+# Isometric Miniature World
+
+- id: `isometric`
+- Source: mg-styles-15 `prompts/03-isometric.md` (MIT, Vincentwei1021)
+- Best for: tech architecture animation, app feature demos, data campus, smart-city or cloud infrastructure explainers
+- Not for: character drama, organic subjects, anything needing perspective depth
+- Triggers: isometric, 2.5D, iso, miniature city, low poly diorama, architecture diagram animation, tech campus, Dribbble hero, School of Motion
+- Tone cell: kinetic-soft
+- Clock: smooth 30 fps
+
+## Look
+True isometric projection: orthographic, 35.264 degree elevation, 45 degree azimuth, no vanishing point, lines everywhere to scale. Pastel studio palette: lavender ground, mint, peach, sky blue, white. Soft shadows and ambient occlusion so it reads as a premium hero render. Title text lies ON the iso plane, skewed into iso space. Floating island in a pastel void for the end.
+
+## Motion
+Ground tiles flip or drop in as a wave from the centre, tiny bounce each. Buildings grow: base lands, walls scaleY from 0 with overshoot, roof cap 2-3 frames later. Trees pop, windows light in sequence. Life layer: cars loop roads, a train, drones carrying packets, glowing data streams pulse between buildings, a wind turbine spins. Camera is a parallel slide only, no rotation, with 1 : 0.8 : 0.6 parallax between foreground, middle, back layers. Pull-back to reveal the whole island.
+
+## Signature features (judged against these)
+- Orthographic 30 degree iso angle, no perspective convergence.
+- Miniature scene with many small readable objects.
+- Building growth: base first, walls scaleY with overshoot, roof 2-3 frames late.
+- Tiles arrive as a radial wave from the centre.
+- Camera moves by parallel translation only, parallax 1 : 0.8 : 0.6.
+- Pastel palette, soft shadow and AO.
+- Moving objects stay on the iso grid at 2:1 pixel slope.
+- Title set in iso space.
+
+## 10-second beat seed
+- 0-2s: tile wave from centre; hook is the first ripple at frame 0.
+- 2-5s: buildings grow, trees pop, windows light.
+- 5-8s (hero at 60-75%): cars, train, drones, data streams, turbine; parallel camera slide.
+- 8-10s: pull back to the floating island, title on the plane, hold with idling motion.
+
+## Sound
+Bright plucky tech melody (FM marimba or pluck). Soft click or pop on each tile and building landing. Airy whoosh on the pull-back.
+
+## Build it in HyperFrames
+Three.js with OrthographicCamera at the true iso angle, soft shadows and a cheap AO (baked or SSAO), stepped per frame from t. Alternative: SVG faces built with the SSR matrix (scale Y 86.6%, skew 30 degrees, rotate 30 degrees) for top, left and right faces, z-ordered by screen y. Text as a CSS-transformed element or a plane in the scene.
+
+## Watch out
+Any perspective camera breaks the style. Z-sorting errors in the SVG route. Do not rotate the camera. Keep object count high enough to feel dense but each one readable.

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,47 @@
+# 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.
+
+
+## Logo construction
+Rule from logo-design (MIT, kaankiziltug): the entrance is built from the mark's own construction, and the resolve frame equals the master logo. Before animating, write the mark's construction in one line in `plan.md` (its primitives, strokes or modules, and the order they would be drawn). The resolve frame is the real logo file (`brand/logo.svg` or the SVG the user supplied), never a styled stand-in or an invented wordmark: render the last frame and the logo SVG at the same size and position, and any visible difference is a Block. Sting length 1 to 3 seconds, easing from this card.
+- Construction: the pen draws the logo's strokes in its construction order, at the logo's own stroke width when it is a line mark. For a filled mark, draw its outline, then the line-to-fill sweep fills it from the anchor.
+- Resolve: after the fill, the frame is the logo SVG exactly: the glow on the tip and the dimmed older lines are gone by the hold.
+
+## 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,46 @@
+# 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.
+
+
+## Logo construction
+Rule from logo-design (MIT, kaankiziltug): the entrance is built from the mark's own construction, and the resolve frame equals the master logo. Before animating, write the mark's construction in one line in `plan.md` (its primitives, strokes or modules, and the order they would be drawn). The resolve frame is the real logo file (`brand/logo.svg` or the SVG the user supplied), never a styled stand-in or an invented wordmark: render the last frame and the logo SVG at the same size and position, and any visible difference is a Block. Sting length 1 to 3 seconds, easing from this card.
+- Construction: the liquid gathers into the mark's primitives one by one (largest first), with the necks snapping at the joins the mark actually has.
+- Resolve: the metaball field converges onto the logo's SDF in the last 0.3s, the specular and rim lighting fade out, and the hold frame is the flat logo SVG in brand colors. Liquid-styled lettering is never the resolve.
+
+## 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,45 @@
+# 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.
+
+
+## Logo construction
+Rule from logo-design (MIT, kaankiziltug): the entrance is built from the mark's own construction, and the resolve frame equals the master logo. Before animating, write the mark's construction in one line in `plan.md` (its primitives, strokes or modules, and the order they would be drawn). The resolve frame is the real logo file (`brand/logo.svg` or the SVG the user supplied), never a styled stand-in or an invented wordmark: render the last frame and the logo SVG at the same size and position, and any visible difference is a Block. Sting length 1 to 3 seconds, easing from this card.
+- Construction: the chain's last morph lands on the logo's own primitives, in the order the mark is built (outer shape first, then cuts and counters). The bridge circle or capsule before the logo is the mark's largest primitive when it has one.
+- Resolve: the final morph target is the logo's path itself, resampled from the SVG, not a hand-traced copy. Swap to the untouched SVG on the hold frame; the swap must be invisible.
+
+## 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.