├── nexus ├── metadata.json ├── utils │ └── cn.ts ├── .gitignore ├── index.tsx ├── types.ts ├── package.json ├── README.md ├── tsconfig.json ├── vite.config.ts ├── App.tsx ├── components │ ├── Navbar.tsx │ ├── Philosophy.tsx │ ├── Footer.tsx │ └── Modules.tsx └── index.html ├── aelia ├── metadata.json ├── .gitignore ├── index.tsx ├── package.json ├── types.ts ├── README.md ├── tsconfig.json ├── vite.config.ts ├── components │ ├── ui │ │ ├── SlatReveal.tsx │ │ └── MagneticButton.tsx │ ├── Philosophy.tsx │ ├── UGCGrid.tsx │ ├── Hero.tsx │ └── Footer.tsx ├── App.tsx ├── constants.ts └── index.html ├── chromaflow ├── metadata.json ├── .gitignore ├── index.tsx ├── types.ts ├── README.md ├── tsconfig.json ├── vite.config.ts ├── package.json ├── hooks │ └── useSmoothScroll.ts ├── App.tsx ├── services │ └── geminiService.ts ├── components │ ├── CustomCursor.tsx │ ├── Philosophy.tsx │ ├── Footer.tsx │ ├── Services.tsx │ ├── Installations.tsx │ └── Hero.tsx └── index.html ├── aether ├── metadata.json ├── .gitignore ├── index.tsx ├── package.json ├── README.md ├── tsconfig.json └── vite.config.ts ├── forge ├── metadata.json ├── .gitignore ├── index.tsx ├── README.md ├── types.ts ├── package.json ├── tsconfig.json ├── vite.config.ts ├── App.tsx ├── services │ └── geminiService.ts ├── components │ ├── Philosophy.tsx │ ├── Legacy.tsx │ ├── Hero.tsx │ ├── Craftsmanship.tsx │ ├── Materials.tsx │ └── Collections.tsx ├── constants.ts └── index.html ├── arche ├── metadata.json ├── .gitignore ├── index.tsx ├── types.ts ├── README.md ├── package.json ├── tsconfig.json ├── vite.config.ts ├── App.tsx ├── components │ ├── SmoothScroll.tsx │ ├── Philosophy.tsx │ ├── Navigation.tsx │ ├── Journal.tsx │ ├── Services.tsx │ ├── Footer.tsx │ └── Hero.tsx ├── index.html └── constants.ts ├── aura ├── metadata.json ├── .gitignore ├── index.tsx ├── types.ts ├── README.md ├── tsconfig.json ├── vite.config.ts ├── package.json ├── components │ ├── SmoothScroll.tsx │ └── Navigation.tsx ├── App.tsx ├── services │ └── geminiService.ts ├── sections │ ├── Philosophy.tsx │ ├── Hero.tsx │ ├── Journal.tsx │ ├── Collection.tsx │ └── Routine.tsx ├── constants.ts └── index.html ├── velocite ├── metadata.json ├── .gitignore ├── index.tsx ├── types.ts ├── package.json ├── README.md ├── tsconfig.json ├── vite.config.ts ├── App.tsx ├── services │ └── geminiService.ts ├── components │ ├── Manifesto.tsx │ ├── Circuit.tsx │ ├── Hero.tsx │ ├── Features.tsx │ ├── Models.tsx │ └── Footer.tsx ├── constants.ts └── index.html └── chronos ├── metadata.json ├── .gitignore ├── types.ts ├── index.tsx ├── README.md ├── tsconfig.json ├── vite.config.ts ├── package.json ├── App.tsx ├── index.html └── components └── UI.tsx /nexus/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Nexus", 3 | "description": "An intelligent, frictionless workflow platform featuring a modular, data-driven design.", 4 | "requestFramePermissions": [] 5 | } -------------------------------------------------------------------------------- /nexus/utils/cn.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from "clsx"; 2 | import { twMerge } from "tailwind-merge"; 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)); 6 | } -------------------------------------------------------------------------------- /aelia/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "AELIA - Luxury Leather Goods", 3 | "description": "A luxury e-commerce landing page focusing on inheritance quality, transparency, and subtle grandeur.", 4 | "requestFramePermissions": [] 5 | } -------------------------------------------------------------------------------- /chromaflow/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ChromaFlow", 3 | "description": "A dynamic art and tech studio portfolio featuring interactive light installations, generative art, and fluid UI experiences.", 4 | "requestFramePermissions": [] 5 | } -------------------------------------------------------------------------------- /aether/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "AETHER Data Intelligence", 3 | "description": "A high-fidelity, sci-fi inspired data intelligence SaaS platform featuring real-time visualization and zero-latency design principles.", 4 | "requestFramePermissions": [] 5 | } -------------------------------------------------------------------------------- /forge/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Forge - Artisan Cookware", 3 | "description": "A digital experience for high-end heritage cookware, featuring heavy interactive elements, heat-map visuals, and an AI Artisan assistant.", 4 | "requestFramePermissions": [] 5 | } -------------------------------------------------------------------------------- /arche/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Arché - Holistic Design Studio", 3 | "description": "A digital home for an architecture firm blending nature with brutalism. Features smooth scrolling, parallax effects, and tactile interactions.", 4 | "requestFramePermissions": [] 5 | } -------------------------------------------------------------------------------- /aura/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Aura - Botanical Skincare", 3 | "description": "An ethereal, ultra-clean digital storefront for science-backed skincare. Features smooth scrolling, parallax effects, and a weightless user experience.", 4 | "requestFramePermissions": [] 5 | } -------------------------------------------------------------------------------- /velocite/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Velocité - Hyper-Electric", 3 | "description": "A futuristic digital showroom for the Velocité electric vehicle brand, featuring kinetic typography, immersive scroll interactions, and an AI-powered co-pilot.", 4 | "requestFramePermissions": [] 5 | } -------------------------------------------------------------------------------- /chronos/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "CHRONOS - Temporal Architecture", 3 | "description": "A high-end, immersive 3D data visualization platform for temporal architecture, featuring reactive particle systems, post-processing effects, and scroll-driven narratives.", 4 | "requestFramePermissions": [] 5 | } -------------------------------------------------------------------------------- /aelia/.gitignore: -------------------------------------------------------------------------------- 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? 25 | -------------------------------------------------------------------------------- /aether/.gitignore: -------------------------------------------------------------------------------- 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? 25 | -------------------------------------------------------------------------------- /arche/.gitignore: -------------------------------------------------------------------------------- 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? 25 | -------------------------------------------------------------------------------- /aura/.gitignore: -------------------------------------------------------------------------------- 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? 25 | -------------------------------------------------------------------------------- /chronos/.gitignore: -------------------------------------------------------------------------------- 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? 25 | -------------------------------------------------------------------------------- /forge/.gitignore: -------------------------------------------------------------------------------- 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? 25 | -------------------------------------------------------------------------------- /nexus/.gitignore: -------------------------------------------------------------------------------- 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? 25 | -------------------------------------------------------------------------------- /velocite/.gitignore: -------------------------------------------------------------------------------- 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? 25 | -------------------------------------------------------------------------------- /chromaflow/.gitignore: -------------------------------------------------------------------------------- 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? 25 | -------------------------------------------------------------------------------- /chronos/types.ts: -------------------------------------------------------------------------------- 1 | export interface SectionProps { 2 | opacity: number; 3 | } 4 | 5 | export enum SectionType { 6 | HERO, 7 | MODALITIES, 8 | DEEP_DIVE, 9 | ENGINE, 10 | HORIZON, 11 | CONTACT 12 | } 13 | 14 | export const THEME = { 15 | black: '#000000', 16 | violetBlue: '#3A0066', 17 | cyan: '#00FFFF', 18 | plasmaRed: '#FF0054', 19 | plasmaOrange: '#FF7B00', 20 | white: '#E0E0E0', 21 | }; -------------------------------------------------------------------------------- /aether/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | const rootElement = document.getElementById('root'); 6 | if (!rootElement) { 7 | throw new Error("Could not find root element to mount to"); 8 | } 9 | 10 | const root = ReactDOM.createRoot(rootElement); 11 | root.render( 12 | 13 | 14 | 15 | ); -------------------------------------------------------------------------------- /aura/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | const rootElement = document.getElementById('root'); 6 | if (!rootElement) { 7 | throw new Error("Could not find root element to mount to"); 8 | } 9 | 10 | const root = ReactDOM.createRoot(rootElement); 11 | root.render( 12 | 13 | 14 | 15 | ); -------------------------------------------------------------------------------- /chronos/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | const rootElement = document.getElementById('root'); 6 | if (!rootElement) { 7 | throw new Error("Could not find root element to mount to"); 8 | } 9 | 10 | const root = ReactDOM.createRoot(rootElement); 11 | root.render( 12 | 13 | 14 | 15 | ); -------------------------------------------------------------------------------- /forge/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | const rootElement = document.getElementById('root'); 6 | if (!rootElement) { 7 | throw new Error("Could not find root element to mount to"); 8 | } 9 | 10 | const root = ReactDOM.createRoot(rootElement); 11 | root.render( 12 | 13 | 14 | 15 | ); -------------------------------------------------------------------------------- /nexus/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | const rootElement = document.getElementById('root'); 6 | if (!rootElement) { 7 | throw new Error("Could not find root element to mount to"); 8 | } 9 | 10 | const root = ReactDOM.createRoot(rootElement); 11 | root.render( 12 | 13 | 14 | 15 | ); -------------------------------------------------------------------------------- /velocite/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | const rootElement = document.getElementById('root'); 6 | if (!rootElement) { 7 | throw new Error("Could not find root element to mount to"); 8 | } 9 | 10 | const root = ReactDOM.createRoot(rootElement); 11 | root.render( 12 | 13 | 14 | 15 | ); -------------------------------------------------------------------------------- /aelia/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | const rootElement = document.getElementById('root'); 6 | if (!rootElement) { 7 | throw new Error("Could not find root element to mount to"); 8 | } 9 | 10 | const root = ReactDOM.createRoot(rootElement); 11 | root.render( 12 | 13 | 14 | 15 | ); 16 | -------------------------------------------------------------------------------- /arche/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | const rootElement = document.getElementById('root'); 6 | if (!rootElement) { 7 | throw new Error("Could not find root element to mount to"); 8 | } 9 | 10 | const root = ReactDOM.createRoot(rootElement); 11 | root.render( 12 | 13 | 14 | 15 | ); 16 | -------------------------------------------------------------------------------- /chromaflow/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | const rootElement = document.getElementById('root'); 6 | if (!rootElement) { 7 | throw new Error("Could not find root element to mount to"); 8 | } 9 | 10 | const root = ReactDOM.createRoot(rootElement); 11 | root.render( 12 | 13 | 14 | 15 | ); 16 | -------------------------------------------------------------------------------- /aura/types.ts: -------------------------------------------------------------------------------- 1 | export interface Product { 2 | id: number; 3 | name: string; 4 | price: string; 5 | image: string; 6 | description: string; 7 | } 8 | 9 | export interface Ingredient { 10 | id: number; 11 | name: string; 12 | description: string; 13 | benefit: string; 14 | image: string; // Using image to simulate macro video 15 | } 16 | 17 | export interface JournalEntry { 18 | id: number; 19 | title: string; 20 | category: string; 21 | image: string; 22 | } 23 | -------------------------------------------------------------------------------- /chromaflow/types.ts: -------------------------------------------------------------------------------- 1 | export interface InstallationProject { 2 | id: string; 3 | title: string; 4 | image: string; 5 | description: string; 6 | } 7 | 8 | export interface ServiceItem { 9 | id: string; 10 | title: string; 11 | description: string; 12 | patternType: 'waves' | 'grid' | 'particles'; 13 | } 14 | 15 | export interface LabItem { 16 | id: string; 17 | type: 'image' | 'code' | 'generative'; 18 | content: string; 19 | span?: string; // col-span-2 etc 20 | } 21 | -------------------------------------------------------------------------------- /nexus/types.ts: -------------------------------------------------------------------------------- 1 | export interface ModuleItem { 2 | id: string; 3 | title: string; 4 | description: string; 5 | mockData: string; 6 | } 7 | 8 | export interface ArchitectureItem { 9 | id: string; 10 | title: string; 11 | description: string; 12 | detail: string; 13 | metric: string; 14 | } 15 | 16 | export interface PricingPlan { 17 | id: string; 18 | name: string; 19 | price: string; 20 | features: string[]; 21 | } 22 | 23 | export interface CaseStudy { 24 | id: string; 25 | client: string; 26 | impact: string; 27 | quote: string; 28 | dataPoint: string; 29 | } -------------------------------------------------------------------------------- /aelia/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aelia---luxury-leather-goods", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^19.2.0", 13 | "react-dom": "^19.2.0", 14 | "framer-motion": "^12.23.24", 15 | "lucide-react": "^0.554.0" 16 | }, 17 | "devDependencies": { 18 | "@types/node": "^22.14.0", 19 | "@vitejs/plugin-react": "^5.0.0", 20 | "typescript": "~5.8.2", 21 | "vite": "^6.2.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /aelia/types.ts: -------------------------------------------------------------------------------- 1 | export interface Product { 2 | id: string; 3 | name: string; 4 | price: string; 5 | image: string; 6 | description: string; 7 | } 8 | 9 | export interface Material { 10 | id: string; 11 | name: string; 12 | origin: string; 13 | image: string; 14 | description: string; 15 | } 16 | 17 | export interface SourcingStep { 18 | id: number; 19 | title: string; 20 | description: string; 21 | location: string; 22 | } 23 | 24 | export interface Testimonial { 25 | id: string; 26 | author: string; 27 | location: string; 28 | image: string; 29 | text: string; 30 | } 31 | -------------------------------------------------------------------------------- /arche/types.ts: -------------------------------------------------------------------------------- 1 | export interface Project { 2 | id: number; 3 | title: string; 4 | year: string; 5 | category: string; 6 | image: string; 7 | } 8 | 9 | export interface Material { 10 | id: string; 11 | name: string; 12 | origin: string; 13 | texture: string; 14 | description: string; 15 | } 16 | 17 | export interface Service { 18 | id: string; 19 | title: string; 20 | description: string; 21 | image: string; 22 | } 23 | 24 | export interface JournalEntry { 25 | id: number; 26 | type: 'image' | 'quote'; 27 | content: string; 28 | author?: string; 29 | date?: string; 30 | } 31 | -------------------------------------------------------------------------------- /aether/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aether-data-intelligence", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^19.2.0", 13 | "react-dom": "^19.2.0", 14 | "lucide-react": "^0.554.0", 15 | "framer-motion": "^12.23.24", 16 | "recharts": "^3.5.0" 17 | }, 18 | "devDependencies": { 19 | "@types/node": "^22.14.0", 20 | "@vitejs/plugin-react": "^5.0.0", 21 | "typescript": "~5.8.2", 22 | "vite": "^6.2.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /velocite/types.ts: -------------------------------------------------------------------------------- 1 | export interface CarModel { 2 | id: string; 3 | name: string; 4 | tagline: string; 5 | specs: { 6 | acceleration: string; 7 | range: string; 8 | hp: string; 9 | }; 10 | image: string; 11 | } 12 | 13 | export interface TechComponent { 14 | id: string; 15 | name: string; 16 | description: string; 17 | specs: string[]; 18 | } 19 | 20 | export interface Feature { 21 | id: string; 22 | title: string; 23 | description: string; 24 | iconPath: string; 25 | } 26 | 27 | export interface ChatMessage { 28 | role: 'user' | 'model'; 29 | text: string; 30 | isThinking?: boolean; 31 | } -------------------------------------------------------------------------------- /velocite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "velocité---hyper-electric", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^19.2.0", 13 | "react-dom": "^19.2.0", 14 | "framer-motion": "^12.23.24", 15 | "lucide-react": "^0.554.0", 16 | "@google/genai": "^1.30.0" 17 | }, 18 | "devDependencies": { 19 | "@types/node": "^22.14.0", 20 | "@vitejs/plugin-react": "^5.0.0", 21 | "typescript": "~5.8.2", 22 | "vite": "^6.2.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /aura/README.md: -------------------------------------------------------------------------------- 1 |
2 | GHBanner 3 |
4 | 5 | # Run and deploy your AI Studio app 6 | 7 | This contains everything you need to run your app locally. 8 | 9 | View your app in AI Studio: https://ai.studio/apps/drive/1ZQchPl-P72dLsZOEz-V3V6PW-lMDl0VD 10 | 11 | ## Run Locally 12 | 13 | **Prerequisites:** Node.js 14 | 15 | 16 | 1. Install dependencies: 17 | `npm install` 18 | 2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key 19 | 3. Run the app: 20 | `npm run dev` 21 | -------------------------------------------------------------------------------- /nexus/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nexus", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^19.2.0", 13 | "react-dom": "^19.2.0", 14 | "framer-motion": "^12.23.24", 15 | "lucide-react": "^0.554.0", 16 | "tailwind-merge": "^3.4.0", 17 | "clsx": "^2.1.1" 18 | }, 19 | "devDependencies": { 20 | "@types/node": "^22.14.0", 21 | "@vitejs/plugin-react": "^5.0.0", 22 | "typescript": "~5.8.2", 23 | "vite": "^6.2.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /aelia/README.md: -------------------------------------------------------------------------------- 1 |
2 | GHBanner 3 |
4 | 5 | # Run and deploy your AI Studio app 6 | 7 | This contains everything you need to run your app locally. 8 | 9 | View your app in AI Studio: https://ai.studio/apps/drive/1v7JehV_XCw4VFORF6OHk4KreJrgl9wcy 10 | 11 | ## Run Locally 12 | 13 | **Prerequisites:** Node.js 14 | 15 | 16 | 1. Install dependencies: 17 | `npm install` 18 | 2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key 19 | 3. Run the app: 20 | `npm run dev` 21 | -------------------------------------------------------------------------------- /aether/README.md: -------------------------------------------------------------------------------- 1 |
2 | GHBanner 3 |
4 | 5 | # Run and deploy your AI Studio app 6 | 7 | This contains everything you need to run your app locally. 8 | 9 | View your app in AI Studio: https://ai.studio/apps/drive/1dtydPTJqNYpURZVZsixduF9vns219bjP 10 | 11 | ## Run Locally 12 | 13 | **Prerequisites:** Node.js 14 | 15 | 16 | 1. Install dependencies: 17 | `npm install` 18 | 2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key 19 | 3. Run the app: 20 | `npm run dev` 21 | -------------------------------------------------------------------------------- /arche/README.md: -------------------------------------------------------------------------------- 1 |
2 | GHBanner 3 |
4 | 5 | # Run and deploy your AI Studio app 6 | 7 | This contains everything you need to run your app locally. 8 | 9 | View your app in AI Studio: https://ai.studio/apps/drive/1FrD-MDTTyvoG3kbZlzMzaBW1vfiZ5MZ5 10 | 11 | ## Run Locally 12 | 13 | **Prerequisites:** Node.js 14 | 15 | 16 | 1. Install dependencies: 17 | `npm install` 18 | 2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key 19 | 3. Run the app: 20 | `npm run dev` 21 | -------------------------------------------------------------------------------- /chronos/README.md: -------------------------------------------------------------------------------- 1 |
2 | GHBanner 3 |
4 | 5 | # Run and deploy your AI Studio app 6 | 7 | This contains everything you need to run your app locally. 8 | 9 | View your app in AI Studio: https://ai.studio/apps/drive/1UWwhW3p3p4Qs8K9jW_zSdm6byUfeub7Q 10 | 11 | ## Run Locally 12 | 13 | **Prerequisites:** Node.js 14 | 15 | 16 | 1. Install dependencies: 17 | `npm install` 18 | 2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key 19 | 3. Run the app: 20 | `npm run dev` 21 | -------------------------------------------------------------------------------- /forge/README.md: -------------------------------------------------------------------------------- 1 |
2 | GHBanner 3 |
4 | 5 | # Run and deploy your AI Studio app 6 | 7 | This contains everything you need to run your app locally. 8 | 9 | View your app in AI Studio: https://ai.studio/apps/drive/1jnd0--GkkYAqCUE430rFiyH9qBNsxFq5 10 | 11 | ## Run Locally 12 | 13 | **Prerequisites:** Node.js 14 | 15 | 16 | 1. Install dependencies: 17 | `npm install` 18 | 2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key 19 | 3. Run the app: 20 | `npm run dev` 21 | -------------------------------------------------------------------------------- /nexus/README.md: -------------------------------------------------------------------------------- 1 |
2 | GHBanner 3 |
4 | 5 | # Run and deploy your AI Studio app 6 | 7 | This contains everything you need to run your app locally. 8 | 9 | View your app in AI Studio: https://ai.studio/apps/drive/1QAxTDcXTjZ4AiOIoevZeIeqD18Sf327H 10 | 11 | ## Run Locally 12 | 13 | **Prerequisites:** Node.js 14 | 15 | 16 | 1. Install dependencies: 17 | `npm install` 18 | 2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key 19 | 3. Run the app: 20 | `npm run dev` 21 | -------------------------------------------------------------------------------- /velocite/README.md: -------------------------------------------------------------------------------- 1 |
2 | GHBanner 3 |
4 | 5 | # Run and deploy your AI Studio app 6 | 7 | This contains everything you need to run your app locally. 8 | 9 | View your app in AI Studio: https://ai.studio/apps/drive/1SDmrewGi7OE4NHUpktP-893EkvQRv032 10 | 11 | ## Run Locally 12 | 13 | **Prerequisites:** Node.js 14 | 15 | 16 | 1. Install dependencies: 17 | `npm install` 18 | 2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key 19 | 3. Run the app: 20 | `npm run dev` 21 | -------------------------------------------------------------------------------- /chromaflow/README.md: -------------------------------------------------------------------------------- 1 |
2 | GHBanner 3 |
4 | 5 | # Run and deploy your AI Studio app 6 | 7 | This contains everything you need to run your app locally. 8 | 9 | View your app in AI Studio: https://ai.studio/apps/drive/1yYHxZ8p7GubsgUFBEpQXcVzy0PBoqA1K 10 | 11 | ## Run Locally 12 | 13 | **Prerequisites:** Node.js 14 | 15 | 16 | 1. Install dependencies: 17 | `npm install` 18 | 2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key 19 | 3. Run the app: 20 | `npm run dev` 21 | -------------------------------------------------------------------------------- /forge/types.ts: -------------------------------------------------------------------------------- 1 | export interface Product { 2 | id: string; 3 | name: string; 4 | weight: number; 5 | image: string; 6 | description: string; 7 | material: string; 8 | } 9 | 10 | export interface Material { 11 | id: string; 12 | name: string; 13 | temp: string; 14 | process: string; 15 | image: string; 16 | description: string; 17 | } 18 | 19 | export interface TimelineEvent { 20 | year: string; 21 | title: string; 22 | description: string; 23 | image?: string; 24 | } 25 | 26 | export enum ChatRole { 27 | USER = 'user', 28 | MODEL = 'model' 29 | } 30 | 31 | export interface ChatMessage { 32 | role: ChatRole; 33 | text: string; 34 | } -------------------------------------------------------------------------------- /aelia/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2022", 4 | "experimentalDecorators": true, 5 | "useDefineForClassFields": false, 6 | "module": "ESNext", 7 | "lib": [ 8 | "ES2022", 9 | "DOM", 10 | "DOM.Iterable" 11 | ], 12 | "skipLibCheck": true, 13 | "types": [ 14 | "node" 15 | ], 16 | "moduleResolution": "bundler", 17 | "isolatedModules": true, 18 | "moduleDetection": "force", 19 | "allowJs": true, 20 | "jsx": "react-jsx", 21 | "paths": { 22 | "@/*": [ 23 | "./*" 24 | ] 25 | }, 26 | "allowImportingTsExtensions": true, 27 | "noEmit": true 28 | } 29 | } -------------------------------------------------------------------------------- /aether/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2022", 4 | "experimentalDecorators": true, 5 | "useDefineForClassFields": false, 6 | "module": "ESNext", 7 | "lib": [ 8 | "ES2022", 9 | "DOM", 10 | "DOM.Iterable" 11 | ], 12 | "skipLibCheck": true, 13 | "types": [ 14 | "node" 15 | ], 16 | "moduleResolution": "bundler", 17 | "isolatedModules": true, 18 | "moduleDetection": "force", 19 | "allowJs": true, 20 | "jsx": "react-jsx", 21 | "paths": { 22 | "@/*": [ 23 | "./*" 24 | ] 25 | }, 26 | "allowImportingTsExtensions": true, 27 | "noEmit": true 28 | } 29 | } -------------------------------------------------------------------------------- /arche/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "arché---holistic-design-studio", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^19.2.0", 13 | "react-dom": "^19.2.0", 14 | "framer-motion": "^12.23.24", 15 | "lucide-react": "^0.554.0", 16 | "gsap": "^3.13.0", 17 | "@studio-freight/lenis": "^1.0.42" 18 | }, 19 | "devDependencies": { 20 | "@types/node": "^22.14.0", 21 | "@vitejs/plugin-react": "^5.0.0", 22 | "typescript": "~5.8.2", 23 | "vite": "^6.2.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /arche/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2022", 4 | "experimentalDecorators": true, 5 | "useDefineForClassFields": false, 6 | "module": "ESNext", 7 | "lib": [ 8 | "ES2022", 9 | "DOM", 10 | "DOM.Iterable" 11 | ], 12 | "skipLibCheck": true, 13 | "types": [ 14 | "node" 15 | ], 16 | "moduleResolution": "bundler", 17 | "isolatedModules": true, 18 | "moduleDetection": "force", 19 | "allowJs": true, 20 | "jsx": "react-jsx", 21 | "paths": { 22 | "@/*": [ 23 | "./*" 24 | ] 25 | }, 26 | "allowImportingTsExtensions": true, 27 | "noEmit": true 28 | } 29 | } -------------------------------------------------------------------------------- /aura/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2022", 4 | "experimentalDecorators": true, 5 | "useDefineForClassFields": false, 6 | "module": "ESNext", 7 | "lib": [ 8 | "ES2022", 9 | "DOM", 10 | "DOM.Iterable" 11 | ], 12 | "skipLibCheck": true, 13 | "types": [ 14 | "node" 15 | ], 16 | "moduleResolution": "bundler", 17 | "isolatedModules": true, 18 | "moduleDetection": "force", 19 | "allowJs": true, 20 | "jsx": "react-jsx", 21 | "paths": { 22 | "@/*": [ 23 | "./*" 24 | ] 25 | }, 26 | "allowImportingTsExtensions": true, 27 | "noEmit": true 28 | } 29 | } -------------------------------------------------------------------------------- /forge/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forge---artisan-cookware", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^19.2.0", 13 | "react-dom": "^19.2.0", 14 | "@google/genai": "^1.30.0", 15 | "framer-motion": "^12.23.24", 16 | "lucide-react": "^0.554.0", 17 | "@studio-freight/lenis": "^1.0.42" 18 | }, 19 | "devDependencies": { 20 | "@types/node": "^22.14.0", 21 | "@vitejs/plugin-react": "^5.0.0", 22 | "typescript": "~5.8.2", 23 | "vite": "^6.2.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /forge/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2022", 4 | "experimentalDecorators": true, 5 | "useDefineForClassFields": false, 6 | "module": "ESNext", 7 | "lib": [ 8 | "ES2022", 9 | "DOM", 10 | "DOM.Iterable" 11 | ], 12 | "skipLibCheck": true, 13 | "types": [ 14 | "node" 15 | ], 16 | "moduleResolution": "bundler", 17 | "isolatedModules": true, 18 | "moduleDetection": "force", 19 | "allowJs": true, 20 | "jsx": "react-jsx", 21 | "paths": { 22 | "@/*": [ 23 | "./*" 24 | ] 25 | }, 26 | "allowImportingTsExtensions": true, 27 | "noEmit": true 28 | } 29 | } -------------------------------------------------------------------------------- /nexus/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2022", 4 | "experimentalDecorators": true, 5 | "useDefineForClassFields": false, 6 | "module": "ESNext", 7 | "lib": [ 8 | "ES2022", 9 | "DOM", 10 | "DOM.Iterable" 11 | ], 12 | "skipLibCheck": true, 13 | "types": [ 14 | "node" 15 | ], 16 | "moduleResolution": "bundler", 17 | "isolatedModules": true, 18 | "moduleDetection": "force", 19 | "allowJs": true, 20 | "jsx": "react-jsx", 21 | "paths": { 22 | "@/*": [ 23 | "./*" 24 | ] 25 | }, 26 | "allowImportingTsExtensions": true, 27 | "noEmit": true 28 | } 29 | } -------------------------------------------------------------------------------- /chromaflow/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2022", 4 | "experimentalDecorators": true, 5 | "useDefineForClassFields": false, 6 | "module": "ESNext", 7 | "lib": [ 8 | "ES2022", 9 | "DOM", 10 | "DOM.Iterable" 11 | ], 12 | "skipLibCheck": true, 13 | "types": [ 14 | "node" 15 | ], 16 | "moduleResolution": "bundler", 17 | "isolatedModules": true, 18 | "moduleDetection": "force", 19 | "allowJs": true, 20 | "jsx": "react-jsx", 21 | "paths": { 22 | "@/*": [ 23 | "./*" 24 | ] 25 | }, 26 | "allowImportingTsExtensions": true, 27 | "noEmit": true 28 | } 29 | } -------------------------------------------------------------------------------- /chronos/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2022", 4 | "experimentalDecorators": true, 5 | "useDefineForClassFields": false, 6 | "module": "ESNext", 7 | "lib": [ 8 | "ES2022", 9 | "DOM", 10 | "DOM.Iterable" 11 | ], 12 | "skipLibCheck": true, 13 | "types": [ 14 | "node" 15 | ], 16 | "moduleResolution": "bundler", 17 | "isolatedModules": true, 18 | "moduleDetection": "force", 19 | "allowJs": true, 20 | "jsx": "react-jsx", 21 | "paths": { 22 | "@/*": [ 23 | "./*" 24 | ] 25 | }, 26 | "allowImportingTsExtensions": true, 27 | "noEmit": true 28 | } 29 | } -------------------------------------------------------------------------------- /velocite/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2022", 4 | "experimentalDecorators": true, 5 | "useDefineForClassFields": false, 6 | "module": "ESNext", 7 | "lib": [ 8 | "ES2022", 9 | "DOM", 10 | "DOM.Iterable" 11 | ], 12 | "skipLibCheck": true, 13 | "types": [ 14 | "node" 15 | ], 16 | "moduleResolution": "bundler", 17 | "isolatedModules": true, 18 | "moduleDetection": "force", 19 | "allowJs": true, 20 | "jsx": "react-jsx", 21 | "paths": { 22 | "@/*": [ 23 | "./*" 24 | ] 25 | }, 26 | "allowImportingTsExtensions": true, 27 | "noEmit": true 28 | } 29 | } -------------------------------------------------------------------------------- /aelia/vite.config.ts: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import { defineConfig, loadEnv } from 'vite'; 3 | import react from '@vitejs/plugin-react'; 4 | 5 | export default defineConfig(({ mode }) => { 6 | const env = loadEnv(mode, '.', ''); 7 | return { 8 | server: { 9 | port: 3000, 10 | host: '0.0.0.0', 11 | }, 12 | plugins: [react()], 13 | define: { 14 | 'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY), 15 | 'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY) 16 | }, 17 | resolve: { 18 | alias: { 19 | '@': path.resolve(__dirname, '.'), 20 | } 21 | } 22 | }; 23 | }); 24 | -------------------------------------------------------------------------------- /aether/vite.config.ts: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import { defineConfig, loadEnv } from 'vite'; 3 | import react from '@vitejs/plugin-react'; 4 | 5 | export default defineConfig(({ mode }) => { 6 | const env = loadEnv(mode, '.', ''); 7 | return { 8 | server: { 9 | port: 3000, 10 | host: '0.0.0.0', 11 | }, 12 | plugins: [react()], 13 | define: { 14 | 'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY), 15 | 'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY) 16 | }, 17 | resolve: { 18 | alias: { 19 | '@': path.resolve(__dirname, '.'), 20 | } 21 | } 22 | }; 23 | }); 24 | -------------------------------------------------------------------------------- /arche/vite.config.ts: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import { defineConfig, loadEnv } from 'vite'; 3 | import react from '@vitejs/plugin-react'; 4 | 5 | export default defineConfig(({ mode }) => { 6 | const env = loadEnv(mode, '.', ''); 7 | return { 8 | server: { 9 | port: 3000, 10 | host: '0.0.0.0', 11 | }, 12 | plugins: [react()], 13 | define: { 14 | 'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY), 15 | 'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY) 16 | }, 17 | resolve: { 18 | alias: { 19 | '@': path.resolve(__dirname, '.'), 20 | } 21 | } 22 | }; 23 | }); 24 | -------------------------------------------------------------------------------- /aura/vite.config.ts: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import { defineConfig, loadEnv } from 'vite'; 3 | import react from '@vitejs/plugin-react'; 4 | 5 | export default defineConfig(({ mode }) => { 6 | const env = loadEnv(mode, '.', ''); 7 | return { 8 | server: { 9 | port: 3000, 10 | host: '0.0.0.0', 11 | }, 12 | plugins: [react()], 13 | define: { 14 | 'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY), 15 | 'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY) 16 | }, 17 | resolve: { 18 | alias: { 19 | '@': path.resolve(__dirname, '.'), 20 | } 21 | } 22 | }; 23 | }); 24 | -------------------------------------------------------------------------------- /chronos/vite.config.ts: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import { defineConfig, loadEnv } from 'vite'; 3 | import react from '@vitejs/plugin-react'; 4 | 5 | export default defineConfig(({ mode }) => { 6 | const env = loadEnv(mode, '.', ''); 7 | return { 8 | server: { 9 | port: 3000, 10 | host: '0.0.0.0', 11 | }, 12 | plugins: [react()], 13 | define: { 14 | 'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY), 15 | 'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY) 16 | }, 17 | resolve: { 18 | alias: { 19 | '@': path.resolve(__dirname, '.'), 20 | } 21 | } 22 | }; 23 | }); 24 | -------------------------------------------------------------------------------- /forge/vite.config.ts: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import { defineConfig, loadEnv } from 'vite'; 3 | import react from '@vitejs/plugin-react'; 4 | 5 | export default defineConfig(({ mode }) => { 6 | const env = loadEnv(mode, '.', ''); 7 | return { 8 | server: { 9 | port: 3000, 10 | host: '0.0.0.0', 11 | }, 12 | plugins: [react()], 13 | define: { 14 | 'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY), 15 | 'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY) 16 | }, 17 | resolve: { 18 | alias: { 19 | '@': path.resolve(__dirname, '.'), 20 | } 21 | } 22 | }; 23 | }); 24 | -------------------------------------------------------------------------------- /nexus/vite.config.ts: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import { defineConfig, loadEnv } from 'vite'; 3 | import react from '@vitejs/plugin-react'; 4 | 5 | export default defineConfig(({ mode }) => { 6 | const env = loadEnv(mode, '.', ''); 7 | return { 8 | server: { 9 | port: 3000, 10 | host: '0.0.0.0', 11 | }, 12 | plugins: [react()], 13 | define: { 14 | 'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY), 15 | 'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY) 16 | }, 17 | resolve: { 18 | alias: { 19 | '@': path.resolve(__dirname, '.'), 20 | } 21 | } 22 | }; 23 | }); 24 | -------------------------------------------------------------------------------- /chromaflow/vite.config.ts: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import { defineConfig, loadEnv } from 'vite'; 3 | import react from '@vitejs/plugin-react'; 4 | 5 | export default defineConfig(({ mode }) => { 6 | const env = loadEnv(mode, '.', ''); 7 | return { 8 | server: { 9 | port: 3000, 10 | host: '0.0.0.0', 11 | }, 12 | plugins: [react()], 13 | define: { 14 | 'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY), 15 | 'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY) 16 | }, 17 | resolve: { 18 | alias: { 19 | '@': path.resolve(__dirname, '.'), 20 | } 21 | } 22 | }; 23 | }); 24 | -------------------------------------------------------------------------------- /velocite/vite.config.ts: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import { defineConfig, loadEnv } from 'vite'; 3 | import react from '@vitejs/plugin-react'; 4 | 5 | export default defineConfig(({ mode }) => { 6 | const env = loadEnv(mode, '.', ''); 7 | return { 8 | server: { 9 | port: 3000, 10 | host: '0.0.0.0', 11 | }, 12 | plugins: [react()], 13 | define: { 14 | 'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY), 15 | 'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY) 16 | }, 17 | resolve: { 18 | alias: { 19 | '@': path.resolve(__dirname, '.'), 20 | } 21 | } 22 | }; 23 | }); 24 | -------------------------------------------------------------------------------- /aura/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aura---botanical-skincare", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^19.2.0", 13 | "react-dom": "^19.2.0", 14 | "@google/genai": "^1.30.0", 15 | "@studio-freight/lenis": "^1.0.42", 16 | "lucide-react": "^0.554.0", 17 | "gsap": "^3.13.0", 18 | "framer-motion": "^12.23.24" 19 | }, 20 | "devDependencies": { 21 | "@types/node": "^22.14.0", 22 | "@vitejs/plugin-react": "^5.0.0", 23 | "typescript": "~5.8.2", 24 | "vite": "^6.2.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /chronos/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "chronos---temporal-architecture", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react-dom": "^19.2.0", 13 | "react": "^19.2.0", 14 | "@react-three/fiber": "^9.4.0", 15 | "@react-three/drei": "^10.7.7", 16 | "three": "^0.181.2", 17 | "@react-three/postprocessing": "^3.0.4", 18 | "postprocessing": "^6.38.0" 19 | }, 20 | "devDependencies": { 21 | "@types/node": "^22.14.0", 22 | "@vitejs/plugin-react": "^5.0.0", 23 | "typescript": "~5.8.2", 24 | "vite": "^6.2.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /chromaflow/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "chromaflow", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@google/genai": "1.30.0", 13 | "@studio-freight/lenis": "1.0.29", 14 | "@studio-freight/react-lenis": "0.0.40", 15 | "framer-motion": "10.16.4", 16 | "gsap": "^3.13.0", 17 | "lucide-react": "0.292.0", 18 | "react": "^19.2.0", 19 | "react-dom": "^19.2.0" 20 | }, 21 | "devDependencies": { 22 | "@types/node": "^22.14.0", 23 | "@vitejs/plugin-react": "^5.0.0", 24 | "typescript": "~5.8.2", 25 | "vite": "^6.2.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /chromaflow/hooks/useSmoothScroll.ts: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | import Lenis from '@studio-freight/lenis'; 3 | 4 | export const useSmoothScroll = () => { 5 | useEffect(() => { 6 | const lenis = new Lenis({ 7 | duration: 1.3, 8 | easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // airy dampening 9 | direction: 'vertical', 10 | gestureDirection: 'vertical', 11 | smooth: true, 12 | smoothTouch: false, 13 | touchMultiplier: 2, 14 | }); 15 | 16 | function raf(time: number) { 17 | lenis.raf(time); 18 | requestAnimationFrame(raf); 19 | } 20 | 21 | requestAnimationFrame(raf); 22 | 23 | return () => { 24 | lenis.destroy(); 25 | }; 26 | }, []); 27 | }; 28 | -------------------------------------------------------------------------------- /nexus/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Navbar from './components/Navbar'; 3 | import Hero from './components/Hero'; 4 | import Philosophy from './components/Philosophy'; 5 | import Modules from './components/Modules'; 6 | import Architecture from './components/Architecture'; 7 | import Pricing from './components/Pricing'; 8 | import Footer from './components/Footer'; 9 | 10 | function App() { 11 | return ( 12 |
13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 |
21 |
23 | ); 24 | } 25 | 26 | export default App; -------------------------------------------------------------------------------- /velocite/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Hero } from './components/Hero'; 3 | import { Manifesto } from './components/Manifesto'; 4 | import { Models } from './components/Models'; 5 | import { TechLab } from './components/TechLab'; 6 | import { Features } from './components/Features'; 7 | import { Circuit } from './components/Circuit'; 8 | import { Footer } from './components/Footer'; 9 | import { CoPilot } from './components/CoPilot'; 10 | 11 | function App() { 12 | return ( 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
23 | ); 24 | } 25 | 26 | export default App; -------------------------------------------------------------------------------- /aura/components/SmoothScroll.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import Lenis from '@studio-freight/lenis'; 3 | 4 | export const SmoothScroll: React.FC<{ children: React.ReactNode }> = ({ children }) => { 5 | useEffect(() => { 6 | const lenis = new Lenis({ 7 | duration: 1.5, // Soft dampening as requested 8 | easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), 9 | orientation: 'vertical', 10 | gestureOrientation: 'vertical', 11 | smoothWheel: true, 12 | wheelMultiplier: 1, 13 | touchMultiplier: 2, 14 | }); 15 | 16 | function raf(time: number) { 17 | lenis.raf(time); 18 | requestAnimationFrame(raf); 19 | } 20 | 21 | requestAnimationFrame(raf); 22 | 23 | return () => { 24 | lenis.destroy(); 25 | }; 26 | }, []); 27 | 28 | return <>{children}; 29 | }; -------------------------------------------------------------------------------- /aura/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { SmoothScroll } from './components/SmoothScroll'; 3 | import { Navigation } from './components/Navigation'; 4 | import { Hero } from './sections/Hero'; 5 | import { Philosophy } from './sections/Philosophy'; 6 | import { Collection } from './sections/Collection'; 7 | import { Ingredients } from './sections/Ingredients'; 8 | import { Routine } from './sections/Routine'; 9 | import { Journal } from './sections/Journal'; 10 | import { Footer } from './sections/Footer'; 11 | 12 | function App() { 13 | return ( 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
25 | 26 | ); 27 | } 28 | 29 | export default App; -------------------------------------------------------------------------------- /arche/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import SmoothScroll from './components/SmoothScroll'; 3 | import Navigation from './components/Navigation'; 4 | import Hero from './components/Hero'; 5 | import Philosophy from './components/Philosophy'; 6 | import Projects from './components/Projects'; 7 | import MaterialLibrary from './components/MaterialLibrary'; 8 | import Services from './components/Services'; 9 | import Journal from './components/Journal'; 10 | import Footer from './components/Footer'; 11 | 12 | const App: React.FC = () => { 13 | return ( 14 | 15 |
16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 |
27 | 28 | ); 29 | }; 30 | 31 | export default App; 32 | -------------------------------------------------------------------------------- /chromaflow/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ReactLenis } from '@studio-freight/react-lenis'; 3 | import CustomCursor from './components/CustomCursor'; 4 | import Hero from './components/Hero'; 5 | import Philosophy from './components/Philosophy'; 6 | import Installations from './components/Installations'; 7 | import Process from './components/Process'; 8 | import Services from './components/Services'; 9 | import TheLab from './components/TheLab'; 10 | import Footer from './components/Footer'; 11 | 12 | function App() { 13 | 14 | return ( 15 | 16 |
17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 |
30 | 31 | ); 32 | } 33 | 34 | export default App; 35 | -------------------------------------------------------------------------------- /aelia/components/ui/SlatReveal.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { motion } from 'framer-motion'; 3 | 4 | interface SlatRevealProps { 5 | children: React.ReactNode; 6 | className?: string; 7 | delay?: number; 8 | } 9 | 10 | export const SlatReveal: React.FC = ({ children, className = "", delay = 0 }) => { 11 | const slats = 5; // Number of slats 12 | 13 | return ( 14 |
15 | {children} 16 |
17 | {Array.from({ length: slats }).map((_, i) => ( 18 | 31 | ))} 32 |
33 |
34 | ); 35 | }; 36 | -------------------------------------------------------------------------------- /aura/services/geminiService.ts: -------------------------------------------------------------------------------- 1 | import { GoogleGenAI } from "@google/genai"; 2 | 3 | const getClient = () => { 4 | const apiKey = process.env.API_KEY; 5 | if (!apiKey) { 6 | console.warn("API_KEY is not defined in the environment."); 7 | return null; 8 | } 9 | return new GoogleGenAI({ apiKey }); 10 | }; 11 | 12 | export const askAuraAI = async (question: string): Promise => { 13 | const client = getClient(); 14 | if (!client) return "Aura AI is currently sleeping. Please configure the API Key."; 15 | 16 | try { 17 | const model = "gemini-2.5-flash"; 18 | const systemInstruction = `You are Aura, a virtual aesthetician for a high-end, ethereal skincare brand. 19 | Your tone is calm, weightless, scientific, and poetic. 20 | Keep answers concise (under 50 words) and focused on hydration, purity, and light.`; 21 | 22 | const response = await client.models.generateContent({ 23 | model, 24 | contents: question, 25 | config: { 26 | systemInstruction, 27 | } 28 | }); 29 | 30 | return response.text || "I am meditating on that thought..."; 31 | } catch (error) { 32 | console.error("Gemini API Error:", error); 33 | return "The connection to the ether is weak right now."; 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /chromaflow/services/geminiService.ts: -------------------------------------------------------------------------------- 1 | import { GoogleGenAI } from "@google/genai"; 2 | 3 | // This service demonstrates how one might use Gemini to generate dynamic poetic descriptions 4 | // for the generative art pieces in "The Lab" section. 5 | 6 | // Safely retrieve API key 7 | const apiKey = process.env.API_KEY || ''; 8 | 9 | let ai: GoogleGenAI | null = null; 10 | if (apiKey) { 11 | ai = new GoogleGenAI({ apiKey }); 12 | } 13 | 14 | export const generateArtDescription = async (artType: string): Promise => { 15 | if (!ai) { 16 | console.warn("Gemini API Key missing. Returning fallback description."); 17 | return "A shimmering display of algorithmic light, constantly evolving through user interaction."; 18 | } 19 | 20 | try { 21 | const model = 'gemini-2.5-flash'; 22 | const prompt = `Write a very short, abstract, poetic description (max 15 words) for a digital art piece involving ${artType}. Use words like fluid, luminous, code, and rhythm.`; 23 | 24 | const response = await ai.models.generateContent({ 25 | model, 26 | contents: prompt, 27 | }); 28 | 29 | return response.text || "Algorithmic beauty in motion."; 30 | } catch (error) { 31 | console.error("Error generating art description:", error); 32 | return "Where code meets light and motion."; 33 | } 34 | }; 35 | -------------------------------------------------------------------------------- /velocite/services/geminiService.ts: -------------------------------------------------------------------------------- 1 | import { GoogleGenAI } from "@google/genai"; 2 | 3 | const apiKey = process.env.API_KEY || ''; // Ensure this is available in your env 4 | const ai = new GoogleGenAI({ apiKey }); 5 | 6 | export const generateCoPilotResponse = async ( 7 | history: { role: string; parts: { text: string }[] }[], 8 | userMessage: string 9 | ): Promise => { 10 | try { 11 | const model = ai.models; 12 | 13 | // Construct the chat history for the prompt context 14 | // We use gemini-2.5-flash for low latency responses 15 | const chat = ai.chats.create({ 16 | model: 'gemini-2.5-flash', 17 | config: { 18 | systemInstruction: `You are 'V-OS', the advanced AI operating system of a Velocité hyper-electric vehicle. 19 | Your tone is precise, robotic but helpful, and slightly futuristic (Cyberpunk/Sci-fi aesthetic). 20 | Keep responses concise (under 50 words) as if displaying on a HUD. 21 | You know about the Velocité models: V1 (Balanced), GT (Track), X (SUV), and Zero (Hypercar). 22 | Refer to the user as 'Pilot'.`, 23 | }, 24 | history: history, 25 | }); 26 | 27 | const result = await chat.sendMessage({ message: userMessage }); 28 | return result.text || "SYSTEM ERROR: CONNECTION INTERRUPTED"; 29 | } catch (error) { 30 | console.error("Gemini API Error:", error); 31 | return "OFFLINE MODE: UNABLE TO PROCESS REQUEST."; 32 | } 33 | }; -------------------------------------------------------------------------------- /aelia/components/ui/MagneticButton.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, useState } from 'react'; 2 | import { motion } from 'framer-motion'; 3 | 4 | interface MagneticButtonProps { 5 | children: React.ReactNode; 6 | className?: string; 7 | onClick?: () => void; 8 | strength?: number; 9 | } 10 | 11 | export const MagneticButton: React.FC = ({ 12 | children, 13 | className = "", 14 | onClick, 15 | strength = 30 16 | }) => { 17 | const ref = useRef(null); 18 | const [position, setPosition] = useState({ x: 0, y: 0 }); 19 | 20 | const handleMouseMove = (e: React.MouseEvent) => { 21 | if (!ref.current) return; 22 | const { clientX, clientY } = e; 23 | const { left, top, width, height } = ref.current.getBoundingClientRect(); 24 | const x = clientX - (left + width / 2); 25 | const y = clientY - (top + height / 2); 26 | setPosition({ x: x / width * strength, y: y / height * strength }); 27 | }; 28 | 29 | const handleMouseLeave = () => { 30 | setPosition({ x: 0, y: 0 }); 31 | }; 32 | 33 | return ( 34 | 43 | {children} 44 | 45 | ); 46 | }; 47 | -------------------------------------------------------------------------------- /aura/components/Navigation.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { Menu, ShoppingBag } from 'lucide-react'; 3 | 4 | export const Navigation: React.FC = () => { 5 | const [scrolled, setScrolled] = useState(false); 6 | 7 | useEffect(() => { 8 | const handleScroll = () => { 9 | setScrolled(window.scrollY > 50); 10 | }; 11 | window.addEventListener('scroll', handleScroll); 12 | return () => window.removeEventListener('scroll', handleScroll); 13 | }, []); 14 | 15 | return ( 16 | 32 | ); 33 | }; -------------------------------------------------------------------------------- /forge/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import Lenis from '@studio-freight/lenis'; 3 | import Hero from './components/Hero'; 4 | import Philosophy from './components/Philosophy'; 5 | import Collections from './components/Collections'; 6 | import Materials from './components/Materials'; 7 | import Craftsmanship from './components/Craftsmanship'; 8 | import Legacy from './components/Legacy'; 9 | import Footer from './components/Footer'; 10 | 11 | const App: React.FC = () => { 12 | 13 | useEffect(() => { 14 | // Initialize Smooth Scroll with "Heavy" settings 15 | const lenis = new Lenis({ 16 | duration: 1.5, 17 | easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // Exponential ease out 18 | direction: 'vertical', 19 | gestureDirection: 'vertical', 20 | smooth: true, 21 | mouseMultiplier: 1, 22 | smoothTouch: false, 23 | touchMultiplier: 2, 24 | }); 25 | 26 | // RAF loop 27 | function raf(time: number) { 28 | lenis.raf(time); 29 | requestAnimationFrame(raf); 30 | } 31 | requestAnimationFrame(raf); 32 | 33 | return () => { 34 | lenis.destroy(); 35 | }; 36 | }, []); 37 | 38 | return ( 39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 |
47 |
48 | ); 49 | }; 50 | 51 | export default App; -------------------------------------------------------------------------------- /arche/components/SmoothScroll.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from 'react'; 2 | import Lenis from '@studio-freight/lenis'; 3 | import { gsap } from 'gsap'; 4 | import { ScrollTrigger } from 'gsap/ScrollTrigger'; 5 | 6 | gsap.registerPlugin(ScrollTrigger); 7 | 8 | interface SmoothScrollProps { 9 | children: React.ReactNode; 10 | } 11 | 12 | const SmoothScroll: React.FC = ({ children }) => { 13 | const lenisRef = useRef(null); 14 | 15 | useEffect(() => { 16 | const lenis = new Lenis({ 17 | duration: 1.2, 18 | easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), 19 | orientation: 'vertical', 20 | gestureOrientation: 'vertical', 21 | smoothWheel: true, 22 | syncTouch: true, 23 | touchMultiplier: 2, 24 | }); 25 | 26 | lenisRef.current = lenis; 27 | 28 | // Connect Lenis to GSAP ScrollTrigger 29 | lenis.on('scroll', ScrollTrigger.update); 30 | 31 | // Create a stable reference for the ticker callback 32 | const update = (time: number) => { 33 | lenis.raf(time * 1000); 34 | }; 35 | 36 | // Add listener 37 | gsap.ticker.add(update); 38 | 39 | // Disable lag smoothing in GSAP to prevent jumps during smooth scrolling 40 | gsap.ticker.lagSmoothing(0); 41 | 42 | return () => { 43 | // Cleanup: Remove the EXACT same listener function 44 | gsap.ticker.remove(update); 45 | lenis.destroy(); 46 | }; 47 | }, []); 48 | 49 | return
{children}
; 50 | }; 51 | 52 | export default SmoothScroll; -------------------------------------------------------------------------------- /aura/sections/Philosophy.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from 'react'; 2 | import gsap from 'gsap'; 3 | import { ScrollTrigger } from 'gsap/ScrollTrigger'; 4 | 5 | gsap.registerPlugin(ScrollTrigger); 6 | 7 | export const Philosophy: React.FC = () => { 8 | const sectionRef = useRef(null); 9 | const textRef = useRef(null); 10 | 11 | useEffect(() => { 12 | const ctx = gsap.context(() => { 13 | gsap.fromTo(textRef.current, 14 | { 15 | filter: "blur(20px)", 16 | opacity: 0.2, 17 | y: 50 18 | }, 19 | { 20 | filter: "blur(0px)", 21 | opacity: 1, 22 | y: 0, 23 | color: "#4A4A4A", 24 | duration: 1, 25 | scrollTrigger: { 26 | trigger: sectionRef.current, 27 | start: "top 70%", 28 | end: "center center", 29 | scrub: 1, 30 | } 31 | } 32 | ); 33 | }, sectionRef); 34 | 35 | return () => ctx.revert(); 36 | }, []); 37 | 38 | return ( 39 |
40 |
41 |

42 | Beauty that reveals your inner luminosity.
43 | Crafted in light. 44 |

45 |
46 |
47 | ); 48 | }; -------------------------------------------------------------------------------- /nexus/components/Navbar.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { cn } from '../utils/cn'; 3 | 4 | const Navbar: React.FC = () => { 5 | const [scrolled, setScrolled] = useState(false); 6 | 7 | useEffect(() => { 8 | const handleScroll = () => setScrolled(window.scrollY > 50); 9 | window.addEventListener('scroll', handleScroll); 10 | return () => window.removeEventListener('scroll', handleScroll); 11 | }, []); 12 | 13 | return ( 14 | 35 | ); 36 | }; 37 | 38 | export default Navbar; -------------------------------------------------------------------------------- /chronos/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { Suspense, useState, useEffect } from 'react'; 2 | import { Canvas } from '@react-three/fiber'; 3 | import { ScrollControls } from '@react-three/drei'; 4 | import { Experience } from './components/Experience'; 5 | import { Overlay } from './components/Overlay'; 6 | import { CustomCursor, Loader } from './components/UI'; 7 | import { THEME } from './types'; 8 | 9 | const App: React.FC = () => { 10 | const [loaded, setLoaded] = useState(false); 11 | 12 | // Simulate asset loading for the "Dimensional Rift" effect 13 | useEffect(() => { 14 | const timer = setTimeout(() => { 15 | setLoaded(true); 16 | }, 2500); 17 | return () => clearTimeout(timer); 18 | }, []); 19 | 20 | return ( 21 | <> 22 | 23 | {!loaded && } 24 | 25 |
26 | 32 | 33 | 34 | 35 | {/* ScrollControls manages the virtual scroll and passes data to Experience */} 36 | 37 | 38 | 39 | 40 | 41 | 42 |
43 | 44 | ); 45 | }; 46 | 47 | export default App; -------------------------------------------------------------------------------- /velocite/components/Manifesto.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { motion, useScroll, useVelocity, useSpring, useTransform } from 'framer-motion'; 3 | 4 | export const Manifesto: React.FC = () => { 5 | const { scrollY } = useScroll(); 6 | const scrollVelocity = useVelocity(scrollY); 7 | const smoothVelocity = useSpring(scrollVelocity, { damping: 50, stiffness: 400 }); 8 | const skewX = useTransform(smoothVelocity, [-2000, 2000], [-30, 30]); 9 | 10 | // Color shift logic based on viewport position (simplified approximation via scroll) 11 | const textColor = useTransform(scrollY, [800, 1400], ["#FFFFFF", "#00F0FF"]); 12 | 13 | return ( 14 |
15 |
16 | 17 | 21 | Silence is the
22 | new sound
23 | of speed. 24 | 25 | 26 | 27 |
28 |

29 | / MANIFESTO_V1.0
30 | WE DO NOT BREAK THE SOUND BARRIER. WE ERASE IT. 31 |

32 |
01
33 |
34 |
35 |
36 | ); 37 | }; -------------------------------------------------------------------------------- /forge/services/geminiService.ts: -------------------------------------------------------------------------------- 1 | import { GoogleGenAI, Chat, GenerateContentResponse } from "@google/genai"; 2 | import { ChatMessage, ChatRole } from "../types"; 3 | 4 | const API_KEY = process.env.API_KEY || ''; 5 | 6 | // Initialize Gemini 7 | let ai: GoogleGenAI | null = null; 8 | 9 | try { 10 | if (API_KEY) { 11 | ai = new GoogleGenAI({ apiKey: API_KEY }); 12 | } else { 13 | console.warn("Gemini API Key is missing. Chat features will not work."); 14 | } 15 | } catch (error) { 16 | console.error("Failed to initialize Gemini:", error); 17 | } 18 | 19 | const SYSTEM_INSTRUCTION = ` 20 | You are "The Artisan," a master blacksmith and chef with 50 years of experience. 21 | Your tone is gruff but warm, authoritative, and deeply knowledgeable about metallurgy, cooking science, and history. 22 | You speak in metaphors related to fire, weight, and patience. 23 | You represent the brand "Forge". 24 | Keep your responses concise (under 80 words) but impactful. 25 | Do not act like a robot. Act like a person covered in soot and flour. 26 | `; 27 | 28 | export const createChat = (): Chat | null => { 29 | if (!ai) return null; 30 | 31 | return ai.chats.create({ 32 | model: 'gemini-2.5-flash', 33 | config: { 34 | systemInstruction: SYSTEM_INSTRUCTION, 35 | temperature: 0.7, 36 | }, 37 | }); 38 | }; 39 | 40 | export const sendMessage = async (chat: Chat, message: string): Promise => { 41 | try { 42 | const response: GenerateContentResponse = await chat.sendMessage({ message }); 43 | return response.text || "The forge is silent... (No response)"; 44 | } catch (error) { 45 | console.error("Error sending message to Gemini:", error); 46 | return "The fire has dimmed momentarily. Try again."; 47 | } 48 | }; -------------------------------------------------------------------------------- /chronos/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CHRONOS | Temporal Architecture 7 | 8 | 9 | 10 | 11 | 25 | 39 | 40 | 41 | 42 |
43 | 44 | 45 | -------------------------------------------------------------------------------- /forge/components/Philosophy.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react'; 2 | import { motion, useScroll, useTransform } from 'framer-motion'; 3 | 4 | const Philosophy: React.FC = () => { 5 | const containerRef = useRef(null); 6 | const { scrollYProgress } = useScroll({ 7 | target: containerRef, 8 | offset: ["start end", "end start"] 9 | }); 10 | 11 | // Color interpolation from Clean Brass -> Aged Patina 12 | const textColor = useTransform( 13 | scrollYProgress, 14 | [0.2, 0.8], 15 | ["#B8860B", "#2B2B2B"] 16 | ); 17 | 18 | // Texture opacity simulates rust/patina appearing 19 | const textureOpacity = useTransform(scrollYProgress, [0.2, 0.7], [0, 0.8]); 20 | 21 | return ( 22 |
23 | 24 | 28 |

