SYPHIX - Beyond the STORM

A cinematic Next.js landing page featuring an explosive STORM-to-SYPHIX logo transformation with particle effects, starfield background, and kinetic typography.

Site • Report Bug • Updates

---

🌟 About

SYPHIX STORM's Next Generation — Powered by Project SPACE.

🛠️ Tech Stack

Core Framework

• Next.js 16.0.3 - React framework with App Router
• React 19.2.0 - UI library
• TypeScript 5.x - Type-safe JavaScript

Styling & Design

• Tailwind CSS 4.1.9 - Utility-first CSS framework
• PostCSS 8.5 - CSS processing
• Autoprefixer 10.4.20 - CSS vendor prefixing
• tailwindcss-animate - Animation utilities
• class-variance-authority - Component variant management
• clsx - Conditional className utility
• tailwind-merge - Intelligent Tailwind class merging

UI Components

• Radix UI - Headless UI primitives
  • Accordion, Dialog, Popover, Tooltip, and 25+ more components
• Lucide React - Beautiful icon library
• next-themes - Dark/light theme management

Build Tools

• Turbopack - Next.js ultra-fast bundler
• npm - Package management
• Node.js - Runtime environment

---

🎨 Animation Highlights

STORM → SYPHIX Transformation

The centerpiece of this landing page is the explosive logo transformation:

Vanishing Phase (STORM)

• Explosive Dispersion: Letters scatter with unique trajectories
• Rotation: 45° rotation on each letter
• Scale: Shrinks to 50% size
• Blur: 0-25px progressive blur
• Duration: 2.5 seconds with 100ms stagger

Formation Phase (SYPHIX)

• Multi-Stage: Scattered → Forming → Crystallized
• Rotation: Letters rotate from 30° into alignment
• Scale: 0.7 → 0.9 → 1.0 progressive scaling
• Blur: 25px → 12px → 0px smooth transition
• Duration: 2 seconds with 120ms stagger

Particle System

• Count: 30 dynamic particles
• Travel Distance: 70px diagonal movement
• Scaling: 0.3 → 1.2 → 0.2 organic scaling
• Opacity: 0 → 0.9 → 0 fade curve
• Duration: 2.5-4.5 seconds per particle

---

🚀 Getting Started

Prerequisites

• Node.js 18.x or higher
• npm or pnpm

Installation

1. Clone the repository

   git clone https://github.com/Syphixlabs/Syphix.git
   cd Syphix

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

4. Open your browser

   Navigate to http://localhost:3000
   

Build for Production

npm run build
npm start

---

📁 Project Structure

syphix-storm/
├── app/
│   ├── layout.tsx          # Root layout with metadata
│   ├── page.tsx            # Main landing page
│   └── globals.css         # Global styles
├── components/
│   ├── background.tsx      # Starfield background
│   ├── logo.tsx            # STORM → SYPHIX animation
│   ├── headline.tsx        # Kinetic typography
│   ├── pulsing.tsx         # CTA buttons
│   ├── particles.tsx       # Floating particles
│   └── theme.tsx  # Theme management
├── lib/
│   └── utils.ts            # Utility functions
├── package.json            # Dependencies
├── tailwind.config.ts      # Tailwind configuration
├── tsconfig.json           # TypeScript configuration
└── next.config.mjs         # Next.js configuration

---

📊 Performance

• ⚡ Lighthouse Score: 95+ Performance
• 🎯 First Contentful Paint: < 1.5s
• 🚀 Time to Interactive: < 2.5s
• 📦 Bundle Size: Optimized with Turbopack
• ♿ Accessibility: WCAG 2.1 AA compliant

---

🌐 Browser Support

• ✅ Chrome (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Edge (latest)
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)

---

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

🤝 Contributing

Contributions, issues, and feature requests are welcome!

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

👨‍💻 Author

Syphix Labs

• GitHub: @Syphixlabs

---

🙏 Acknowledgments

• Powered by Project SPACE
• Built with Next.js
• Styled with Tailwind CSS
• Icons from Lucide
• UI primitives from Radix UI

---

SYPHIX — Beyond the STORM

⬆ Back to Top