Infinite Scroll Landing Page Website Template

Open index.html through any local web server, or upload the complete folder to a static host. Keep the assets/ directory next to the HTML files. No build step is required. Internet access loads GSAP and Lenis; the Manrope font and bundled photography are local. Opening the files straight from disk works, but the ring between case studies needs a web server to fetch the next page, so from disk each case study wraps on to itself.

Replace every hello@secondtake.example address and the enquiry form destination before publishing. This reserved example domain is not a working inbox. The form in contact.html is a front end only: it validates, shows a confirmation and sends nothing. Connect it to Formspree, Netlify Forms or your CRM by replacing its action and removing the submit handler in initBrief. The dock's project button opens a contact panel with an email link.

Start with your studio name, the photographs and the semantic colour tokens in assets/style.css. Every page is a complete HTML file with the same header, dock, phone sheet and contact panel, so change those on each page.

<main data-page> is the part of each page that changes when the site moves on. Keep the data-scene attribute and a unique ID on each scene inside it. The scene's value supplies the small current-scene label; match its ID in .scene-nav. The first scene must have id="intro" and is what the loop copies, so it must be complete and look right at one viewport high. Tails are generated and must not be authored by hand.

assets/page-router.js handles links, history and focus and is shared code: leave it as it is. Page features are started in initPage in assets/script.js and removed in destroyPage, because a page's own script tags do not run on a soft navigation. Add your own code there.

.scene has a minimum height. Openings overscan for parallax with .scene-media, and data-parallax is a conservative travel multiplier. Header and bottom dock are fixed; their heights are --header-h and --dock-h and scene padding reserves the space. Avoid an opening headline that covers your subject's face; --hero-pos and --hero-pos-m on the scene move a photograph at desktop and phone sizes.

Each case study names its neighbours with two ordinary links in its closing scene, data-next-take and data-prev-take. Those two links are the ring. To add a project, copy a case study, write its content and update the links on its two neighbours; then add a row to work.html and an entry to .sheet-takes on every page. To end the ring, remove the links: that page wraps on to itself like the home page.

As soon as a case study has been open for a moment, it fetches both neighbours in the background and decodes their pictures. If the next page cannot be fetched, the page wraps on to itself until it can. Give images width, height or a reserved box so a page's length is known the moment it arrives. If you change a page's height from script, call relayout() afterwards so the loop's join moves with it.

Footer details belong in a closing scene (.colophon), not after </main>; there is no bottom of the page to put them at in loop mode.

The dock always answers three questions in words: which page, which scene, and what comes next. A case study says "Sit Down, 2 of 6", the scene, then "Next: Thin Glass". Home, work, studio and contact say "Work, scene 1 of 2", the scene, the next scene, then "Back to the top" on their last scene, or "End of the page" with the loop off. Scene names come from data-scene. Case studies keep their first line and next project as text in .reel-where, so change those when you rename or reorder a project.

The ring in .take-ring has one link per case study, each in its project's colour through its page- class. The current one is marked with aria-current="page", sits thicker and fills as you scroll; crossing moves on to the next. On the other four pages the centre shows that page's own progress. --x and --y place each link around the ring: add or remove a project and recalculate them for the new number of segments, and change --turn and the 56 degree arc in the stylesheet to match. Everything inside .reel-place is replaced as each page arrives, so edit it on every page. On phones the ring opens the page sheet, which also holds the loop switch.

Reduced motion wins over the smooth-scroll settings. The loop requires at least two scenes and an owned Lenis instance. An existing window.lenis belongs to the host and is never replaced.

Every page has its own colour, so a visitor always knows where they are. Cobalt #1845ed belongs to home, the studio's own brand colour; the others are chosen from each project's photographs. Dark ink #101527 and white are shared.

To change a page's colour, edit its one line near the top of assets/style.css, for example .page-sit-down. It holds --page and its --page-ink, the same two as number triples, a pale --page-tint for the light scenes, and --page-strong, which is the colour used for small details on that tint and must reach 4.5:1 against it. Write colours as #rrggbb, because the scroll blend reads them. Then change theme-color in that page's <head>. The dock, the ring and the blends either side all follow. Each page chooses its line with the class on <body>, such as <body class="page-sit-down">. Every measured pair is listed in the :root comment.

Photo copy stays white on its scrim whatever the page colour; recheck the scrim against any replacement photograph.

