improve design of cards

Author: freacatt

.trae/rules/3d-objects.md

@@ -0,0 +1,41 @@
+---
+alwaysApply: true
+---
+# 3D Objects — Design & Implementation Rules
+
+## Purpose
+Define consistent standards for 3D assets used in dashboard cards and other UI surfaces.
+
+## Directory Structure
+- Store authored assets in: `public/3d/`
+- Filenames use `snake_case` and map 1:1 with app identifiers.
+- Example:
+  - `public/3d/ai_assistant.glb`
+  - `public/3d/pyramid_solver.glb`
+
+## Visual Style
+- Corners: Prefer high-radius chamfer/rounding on visible primitives (e.g., rounded boxes).
+- Materials: Solid, modern materials (Physical/Standard) with tuned metallic/roughness and optional clearcoat.
+- Modern Look: Clean silhouettes with mid-poly detail; avoid busy textures. Accents use subtle emissive where appropriate.
+
+## Technical
+- Geometry:
+  - Use rounded primitives where possible (e.g., `RoundedBoxGeometry`).
+  - Mid-poly is acceptable for better forms; prioritize silhouette and readability in a small viewport.
+- Materials:
+  - Use `MeshPhysicalMaterial` or `MeshStandardMaterial`.
+  - Suggested baseline: `metalness: 0.2–0.5`, `roughness: 0.25–0.6`, optional `clearcoat: 0–0.3`.
+  - Accents may use a small `emissive` for modern UI flair.
+- Lighting:
+  - Use `HemisphereLight` plus one or two `DirectionalLight`s for soft, contemporary shading.
+  - Keep lighting neutral; avoid harsh shadows that obscure silhouettes.
+
+## Integration
+- Card viewport is square; models must be centered and uniformly scaled to fit.
+- If a model is missing, render a simple procedural shape as a fallback (no UI breakage).
+- Procedural presets exist for rapid prototyping: `lowpoly-bot`, `pyramid`, `nodes-graph`, `workshop-tools`, `picture-frame`, `old-book`, `airplane`, `technician`. Replace with authored assets in `public/3d/` as they become available.
+
+## QA Checklist
+- Rounded edges are visible at normal zoom.
+- No z-fighting or clipping in the square viewport.
+- Materials read as solid and modern under default lighting.

components.json

@@ -21,6 +21,7 @@
   "registries": {
     "@animate-ui": "https://animate-ui.com/r/{name}.json",
     "@ai-elements": "https://ai-sdk.dev/elements/api/registry/{name}.json",
-    "@shadcn-editor": "https://shadcn-editor.vercel.app/r/{name}.json"
+    "@shadcn-editor": "https://shadcn-editor.vercel.app/r/{name}.json",
+    "@cardcn": "https://cardcn.dev/r/{name}.json"
   }
 }

package-lock.json

@@ -96,6 +96,7 @@
     "streamdown": "^2.1.0",
     "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",
+    "three": "^0.182.0",
     "tokenlens": "^1.3.1",
     "use-stick-to-bottom": "^1.1.2",
     "vaul": "^1.1.2",

package.json

@@ -0,0 +1,16 @@
+3D Models Directory
+===================
+
+- Place authored .glb/.gltf models for app cards here.
+- Recommended naming (snake_case):
+  - ai_assistant.glb
+  - pyramid_solver.glb
+  - diagram.glb
+  - product_definitions.glb
+  - ui_ux_architecture.glb
+  - documents.glb
+  - technical_architecture.glb
+  - technical_tasks.glb
+
+Note: Currently, cards use procedural low-poly presets that follow the 3D Objects rules. When real assets are added here, set modelPath on the card to load them.
+

public/3d/README.md

@@ -0,0 +1,39 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const Placeholder = {
+	title: <div className="bg-secondary h-8 max-w-40 w-full rounded-md" />,
+	content: <div className="bg-secondary h-20 w-full rounded-md" />,
+};
+
+const Line = ({ className = "" }) => (
+	<div
+		className={cn(
+			"h-px w-full via-zinc-400 from-1% from-zinc-200 to-zinc-600 absolute z-0 dark:via-zinc-700 dark:from-zinc-900 dark:to-zinc-500",
+			className,
+		)}
+	/>
+);
+const Lines = () => (
+	<>
+		<Line className="bg-linear-to-l left-0 top-2 sm:top-4 md:top-6" />
+		<Line className="bg-linear-to-r bottom-2 sm:bottom-4 md:bottom-6 left-0" />
+
+		<Line className="w-px bg-linear-to-t right-2 sm:right-4 md:right-6 h-full inset-y-0" />
+		<Line className="w-px bg-linear-to-t left-2 sm:left-4 md:left-6 h-full inset-y-0" />
+	</>
+);
+
+export const Card_2 = () => {
+	return (
+		<div className="relative">
+			<Lines />
+			<Card className="w-full border-none p-10 shadow-none">
+				<CardHeader>
+					<CardTitle>{Placeholder.title}</CardTitle>
+				</CardHeader>
+				<CardContent>{Placeholder.content}</CardContent>
+			</Card>
+		</div>
+	);
+};