Hayler is a premium creative portfolio HTML template built for designers, agencies, photographers, and studios who refuse to blend in. Powered by GSAP and Lenis smooth scroll, it delivers cinema-quality animations, seamless AJAX page transitions, and immersive scroll effects, with zero build tools, zero Node.js, and zero configuration. Download, open in browser, launch.

Built on the ClaPat Framework, a battle-tested front-end engine rebuilt from scratch this year after 15 years and 40,000+ sales of real-world creative projects. Every feature was shaped by client needs, by what agencies actually ask for, what portfolios actually require, what creative websites need to perform and impress. The result is a comprehensive toolkit that covers every common pattern in modern creative web design, so you spend time on content and identity.

Who is it for?

Creative agencies that need a premium online presence
Freelance designers and photographers building their portfolio
Studios showcasing case studies and client work
Developers who want a solid, clean HTML foundation to build on

Technology Stack

GSAP — the industry-standard animation engine, powering everything from scroll effects to page transitions
Lenis — buttery-smooth scroll that elevates every interaction
Vanilla JS — no jQuery, no heavy dependencies, just clean performant code
Compatible Browsers: Chrome, Firefox, Safari, Edge — fully tested across all modern browsers
Ad Tracking Compatible: Google Analytics – snippet ready, just add your ID. Works seamlessly with AJAX page loads

Interactions & Animations

AJAX Page Transitions — silky smooth page loads with custom transition covers, no full page reload
Parallax Showcase Slider — full-screen hero slider with parallax depth effect
Horizontal Carousel Showcase — cinematic swipe-to-navigate portfolio carousel
Lists Showcase Slider — archive-style navigation slider
Content Slider — looped carousel for project pages, light and dark variants
Smooth Scroll — Lenis-powered scroll engine, consistent across all pages
Parallax Effects — on hero media, footer, images, background elements
Scroll Animations — elements animate as they enter the viewport
Pinned Scroll Sections — content pins while page scrolls, cinematic effect
GSAP ScrollTrigger — advanced scroll-linked animations throughout

Portfolio Features

Portfolio Grid — filterable by category, full-screen thumbnails
Portfolio Sort & Filter — Flip.js animated sort between categories
Grid / List Layout Switch — toggle view with smooth Flip animation
Video on Hover — portfolio items play video on hover, lazy loaded
Thumbnail Image Follower — images follow the cursor on portfolio hover
8 Unique Case Study Layouts — pre-built project page structures designed for problem/solution storytelling, each with a different visual approach
Pinned Project Navigation — next project preview pinned while scrolling
Auto-trigger Navigation — activate auto-navigate to next project at scroll end
Inline Video Player — custom-styled HTML5 video with controls

Text Animations

Text Mask Reveal — words reveal on scroll from a clipping mask
Text Fill Scrub — text fills with color tied to scroll position
Text Slide — text slides in on scroll
Text Shuffle — characters shuffle before revealing
Text Rotator — cycles through multiple words with animation
Animated Counter — numbers count up when entering viewport
Animated Underline — SVG underline draws in on scroll

Components

Marquee — infinite scrolling text with drag support and variable speed
Cylinder List — 3D rotating list for services/skills
Pinned List (5 modes) — direct scroll, stretch, top-reveal, brick, scale
Pinned List Rotator — list items cycle with accompanying image
Images Trail Effect — images appear trailing the cursor movement
Clients Table with Slider — clients grid with prev/next navigation
Live Clock — timezone-aware real-time clock for footer
Scroll Rotate Element — elements rotate as page scrolls
Animated Line — lines draw in on scroll
Image Follower — single image follows the cursor on hover
Images Trail — multiple images trail the cursor across a section
Contact Form — PHP-powered, ready for configuration

Header & Navigation

Classic Menu with burger button, dropdowns, responsive collapse
Fullscreen Menu — overlay navigation with animated entry
Sticky Burger Button — stays visible while scrolling
Dynamic Header Color — header inverts automatically based on section background
Header Gradient — subtle gradient behind header for readability
Dual Logo — black and white versions switch automatically

Cursor

Custom Cursor — magnetic, morphing cursor with multiple states
Cursor Hover Effects — blur, solid, outline modes per element
Cursor Info Text — shows contextual labels (Open, Drag, Discover…)
Cursor Drag Indicator — activates in sliders automatically
Cursor Magnetic Buttons — buttons attract the cursor on hover

Preloader

Animated Percentage Preloader — digit-slot style number animation
Dynamic Stripes Reveal — animated curtain reveal after load
Safety Timeout — auto-completes after 10 seconds if assets are slow

Technical

AI Context File included — structured .md with full template map, all variables, data-attributes, component examples, and ready-made AI prompts. Load once in Cursor, Copilot, or Claude — your AI understands the entire template instantly
No Build Tools Required — open in browser and it works
No Node.js, No npm, No webpack — pure HTML/CSS/JS
CSS Variables — change colors, fonts, spacing from one file
Fluid Typography — font sizes and spacing scale smoothly with viewport width
Dark & Light Color Schemes — per-page background switching built in
Retina Ready — sharp on all high-density displays
Fully Responsive — tested on all screen sizes and devices
Mobile-optimized — animations adapt or disable on touch devices
Lazy Video Loading — videos load only when needed, no performance penalty
SEO-ready structure — semantic HTML, canonical, meta tags
Google Analytics ready — gtag snippet included, just add your ID
Well Documented — full online documentation at dedicated URL

