# animmaster/obys-clone architecture

> Architecture diagram of the GitHub repository animmaster/obys-clone, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-24). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/animmaster/obys-clone
- Repository: https://github.com/animmaster/obys-clone

## Overview

1. **Project shape**
   - This is a **single-page, browser-only portfolio site**.
   - The repo is very small and centralized: `index.html` is the entry document, `css/dev/index.css` contains the styling, and `js/dev/index.js` contains the interaction logic.
   - There is no visible backend, API layer, or multi-page app structure in the tree.

2. **Entry and composition layer**
   - `index.html` is the top-level composition boundary.
   - It likely wires together the full page sections, loads the CSS and JS, and references assets from `assets/` and `files/`.
   - For an architecture diagram, treat this as the container that hosts all visual sections and all client-side behaviors.

3. **Presentation system**
   - `css/dev/index.css` is the main styling surface.
   - The README calls out **BEM-style CSS** and a **fully responsive layout**, so the CSS layer is responsible for both structure and responsive behavior.
   - Fonts and imagery are stored separately in `assets/fonts` and `assets/img`, which suggests the site uses custom typography and curated visual assets as first-class design inputs.

4. **Motion/interaction orchestration**
   - `js/dev/index.js` is the central coordinator for all client-side interactions.
   - It likely initializes the page, registers event listeners, and connects scrolling, hover, cursor, and media behaviors.
   - This file is the main “behavior hub” of the app, bridging the DOM layer and the animation/rendering layers.

5. **GSAP-driven animation layer**
   - The README explicitly lists **GSAP 3** with **ScrollTrigger**, **SplitText**, and possibly **ScrollSmoother**.
   - This layer handles timed animations, scroll-linked transitions, text splitting/reveal effects, and smooth-scrolling behavior.
   - In a diagram, this sits above the DOM and below the interaction logic: JS triggers GSAP, GSAP animates DOM elements and scroll state.

6. **Preloader subsystem**
   - A dedicated **preloader** exists with a counter and word-fade sequence.
   - This is an early-page state machine that likely gates entry into the main experience until assets/animations are ready.
   - It is probably one of the first flows executed from `index.js`, and it transitions the site from loading state to interactive state.

7. **Scroll experience subsystem**
   - Smooth scroll is a major part of the experience.
   - The site includes a **scroll indicator with speed modulation**, so scroll position and scroll velocity are not just visual state but also part of the UI logic.
   - This subsystem likely depends on scroll events/ScrollTrigger and updates indicator UI in response to user motion.

8. **Hover and cursor-driven interactions**
   - Several interactions are pointer-based: **wavy underline effects**, **text hover effects**, and a **custom video button that follows the cursor**.
   - These are localized UI behaviors driven by mouse/touch position and element hover state.
   - They are distinct from scroll animations: pointer interactions are immediate and element-specific, while scroll effects are global and timeline-based.

9. **WebGL / 3D rendering layer**
   - There are two graphics-heavy subsystems:
     - a **Canvas WebGL “flag” hover** implemented with **Three.js**
     - **displacement-hover project images** implemented with **pure WebGL** and explicitly *not* Three.js
   - This means the repo contains both a framework-based 3D effect and a lower-level shader/canvas effect.
   - Architecturally, these should be treated as separate rendering boundaries, even though both are visual hover effects.

10. **Media subsystem**
   - `files/Obys-Showreel-2022.mp4` indicates an embedded video asset used by the page.
   - The README references a custom video player button that follows the cursor, so video playback is integrated into the interaction layer rather than being a standalone media page.
   - The site likely uses this media as part of the portfolio storytelling, not as generic content hosting.

11. **Asset boundaries**
   - Assets are organized by type:
     - `assets/fonts` for typography
     - `assets/img` for visual content
     - `files/` for the large showreel video
   - This separation matters because the page’s look-and-feel is highly asset-driven; the architecture is mostly about orchestrating design assets with animation and rendering code.

12. **Runtime and deployment model**
   - The project appears to run entirely in the **browser** with standard front-end technologies: HTML, CSS, JavaScript, GSAP, Three.js, and WebGL.
   - There is no sign of server-side rendering, backend APIs, or persistent data stores.
   - For an architecture diagram, the only external dependencies are client-side libraries and static assets.

