06029fbc60
Create apps/tutorial - a beautiful, animated Next.js slideshow that explains TPMJS concepts from basic to advanced: Slides: - Welcome: Gradient TPMJS title with animated floating orbs - Problem: Chaotic floating icons showing fragmented AI tools - Solution: Icons organizing into a neat grid - How It Works: Flow diagram (npm → Discovery → Registry → AI Agent) - Discovery: Animated counters showing real-time sync stats - Integration: Typewriter code animation showing SDK usage - Quality Scoring: Animated gauge and progress bars - Tool Detail: Mock tool card with all metadata - Get Started: CTA buttons linking to tpmjs.com Features: - Framer Motion animations with spring physics - Keyboard navigation (arrows, space, enter) - Mouse navigation (arrows, progress dots) - Touch-friendly swipe support - Dark theme with cyan/purple gradient accents - Responsive design
46 lines
1 KiB
TypeScript
46 lines
1 KiB
TypeScript
'use client';
|
|
|
|
import { type Variants, motion } from 'framer-motion';
|
|
import type { ReactNode } from 'react';
|
|
|
|
interface SlideProps {
|
|
children: ReactNode;
|
|
isActive: boolean;
|
|
direction: 'left' | 'right' | null;
|
|
}
|
|
|
|
const variants: Variants = {
|
|
enter: (direction: 'left' | 'right') => ({
|
|
x: direction === 'right' ? '100%' : '-100%',
|
|
opacity: 0,
|
|
}),
|
|
center: {
|
|
x: 0,
|
|
opacity: 1,
|
|
},
|
|
exit: (direction: 'left' | 'right') => ({
|
|
x: direction === 'right' ? '-100%' : '100%',
|
|
opacity: 0,
|
|
}),
|
|
};
|
|
|
|
export function Slide({ children, isActive, direction }: SlideProps): React.ReactElement | null {
|
|
if (!isActive) return null;
|
|
|
|
return (
|
|
<motion.div
|
|
custom={direction}
|
|
variants={variants}
|
|
initial="enter"
|
|
animate="center"
|
|
exit="exit"
|
|
transition={{
|
|
x: { type: 'spring', stiffness: 300, damping: 30 },
|
|
opacity: { duration: 0.2 },
|
|
}}
|
|
className="absolute inset-0 flex items-center justify-center"
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
);
|
|
}
|