A single-page marketing site for a software engineering studio specializing in custom APIs, system integrations, data synchronization, webhooks, automation, and infrastructure.
Wysteria Works designs and builds the integration layer between disconnected business systems — commerce, payments, CRM, ERP, inventory, and notifications. Rather than point-to-point connections, the studio creates a single coordination layer that handles translation, validation, orchestration, and event-driven communication across every system an operation relies on.
| Section | Purpose |
|---|---|
| Hero | Positioning statement with live-animated system cards showing an order flowing through five connected systems |
| Introduction | The landscape: payments, customer data, commerce, operations, and internal tools rarely live in one place |
| One Order, Five Systems | Scroll-driven walkthrough of a single order moving through commerce, payments, inventory, CRM, and notifications |
| Capabilities | Custom APIs, system integrations, data synchronization, webhooks & events, automation — each with an animated visual |
| API Interaction | Live request/response example showing one endpoint synchronizing five systems in a single call |
| Architecture | Six-layer integration model: applications, integration layer, services, events, data, infrastructure |
| Conceptual Study | A representative case: five disconnected systems, one integration layer, one source of truth |
| Approach | Six-phase process: understand, map, design, build, connect, evolve |
| Technologies | Tools the studio reaches for most often, chosen for the problem |
| FAQ | Practical questions worth knowing before reaching out |
| Contact | Form that captures project context and writes submissions to a Supabase database |
| Privacy / Terms | Legal pages with placeholder content for final legal review |
- Scroll-pinned order flow — The "One Order, Five Systems" section pins the viewport and advances through five system states as the user scrolls, with a synced progress line and step indicators
- Animated system cards — Hero cards cycle through an order flow with live status updates, inventory bars, and notification queues
- Scroll-driven word reveal — Introduction section fades system names in sequence as the user scrolls
- Capability visual cycle — Capabilities auto-cycle with dedicated animated diagrams (protocol flow, integration topology, bidirectional sync, webhook dispatch, automation pipeline)
- API lifecycle timeline — Request lifecycle steps animate in sequence when the API interaction section enters the viewport
- Architecture hover detail — Hovering or focusing a layer reveals its responsibilities, examples, and components in a sticky detail panel
- Case study diagram — Static system-to-integration-layer-to-system layout with connector lines and a centered integration layer card
- Smooth scrolling — Lenis provides inertia-based smooth scrolling across the page
- All animations respect
prefers-reduced-motion
| Category | Technology |
|---|---|
| Framework | React 18 + TypeScript |
| Build tool | Vite 5 |
| Styling | Tailwind CSS 3 with custom design system |
| Animation | GSAP + ScrollTrigger |
| Smooth scroll | Lenis (@studio-freight/lenis) |
| Backend | Supabase (PostgreSQL) |
| Icons | Lucide React, React Icons |
| Fonts | Space Grotesk, DM Sans (Google Fonts) |
The site uses a custom dark/light theme system driven by CSS custom properties. A ThemeProvider manages theme state with localStorage persistence and a prefers-color-scheme fallback. Theme transitions are animated with a temporary .theme-transitioning class that applies smooth color transitions across all elements.
- Typography: Space Grotesk for headings, DM Sans for body text, three weights max
- Colors: Indigo accent (
#6366F1dark /#4F46E5light), neutral backgrounds, six-tier text hierarchy - Spacing: 8px-based system with custom Tailwind spacing tokens
- Layout: 12-column grid,
max-w-edge(1600px) andmax-w-content(1440px) containers - Texture: Subtle SVG noise overlay on sections via
.noise-bg
Submissions are stored in a contact_submissions table with row-level security enabled. The form captures name, email, company, project type, current systems, and message. The Supabase client is initialized from environment variables (VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY). (if u want)
- Email: contact@wysteriaworks.com
- Instagram: @wysteriaworks
- YouTube: @wysteriaworks
- GitHub: @beratcode03
- X: @wysteriaworks
Every section is responsive from mobile to ultra-wide. The hero system cards are hidden on mobile (hidden lg:block), the navigation collapses on small screens, the capabilities visual panel shows only on desktop, and the case study diagram switches from horizontal to vertical layout on mobile.
src/
├── App.tsx # Root component with client-side routing
├── main.tsx # Entry point
├── index.css # Tailwind + custom design system
├── components/
│ ├── ButtonLink.tsx # Reusable CTA button
│ ├── CustomSelect.tsx # Accessible dropdown for contact form
│ ├── Navigation.tsx # Fixed header with scroll behavior
│ ├── Roadmap.tsx # Desktop scroll progress + mobile progress bar
│ ├── Section.tsx # Section, Container, Label primitives
│ ├── SystemCard.tsx # Reusable system fragment cards
│ └── ThemeSwitcher.tsx # Dark/light toggle
├── hooks/
│ ├── useOrderFlow.ts # Order state machine for animated cards
│ └── useReveal.ts # GSAP scroll-triggered reveal animations
├── lib/
│ ├── scroll.ts # Lenis smooth scroll setup + scrollToId
│ ├── supabase.ts # Supabase client
│ └── theme-context.tsx # Theme provider and hook
├── pages/
│ └── LegalPages.tsx # Privacy Policy and Terms pages
└── sections/
├── Hero.tsx
├── Introduction.tsx
├── OneOrderFiveSystems.tsx
├── Capabilities.tsx
├── ApiInteraction.tsx
├── Architecture.tsx
├── CaseStudy.tsx
├── Approach.tsx
├── Technologies.tsx
├── FAQ.tsx
├── Contact.tsx
└── Footer.tsx
© 2026 Wysteria Works. All rights reserved.