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.

Similar products

Others

Trakirna - Transport & Logistics WordPress

Themeforest

$4.99 4.8 (4.4K)

Others

Tasty Daily - Grocery Store & Food WooCommerce Theme

Themeforest

$4.99 4.8 (4.5K)

Others

NariHealth Women's Health Consultant WordPress Theme

Themeforest

$4.99 4.8 (4.5K)

• 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:

<thead>

</thead>
<tbody>

</tbody>

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.