Skip to content

Refresh marketing preview motion and release packaging #177

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
BunsDev merged 3 commits into from
Apr 1, 2026
Merged

Refresh marketing preview motion and release packaging #177

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a60a7a3
Fix marketing Vercel output config
BunsDev Apr 1, 2026
034e124
Add staged motion to marketing hero mockup
BunsDev Apr 1, 2026
c1e75a6
Resolve merge conflicts with main for turbo.json and vercel.json
BunsDev Apr 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 41 additions & 23 deletions apps/marketing/components/hero-3d-stage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,35 +130,53 @@ export function Hero3DStage() {
position: "relative",
}}
>
{/* Transformed base - Use CSS variables */}
{/* Floating animation wrapper */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
animate={{
y: [0, -10, 0],
rotateZ: [0, -0.3, 0],
}}
transition={{
delay: 0.5,
duration: 1,
ease: [0.22, 1, 0.36, 1] as const,
duration: 6,
repeat: Infinity,
ease: "easeInOut",
}}
className="bg-background border border-border"
style={{
transformOrigin: "0 0",
backfaceVisibility: "hidden",
WebkitBackfaceVisibility: "hidden",
borderRadius: "10px",
width: "1600px",
height: "900px",
margin: "280px auto auto",
position: "absolute",
top: 0,
bottom: 0,
left: 0,
right: 0,
transform: `translate(${baseTransform.translateX}%) scale(${baseTransform.scale}) rotateX(${baseTransform.rotateX}deg) rotateY(${baseTransform.rotateY}deg) rotate(${baseTransform.rotateZ}deg)`,
transformStyle: "preserve-3d",
overflow: "hidden",
width: "100%",
height: "100%",
position: "relative",
}}
>
<OKCodeMockup />
{/* Transformed base - Use CSS variables */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{
delay: 0.5,
duration: 1,
ease: [0.22, 1, 0.36, 1] as const,
}}
className="bg-background border border-border"
style={{
transformOrigin: "0 0",
backfaceVisibility: "hidden",
WebkitBackfaceVisibility: "hidden",
borderRadius: "10px",
width: "1600px",
height: "900px",
margin: "280px auto auto",
position: "absolute",
top: 0,
bottom: 0,
left: 0,
right: 0,
transform: `translate(${baseTransform.translateX}%) scale(${baseTransform.scale}) rotateX(${baseTransform.rotateX}deg) rotateY(${baseTransform.rotateY}deg) rotate(${baseTransform.rotateZ}deg)`,
transformStyle: "preserve-3d",
overflow: "hidden",
}}
>
<OKCodeMockup />
</motion.div>
</motion.div>
</div>
</div>
Expand Down
211 changes: 158 additions & 53 deletions apps/marketing/components/okcode-mockup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,70 +196,126 @@ export function OKCodeMockup() {
{/* Chat Content */}
<div className="flex-1 overflow-auto scrollbar-hide p-4">
{/* Task Title */}
<div className="flex justify-end mb-6">
<motion.div
className="flex justify-end mb-6"
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 1.8 }}
>
<div className="bg-[#1a1a1a] rounded-lg px-4 py-2 max-w-[200px]">
<div className="text-[#e5e5e5] text-sm font-medium">install deps</div>
<div className="text-[#666] text-[10px] mt-0.5">2:47:33 AM</div>
</div>
</div>
</motion.div>

{/* AI Response */}
<div className="space-y-4">
<p className="text-[#b3b3b3] text-sm leading-relaxed">
{
"I'm checking the repo for its package manager and lockfiles first, then I'll install dependencies with the project's intended tool."
}
</p>
<div className="text-[#666] text-[10px]">2:47:44 AM • 11s</div>
<motion.div
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 2.6 }}
>
<p className="text-[#b3b3b3] text-sm leading-relaxed">
{
"I'm checking the repo for its package manager and lockfiles first, then I'll install dependencies with the project's intended tool."
}
</p>
<div className="text-[#666] text-[10px] mt-4">2:47:44 AM • 11s</div>
</motion.div>

{/* Collapsed Command */}
<CollapsedCommand label="Ran command x3" />

