Vyntra - Animated Multi-Home HTML Template for Studios, Agencies & Portfolios
1 of 1
Loading screenshot

Vyntra: Animated Multi-Home HTML Template for Creative Studios, Agencies & Portfolios

Ten complete, animated home pages. One stylesheet. One script. No build tools.

Vyntra is a premium HTML template for creative businesses that want a website that moves, reacts and feels crafted. It gives you 10 different home page designs (from a cinematic studio site to a 3D interactive experience and a sideways-scrolling showcase) built on the same clean, readable code, so you can pick the look that fits you and customize it in any code editor.

10 Home Pages, 10 Different Looks

# Home page Style Signature features
1 Main Dark, lime accent Cinematic parallax hero, pinned services, horizontal work gallery, color-circle statement, interactive scene, process timeline
2 Creative Dark, colorful Letters that react to the mouse, floating pictures, manifesto with picture pills, service list with hover preview, stacking project cards
3 Agency Cream and coral, serif Endless picture columns, bento services grid, filterable portfolio, accordions, expanding process panels, ring charts, pricing switch, FAQ
4 Portfolio Cool gray and cobalt Personal portfolio: name over an arch portrait, changing job title, skill bars, 3D-tilt case studies
5 Studio Forest green and terracotta Photo-filled headline word, growing hero picture, scroll-driven sticky picture, magazine-style journal
6 Luxury Black and gold Curtain-opening hero, self-drawing gold frame, pinned collections, overlapping lookbook, press quotes
7 Interactive / 3D Navy and aqua, glass Real-time WebGL 3D object (Three.js), 3D ring carousel, 3D tunnel, flip cards, odometer numbers
8 Horizontal Showcase Yellow, black, white The whole page scrolls sideways like a film strip, with a progress bar and jump-to-panel menu
9 Photography Gallery white, thin serif Photo slideshow, masonry gallery with filters, full-width series, film contact-sheet blog
10 Split Screen Teal and peach Two-half hero that grows on hover, halves that scroll in opposite directions, before/after sliders

All ten pages are linked together by a two-column Home dropdown in the menu.

Key Features

Design and animation

  • Smooth, scroll-driven animation powered by GSAP and ScrollTrigger
  • Buttery smooth scrolling with Lenis
  • Pinned sections, horizontal scrolling, parallax, scrub animations, clip-path reveals and text split reveals
  • Real-time 3D on the Interactive page (Three.js / WebGL)
  • Custom animated cursor with hover, text, image-preview and magnetic states (also appears under a finger on touch screens)
  • Page-load preloader that hands over to each page's hero animation
  • Scroll progress line and animated back-to-top button
  • Magnetic buttons, 3D tilt cards with glare, and draggable sliders

Layout and content

  • Fully responsive: desktop, tablet and mobile layouts, with a full-screen animated mobile menu
  • Built on the Bootstrap 5 grid, with each page keeping its own unique design
  • Sections included across the pages: hero, about, services, portfolio/work, process, team, testimonials, clients, pricing, FAQ, blog/journal, stats, CTA and contact
  • A shared popup that opens details for services, projects, team members and articles (content is edited right in the HTML)
  • Contact form with floating labels, animated validation and a send-button animation
  • Newsletter sign-up box (Agency page)
  • Filterable galleries, accordions, tabs, sliders and a pricing toggle

Code quality

  • Clean, readable, commented code: nothing is minified
  • One CSS file and one JavaScript file for all ten pages, organized in numbered sections
  • Each page has its own class prefix, so styles never clash
  • CSS variables for colors and fonts: restyle a page by changing a few values
  • Reusable effects you can add to any element with a single attribute (data-split, data-stagger, data-parallax, data-clip-reveal, data-tilt, data-magnetic and more)
  • Each section's script runs only when that section exists, so you can delete sections safely
  • Semantic HTML, keyboard-friendly navigation, visible focus styles, ARIA attributes on menus, popup, sliders and accordions
  • Built-in reduced-motion support for visitors who prefer less animation

Easy to Customize

  • Change the logo and site name in minutes with Find and Replace
  • Add, remove or rename menu items, and edit the footer
  • Swap images (HTML <img> tags and a few CSS backgrounds)
  • Change colors and fonts per page with CSS variables
  • Add, remove or reorder sections and home pages
  • Switch off individual effects (custom cursor, smooth scroll, magnetic buttons...) with one line each

Complete Documentation Included

A detailed, easy-to-read documentation page is included. It explains:

  • How to set up the template and the file structure
  • How to change the logo, menus, footer, images, colors and fonts
  • How to add, remove and reorder sections and pages
  • How to edit popups and connect the contact and newsletter forms
  • The full CSS and JavaScript reference, with every function listed
  • Troubleshooting and a pre-launch checklist

What's Included

vyntra/
├── index.html                  Home: Main
├── home-creative.html          Home: Creative
├── home-agency.html            Home: Agency
├── home-portfolio.html         Home: Portfolio
├── home-studio.html            Home: Studio
├── home-luxury.html            Home: Luxury
├── home-interactive.html       Home: Interactive / 3D
├── home-horizontal.html        Home: Horizontal Showcase
├── home-photography.html       Home: Photography
├── home-split.html             Home: Split Screen
├── css/style.css               All styles
├── js/main.js                  All scripts
└── documentation/index.html    Documentation

Technology

Library Version Use
Bootstrap (CSS only) 5.3.3 Grid and utility classes
GSAP + ScrollTrigger 3.12.5 Animation and scroll effects
Lenis 1.1.13 Smooth scrolling
Three.js r128 3D scene (Interactive page only)
Google Fonts - Typography (a different set of fonts per page)

Libraries and fonts load from public CDNs.

Good to Know

  • Images: the demo pictures are placeholders from Unsplash and are not part of the template files. Replace them with your own pictures before you publish.
  • Forms: the contact form and newsletter box are front-end only. Connect them to a form service or your own backend (the documentation shows how, with an example).
  • Internet connection: needed while viewing the pages, because the libraries and fonts load from CDNs (they can also be downloaded and hosted yourself).
  • Browsers: designed for current versions of Chrome, Edge, Firefox and Safari. Internet Explorer is not supported.
  • Demo content: all names, text, prices and email addresses are sample content.

Perfect For

Design studios · Creative agencies · Architects and interior designers · Photographers · Freelance designers and developers · Luxury and lifestyle brands · Product and tech studios · Anyone who wants a website that stands out

Find more items like this

Collections