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:
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>
|
||||
);
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in new issue
Block a user