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
35 lines
901 B
JSON
35 lines
901 B
JSON
{
|
|
"name": "@tpmjs/tutorial",
|
|
"version": "0.0.0",
|
|
"private": true,
|
|
"scripts": {
|
|
"dev": "next dev --port 3001",
|
|
"build": "next build",
|
|
"start": "next start",
|
|
"lint": "eslint .",
|
|
"type-check": "tsc --noEmit",
|
|
"clean": "rm -rf .next .turbo"
|
|
},
|
|
"dependencies": {
|
|
"@tpmjs/ui": "workspace:*",
|
|
"@tpmjs/utils": "workspace:*",
|
|
"framer-motion": "^11.15.0",
|
|
"next": "^16.0.8",
|
|
"react": "^19.0.0",
|
|
"react-dom": "^19.0.0"
|
|
},
|
|
"devDependencies": {
|
|
"@tpmjs/eslint-config": "workspace:*",
|
|
"@tpmjs/tailwind-config": "workspace:*",
|
|
"@tpmjs/tsconfig": "workspace:*",
|
|
"@types/node": "^22.10.2",
|
|
"@types/react": "^19.0.2",
|
|
"@types/react-dom": "^19.0.2",
|
|
"autoprefixer": "^10.4.20",
|
|
"eslint": "^9.39.1",
|
|
"eslint-config-next": "^16.0.4",
|
|
"postcss": "^8.5.1",
|
|
"tailwindcss": "^3.4.17",
|
|
"typescript": "^5.9.3"
|
|
}
|
|
}
|