What Makes Hayler Different

Other templates give you animations. Hayler gives you a choreography. Every transition, every scroll effect, every hover interaction is designed as part of a whole — not assembled from separate plugins. The result feels like a single, cohesive experience, not a collection of effects.

Built on the ClaPat Framework, the same engine behind thousands of 5-star reviews on Themeforest since 2009, now fully rebuilt from scratch for modern creative web standards. Clean, documented, and built to last.

No tools. No friction. No excuses. While competitors require npm, webpack, or a local server setup just to see the template, Hayler opens in any browser, from any folder, in 30 seconds. That’s not a compromise. That’s a feature.

Documentation that’s actually useful. No PDF buried in a zip folder from 2019. Full online documentation, always up to date, searchable, readable on any device. Every component explained with real examples.

Support that actually answers. Dedicated HelpDesk Contact Form. Real responses, within 24-48 hours.

Dark and light mode, your choice, per page. Not a single global toggle. Each section, each page can have its own color scheme — and the header adapts automatically. No CSS hacks needed.

Built for AI-Assisted Development

Hayler ships with a dedicated AI Context File, a structured agent.md document that gives any AI code editor a complete map of the template: file structure, all CSS variables, data-attributes, component patterns, and ready-to-use prompts for the most common customization tasks.

Load it once in Cursor, GitHub Copilot, or Claude and your AI assistant understands the entire template instantly. Customizations that used to take hours of reading source code take minutes.

Complete file and folder map with descriptions
Every CSS variable from variables.css, colors, fonts, spacing, cursor, breakpoints
All data-attributes and what they control
Every component with copy-paste HTML examples
Step-by-step guide for adding new pages
Ready-made prompts: “Change the accent color”, “Add a new page”, “Replace the hero title”

This is the first HTML creative template on Themeforest with a dedicated AI workflow built in.

Why HTML Over No-Code Platforms

No-code website builders look appealing until you read the fine print.

You own the code. Completely. Framer, Webflow, and similar platforms generate code you cannot fully control. You’re locked into their ecosystem, their hosting, their pricing, their future decisions. With Hayler, you download HTML files. They’re yours. Forever. Host them anywhere: shared hosting, VPS, CDN, or your own server.
No monthly platform fees. No-code platforms charge $15-$39/month just to keep your site online, on top of the template price. Hayler is a one-time purchase. Your hosting cost is your only recurring expense.
Animations they cannot replicate. GSAP ScrollTrigger, Lenis smooth scroll, magnetic cursor, these are not available in no-code tools. The difference is visible the moment someone opens the demo.
Full developer access. Every line of CSS, every JavaScript function, every HTML element, open, readable, customizable. No proprietary editors, no locked components, no “upgrade to Pro to access this feature.”
Speed without compromise. No runtime frameworks, no JavaScript overhead from a visual builder. Hayler loads fast because it’s clean HTML, CSS, and JavaScript, exactly what browsers are optimized for.

Documentation

Full documentation is available online, not buried in a PDF. Most templates ship a thin, outdated PDF hidden in a zip folder. Hayler’s documentation lives at a dedicated URL, always up to date, always searchable, always readable on any device.

View Full Documentation →

Getting Started
Template Setup
Customization
Page Structure
- Anatomy of a page
- Page options
- Preloader
- Header
- Hero section
- Main content
- Page nav
- Footer
- Custom cursor
- Adding a new page
Page Transitions
Portfolio System
- Grid
- Carousel
- Infinity lists
- Project page
Components
- Parallax elements
- Appearing elements
- Content rows
- Columns group and cols
- Text animations
- Pinned lists
- Linked list gallery
- List rotator
- Cylinder lists
- Buttons
- Content slider
- Lightbox
- Modals
- Video player
- Accordions
- Marquee
- Counters
- Text rotator
- Copy email
- Team member cards
- Clients slider
- Clock widget
- Contact form
Troubleshooting
Credits
Changelog

Support

Support for Hayler is handled through a dedicated HelpDesk Form. Support is included for 12 months from purchase date, with the option to extend.

Access the Helpdesk →

Getting the template up and running
Questions about any feature or component
Bug reports and fixes
Help understanding the code structure
Guidance on customization

Built by ClaPat — a Power Elite Author on Themeforest since 2009, with 40,000+ sales and a 4.47 average rating across 1,600+ reviews.

Credits

GSAP by GreenSock — gsap.com
Lenis by Studio Freight — github.com/darkroomengineering/lenis
Font Awesome — fontawesome.com
Demo images are NOT included. Sources: Unsplash, Pexels

Changelog

v1.0 — Initial Release — 16 HTML pages, full feature set as described above

Hayler - Creative Portfolio HTML Template