29 | "We craft tools meant to last generations." 30 |

31 | 32 | {/* Texture Overlay constrained to text area roughly (visual trick) */} 33 | 37 | 38 | 39 | {/* Background grit */} 40 |
41 | 42 |
43 | ); 44 | }; 45 | 46 | export default Philosophy; -------------------------------------------------------------------------------- /chromaflow/components/CustomCursor.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import { motion } from 'framer-motion'; 3 | 4 | const CustomCursor: React.FC = () => { 5 | const [position, setPosition] = useState({ x: 0, y: 0 }); 6 | const [isHovering, setIsHovering] = useState(false); 7 | 8 | useEffect(() => { 9 | const updateCursor = (e: MouseEvent) => { 10 | setPosition({ x: e.clientX, y: e.clientY }); 11 | 12 | const target = e.target as HTMLElement; 13 | // Check if hovering over interactive elements 14 | const isInteractive = target.closest('a, button, .interactive-target'); 15 | setIsHovering(!!isInteractive); 16 | }; 17 | 18 | window.addEventListener('mousemove', updateCursor); 19 | return () => window.removeEventListener('mousemove', updateCursor); 20 | }, []); 21 | 22 | return ( 23 | <> 24 | {/* Main Cursor Dot */} 25 | 34 | 35 | {/* Aura / Follower */} 36 | 50 | 51 | ); 52 | }; 53 | 54 | export default CustomCursor; 55 | -------------------------------------------------------------------------------- /aelia/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import { Hero } from './components/Hero'; 3 | import { Philosophy } from './components/Philosophy'; 4 | import { MaterialStory } from './components/MaterialStory'; 5 | import { CollectionShowcase } from './components/CollectionShowcase'; 6 | import { EthicalSourcing } from './components/EthicalSourcing'; 7 | import { UGCGrid } from './components/UGCGrid'; 8 | import { Footer } from './components/Footer'; 9 | import { MagneticButton } from './components/ui/MagneticButton'; 10 | import { ShoppingBag, Menu } from 'lucide-react'; 11 | 12 | const App: React.FC = () => { 13 | 14 | // Custom cursor logic could go here, but focusing on the requested interactions 15 | 16 | return ( 17 |
18 | {/* Navigation / Header */} 19 | 37 | 38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 |
46 | 47 |
48 |
49 | ); 50 | }; 51 | 52 | export default App; 53 | -------------------------------------------------------------------------------- /aelia/components/Philosophy.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react'; 2 | import { motion, useScroll, useTransform } from 'framer-motion'; 3 | 4 | export const Philosophy: React.FC = () => { 5 | const containerRef = useRef(null); 6 | const { scrollYProgress } = useScroll({ 7 | target: containerRef, 8 | offset: ["start end", "end start"] 9 | }); 10 | 11 | const words = "Crafted to outlive the trends. Designed to acquire character. True luxury is not about the newness of the object, but the story it gathers with time.".split(" "); 12 | 13 | return ( 14 |
15 |
16 |

17 | {words.map((word, i) => { 18 | const start = i / words.length; 19 | const end = start + (1 / words.length); 20 | // Use a specific Hook call for each word to create the staggered fill effect 21 | // eslint-disable-next-line react-hooks/rules-of-hooks 22 | const color = useTransform(scrollYProgress, [start, end], ["#D9D3CC", "#4A3730"]); 23 | 24 | return ( 25 | 30 | {word} 31 | 32 | ); 33 | })} 34 |

35 | 36 | 43 |
44 |

The AELIA Philosophy

45 | 46 |
47 |
48 | ); 49 | }; 50 | -------------------------------------------------------------------------------- /chromaflow/components/Philosophy.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, useEffect } from 'react'; 2 | import gsap from 'gsap'; 3 | import { ScrollTrigger } from 'gsap/ScrollTrigger'; 4 | 5 | gsap.registerPlugin(ScrollTrigger); 6 | 7 | const Philosophy: React.FC = () => { 8 | const containerRef = useRef(null); 9 | const textRef = useRef(null); 10 | 11 | useEffect(() => { 12 | if (!textRef.current || !containerRef.current) return; 13 | 14 | const chars = textRef.current.querySelectorAll('.char'); 15 | 16 | // Animate colors across the spectrum based on scroll 17 | gsap.to(chars, { 18 | scrollTrigger: { 19 | trigger: containerRef.current, 20 | start: "top bottom", 21 | end: "bottom top", 22 | scrub: 1, 23 | }, 24 | color: (i) => { 25 | // Pseudo-random gradient mapping 26 | const colors = ['#007BFF', '#FF008C', '#7CFC00', '#8A2BE2']; 27 | return colors[i % colors.length]; 28 | }, 29 | letterSpacing: "0.05em", // Expand subtly 30 | stagger: 0.01, 31 | ease: "none" 32 | }); 33 | 34 | }, []); 35 | 36 | const text = "Where algorithms paint with light."; 37 | 38 | return ( 39 |
40 |
41 |

42 | {text.split('').map((char, i) => ( 43 | 44 | {char === ' ' ? '\u00A0' : char} 45 | 46 | ))} 47 |

48 | 49 |
50 |

51 | We don't just design visuals; we code living ecosystems. Our work bridges the gap between digital precision and organic chaos. 52 |

53 |
54 |
55 |
56 | ); 57 | }; 58 | 59 | export default Philosophy; 60 | -------------------------------------------------------------------------------- /forge/components/Legacy.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { TIMELINE } from '../constants'; 3 | 4 | const Legacy: React.FC = () => { 5 | return ( 6 |
7 |
8 | {/* Center Line */} 9 |
10 | 11 |
12 | {TIMELINE.map((event, index) => { 13 | const isEven = index % 2 === 0; 14 | return ( 15 |
16 | 17 | {/* Content Side */} 18 |
19 | 20 | {event.year} 21 | 22 |

{event.title}

23 |

{event.description}

24 |
25 | 26 | {/* Dot on Line */} 27 |
28 | 29 | {/* Image Side (Optional) */} 30 |
31 | {event.image && ( 32 |
33 | {event.title} 34 |
35 | )} 36 |
37 | 38 |
39 | ); 40 | })} 41 |
42 |
43 |
44 | ); 45 | }; 46 | 47 | export default Legacy; -------------------------------------------------------------------------------- /arche/components/Philosophy.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react'; 2 | import { motion, useScroll, useTransform } from 'framer-motion'; 3 | 4 | const Philosophy: React.FC = () => { 5 | const containerRef = useRef(null); 6 | const { scrollYProgress } = useScroll({ 7 | target: containerRef, 8 | offset: ["start 80%", "end center"] 9 | }); 10 | 11 | // Use clip-path inset to reveal the text from left to right 12 | // This prevents the text from re-wrapping (reflowing) as it would if we animated width 13 | const clipPath = useTransform(scrollYProgress, [0, 1], ["inset(0% 100% 0% 0%)", "inset(0% 0% 0% 0%)"]); 14 | 15 | return ( 16 |
17 |
18 |
19 | {/* Outlined Layer (Background) */} 20 |

21 | We build spaces that breathe with the rhythm of nature. 22 |

23 | 24 | {/* Filled Layer (Foreground with Mask) */} 25 | 29 |

30 | We build spaces that breathe with the rhythm of nature. 31 |

32 | 33 |
34 | 35 |
36 |

37 | Our approach blends the brutal honesty of raw materials with the ephemeral qualities of light and shadow. Architecture is not static; it is a living entity. 38 |

39 |
40 |
41 | 42 | 47 |
48 | ); 49 | }; 50 | 51 | export default Philosophy; -------------------------------------------------------------------------------- /chromaflow/components/Footer.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { motion } from 'framer-motion'; 3 | 4 | const Footer: React.FC = () => { 5 | return ( 6 |
7 | {/* Animated Gradient Background */} 8 |
11 | 18 | 19 |
20 |

21 | Ready to light it up? 22 |

23 | 24 | 29 | Illuminate Your Vision 30 | 31 |
32 | 33 |
34 |
35 |

San Francisco • Tokyo • Berlin

36 |
37 |
38 |
39 |

Powered by Creativity & Code

40 |
41 |
42 | Instagram 43 | LinkedIn 44 |
45 |
46 |
47 | ); 48 | }; 49 | 50 | export default Footer; 51 | -------------------------------------------------------------------------------- /nexus/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Nexus | Intelligent Workflow 7 | 8 | 9 | 10 | 11 | 32 | 47 | 60 | 61 | 62 | 63 |
64 | 65 | 66 | -------------------------------------------------------------------------------- /aura/constants.ts: -------------------------------------------------------------------------------- 1 | import { Product, Ingredient, JournalEntry } from './types'; 2 | 3 | export const COLORS = { 4 | white: '#FFFFFF', 5 | snow: '#FAFAFA', 6 | charcoal: '#4A4A4A', 7 | blush: '#F7E7E6', 8 | mint: '#E8F5E9', 9 | vapor: '#F0F0F0', 10 | }; 11 | 12 | export const PRODUCTS: Product[] = [ 13 | { 14 | id: 1, 15 | name: "Luminous Dew Serum", 16 | price: "$85", 17 | image: "https://picsum.photos/seed/aura1/600/800", 18 | description: "Hydration captured in light." 19 | }, 20 | { 21 | id: 2, 22 | name: "Cloud Barrier Cream", 23 | price: "$68", 24 | image: "https://picsum.photos/seed/aura2/600/800", 25 | description: "Weightless protection." 26 | }, 27 | { 28 | id: 3, 29 | name: "Botanical Essence Mist", 30 | price: "$42", 31 | image: "https://picsum.photos/seed/aura3/600/800", 32 | description: "A gentle awakening." 33 | }, 34 | { 35 | id: 4, 36 | name: "Moonlight Recovery Oil", 37 | price: "$95", 38 | image: "https://picsum.photos/seed/aura4/600/800", 39 | description: "Repair while you dream." 40 | } 41 | ]; 42 | 43 | export const INGREDIENTS: Ingredient[] = [ 44 | { 45 | id: 1, 46 | name: "White Tea Extract", 47 | description: "Harvested at first light.", 48 | benefit: "Potent Antioxidant Protection", 49 | image: "https://picsum.photos/seed/tea/800/1200" 50 | }, 51 | { 52 | id: 2, 53 | name: "Hyaluronic Acid", 54 | description: "Pure molecular hydration.", 55 | benefit: "Deep Plumping & Retention", 56 | image: "https://picsum.photos/seed/water/800/1200" 57 | }, 58 | { 59 | id: 3, 60 | name: "Rose Quartz", 61 | description: "Mineral essence.", 62 | benefit: "Radiance & Circulation", 63 | image: "https://picsum.photos/seed/crystal/800/1200" 64 | } 65 | ]; 66 | 67 | export const JOURNAL_ENTRIES: JournalEntry[] = [ 68 | { id: 1, title: "Rituals of Morning Light", category: "Wellness", image: "https://picsum.photos/seed/light/600/400" }, 69 | { id: 2, title: "The Science of Hydration", category: "Education", image: "https://picsum.photos/seed/science/600/400" }, 70 | { id: 3, title: "Stillness in Motion", category: "Mindfulness", image: "https://picsum.photos/seed/move/600/400" }, 71 | { id: 4, title: "Botanical Intelligence", category: "Nature", image: "https://picsum.photos/seed/plant/600/400" }, 72 | ]; -------------------------------------------------------------------------------- /arche/components/Navigation.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useRef } from 'react'; 2 | import { motion, useMotionValue, useSpring, useTransform } from 'framer-motion'; 3 | 4 | const MagneticButton = ({ children, className }: { children?: React.ReactNode; className?: string }) => { 5 | const ref = useRef(null); 6 | const x = useMotionValue(0); 7 | const y = useMotionValue(0); 8 | 9 | const springConfig = { damping: 15, stiffness: 150, mass: 0.1 }; 10 | const springX = useSpring(x, springConfig); 11 | const springY = useSpring(y, springConfig); 12 | 13 | const handleMouseMove = (e: React.MouseEvent) => { 14 | const element = ref.current; 15 | if (element) { 16 | const { left, top, width, height } = element.getBoundingClientRect(); 17 | const centerX = left + width / 2; 18 | const centerY = top + height / 2; 19 | x.set((e.clientX - centerX) * 0.3); // Magnetic pull strength 20 | y.set((e.clientY - centerY) * 0.3); 21 | } 22 | }; 23 | 24 | const handleMouseLeave = () => { 25 | x.set(0); 26 | y.set(0); 27 | }; 28 | 29 | return ( 30 | 37 | {children} 38 | 39 | ); 40 | }; 41 | 42 | const Navigation: React.FC = () => { 43 | return ( 44 | 59 | ); 60 | }; 61 | 62 | export default Navigation; -------------------------------------------------------------------------------- /aura/sections/Hero.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef, useState } from 'react'; 2 | import gsap from 'gsap'; 3 | 4 | export const Hero: React.FC = () => { 5 | const containerRef = useRef(null); 6 | const textRef = useRef(null); 7 | const rippleRef = useRef(null); 8 | const [mounted, setMounted] = useState(false); 9 | 10 | useEffect(() => { 11 | const ctx = gsap.context(() => { 12 | const tl = gsap.timeline(); 13 | 14 | // Ripple Animation 15 | tl.to(rippleRef.current, { 16 | scale: 1, 17 | opacity: 0, 18 | duration: 2.5, 19 | ease: "power2.out", 20 | onStart: () => { 21 | // In a real app, play sound here 22 | } 23 | }); 24 | 25 | // Text Fade Up 26 | tl.fromTo(textRef.current, 27 | { y: 50, opacity: 0, filter: "blur(10px)" }, 28 | { y: 0, opacity: 1, filter: "blur(0px)", duration: 1.5, ease: "power2.out" }, 29 | "-=1.5" 30 | ); 31 | 32 | setMounted(true); 33 | }, containerRef); 34 | 35 | return () => ctx.revert(); 36 | }, []); 37 | 38 | return ( 39 |
40 | {/* Ripple Element */} 41 |
46 |
50 | 51 | {/* Main Content */} 52 |
53 |

AURA

54 |

Botanical Skincare

55 |
56 | 57 | 63 |
64 | ); 65 | }; -------------------------------------------------------------------------------- /velocite/constants.ts: -------------------------------------------------------------------------------- 1 | import { CarModel, Feature, TechComponent } from './types'; 2 | 3 | export const CAR_MODELS: CarModel[] = [ 4 | { 5 | id: 'v-one', 6 | name: 'VELOCITÉ V1', 7 | tagline: 'THE PHANTOM', 8 | specs: { acceleration: '1.9s', range: '600mi', hp: '1200' }, 9 | image: 'https://picsum.photos/800/400?grayscale&blur=1', 10 | }, 11 | { 12 | id: 'v-gt', 13 | name: 'VELOCITÉ GT', 14 | tagline: 'CORNER KING', 15 | specs: { acceleration: '2.4s', range: '520mi', hp: '950' }, 16 | image: 'https://picsum.photos/800/401?grayscale&blur=1', 17 | }, 18 | { 19 | id: 'v-suv', 20 | name: 'VELOCITÉ X', 21 | tagline: 'FORCE OF NATURE', 22 | specs: { acceleration: '3.1s', range: '580mi', hp: '800' }, 23 | image: 'https://picsum.photos/800/402?grayscale&blur=1', 24 | }, 25 | { 26 | id: 'v-hyper', 27 | name: 'VELOCITÉ ZERO', 28 | tagline: 'ABSOLUTE ZERO', 29 | specs: { acceleration: '1.7s', range: '450mi', hp: '1600' }, 30 | image: 'https://picsum.photos/800/403?grayscale&blur=1', 31 | }, 32 | ]; 33 | 34 | export const TECH_COMPONENTS: TechComponent[] = [ 35 | { 36 | id: 'battery', 37 | name: 'SOLID STATE CELL', 38 | description: 'Next-gen energy density with zero degradation.', 39 | specs: ['Density: 900Wh/L', 'Charge: 5min to 80%', 'Temp: -40°C to 80°C'], 40 | }, 41 | { 42 | id: 'motor', 43 | name: 'MAGNETIC LEVITATION MOTOR', 44 | description: 'Frictionless propulsion system.', 45 | specs: ['RPM: 30,000', 'Torque: 2000Nm', 'Weight: 25kg'], 46 | }, 47 | { 48 | id: 'chassis', 49 | name: 'CARBON NANO-WEAVE', 50 | description: 'Structural integrity meets featherlight mass.', 51 | specs: ['Tensile: 50x Steel', 'Weight: 800kg Total', 'Flex: Active'], 52 | }, 53 | ]; 54 | 55 | export const FEATURES: Feature[] = [ 56 | { 57 | id: 'pilot', 58 | title: 'NEURAL PILOT', 59 | description: 'Level 5 autonomy powered by quantum processing.', 60 | iconPath: 'M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z M12 6v6l4 2', 61 | }, 62 | { 63 | id: 'charge', 64 | title: 'INDUCTIVE LINK', 65 | description: 'Wireless charging at highway speeds.', 66 | iconPath: 'M13 2L3 14h9l-1 8 10-12h-9l1-8z', 67 | }, 68 | { 69 | id: 'connect', 70 | title: 'HIVE MIND', 71 | description: 'Real-time traffic prediction via fleet learning.', 72 | iconPath: 'M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z', 73 | }, 74 | ]; -------------------------------------------------------------------------------- /velocite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Velocité | Hyper-Electric 7 | 8 | 31 | 32 | 33 | 34 | 50 | 62 | 63 | 64 | 65 |
66 | 67 | 68 | -------------------------------------------------------------------------------- /nexus/components/Philosophy.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react'; 2 | import { motion, useScroll, useTransform, useMotionValueEvent } from 'framer-motion'; 3 | 4 | const Philosophy: React.FC = () => { 5 | const containerRef = useRef(null); 6 | const { scrollYProgress } = useScroll({ 7 | target: containerRef, 8 | offset: ["start end", "end start"], 9 | }); 10 | 11 | const [displayText, setDisplayText] = React.useState(""); 12 | const targetText = "COMPLEX PROJECTS REQUIRE INTELLIGENT SIMPLICITY."; 13 | const chars = "01010101XYZ#@!&%"; 14 | 15 | useMotionValueEvent(scrollYProgress, "change", (latest) => { 16 | // Start decoding when element is in view (approx 0.2 to 0.6 of scroll progress relative to viewport) 17 | // We want the effect to finish by the time it's centered 18 | const progress = Math.min(Math.max((latest - 0.2) * 2.5, 0), 1); 19 | 20 | const length = Math.floor(targetText.length * progress); 21 | const revealed = targetText.substring(0, length); 22 | 23 | // Generate scrambled remainder 24 | let scrambled = ""; 25 | for (let i = length; i < targetText.length; i++) { 26 | // preserve spaces for layout stability 27 | if (targetText[i] === ' ') scrambled += ' '; 28 | else scrambled += chars[Math.floor(Math.random() * chars.length)]; 29 | } 30 | 31 | setDisplayText(revealed + scrambled); 32 | }); 33 | 34 | return ( 35 |
36 |
37 |

38 | {displayText.split("").map((char, index) => ( 39 | 40 | {char} 41 | 42 | ))} 43 |

44 | 45 | 49 |

50 | Data shouldn't be noise. Nexus decodes your team's workflow into a coherent, actionable signal. 51 |

52 | 53 |
54 |
55 | ); 56 | }; 57 | 58 | export default Philosophy; -------------------------------------------------------------------------------- /arche/components/Journal.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react'; 2 | import { motion, useScroll, useTransform } from 'framer-motion'; 3 | import { JOURNAL } from '../constants'; 4 | import { JournalEntry } from '../types'; 5 | 6 | const EntryCard: React.FC<{ entry: JournalEntry }> = ({ entry }) => ( 7 |
8 | {entry.type === 'image' ? ( 9 |
10 |
11 | Journal 12 |

{entry.date}

13 |
14 | ) : ( 15 |
16 |

"{entry.content}"

17 |

— {entry.author}

18 |
19 | )} 20 |
21 | ); 22 | 23 | const Journal: React.FC = () => { 24 | const containerRef = useRef(null); 25 | const { scrollYProgress } = useScroll({ 26 | target: containerRef, 27 | offset: ["start end", "end start"] 28 | }); 29 | 30 | const y1 = useTransform(scrollYProgress, [0, 1], [0, -50]); 31 | const y2 = useTransform(scrollYProgress, [0, 1], [100, -150]); // Faster scroll for parallax 32 | 33 | const leftColumn = JOURNAL.filter((_, i) => i % 2 === 0); 34 | const rightColumn = JOURNAL.filter((_, i) => i % 2 !== 0); 35 | 36 | return ( 37 |
38 |
39 |
40 |

The Journal

41 |
42 |
43 | 44 |
45 | 46 | {leftColumn.map(entry => )} 47 | 48 | 49 | {rightColumn.map(entry => )} 50 | 51 |
52 |
53 |
54 | ); 55 | }; 56 | 57 | export default Journal; -------------------------------------------------------------------------------- /chronos/components/UI.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | 3 | export const CustomCursor: React.FC = () => { 4 | const [position, setPosition] = useState({ x: 0, y: 0 }); 5 | const [hidden, setHidden] = useState(false); 6 | 7 | useEffect(() => { 8 | const addEventListeners = () => { 9 | document.addEventListener("mousemove", onMouseMove); 10 | document.addEventListener("mouseenter", onMouseEnter); 11 | document.addEventListener("mouseleave", onMouseLeave); 12 | }; 13 | 14 | const removeEventListeners = () => { 15 | document.removeEventListener("mousemove", onMouseMove); 16 | document.removeEventListener("mouseenter", onMouseEnter); 17 | document.removeEventListener("mouseleave", onMouseLeave); 18 | }; 19 | 20 | const onMouseMove = (e: MouseEvent) => { 21 | setPosition({ x: e.clientX, y: e.clientY }); 22 | }; 23 | 24 | const onMouseLeave = () => { 25 | setHidden(true); 26 | }; 27 | 28 | const onMouseEnter = () => { 29 | setHidden(false); 30 | }; 31 | 32 | addEventListeners(); 33 | return () => removeEventListeners(); 34 | }, []); 35 | 36 | return ( 37 |
43 | {/* Crosshair Design */} 44 |
45 |
46 |
47 |
48 | ); 49 | }; 50 | 51 | export const Loader: React.FC = () => { 52 | return ( 53 |
54 |
55 | {/* Dimensional Rift Effect */} 56 |
57 |
58 |

INITIALIZING

59 |
LOADING ASSETS...
60 |
61 |
62 | ) 63 | } -------------------------------------------------------------------------------- /forge/constants.ts: -------------------------------------------------------------------------------- 1 | import { Product, Material, TimelineEvent } from './types'; 2 | 3 | export const COLLECTIONS: Product[] = [ 4 | { 5 | id: 'c1', 6 | name: 'The 12" Skillet', 7 | weight: 3.2, 8 | material: 'Cast Iron', 9 | image: 'https://picsum.photos/id/225/600/600', 10 | description: 'Heirloom quality, pre-seasoned with flax oil.' 11 | }, 12 | { 13 | id: 'c2', 14 | name: 'Saucier Copper', 15 | weight: 1.8, 16 | material: 'Aged Copper', 17 | image: 'https://picsum.photos/id/366/600/600', 18 | description: 'Rapid heat conduction with a tin lining.' 19 | }, 20 | { 21 | id: 'c3', 22 | name: 'Carbon Wok', 23 | weight: 2.1, 24 | material: 'Carbon Steel', 25 | image: 'https://picsum.photos/id/1060/600/600', 26 | description: 'Hand-hammered for the perfect sear.' 27 | }, 28 | { 29 | id: 'c4', 30 | name: 'Dutch Oven', 31 | weight: 5.4, 32 | material: 'Enameled Iron', 33 | image: 'https://picsum.photos/id/102/600/600', 34 | description: 'Slow cooking perfection, built like a tank.' 35 | } 36 | ]; 37 | 38 | export const MATERIALS: Material[] = [ 39 | { 40 | id: 'm1', 41 | name: 'Carbon Steel', 42 | temp: '1400°C', 43 | process: 'Forged & Folded', 44 | image: 'https://picsum.photos/id/1006/800/800', 45 | description: 'Responsive to heat, practically indestructible.' 46 | }, 47 | { 48 | id: 'm2', 49 | name: 'Oak Heartwood', 50 | temp: '20°C', 51 | process: 'Carved & Oiled', 52 | image: 'https://picsum.photos/id/1008/800/800', 53 | description: 'Aged timber handles that cool rapidly.' 54 | }, 55 | { 56 | id: 'm3', 57 | name: 'Raw Copper', 58 | temp: '1085°C', 59 | process: 'Spun & Hammered', 60 | image: 'https://picsum.photos/id/252/800/800', 61 | description: 'The ultimate conductor. Reactive and alive.' 62 | } 63 | ]; 64 | 65 | export const TIMELINE: TimelineEvent[] = [ 66 | { 67 | year: '1892', 68 | title: 'The First Spark', 69 | description: 'Foundry established in the smoky valleys of Pittsburgh.', 70 | image: 'https://picsum.photos/id/1011/400/300' 71 | }, 72 | { 73 | year: '1924', 74 | title: 'War & Iron', 75 | description: 'Production shifts to essential heavy metals for the effort.', 76 | }, 77 | { 78 | year: '1968', 79 | title: 'The Copper Era', 80 | description: 'Introduction of the "Chef\'s Standard" copper line.', 81 | image: 'https://picsum.photos/id/250/400/300' 82 | }, 83 | { 84 | year: '2024', 85 | title: 'Digital Forge', 86 | description: 'Bringing heritage craft to the modern artisan.', 87 | } 88 | ]; -------------------------------------------------------------------------------- /aura/sections/Journal.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from 'react'; 2 | import gsap from 'gsap'; 3 | import { ScrollTrigger } from 'gsap/ScrollTrigger'; 4 | import { JOURNAL_ENTRIES } from '../constants'; 5 | 6 | gsap.registerPlugin(ScrollTrigger); 7 | 8 | export const Journal: React.FC = () => { 9 | const sectionRef = useRef(null); 10 | 11 | useEffect(() => { 12 | const ctx = gsap.context(() => { 13 | // Parallax effect for cards 14 | const cards = gsap.utils.toArray('.journal-card'); 15 | 16 | cards.forEach((card, i) => { 17 | const speed = parseFloat(card.dataset.speed || "1"); 18 | gsap.to(card, { 19 | y: -50 * speed, 20 | scrollTrigger: { 21 | trigger: sectionRef.current, 22 | start: "top bottom", 23 | end: "bottom top", 24 | scrub: 1.5 25 | } 26 | }); 27 | }); 28 | }, sectionRef); 29 | 30 | return () => ctx.revert(); 31 | }, []); 32 | 33 | return ( 34 |
35 |
36 |
37 |

The Journal

38 |

Notes on Light & Living

39 |
40 | 41 |
42 | {JOURNAL_ENTRIES.map((entry, index) => ( 43 |
48 |
49 | {entry.title} 54 |
55 |
56 | 57 | {entry.category} 58 |

{entry.title}

59 |
60 | ))} 61 |
62 |
63 |
64 | ); 65 | }; -------------------------------------------------------------------------------- /velocite/components/Circuit.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import { motion, useScroll, useSpring } from 'framer-motion'; 3 | 4 | const IMAGES = [ 5 | "https://picsum.photos/600/800?grayscale", 6 | "https://picsum.photos/600/400?grayscale", 7 | "https://picsum.photos/600/600?grayscale", 8 | "https://picsum.photos/600/500?grayscale", 9 | "https://picsum.photos/600/700?grayscale", 10 | "https://picsum.photos/600/450?grayscale", 11 | ]; 12 | 13 | export const Circuit: React.FC = () => { 14 | const { scrollY } = useScroll(); 15 | const [isScrolling, setIsScrolling] = useState(false); 16 | 17 | useEffect(() => { 18 | let timeout: ReturnType; 19 | const unsubscribe = scrollY.on("change", () => { 20 | setIsScrolling(true); 21 | clearTimeout(timeout); 22 | timeout = setTimeout(() => setIsScrolling(false), 150); 23 | }); 24 | return () => unsubscribe(); 25 | }, [scrollY]); 26 | 27 | return ( 28 |
29 |
30 |

THE CIRCUIT
LIFESTYLE & TELEMETRY

31 |
32 | 33 |
34 | {IMAGES.map((src, i) => ( 35 | 43 | {/* Image with Motion Blur Filter applied dynamically via style/class logic could go here, 44 | but simple inline style transition is performant */} 45 |
49 | {`Lifestyle 50 |
51 | 52 | {/* Overlay Info */} 53 |
54 | IMG_SEQ_{1024 + i} 55 |
56 | 57 | ))} 58 |
59 |
60 | ); 61 | }; -------------------------------------------------------------------------------- /aura/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Aura | Botanical Skincare 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 42 | 57 | 58 | 59 | 60 |
61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /forge/components/Hero.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react'; 2 | import { motion, useScroll, useTransform } from 'framer-motion'; 3 | 4 | const Hero: React.FC = () => { 5 | const containerRef = useRef(null); 6 | const { scrollYProgress } = useScroll({ 7 | target: containerRef, 8 | offset: ["start start", "end start"] 9 | }); 10 | 11 | const textScale = useTransform(scrollYProgress, [0, 0.5], [1, 1.5]); 12 | const textOpacity = useTransform(scrollYProgress, [0, 0.3], [1, 0]); 13 | const videoOpacity = useTransform(scrollYProgress, [0.1, 0.5], [0, 1]); 14 | const wipeX = useTransform(scrollYProgress, [0, 0.5], ["-100%", "0%"]); 15 | 16 | return ( 17 |
18 | 19 | {/* Sticky Container */} 20 |
21 | 22 | {/* Background Noise/Video Overlay */} 23 | 27 | {/* Simulate Video with Image for Demo */} 28 | Sparks flying 33 |
34 | 35 | 36 | {/* The Stamp Text */} 37 | 41 |

42 | FORGE 43 |

44 |

45 | Est. 1892 46 |

47 | 48 | 49 | {/* Wipe Effect */} 50 | 54 | 55 | {/* Scroll Indicator */} 56 | 60 | Scroll to Ignite 61 |
62 | 63 | 64 |
65 |
66 | ); 67 | }; 68 | 69 | export default Hero; -------------------------------------------------------------------------------- /arche/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Arché | Holistic Design Studio 7 | 8 | 9 | 10 | 11 | 34 | 64 | 78 | 79 | 80 | 81 |
82 | 83 | 84 | -------------------------------------------------------------------------------- /arche/constants.ts: -------------------------------------------------------------------------------- 1 | import { Project, Material, Service, JournalEntry } from './types'; 2 | 3 | export const PROJECTS: Project[] = [ 4 | { 5 | id: 1, 6 | title: "The Silent House", 7 | year: "2023", 8 | category: "Residential", 9 | image: "https://picsum.photos/seed/arche1/1600/1200" 10 | }, 11 | { 12 | id: 2, 13 | title: "Kyoto Pavilion", 14 | year: "2022", 15 | category: "Cultural", 16 | image: "https://picsum.photos/seed/arche2/1600/1200" 17 | }, 18 | { 19 | id: 3, 20 | title: "Brutal Cliffside", 21 | year: "2024", 22 | category: "Concept", 23 | image: "https://picsum.photos/seed/arche3/1600/1200" 24 | }, 25 | { 26 | id: 4, 27 | title: "Urban Sanctuary", 28 | year: "2023", 29 | category: "Commercial", 30 | image: "https://picsum.photos/seed/arche4/1600/1200" 31 | } 32 | ]; 33 | 34 | export const MATERIALS: Material[] = [ 35 | { 36 | id: "m1", 37 | name: "Raw Oak", 38 | origin: "French Alps", 39 | texture: "https://picsum.photos/seed/woodtext/800/800", 40 | description: "Sustainably harvested ancient timber with deep grain patterns." 41 | }, 42 | { 43 | id: "m2", 44 | name: "Roman Travertine", 45 | origin: "Tivoli, Italy", 46 | texture: "https://picsum.photos/seed/stonetext/800/800", 47 | description: "Unfilled surface emphasizing natural porosity and history." 48 | }, 49 | { 50 | id: "m3", 51 | name: "Belgian Linen", 52 | origin: "Flanders", 53 | texture: "https://picsum.photos/seed/linen/800/800", 54 | description: "Heavyweight, tactile fabric that softens acoustics." 55 | } 56 | ]; 57 | 58 | export const SERVICES: Service[] = [ 59 | { 60 | id: "s1", 61 | title: "Residential Architecture", 62 | description: "Crafting intimate spaces for living.", 63 | image: "https://picsum.photos/seed/interior/1200/800" 64 | }, 65 | { 66 | id: "s2", 67 | title: "Commercial Spaces", 68 | description: "Brand identities translated into volume.", 69 | image: "https://picsum.photos/seed/office/1200/800" 70 | }, 71 | { 72 | id: "s3", 73 | title: "Landscape Design", 74 | description: "Blurring the line between built and grown.", 75 | image: "https://picsum.photos/seed/garden/1200/800" 76 | } 77 | ]; 78 | 79 | export const JOURNAL: JournalEntry[] = [ 80 | { id: 1, type: 'image', content: "https://picsum.photos/seed/j1/600/800", date: "Oct 12" }, 81 | { id: 2, type: 'quote', content: "Architecture starts when you carefully put two bricks together. There it begins.", author: "Mies van der Rohe" }, 82 | { id: 3, type: 'image', content: "https://picsum.photos/seed/j2/600/600", date: "Sep 28" }, 83 | { id: 4, type: 'image', content: "https://picsum.photos/seed/j3/600/900", date: "Sep 15" }, 84 | { id: 5, type: 'quote', content: "Light creates ambience and feel of a place, as well as the expression of a structure.", author: "Le Corbusier" }, 85 | { id: 6, type: 'image', content: "https://picsum.photos/seed/j4/600/700", date: "Aug 02" }, 86 | ]; 87 | -------------------------------------------------------------------------------- /arche/components/Services.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { motion, AnimatePresence } from 'framer-motion'; 3 | import { SERVICES } from '../constants'; 4 | import { ArrowRight } from 'lucide-react'; 5 | 6 | const Services: React.FC = () => { 7 | const [hoveredService, setHoveredService] = useState(null); 8 | 9 | return ( 10 |
11 | 12 | {/* Background Image Reveal */} 13 |
14 | 15 | {hoveredService && ( 16 | s.id === hoveredService)?.image} 19 | initial={{ opacity: 0, scale: 0.95 }} 20 | animate={{ opacity: 1, scale: 1 }} 21 | exit={{ opacity: 0, scale: 1.05 }} 22 | transition={{ duration: 0.5 }} 23 | className="w-2/3 h-2/3 object-cover grayscale" 24 | /> 25 | )} 26 | 27 |
28 | 29 |
30 |

Our Expertise

31 | 32 |
33 | {SERVICES.map((service) => ( 34 | setHoveredService(service.id)} 37 | onMouseLeave={() => setHoveredService(null)} 38 | className="group border-t border-softgrey py-10 cursor-pointer flex flex-col md:flex-row justify-between items-baseline md:items-center relative transition-colors" 39 | > 40 |
41 | 0{SERVICES.indexOf(service) + 1} 42 |

{service.title}

43 |
44 | 45 |
46 |

{service.description}

47 |
48 | 49 |
50 |
51 | 52 | ))} 53 |
54 |
55 |
56 |
57 | ); 58 | }; 59 | 60 | export default Services; 61 | -------------------------------------------------------------------------------- /aelia/constants.ts: -------------------------------------------------------------------------------- 1 | import { SourcingStep, Material, Testimonial } from "./types"; 2 | 3 | export const BRAND_NAME = "AELIA"; 4 | 5 | export const MATERIALS: Material[] = [ 6 | { 7 | id: "m1", 8 | name: "Tuscan Vachetta", 9 | origin: "Santa Croce, Italy", 10 | image: "https://images.unsplash.com/photo-1550259114-ad7188f0a967?q=80&w=2080&auto=format&fit=crop", 11 | description: "Vegetable-tanned leather that develops a unique patina over time." 12 | }, 13 | { 14 | id: "m2", 15 | name: "Belgian Linen", 16 | origin: "Flanders, Belgium", 17 | image: "https://images.unsplash.com/photo-1598300056393-8dd33ecb4d28?q=80&w=2000&auto=format&fit=crop", 18 | description: "Unbleached, tightly woven linen lining for durability and breathability." 19 | }, 20 | { 21 | id: "m3", 22 | name: "Solid Brass", 23 | origin: "Osaka, Japan", 24 | image: "https://images.unsplash.com/photo-1572025442646-866d16c84a54?q=80&w=2070&auto=format&fit=crop", 25 | description: "Sand-cast hardware designed to age gracefully alongside the leather." 26 | } 27 | ]; 28 | 29 | export const SOURCING_STEPS: SourcingStep[] = [ 30 | { 31 | id: 1, 32 | title: "The Farm", 33 | location: "Auvergne, France", 34 | description: "Ethically raised cattle, free-roaming pastures, ensuring minimal grain scarring." 35 | }, 36 | { 37 | id: 2, 38 | title: "The Tannery", 39 | location: "Tuscany, Italy", 40 | description: "Six weeks of vegetable tanning using chestnut bark and natural oils." 41 | }, 42 | { 43 | id: 3, 44 | title: "The Atelier", 45 | location: "Ubrique, Spain", 46 | description: "Hand-stitched by third-generation artisans using traditional saddle stitching." 47 | }, 48 | { 49 | id: 4, 50 | title: "The Keeper", 51 | location: "You", 52 | description: "A blank canvas ready to acquire character through your journey." 53 | } 54 | ]; 55 | 56 | export const TESTIMONIALS: Testimonial[] = [ 57 | { 58 | id: "t1", 59 | author: "Elena R.", 60 | location: "Milan", 61 | image: "https://images.unsplash.com/photo-1548036328-c9fa89d128fa?q=80&w=2069&auto=format&fit=crop", 62 | text: "It feels less like a bag and more like an heirloom I haven't passed down yet." 63 | }, 64 | { 65 | id: "t2", 66 | author: "James H.", 67 | location: "London", 68 | image: "https://images.unsplash.com/photo-1544816155-12df9643f363?q=80&w=1920&auto=format&fit=crop", 69 | text: "The patina after six months is breathtaking. It tells the story of my travels." 70 | }, 71 | { 72 | id: "t3", 73 | author: "Sophia L.", 74 | location: "New York", 75 | image: "https://images.unsplash.com/photo-1445633760012-d748f6e70335?q=80&w=1920&auto=format&fit=crop", 76 | text: "Quiet luxury in its purest form. No logos, just quality." 77 | }, 78 | { 79 | id: "t4", 80 | author: "Marcus B.", 81 | location: "Berlin", 82 | image: "https://images.unsplash.com/photo-1559563458-52c69f835564?q=80&w=1920&auto=format&fit=crop", 83 | text: "The smell of the leather upon opening the box... unforgettable." 84 | } 85 | ]; 86 | -------------------------------------------------------------------------------- /forge/components/Craftsmanship.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { motion } from 'framer-motion'; 3 | 4 | const STEPS = [ 5 | { id: 1, title: "Heat & Strike", desc: "Raw ingots are heated to 1200°C and struck by a 5-ton drop hammer." }, 6 | { id: 2, title: "Rough Grinding", desc: "Edges are deburred and the primary shape is refined by hand." }, 7 | { id: 3, title: "Seasoning", desc: "Layers of flax oil are baked on for 8 hours to create the initial patina." }, 8 | { id: 4, title: "Final Polish", desc: "Handles are buffed and brass rivets are set with precision." } 9 | ]; 10 | 11 | const Craftsmanship: React.FC = () => { 12 | const [activeStep, setActiveStep] = useState(null); 13 | 14 | return ( 15 |
16 |
17 |

18 | PROCESS 19 |

20 | 21 |
22 | {STEPS.map((step) => ( 23 | setActiveStep(step.id)} 27 | onMouseLeave={() => setActiveStep(null)} 28 | > 29 |
30 | 0{step.id} 31 |

32 | {step.title} 33 |

34 |
35 |
36 | 37 | 45 | {step.desc} 46 | 47 | 48 | ))} 49 |
50 |
51 | 52 | {/* Background Ambience (Simulated Video Loop based on step) */} 53 |
54 | Process Background 59 |
60 |
61 |
62 | ); 63 | }; 64 | 65 | export default Craftsmanship; -------------------------------------------------------------------------------- /aelia/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | AELIA | Inheritance Quality 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 42 | 78 | 89 | 90 | 91 | 92 |
93 | 94 | 95 | -------------------------------------------------------------------------------- /forge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Forge | Artisan Cookware 7 | 8 | 9 | 10 | 11 | 38 | 75 | 88 | 89 | 90 | 91 |
92 | 93 | 94 | -------------------------------------------------------------------------------- /arche/components/Footer.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { motion } from 'framer-motion'; 3 | 4 | const Footer: React.FC = () => { 5 | const [time, setTime] = useState(""); 6 | 7 | useEffect(() => { 8 | const updateTime = () => { 9 | const now = new Date(); 10 | setTime(now.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', timeZone: 'Europe/London' })); 11 | }; 12 | updateTime(); 13 | const interval = setInterval(updateTime, 1000); 14 | return () => clearInterval(interval); 15 | }, []); 16 | 17 | return ( 18 |
19 | 20 | {/* Call to Action */} 21 |
22 | 26 | 27 | Let's Talk 28 | 29 | {/* Liquid Fill Effect */} 30 | 38 | 39 |
40 | 41 | {/* Grid Info */} 42 |
43 |
44 | Location 45 |

12 Hans Crescent
Knightsbridge, London
SW1X 0LZ

46 |
47 | 48 |
49 | Contact 50 |

studio@arche.design
+44 (0) 20 7946 0123

51 |
52 | 53 |
54 | Social 55 |
56 | Instagram 57 | LinkedIn 58 | Pinterest 59 |
60 |
61 | 62 |
63 | London Time 64 |

{time}

65 |
66 |
67 | 68 |
69 | © Arché 2024. All rights reserved. 70 |
71 |
72 | ); 73 | }; 74 | 75 | export default Footer; 76 | -------------------------------------------------------------------------------- /aelia/components/UGCGrid.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react'; 2 | import { motion, useScroll, useTransform, useMotionValue, useSpring } from 'framer-motion'; 3 | import { TESTIMONIALS } from '../constants'; 4 | 5 | export const UGCGrid: React.FC = () => { 6 | const containerRef = useRef(null); 7 | const { scrollYProgress } = useScroll({ 8 | target: containerRef, 9 | offset: ["start end", "end start"] 10 | }); 11 | 12 | const y = useTransform(scrollYProgress, [0, 1], [100, -100]); // Parallax effect 13 | 14 | return ( 15 |
16 |
17 |

Worn By You

18 |

#AELIAARCHIVE

19 |
20 | 21 | 25 | {TESTIMONIALS.map((item, index) => ( 26 | 27 | ))} 28 | 29 |
30 | ); 31 | }; 32 | 33 | const TiltCard: React.FC<{ item: typeof TESTIMONIALS[0], index: number }> = ({ item, index }) => { 34 | const x = useMotionValue(0); 35 | const y = useMotionValue(0); 36 | 37 | const mouseX = useSpring(x, { stiffness: 150, damping: 15 }); 38 | const mouseY = useSpring(y, { stiffness: 150, damping: 15 }); 39 | 40 | function handleMouseMove(event: React.MouseEvent) { 41 | const { left, top, width, height } = event.currentTarget.getBoundingClientRect(); 42 | const xPos = (event.clientX - left) / width - 0.5; 43 | const yPos = (event.clientY - top) / height - 0.5; 44 | 45 | x.set(xPos * 10); // Rotate Y axis 46 | y.set(yPos * -10); // Rotate X axis (inverted) 47 | } 48 | 49 | function handleMouseLeave() { 50 | x.set(0); 51 | y.set(0); 52 | } 53 | 54 | return ( 55 | 65 |
69 | {`Worn 74 |
75 |
76 |

"{item.text}"

77 |
78 | {item.author} 79 | {item.location} 80 |
81 |
82 | 83 | ); 84 | }; 85 | -------------------------------------------------------------------------------- /aura/sections/Collection.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from 'react'; 2 | import gsap from 'gsap'; 3 | import { ScrollTrigger } from 'gsap/ScrollTrigger'; 4 | import { motion } from 'framer-motion'; 5 | import { PRODUCTS } from '../constants'; 6 | 7 | gsap.registerPlugin(ScrollTrigger); 8 | 9 | export const Collection: React.FC = () => { 10 | const sectionRef = useRef(null); 11 | const containerRef = useRef(null); 12 | 13 | useEffect(() => { 14 | const ctx = gsap.context(() => { 15 | const totalWidth = containerRef.current!.scrollWidth - window.innerWidth + 100; // +100 for padding 16 | 17 | gsap.to(containerRef.current, { 18 | x: -totalWidth, 19 | ease: "none", 20 | scrollTrigger: { 21 | trigger: sectionRef.current, 22 | start: "top top", 23 | end: `+=${totalWidth}`, 24 | pin: true, 25 | scrub: 1, 26 | anticipatePin: 1 27 | } 28 | }); 29 | }, sectionRef); 30 | 31 | return () => ctx.revert(); 32 | }, []); 33 | 34 | return ( 35 |
36 |
37 |

The Collection

38 |
39 | 40 |
41 | {PRODUCTS.map((product) => ( 42 |
43 | 48 | {/* Liquid Distortion Overlay Simulation */} 49 |
50 | 51 | {product.name} 56 | 57 | 58 |
59 |

{product.name}

60 |

{product.price}

61 |
62 | 63 | 68 | Quick Add 69 | 70 |
71 | ))} 72 | {/* Spacer for scroll end */} 73 |
74 |
75 |
76 | ); 77 | }; -------------------------------------------------------------------------------- /velocite/components/Hero.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from 'react'; 2 | import { motion, useScroll, useTransform } from 'framer-motion'; 3 | 4 | export const Hero: React.FC = () => { 5 | const containerRef = useRef(null); 6 | const { scrollY } = useScroll(); 7 | 8 | // Transform scroll into scale/opacity for the tunnel effect 9 | const tunnelScale = useTransform(scrollY, [0, 500], [1, 5]); 10 | const tunnelOpacity = useTransform(scrollY, [0, 300], [0, 1]); 11 | const textOpacity = useTransform(scrollY, [0, 200], [1, 0]); 12 | 13 | return ( 14 |
15 |
16 | 17 | {/* Animated Background Tunnel (Simulated with Gradient) */} 18 | 22 | 23 | {/* Speed Lines Overlay */} 24 | 28 | 29 | {/* Headlights */} 30 | 36 |
37 |
38 | 39 | 40 | {/* Brand Name */} 41 | 45 | 51 | Velocité 52 | 53 | 59 | SYSTEM INITIALIZED // READY TO LAUNCH 60 | 61 | 62 | 63 | {/* Scroll Indicator */} 64 | 68 | Scroll to Ignite 69 |
70 | 71 |
72 |
73 | ); 74 | }; -------------------------------------------------------------------------------- /aura/sections/Routine.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { motion, AnimatePresence } from 'framer-motion'; 3 | 4 | const STEPS = [ 5 | { 6 | id: 1, 7 | step: "01", 8 | name: "Cleanse", 9 | desc: "Purify with botanical oils", 10 | color: "rgba(247, 231, 230, 0.6)", // Pale Blush 11 | image: "https://picsum.photos/seed/cleanse/400/600" 12 | }, 13 | { 14 | id: 2, 15 | step: "02", 16 | name: "Treat", 17 | desc: "Infuse active hydration", 18 | color: "rgba(232, 245, 233, 0.6)", // Mint Dew 19 | image: "https://picsum.photos/seed/treat/400/600" 20 | }, 21 | { 22 | id: 3, 23 | step: "03", 24 | name: "Moisturize", 25 | desc: "Lock in light and barrier", 26 | color: "rgba(240, 240, 240, 0.6)", // Vapor Grey 27 | image: "https://picsum.photos/seed/moist/400/600" 28 | }, 29 | ]; 30 | 31 | export const Routine: React.FC = () => { 32 | const [hoveredStep, setHoveredStep] = useState(null); 33 | 34 | return ( 35 |
36 | 37 | {/* Background Image Fade */} 38 |
39 | 40 | {hoveredStep !== null && ( 41 | s.id === hoveredStep)?.image} 44 | initial={{ opacity: 0, filter: "blur(10px)" }} 45 | animate={{ opacity: 1, filter: "blur(0px)" }} 46 | exit={{ opacity: 0, filter: "blur(10px)" }} 47 | transition={{ duration: 0.8 }} 48 | className="w-full h-full object-cover mask-image-linear-gradient" 49 | style={{ maskImage: 'linear-gradient(to right, transparent, black)' }} 50 | /> 51 | )} 52 | 53 |
54 | 55 |
56 |
57 | {STEPS.map((step) => ( 58 | setHoveredStep(step.id)} 62 | onHoverEnd={() => setHoveredStep(null)} 63 | > 64 | {/* Bloom Effect */} 65 | 69 | 70 |
71 | {step.step} 72 |

{step.name}

73 |
74 |

75 | {step.desc} 76 |

77 | 78 | ))} 79 |
80 |
81 |
82 | ); 83 | }; -------------------------------------------------------------------------------- /aelia/components/Hero.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react'; 2 | import { motion, useScroll, useTransform } from 'framer-motion'; 3 | 4 | export const Hero: React.FC = () => { 5 | const containerRef = useRef(null); 6 | const { scrollY } = useScroll(); 7 | 8 | // Veil animations driven by scroll 9 | const veilOpacity = useTransform(scrollY, [0, 500], [0.6, 0]); 10 | const veilY = useTransform(scrollY, [0, 500], ["0%", "100%"]); 11 | 12 | // Product scale/focus animation 13 | const scale = useTransform(scrollY, [0, 500], [1, 1.05]); 14 | const shadowOpacity = useTransform(scrollY, [0, 300], [0.2, 0.6]); 15 | 16 | return ( 17 |
18 | 19 | {/* Background Text Texture (Subtle) */} 20 |
21 |

AELIA

22 |
23 | 24 |
25 | 31 | The Heritage Carrier 32 | 33 | 39 | Est. 2024 • Tuscany • Sourced: Vachetta 40 | 41 |
42 | 43 | {/* Product Stage */} 44 |
45 | {/* Shadow */} 46 | 50 | 51 | {/* Product Image */} 52 | 58 | 59 | {/* The Veil */} 60 | 64 |
65 | 66 | 72 | Scroll to Explore 73 |
74 | 79 |
80 | 81 |
82 | ); 83 | }; 84 | -------------------------------------------------------------------------------- /arche/components/Hero.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from 'react'; 2 | import { gsap } from 'gsap'; 3 | import { ScrollTrigger } from 'gsap/ScrollTrigger'; 4 | 5 | gsap.registerPlugin(ScrollTrigger); 6 | 7 | const Hero: React.FC = () => { 8 | const containerRef = useRef(null); 9 | const textRef = useRef(null); 10 | const svgRef = useRef(null); 11 | 12 | useEffect(() => { 13 | if (!containerRef.current || !textRef.current || !svgRef.current) return; 14 | 15 | const tl = gsap.timeline({ 16 | scrollTrigger: { 17 | trigger: containerRef.current, 18 | start: "top top", 19 | end: "+=2000", // Increased scroll distance for a heavier, more luxurious feel 20 | scrub: 1, 21 | pin: true, 22 | anticipatePin: 1, 23 | } 24 | }); 25 | 26 | // Scale the text mask up until it reveals everything 27 | // Starting from scale 1 (normal) to scale 100 (huge opening) 28 | tl.to(textRef.current, { 29 | scale: 100, 30 | transformOrigin: "50% 50%", // Critical: scale exactly from center 31 | ease: "power2.inOut", 32 | }); 33 | 34 | // Fade out the overlay color near the end to ensure smooth transition 35 | tl.to(svgRef.current, { 36 | opacity: 0, 37 | ease: "power1.out" 38 | }, "<60%"); // Start fading when scaling is 60% done 39 | 40 | return () => { 41 | tl.kill(); 42 | }; 43 | }, []); 44 | 45 | return ( 46 |
47 | {/* Background Video */} 48 |
49 | 58 |
59 |
60 | 61 | {/* The Curtain Mask */} 62 |
63 | 69 | 70 | 71 | 72 | 83 | ARCHÉ 84 | 85 | 86 | 87 | 88 | 89 |
90 | 91 |
92 |

Scroll to Enter

93 |
94 |
95 | ); 96 | }; 97 | 98 | export default Hero; -------------------------------------------------------------------------------- /velocite/components/Features.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { motion, AnimatePresence } from 'framer-motion'; 3 | import { FEATURES } from '../constants'; 4 | 5 | export const Features: React.FC = () => { 6 | const [expandedId, setExpandedId] = useState(null); 7 | 8 | return ( 9 |
10 |
11 |
12 |

BLUEPRINTS

13 |
14 | 15 |
16 | {FEATURES.map((feature) => ( 17 | setExpandedId(feature.id)} 21 | onHoverEnd={() => setExpandedId(null)} 22 | onClick={() => setExpandedId(expandedId === feature.id ? null : feature.id)} 23 | > 24 |
25 |

26 | {feature.title} 27 |

28 | {feature.id.toUpperCase()} // 00{FEATURES.indexOf(feature) + 1} 29 |
30 | 31 | 32 | {expandedId === feature.id && ( 33 | 40 |
41 |
42 | {/* Animated SVG Icon */} 43 | 44 | 50 | 51 |
52 |
53 |

{feature.description}

54 | 55 |
56 |
57 | 58 | )} 59 | 60 | 61 | {/* Progress Bar Bottom */} 62 |
63 | 64 | ))} 65 |
66 |
67 |
68 | ); 69 | }; -------------------------------------------------------------------------------- /aelia/components/Footer.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ArrowRight } from 'lucide-react'; 3 | 4 | export const Footer: React.FC = () => { 5 | return ( 6 |
7 | 8 | {/* Decorative grain */} 9 |
10 | 11 |
12 | 13 |

AELIA

14 | 15 |
16 | 28 |
29 | 30 |
31 |
32 |

Contact

33 |
    34 |
  • Client Services
    • 35 |
  • Book an Appointment
    • 36 |
  • Press Inquiries
    • 37 |
38 |
39 | 40 |
41 |

Social

42 |
    43 |
  • Instagram
    • 44 |
  • Pinterest
    • 45 |
46 |
47 | 48 |
49 |

Legal

50 |
    51 |
  • Privacy Policy
    • 52 |
  • Terms of Service
    • 53 |
  • Sourcing Transparency
    • 54 |
55 |
56 |
57 | 58 |
59 | © 2024 Aelia Heritage Goods • Crafted in Europe 60 |
61 |
62 |
63 | ); 64 | }; 65 | -------------------------------------------------------------------------------- /nexus/components/Footer.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import { motion } from 'framer-motion'; 3 | import { ArrowRight } from 'lucide-react'; 4 | 5 | const Footer: React.FC = () => { 6 | const [userCount, setUserCount] = useState(12403); 7 | 8 | useEffect(() => { 9 | const interval = setInterval(() => { 10 | // Simulate live user count increase occasionally 11 | if (Math.random() > 0.7) { 12 | setUserCount(prev => prev + 1); 13 | } 14 | }, 2000); 15 | return () => clearInterval(interval); 16 | }, []); 17 | 18 | return ( 19 |
20 |
21 | {/* Main CTA */} 22 |
23 |
24 |
25 |

Start Your Free Trial

26 |
27 | 28 |
29 |
30 |
31 | 32 |
33 |
34 |

Nexus

35 |

36 | The intelligent operating system for modern product teams. Streamline, automate, and scale with precision. 37 |

38 |
39 | 40 | LIVE USERS: {userCount.toLocaleString()} 41 |
42 |
43 | 44 |
45 |

PRODUCT

46 |
    47 |
  • Features
    • 48 |
  • Integrations
    • 49 |
  • Security
    • 50 |
  • Enterprise
    • 51 |
52 |
53 | 54 |
55 |

COMPANY

56 |
    57 |
  • About
    • 58 |
  • Blog
    • 59 |
  • Careers
    • 60 |
  • Legal
    • 61 |
62 |
63 |
64 | 65 |
66 |

© 2024 NEXUS SYSTEMS INC. ALL RIGHTS RESERVED.

67 |
68 | PRIVACY POLICY 69 | TERMS OF SERVICE 70 |
71 |
72 |
73 |
74 | ); 75 | }; 76 | 77 | export default Footer; -------------------------------------------------------------------------------- /nexus/components/Modules.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react'; 2 | import { motion, useScroll, useTransform } from 'framer-motion'; 3 | import { Bot, Calendar, BarChart3, Shield } from 'lucide-react'; 4 | 5 | const modules = [ 6 | { 7 | id: 'automation', 8 | title: 'Task Automation', 9 | icon: , 10 | desc: 'Self-correcting workflows that learn from your team.', 11 | code: 'if (tasks.pending > 5) autoAssign(resource);' 12 | }, 13 | { 14 | id: 'scheduling', 15 | title: 'AI Scheduling', 16 | icon: , 17 | desc: 'Predictive timelines based on historical velocity.', 18 | code: 'timeline.optimize({ priority: "high" });' 19 | }, 20 | { 21 | id: 'reporting', 22 | title: 'Deep Reporting', 23 | icon: , 24 | desc: 'Real-time visibility into every metric that matters.', 25 | code: 'return analytics.forecast(nextQuarter);' 26 | }, 27 | { 28 | id: 'security', 29 | title: 'Zero Trust', 30 | icon: , 31 | desc: 'Enterprise-grade security baked into every interaction.', 32 | code: 'auth.verify(handshake).then(grantAccess);' 33 | } 34 | ]; 35 | 36 | const Modules: React.FC = () => { 37 | const targetRef = useRef(null); 38 | const { scrollYProgress } = useScroll({ 39 | target: targetRef, 40 | }); 41 | 42 | const x = useTransform(scrollYProgress, [0, 1], ["0%", "-75%"]); 43 | 44 | return ( 45 |
46 |
47 | 48 | {/* Intro Text Card */} 49 |
50 |

03 // CORE MODULES

51 |

Built for scale.
Designed for speed.

52 |

Swipe to explore the architecture defining the future of work.

53 |
54 | 55 | {modules.map((module) => ( 56 |
60 |
61 | {module.icon} 62 |
63 | 64 |
65 |
66 | {/* Abstract Visualization */} 67 |
68 | {module.code} 69 |
70 |
71 |
72 | 73 |
74 |

{module.title}

75 |

{module.desc}

76 |
77 | 78 |
79 |
80 |
81 |
82 | ))} 83 | 84 |
85 |
86 | ); 87 | }; 88 | 89 | export default Modules; -------------------------------------------------------------------------------- /chromaflow/components/Services.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { motion, AnimatePresence } from 'framer-motion'; 3 | import { ServiceItem } from '../types'; 4 | 5 | const services: ServiceItem[] = [ 6 | { id: '01', title: 'Architectural Lighting', description: 'Transforming built environments into dynamic canvases using projection mapping and smart LEDs.', patternType: 'grid' }, 7 | { id: '02', title: 'Event Visuals', description: 'Live, audio-reactive visual performances that synchronize with soundscapes for immersive experiences.', patternType: 'waves' }, 8 | { id: '03', title: 'Brand Experiences', description: 'Interactive installations that tell your story through movement, light, and user participation.', patternType: 'particles' } 9 | ]; 10 | 11 | const Services: React.FC = () => { 12 | const [hovered, setHovered] = useState(null); 13 | 14 | return ( 15 |
16 |
17 |

Our Expertise

18 | 19 |
20 | {services.map((service) => ( 21 |
setHovered(service.id)} 25 | onMouseLeave={() => setHovered(null)} 26 | > 27 |
28 | 29 | {service.id} 30 | 31 |

32 | {service.title} 33 |

34 |
{/* Spacer */} 35 |
36 | 37 | {/* Description Reveal */} 38 | 39 | {hovered === service.id && ( 40 | 46 |

47 | {service.description} 48 |

49 | 50 | )} 51 | 52 | 53 | {/* Refraction/Pattern Background Effect */} 54 | 60 | 61 | {/* Subtle Light Leak */} 62 | {hovered === service.id && ( 63 |
64 | )} 65 |
66 | ))} 67 |
68 |
69 |
70 |
71 | ); 72 | }; 73 | 74 | export default Services; 75 | -------------------------------------------------------------------------------- /velocite/components/Models.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react'; 2 | import { motion, useTransform, useScroll } from 'framer-motion'; 3 | import { CAR_MODELS } from '../constants'; 4 | import { Wind } from 'lucide-react'; 5 | 6 | export const Models: React.FC = () => { 7 | const targetRef = useRef(null); 8 | const { scrollYProgress } = useScroll({ target: targetRef }); 9 | 10 | // Translate X based on vertical scroll progress of the container 11 | const x = useTransform(scrollYProgress, [0, 1], ["0%", "-75%"]); 12 | 13 | return ( 14 |
15 |
16 | 17 | {CAR_MODELS.map((car) => ( 18 |
19 | 20 | {/* Holographic Grid Background */} 21 |
22 | 23 | {/* Car Image with Wind Tunnel Effect */} 24 |
25 | {car.name} 30 | {/* Simulated Wind Lines (SVG) */} 31 | 32 | 37 | 42 | 43 |
44 | 45 | {/* Info Overlay */} 46 |
47 |
48 |

{car.name}

49 |

{car.tagline}

50 |
51 | 52 |
53 |
54 | ACCEL_0-60 55 | {car.specs.acceleration} 56 |
57 |
58 | RANGE_EPA 59 | {car.specs.range} 60 |
61 |
62 | POWER_HP 63 | {car.specs.hp} 64 |
65 |
66 |
67 | 68 |
69 | ))} 70 | 71 |
72 |
73 | ); 74 | }; -------------------------------------------------------------------------------- /velocite/components/Footer.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { motion } from 'framer-motion'; 3 | import { ArrowRight, MapPin, Instagram, Twitter, Linkedin } from 'lucide-react'; 4 | 5 | export const Footer: React.FC = () => { 6 | const [miles, setMiles] = useState(12405920); 7 | 8 | useEffect(() => { 9 | const interval = setInterval(() => { 10 | setMiles(prev => prev + Math.floor(Math.random() * 10)); 11 | }, 1000); 12 | return () => clearInterval(interval); 13 | }, []); 14 | 15 | return ( 16 |
17 | 18 | {/* Massive CTA */} 19 |
20 |
21 | {/* Moving Asphalt Texture (CSS Animation would be used here, simulating with translation) */} 22 | 27 |

28 | TEST DRIVE 29 |

30 |
31 |
32 | 33 |
34 | 35 | {/* Brand */} 36 |
37 |

VELOCITÉ

38 |

Designed in Tokyo.
Engineered in Munich.
Driven Everywhere.

39 |
40 | 41 | {/* Locations */} 42 |
43 |

Dealerships

44 |
    45 |
  • TOKYO_SHIBUYA
    • 46 |
  • LA_SILVERLAKE
    • 47 |
  • LONDON_SHOREDITCH
    • 48 |
  • BERLIN_MITTE
    • 49 |
50 |
51 | 52 | {/* Socials */} 53 |
54 |

Network

55 |
56 | 57 | 58 | 59 |
60 |
61 | 62 | {/* Live Counter */} 63 |
64 |

Global Miles

65 |
66 | {miles.toLocaleString()} KM 67 |
68 |
69 |
70 | LIVE TELEMETRY 71 |
72 |
73 |
74 | 75 |
76 | © 2024 VELOCITÉ MOTORS. ALL RIGHTS RESERVED. SILENCE IS GOLDEN. 77 |
78 |
79 | ); 80 | }; -------------------------------------------------------------------------------- /chromaflow/components/Installations.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react'; 2 | import { motion, useScroll, useTransform } from 'framer-motion'; 3 | import { Play } from 'lucide-react'; 4 | import { InstallationProject } from '../types'; 5 | 6 | const projects: InstallationProject[] = [ 7 | { 8 | id: '1', 9 | title: 'Nebula Void', 10 | image: 'https://picsum.photos/1920/1080?random=1', 11 | description: 'Immersive light chamber.' 12 | }, 13 | { 14 | id: '2', 15 | title: 'Sonic Prism', 16 | image: 'https://picsum.photos/1920/1080?random=2', 17 | description: 'Audio-reactive sculpture.' 18 | }, 19 | { 20 | id: '3', 21 | title: 'Datastream', 22 | image: 'https://picsum.photos/1920/1080?random=3', 23 | description: 'Real-time network visualization.' 24 | }, 25 | { 26 | id: '4', 27 | title: 'Solar Wind', 28 | image: 'https://picsum.photos/1920/1080?random=4', 29 | description: 'Outdoor kinetic projection.' 30 | } 31 | ]; 32 | 33 | const Installations: React.FC = () => { 34 | const targetRef = useRef(null); 35 | const { scrollYProgress } = useScroll({ 36 | target: targetRef, 37 | }); 38 | 39 | const x = useTransform(scrollYProgress, [0, 1], ["0%", "-75%"]); 40 | 41 | return ( 42 |
43 |
44 | 45 |
46 |

Selected Works

47 |
48 | 49 | 50 | {projects.map((project) => ( 51 |
52 | 53 | {/* Image with Filter Trick */} 54 |
55 | 62 |
63 | 64 | {/* Simulated Ripple Overlay */} 65 |
66 |
67 | 68 | {/* Content Overlay */} 69 |
70 | 76 | {project.title} 77 | 78 |
79 | 82 | {project.description} 83 |
84 |
85 | 86 |
87 | ))} 88 | 89 |
90 |
91 | ); 92 | }; 93 | 94 | export default Installations; 95 | -------------------------------------------------------------------------------- /forge/components/Materials.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { motion, AnimatePresence } from 'framer-motion'; 3 | import { MATERIALS } from '../constants'; 4 | import { Material } from '../types'; 5 | 6 | const Materials: React.FC = () => { 7 | const [selectedId, setSelectedId] = useState(null); 8 | 9 | return ( 10 |
11 |
12 |

13 | Raw Materials 14 |

15 | 16 |
17 | {MATERIALS.map((mat) => ( 18 | setSelectedId(mat.id)} 22 | className="aspect-square relative group cursor-zoom-in overflow-hidden border border-forge-pencil/50" 23 | > 24 | {mat.name} 29 |
30 |

{mat.name}

31 |
32 | 33 | ))} 34 |
35 | 36 | 37 | {selectedId && ( 38 |
39 | {MATERIALS.filter(m => m.id === selectedId).map(item => ( 40 | 45 | 51 | 52 |
53 | {item.name} 54 |
55 | 56 |
57 |

{item.name}

58 |
59 |
60 | Forging Temp 61 | {item.temp} 62 |
63 |
64 | Process 65 | {item.process} 66 |
67 |
68 |

69 | {item.description} 70 |

71 |
72 | 73 | ))} 74 |
75 | )} 76 | 77 |
78 |
79 | ); 80 | }; 81 | 82 | export default Materials; -------------------------------------------------------------------------------- /chromaflow/components/Hero.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from 'react'; 2 | import gsap from 'gsap'; 3 | 4 | const Hero: React.FC = () => { 5 | const canvasRef = useRef(null); 6 | const containerRef = useRef(null); 7 | 8 | useEffect(() => { 9 | const canvas = canvasRef.current; 10 | if (!canvas) return; 11 | 12 | const ctx = canvas.getContext('2d'); 13 | if (!ctx) return; 14 | 15 | let width = window.innerWidth; 16 | let height = window.innerHeight; 17 | 18 | const resize = () => { 19 | width = window.innerWidth; 20 | height = window.innerHeight; 21 | canvas.width = width; 22 | canvas.height = height; 23 | }; 24 | 25 | window.addEventListener('resize', resize); 26 | resize(); 27 | 28 | // Particle System 29 | interface Particle { 30 | x: number; 31 | y: number; 32 | vx: number; 33 | vy: number; 34 | size: number; 35 | color: string; 36 | life: number; 37 | } 38 | 39 | const particles: Particle[] = []; 40 | const colors = ['#007BFF', '#FF008C', '#7CFC00', '#8A2BE2']; 41 | 42 | const createParticle = (x: number, y: number) => { 43 | const angle = Math.random() * Math.PI * 2; 44 | const speed = Math.random() * 2 + 0.5; 45 | particles.push({ 46 | x, 47 | y, 48 | vx: Math.cos(angle) * speed, 49 | vy: Math.sin(angle) * speed, 50 | size: Math.random() * 3 + 1, 51 | color: colors[Math.floor(Math.random() * colors.length)], 52 | life: 100 + Math.random() * 100 53 | }); 54 | }; 55 | 56 | // Animation Loop 57 | const render = () => { 58 | // Fade out trail 59 | ctx.fillStyle = 'rgba(255, 255, 255, 0.1)'; 60 | ctx.fillRect(0, 0, width, height); 61 | 62 | // Spawn particles from center occasionally to keep it alive 63 | if (Math.random() < 0.2) { 64 | createParticle(width / 2, height / 2); 65 | } 66 | 67 | // Update and draw particles 68 | for (let i = particles.length - 1; i >= 0; i--) { 69 | const p = particles[i]; 70 | p.x += p.vx; 71 | p.y += p.vy; 72 | p.life--; 73 | 74 | // Fluid movement noise 75 | p.vx += (Math.random() - 0.5) * 0.1; 76 | p.vy += (Math.random() - 0.5) * 0.1; 77 | 78 | ctx.beginPath(); 79 | ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); 80 | ctx.fillStyle = p.color; 81 | ctx.fill(); 82 | 83 | if (p.life <= 0) { 84 | particles.splice(i, 1); 85 | } 86 | } 87 | 88 | requestAnimationFrame(render); 89 | }; 90 | 91 | // Initial Explosion 92 | for (let i = 0; i < 100; i++) { 93 | createParticle(width / 2, height / 2); 94 | } 95 | 96 | render(); 97 | 98 | // Text Reveal 99 | const tl = gsap.timeline(); 100 | tl.fromTo('.hero-title-char', 101 | { opacity: 0, y: 100, filter: 'blur(10px)' }, 102 | { opacity: 1, y: 0, filter: 'blur(0px)', stagger: 0.05, duration: 1.5, ease: 'power4.out', delay: 0.5 } 103 | ); 104 | 105 | return () => { 106 | window.removeEventListener('resize', resize); 107 | }; 108 | }, []); 109 | 110 | const title = "CHROMAFLOW"; 111 | 112 | return ( 113 |
114 | 115 | 116 |

117 | {title.split('').map((char, index) => ( 118 | {char} 119 | ))} 120 |

121 | 122 |
123 | SCROLL TO DISCOVER 124 |
125 |
126 | ); 127 | }; 128 | 129 | export default Hero; 130 | -------------------------------------------------------------------------------- /forge/components/Collections.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, useState } from 'react'; 2 | import { motion, useScroll, useTransform, useMotionValue } from 'framer-motion'; 3 | import { COLLECTIONS } from '../constants'; 4 | import { Product } from '../types'; 5 | 6 | const Collections: React.FC = () => { 7 | const targetRef = useRef(null); 8 | const { scrollYProgress } = useScroll({ 9 | target: targetRef, 10 | }); 11 | 12 | const x = useTransform(scrollYProgress, [0, 1], ["0%", "-75%"]); 13 | 14 | return ( 15 |
16 |
17 | 18 | {COLLECTIONS.map((product) => ( 19 | 20 | ))} 21 | {/* Extra space at end */} 22 |
23 | 24 | 25 |
26 |

27 | The Collections 28 |

29 |
30 |
31 |
32 | ); 33 | }; 34 | 35 | const ProductCard: React.FC<{ product: Product }> = ({ product }) => { 36 | const [hovered, setHovered] = useState(false); 37 | const mouseX = useMotionValue(0); 38 | const mouseY = useMotionValue(0); 39 | 40 | const handleMouseMove = (e: React.MouseEvent) => { 41 | const rect = e.currentTarget.getBoundingClientRect(); 42 | mouseX.set(e.clientX - rect.left); 43 | mouseY.set(e.clientY - rect.top); 44 | }; 45 | 46 | return ( 47 |
setHovered(true)} 50 | onMouseLeave={() => setHovered(false)} 51 | onMouseMove={handleMouseMove} 52 | > 53 | {/* Heat Map Overlay */} 54 | 60 | 61 | {/* Dynamic Heat Spot (Visual Glow) */} 62 | {hovered && ( 63 | 72 | )} 73 | 74 |
75 | {product.name} 80 |
81 | 82 |
83 |

{product.name}

84 |
85 | 86 | {product.weight.toFixed(1)} KG 87 | 88 | 89 | {product.material} 90 | 91 |
92 |

93 | {product.description} 94 |

95 | 98 |
99 |
100 | ); 101 | }; 102 | 103 | export default Collections; -------------------------------------------------------------------------------- /chromaflow/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ChromaFlow - Dynamic Art Studio 7 | 8 | 9 | 10 | 11 | 40 | 66 | 86 | 87 | 88 | 89 |
90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | --------------------------------------------------------------------------------