diff --git a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx index 7eadaf49..7024b9ef 100644 --- a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx +++ b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx @@ -8,6 +8,7 @@ import { useClaudeTokens } from '@/shared/styles/ThemeContext'; import type { ClaudeTokens } from '@/shared/styles/claudeTokens'; import { useOnboardingV3Pipeline } from './useOnboardingV3Pipeline'; import { GRAIN_URL } from './beats/BeatShell'; +import Starburst from './Starburst'; import BeatConnect from './beats/BeatConnect'; import BeatApps from './beats/BeatApps'; import BeatTheme from './beats/BeatTheme'; @@ -63,11 +64,19 @@ const IntroBeat: React.FC<{ c: ClaudeTokens; line: string; sub?: string; onNext: }} />
+ + + {line} @@ -202,8 +211,15 @@ const OnboardingV3Root: React.FC = () => { ))} {finishing && ( -
- +
+ + + + Setting up your canvas...
diff --git a/frontend/src/app/components/OnboardingV3/Starburst.tsx b/frontend/src/app/components/OnboardingV3/Starburst.tsx new file mode 100644 index 00000000..9acd5187 --- /dev/null +++ b/frontend/src/app/components/OnboardingV3/Starburst.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +// Claude's signature asterisk mark, drawn as 8 rounded rays around a hollow center; gradient runs hover->pressed so it wears whatever accent the user picked. +const Starburst: React.FC<{ size: number; from: string; to: string }> = ({ size, from, to }) => { + const id = React.useId(); + return ( + + + + + + + + {Array.from({ length: 8 }, (unused, i) => ( + + ))} + + ); +}; + +export default Starburst; diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx index c8b039b9..b3653cef 100644 --- a/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx +++ b/frontend/src/app/components/OnboardingV3/beats/BeatCard.tsx @@ -3,6 +3,7 @@ import { motion } from 'framer-motion'; import { Dices } from 'lucide-react'; import type { ClaudeTokens } from '@/shared/styles/claudeTokens'; import type { ProviderIdentity } from '../onboardingV3Api'; +import Starburst from '../Starburst'; import BeatShell from './BeatShell'; const EPITHETS = [ @@ -52,11 +53,9 @@ const BeatCard: React.FC<{ display: 'flex', flexDirection: 'column', position: 'relative', }} > -
+
+ +
setName(e.target.value.slice(0, 18))}