WordPress Version Avaialble

ZYLYF – Premium Brutalist Portfolio HTML Template

Professional manual structural setup for elite aesthetics, WebGL performance, and seamless user experiences.

01. Overview & Core Features

ZYLYF is a modern premium HTML template designed for elite creative agencies, digital studios, branding teams, and visual showcase websites. Its design language combines brutalist typography, Aetheris WebGL engines, and polished interaction details.

• WebGL Metaball Sliders: High-end, performant 3D slider powered by WebGL & the Aetheris engine.
• 100% Vanilla JS: Zero jQuery dependencies. Built entirely with native ES6+ features for top performance.
• Brutalist UI & Fluid Typography: Bold brutalist typography scales perfectly across all devices using CSS clamp().

02. Included Content & Layouts

The package contains 17+ static production files built for high-end customization variants:

03. CSS Variable Map System

Customize the entire project identity globally by modifying the clean architecture variables inside the root system of assets/css/style.css:

:root {
  /* Brand System Accent Colors */
  --cpf-color-white: #ffffff;
  --cpf-color-dark: #0a0a0a;
  --cpf-color-light: #f5f5f5;
  --cpf-color-page-bg: #121212;

  /* Typography Fluid Layout Scale */
  --cpf-font-display: 'Geist', sans-serif;
  --cpf-font-body: 'Inter', sans-serif;
}

04. Clean File Structure

zylyf/
├── index*.html (Home variants)
├── about.html, work.html, services.html, etc.
└── assets/
    ├── css/
    │   └── style.css (Core design system)
    ├── js/
    │   ├── main.js (Interaction engine)
    │   ├── tft-webgl-metaballs.js (Slider engine)
    │   └── tft-mb-fx.js (UI sync)
    └── img/
        └── (Asset library)

05. Customization & Code Guidelines

• Immutable BEM Classes: All elements follow strict BEM structures for predictable styling.
• Object Namespacing: All template logic is cleanly encapsulated within a single Global Object workspace to prevent conflicts.
• Zero Dependencies: No jQuery, React, or Tailwind overhead—built entirely with pure, native web standards.

Note: Images used in the live preview are for demonstration purposes and are replaced with placeholders in the main download package.