AC-DC Directionless Experience

An ode to those who feel directionless. A high-performance, visually stunning web experience engineered with modern tooling and modular architecture.

The primary goal of this platform is to identify underlying emotional barriers and design innovative solutions that encourage individuals to seek timely healthcare support for depression. By leveraging an immersive, high-performance animated web experience, the project breaks down stigmas and creates a visually engaging, empathetic environment.

Behind the scenes, this highly interactive experience is powered by a robust modular architecture utilizing custom Vite plugins, segmented CSS, isolated engine scripts, and type-safe TypeScript logic to deliver a flawless 60fps emotional journey.

The following flow illustrates how the modular assets compile via the Vite bundler into the final optimized production build.

graph LR
    subgraph Source Modules
        A[HTML Components]
        B[CSS Style Layers]
        C[TypeScript Logic]
        D[Vendor Modules]
    end

    V((Vite Engine))

    A -->|Custom Plugin| V
    B -->|PostCSS| V
    C -->|esbuild| V
    D -->|ESM Import| V

    subgraph Production Ready
        X[index.html]
        Y[main.css]
        Z[app.js]
    end

    V --> X
    V --> Y
    V --> Z

The repository relies on a strictly typed, modular architecture designed for rapid iteration and clear separation of concerns.

├── assets/
│   └── images/              # Graphical assets and webp imagery
├── components/              # HTML Partials (Injected at build time)
│   ├── hero.html
│   ├── footer.html
│   └── ...
├── js/
│   ├── directionless.ts     # Main application entry point
│   └── modules/             # Segregated TS animation controllers
├── styles/                  # Segmented CSS Architecture
│   ├── main.css             # CSS entry point
│   └── ...                  # Normalize, core, and scoped styles
├── vendor/                  # Third-party isolated dependencies
│   ├── core-engine.js       # Core engine runtime map
│   └── engine_modules/      # Extracted individual module runtimes
├── vite.config.js           # Build configuration & Custom Plugins
└── package.json             # NPM dependencies

1. Install Dependencies

   npm install

2. Start the Development Server

   npm run dev

3. Build for Production

   npm run build

This architectural refinement and project evolution is proudly authored and maintained by:

• Rachit Tiwari
• Mausam Kar
• Sheikh Mohammad Warsi

This project is licensed under the AC-DC License.
See the LICENSE file for complete details and copyright permissions.