tony/chorus-services
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: CHORUS Services documentation and project setup

Browse Source
This commit is contained in:
tony
2025-08-01 09:11:58 +10:00
commit 2ca03a3e2d
4 changed files with 839 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

421
DESIGN.md Normal file
View File

@@ -0,0 +1,421 @@
## **Revised Implementation Guide: CHORUS Services with Ant Design**
### **Why Ant Design Works Well for CHORUS**
Based on my research, Ant Design is actually perfect for your use case:
- **Enterprise-Grade Components**: Built specifically for complex, data-driven applications[1][2]
- **Advanced Theming**: CSS-in-JS with dynamic theme capabilities[3][4]
- **Performance Optimized**: When properly configured, can achieve 80% bundle size reduction[5][6]
- **React Integration**: Seamless integration with Framer Motion for animations[7]
## **Updated Technology Stack**
```javascript
// Core Dependencies
- Next.js 13+ (App Router)
- Ant Design 5.25+ (latest with CSS variables support)
- Framer Motion (for parallax and animations)
- @ant-design/cssinjs (for custom theming)
- antd-style (for additional CSS-in-JS capabilities)
```
## **Bundle Optimization Strategy**
First, let's implement tree-shaking to avoid the performance issues:
```javascript
// ❌ Avoid: Full library import
import { Button, Card, Layout } from 'antd';
// ✅ Optimized: Component-level imports
import Button from 'antd/es/button';
import Card from 'antd/es/card';
import Layout from 'antd/es/layout';
// Or create a centralized import file
// components/antd/index.js
export { default as Button } from 'antd/es/button';
export { default as Card } from 'antd/es/card';
export { default as Layout } from 'antd/es/layout';
```
## **Custom Theme Configuration**
Here's how to implement your technology-focused aesthetic with Ant Design theming:
```javascript
// theme/chorousTheme.js
import { theme } from 'antd';
export const chorusTheme = {
algorithm: theme.darkAlgorithm, // Enable dark mode by default
token: {
// Color System (replacing our previous color palette)
colorPrimary: '#007aff', // Electric blue
colorSuccess: '#30d158', // Emerald green
colorWarning: '#ff9f0a', // Amber orange
colorError: '#ff453a', // System red
colorInfo: '#007aff', // Electric blue
// Background Colors
colorBgContainer: '#1a1a1a', // Deep charcoal
colorBgElevated: '#2d2d30', // Cool gray
colorBgLayout: '#000000', // Pure black
// Typography
fontFamily: `-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif`,
fontSize: 16,
fontSizeHeading1: 84, // Large headlines
fontSizeHeading2: 48, // Section headers
fontSizeHeading3: 36, // Subsection headers
// Spacing & Layout
borderRadius: 8, // Consistent 8px radius
wireframe: false, // Enable modern styling
// Performance & Motion
motionDurationSlow: '0.3s', // Matching Apple's timing
motionDurationMid: '0.2s',
motionDurationFast: '0.1s',
},
components: {
// Custom Button Styling
Button: {
primaryShadow: '0 12px 24px rgba(0, 122, 255, 0.3)',
controlHeight: 48, // Larger touch targets
fontWeight: 600,
},
// Custom Card Styling
Card: {
borderRadiusLG: 12, // Slightly larger for cards
paddingLG: 32,
},
// Custom Layout
Layout: {
headerBg: 'rgba(26, 26, 26, 0.8)', // Semi-transparent header
headerHeight: 72,
},
// Typography Components
Typography: {
titleMarginTop: 0,
titleMarginBottom: 24,
}
}
};
```
## **Component Architecture**
Here's how to structure your components with Ant Design:
```javascript
// components/ui/PerformanceCard.jsx
import { Card, Typography, Space, Tag } from 'antd';
import { motion } from 'framer-motion';
const { Title, Text } = Typography;
export const PerformanceCard = ({ title, description, metrics, delay = 0 }) => {
return (
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay }}
viewport={{ once: true }}
>
<Card
hoverable
className="performance-card"
styles={{
body: { padding: '32px' }
}}
>
<Space direction="vertical" size="large" style={{ width: '100%' }}>
<Title level={3} style={{ margin: 0, color: '#f2f2f7' }}>
{title}
</Title>
<Text style={{ fontSize: '16px', lineHeight: '1.6', color: '#a1a1a6' }}>
{description}
</Text>
<Space wrap>
{metrics.map((metric, index) => (
<Tag
key={index}
color="processing"
style={{
padding: '8px 16px',
fontSize: '14px',
fontWeight: 600,
border: 'none',
background: 'rgba(0, 122, 255, 0.1)',
color: '#007aff'
}}
>
{metric}
</Tag>
))}
</Space>
</Space>
</Card>
</motion.div>
);
};
```
## **Framer Motion Integration**
Ant Design components work seamlessly with Framer Motion:
```javascript
// components/sections/HeroSection.jsx
import { Layout, Typography, Button, Space } from 'antd';
import { motion } from 'framer-motion';
const { Header } = Layout;
const { Title, Text } = Typography;
export const HeroSection = () => {
return (
<Header
style={{
height: '100vh',
display: 'flex',
alignItems: 'center',
background: 'linear-gradient(135deg, #000000 0%, #1a1a1a 100%)'
}}
>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1 }}
style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 24px' }}
>
<Space direction="vertical" size="large" align="center">
<motion.div
initial={{ y: 40, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.8, delay: 0.2 }}
>
<Title
level={1}
style={{
fontSize: '84px',
fontWeight: 700,
textAlign: 'center',
margin: 0,
background: 'linear-gradient(135deg, #f2f2f7 0%, #007aff 100%)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent'
}}
>
CHORUS Services
</Title>
</motion.div>
<motion.div
initial={{ y: 40, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.8, delay: 0.4 }}
>
<Text
style={{
fontSize: '36px',
textAlign: 'center',
color: '#a1a1a6'
}}
>
Distributed AI Orchestration Without the Hallucinations
</Text>
</motion.div>
<motion.div
initial={{ y: 40, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.8, delay: 0.6 }}
>
<Space size="large">
<Button
type="primary"
size="large"
style={{ height: '56px', padding: '0 32px', fontSize: '16px' }}
>
Explore the Platform
</Button>
<Button
size="large"
style={{ height: '56px', padding: '0 32px', fontSize: '16px' }}
>
See Technical Demos
</Button>
</Space>
</motion.div>
</Space>
</motion.div>
</Header>
);
};
```
## **Parallax Implementation with Ant Design**
```javascript
// components/sections/ParallaxSection.jsx
import { Layout, Row, Col, Card } from 'antd';
import { motion, useScroll, useTransform } from 'framer-motion';
import { useRef } from 'react';
const { Content } = Layout;
export const ParallaxSection = ({ children }) => {
const ref = useRef(null);
const { scrollYProgress } = useScroll({
target: ref,
offset: ["start end", "end start"]
});
const y1 = useTransform(scrollYProgress, [0, 1], [0, -200]);
const y2 = useTransform(scrollYProgress, [0, 1], [0, 200]);
return (
<Layout ref={ref} style={{ minHeight: '100vh', position: 'relative' }}>
{/* Background Layer */}
<motion.div
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
background: 'radial-gradient(circle at 50% 50%, #1a1a1a 0%, #000000 100%)',
y: y1
}}
/>
{/* Content Layer */}
<Content style={{ position: 'relative', zIndex: 1, padding: '120px 24px' }}>
<motion.div style={{ y: y2 }}>
{children}
</motion.div>
</Content>
</Layout>
);
};
```
## **App Configuration**
```javascript
// app/layout.jsx
'use client';
import { ConfigProvider } from 'antd';
import { chorusTheme } from '../theme/chorusTheme';
import 'antd/dist/reset.css'; // Use reset instead of full CSS
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<ConfigProvider theme={chorusTheme}>
{children}
</ConfigProvider>
</body>
</html>
);
}
```
## **Performance Optimizations**
```javascript
// next.config.js
module.exports = {
// Enable tree shaking for Ant Design
transpilePackages: ['antd'],
// Optimize bundle splitting
webpack: (config) => {
config.optimization.splitChunks.cacheGroups.antd = {
name: 'antd',
test: /[\\/]node_modules[\\/]antd[\\/]/,
chunks: 'all',
priority: 10,
};
return config;
},
};
```
## **Key Advantages of This Approach**
1. **Enterprise-Ready**: Ant Design's components are built for complex applications[8]
2. **Consistent Design Language**: Built-in design system ensures consistency[1]
3. **Performance**: Proper tree-shaking reduces bundle size by up to 80%[6]
4. **Accessibility**: Ant Design has excellent built-in accessibility features[2]
5. **Theming Power**: CSS-in-JS enables dynamic theme switching[4]
6. **Animation Integration**: Works seamlessly with Framer Motion[7]
This approach gives you all the sophisticated theming and component capabilities of Ant Design while maintaining the Apple-inspired, technology-focused aesthetic we designed. The bundle optimization ensures performance remains excellent, and the CSS-in-JS theming provides the flexibility to create your unique visual identity.
Sources
[1] Ant Design - The world's second most popular React UI framework https://ant.design
[2] Ant Design 101 – Introduction to a Design System for Enterprises https://www.uxpin.com/studio/blog/ant-design-introduction/
[3] ant design app development-en https://www.appleute.de/en/app-entwickler-bibliothek/app-development-with-ant-design/
[4] Ant Design System Dark Mode and Other Theme Customization https://betterprogramming.pub/ant-design-system-dark-mode-and-other-theme-customization-fa4ff14359a4
[5] Reduce Ant Design Bundle Size Multiple Times - Octa Labs Insights https://blog.octalabs.com/reduce-ant-design-bundle-size-multiple-times-simple-strategies-and-steps-for-smaller-bundles-66d5b7b898d3
[6] Ant Design Bundle Size Optimization: The Tree Shaking Approach ... https://dev.to/anaselbahrawy/ant-design-bundle-size-optimization-the-tree-shaking-approach-every-react-developer-should-know-2l5a
[7] How to use framer-motion with ant design - DEV Community https://dev.to/a4addel/how-to-use-framer-motion-with-ant-design-57j5
[8] 2025's Best CSS Frameworks for React: Speed, Flexibility & UI Power https://www.linkedin.com/pulse/2025s-best-css-frameworks-react-speed-flexibility-ui-power-srikanth-r-s2pjc
[9] Tailwind CSS vs Ant Design for React Component Styling - MoldStud https://moldstud.com/articles/p-comparing-tailwind-css-and-ant-design-for-react-component-styling-which-framework-wins
[10] Changelog - Ant Design https://ant.design/changelog/
[11] Tailwind CSS vs. Ant Design: Choosing the Right UI Framework for ... https://www.linkedin.com/pulse/tailwind-css-vs-ant-design-choosing-right-ui-your-project-lalwani-ckibf
[12] Customize Theme - Ant Design https://ant.design/docs/react/customize-theme/
[13] Updates - Ant Design System for Figma https://www.antforfigma.com/updates
[14] Tailwind CSS+UI or Ant Design for an enterprise CMS built ... - Reddit https://www.reddit.com/r/webdev/comments/1af9kdx/tailwind_cssui_or_ant_design_for_an_enterprise/
[15] Introduction to Customization - Ant Design System for Figma https://www.antforfigma.com/docs/customization-intro
[16] Ant Design Select: Features, Benefits & Best Practices https://www.creolestudios.com/ant-design-select-guide/
[17] Tailwind CSS vs Ant Design https://www.csshunter.com/tailwind-css-vs-ant-design/
[18] Ant Design System for Figma - UI Kit https://www.antforfigma.com
[19] Tailwind CSS vs Ant Design Comparison for React Styling | MoldStud https://moldstud.com/articles/p-tailwind-css-vs-ant-design-a-comprehensive-comparison-for-react-component-styling
[20] CSS Frameworks 2024: Tailwind vs. Others - Tailkits https://tailkits.com/blog/popular-css-frameworks/
[21] Customize theme with ConfigProvider - Ant Design Vue https://www.antdv.com/docs/vue/customize-theme
[22] Best 19 React UI Component Libraries in 2025 - Prismic https://prismic.io/blog/react-component-libraries
[23] Top 5 CSS Frameworks in 2024: Tailwind, Material-UI, Ant Design ... https://www.codingwallah.org/blog/2024-top-css-frameworks-tailwind-material-ui-ant-design-shadcn-chakra-ui
[24] Ant Design System Overview: Versions, Basics & Resources - Motiff https://motiff.com/design-system-wiki/design-systems-overview/ant-design
[25] The 10 Best Alternatives to Ant Design in 2025 - Subframe https://www.subframe.com/tips/ant-design-alternatives
[26] antd vs Tailwind CSS - compare differences and reviews? | LibHunt https://www.libhunt.com/compare-ant-design-vs-tailwindcss
[27] ant-design/cssinjs - GitHub https://github.com/ant-design/cssinjs
[28] How to use Ant Design Icons and customize them in ReactJS app https://www.youtube.com/watch?v=faUYaR4Nb1E
[29] React Bootstrap vs Ant Design: Which One is Better in 2025? https://www.subframe.com/tips/react-bootstrap-vs-ant-design
[30] How to customize Ant.design styles - Stack Overflow https://stackoverflow.com/questions/48620712/how-to-customize-ant-design-styles
[31] Reduce Ant Design Bundle Size Multiple Times - LinkedIn https://www.linkedin.com/posts/octa-labs-official_reduce-ant-design-bundle-size-multiple-times-activity-7192040213894905858-emnS
[32] How to update style element in Ant Design React component using ... https://stackoverflow.com/questions/71974731/how-to-update-style-element-in-ant-design-react-component-using-javascript
[33] Bundle size optimization #22698 - ant-design/ant-design - GitHub https://github.com/ant-design/ant-design/issues/22698
[34] CSS in v6 - Ant Design https://ant.design/docs/blog/css-tricks/
[35] Ant Design - The world's second most popular React UI framework https://ant-design.antgroup.com
[36] Does Ant Design Library size effect website performance? https://stackoverflow.com/questions/73658638/does-ant-design-library-size-effect-website-performance
[37] ant-design/antd-style: css-in-js library with antd v5 token system https://github.com/ant-design/antd-style
[38] Icon - Ant Design https://ant.design/components/icon/
[39] Optimizing Performance in React Apps Using Ant Design - Till it's done https://tillitsdone.com/blogs/react-performance-with-ant-design/
[40] Quick Start to CSS in JS - Ant Design Style https://ant-design.github.io/antd-style/guide/css-in-js-intro/
[41] Ant Design vs Shadcn: Which One is Better in 2025? - Subframe https://www.subframe.com/tips/ant-design-vs-shadcn
[42] Ant Design Theme Customization in React JS - YouTube https://www.youtube.com/watch?v=tgD-csfLNUs
[43] Build Smooth Scrolling Parallax Effects with React & Framer Motion https://www.youtube.com/watch?v=E5NK61vO_sg
[44] Are you going to continue using css-in-js? It negatively affects the ... https://github.com/ant-design/ant-design/discussions/43668
[45] Taking Control of the Browser Dark Mode with Ant Design and ... - TY https://www.tzeyiing.com/posts/taking-control-of-the-browser-dark-mode-with-ant-design-and-tailwindcss-for-dark-mode-wizardry
[46] How to Use Framer Motion for React Animations https://blog.pixelfreestudio.com/how-to-use-framer-motion-for-react-animations/
[47] Dark Mode - Ant Design https://ant.design/docs/spec/dark/
[48] Motion - Ant Design https://ant.design/docs/spec/motion/
[49] Blueprint vs Ant Design: Which One is Better in 2025? - Subframe https://www.subframe.com/tips/blueprint-vs-ant-design
[50] Is there a way to change the colour palette for light and dark themes ... https://stackoverflow.com/questions/74653488/is-there-a-way-to-change-the-colour-palette-for-light-and-dark-themes-in-ant-des
[51] Create clipped parallax with framer motion - Stack Overflow https://stackoverflow.com/questions/76777374/create-clipped-parallax-with-framer-motion
[52] @ant-design/cssinjs CDN by jsDelivr - A CDN for npm and GitHub https://www.jsdelivr.com/package/npm/@ant-design/cssinjs
[53] Build a Parallax Section Transition with React and Framer Motion https://www.youtube.com/watch?v=nZ2LDB7Q7Rk
[54] Theming - Refine dev https://refine.dev/docs/ui-integrations/ant-design/theming/
[55] 13 Awesome React Animation Libraries To Elevate Your Design ... https://magicui.design/blog/react-animation-libraries