Hayler - Creative Portfolio HTML Template

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 presenceFreelance designers and photographers building their portfolioStudios showcasing case studies and client workDevelopers who want a solid, clean HTML foundation to build onTechnology StackGSAP 3 - the industry-standard animation engine, powering everything from scroll effects to page transitionsLenis - buttery-smooth scroll that elevates every interactionVanilla JS - no jQuery, no heavy dependencies, just clean performant codeCompatible Browsers: Chrome, Firefox, Safari, Edge - fully tested across all modern browsersAd Tracking Compatible: Google Analytics, Facebook Pixel - snippets ready, just add your ID. Works seamlessly with AJAX page loadsPages Included - 16 HTML Pagesindex.html - Full-screen parallax showcase slider hero, pinned list animation, portfolio grid with video hover, marquee section, cylinder scroll list, clients tableportfolio-grid.html - Full portfolio grid with sort/filter by category, video on hover, layout switching (grid / list), portfolio thumbnail follower effectportfolio-carousel.html - Horizontal carousel showcase with cinematic full-screen slidesportfolio-lists.html - Archive list format with showcase lists slidercontact.html - Live clock, text rotator, pinned list rotator with images, contact formInteractions & AnimationsAJAX Page Transitions - silky smooth page loads with custom transition covers, no full page reloadParallax Showcase Slider - full-screen hero slider with parallax depth effectHorizontal Carousel Showcase - cinematic swipe-to-navigate portfolio carouselLists Showcase Slider - archive-style navigation sliderContent Slider - looped carousel for project pages, light and dark variantsSmooth Scroll - Lenis-powered scroll engine, consistent across all pagesParallax Effects - on hero media, footer, images, background elementsScroll Animations - elements animate as they enter the viewportPinned Scroll Sections - content pins while page scrolls, cinematic effectGSAP ScrollTrigger - advanced scroll-linked animations throughoutPortfolio & ProjectsPortfolio Grid - filterable by category, full-screen thumbnailsPortfolio Sort & Filter - Flip.js animated sort between categoriesGrid / List Layout Switch - toggle view with smooth Flip animationVideo on Hover - portfolio items play video on hover, lazy loadedThumbnail Image Follower - images follow the cursor on portfolio hover7 Unique Case Study Layouts - pre-built project page structures designed for problem/solution storytelling, each with a different visual approachPinned Project Navigation - next project preview pinned while scrollingAuto-trigger Navigation - auto-navigates to next project at scroll endFlip Title Transition - project title morphs into next page hero titleZoom Gallery - fullscreen zoom on click for project imagesInline Video Player - custom-styled HTML5 video with controlsClient Showcase Section - clients table built for credibility, with prev/next navigationTestimonials-ready Layout - space designed for social proof, fits naturally in any content rowText AnimationsText Mask Reveal - words reveal on scroll from a clipping maskText Fill Scrub - text fills with color tied to scroll positionText Slide - text slides in on scrollText Shuffle - characters shuffle before revealingText Rotator - cycles through multiple words with animationAnimated Counter - numbers count up when entering viewportAnimated Underline - SVG underline draws in on scrollComponentsMarquee - infinite scrolling text with drag support and variable speedCylinder List - 3D rotating list for services/skillsPinned List (5 modes) - direct scroll, stretch, top-reveal, brick, scalePinned List Rotator - list items cycle with accompanying imageImages Trail Effect - images appear trailing the cursor movementClients Table with Slider - clients grid with prev/next navigationLive Clock - timezone-aware real-time clock for footerScroll Rotate Element - elements rotate as page scrollsAnimated Line - lines draw in on scrollContact Form - PHP-powered, ready for configurationHeader & NavigationClassic Menu with burger button, dropdowns, responsive collapseFullscreen Menu - overlay navigation with animated entrySticky Burger Button - stays visible while scrollingDynamic Header Color - header inverts automatically based on section backgroundHeader Gradient - subtle gradient behind header for readabilityDual Logo - black and white versions switch automaticallyCursorCustom Cursor - magnetic, morphing cursor with multiple statesCursor Hover Effects - blur, solid, outline modes per elementCursor Info Text - shows contextual labels (Open, Drag, Discover…)Cursor Drag Indicator - activates in sliders automaticallyCursor Magnetic Buttons - buttons attract the cursor on hoverPreloaderAnimated Percentage Preloader - digit-slot style number animation4-panel Reveal - animated curtain reveal after loadSafety Timeout - auto-completes after 10 seconds if assets are slowTechnicalAI 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 instantlyNo Build Tools Required - open in browser and it worksNo Node.js, No npm, No webpack - pure HTML/CSS/JSCSS Variables - change colors, fonts, spacing from one fileFluid Typography - font sizes and spacing scale smoothly with viewport widthDark & Light Color Schemes - per-page background switching built inRetina Ready - sharp on all high-density displaysFully Responsive - tested on all screen sizes and devicesMobile-optimized - animations adapt or disable on touch devicesLazy Video Loading - videos load only when needed, no performance penaltySEO-ready structure - semantic HTML, canonical, meta tags, sitemap, robots.txtGoogle Analytics ready - gtag snippet included, just add your IDFacebook Pixel compatible - ad tracking works correctly with AJAX transitionshtaccess included - performance and security rulessitemap.xml and robots.txt - ready to submitWell Documented - full online documentation at dedicated URL