Hayler is a premium creative portfolio HTML template built for designers, agencies, photographers, and studios who refuse to blend in. Powered by GSAP 3 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 with over 15 years and 40,000+ sales behind it. No WordPress. No page builder. No Node.js. No build process. Open index.html and your website works — out of the box, from the first second.
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 3 — 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, Facebook Pixel — snippets ready, just add your ID. Works seamlessly with AJAX page loads
Pages Included — 16 HTML Pages
- index.html — Full-screen parallax showcase slider hero, pinned list animation, portfolio grid with video hover, marquee section, cylinder scroll list, clients table
- portfolio-grid.html — Full portfolio grid with sort/filter by category, video on hover, layout switching (grid / list), portfolio thumbnail follower effect
- portfolio-carousel.html — Horizontal carousel showcase with cinematic full-screen slides
- portfolio-lists.html — Archive list format with showcase lists slider
- contact.html — Live clock, text rotator, pinned list rotator with images, contact form
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 & Projects
- 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
- 7 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 — auto-navigates to next project at scroll end
- Flip Title Transition — project title morphs into next page hero title
- Zoom Gallery — fullscreen zoom on click for project images
- Inline Video Player — custom-styled HTML5 video with controls
- Client Showcase Section — clients table built for credibility, with prev/next navigation
- Testimonials-ready Layout — space designed for social proof, fits naturally in any content row
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
- 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
- 4-panel 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, sitemap, robots.txt
- Google Analytics ready — gtag snippet included, just add your ID
- Facebook Pixel compatible — ad tracking works correctly with AJAX transitions
- htaccess included — performance and security rules
- sitemap.xml and robots.txt — ready to submit
- 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 a framework with 15 years and 40,000+ sales. Hayler is powered by the ClaPat Framework — the same engine behind themes with thousands of 5-star reviews on Themeforest since 2009. The code is 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 forum — not Themeforest comment threads where questions get buried. Real responses, within 24-48 hours.
Dark and light — 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.
Infinite scroll portfolio — without a backend. AJAX portfolio navigation built in pure HTML. Visitors browse your work without ever reloading a page, without WordPress, without a database. Just files.
Built for AI-Assisted Development
Hayler ships with a dedicated AI Context File — a structured .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, your own server — for as little as $5/month.
- 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, modifiable. 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.
- Getting Started — from download to live website
- File Structure — every file and folder explained
- Customization — colors, fonts, logo, preloader, navigation
- Adding New Pages — step-by-step from blank.html
- Components Reference — every component with real code examples
- Changelog — every update documented
Support
Support for Hayler is handled through a dedicated helpdesk forum — not buried in Themeforest comment sections where questions get lost and answers are hard to find. Support is included for 6 months from purchase date, with the option to extend.
- 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