diff --git a/app/layout.tsx b/app/layout.tsx index 976eb90..7a68057 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -13,8 +13,8 @@ const geistMono = Geist_Mono({ }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "ByMackie 3D Animation", + description: "showcase bymackie", }; export default function RootLayout({ diff --git a/app/page.tsx b/app/page.tsx index 3f36f7c..c2dc7a0 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,65 +1,18 @@ -import Image from "next/image"; +'use client'; +import dynamic from 'next/dynamic'; + +const ShowcaseCanvas = dynamic( + () => import('@/components/three/ShowcaseCanvas'), + { ssr: false } +); export default function Home() { return ( -
-
- Next.js logo -
-

- To get started, edit the page.tsx file. -

-

- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -

-
-
- - Vercel logomark - Deploy Now - - - Documentation - -
+
+
+ +

3D Showcase

); -} +} \ No newline at end of file diff --git a/components/three/Models.tsx b/components/three/Model.tsx similarity index 99% rename from components/three/Models.tsx rename to components/three/Model.tsx index f127ccd..d4ff06e 100644 --- a/components/three/Models.tsx +++ b/components/three/Model.tsx @@ -1,5 +1,4 @@ 'use client'; - import { useGLTF } from '@react-three/drei'; export function Model({ url }: { url: string }) { diff --git a/components/three/ShowcaseCanvas.tsx b/components/three/ShowcaseCanvas.tsx index 4ed226c..20b4bfc 100644 --- a/components/three/ShowcaseCanvas.tsx +++ b/components/three/ShowcaseCanvas.tsx @@ -1,36 +1,51 @@ 'use client'; import { Canvas } from '@react-three/fiber'; -import { OrbitControls, Stage } from '@react-three/drei'; +import { OrbitControls, Stage, ContactShadows, Environment } from '@react-three/drei'; import { Suspense } from 'react'; -import { EffectComposer, Bloom, Noise, Vignette } from '@react-three/postprocessing'; -import { useAssetLoader } from '@/hooks/useAssetLoader'; import { Model } from './Model'; +import { motion } from 'framer-motion'; export default function ShowcaseCanvas() { - const { asset, loading, error } = useAssetLoader('/assets.json'); - - if (loading || error) return null; - return ( -
- - - + // Added 'bg-zinc-50' and a subtle 'bg-grid' style pattern +// Replace your div className with this: +
+ {/* 3D Canvas */} + - - {asset && } + + + + - - - - - - - - + + + {/* UI Overlay */} + +

AIR JORDAN 1

+

+ Engineered for performance and style. Experience the pinnacle of sneaker culture. +

+
+ $170.00 + +
+
); } \ No newline at end of file diff --git a/next.config.ts b/next.config.ts index e9ffa30..e4879e4 100644 --- a/next.config.ts +++ b/next.config.ts @@ -1,7 +1,8 @@ import type { NextConfig } from "next"; const nextConfig: NextConfig = { - /* config options here */ + // Add this to allow network access + allowedDevOrigins: ['192.168.50.47'], }; -export default nextConfig; +export default nextConfig; \ No newline at end of file diff --git a/package.json b/package.json index 85c4e5c..243663e 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@react-three/fiber": "^9.6.1", "@react-three/postprocessing": "^3.0.4", "@types/three": "^0.184.1", + "framer-motion": "^12.40.0", "next": "16.2.7", "react": "19.2.4", "react-dom": "19.2.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 58dd097..d440f5e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,9 @@ importers: '@types/three': specifier: ^0.184.1 version: 0.184.1 + framer-motion: + specifier: ^12.40.0 + version: 12.40.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4) next: specifier: 16.2.7 version: 16.2.7(@babel/core@7.29.7)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) @@ -1290,6 +1293,20 @@ packages: resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==} engines: {node: '>= 0.4'} + framer-motion@12.40.0: + resolution: {integrity: sha512-uaBd3qC1v3KQqBEjwTUd183K6PbS+j0yR9w9VmEOLWA/tnUcSn8Xa3uck7t4dgpDoUss8xQTcj8W2L07lrnLFg==} + peerDependencies: + '@emotion/is-prop-valid': '*' + react: ^18.0.0 || ^19.0.0 + react-dom: ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@emotion/is-prop-valid': + optional: true + react: + optional: true + react-dom: + optional: true + function-bind@1.1.2: resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==} @@ -1724,6 +1741,12 @@ packages: minimist@1.2.8: resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==} + motion-dom@12.40.0: + resolution: {integrity: sha512-HxU3ZaBwNPVQUBQf1xxgq+7JrPNZvjLVxgbpEZL7RrWJnsxOf0/OM+yrHG9ogLQ31Do/r57Oz2gQWPK+6q62mg==} + + motion-utils@12.39.0: + resolution: {integrity: sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==} + ms@2.1.3: resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} @@ -3609,6 +3632,15 @@ snapshots: dependencies: is-callable: 1.2.7 + framer-motion@12.40.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4): + dependencies: + motion-dom: 12.40.0 + motion-utils: 12.39.0 + tslib: 2.8.1 + optionalDependencies: + react: 19.2.4 + react-dom: 19.2.4(react@19.2.4) + function-bind@1.1.2: {} function.prototype.name@1.1.8: @@ -4012,6 +4044,12 @@ snapshots: minimist@1.2.8: {} + motion-dom@12.40.0: + dependencies: + motion-utils: 12.39.0 + + motion-utils@12.39.0: {} + ms@2.1.3: {} n8ao@1.10.1(postprocessing@6.39.1(three@0.184.0))(three@0.184.0): diff --git a/public/models/model.glb b/public/models/shoe.glb similarity index 100% rename from public/models/model.glb rename to public/models/shoe.glb diff --git a/public/models/shoe_blue.glb b/public/models/shoe_blue.glb new file mode 100644 index 0000000..aeb1c06 Binary files /dev/null and b/public/models/shoe_blue.glb differ diff --git a/public/models/shoe_grey.glb b/public/models/shoe_grey.glb new file mode 100644 index 0000000..aeb1c06 Binary files /dev/null and b/public/models/shoe_grey.glb differ diff --git a/public/models/shoe_red.glb b/public/models/shoe_red.glb new file mode 100644 index 0000000..aeb1c06 Binary files /dev/null and b/public/models/shoe_red.glb differ