daemora 2026.1.2-beta.1 → 2026.1.2-beta.2

package/crew/video-editor/rules/cursor-and-clicks.md

@@ -0,0 +1,108 @@
+---
+name: cursor-and-clicks
+description: Animated cursor pointer, travel paths, and click feedback for product demo videos
+metadata:
+  tags: cursor, pointer, click, ui-demo, interaction
+---
+
+For product-demo videos that show a user "interacting" with a UI (clicking a button, toggling a setting, hovering a card), render an SVG cursor, animate its position with `interpolate`, and add press feedback when the click lands.
+
+## Cursor component
+
+Use an SVG path for the arrow — CSS border-triangle hacks look amateurish. The path below is a clean macOS-style pointer with a white fill and black outline.
+
+```tsx
+const Cursor = ({
+  x, y, pressed = 0, opacity = 1,
+}: { x: number; y: number; pressed?: number; opacity?: number }) => (
+  <div style={{
+    position: 'absolute', left: x, top: y,
+    width: 80, height: 104,
+    transform: `translate(-6px,-4px) scale(${1 - pressed * 0.14})`,
+    transformOrigin: '6px 4px',
+    filter: 'drop-shadow(0 16px 32px rgba(0,0,0,0.75))',
+    opacity, pointerEvents: 'none',
+  }}>
+    <svg width="80" height="104" viewBox="0 0 28 36" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M3 3 L3 28 L10 22 L14.5 32 L18.5 30.2 L14 20.2 L22.5 20.2 Z"
+        fill="#ffffff" stroke="#000000" strokeWidth="2.2"
+        strokeLinejoin="round" strokeLinecap="round"
+      />
+    </svg>
+  </div>
+);
+```
+
+The tip of the arrow is at `(3, 3)` in viewBox units. The `translate(-6px,-4px)` offset ensures `(x, y)` props refer to the **tip**, not the bounding box top-left — so you can target a button's center coordinates directly.
+
+`transformOrigin: '6px 4px'` keeps the press scale anchored at the tip, not the middle of the arrow.
+
+## Travel path
+
+Drive `x` and `y` with a single `travel` progress value from `0` → `1`, eased. Use a bezier that accelerates out of the start and decelerates into the target — matches how a real hand moves a mouse.
+
+```tsx
+const travel = interpolate(frame, [START_F, END_F], [0, 1], {
+  easing: Easing.bezier(0.5, 0, 0.25, 1),
+  extrapolateLeft: 'clamp',
+  extrapolateRight: 'clamp',
+});
+
+const x = interpolate(travel, [0, 1], [START_X, TARGET_X]);
+const y = interpolate(travel, [0, 1], [START_Y, TARGET_Y]);
+```
+
+For non-linear paths (L-shapes, arcs), split `travel` into two ranges, or add a sine offset:
+
+```tsx
+const arcY = Math.sin(travel * Math.PI) * -40;   // lifts the cursor mid-travel
+const y = interpolate(travel, [0, 1], [START_Y, TARGET_Y]) + arcY;
+```
+
+## Click feedback
+
+A click is three things happening in ~8 frames: cursor scales down, the clicked element scales down, and a ring pulses outward. Drive all of them from a single `press` value with a 3-stop `interpolate`:
+
+```tsx
+const press = interpolate(frame, [CLICK_F - 2, CLICK_F, CLICK_F + 6], [0, 1, 0], {
+  extrapolateLeft: 'clamp',
+  extrapolateRight: 'clamp',
+});
+```
+
+- **Cursor dip:** `scale(${1 - press * 0.14})` on the Cursor component (already wired above).
+- **Button dip:** `scale(${1 + press * 0.05})` on the button wrapper — note the `+`, the button grows slightly before snapping back. Inverted looks wrong.
+- **Ring pulse:** render a larger circle behind the click target, with opacity and border alpha tied to `press`:
+
+```tsx
+{press > 0.01 && (
+  <div style={{
+    position: 'absolute',
+    left: thumbX - 10, top: thumbY - 10,
+    width: SIZE + 20, height: SIZE + 20,
+    borderRadius: '50%',
+    border: `3px solid rgba(124,58,237,${press * 0.7})`,
+    opacity: press,
+  }} />
+)}
+```
+
+## Placement relative to zoom
+
+If you're also zooming into the click target (see [focus-zoom.md](./focus-zoom.md)), render the cursor **inside** the zoomed container. The cursor scales with the content and stays visually locked on the button during the zoom — no extra inverse-transform math.
+
+If you need the cursor to stay at a constant size (like macOS screen zoom), render it **outside** the zoom container and compute its screen-space position as `(target_x * s + tx, target_y * s + ty)` using the same `s/tx/ty` as the zoom transform.
+
+## Timing discipline
+
+A realistic click sequence is:
+
+1. Cursor fades in at its start position (8–10 frames).
+2. Cursor travels to the target (30–40 frames for a full-screen diagonal).
+3. Cursor hovers for 2–4 frames (feels intentional, not machine-gun).
+4. Press fires (8 frames: down → hold 2 → up).
+5. Effect of the click plays (e.g. theme flip, page change) over 15–25 frames.
+6. Cursor holds or fades out.
+
+Skipping the hover-pause in step 3 makes the click feel like a script, not a human.