Manrope supplies all roles, from a broad, closely tracked display to small production labels. It is self-hosted in assets/fonts/ (see Fonts below). To change it, swap the @font-face rule at the top of assets/style.css, the font preload on each page and the --font-display / --font-body tokens together.

Manrope is self-hosted in assets/fonts/manrope-latin.woff2, so the page makes no render-blocking third-party font request. The file is the Latin subset Google Fonts serves (a variable font covering every weight the template uses), declared by the @font-face rule at the top of assets/style.css with Google's unicode-range, and preloaded on each page. Licence: SIL Open Font License 1.1, Copyright 2018 The Manrope Project Authors (https://github.com/googlefonts/manrope); the full text is in assets/fonts/OFL.txt. To use Google Fonts instead, delete the @font-face rule and the preload and add the Google Fonts <link> to each page.

Cropped, graded WebP derivatives are included under assets/img/ (about 3.7 MB across ten pages, with a 960px version of each opening photograph for phones). They are illustrative stock assets, and each fictional project's photographs were not made for the client named; replace them with your own work for a live site.

• Open Air, home and contact: Pexels 31317479, Pexels 31317485, Pexels 32439172.
• Sit Down: Pexels 8088390, Pexels 8089657, Pexels 8089650, Pexels 8088372.
• Thin Glass: Pexels 7486963, Pexels 7829816, Pexels 7486868, Pexels 8904098.
• Long Pasture: Pexels 9906532, Pexels 9904172, Pexels 9896800, Pexels 9896379.
• Last Night: Pexels 5193532, Pexels 5193533, Pexels 5193526, Pexels 5156686.
• High Water: Pexels 13812371, Pexels 13812398, Pexels 13812362, Pexels 13812367.
• Studio: Pexels 19224452, Pexels 34007217, Pexels 30396798.

Two of these show incidental words: the clapperboard and director's chair in Sit Down, and a sign on the set in Last Night's second-stage photograph. Check they suit your use.

Photography is covered by the Pexels licence, including permitted website-template use and its restrictions. It is separate from the code licence. Do not imply endorsement by pictured people or resell unaltered stock files.

To use your own images, replace the local WebP files, update dimensions and alt text in the HTML, and keep the same relative paths.

Every page is complete without JavaScript, and links between pages are ordinary links. With JavaScript, crop buttons, filters, the call sheet, scene navigation and the dialog are keyboard operable. The dialog traps focus natively, closes with Escape and restores focus without moving the page. The phone sheet closes with Escape or a tap outside and returns focus to its button.

Loop tails are inert, hidden from assistive technology and contain no duplicated IDs, so Tab never enters one and screen readers meet one page at a time. When the site crosses to a project, its title is announced and focus moves to its heading. Arrow keys, Page Up/Down, Space, Home and End work in the reel, and move on to the next project at the end of a case study; form fields and buttons retain their native keys.

Reduced motion disables smooth and infinite scrolling, image parallax, the moving link and colour blending; page changes and colours are immediate and crop changes are instant. The ring's links are small on purpose and have the same destinations as the case study list on the work page, so nobody depends on hitting them. Colours are never the only signal: the dock says the same in words. Use the Loop toggle to reach finite document edges. In embedded previews, the host's Stop interacting control or Escape releases the frame.

Demo pins: GSAP 3.15.0 with ScrollTrigger; Lenis 1.3.17. GSAP compatibility floor: 3.12+. Lenis is pinned on purpose: crossing between projects carries its scroll position over, so retest the ring after upgrading it. Manrope is self-hosted. Dependencies use ordinary deferred CDN script tags, while the font, all photography and the template's own CSS/JS are local.

If the animation CDN is blocked, pages remain readable, links load pages normally, and the crop, filter, call sheet, form and contact controls still work without animation. If all JavaScript is unavailable, every page and its next-project link remain, the header navigation stays visible on phones, and the filter is hidden.

Modern browsers with native dialog, CSS small viewport units and standard JavaScript APIs. The ring relies on CSS container units, conic-gradient and color-mix, supported from Safari 16.2 and current Chrome and Firefox. The responsive pages use a finite fallback wherever motion is reduced. The scrollbar is hidden while the loop is on, because the reel has no bottom for it to show. Test the loop, navigation and contact panel after integrating with a host page that has its own scroll manager.