<p className="text-[#b3b3b3] text-sm leading-relaxed">
The repo is pinned to <InlineCode>pnpm</InlineCode> via{" "}
<InlineCode>pnpm-lock.yaml</InlineCode>. {"I'm installing with"}{" "}
<InlineCode>pnpm install</InlineCode> from the workspace root now.
</p>
<div className="text-[#666] text-[10px]">2:47:46 AM • 2.5s</div>

<p className="text-[#b3b3b3] text-sm leading-relaxed">
<InlineCode>pnpm</InlineCode> has started linking packages from the lockfile.{" "}
{"I'm waiting for it to finish and checking for any postinstall failures."}
</p>
<div className="text-[#666] text-[10px]">2:47:50 AM • 4.1s</div>
<motion.div
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 3.4 }}
>
<CollapsedCommand label="Ran command x3" />
</motion.div>

<motion.div
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 4.2 }}
>
<p className="text-[#b3b3b3] text-sm leading-relaxed">
The repo is pinned to <InlineCode>pnpm</InlineCode> via{" "}
<InlineCode>pnpm-lock.yaml</InlineCode>. {"I'm installing with"}{" "}
<InlineCode>pnpm install</InlineCode> from the workspace root now.
</p>
<div className="text-[#666] text-[10px] mt-4">2:47:46 AM • 2.5s</div>
</motion.div>

<motion.div
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 5.0 }}
>
<p className="text-[#b3b3b3] text-sm leading-relaxed">
<InlineCode>pnpm</InlineCode> has started linking packages from the lockfile.{" "}
{"I'm waiting for it to finish and checking for any postinstall failures."}
</p>
<div className="text-[#666] text-[10px] mt-4">2:47:50 AM • 4.1s</div>
</motion.div>

{/* Expanded Command */}
<div className="bg-[#111111] rounded-lg border border-[#1e1e1e] overflow-hidden">
<div className="px-3 py-2 flex items-center gap-2">
<ChevronDown className="w-4 h-4 text-[#666]" />
<span className="text-[#b3b3b3] text-xs">
{"Ran command - /bin/zsh -lc 'pnpm install'"}
</span>
<motion.div
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 5.8 }}
>
<div className="bg-[#111111] rounded-lg border border-[#1e1e1e] overflow-hidden">
<div className="px-3 py-2 flex items-center gap-2">
<ChevronDown className="w-4 h-4 text-[#666]" />
<span className="text-[#b3b3b3] text-xs">
{"Ran command - /bin/zsh -lc 'pnpm install'"}
</span>
</div>
</div>
</div>
</motion.div>

{/* Response Status */}
<div className="flex items-center justify-center py-2">
<div className="px-3 py-1 bg-[#1a1a1a] rounded-full text-[#666] text-[10px] flex items-center gap-1.5">
<Clock className="w-3 h-3" />
RESPONSE • WORKED FOR 22S
<motion.div
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.4, delay: 6.6 }}
>
<div className="flex items-center justify-center py-2">
<div className="px-3 py-1 bg-[#1a1a1a] rounded-full text-[#666] text-[10px] flex items-center gap-1.5">
<Clock className="w-3 h-3" />
RESPONSE • WORKED FOR 22S
</div>
</div>
</div>

<p className="text-[#b3b3b3] text-sm leading-relaxed">
Dependencies are installed with <InlineCode>pnpm</InlineCode>.
</p>

<p className="text-[#b3b3b3] text-sm leading-relaxed">
<InlineCode>pnpm install</InlineCode> completed successfully in{" "}
<InlineCode>/Users/buns/.okcode/worktrees/psi-claw/okcode-ad7415a3</InlineCode>, and{" "}
<InlineCode>node_modules</InlineCode> is now populated. One note:{" "}
<InlineCode>pnpm</InlineCode> ignored the <InlineCode>msw</InlineCode> build script
under its build-approval policy. If this app depends on <InlineCode>msw</InlineCode>
{"'s"} postinstall behavior, run <InlineCode>pnpm approve-builds</InlineCode> and
allow it.
</p>
<div className="text-[#666] text-[10px]">2:47:55 AM • 4.2s</div>
</motion.div>