package/crew/video-editor/rules/focus-zoom.md

@@ -0,0 +1,108 @@
+---
+name: focus-zoom
+description: Zoom into a specific UI element and back for product demo emphasis
+metadata:
+  tags: zoom, transform, product-demo, focus, emphasis
+---
+
+The "focus zoom" — zoom in on a button or region, hold while something happens, zoom back out — is the workhorse move of product demos. It draws attention to one element without cutting away from the scene.
+
+## The math
+
+Given:
+
+- **Target point** `(tx, ty)` in the zoom container's local coordinates (e.g. the center of a button)
+- **Zoom scale** `s` (typical: 1.6–2.0; bigger feels cartoonish)
+- **Viewport** `(W, H)` — the container you're zooming inside
+- **Transform origin** `top left` (do not use `center` — the math gets messier)
+
+You want `(tx, ty)` to land at `(W/2, H/2)` after the transform. With `translate(Tx, Ty) scale(s)` applied left-to-right, a point `(px, py)` becomes `(s*px + Tx, s*py + Ty)`. So:
+
+```
+Tx = W/2 - tx * s
+Ty = H/2 - ty * s
+```
+
+Constants at the top of the file:
+
+```tsx
+const VIEW_W = 1968;
+const VIEW_H = 1200;
+const TARGET_X = 1820;
+const TARGET_Y = 112;
+const ZOOM_SCALE = 1.85;
+```
+
+## The animation
+
+Drive zoom from `0` (no zoom) → `1` (peak zoom) with a 4-stop `interpolate` that covers in → hold → out:
+
+```tsx
+const zoom = interpolate(
+  frame,
+  [ZOOM_IN_START, ZOOM_IN_END, ZOOM_OUT_START, ZOOM_OUT_END],
+  [0, 1, 1, 0],
+  {
+    easing: Easing.inOut(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  },
+);
+
+const tx = interpolate(zoom, [0, 1], [0, VIEW_W / 2 - TARGET_X * ZOOM_SCALE]);
+const ty = interpolate(zoom, [0, 1], [0, VIEW_H / 2 - TARGET_Y * ZOOM_SCALE]);
+const scale = interpolate(zoom, [0, 1], [1, ZOOM_SCALE]);
+```
+
+Apply the transform to a wrapping div:
+
+```tsx
+<div style={{
+  position: 'absolute',
+  inset: 0,
+  transform: `translate(${tx}px, ${ty}px) scale(${scale})`,
+  transformOrigin: 'top left',
+}}>
+  {/* content being zoomed */}
+</div>
+```
+
+`Easing.inOut(Easing.cubic)` gives a natural accelerate-then-decelerate. Avoid linear zoom — it feels robotic.
+
+## What to zoom
+
+**Don't zoom the whole stage.** If your scene has 3D perspective, parallax, or a surrounding frame (laptop body, phone case, browser chrome), wrapping the entire composition in a zoom transform distorts those effects.
+
+**Do zoom the inner content only.** Wrap just the screen's interior content (dashboard, UI, etc.) in the zoom div. The outer chrome stays rock-steady, so the zoom reads as "camera getting closer to the screen" rather than "whole scene inflating."
+
+## Sequencing with a click
+
+Typical focus-zoom around a click lasts ~2 seconds and has five phases:
+
+| Phase | Frames | What happens |
+|---|---|---|
+| Travel | 30–40 | Cursor moves toward target while zoom is still 0 |
+| Zoom in | 18–20 | Cursor arrives; zoom goes 0 → 1 |
+| Hold | 6–10 | Click fires, ring pulses, effect starts |
+| Hold + effect | 15–20 | Whatever the click does plays out at peak zoom |
+| Zoom out | 18–20 | Zoom goes 1 → 0 while the post-click state settles |
+
+Overlap zoom-in with the tail of the cursor travel so both finish together — otherwise the cursor visibly "arrives and then waits" for the zoom.
+
+## Overflow and clipping
+
+When the content is zoomed and translated, parts of it fall outside the viewport. Make sure the zoom's parent has `overflow: hidden` — otherwise clipped content spills over other scene elements.
+
+```tsx
+<div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
+  <div style={{ transform: `translate(${tx}px, ${ty}px) scale(${scale})`, transformOrigin: 'top left' }}>
+    {/* ... */}
+  </div>
+</div>
+```
+
+## Picking `ZOOM_SCALE`
+
+- `1.3–1.5` — gentle emphasis, good for highlighting a region of a dashboard
+- `1.6–2.0` — clear focus on a single button or control (the sweet spot)
+- `2.5+` — dramatic, starts to feel like a jump-cut; content pixelation becomes visible on low-res renders