13. **Practical architectural boundary summary**
   - Think of the repo as three main layers:
     - **Structure/content**: `index.html`
     - **Presentation**: `css/dev/index.css` plus fonts/images/video assets
     - **Behavior/rendering**: `js/dev/index.js` plus GSAP, ScrollTrigger, Three.js, and WebGL shaders/effects
   - The central flow is: page loads → preloader runs → smooth-scroll and animation systems initialize → hover/scroll/cursor interactions drive DOM and canvas effects.

14. **What stands out architecturally**
   - This is not a generic marketing site; it is a **motion-heavy, interaction-heavy portfolio** where animation and visual effects are core product features.
   - The important architecture boundary is between **DOM-based animation** and **canvas/WebGL rendering**, both coordinated by a single client-side controller.

Main entry points: [`js/dev/index.js`](https://github.com/animmaster/obys-clone/blob/main/js/dev/index.js) (Main JS), [`index.html`](https://github.com/animmaster/obys-clone/blob/main/index.html) (index.html), [`assets/img`](https://github.com/animmaster/obys-clone/tree/main/assets/img) (Images), [`css/dev/index.css`](https://github.com/animmaster/obys-clone/blob/main/css/dev/index.css) (Main CSS)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_structure["Structure"]
  node_index_html["index.html<br/>entry document<br/>[index.html]"]
end

subgraph group_presentation["Presentation"]
  node_styles["Main CSS<br/>BEM styles<br/>[index.css]"]
  node_fonts[("Fonts<br/>typography assets")]
  node_images[("Images<br/>visual assets")]
  node_video["Showreel<br/>media asset"]
end

subgraph group_behavior["Behavior"]
  node_script["Main JS<br/>interaction hub<br/>[index.js]"]
  node_preloader(("Preloader<br/>loading state"))
  node_scroll_ui(("Scroll UI<br/>scroll experience"))
  node_pointer_ui(("Pointer UI<br/>hover interactions"))
  node_media_ui(("Video Button<br/>media interaction"))
end

subgraph group_rendering["Rendering"]
  node_gsap["GSAP<br/>animation engine"]
  node_scrolltrigger["ScrollTrigger<br/>scroll animation"]
  node_splittext["SplitText<br/>text animation"]
  node_smoother["ScrollSmoother<br/>smooth scroll"]
  node_threejs["Three.js<br/>3D library"]
  node_webgl_flag{{"Flag Hover<br/>canvas 3D effect"}}
  node_webgl_displace{{"Displace Hover<br/>webgl effect"}}
end

node_index_html -->|"loads"| node_styles
node_index_html -->|"boots"| node_script
node_index_html -->|"uses"| node_fonts
node_index_html -->|"uses"| node_images
node_index_html -->|"embeds"| node_video
node_script -->|"initializes"| node_preloader
node_script -->|"orchestrates"| node_scroll_ui
node_script -->|"handles"| node_pointer_ui
node_script -->|"drives"| node_media_ui
node_script -->|"uses"| node_gsap
node_script -->|"uses"| node_scrolltrigger
node_script -->|"uses"| node_splittext
node_script -->|"uses"| node_smoother
node_scroll_ui -->|"depends on"| node_scrolltrigger
node_scroll_ui -->|"depends on"| node_smoother
node_pointer_ui -->|"animates with"| node_gsap
node_media_ui -->|"plays"| node_video
node_webgl_flag -->|"built on"| node_threejs
node_script -->|"initializes"| node_webgl_flag
node_script -->|"initializes"| node_webgl_displace
node_webgl_flag -->|"maps to"| node_images
node_webgl_displace -->|"renders"| node_images
node_styles -->|"styles"| node_index_html

click node_index_html "https://github.com/animmaster/obys-clone/blob/main/index.html"
click node_styles "https://github.com/animmaster/obys-clone/blob/main/css/dev/index.css"
click node_fonts "https://github.com/animmaster/obys-clone/tree/main/assets/fonts"
click node_images "https://github.com/animmaster/obys-clone/tree/main/assets/img"
click node_video "https://github.com/animmaster/obys-clone/blob/main/files/Obys-Showreel-2022.mp4"
click node_script "https://github.com/animmaster/obys-clone/blob/main/js/dev/index.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_index_html toneBlue
class node_styles,node_fonts,node_images,node_video toneAmber
class node_script,node_preloader,node_scroll_ui,node_pointer_ui,node_media_ui toneMint
class node_gsap,node_scrolltrigger,node_splittext,node_smoother,node_threejs,node_webgl_flag,node_webgl_displace toneRose
```

## Components

### Structure

Document boundary and page composition

- [index.html](https://github.com/animmaster/obys-clone/blob/main/index.html): entry document · Top-level page container and composition boundary · `index.html`

### Presentation

Styling and static design assets

- [Main CSS](https://github.com/animmaster/obys-clone/blob/main/css/dev/index.css): BEM styles · Primary responsive styling surface · `css/dev/index.css`
- [Fonts](https://github.com/animmaster/obys-clone/tree/main/assets/fonts): typography assets · Custom font assets used by the visual design · `assets/fonts`
- [Images](https://github.com/animmaster/obys-clone/tree/main/assets/img): visual assets · Static imagery used throughout the portfolio · `assets/img`
- [Showreel](https://github.com/animmaster/obys-clone/blob/main/files/Obys-Showreel-2022.mp4): media asset · Embedded portfolio video asset · `files/Obys-Showreel-2022.mp4`

### Behavior

Client-side orchestration and interaction logic

- [Main JS](https://github.com/animmaster/obys-clone/blob/main/js/dev/index.js): interaction hub · Coordinates page initialization and user interactions · `js/dev/index.js`
- **Preloader**: loading state · Counter and word-fade entry sequence
- **Scroll UI**: scroll experience · Smooth scrolling and scroll indicator behavior
- **Pointer UI**: hover interactions · Underline, text, and cursor-follow behaviors
- **Video Button**: media interaction · Cursor-following video control and playback entry

### Rendering

Animation and visual effect engines

- **GSAP**: animation engine · Timeline and motion orchestration library
- **ScrollTrigger**: scroll animation · Scroll-linked animation driver
- **SplitText**: text animation · Text splitting and reveal effects
- **ScrollSmoother**: smooth scroll · Smooth scrolling layer used for motion feel
- **Three.js**: 3D library · Framework for the canvas-based flag hover effect
- **Flag Hover**: canvas 3D effect · WebGL flag hover rendering implemented with Three.js
- **Displace Hover**: webgl effect · Pure WebGL displacement hover for project images

## Connections

- index.html → Main CSS: loads · The page imports the main stylesheet
- index.html → Main JS: boots · The page loads the main interaction script
- index.html → Fonts: uses · Composition relies on custom typography assets
- index.html → Images: uses · Page sections reference curated imagery
- index.html → Showreel: embeds · The portfolio showreel is part of the page experience
- Main JS → Preloader: initializes · The main script drives the loading sequence
- Main JS → Scroll UI: orchestrates · The main script wires scroll state and UI updates
- Main JS → Pointer UI: handles · The main script binds pointer and hover interactions
- Main JS → Video Button: drives · The main script coordinates video control behavior
- Main JS → GSAP: uses · Motion logic is built on GSAP timelines
- Main JS → ScrollTrigger: uses · Scroll-linked effects rely on ScrollTrigger
- Main JS → SplitText: uses · Text reveal effects use SplitText
- Main JS → ScrollSmoother: uses · Smooth-scrolling behavior is layered in here
- Scroll UI → ScrollTrigger: depends on · Scroll experience reacts to scroll-linked triggers
- Scroll UI → ScrollSmoother: depends on · Scroll indicator and pacing follow smooth scroll state
- Pointer UI → GSAP: animates with · Hover and cursor transitions are animated via GSAP
- Video Button → Showreel: plays · The custom control activates the showreel asset
- Flag Hover → Three.js: built on · The flag hover effect uses Three.js
- Main JS → Flag Hover: initializes · The interaction hub sets up the 3D hover scene
- Main JS → Displace Hover: initializes · The interaction hub sets up the image hover shader effect
- Flag Hover → Images: maps to · 3D hover visuals are composed with site imagery
- Displace Hover → Images: renders · Displacement effects operate on project images
- Main CSS → index.html: styles · The stylesheet defines the responsive page layout