<motion.div
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 7.2 }}
>
<p className="text-[#b3b3b3] text-sm leading-relaxed">
Dependencies are installed with <InlineCode>pnpm</InlineCode>.
</p>
</motion.div>

<motion.div
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 7.8 }}
>
<p className="text-[#b3b3b3] text-sm leading-relaxed">
<InlineCode>pnpm install</InlineCode> completed successfully in{" "}
<InlineCode>/Users/buns/.okcode/worktrees/psi-claw/okcode-ad7415a3</InlineCode>, and{" "}
<InlineCode>node_modules</InlineCode> is now populated. One note:{" "}
<InlineCode>pnpm</InlineCode> ignored the <InlineCode>msw</InlineCode> build script
under its build-approval policy. If this app depends on <InlineCode>msw</InlineCode>
{"'s"} postinstall behavior, run <InlineCode>pnpm approve-builds</InlineCode> and
allow it.
</p>
<div className="text-[#666] text-[10px] mt-4">2:47:55 AM • 4.2s</div>
</motion.div>

{/* Typing indicator - appears while messages are loading, fades out after last message */}
<TypingIndicator />
</div>
</div>

Expand Down Expand Up @@ -296,9 +352,19 @@ export function OKCodeMockup() {
<button className="p-1.5 text-[#666] hover:text-[#999]">
<Plus className="w-4 h-4" />
</button>
<button className="p-2 bg-[#4ade80] rounded-full text-[#0d0d0d]">
<motion.button
className="p-2 bg-[#4ade80] rounded-full text-[#0d0d0d]"
animate={{
boxShadow: [
"0 0 0px rgba(74,222,128,0.0)",
"0 0 12px rgba(74,222,128,0.4)",
"0 0 0px rgba(74,222,128,0.0)",
],
}}
transition={{ duration: 2.5, repeat: Infinity, ease: "easeInOut" }}
>
<ChevronRight className="w-4 h-4" />
</button>
</motion.button>
</div>
</div>
</div>
Expand Down Expand Up @@ -465,8 +531,10 @@ function FileTreeItem({
const iconColor =
type === "doc" ? "text-[#f59e0b]" : type === "config" ? "text-[#666]" : "text-[#999]";

const El = active ? motion.div : ("div" as unknown as typeof motion.div);

return (
<div
<El
className={`flex items-center gap-1 px-2 py-0.5 text-xs cursor-pointer rounded ${
active
? "bg-[#1e3a5f] text-[#60a5fa]"
Expand All @@ -475,11 +543,19 @@ function FileTreeItem({
: "text-[#999] hover:bg-[#1a1a1a]"
}`}
style={{ paddingLeft: `${8 + indent * 12}px` }}
{...(active
? {
animate: {
backgroundColor: ["rgba(30,58,95,0.5)", "rgba(30,58,95,1)", "rgba(30,58,95,0.5)"],
},
transition: { duration: 3, repeat: Infinity, ease: "easeInOut" as const },
}
: {})}
>
<span className="w-3 h-3" /> {/* Spacer for alignment */}
<FileText className={`w-3.5 h-3.5 ${iconColor}`} />
<span>{name}</span>
</div>
</El>
);
}

Expand Down Expand Up @@ -522,6 +598,35 @@ function TabButton({ label, active = false }: { label: string; active?: boolean
);
}

function TypingIndicator() {
return (
<motion.div
className="flex items-center gap-1.5 py-2"
initial={{ opacity: 0 }}
animate={{ opacity: [0, 1, 1, 0] }}
transition={{
duration: 8,
delay: 2.0,
times: [0, 0.02, 0.95, 1],
}}
>
{[0, 1, 2].map((i) => (
<motion.div
key={i}
className="w-1.5 h-1.5 rounded-full bg-[#4ade80]"
animate={{ opacity: [0.3, 1, 0.3] }}
transition={{
duration: 1.2,
repeat: Infinity,
delay: i * 0.2,
ease: "easeInOut",
}}
/>
))}
</motion.div>
);
}

function TOCItem({ label }: { label: string }) {
return (
<li>
Expand Down
Loading