package/crew/video-editor/rules/theme-switching.md

@@ -0,0 +1,103 @@
+---
+name: theme-switching
+description: Dark/light theme toggle animations with in-place cross-fade
+metadata:
+  tags: theme, dark-mode, light-mode, toggle, cross-fade, ui-demo
+---
+
+A theme toggle animation should look like a real app flipping its palette: same content, same positions, only colors change. The common mistake is to render two entirely different layouts and cross-fade between them — the content appears to morph, which never happens in a real app.
+
+## The rule
+
+**One component, parameterized by theme. Render it twice.** Do not write separate `<DarkDashboard />` and `<LightDashboard />`.
+
+## Palette helper
+
+Collect every theme-dependent color into a single object keyed by theme:
+
+```tsx
+type Theme = 'dark' | 'light';
+
+const getPalette = (theme: Theme) => {
+  const dark = theme === 'dark';
+  return {
+    bg:          dark ? '#05070f' : 'linear-gradient(180deg,#f6f7fb,#eef1f8)',
+    text:        dark ? '#ffffff' : '#0a0e1f',
+    textMid:     dark ? 'rgba(255,255,255,0.62)' : 'rgba(10,14,31,0.58)',
+    cardBg:      dark ? 'rgba(255,255,255,0.04)' : '#ffffff',
+    cardBorder:  dark ? '1px solid rgba(255,255,255,0.1)' : '1px solid rgba(10,14,31,0.06)',
+    cardShadow:  dark ? 'inset 0 1px 0 rgba(255,255,255,0.04)' : '0 20px 50px rgba(10,14,31,0.08)',
+    innerBg:     dark ? 'rgba(255,255,255,0.05)' : '#f5f7fc',
+    innerBorder: dark ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(10,14,31,0.05)',
+  };
+};
+```
+
+Put every color that differs between themes here. Anything you forget will flash wrong during the transition.
+
+## Parameterized component
+
+```tsx
+const Dashboard = ({ theme, frame, progress }: { theme: Theme; frame: number; progress: number }) => {
+  const p = getPalette(theme);
+  return (
+    <div style={{ background: p.bg, color: p.text /* ... */ }}>
+      <h1 style={{ color: p.text }}>Analytics</h1>
+      <div style={{ background: p.cardBg, border: p.cardBorder, boxShadow: p.cardShadow }}>
+        {/* ... */}
+      </div>
+    </div>
+  );
+};
+```
+
+Data values (`$128.4k`, `42%`) can also vary by theme if you want the numbers to update along with the palette — the dashboard feels "alive" instead of a static snapshot being recolored. Keep the *layout* identical regardless.
+
+## Cross-fade
+
+Render the component twice, with opposing opacities:
+
+```tsx
+const themeFlip = interpolate(frame, [FLIP_START, FLIP_END], [0, 1], {
+  easing: Easing.inOut(Easing.cubic),
+  extrapolateLeft: 'clamp',
+  extrapolateRight: 'clamp',
+});
+
+return (
+  <>
+    <div style={{ position: 'absolute', inset: 0, opacity: 1 - themeFlip }}>
+      <Dashboard theme="dark" frame={frame} progress={dashProgress} />
+    </div>
+    <div style={{ position: 'absolute', inset: 0, opacity: themeFlip }}>
+      <Dashboard theme="light" frame={frame} progress={dashProgress} />
+    </div>
+  </>
+);
+```
+
+`Easing.inOut(Easing.cubic)` gives a natural flip. Duration of 15–25 frames feels right — faster looks glitchy, slower looks like a slow dissolve. Do **not** slide, wipe, or circular-reveal between themes; those transitions draw attention away from the content.
+
+## Accent colors that work on both backgrounds
+
+Bar charts, progress tracks, and highlights often use gradients. If you use white in a gradient (`linear-gradient(180deg,#00d4ff,#ffffff)`), it disappears on a white background during the light theme. Pick accents that read on both:
+
+- **Purple** `#7c3aed`
+- **Cyan** `#00d4ff`
+- **Pink** `#ec4899`
+
+All three have enough saturation to stand out on both dark navy and off-white backgrounds. Avoid pure white and near-black as accent endpoints.
+
+## Toggle button placement
+
+If you're also animating a toggle UI (pill + thumb), render the toggle **outside** both cross-faded layers, so it doesn't fade with the theme — it stays put while the background flips underneath it. The toggle's own appearance (track color, thumb position) is driven by the same `themeFlip` value:
+
+```tsx
+<ToggleButton flip={themeFlip} /* ... */ />
+```
+
+Inside `ToggleButton`, stack two track backgrounds with opposing opacities, and interpolate the thumb's `left` position from `0` → `1`.
+
+## Verification
+
+After building, render a still at the midpoint of the flip (`frame = (FLIP_START + FLIP_END) / 2`). Both dashboards should be visible at 50% opacity and every piece of text, every card, every chart should be in the **exact same position**. If anything shifts, your layouts diverged — fix the component, don't tweak the cross-fade.

