Test 3-step tutorial overlay pro nové mobilní uživatele s auto-dismiss funkcionalitou.
3-Step Tutorial
Swipe gestures, Settings, View switching
Auto-Dismiss After 10 Seconds
Automatické zavření po 10 sekundách
Manual Dismiss
Tlačítko "Rozumím" pro ruční zavření
Step Navigation
Navigace mezi kroky s progress indikátorem
Framer Motion Animations
Respektuje prefers-reduced-motion nastavení
Keyboard Support
Escape klávesa zavírá overlay
Screen Reader Support
Full ARIA labels a accessibility attributes
onDismiss: () => void
Callback při zavření tutoriálu (uživatel kliká na "Rozumím", Escape, nebo auto-dismiss po 10s)
import { GestureOnboardingOverlay } from '@/components/editor/mobile/GestureOnboardingOverlay';
import { useEditorStore } from '@/lib/stores/editor-store';
export function EditorPage() {
const hasSeenOnboarding = useEditorStore(
(state) => state.hasSeenMobileOnboarding
);
return (
<>
{/* Overlay se zobrazuje pouze pokud uživatel NEVIDĚL */}
{!hasSeenOnboarding && (
<GestureOnboardingOverlay
onDismiss={() => console.log('Tutorial completed')}
/>
)}
{/* Zbytek stránky */}
<EditorContent />
</>
);
}Když se nový uživatel poprvé dostane na editor: