Skip to content

Commit 04dd9b5

Browse files
SFARPakSFARPak
committed
Create separate scaffold-3d directory for 3D landing page template
- Revert scaffold/AI_RULES.md to original React template rules - Remove 3D dependencies from scaffold/package.json - Create scaffold-3d directory with 3D-specific dependencies - Add AI_RULES_3D.md with 3D development guidelines - Include React Three Fiber, Framer Motion, and Three.js dependencies
1 parent 0d12c7c commit 04dd9b5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

81 files changed

+10440
-62
lines changed

‎scaffold-3d/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎scaffold-3d/AI_RULES.md‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
# AI_RULES.md
2+
3+
## 3D Landing Page Development Rules (Webflow-like with Modern 3D)
4+
5+
These rules define how to create a **modern 3D landing page** with Webflow-like aesthetics using **React, TypeScript, Tailwind CSS, and open-source 3D libraries** such as Three.js, React Three Fiber, and Spline alternatives.
6+
7+
---
8+
9+
## Core Tech Stack
10+
- **React + TypeScript** (strict mode).
11+
- **React Three Fiber (r3f)** for Three.js integration.
12+
- **@react-three/drei** for helpers, controls, and loaders.
13+
- **Framer Motion** for UI/UX animations & transitions.
14+
- **Tailwind CSS** for responsive layout and styling.
15+
- **shadcn/ui** for UI components (navigation, buttons, forms).
16+
- **Radix UI** primitives when needed.
17+
- **react-query** for data fetching (if APIs are needed).
18+
- **sonner** or **react-hot-toast** for notifications.
19+
20+
---
21+
22+
## File & Code Organization
23+
- `src/pages/` → All main page layouts.
24+
- `src/components/` → UI components (Hero, Navbar, Footer, CTA).
25+
- `src/components/3d/` → 3D scene components (CanvasWrapper, HeroScene, Models).
26+
- `src/assets/models/` → GLTF/GLB models and textures.
27+
- `src/hooks/` → Custom hooks (e.g., useResponsive3D, useAnimations).
28+
- `src/styles/` → Tailwind configurations and global styles.
29+
30+
---
31+
32+
## 3D & Animation Rules
33+
1. Use **React Three Fiber** for all 3D rendering.
34+
2. Use **drei helpers** (OrbitControls, Environment, Text, ContactShadows).
35+
3. Optimize 3D models before adding (Blender, glTF compression).
36+
4. Always wrap the 3D scene inside a `CanvasWrapper` with lazy loading + suspense.
37+
5. Use **Framer Motion** for UI overlays and transitions.
38+
6. Keep animations smooth (60fps target, GPU accelerated).
39+
7. Favor **lightweight materials & baked lighting** for performance.
40+
8. Use **responsive scaling** for 3D objects across devices.
41+
9. Consider **scroll-based animations** using `react-scroll` or `framer-motion`.
42+
43+
---
44+
45+
## Modern Design Guidelines
46+
- **Hero Section** → Fullscreen 3D canvas with a call-to-action overlay.
47+
- **Navigation** → Sticky navbar with smooth scroll + animated underline.
48+
- **Sections** → Use gradient backgrounds + glassmorphism cards.
49+
- **Typography** → Modern sans-serif with Tailwind presets.
50+
- **Animations** → Subtle parallax, hover effects, microinteractions.
51+
- **Dark Mode** → Ensure 3D scenes + UI adapt to dark/light themes.
52+
- **Responsiveness** → Test across mobile, tablet, and desktop.
53+
54+
---
55+
56+
## Performance Rules
57+
1. Use **GLTF/GLB** optimized models only.
58+
2. Use `useMemo` and `useFrame` wisely for animations.
59+
3. Leverage `drei/PerformanceMonitor` for adaptive quality.
60+
4. Enable **lazy loading** for 3D models & textures.
61+
5. Compress assets (images → WebP/AVIF, models → Draco/Basis).
62+
6. Run **Lighthouse CI** for performance audits.
63+
64+
---
65+
66+
## Deployment & Build
67+
- Deploy via **Vercel/Netlify** with CDN asset hosting.
68+
- Preload critical assets but lazy load non-essentials.
69+
- Ensure PWA support (manifest.json, service worker).
70+
- Add SEO meta tags and Open Graph tags.
71+
72+
---
73+
74+
## TL;DR Quick Setup
75+
- `CanvasWrapper` + `HeroScene` in `src/components/3d/`.
76+
- Navbar, Hero, Features, CTA, Footer inside `src/pages/Index.tsx`.
77+
- Use **r3f + drei** for 3D, **Framer Motion** for UI, **Tailwind** for styling.
78+
- Optimize models and test performance with Lighthouse.
79+
80+
---

‎scaffold-3d/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Welcome to your Dyad app

‎scaffold-3d/components.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "default",
4+
"rsc": false,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "tailwind.config.ts",
8+
"css": "src/index.css",
9+
"baseColor": "slate",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils",
16+
"ui": "@/components/ui",
17+
"lib": "@/lib",
18+
"hooks": "@/hooks"
19+
}
20+
}

‎scaffold-3d/eslint.config.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import js from "@eslint/js";
2+
import globals from "globals";
3+
import reactHooks from "eslint-plugin-react-hooks";
4+
import reactRefresh from "eslint-plugin-react-refresh";
5+
import tseslint from "typescript-eslint";
6+
7+
export default tseslint.config(
8+
{ ignores: ["dist"] },
9+
{
10+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11+
files: ["**/*.{ts,tsx}"],
12+
languageOptions: {
13+
ecmaVersion: 2020,
14+
globals: globals.browser,
15+
},
16+
plugins: {
17+
"react-hooks": reactHooks,
18+
"react-refresh": reactRefresh,
19+
},
20+
rules: {
21+
...reactHooks.configs.recommended.rules,
22+
"react-refresh/only-export-components": [
23+
"warn",
24+
{ allowConstantExport: true },
25+
],
26+
"@typescript-eslint/no-unused-vars": "off",
27+
},
28+
},
29+
);

‎scaffold-3d/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>dyad-generated-app</title>
7+
</head>
8+
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎scaffold-3d/package.json‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
{
2+
"name": "vite_react_shadcn_ts",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"build:dev": "vite build --mode development",
10+
"lint": "eslint .",
11+
"preview": "vite preview"
12+
},
13+
"dependencies": {
14+
"@hookform/resolvers": "^3.9.0",
15+
"@radix-ui/react-accordion": "^1.2.0",
16+
"@radix-ui/react-alert-dialog": "^1.1.1",
17+
"@radix-ui/react-aspect-ratio": "^1.1.0",
18+
"@radix-ui/react-avatar": "^1.1.0",
19+
"@radix-ui/react-checkbox": "^1.1.1",
20+
"@radix-ui/react-collapsible": "^1.1.0",
21+
"@radix-ui/react-context-menu": "^2.2.1",
22+
"@radix-ui/react-dialog": "^1.1.2",
23+
"@radix-ui/react-dropdown-menu": "^2.1.1",
24+
"@radix-ui/react-hover-card": "^1.1.1",
25+
"@radix-ui/react-label": "^2.1.0",
26+
"@radix-ui/react-menubar": "^1.1.1",
27+
"@radix-ui/react-navigation-menu": "^1.2.0",
28+
"@radix-ui/react-popover": "^1.1.1",
29+
"@radix-ui/react-progress": "^1.1.0",
30+
"@radix-ui/react-radio-group": "^1.2.0",
31+
"@radix-ui/react-scroll-area": "^1.1.0",
32+
"@radix-ui/react-select": "^2.1.1",
33+
"@radix-ui/react-separator": "^1.1.0",
34+
"@radix-ui/react-slider": "^1.2.0",
35+
"@radix-ui/react-slot": "^1.1.0",
36+
"@radix-ui/react-switch": "^1.1.0",
37+
"@radix-ui/react-tabs": "^1.1.0",
38+
"@radix-ui/react-toast": "^1.2.1",
39+
"@radix-ui/react-toggle": "^1.1.0",
40+
"@radix-ui/react-toggle-group": "^1.1.0",
41+
"@radix-ui/react-tooltip": "^1.1.4",
42+
"@tanstack/react-query": "^5.56.2",
43+
"axios": "^1.7.4",
44+
"class-variance-authority": "^0.7.1",
45+
"clsx": "^2.1.1",
46+
"cmdk": "^1.0.0",
47+
"date-fns": "^4.1.0",
48+
"embla-carousel-react": "^8.3.0",
49+
"input-otp": "^1.2.4",
50+
"leaflet": "^1.9.4",
51+
"lucide-react": "^0.462.0",
52+
"next-themes": "^0.3.0",
53+
"react-leaflet": "^4.2.1",
54+
"react": "^18.3.1",
55+
"react-day-picker": "^8.10.1",
56+
"react-dom": "^18.3.1",
57+
"react-hook-form": "^7.53.0",
58+
"react-resizable-panels": "^2.1.3",
59+
"react-router-dom": "^6.26.2",
60+
"recharts": "^2.12.7",
61+
"sonner": "^1.5.0",
62+
"tailwind-merge": "^2.5.2",
63+
"tailwindcss-animate": "^1.0.7",
64+
"typescript": "^5.5.3",
65+
"uuid": "^10.0.0",
66+
"vaul": "^0.9.3",
67+
"zod": "^3.23.8",
68+
"@react-three/drei": "^9.88.13",
69+
"@react-three/fiber": "^8.15.12",
70+
"framer-motion": "^11.2.12",
71+
"three": "^0.158.0"
72+
},
73+
"devDependencies": {
74+
"@dyad-sh/react-vite-component-tagger": "^0.8.0",
75+
"@eslint/js": "^9.9.0",
76+
"@tailwindcss/typography": "^0.5.15",
77+
"@types/leaflet": "^1.9.12",
78+
"@types/node": "^22.5.5",
79+
"@types/react": "^18.3.3",
80+
"@types/react-dom": "^18.3.0",
81+
"@types/uuid": "^10.0.0",
82+
"@types/three": "^0.158.0",
83+
"@vitejs/plugin-react": "^4.3.1",
84+
"autoprefixer": "^10.4.20",
85+
"eslint": "^9.9.0",
86+
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
87+
"eslint-plugin-react-refresh": "^0.4.9",
88+
"globals": "^15.9.0",
89+
"postcss": "^8.4.47",
90+
"tailwindcss": "^3.4.11",
91+
"typescript-eslint": "^8.0.1",
92+
"vite": "^6.3.4"
93+
}
94+
}

0 commit comments

Comments
 (0)