package/crew/video-editor/rules/ui-chrome.md

@@ -0,0 +1,139 @@
+---
+name: ui-chrome
+description: Rendering realistic device frames (macbook, phone, browser) with 3D perspective and inner screens
+metadata:
+  tags: device-frame, macbook, phone, browser, perspective, 3d, mockup
+---
+
+Product-demo videos often need a device "mockup" — a macbook, phone, or browser window showing an app. You can do this with pure CSS using layered divs, perspective transforms, and a clipped inner screen. No assets, no 3D libraries.
+
+## Structure
+
+Every device frame has the same four-layer structure:
+
+1. **Outer wrapper** — sets position, applies perspective, handles motion blur/float
+2. **Body** — the physical shell (rounded rectangle with gradient fill + drop shadow)
+3. **Bezel** — inset rectangle, slightly darker, gives the "screen edge" look
+4. **Screen** — innermost div with `overflow: hidden`, where the actual UI content lives
+
+```tsx
+<div style={{
+  position: 'absolute',
+  left: '50%', top: '50%',
+  transform: 'translate(-50%,-50%)',
+}}>
+  {/* Wrapper: perspective + motion */}
+  <div style={{
+    position: 'relative',
+    width: 2320, height: 1380,
+    transform: `perspective(2600px) rotateX(20deg) rotateZ(-25deg) translateY(${bodyY}px) scale(${bodyScale})`,
+    filter: `blur(${motionBlur}px)`,
+  }}>
+    {/* Body */}
+    <div style={{
+      position: 'absolute', left: 50, top: 100,
+      width: 2220, height: 1160, borderRadius: 56,
+      background: 'linear-gradient(180deg,#15161b,#090b10)',
+      boxShadow: '0 80px 220px rgba(0,0,0,0.78), 0 0 130px rgba(124,58,237,0.24), inset 0 1px 0 rgba(255,255,255,0.12)',
+    }} />
+    {/* Bezel */}
+    <div style={{
+      position: 'absolute', left: 120, top: 0,
+      width: 2080, height: 1280, borderRadius: 40,
+      background: 'linear-gradient(180deg,#21242b,#0b0d11)',
+      boxShadow: '0 24px 80px rgba(0,0,0,0.5)',
+    }}>
+      {/* Screen */}
+      <div style={{
+        position: 'absolute', left: 56, top: 30,
+        width: 1968, height: 1200,
+        borderRadius: 30, overflow: 'hidden',
+        background: '#05070f',
+        boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.06)',
+      }}>
+        {/* app UI goes here */}
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+## Perspective transform
+
+`perspective(2600px) rotateX(20deg) rotateZ(-25deg)` gives the "hero angle" — a 3/4 view that shows depth without hiding the screen content. The perspective value controls foreshortening: lower numbers (`1200–1800px`) are more dramatic, higher (`3000–4000px`) are more subtle. Keep `rotateX` between `15°` and `25°` to avoid hiding too much of the screen.
+
+The tilt also means device content needs to be **higher contrast** than flat content to remain readable — subtle text will disappear into the viewing angle.
+
+## Motion blur on entry
+
+When the device animates into the scene (sliding up, scaling in), add a blur filter that fades to zero as the motion settles. This sells the "camera catching up" feeling:
+
+```tsx
+const open = interpolate(frame, [10, 50], [0, 1], { easing: Easing.bezier(0.16, 1, 0.3, 1) });
+const bodyY = interpolate(open, [0, 1], [150, 0]);
+const bodyScale = interpolate(open, [0, 1], [0.84, 1]);
+const motionBlur = interpolate(open, [0, 0.25], [30, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+```
+
+Blur should be gone by the first quarter of the open animation (`open = 0.25`), not linear across the whole thing — otherwise the device looks hazy even when it's stopped moving.
+
+## Idle float
+
+Once the device is on screen, a subtle sine bob keeps it feeling alive:
+
+```tsx
+const float = Math.sin((frame / DURATION) * Math.PI * 2);
+const bodyY = interpolate(open, [0, 1], [150, 0]) + float * 8;
+```
+
+`8px` amplitude is the sweet spot — any more feels like it's hovering in a breeze, any less is invisible.
+
+## Screen reflections and gradients
+
+The inner screen should have subtle radial gradients layered over the app content to sell glass:
+
+```tsx
+<div style={{
+  position: 'absolute', inset: 0,
+  background: 'radial-gradient(circle at 68% 24%, rgba(124,58,237,0.38), transparent 18%), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), transparent 42%)',
+  pointerEvents: 'none',
+}} />
+```
+
+A bottom darkening gradient adds depth and visually separates the screen from the bezel:
+
+```tsx
+<div style={{
+  position: 'absolute',
+  left: 0, right: 0, bottom: 0, height: 160,
+  background: 'linear-gradient(180deg, transparent, rgba(0,0,0,0.24))',
+  pointerEvents: 'none',
+}} />
+```
+
+## Device proportions
+
+| Device | Body W×H | Screen W×H | Radius |
+|---|---|---|---|
+| MacBook Pro 16" | `2320×1380` | `1968×1200` | body `56`, screen `30` |
+| iPad Pro 13" | `1680×1200` | `1520×1080` | body `48`, screen `24` |
+| iPhone 15 Pro | `540×1080` | `480×1020` | body `74`, screen `56` |
+| Browser window | `2320×1380` | `2280×1300` (under chrome) | `24` |
+
+## Phones in a corner
+
+For a secondary phone frame (showing a "mobile view" next to the main device), skip the 3D perspective and just drop a flat rounded-rectangle at a corner:
+
+```tsx
+<div style={{ position: 'absolute', right: 190, bottom: 140 }}>
+  <div style={{
+    width: 540, height: 1080, borderRadius: 74,
+    background: 'linear-gradient(180deg,#17181d,#090a0f)',
+    boxShadow: '0 40px 140px rgba(0,0,0,0.8), 0 0 80px rgba(124,58,237,0.18)',
+  }}>
+    {/* inner screen */}
+  </div>
+</div>
+```
+
+Mixing a perspective-tilted macbook with a flat phone reads fine and is less visually busy than two tilted frames.