# Onda, a free design studio website template > One-page website for a design, brand or digital agency. One HTML file with GSAP scroll animations, no build step, MIT license. Made by 8B (https://8b.com/). A one-page site for an invented brand, product and AI studio with offices in two cities: work, long-term clients, services, process, team, news and contact. Black, white and one violet; every heading ends in a violet dot, and the giant full stop after "Hello" is a round photo that travels into the next heading, while the case studies slide on a track that bends into a rotating wheel. - Page: https://8b.com/templates/onda/ - Live demo: https://8bsite.github.io/design-studio-website-template/ - Repository (GitHub template): https://github.com/8bsite/design-studio-website-template - Download ZIP: https://github.com/8bsite/design-studio-website-template/archive/refs/heads/main.zip - Size: 135 KB, 26 photos (Unsplash), fonts: Gabarito and Onest - Motion: GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.4 smooth scroll ## Use it with an AI coding agent Download the files into the project (Windows PowerShell: `curl.exe`): ```bash curl -LO https://raw.githubusercontent.com/8bsite/design-studio-website-template/main/index.html curl -LO https://raw.githubusercontent.com/8bsite/design-studio-website-template/main/AGENTS.md curl -LO https://raw.githubusercontent.com/8bsite/design-studio-website-template/main/LICENSE curl -LO https://raw.githubusercontent.com/8bsite/design-studio-website-template/main/CREDITS.md ``` Then: ```text Read AGENTS.md, then edit index.html. Use this template as the base for a studio or agency site for . Keep the layout, the motion and the single-file format; replace the brand name, copy, photos, client names, results, dates, addresses and contacts, and recolour it through the CSS variables if needed. ``` Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/design-studio-website-template my-site`. ## Design Onda is a design studio website template for a brand, product or AI studio: case studies, long-term clients, services, process, team, news and two offices on one page. It works just as well for a digital agency, a UX team or a web design agency. - Palette: #0d0c11 (near-black bands and text), #ffffff (white bands, text on black), #6c3cff (violet dots, buttons, process ring, contact section), #efeef4 (pale cards for services and the form), #aaa7b4 (muted text on black), #5d5a67 (secondary text on white), #1f1d26 (dark base under photos) - Fonts: Gabarito (extra bold, tightly tracked headings; Hello and Bye fill the width), Onest (body, labels, buttons and badges) Black, white and one violet. Every heading ends in a round violet dot, echoed by the round photo full stops after Hello and Bye and the dot in each pill button. Cards have large rounded corners, studio photos form a scattered collage, and form fields are bare underlines. ## Sections and motion - **Navigation** (navigation): fixed top bar: wordmark, section links, Start a project button; phone menu overlay - **Hello** (hero): first screen: a one-word greeting whose full stop is a giant round photo (demo: "Hello"). Motion: Smooth scrolling runs page-wide; headings rise as their dot drops in. Scrolling away carries the round Hello photo down into the next heading's dot. - **We make the things people come back to** (statement): two-line statement of what the studio does, a lead paragraph and an index of links into the page. Motion: Tied to scroll, the two heading lines slide up, the dot pops in, and the lead darkens word by word. - **Selected work** (work): case studies: five large cards on a horizontal track (demo: five client launches). Motion: Pinned, five case cards slide sideways with photos panning inside them, then bend onto a curve as the section ends. - **Never a one-off** (again): long-term clients: six cards on a wheel that turns with scroll (demo: years of partnership). Motion: Pinned, six client cards ride the rim of a large wheel that swings into place and turns as you scroll. - **What we do** (capabilities): services: five cards that stack as you scroll, each with deliverable badges and a photo. Motion: Service cards stick and stack, each shrinking and darkening under the next; photos open from a circle as they appear. - **How we work** (method): process: four steps beside a ring the scroll draws round (demo: Listen, Make, Measure, Again). Motion: Tied to scroll, a violet arc draws round the sticky ring and each station dot pops as its step brightens. - **Inside the studio** (studio): team and careers: photo collage that deals out from a pile, with open roles. Motion: Tied to scroll, the collage photos start as a tilted pile in the centre and deal out to their places. - **Ideas and news** (journal): news and articles: four stories beside a sticky photo frame. Motion: The photo frame stays put while stories pass; each brightens on arrival and its photo opens in a circle. - **Fair questions** (faq): questions and answers (native
) - **Let's talk** (contact): violet contact field: big "Let's talk", email, two offices with phones, and a form (placeholders). Motion: As the violet section scrolls in, Let's talk grows from regular to extra bold, then its white dot drops in. - **Footer** (footer): closing greeting "Bye" with the round photo full stop, link columns, newsletter, copyright and the Design: 8B credit. Motion: Tied to scroll, Bye rises while its full stop grows from a dot into a large round photo. ## Good for - design, brand or digital agency - product or UX studio - creative or marketing agency with case studies - consultancy that shows clients, services and process on one page ## Questions **How is the round photo after Hello made?** It is a circular frame over a square photo, sized to the full stop, with a thin orbit ring and a violet moon. Swap the picture in the markup; the footer repeats it after Bye. **Do the forms send anything?** Not yet. The project form in the contact section and the footer newsletter field check input and show a message, but send nothing until connected to a form service such as Formspree or Netlify Forms. ## Before publishing Replace: social preview image, favicon, email address, phone number, contact form (sends nothing yet) and social media links, plus the invented demo facts (prices, dates, addresses). ## License Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. The "Design: 8B" footer link is optional.