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.