onboarding: remove AsciiAnimation decoration and 'by ELYDORA' signatures (P1-17, P1-18); move hero-drift keyframes to global CSS (P3-60)

This commit is contained in:
ZacharyZhang-NY committed 2026-04-16 23:01:11 -04:00
1 parent 527a730bec
commit f1dd9786e5
4 files changed
+4 -149

No files matched your search

@@ -1,85 +0,0 @@
import { memo } from "react";
/**
* Scrolling ASCII agent-activity backdrop for the onboarding hero panel.
* Pure CSS animation (translateY on compositor thread) — no JS ticks.
* Content is doubled for seamless looping.
*/
const LINES = [
"",
" ╭──────────╮",
" │ CEO │",
" ╰────┬─────╯",
" ┌────┴─────┐",
" ╭──┴──╮ ╭──┴──╮",
" │ CTO │ │ CMO │",
" ╰──┬──╯ ╰──┬──╯",
" ╭──┴──╮ ╭──┴──╮",
" │ Eng │ │ Mkt │",
" ╰─────╯ ╰─────╯",
"",
" $ deploy --agents 12",
" ████████████████████ 100%",
" [OK] all agents online",
"",
" CEO │ analyzing requirements",
" CEO │ identifying deliverables",
" CEO │ delegating to leads",
"",
" CTO │ reviewing architecture",
" CTO │ → Dev.01: auth module",
" CTO │ → Dev.02: API layer",
" CTO │ → QA: test strategy",
"",
" CMO │ go-to-market strategy",
" CMO │ → Mkt.01: launch copy",
" CMO │ → Mkt.02: social plan",
"",
" ┌─ SPRINT 1 ────────────────┐",
" │ tasks ████████░░ 80% │",
" │ agents 12 active │",
" │ tests 128 passing │",
" └──────────────────────────┘",
"",
" Dev.01 │ scaffolding auth",
" Dev.02 │ REST endpoints",
" Design │ component library",
" QA │ integration tests",
" Mkt.01 │ blog post drafted",
"",
" CEO │ sprint review: ✓",
" CTO │ code review: merged",
" Dev.01 │ PR #12 → main",
" QA │ all tests green",
" CMO │ brief approved",
"",
" [INFO] Sprint 1 complete",
" [INFO] Advancing to Sprint 2",
"",
];
const BLOCK = LINES.join("\n");
export const AsciiAnimation = memo(function AsciiAnimation() {
return (
<div className="pointer-events-none absolute inset-0 select-none overflow-hidden">
{/* Fade masks */}
<div
className="absolute inset-x-0 top-0 z-10 h-32"
style={{ background: "linear-gradient(to bottom, var(--background), transparent)" }}
/>
<div
className="absolute inset-x-0 bottom-0 z-10 h-32"
style={{ background: "linear-gradient(to top, var(--background), transparent)" }}
/>
{/* Scrolling track — doubled for seamless loop */}
<div className="ascii-scroll-track whitespace-pre font-mono text-[11px] leading-[1.8] text-primary opacity-[0.08]">
{BLOCK}
{"\n"}
{BLOCK}
</div>
</div>
);
});
@@ -9,7 +9,6 @@ import {
Target,
} from "@phosphor-icons/react";
import type { AppLocale } from "@shared/locale";
import { AsciiAnimation } from "./AsciiAnimation";
export type OnboardingStep =
| "welcome"
@@ -84,8 +83,6 @@ export function OnboardingHero({
}}
/>
<AsciiAnimation />
<motion.div
initial={{ opacity: 0, y: 24 }}
animate={{ opacity: 1, y: 0 }}
@@ -160,39 +157,7 @@ export function OnboardingHero({
))}
</motion.div>
{/* ELYDORA signature */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.8, delay: 0.6, ease: [0.16, 1, 0.3, 1] }}
className="mt-12 flex items-center gap-3"
>
<div
className="h-px w-8"
style={{
background: "linear-gradient(90deg, var(--primary), transparent)",
}}
/>
<span
className="select-none text-[10px] font-semibold uppercase tracking-[0.2em]"
style={{
background: "linear-gradient(135deg, var(--primary) 0%, var(--muted-foreground) 100%)",
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
backgroundClip: "text",
}}
>
by ELYDORA
</span>
</motion.div>
</motion.div>
<style>{`
@keyframes hero-drift {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(-4%, 3%) scale(1.05); }
}
`}</style>
</div>
);
}
@@ -2,7 +2,6 @@ import { motion } from "framer-motion";
import { GlobeSimple, Rocket } from "@phosphor-icons/react";
import type { AppLocale } from "@shared/locale";
import { APP_LOCALES, LOCALE_LABELS } from "@shared/locale";
import { AsciiAnimation } from "./AsciiAnimation";
import { ActionButton } from "../ui";
interface WelcomeStepProps {
@@ -15,8 +14,6 @@ interface WelcomeStepProps {
export function WelcomeStep({ onContinue, currentLocale, onLocaleChange, t }: WelcomeStepProps) {
return (
<div className="relative flex w-full min-h-[100dvh] flex-col items-center justify-center overflow-hidden bg-background">
<AsciiAnimation />
<div
className="pointer-events-none absolute inset-x-0 top-0 z-10 h-40"
style={{ background: "linear-gradient(to bottom, var(--background), transparent)" }}
@@ -70,24 +67,6 @@ export function WelcomeStep({ onContinue, currentLocale, onLocaleChange, t }: We
))}
</div>
{/* ELYDORA signature */}
<div className="mt-12 flex items-center gap-3">
<div
className="h-px w-8"
style={{ background: "linear-gradient(90deg, var(--primary), transparent)" }}
/>
<span
className="select-none text-[10px] font-semibold uppercase tracking-[0.2em]"
style={{
background: "linear-gradient(135deg, var(--primary) 0%, var(--muted-foreground) 100%)",
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
backgroundClip: "text",
}}
>
by ELYDORA
</span>
</div>
</motion.div>
</div>
);
+4 -8
View File
@@ -792,14 +792,10 @@ a.paperclip-project-mention-chip {
-webkit-app-region: no-drag;
}
/* ASCII animation */
@keyframes ascii-scroll-up {
0% { transform: translateY(0); }
100% { transform: translateY(-50%); }
}
.ascii-scroll-track {
animation: ascii-scroll-up 80s linear infinite;
/* Onboarding hero ambient drift */
@keyframes hero-drift {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(-4%, 3%) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {