Skip to content

Commit 15d95c4

Browse files
factory-ain3shfactory-ain3sh
authored
Merge pull request #25 from Factory-AI/droid/outro-polish
fix(droid-control): outro wordmark ascii + fanning blade alignment
2 parents 4937a49 + 24913b4 commit 15d95c4

5 files changed

Lines changed: 69 additions & 121 deletions

File tree

‎plugins/droid-control/ARCHITECTURE.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ The `Showcase` composition in `remotion/src/compositions/Showcase.tsx` is the on
141141
| Layer | Purpose | Controlled by |
142142
|---|---|---|
143143
| Background + FloatingParticles | Preset-driven warmth or coolness | `preset` |
144-
| TitleCard / FanningRotorOutro | Opening and closing cards | `title`, `subtitle`, `speedNote` |
144+
| TitleCard / DroidOutro | Opening and closing cards (outro plays fanning rotor → crossfade → DROID wordmark) | `title`, `subtitle`, `speedNote` |
145145
| Window chrome + layouts | `SingleLayout` or `SideBySideLayout` | `layout`, `labels`, `objectFit` |
146146
| ZoomEffect / SpotlightOverlay / KeystrokeOverlay / SectionHeader | Timed in-scene overlays | `effects`, `keys`, `sections` |
147147
| CodeAnnotationOverlay | Timed syntax-highlighted code cards | `codeAnnotations` |

‎plugins/droid-control/remotion/src/components/BigDroidLogoOutro.tsx‎

Lines changed: 0 additions & 71 deletions
This file was deleted.

plugins/droid-control/remotion/src/components/FanningRotorOutro.tsx renamed to plugins/droid-control/remotion/src/components/DroidOutro.tsx

Lines changed: 13 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,18 @@ import React from 'react';
22
import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, Easing } from 'remotion';
33
import type { Palette } from '../lib/palettes';
44
import { RotorMark } from './RotorMark';
5+
import { DroidWordmark } from './DroidWordmark';
56

6-
export const FanningRotorOutro: React.FC<{
7+
export const DroidOutro: React.FC<{
78
palette: Palette;
89
}> = ({ palette }) => {
910
const frame = useCurrentFrame();
1011
const { fps } = useVideoConfig();
12+
const rotorCenterX = 303.105;
13+
const rotorCenterY = 319.528;
14+
const rotorCenterXPercent = (rotorCenterX / 613) * 100;
15+
const rotorCenterYPercent = (rotorCenterY / 650) * 100;
16+
const topRightSliceYPercent = ((rotorCenterY - (613 - rotorCenterX)) / 650) * 100;
1117

1218
// Phase 1: Fan out the 8 triangles (0s to 1.5s)
1319
const fanDuration = 1.5 * fps;
@@ -47,17 +53,13 @@ export const FanningRotorOutro: React.FC<{
4753
left: '50%',
4854
width: '613px',
4955
height: '650px',
50-
marginLeft: '-306.5px',
51-
marginTop: '-325px',
52-
transformOrigin: '50% 50%',
56+
marginLeft: `${-rotorCenterX}px`,
57+
marginTop: `${-rotorCenterY}px`,
58+
transformOrigin: `${rotorCenterX}px ${rotorCenterY}px`,
5359
transform: `scale(${scaleProgress}) rotate(${rotationProgress}deg)`,
5460
opacity,
5561
mixBlendMode: 'screen',
56-
// A 45-degree pie slice capturing exactly one blade (top-right)
57-
// 50% 50% = center
58-
// 100% 50% = straight right
59-
// 100% 2.85% = exactly 45 degrees up (y = 18.5px out of 650px)
60-
clipPath: 'polygon(50% 50%, 100% 50%, 100% 2.85%)',
62+
clipPath: `polygon(${rotorCenterXPercent}% ${rotorCenterYPercent}%, 100% ${rotorCenterYPercent}%, 100% ${topRightSliceYPercent}%)`,
6163
}}
6264
>
6365
<RotorMark width={613} height={650} color="white" />
@@ -76,16 +78,6 @@ export const FanningRotorOutro: React.FC<{
7678
extrapolateRight: 'clamp',
7779
});
7880

