diff --git a/plugins/droid-control/ARCHITECTURE.md b/plugins/droid-control/ARCHITECTURE.md index ddc85e3..ba9409d 100644 --- a/plugins/droid-control/ARCHITECTURE.md +++ b/plugins/droid-control/ARCHITECTURE.md @@ -141,7 +141,7 @@ The `Showcase` composition in `remotion/src/compositions/Showcase.tsx` is the on | Layer | Purpose | Controlled by | |---|---|---| | Background + FloatingParticles | Preset-driven warmth or coolness | `preset` | -| TitleCard / FanningRotorOutro | Opening and closing cards | `title`, `subtitle`, `speedNote` | +| TitleCard / DroidOutro | Opening and closing cards (outro plays fanning rotor → crossfade → DROID wordmark) | `title`, `subtitle`, `speedNote` | | Window chrome + layouts | `SingleLayout` or `SideBySideLayout` | `layout`, `labels`, `objectFit` | | ZoomEffect / SpotlightOverlay / KeystrokeOverlay / SectionHeader | Timed in-scene overlays | `effects`, `keys`, `sections` | | CodeAnnotationOverlay | Timed syntax-highlighted code cards | `codeAnnotations` | diff --git a/plugins/droid-control/remotion/src/components/BigDroidLogoOutro.tsx b/plugins/droid-control/remotion/src/components/BigDroidLogoOutro.tsx deleted file mode 100644 index 5d427a2..0000000 --- a/plugins/droid-control/remotion/src/components/BigDroidLogoOutro.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React from 'react'; -import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, Easing } from 'remotion'; -import type { Palette } from '../lib/palettes'; - -export const BigDroidLogoOutro: React.FC<{ - palette: Palette; -}> = ({ palette }) => { - const frame = useCurrentFrame(); - const { fps } = useVideoConfig(); - - // Scale up from 0.8 to 1.0, fade in - const progress = interpolate(frame, [0, 1.5 * fps], [0, 1], { - easing: Easing.bezier(0.16, 1, 0.3, 1), - extrapolateLeft: 'clamp', - extrapolateRight: 'clamp', - }); - - const scale = interpolate(progress, [0, 1], [0.8, 1.0]); - const opacity = progress; - - const asciiLogo = ` - █████████ █████████ ████████ ███ █████████ - ███ ███ ███ ███ ███ ███ ███ ███ ███ - ███ ███ ███ ███ ███ ███ ███ ███ ███ - ███ ███ █████████ ███ ███ ███ ███ ███ - ███ ███ ███ ███ ███ ███ ███ ███ ███ - ███ ███ ███ ███ ███ ███ ███ ███ ███ - █████████ ███ ███ ████████ ███ █████████ - `.trim(); - - return ( - -
- {asciiLogo} -
-
- AUTONOMOUS ENGINEERING -
- - ); -}; diff --git a/plugins/droid-control/remotion/src/components/FanningRotorOutro.tsx b/plugins/droid-control/remotion/src/components/DroidOutro.tsx similarity index 56% rename from plugins/droid-control/remotion/src/components/FanningRotorOutro.tsx rename to plugins/droid-control/remotion/src/components/DroidOutro.tsx index 91f518a..716ea38 100644 --- a/plugins/droid-control/remotion/src/components/FanningRotorOutro.tsx +++ b/plugins/droid-control/remotion/src/components/DroidOutro.tsx @@ -2,12 +2,18 @@ import React from 'react'; import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, Easing } from 'remotion'; import type { Palette } from '../lib/palettes'; import { RotorMark } from './RotorMark'; +import { DroidWordmark } from './DroidWordmark'; -export const FanningRotorOutro: React.FC<{ +export const DroidOutro: React.FC<{ palette: Palette; }> = ({ palette }) => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); + const rotorCenterX = 303.105; + const rotorCenterY = 319.528; + const rotorCenterXPercent = (rotorCenterX / 613) * 100; + const rotorCenterYPercent = (rotorCenterY / 650) * 100; + const topRightSliceYPercent = ((rotorCenterY - (613 - rotorCenterX)) / 650) * 100; // Phase 1: Fan out the 8 triangles (0s to 1.5s) const fanDuration = 1.5 * fps; @@ -47,17 +53,13 @@ export const FanningRotorOutro: React.FC<{ left: '50%', width: '613px', height: '650px', - marginLeft: '-306.5px', - marginTop: '-325px', - transformOrigin: '50% 50%', + marginLeft: `${-rotorCenterX}px`, + marginTop: `${-rotorCenterY}px`, + transformOrigin: `${rotorCenterX}px ${rotorCenterY}px`, transform: `scale(${scaleProgress}) rotate(${rotationProgress}deg)`, opacity, mixBlendMode: 'screen', - // A 45-degree pie slice capturing exactly one blade (top-right) - // 50% 50% = center - // 100% 50% = straight right - // 100% 2.85% = exactly 45 degrees up (y = 18.5px out of 650px) - clipPath: 'polygon(50% 50%, 100% 50%, 100% 2.85%)', + clipPath: `polygon(${rotorCenterXPercent}% ${rotorCenterYPercent}%, 100% ${rotorCenterYPercent}%, 100% ${topRightSliceYPercent}%)`, }} > @@ -76,16 +78,6 @@ export const FanningRotorOutro: React.FC<{ extrapolateRight: 'clamp', }); - const asciiLogo = ` - █████████ █████████ ████████ ███ █████████ - ███ ███ ███ ███ ███ ███ ███ ███ ███ - ███ ███ ███ ███ ███ ███ ███ ███ ███ - ███ ███ █████████ ███ ███ ███ ███ ███ - ███ ███ ███ ███ ███ ███ ███ ███ ███ - ███ ███ ███ ███ ███ ███ ███ ███ ███ - █████████ ███ ███ ████████ ███ █████████ - `.trim(); - return ( - {/* The ASCII Droid layer */} + {/* The ASCII Droid wordmark layer */}
-
- {asciiLogo} -
-
- AUTONOMOUS ENGINEERING -
+
); diff --git a/plugins/droid-control/remotion/src/components/DroidWordmark.tsx b/plugins/droid-control/remotion/src/components/DroidWordmark.tsx new file mode 100644 index 0000000..63f73ce --- /dev/null +++ b/plugins/droid-control/remotion/src/components/DroidWordmark.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import type { Palette } from '../lib/palettes'; + +const DROID_ASCII = ` + ██████████ ██████████ ██████████ ███ ██████████ + ███ ███ ███ ███ ███ ███ ███ ███ ███ + ███ ███ ███ ███ ███ ███ ███ ███ ███ + ███ ███ ██████████ ███ ███ ███ ███ ███ + ███ ███ ███ ███ ███ ███ ███ ███ ███ + ███ ███ ███ ███ ███ ███ ███ ███ ███ + ██████████ ███ ███ ██████████ ███ ██████████ +`.trim(); + +export const DroidWordmark: React.FC<{ + palette: Palette; + logoColor?: string; + taglineColor?: string; +}> = ({ palette, logoColor, taglineColor }) => ( +
+
+ {DROID_ASCII} +
+
+ AUTONOMOUS ENGINEERING +
+
+); diff --git a/plugins/droid-control/remotion/src/compositions/Showcase.tsx b/plugins/droid-control/remotion/src/compositions/Showcase.tsx index ec88b08..dfd9f67 100644 --- a/plugins/droid-control/remotion/src/compositions/Showcase.tsx +++ b/plugins/droid-control/remotion/src/compositions/Showcase.tsx @@ -29,7 +29,7 @@ import { ColorGradeOverlay } from '../components/ColorGradeOverlay'; import { Watermark } from '../components/Watermark'; import { ZoomEffect } from '../components/ZoomEffect'; import { SectionTransitionOverlay } from '../components/SectionTransition'; -import { FanningRotorOutro } from '../components/FanningRotorOutro'; +import { DroidOutro } from '../components/DroidOutro'; import { CodeAnnotationOverlay } from '../components/CodeAnnotationOverlay'; export const showcaseSchema = z.object({ @@ -331,7 +331,7 @@ export const ShowcaseComposition: React.FC> = ( {/* Outro card */} -