@kolbo/kolbo-code-linux-arm64-musl 0.0.0-dev-202604161628

package/skills/remotion-best-practices/rules/motion-design.md

@@ -0,0 +1,215 @@
+---
+title: Motion Design & Video Production
+impact: HIGH
+impactDescription: transforms generic animations into professional motion graphics with cinematic camera work, beat-driven timing, and production-quality transitions
+tags: motion-design, announcement-video, cinematic, camera, beat, whip-pan, word-reveal, production
+---
+
+## Beat-Driven Absolute Timeline
+
+**Never** nest `<Sequence>` components for multi-scene videos. Define a single `T` object with absolute frame positions — the whole timeline becomes readable and easy to adjust.
+
+**Incorrect (fragile nested sequences):**
+
+```tsx
+<Sequence from={0} durationInFrames={60}>
+  <SceneA />
+</Sequence>
+<Sequence from={60} durationInFrames={90}>
+  <SceneB />
+</Sequence>
+```
+
+**Correct (absolute beat timeline):**
+
+```tsx
+const T = {
+  intro:       0,
+  codeScene:   58,
+  terminal:    98,
+  terminalEnd: 248,
+  shipScene:   252,
+  cta:         450,
+  TOTAL:       560,
+} as const;
+
+// Components self-hide outside their window:
+if (frame < at || frame >= exit) return null;
+```
+
+---
+
+## Camera Rig — Handheld + 3D Tilt + Z Dolly
+
+Every production video needs a camera layer. Wire it once, all content gets it.
+
+```tsx
+// Slow Z dolly into each section
+const camZ = frame < T.terminal
+  ? interpolate(frame, [0, T.terminal], [-120, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.quad) })
+  : 0;
+
+// Organic breathing tilt (barely perceptible — felt not seen)
+const camTiltY = Math.sin(frame / 180) * 1.2;
+const camTiltX = Math.cos(frame / 240) * 0.8;
+
+// Ultra-slow handheld drift
+const driftX = Math.sin(frame * 0.028) * 3.0 + Math.sin(frame * 0.061) * 1.5;
+const driftY = Math.cos(frame * 0.035) * 2.5 + Math.cos(frame * 0.073) * 1.2;
+
+// Beat-synced camera kick
+const impactAmt = ALL_BEATS.reduce((acc, bf) => {
+  const d = frame - bf;
+  if (d >= 0 && d < 22) {
+    const peak = BIG_BEATS.has(bf) ? 22 : 13;
+    return acc + interpolate(d, [0, 22], [peak, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.cubic) });
+  }
+  return acc;
+}, 0);
+
+const shakeX = driftX + Math.sin(frame * 0.71) * impactAmt * 0.65;
+const shakeY = driftY + Math.cos(frame * 0.83) * impactAmt * 0.35;
+const shakeRot = Math.sin(frame * 0.022) * 0.25 + Math.sin(frame * 0.57) * impactAmt * 0.025;
+```
+
+JSX structure — outer shake, inner 3D perspective:
+
+```tsx
+<div style={{
+  position: 'absolute', inset: 0,
+  transform: `translateX(${shakeX + whipX}px) translateY(${shakeY}px) rotate(${shakeRot}deg)`,
+  filter: whipBlur > 0 ? `blur(${whipBlur}px)` : undefined,
+}}>
+  <div style={{ position: 'absolute', inset: 0, perspective: '1400px', perspectiveOrigin: '50% 50%' }}>
+    <div style={{
+      position: 'absolute', inset: 0,
+      transform: `rotateX(${camTiltX}deg) rotateY(${camTiltY}deg) translateZ(${camZ}px)`,
+      transformStyle: 'preserve-3d',
+    }}>
+      {/* All scene content here */}
+    </div>
+  </div>
+</div>
+```
+
+---
+
+## Whip Pan Between Sections
+
+Fast lateral translateX + motion blur. Apply to the whole content wrapper at section cut frames.
+
+```tsx
+const WHIP_FRAMES = [T.terminal, T.shipScene, T.cta]; // all major cuts
+const WHIP_HALF = 4; // frames each side = 8 total = 0.27s
+
+const { whipX, whipBlur } = WHIP_FRAMES.reduce(
+  (acc, tf) => {
+    const d = frame - tf;
+    if (d >= -WHIP_HALF && d < WHIP_HALF) {
+      const x = d < 0
+        ? interpolate(d, [-WHIP_HALF, 0], [0, -420], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.in(Easing.cubic) })
+        : interpolate(d, [0, WHIP_HALF], [420, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.cubic) });
+      const blur = interpolate(Math.abs(d), [0, WHIP_HALF], [22, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+      return { whipX: acc.whipX + x, whipBlur: Math.max(acc.whipBlur, blur) };
+    }
+    return acc;
+  },
+  { whipX: 0, whipBlur: 0 },
+);
+```
+
+No overlay effects needed. The displacement + blur IS the transition.
+
+---
+
+## Masked Word Reveal — Soft Gradient Window
+
+**Never use `overflow: hidden`** for word reveals — causes hard cuts at container edges.
+Use CSS `mask-image` gradient instead. Words slide through a soft dissolve zone.
+
+```tsx
+const maskGrad = [
+  'transparent calc(50% - 185px)',
+  'black calc(50% - 105px)',
+  'black calc(50% + 105px)',
+  'transparent calc(50% + 185px)',
+].join(', ');
+
+<div style={{
+  position: 'absolute', inset: 0,
+  display: 'flex', alignItems: 'center', justifyContent: 'center',
+  maskImage: `linear-gradient(to bottom, ${maskGrad})`,
+  WebkitMaskImage: `linear-gradient(to bottom, ${maskGrad})`,
+}}>
+  {words.map((word, i) => {
+    const wordAt = at + i * stagger; // stagger: 6-10 frames per word
+    const enterY = interpolate(frame, [wordAt, wordAt + enterDur], [215, 0], {
+      extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.cubic),
+    });
+    const exitY = interpolate(frame, [exit - exitDur, exit], [0, -215], {
+      extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.in(Easing.cubic),
+    });
+    return (
+      <span key={i} style={{ transform: `translateY(${enterY + exitY}%)`, display: 'inline-block', lineHeight: 1 }}>
+        {word}
+      </span>
+    );
+  })}
+</div>
+```
+
+**Font size guide:**
+- Brand / hero reveal: `fontSize: 192, fontWeight: 900, letterSpacing: '-8px'`
+- Section headlines: `fontSize: 128, fontWeight: 800, letterSpacing: '-4px'`
+- Never drop below 128px for main titles — inconsistency reads as a bug
+
+---
+
+## Impact Flash System
+
+Beat-synced white flash — screen-space overlay, outside the camera rig.
+
+```tsx
+const ALL_BEATS = [T.intro, T.codeScene, T.shipScene, T.cta];
+const BIG_BEATS = new Set([T.intro, T.cta]);
+
+const flashOpacity = ALL_BEATS.reduce((acc, bf) => {
+  const d = frame - bf;
+  if (d >= 0 && d < 8) {
+    const peak = BIG_BEATS.has(bf) ? 0.14 : 0.07;
+    return Math.max(acc, interpolate(d, [0, 8], [peak, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }));
+  }
+  return acc;
+}, 0);
+
+{flashOpacity > 0.005 && (
+  <div style={{ position: 'absolute', inset: 0, background: 'white', opacity: flashOpacity, pointerEvents: 'none' }} />
+)}
+```
+
+Only add flash beats for major section cuts — not for UI elements fading in within a scene.
+
+---
+
+## Narrative Order — Promise Before Proof
+
+Text headlines BEFORE recordings/demos, not after.
+
+- ✅ `"Code anything."` → terminal recording → `"Ship anything."` → desktop recording  
+- ❌ terminal recording → `"Code anything."` (that's a caption, not a headline)
+
+## Cold Open — No Warmup
+
+Frame 0 = the brand name or strongest visual. No intro slides, no warmup.  
+If you have a brand name, open on it at 192px. Let the first word be the hook.
+
+## Avoid Copy Redundancy
+
+Adjacent phrases must not repeat words or contradict each other.
+- ❌ `"Beyond code."` immediately followed by a `"Code."` beat
+- ❌ `"Code anything."` then `"Create anything."` (same structure, same word)
+- ✅ `"Code anything."` → `"Ship anything."` (different verb, completes a story arc)
+
+## One Logo Rule
+
+Never show the product logo twice. If it appears in a mid-video reveal (e.g. orbit converge scene), remove it from the CTA. Use text only at the end.

package/skills/remotion-best-practices/rules/parameters.md

@@ -0,0 +1,109 @@
+---
+name: parameters
+description: Make a video parametrizable by adding a Zod schema
+metadata:
+  tags: parameters, zod, schema
+---
+
+To make a video parametrizable, a Zod schema can be added to a composition.
+
+First, `zod` must be installed .
+
+Search the project for lockfiles and run the correct command depending on the package manager:
+
+If `package-lock.json` is found, use the following command:
+
+```bash
+npm i zod
+```
+
+If `bun.lockb` is found, use the following command:
+
+```bash
+bun i zod
+```
+
+If `yarn.lock` is found, use the following command:
+
+```bash
+yarn add zod
+```
+
+If `pnpm-lock.yaml` is found, use the following command:
+
+```bash
+pnpm i zod
+```
+
+Then, a Zod schema can be defined alongside the component:
+
+```tsx title="src/MyComposition.tsx"
+import { z } from "zod";
+
+export const MyCompositionSchema = z.object({
+  title: z.string(),
+});
+
+const MyComponent: React.FC<z.infer<typeof MyCompositionSchema>> = () => {
+  return (
+    <div>
+      <h1>{props.title}</h1>
+    </div>
+  );
+};
+```
+
+In the root file, the schema can be passed to the composition:
+
+```tsx title="src/Root.tsx"
+import { Composition } from "remotion";
+import { MycComponent, MyCompositionSchema } from "./MyComposition";
+
+export const RemotionRoot = () => {
+  return (
+    <Composition
+      id="MyComposition"
+      component={MyComponent}
+      durationInFrames={100}
+      fps={30}
+      width={1080}
+      height={1080}
+      defaultProps={{ title: "Hello World" }}
+      schema={MyCompositionSchema}
+    />
+  );
+};
+```
+
+Now, the user can edit the parameter visually in the sidebar.
+
+All schemas that are supported by Zod are supported by Remotion.
+
+Remotion requires that the top-level type is a z.object(), because the collection of props of a React component is always an object.
+
+## Color picker
+
+For adding a color picker, use `zColor()` from `@remotion/zod-types`.
+
+If it is not installed, use the following command:
+
+```bash
+npx remotion add @remotion/zod-types # If project uses npm
+bunx remotion add @remotion/zod-types # If project uses bun
+yarn remotion add @remotion/zod-types # If project uses yarn
+pnpm exec remotion add @remotion/zod-types # If project uses pnpm
+```
+
+Then import `zColor` from `@remotion/zod-types`:
+
+```tsx
+import { zColor } from "@remotion/zod-types";
+```
+
+Then use it in the schema:
+
+```tsx
+export const MyCompositionSchema = z.object({
+  color: zColor(),
+});
+```

package/skills/remotion-best-practices/rules/sequencing.md

@@ -0,0 +1,118 @@
+---
+name: sequencing
+description: Sequencing patterns for Remotion - delay, trim, limit duration of items
+metadata:
+  tags: sequence, series, timing, delay, trim
+---
+
+Use `<Sequence>` to delay when an element appears in the timeline.
+
+```tsx
+import { Sequence } from "remotion";
+
+const {fps} = useVideoConfig();
+
+<Sequence from={1 * fps} durationInFrames={2 * fps} premountFor={1 * fps}>
+  <Title />
+</Sequence>
+<Sequence from={2 * fps} durationInFrames={2 * fps} premountFor={1 * fps}>
+  <Subtitle />
+</Sequence>
+```
+
+This will by default wrap the component in an absolute fill element.  
+If the items should not be wrapped, use the `layout` prop:
+
+```tsx
+<Sequence layout="none">
+  <Title />
+</Sequence>
+```
+
+## Premounting
+
+This loads the component in the timeline before it is actually played.  
+Always premount any `<Sequence>`!
+
+```tsx
+<Sequence premountFor={1 * fps}>
+  <Title />
+</Sequence>
+```
+
+## Series
+
+Use `<Series>` when elements should play one after another without overlap.
+
+```tsx
+import { Series } from "remotion";
+
+<Series>
+  <Series.Sequence durationInFrames={45}>
+    <Intro />
+  </Series.Sequence>
+  <Series.Sequence durationInFrames={60}>
+    <MainContent />
+  </Series.Sequence>
+  <Series.Sequence durationInFrames={30}>
+    <Outro />
+  </Series.Sequence>
+</Series>;
+```
+
+Same as with `<Sequence>`, the items will be wrapped in an absolute fill element by default when using `<Series.Sequence>`, unless the `layout` prop is set to `none`.
+
+### Series with overlaps
+
+Use negative offset for overlapping sequences:
+
+```tsx
+<Series>
+  <Series.Sequence durationInFrames={60}>
+    <SceneA />
+  </Series.Sequence>
+  <Series.Sequence offset={-15} durationInFrames={60}>
+    {/* Starts 15 frames before SceneA ends */}
+    <SceneB />
+  </Series.Sequence>
+</Series>
+```
+
+## Frame References Inside Sequences
+
+Inside a Sequence, `useCurrentFrame()` returns the local frame (starting from 0):
+
+```tsx
+<Sequence from={60} durationInFrames={30}>
+  <MyComponent />
+  {/* Inside MyComponent, useCurrentFrame() returns 0-29, not 60-89 */}
+</Sequence>
+```
+
+## Nested Sequences
+
+Sequences can be nested for complex timing:
+
+```tsx
+<Sequence from={0} durationInFrames={120}>
+  <Background />
+  <Sequence from={15} durationInFrames={90} layout="none">
+    <Title />
+  </Sequence>
+  <Sequence from={45} durationInFrames={60} layout="none">
+    <Subtitle />
+  </Sequence>
+</Sequence>
+```
+
+## Nesting compositions within another
+
+To add a composition within another composition, you can use the `<Sequence>` component with a `width` and `height` prop to specify the size of the composition.
+
+```tsx
+<AbsoluteFill>
+  <Sequence width={COMPOSITION_WIDTH} height={COMPOSITION_HEIGHT}>
+    <CompositionComponent />
+  </Sequence>
+</AbsoluteFill>
+```

package/skills/remotion-best-practices/rules/sfx.md

@@ -0,0 +1,30 @@
+---
+name: sfx
+description: Including sound effects
+metadata:
+  tags: sfx, sound, effect, audio
+---
+
+To include a sound effect, use the `<Audio>` tag:
+
+```tsx
+import { Audio } from "@remotion/sfx";
+
+<Audio src={"https://remotion.media/whoosh.wav"} />;
+```
+
+The following sound effects are available:
+
+- `https://remotion.media/whoosh.wav`
+- `https://remotion.media/whip.wav`
+- `https://remotion.media/page-turn.wav`
+- `https://remotion.media/switch.wav`
+- `https://remotion.media/mouse-click.wav`
+- `https://remotion.media/shutter-modern.wav`
+- `https://remotion.media/shutter-old.wav`
+- `https://remotion.media/ding.wav`
+- `https://remotion.media/bruh.wav`
+- `https://remotion.media/vine-boom.wav`
+- `https://remotion.media/windows-xp-error.wav`
+
+For more sound effects, search the internet. A good resource is https://github.com/kapishdima/soundcn/tree/main/assets.

package/skills/remotion-best-practices/rules/subtitles.md

@@ -0,0 +1,36 @@
+---
+name: subtitles
+description: subtitles and caption rules
+metadata:
+  tags: subtitles, captions, remotion, json
+---
+
+All captions must be processed in JSON. The captions must use the `Caption` type which is the following:
+
+```ts
+import type { Caption } from "@remotion/captions";
+```
+
+This is the definition:
+
+```ts
+type Caption = {
+  text: string;
+  startMs: number;
+  endMs: number;
+  timestampMs: number | null;
+  confidence: number | null;
+};
+```
+
+## Generating captions
+
+To transcribe video and audio files to generate captions, load the [./transcribe-captions.md](./transcribe-captions.md) file for more instructions.
+
+## Displaying captions
+
+To display captions in your video, load the [./display-captions.md](./display-captions.md) file for more instructions.
+
+## Importing captions
+
+To import captions from a .srt file, load the [./import-srt-captions.md](./import-srt-captions.md) file for more instructions.

package/skills/remotion-best-practices/rules/tailwind.md

@@ -0,0 +1,11 @@
+---
+name: tailwind
+description: Using TailwindCSS in Remotion.
+metadata:
+---
+
+You can and should use TailwindCSS in Remotion, if TailwindCSS is installed in the project.
+
+Don't use `transition-*` or `animate-*` classes - always animate using the `useCurrentFrame()` hook.
+
+Tailwind must be installed and enabled first in a Remotion project - fetch https://www.remotion.dev/docs/tailwind using WebFetch for instructions.

package/skills/remotion-best-practices/rules/text-animations.md

@@ -0,0 +1,20 @@
+---
+name: text-animations
+description: Typography and text animation patterns for Remotion.
+metadata:
+  tags: typography, text, typewriter, highlighter ken
+---
+
+## Text animations
+
+Based on `useCurrentFrame()`, reduce the string character by character to create a typewriter effect.
+
+## Typewriter Effect
+
+See [Typewriter](assets/text-animations-typewriter.tsx) for an advanced example with a blinking cursor and a pause after the first sentence.
+
+Always use string slicing for typewriter effects. Never use per-character opacity.
+
+## Word Highlighting
+
+See [Word Highlight](assets/text-animations-word-highlight.tsx) for an example for how a word highlight is animated, like with a highlighter pen.