79-
const asciiLogo = `
80-
█████████ █████████ ████████ ███ █████████
81-
███ ███ ███ ███ ███ ███ ███ ███ ███
82-
███ ███ ███ ███ ███ ███ ███ ███ ███
83-
███ ███ █████████ ███ ███ ███ ███ ███
84-
███ ███ ███ ███ ███ ███ ███ ███ ███
85-
███ ███ ███ ███ ███ ███ ███ ███ ███
86-
█████████ ███ ███ ████████ ███ █████████
87-
`.trim();
88-
8981
return (
9082
<AbsoluteFill
9183
style={{
@@ -101,43 +93,17 @@ export const FanningRotorOutro: React.FC<{
10193
{wedges}
10294
</div>
10395

104-
{/* The ASCII Droid layer */}
96+
{/* The ASCII Droid wordmark layer */}
10597
<div
10698
style={{
10799
position: 'absolute',
108100
display: 'flex',
109-
flexDirection: 'column',
110101
alignItems: 'center',
111102
justifyContent: 'center',
112103
opacity: asciiOpacity,
113104
}}
114105
>
115-
<div
116-
style={{
117-
color: 'white', // ASCII DROID in white
118-
fontFamily: "'Geist Mono', 'SF Mono', 'Cascadia Code', 'Fira Code', monospace",
119-
fontSize: 24,
120-
lineHeight: 1.2,
121-
whiteSpace: 'pre',
122-
textAlign: 'left',
123-
textShadow: '0 0 20px rgba(255,255,255,0.4)',
124-
}}
125-
>
126-
{asciiLogo}
127-
</div>
128-
<div
129-
style={{
130-
marginTop: 40,
131-
color: palette.accent, // AUTONOMOUS ENGINEERING in orange
132-
fontSize: 32,
133-
fontWeight: 300,
134-
fontFamily: "'Geist', system-ui, sans-serif",
135-
letterSpacing: '0.2em',
136-
textShadow: `0 0 15px ${palette.accent}66`,
137-
}}
138-
>
139-
AUTONOMOUS ENGINEERING
140-
</div>
106+
<DroidWordmark palette={palette} />
141107
</div>
142108
</AbsoluteFill>
143109
);

‎plugins/droid-control/remotion/src/components/DroidWordmark.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react';
2+
import type { Palette } from '../lib/palettes';
3+
4+
const DROID_ASCII = `
5+
██████████ ██████████ ██████████ ███ ██████████
6+
███ ███ ███ ███ ███ ███ ███ ███ ███
7+
███ ███ ███ ███ ███ ███ ███ ███ ███
8+
███ ███ ██████████ ███ ███ ███ ███ ███
9+
███ ███ ███ ███ ███ ███ ███ ███ ███
10+
███ ███ ███ ███ ███ ███ ███ ███ ███
11+
██████████ ███ ███ ██████████ ███ ██████████
12+
`.trim();
13+
14+
export const DroidWordmark: React.FC<{
15+
palette: Palette;
16+
logoColor?: string;
17+
taglineColor?: string;
18+
}> = ({ palette, logoColor, taglineColor }) => (
19+
<div
20+
style={{
21+
display: 'flex',
22+
flexDirection: 'column',
23+
alignItems: 'center',
24+
}}
25+
>
26+
<div
27+
style={{
28+
color: logoColor ?? 'white',
29+
fontFamily: "'Geist Mono', 'SF Mono', 'Cascadia Code', 'Fira Code', monospace",
30+
fontSize: 24,
31+
lineHeight: 1.2,
32+
whiteSpace: 'pre',
33+
textAlign: 'left',
34+
textShadow: '0 0 20px rgba(255,255,255,0.4)',
35+
}}
36+
>
37+
{DROID_ASCII}
38+
</div>
39+
<div
40+
style={{
41+
marginTop: 40,
42+
color: taglineColor ?? palette.accent,
43+
fontSize: 32,
44+
fontWeight: 300,
45+
fontFamily: "'Geist', system-ui, sans-serif",
46+
letterSpacing: '0.2em',
47+
textShadow: `0 0 15px ${palette.accent}66`,
48+
}}
49+
>
50+
AUTONOMOUS ENGINEERING
51+
</div>
52+
</div>
53+
);

‎plugins/droid-control/remotion/src/compositions/Showcase.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import { ColorGradeOverlay } from '../components/ColorGradeOverlay';
2929
import { Watermark } from '../components/Watermark';
3030
import { ZoomEffect } from '../components/ZoomEffect';
3131
import { SectionTransitionOverlay } from '../components/SectionTransition';
32-
import { FanningRotorOutro } from '../components/FanningRotorOutro';
32+
import { DroidOutro } from '../components/DroidOutro';
3333
import { CodeAnnotationOverlay } from '../components/CodeAnnotationOverlay';
3434

3535
export const showcaseSchema = z.object({
@@ -331,7 +331,7 @@ export const ShowcaseComposition: React.FC<z.infer<typeof showcaseSchema>> = (
331331

332332
{/* Outro card */}
333333
<TransitionSeries.Sequence durationInFrames={3.5 * fps}>
334-
<FanningRotorOutro
334+
<DroidOutro
335335
palette={palette}
336336
/>
337337
</TransitionSeries.Sequence>

0 commit comments

Comments
 (0)