🌌 Antigravity Workflow Lab

Premium Dark Mac OS Window & Animated SVG Node Workflows

Demo Suggestion: Upload a .gif or .webp of your workflow running here! Replace this block with ![Workflow Demo](./preview.gif)

✨ Interactive Features

Each node in the ecosystem behaves autonomously and triggers a specific data flow through the canvas. The lines are rendered via responsive <svg> curves (stroke-dashoffset animation) and glow using custom SVG filters.

Node	Glow Color	Effect Triggered on Hover
Trigger	#00E5FF	Master node. Emits a cyan neon glow across main connection paths.
LLM	#A855F7	Branches out purple neon flows towards the Notion database and Status Badge.
Email	#F59E0B	Activates the orange flow sequence leading towards the LLM node.
Slack	#3B82F6	Node emits a continuous blue light pulse. Connects down to the Status Badge.
Notion	#EC4899	Triggers a pink data flow path straight to the Status Badge node.

Fluid Levitation: All nodes share a strict 4-second Framer Motion levitation with staggered delays to achieve a natural, floating ecosystem feel over the #0B0E14 technical grid background.

---

⚙️ System Configuration

To run this laboratory correctly on a Windows environment using PowerShell, we applied specific configurations:

1. PowerShell Execution Policy

By default, Windows may block Vite and other Node module execution scripts. You must enable RemoteSigned policies on your machine to permit local script execution:

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

2. Node.js & Vite Setup

Dependencies were installed locally, bypassing global installations by using npx. Run the following to replicate the environment:

# 1. Install local dependencies
npm install react-dom vite @vitejs/plugin-react tailwindcss @tailwindcss/vite typescript @types/react @types/react-dom

# 2. Spin up the Vite Dev Server
npx vite --port 3000

---

📝 Commit History Guide

To maintain a clean and professional repository history, please follow this commit sequence when pushing to GitHub:

1. feat: initialize project structure with vite and tailwind v4 Configured the dev environment, installed React, Framer Motion, and setup the Vite config.
2. feat: implement mac os window frame and dark premium grid Added the base structural UI container, header dots, and the #0B0E14 custom background.
3. feat: create base floating node component with framer motion Implemented staggered 4s levitation mechanics and glassmorphism styling for nodes.
4. feat: setup responsive svg canvas and bezier connection paths Added the SVG layer using foreignObject integration for pixel-perfect resizing without misalignment.
5. feat: implement global anti-jump dash animation Injected CSS @keyframes and stroke-dashoffset magic numbers for a continuous optical illusion flow.
6. feat: add universal distinct neon hover states Integrated specific node branding colors (Cyan, Purple, Orange, Blue, Pink) for isolated flow triggers and pulse animations.
7. docs: finalize interactive documentation and system configurations Wrote the comprehensive README including PowerShell setup and feature showcase.

Crafted for the thekaix.com Lab.