{ "slug": "onda", "name": "Onda", "title": "Onda, a free design studio website template", "kind": "One-page website for a design, brand or digital agency", "summary": "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.", "fits": [ "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" ], "categories": [ "Agency and studio" ], "tags": [ "agency", "design studio", "creative agency", "portfolio", "case studies", "dark", "violet", "bold typography", "gsap", "scrolltrigger", "lenis", "single-file" ], "language": "en", "size_kb": 135, "photos": 26, "fonts": [ "Gabarito", "Onest" ], "libraries": [ "https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js", "https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js", "https://cdn.jsdelivr.net/npm/lenis@1.3.4/dist/lenis.min.js" ], "browsers": "Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).", "sections": [ { "key": "navigation", "id": "navigation", "heading": "", "about": "fixed top bar: wordmark, section links, Start a project button; phone menu overlay" }, { "key": "hero", "id": "hero", "heading": "Hello", "about": "first screen: a one-word greeting whose full stop is a giant round photo (demo: \"Hello\")" }, { "key": "statement", "id": "statement", "heading": "We make the things people come back to", "about": "two-line statement of what the studio does, a lead paragraph and an index of links into the page" }, { "key": "work", "id": "work", "heading": "Selected work", "about": "case studies: five large cards on a horizontal track (demo: five client launches)" }, { "key": "again", "id": "again", "heading": "Never a one-off", "about": "long-term clients: six cards on a wheel that turns with scroll (demo: years of partnership)" }, { "key": "capabilities", "id": "capabilities", "heading": "What we do", "about": "services: five cards that stack as you scroll, each with deliverable badges and a photo" }, { "key": "method", "id": "method", "heading": "How we work", "about": "process: four steps beside a ring the scroll draws round (demo: Listen, Make, Measure, Again)" }, { "key": "studio", "id": "studio", "heading": "Inside the studio", "about": "team and careers: photo collage that deals out from a pile, with open roles" }, { "key": "journal", "id": "journal", "heading": "Ideas and news", "about": "news and articles: four stories beside a sticky photo frame" }, { "key": "faq", "id": "faq", "heading": "Fair questions", "about": "questions and answers (native
)" }, { "key": "contact", "id": "contact", "heading": "Let's talk", "about": "violet contact field: big \"Let's talk\", email, two offices with phones, and a form (placeholders)" }, { "key": "footer", "id": "footer", "heading": "", "about": "closing greeting \"Bye\" with the round photo full stop, link columns, newsletter, copyright and the Design: 8B credit" } ], "placeholders": [ "og-image", "favicon", "email", "phone", "form", "social" ], "lighthouse": null, "license": { "code": "MIT", "photos": "Unsplash License", "fonts": "SIL Open Font License 1.1" }, "get": { "degit": "npx degit 8bsite/design-studio-website-template my-site", "curl": [ "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" ], "agent_prompt": "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." }, "links": { "page": "https://8b.com/templates/onda/", "md": "https://8b.com/templates/onda.md", "json": "https://8b.com/templates/onda.json", "demo": "https://8bsite.github.io/design-studio-website-template/", "repo": "https://github.com/8bsite/design-studio-website-template", "zip": "https://github.com/8bsite/design-studio-website-template/archive/refs/heads/main.zip", "use": "https://github.com/new?template_name=design-studio-website-template&template_owner=8bsite", "agents": "https://github.com/8bsite/design-studio-website-template/blob/main/AGENTS.md", "credits": "https://github.com/8bsite/design-studio-website-template/blob/main/CREDITS.md", "raw": { "index": "https://raw.githubusercontent.com/8bsite/design-studio-website-template/main/index.html", "agents": "https://raw.githubusercontent.com/8bsite/design-studio-website-template/main/AGENTS.md", "license": "https://raw.githubusercontent.com/8bsite/design-studio-website-template/main/LICENSE", "credits": "https://raw.githubusercontent.com/8bsite/design-studio-website-template/main/CREDITS.md" }, "preview": "https://8b.com/templates/onda/desktop.webp", "phone": "https://8b.com/templates/onda/phone.webp", "clip": "https://8b.com/templates/onda/scroll.mp4", "og": "https://8b.com/templates/onda/og.jpg" }, "github": { "repo": "8bsite/design-studio-website-template", "template_repository": true, "topics": [ "html-template", "website-template", "free-template", "landing-page", "agency-website", "design-studio", "creative-agency", "html5", "css", "gsap", "scrolltrigger", "scroll-animation", "lenis", "single-file", "no-build", "static-site", "mit-license", "vibe-coding", "claude-code", "ai-agents" ] }, "made_by": { "name": "8B", "url": "https://8b.com/" } }