Skip to content

Commit 0171ceb

Browse files
author
codejunkie99
committed
feat: Apple-style redesign, 7 scenes (Memory, Skills, DreamCycle added)
1 parent 8e1cb8b commit 0171ceb

10 files changed

Lines changed: 436 additions & 144 deletions

File tree

‎docs/demo.gif‎

-275 KB
Loading

‎docs/demo/src/Root.tsx‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,32 @@
11
import { Composition, Series } from "remotion";
2-
import { Title } from "./scenes/Title";
2+
import { Title } from "./scenes/Title";
33
import { Architecture } from "./scenes/Architecture";
4-
import { Quickstart } from "./scenes/Quickstart";
5-
import { Outro } from "./scenes/Outro";
6-
import { FPS, W, H } from "./tokens";
4+
import { Memory } from "./scenes/Memory";
5+
import { Skills } from "./scenes/Skills";
6+
import { DreamCycle } from "./scenes/DreamCycle";
7+
import { Quickstart } from "./scenes/Quickstart";
8+
import { Outro } from "./scenes/Outro";
9+
import { FPS, W, H } from "./tokens";
710

8-
// Scene durations in frames (30fps)
9-
const T_TITLE = 150; // 5s
10-
const T_ARCH = 300; // 10s
11-
const T_QUICK = 270; // 9s
12-
const T_OUTRO = 180; // 6s
13-
const TOTAL = T_TITLE + T_ARCH + T_QUICK + T_OUTRO; // 900 = 30s
11+
// Scene durations in frames @ 30fps
12+
const T_TITLE = 150; // 5s
13+
const T_ARCH = 270; // 9s
14+
const T_MEM = 270; // 9s
15+
const T_SKILLS = 270; // 9s
16+
const T_DREAM = 210; // 7s
17+
const T_QUICK = 240; // 8s
18+
const T_OUTRO = 150; // 5s
19+
const TOTAL = T_TITLE + T_ARCH + T_MEM + T_SKILLS + T_DREAM + T_QUICK + T_OUTRO; // 1560 = 52s
1420

1521
const Demo: React.FC = () => (
1622
<Series>
17-
<Series.Sequence durationInFrames={T_TITLE}>
18-
<Title />
19-
</Series.Sequence>
20-
<Series.Sequence durationInFrames={T_ARCH}>
21-
<Architecture />
22-
</Series.Sequence>
23-
<Series.Sequence durationInFrames={T_QUICK}>
24-
<Quickstart />
25-
</Series.Sequence>
26-
<Series.Sequence durationInFrames={T_OUTRO}>
27-
<Outro />
28-
</Series.Sequence>
23+
<Series.Sequence durationInFrames={T_TITLE} ><Title /></Series.Sequence>
24+
<Series.Sequence durationInFrames={T_ARCH} ><Architecture /></Series.Sequence>
25+
<Series.Sequence durationInFrames={T_MEM} ><Memory /></Series.Sequence>
26+
<Series.Sequence durationInFrames={T_SKILLS}><Skills /></Series.Sequence>
27+
<Series.Sequence durationInFrames={T_DREAM} ><DreamCycle /></Series.Sequence>
28+
<Series.Sequence durationInFrames={T_QUICK} ><Quickstart /></Series.Sequence>
29+
<Series.Sequence durationInFrames={T_OUTRO} ><Outro /></Series.Sequence>
2930
</Series>
3031
);
3132

‎docs/demo/src/scenes/Architecture.tsx‎

Lines changed: 41 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,25 @@
11
import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
2-
import { COLORS } from "../tokens";
2+
import { COLORS, FONT, FONT_MONO } from "../tokens";
33

44
const HARNESSES = ["Claude Code", "Cursor", "Windsurf", "OpenCode", "OpenClient", "Hermes", "Python"];
5-
const LAYERS = ["memory/", "skills/", "protocols/"];
5+
const BRAIN_LAYERS = [
6+
{ path: "memory/", color: COLORS.orange },
7+
{ path: "skills/", color: COLORS.blue },
8+
{ path: "protocols/", color: COLORS.green },
9+
{ path: "tools/", color: COLORS.purple },
10+
];
611

