animmaster/obys-clone

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.