7-
const HarnessItem: React.FC<{ label: string; delay: number }> = ({ label, delay }) => {
12+
const Pill: React.FC<{ label: string; delay: number }> = ({ label, delay }) => {
813
const frame = useCurrentFrame();
914
const { fps } = useVideoConfig();
10-
const sp = spring({ fps, frame: Math.max(0, frame - delay), config: { damping: 12 } });
11-
const op = interpolate(frame, [delay, delay + 18], [0, 1], { extrapolateRight: "clamp" });
15+
const sp = spring({ fps, frame: Math.max(0, frame - delay), config: { damping: 20, stiffness: 100 } });
16+
const op = interpolate(frame, [delay, delay + 15], [0, 1], { extrapolateRight: "clamp" });
1217
return (
1318
<div style={{
14-
background: COLORS.harness, border: "1px solid #334155", borderRadius: 6,
15-
padding: "7px 18px", color: COLORS.harnessText, fontSize: 15,
16-
opacity: op, transform: `translateX(${(1 - sp) * -50}px)`,
19+
background: COLORS.surface, border: `1px solid ${COLORS.border}`,
20+
borderRadius: 10, padding: "9px 22px", color: COLORS.text, fontSize: 15,
21+
fontFamily: FONT, fontWeight: 400,
22+
opacity: op, transform: `translateX(${(1 - sp) * -36}px)`,
1723
}}>
1824
{label}
1925
</div>
@@ -23,38 +29,50 @@ const HarnessItem: React.FC<{ label: string; delay: number }> = ({ label, delay
2329
export const Architecture: React.FC = () => {
2430
const frame = useCurrentFrame();
2531
const { fps } = useVideoConfig();
26-
const brainSp = spring({ fps, frame, config: { damping: 10, stiffness: 70 } });
32+
const brainSp = spring({ fps, frame: Math.max(0, frame - 20), config: { damping: 20, stiffness: 80 } });
2733

2834
return (
2935
<div style={{
3036
background: COLORS.bg, width: "100%", height: "100%",
3137
display: "flex", alignItems: "center", justifyContent: "center",
32-
fontFamily: "'Courier New', monospace", gap: 60,
38+
fontFamily: FONT, gap: 48,
3339
}}>
34-
<div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
35-
{HARNESSES.map((h, i) => <HarnessItem key={h} label={h} delay={i * 14} />)}
40+
{/* Harness column */}
41+
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
42+
{HARNESSES.map((h, i) => <Pill key={h} label={h} delay={i * 13} />)}
3643
</div>
3744

38-
<div style={{ display: "flex", flexDirection: "column", gap: 7, paddingTop: 2 }}>
45+
{/* Arrow column */}
46+
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
3947
{HARNESSES.map((_, i) => {
40-
const op = interpolate(frame, [i * 14 + 25, i * 14 + 45], [0, 1], { extrapolateRight: "clamp" });
41-
return <div key={i} style={{ color: COLORS.accent, fontSize: 22, opacity: op, lineHeight: "31px" }}>→</div>;
48+
const op = interpolate(frame, [i * 13 + 22, i * 13 + 38], [0, 1], { extrapolateRight: "clamp" });
49+
return (
50+
<div key={i} style={{ color: COLORS.blue, fontSize: 16, opacity: op, lineHeight: "38px", letterSpacing: 2 }}>
51+
——›
52+
</div>
53+
);
4254
})}
4355
</div>
4456

57+
{/* Brain box */}
4558
<div style={{
46-
background: COLORS.brain, border: `2px solid ${COLORS.border}`, borderRadius: 14,
47-
padding: "36px 52px", textAlign: "center",
48-
opacity: brainSp, transform: `scale(${interpolate(brainSp, [0, 1], [0.6, 1])})`,
59+
background: COLORS.surface, border: `1px solid ${COLORS.borderBright}`,
60+
borderRadius: 20, padding: "36px 48px", textAlign: "left", minWidth: 220,
61+
opacity: brainSp, transform: `scale(${interpolate(brainSp, [0, 1], [0.92, 1])})`,
62+
boxShadow: `0 0 60px rgba(10,132,255,${0.12 * brainSp})`,
4963
}}>
50-
<div style={{ fontSize: 26, fontWeight: 700, color: COLORS.accentLight, marginBottom: 22 }}>
64+
<div style={{ fontSize: 13, color: COLORS.textTertiary, letterSpacing: 2, marginBottom: 18 }}>
65+
PORTABLE BRAIN
66+
</div>
67+
<div style={{ fontSize: 22, fontWeight: 300, color: COLORS.text, fontFamily: FONT_MONO, marginBottom: 22 }}>
5168
.agent/
5269
</div>
53-
{LAYERS.map((l, i) => {
54-
const op = interpolate(frame, [55 + i * 22, 75 + i * 22], [0, 1], { extrapolateRight: "clamp" });
70+
{BRAIN_LAYERS.map((l, i) => {
71+
const op = interpolate(frame, [60 + i * 18, 80 + i * 18], [0, 1], { extrapolateRight: "clamp" });
5572
return (
56-
<div key={l} style={{ color: COLORS.muted, fontSize: 17, marginTop: 10, opacity: op }}>
57-
{l}
73+
<div key={l.path} style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 10, opacity: op }}>
74+
<div style={{ width: 6, height: 6, borderRadius: "50%", background: l.color, flexShrink: 0 }} />
75+
<div style={{ fontSize: 15, color: COLORS.textSecondary, fontFamily: FONT_MONO }}>{l.path}</div>
5876
</div>
5977
);
6078
})}

‎docs/demo/src/scenes/DreamCycle.tsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
2+
import { COLORS, FONT, FONT_MONO } from "../tokens";
3+
4+
const STEPS = [
5+
{ action: "find patterns", from: "episodic/", to: "semantic/", color: COLORS.green },
6+
{ action: "decay stale", from: "episodic/", to: "archive/", color: COLORS.orange },
7+
{ action: "git snapshot", from: ".agent/memory/", to: "autobiography", color: COLORS.blue },
8+
];
9+
10+
const FlowRow: React.FC<{ step: typeof STEPS[0]; delay: number }> = ({ step, delay }) => {
11+
const frame = useCurrentFrame();
12+
const { fps } = useVideoConfig();
13+
const sp = spring({ fps, frame: Math.max(0, frame - delay), config: { damping: 20, stiffness: 90 } });
14+
const op = interpolate(frame, [delay, delay + 20], [0, 1], { extrapolateRight: "clamp" });
15+
const lineW = interpolate(sp, [0, 1], [0, 80]);
16+
17+
return (
18+
<div style={{ display: "flex", alignItems: "center", gap: 16, opacity: op }}>
19+
{/* from */}
20+
<div style={{
21+
background: COLORS.surface, border: `1px solid ${COLORS.border}`,
22+
borderRadius: 10, padding: "10px 20px", minWidth: 150, textAlign: "center",
23+
fontSize: 14, color: COLORS.textSecondary, fontFamily: FONT_MONO,
24+
}}>
25+
{step.from}
26+
</div>
27+
{/* animated line + arrow */}
28+
<div style={{ display: "flex", alignItems: "center", gap: 0 }}>
29+
<div style={{ width: lineW, height: 1, background: step.color }} />
30+
<div style={{ fontSize: 14, color: step.color, transform: `translateX(${(1 - sp) * -6}px)` }}>›</div>
31+
</div>
32+
{/* action badge */}
33+
<div style={{
34+
background: `${step.color}18`, border: `1px solid ${step.color}44`,
35+
borderRadius: 8, padding: "8px 16px", fontSize: 14, color: step.color, fontFamily: FONT,
36+
transform: `translateX(${(1 - sp) * 20}px)`,
37+
}}>
38+
{step.action}
39+
</div>
40+
<div style={{ color: COLORS.textTertiary, fontSize: 14 }}>→</div>
41+
{/* to */}
42+
<div style={{
43+
fontSize: 14, color: COLORS.textSecondary, fontFamily: FONT_MONO,
44+
opacity: interpolate(frame, [delay + 20, delay + 38], [0, 1], { extrapolateRight: "clamp" }),
45+
}}>
46+
{step.to}
47+
</div>
48+
</div>
49+
);
50+
};
51+
52+
export const DreamCycle: React.FC = () => {
53+
const frame = useCurrentFrame();
54+
const labelOp = interpolate(frame, [0, 18], [0, 1], { extrapolateRight: "clamp" });
55+
const { fps } = useVideoConfig();
56+
const cronSp = spring({ fps, frame: Math.max(0, frame - 175), config: { damping: 22 } });
57+
const cronOp = interpolate(frame, [175, 205], [0, 1], { extrapolateRight: "clamp" });
58+
59+
return (
60+
<div style={{
61+
background: COLORS.bg, width: "100%", height: "100%",
62+
display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
63+
fontFamily: FONT, gap: 26,
64+
}}>
65+
<div style={{ fontSize: 13, letterSpacing: 3, color: COLORS.textTertiary, opacity: labelOp }}>
66+
NIGHTLY DREAM CYCLE
67+
</div>
68+
<div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
69+
{STEPS.map((s, i) => <FlowRow key={s.action} step={s} delay={30 + i * 55} />)}
70+
</div>
71+
<div style={{
72+
opacity: cronOp, transform: `translateY(${(1 - cronSp) * 10}px)`,
73+
background: COLORS.surface, border: `1px solid ${COLORS.border}`,
74+
padding: "12px 28px", borderRadius: 12,
75+
fontSize: 13, color: COLORS.textTertiary, fontFamily: FONT_MONO,
76+
}}>
77+
0 3 * * * python3 /path/to/.agent/memory/auto_dream.py
78+
</div>
79+
</div>
80+
);
81+
};

‎docs/demo/src/scenes/Memory.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
2+
import { COLORS, FONT, FONT_MONO } from "../tokens";
3+
4+
const LAYERS = [
5+
{ name: "working/", file: "WORKSPACE.md", desc: "Volatile · task-scoped", color: COLORS.blue },
6+
{ name: "episodic/", file: "AGENT_LEARNINGS.jsonl", desc: "JSONL log · 90-day window", color: COLORS.orange },
7+
{ name: "semantic/", file: "LESSONS.md", desc: "Distilled lessons · permanent", color: COLORS.green },
8+
{ name: "personal/", file: "PREFERENCES.md", desc: "User conventions · permanent", color: COLORS.purple },
9+
];
10+
11+
const Card: React.FC<{ layer: typeof LAYERS[0]; delay: number }> = ({ layer, delay }) => {
12+
const frame = useCurrentFrame();
13+
const { fps } = useVideoConfig();
14+
const sp = spring({ fps, frame: Math.max(0, frame - delay), config: { damping: 20, stiffness: 90 } });
15+
const op = interpolate(frame, [delay, delay + 18], [0, 1], { extrapolateRight: "clamp" });
16+
return (
17+
<div style={{
18+
background: COLORS.surface, borderRadius: 18, padding: "24px 28px",
19+
border: `1px solid ${COLORS.border}`, minWidth: 260,
20+
opacity: op, transform: `translateY(${(1 - sp) * 20}px)`,
21+
}}>
22+
<div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
23+
<div style={{ width: 10, height: 10, borderRadius: "50%", background: layer.color }} />
24+
<div style={{ fontSize: 18, fontWeight: 500, color: COLORS.text, fontFamily: FONT }}>
25+
{layer.name}
26+
</div>
27+
</div>
28+
<div style={{ fontSize: 12, color: COLORS.textTertiary, fontFamily: FONT_MONO, marginBottom: 8 }}>
29+
{layer.file}
30+
</div>
31+
<div style={{ fontSize: 14, color: COLORS.textSecondary, fontFamily: FONT }}>
32+
{layer.desc}
33+
</div>
34+
</div>
35+
);
36+
};
37+
38+
export const Memory: React.FC = () => {
39+
const frame = useCurrentFrame();
40+
const labelOp = interpolate(frame, [0, 18], [0, 1], { extrapolateRight: "clamp" });
41+
const { fps } = useVideoConfig();
42+
const formulaSp = spring({ fps, frame: Math.max(0, frame - 165), config: { damping: 22 } });
43+
const formulaOp = interpolate(frame, [165, 195], [0, 1], { extrapolateRight: "clamp" });
44+
45+
return (
46+
<div style={{
47+
background: COLORS.bg, width: "100%", height: "100%",
48+
display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
49+
fontFamily: FONT, gap: 24,
50+
}}>
51+
<div style={{ fontSize: 13, letterSpacing: 3, color: COLORS.textTertiary, opacity: labelOp }}>
52+
MEMORY LAYERS
53+
</div>
54+
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
55+
{LAYERS.map((l, i) => <Card key={l.name} layer={l} delay={26 + i * 32} />)}
56+
</div>
57+
<div style={{
58+
opacity: formulaOp, transform: `translateY(${(1 - formulaSp) * 12}px)`,
59+
background: COLORS.surface, border: `1px solid ${COLORS.border}`,
60+
padding: "12px 28px", borderRadius: 12,
61+
}}>
62+
<span style={{ fontSize: 13, color: COLORS.textTertiary, fontFamily: FONT_MONO }}>
63+
salience = age_decay × pain × importance × recurrence
64+
</span>
65+
</div>
66+
</div>
67+
);
68+
};

‎docs/demo/src/scenes/Outro.tsx‎

Lines changed: 46 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,68 @@
1-
import { interpolate, useCurrentFrame } from "remotion";
2-
import { COLORS } from "../tokens";
1+
import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
2+
import { COLORS, FONT } from "../tokens";
3+
4+
const STATS = [
5+
{ value: "7", label: "harnesses" },
6+
{ value: "5", label: "seed skills" },
7+
{ value: "4", label: "memory layers" },
8+
];
39

410
export const Outro: React.FC = () => {
511
const frame = useCurrentFrame();
12+
const { fps } = useVideoConfig();
13+
14+
const fadeIn = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });
15+
const fadeOut = interpolate(frame, [115, 150], [1, 0], { extrapolateLeft: "clamp" });
16+
const opacity = fadeIn * fadeOut;
17+
18+
const headSp = spring({ fps, frame, config: { damping: 22, stiffness: 80 } });
19+
const urlSp = spring({ fps, frame: Math.max(0, frame - 35), config: { damping: 22 } });
20+
const statsSp = spring({ fps, frame: Math.max(0, frame - 65), config: { damping: 22 } });
621

7-
const fadeIn = interpolate(frame, [0, 35], [0, 1], { extrapolateRight: "clamp" });
8-
const fadeOut = interpolate(frame, [120, 180], [1, 0], { extrapolateLeft: "clamp" });
9-
const glowOpacity = interpolate(frame, [20, 60], [0, 0.4], { extrapolateRight: "clamp" });
22+
const glow = interpolate(frame, [0, 60], [0, 0.18], { extrapolateRight: "clamp" }) * fadeOut;
1023

1124
return (
1225
<div style={{
1326
background: COLORS.bg, width: "100%", height: "100%",
1427
display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
15-
fontFamily: "'Courier New', monospace", opacity: fadeIn * fadeOut,
28+
fontFamily: FONT, opacity,
1629
}}>
1730
<div style={{
18-
position: "absolute", width: 500, height: 500, borderRadius: "50%",
19-
background: `radial-gradient(circle, rgba(124,58,237,${glowOpacity}) 0%, transparent 70%)`,
20-
pointerEvents: "none",
31+
position: "absolute", width: 640, height: 320, borderRadius: "50%",
32+
background: `radial-gradient(ellipse, rgba(10,132,255,${glow}) 0%, transparent 70%)`,
2133
}} />
2234

23-
<div style={{ fontSize: 52, fontWeight: 700, color: COLORS.text, marginBottom: 20, textAlign: "center" }}>
35+
<div style={{ fontSize: 56, fontWeight: 300, color: COLORS.text, textAlign: "center", lineHeight: 1.15,
36+
transform: `translateY(${(1 - headSp) * 18}px)` }}>
2437
One brain,{" "}
25-
<span style={{ color: COLORS.accentLight }}>many harnesses.</span>
38+
<span style={{ color: COLORS.blue }}>many harnesses.</span>
2639
</div>
2740

28-
<div style={{ fontSize: 20, color: COLORS.muted, marginBottom: 28 }}>
41+
<div style={{ fontSize: 18, color: COLORS.textTertiary, marginTop: 20,
42+
transform: `translateY(${(1 - urlSp) * 12}px)`,
43+
opacity: interpolate(frame, [35, 58], [0, 1], { extrapolateRight: "clamp" }) }}>
2944
github.com/codejunkie99/agentic-stack
3045
</div>
3146

32-
<div style={{ fontSize: 14, color: "#475569", letterSpacing: 3 }}>
47+
{/* Stat pills */}
48+
<div style={{
49+
display: "flex", gap: 14, marginTop: 36,
50+
opacity: interpolate(frame, [65, 88], [0, 1], { extrapolateRight: "clamp" }),
51+
transform: `translateY(${(1 - statsSp) * 10}px)`,
52+
}}>
53+
{STATS.map(s => (
54+
<div key={s.label} style={{
55+
background: COLORS.surface, border: `1px solid ${COLORS.border}`,
56+
borderRadius: 12, padding: "12px 24px", textAlign: "center",
57+
}}>
58+
<div style={{ fontSize: 28, fontWeight: 300, color: COLORS.text }}>{s.value}</div>
59+
<div style={{ fontSize: 12, color: COLORS.textTertiary, marginTop: 4, letterSpacing: 1 }}>{s.label}</div>
60+
</div>
61+
))}
62+
</div>
63+
64+
<div style={{ fontSize: 12, color: COLORS.textTertiary, letterSpacing: 3, marginTop: 28,
65+
opacity: interpolate(frame, [90, 110], [0, 1], { extrapolateRight: "clamp" }) }}>
3366
v0.3.0 · MIT
3467
</div>
3568
</div>

0 commit comments

Comments
 (0)