Scrollspy watches a scrolling area and highlights the menu link of the section currently in view. Every example below uses a fixed-height scrollable box with data-ui-spy, a target nav and tabindex for keyboard users; scroll inside the boxes to see the navigation follow.
1In a navbar
Scroll the box: the navbar pill for the visible section becomes active.
Intro
Our motion team turns complex ideas into short films people actually watch. We keep things simple, so you can focus on what matters to you. Fixed prices and weekly demos keep you in control from start to finish.
We measure success by how many clients come back and tell their friends. We listen first, then build a plan around what you actually need. From logo to launch campaign, everything is designed to work together.
Details
Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right. Thousands of clients already trust us, and we work hard to keep it that way.
Senior designers lead every project from the first sketch to the final file. We combine strategy, design and technology to build brands that grow. Small teams, short feedback loops and no handoffs lost in translation. Every project starts with a workshop, so we understand your audience before we design.
Pricing
Friendly people answer your questions quickly, by phone, chat or email. Websites we build are fast, accessible and easy for your team to update. We have helped more than a hundred companies launch, rebrand and grow online.
We measure success in sign-ups, sales and brand recall, not just awards. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Brioera</a>
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" href="#spy-1122">Intro</a></li>
<li class="nav-item"><a class="nav-link" href="#spy-1123">Details</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-ui-toggle="dropdown" href="#" role="button" aria-expanded="false">More</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#spy-1124">Pricing</a></li></ul></li>
</ul>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1121" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1122" class="pb-3">
<h3 class="h6">Intro</h3>
<p class="small">Our motion team turns complex ideas into short films people actually watch. We keep things simple, so you can focus on what matters to you. Fixed prices and weekly demos keep you in control from start to finish.</p>
<p class="small">We measure success by how many clients come back and tell their friends. We listen first, then build a plan around what you actually need. From logo to launch campaign, everything is designed to work together.</p>
</div>
<div id="spy-1123" class="pb-3">
<h3 class="h6">Details</h3>
<p class="small">Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right. Thousands of clients already trust us, and we work hard to keep it that way.</p>
<p class="small">Senior designers lead every project from the first sketch to the final file. We combine strategy, design and technology to build brands that grow. Small teams, short feedback loops and no handoffs lost in translation. Every project starts with a workshop, so we understand your audience before we design.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Websites we build are fast, accessible and easy for your team to update. We have helped more than a hundred companies launch, rebrand and grow online.</p>
<p class="small">We measure success in sign-ups, sales and brand recall, not just awards. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
From logo to launch campaign, everything is designed to work together. Websites we build are fast, accessible and easy for your team to update. Our team has done this many times, so you never have to guess.
Step two
Thousands of clients already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email. We test early with real users, so the final design works on the first day.
Step three
Clients stay with us for years because we treat their brand like our own. We measure success in sign-ups, sales and brand recall, not just awards. Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right.
Step four
Our motion team turns complex ideas into short films people actually watch. Fixed prices and weekly demos keep you in control from start to finish. Senior designers lead every project from the first sketch to the final file.
<nav id="spy-nav-1125" class="nav nav-pills mb-2 flex-wrap">
<a class="nav-link" href="#spy-1126">Step one</a><a class="nav-link" href="#spy-1127">Step two</a><a class="nav-link" href="#spy-1128">Step three</a><a class="nav-link" href="#spy-1129">Step four</a>
</nav>
<div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1125" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1126" class="pb-3">
<h3 class="h6">Step one</h3>
<p class="small">From logo to launch campaign, everything is designed to work together. Websites we build are fast, accessible and easy for your team to update. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1127" class="pb-3">
<h3 class="h6">Step two</h3>
<p class="small">Thousands of clients already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email. We test early with real users, so the final design works on the first day.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</h3>
<p class="small">Clients stay with us for years because we treat their brand like our own. We measure success in sign-ups, sales and brand recall, not just awards. Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1129" class="pb-3">
<h3 class="h6">Step four</h3>
<p class="small">Our motion team turns complex ideas into short films people actually watch. Fixed prices and weekly demos keep you in control from start to finish. Senior designers lead every project from the first sketch to the final file.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Content strategy
We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you. We have helped more than a hundred companies launch, rebrand and grow online. We combine strategy, design and technology to build brands that grow.
Web design
Every project starts with a workshop, so we understand your audience before we design. Clear prices, honest advice and no surprises along the way. Small teams, short feedback loops and no handoffs lost in translation.
UX research
We measure success by how many clients come back and tell their friends. Clients stay with us for years because we treat their brand like our own. We combine strategy, design and technology to build brands that grow.
Questions
Start in minutes and get help from a real person whenever you need it. Websites we build are fast, accessible and easy for your team to update. Thousands of clients already trust us, and we work hard to keep it that way.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1130" class="nav nav-pills flex-column">
<a class="nav-link" href="#spy-1131">Content strategy</a><a class="nav-link" href="#spy-1132">Web design</a><a class="nav-link" href="#spy-1133">UX research</a><a class="nav-link" href="#spy-1134">Questions</a>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1130" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1131" class="pb-3">
<h3 class="h6">Content strategy</h3>
<p class="small">We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you. We have helped more than a hundred companies launch, rebrand and grow online. We combine strategy, design and technology to build brands that grow.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">Web design</h3>
<p class="small">Every project starts with a workshop, so we understand your audience before we design. Clear prices, honest advice and no surprises along the way. Small teams, short feedback loops and no handoffs lost in translation.</p>
</div>
<div id="spy-1133" class="pb-3">
<h3 class="h6">UX research</h3>
<p class="small">We measure success by how many clients come back and tell their friends. Clients stay with us for years because we treat their brand like our own. We combine strategy, design and technology to build brands that grow.</p>
</div>
<div id="spy-1134" class="pb-3">
<h3 class="h6">Questions</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Websites we build are fast, accessible and easy for your team to update. Thousands of clients already trust us, and we work hard to keep it that way.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
We have helped more than a hundred companies launch, rebrand and grow online. From logo to launch campaign, everything is designed to work together. Senior designers lead every project from the first sketch to the final file.
Install
Fixed prices and weekly demos keep you in control from start to finish. Every project starts with a workshop, so we understand your audience before we design. Our motion team turns complex ideas into short films people actually watch.
Configure
We measure success in sign-ups, sales and brand recall, not just awards. We measure success by how many clients come back and tell their friends. We keep things simple, so you can focus on what matters to you.
Usage
Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need.
Examples
Our team has done this many times, so you never have to guess. Small teams, short feedback loops and no handoffs lost in translation. We test early with real users, so the final design works on the first day. Every detail is handled by people who care about getting it right.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1135" class="h-100 flex-column align-items-stretch">
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#spy-1136">Getting started</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#spy-1137">Install</a><a class="nav-link ms-3 my-1" href="#spy-1138">Configure</a>
</nav>
<a class="nav-link" href="#spy-1139">Usage</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#spy-1140">Examples</a>
</nav>
</nav>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:260px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1135" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1136" class="pb-3">
<h3 class="h6">Getting started</h3>
<p class="small">We have helped more than a hundred companies launch, rebrand and grow online. From logo to launch campaign, everything is designed to work together. Senior designers lead every project from the first sketch to the final file.</p>
</div>
<div id="spy-1137" class="pb-3">
<h3 class="h6">Install</h3>
<p class="small">Fixed prices and weekly demos keep you in control from start to finish. Every project starts with a workshop, so we understand your audience before we design. Our motion team turns complex ideas into short films people actually watch.</p>
</div>
<div id="spy-1138" class="pb-3">
<h3 class="h6">Configure</h3>
<p class="small">We measure success in sign-ups, sales and brand recall, not just awards. We measure success by how many clients come back and tell their friends. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1139" class="pb-3">
<h3 class="h6">Usage</h3>
<p class="small">Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</h3>
<p class="small">Our team has done this many times, so you never have to guess. Small teams, short feedback loops and no handoffs lost in translation. We test early with real users, so the final design works on the first day. Every detail is handled by people who care about getting it right.</p>
</div>
</div>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
We listen first, then build a plan around what you actually need. We test early with real users, so the final design works on the first day. We measure success by how many clients come back and tell their friends.
Midday
Websites we build are fast, accessible and easy for your team to update. Small teams, short feedback loops and no handoffs lost in translation. We have helped more than a hundred companies launch, rebrand and grow online. Fixed prices and weekly demos keep you in control from start to finish.
Afternoon
Our team has done this many times, so you never have to guess. Our motion team turns complex ideas into short films people actually watch. We combine strategy, design and technology to build brands that grow. Thousands of clients already trust us, and we work hard to keep it that way.
Evening
Clients stay with us for years because we treat their brand like our own. From logo to launch campaign, everything is designed to work together. We measure success in sign-ups, sales and brand recall, not just awards. We keep things simple, so you can focus on what matters to you.
<div class="row g-3">
<div class="col-sm-4">
<div id="spy-nav-1141" class="list-group">
<a class="list-group-item list-group-item-action" href="#spy-1142">Morning</a><a class="list-group-item list-group-item-action" href="#spy-1143">Midday</a><a class="list-group-item list-group-item-action" href="#spy-1144">Afternoon</a><a class="list-group-item list-group-item-action" href="#spy-1145">Evening</a>
</div>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1141" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1142" class="pb-3">
<h3 class="h6">Morning</h3>
<p class="small">We listen first, then build a plan around what you actually need. We test early with real users, so the final design works on the first day. We measure success by how many clients come back and tell their friends.</p>
</div>
<div id="spy-1143" class="pb-3">
<h3 class="h6">Midday</h3>
<p class="small">Websites we build are fast, accessible and easy for your team to update. Small teams, short feedback loops and no handoffs lost in translation. We have helped more than a hundred companies launch, rebrand and grow online. Fixed prices and weekly demos keep you in control from start to finish.</p>
</div>
<div id="spy-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">Our team has done this many times, so you never have to guess. Our motion team turns complex ideas into short films people actually watch. We combine strategy, design and technology to build brands that grow. Thousands of clients already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1145" class="pb-3">
<h3 class="h6">Evening</h3>
<p class="small">Clients stay with us for years because we treat their brand like our own. From logo to launch campaign, everything is designed to work together. We measure success in sign-ups, sales and brand recall, not just awards. We keep things simple, so you can focus on what matters to you.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
Senior designers lead every project from the first sketch to the final file. Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email. Every project starts with a workshop, so we understand your audience before we design.
Beta
Clear prices, honest advice and no surprises along the way. Our motion team turns complex ideas into short films people actually watch. We measure success by how many clients come back and tell their friends. Our team has done this many times, so you never have to guess.
Gamma
Every project starts with a workshop, so we understand your audience before we design. We measure success in sign-ups, sales and brand recall, not just awards. We have helped more than a hundred companies launch, rebrand and grow online.
<div class="row g-3 cb-spy-plain">
<div class="col-4">
<div id="spy-nav-1146" class="d-flex flex-column gap-2 small">
<a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1147">Alpha</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1148">Beta</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1149">Gamma</a>
</div>
</div>
<div class="col-8">
<div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1146" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1147" class="pb-3">
<h3 class="h6">Alpha</h3>
<p class="small">Senior designers lead every project from the first sketch to the final file. Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email. Every project starts with a workshop, so we understand your audience before we design.</p>
</div>
<div id="spy-1148" class="pb-3">
<h3 class="h6">Beta</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Our motion team turns complex ideas into short films people actually watch. We measure success by how many clients come back and tell their friends. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1149" class="pb-3">
<h3 class="h6">Gamma</h3>
<p class="small">Every project starts with a workshop, so we understand your audience before we design. We measure success in sign-ups, sales and brand recall, not just awards. We have helped more than a hundred companies launch, rebrand and grow online.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
Senior designers lead every project from the first sketch to the final file. Friendly people answer your questions quickly, by phone, chat or email. Clients stay with us for years because we treat their brand like our own.
Features
We combine strategy, design and technology to build brands that grow. Fixed prices and weekly demos keep you in control from start to finish. We test early with real users, so the final design works on the first day.
Reviews
Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way.
FAQ
Websites we build are fast, accessible and easy for your team to update. From logo to launch campaign, everything is designed to work together. We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you.
<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-bottom">
<a class="nav-link" href="#spy-1151">Overview</a><a class="nav-link" href="#spy-1152">Features</a><a class="nav-link" href="#spy-1153">Reviews</a><a class="nav-link" href="#spy-1154">FAQ</a>
</nav>
<div class="position-relative border rounded p-3 border-0 px-0" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1150" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1151" class="pb-3">
<h3 class="h6">Overview</h3>
<p class="small">Senior designers lead every project from the first sketch to the final file. Friendly people answer your questions quickly, by phone, chat or email. Clients stay with us for years because we treat their brand like our own.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</h3>
<p class="small">We combine strategy, design and technology to build brands that grow. Fixed prices and weekly demos keep you in control from start to finish. We test early with real users, so the final design works on the first day.</p>
</div>
<div id="spy-1153" class="pb-3">
<h3 class="h6">Reviews</h3>
<p class="small">Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1154" class="pb-3">
<h3 class="h6">FAQ</h3>
<p class="small">Websites we build are fast, accessible and easy for your team to update. From logo to launch campaign, everything is designed to work together. We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you.</p>
</div>
</div>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
Thousands of clients already trust us, and we work hard to keep it that way. Small teams, short feedback loops and no handoffs lost in translation. We test early with real users, so the final design works on the first day.
Background
We measure success by how many clients come back and tell their friends. Senior designers lead every project from the first sketch to the final file. Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you.
Method
We have helped more than a hundred companies launch, rebrand and grow online. Small teams, short feedback loops and no handoffs lost in translation. Our team has done this many times, so you never have to guess.
Results
Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. Clients stay with us for years because we treat their brand like our own.
On this page
<div class="row g-3">
<div class="col-md-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1155" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1156" class="pb-3">
<h3 class="h6">Summary</h3>
<p class="small">Thousands of clients already trust us, and we work hard to keep it that way. Small teams, short feedback loops and no handoffs lost in translation. We test early with real users, so the final design works on the first day.</p>
</div>
<div id="spy-1157" class="pb-3">
<h3 class="h6">Background</h3>
<p class="small">We measure success by how many clients come back and tell their friends. Senior designers lead every project from the first sketch to the final file. Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">We have helped more than a hundred companies launch, rebrand and grow online. Small teams, short feedback loops and no handoffs lost in translation. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1159" class="pb-3">
<h3 class="h6">Results</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. Clients stay with us for years because we treat their brand like our own.</p>
</div>
</div>
</div>
<div class="col-md-3 order-first order-md-last">
<p class="small fw-semibold text-uppercase text-body-secondary mb-2">On this page</p>
<nav id="spy-nav-1155" class="nav nav-pills flex-column small">
<a class="nav-link py-1" href="#spy-1156">Summary</a><a class="nav-link py-1" href="#spy-1157">Background</a><a class="nav-link py-1" href="#spy-1158">Method</a><a class="nav-link py-1" href="#spy-1159">Results</a>
</nav>
</div>
</div>9Numbered steps
<code>.list-group-numbered</code> turns the spy menu into a step counter.
Create an account
From logo to launch campaign, everything is designed to work together. Our motion team turns complex ideas into short films people actually watch. Thousands of clients already trust us, and we work hard to keep it that way.
Set up your profile
We measure success in sign-ups, sales and brand recall, not just awards. Friendly people answer your questions quickly, by phone, chat or email. We combine strategy, design and technology to build brands that grow. Websites we build are fast, accessible and easy for your team to update.
Invite the team
Every project starts with a workshop, so we understand your audience before we design. Fixed prices and weekly demos keep you in control from start to finish. We listen first, then build a plan around what you actually need. Clients stay with us for years because we treat their brand like our own.
Go live
We measure success in sign-ups, sales and brand recall, not just awards. Websites we build are fast, accessible and easy for your team to update. We have helped more than a hundred companies launch, rebrand and grow online. Start in minutes and get help from a real person whenever you need it.
<div class="row g-3">
<div class="col-sm-5">
<div id="spy-nav-1160" class="list-group list-group-numbered">
<a class="list-group-item list-group-item-action" href="#spy-1161">Create an account</a><a class="list-group-item list-group-item-action" href="#spy-1162">Set up your profile</a><a class="list-group-item list-group-item-action" href="#spy-1163">Invite the team</a><a class="list-group-item list-group-item-action" href="#spy-1164">Go live</a>
</div>
</div>
<div class="col-sm-7">
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1160" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1161" class="pb-3">
<h3 class="h6">Create an account</h3>
<p class="small">From logo to launch campaign, everything is designed to work together. Our motion team turns complex ideas into short films people actually watch. Thousands of clients already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1162" class="pb-3">
<h3 class="h6">Set up your profile</h3>
<p class="small">We measure success in sign-ups, sales and brand recall, not just awards. Friendly people answer your questions quickly, by phone, chat or email. We combine strategy, design and technology to build brands that grow. Websites we build are fast, accessible and easy for your team to update.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</h3>
<p class="small">Every project starts with a workshop, so we understand your audience before we design. Fixed prices and weekly demos keep you in control from start to finish. We listen first, then build a plan around what you actually need. Clients stay with us for years because we treat their brand like our own.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</h3>
<p class="small">We measure success in sign-ups, sales and brand recall, not just awards. Websites we build are fast, accessible and easy for your team to update. We have helped more than a hundred companies launch, rebrand and grow online. Start in minutes and get help from a real person whenever you need it.</p>
</div>
</div>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
What makes a brand memorable
Small teams, short feedback loops and no handoffs lost in translation. We listen first, then build a plan around what you actually need. Senior designers lead every project from the first sketch to the final file.
How we ran a rebrand in eight weeks
We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right.
Five website mistakes that cost you leads
We combine strategy, design and technology to build brands that grow. Thousands of clients already trust us, and we work hard to keep it that way. We measure success by how many clients come back and tell their friends. Every project starts with a workshop, so we understand your audience before we design.
Designing packaging that survives the shelf
Our motion team turns complex ideas into short films people actually watch. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess.
<nav id="spy-nav-1165" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1166">2023</a><a class="nav-link" href="#spy-1167">2024</a><a class="nav-link" href="#spy-1168">2025</a><a class="nav-link" href="#spy-1169">2026</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1165" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1166" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2023</span>
<h3 class="h6">What makes a brand memorable</h3>
<p class="small mb-0">Small teams, short feedback loops and no handoffs lost in translation. We listen first, then build a plan around what you actually need. Senior designers lead every project from the first sketch to the final file.</p>
</div>
<div id="spy-1167" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2024</span>
<h3 class="h6">How we ran a rebrand in eight weeks</h3>
<p class="small mb-0">We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1168" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2025</span>
<h3 class="h6">Five website mistakes that cost you leads</h3>
<p class="small mb-0">We combine strategy, design and technology to build brands that grow. Thousands of clients already trust us, and we work hard to keep it that way. We measure success by how many clients come back and tell their friends. Every project starts with a workshop, so we understand your audience before we design.</p>
</div>
<div id="spy-1169" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2026</span>
<h3 class="h6">Designing packaging that survives the shelf</h3>
<p class="small mb-0">Our motion team turns complex ideas into short films people actually watch. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- How to choose the right project?
- From logo to launch campaign, everything is designed to work together.
- Choosing colours that sell?
- We test early with real users, so the final design works on the first day.
- A checklist for your next website launch?
- Fixed prices and weekly demos keep you in control from start to finish.
Shipping
- Why motion matters for modern brands?
- Friendly people answer your questions quickly, by phone, chat or email.
- A beginner's guide to getting started?
- Our motion team turns complex ideas into short films people actually watch.
- Lessons from a year of client workshops?
- Clients stay with us for years because we treat their brand like our own.
Returns
- What our clients asked us most?
- Start in minutes and get help from a real person whenever you need it.
- The small habits that make a big difference?
- Small teams, short feedback loops and no handoffs lost in translation.
- Our favourite tips for busy weeks?
- We measure success in sign-ups, sales and brand recall, not just awards.
<div class="row g-3">
<div class="col-sm-3">
<nav id="spy-nav-1170" class="nav nav-pills flex-sm-column">
<a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
</nav>
</div>
<div class="col-sm-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1171" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Orders</h3>
<dl>
<dt class="small">How to choose the right project?</dt>
<dd class="small text-body-secondary">From logo to launch campaign, everything is designed to work together.</dd>
<dt class="small">Choosing colours that sell?</dt>
<dd class="small text-body-secondary">We test early with real users, so the final design works on the first day.</dd>
<dt class="small">A checklist for your next website launch?</dt>
<dd class="small text-body-secondary">Fixed prices and weekly demos keep you in control from start to finish.</dd>
</dl>
</div>
<div id="spy-1172" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Shipping</h3>
<dl>
<dt class="small">Why motion matters for modern brands?</dt>
<dd class="small text-body-secondary">Friendly people answer your questions quickly, by phone, chat or email.</dd>
<dt class="small">A beginner's guide to getting started?</dt>
<dd class="small text-body-secondary">Our motion team turns complex ideas into short films people actually watch.</dd>
<dt class="small">Lessons from a year of client workshops?</dt>
<dd class="small text-body-secondary">Clients stay with us for years because we treat their brand like our own.</dd>
</dl>
</div>
<div id="spy-1173" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Returns</h3>
<dl>
<dt class="small">What our clients asked us most?</dt>
<dd class="small text-body-secondary">Start in minutes and get help from a real person whenever you need it.</dd>
<dt class="small">The small habits that make a big difference?</dt>
<dd class="small text-body-secondary">Small teams, short feedback loops and no handoffs lost in translation.</dd>
<dt class="small">Our favourite tips for busy weeks?</dt>
<dd class="small text-body-secondary">We measure success in sign-ups, sales and brand recall, not just awards.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
Clear prices, honest advice and no surprises along the way. Senior designers lead every project from the first sketch to the final file. Our team has done this many times, so you never have to guess. We listen first, then build a plan around what you actually need.
Battery
We combine strategy, design and technology to build brands that grow. We have helped more than a hundred companies launch, rebrand and grow online. Websites we build are fast, accessible and easy for your team to update. Thousands of clients already trust us, and we work hard to keep it that way.
Connectivity
We test early with real users, so the final design works on the first day. Fixed prices and weekly demos keep you in control from start to finish. Every project starts with a workshop, so we understand your audience before we design. Every detail is handled by people who care about getting it right.
Security
From logo to launch campaign, everything is designed to work together. We measure success by how many clients come back and tell their friends. We keep things simple, so you can focus on what matters to you. We combine strategy, design and technology to build brands that grow.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1174" class="nav nav-pills flex-column">
<a class="nav-link d-flex align-items-center gap-2" href="#spy-1175"><i class="bi bi-cpu-fill" aria-hidden="true"></i>Performance</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1178"><i class="bi bi-shield-check" aria-hidden="true"></i>Security</a>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1174" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1175" class="pb-3">
<h3 class="h6">Performance</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Senior designers lead every project from the first sketch to the final file. Our team has done this many times, so you never have to guess. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">We combine strategy, design and technology to build brands that grow. We have helped more than a hundred companies launch, rebrand and grow online. Websites we build are fast, accessible and easy for your team to update. Thousands of clients already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1177" class="pb-3">
<h3 class="h6">Connectivity</h3>
<p class="small">We test early with real users, so the final design works on the first day. Fixed prices and weekly demos keep you in control from start to finish. Every project starts with a workshop, so we understand your audience before we design. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</h3>
<p class="small">From logo to launch campaign, everything is designed to work together. We measure success by how many clients come back and tell their friends. We keep things simple, so you can focus on what matters to you. We combine strategy, design and technology to build brands that grow.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$19.65 / mo
- Weekly demos
- Senior designers only
- Weekly demos
Team
$41.09 / mo
- Senior designers only
- Fast turnaround
- Fast turnaround
Business
$63.16 / mo
- Award-winning team
- Award-winning team
- Fixed-price projects
<nav id="spy-nav-1179" class="nav nav-pills justify-content-center mb-2">
<a class="nav-link" href="#spy-1180">Starter</a><a class="nav-link" href="#spy-1181">Team</a><a class="nav-link" href="#spy-1182">Business</a>
</nav>
<div class="position-relative border rounded p-3 bg-body-tertiary" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1179" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1180" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Starter</h3>
<p class="fs-4 fw-bold mb-1">$19.65<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Weekly demos</li>
<li>Senior designers only</li>
<li>Weekly demos</li>
</ul>
</div>
</div>
<div id="spy-1181" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Team</h3>
<p class="fs-4 fw-bold mb-1">$41.09<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Senior designers only</li>
<li>Fast turnaround</li>
<li>Fast turnaround</li>
</ul>
</div>
</div>
<div id="spy-1182" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Business</h3>
<p class="fs-4 fw-bold mb-1">$63.16<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Award-winning team</li>
<li>Award-winning team</li>
<li>Fixed-price projects</li>
</ul>
</div>
</div>
</div>14Chapter reader
A reading pane with chapter links in a small dropdown-free list above.
Chapter 1: Planning a month of social content in a day
Senior designers lead every project from the first sketch to the final file. From logo to launch campaign, everything is designed to work together. Start in minutes and get help from a real person whenever you need it.
We listen first, then build a plan around what you actually need. Small teams, short feedback loops and no handoffs lost in translation. Fixed prices and weekly demos keep you in control from start to finish.
Chapter 2: Inside our design process
Friendly people answer your questions quickly, by phone, chat or email. We measure success in sign-ups, sales and brand recall, not just awards. Thousands of clients already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way.
We keep things simple, so you can focus on what matters to you. We have helped more than a hundred companies launch, rebrand and grow online. Every detail is handled by people who care about getting it right.
Chapter 3: Looking back at a busy season
Our team has done this many times, so you never have to guess. Our motion team turns complex ideas into short films people actually watch. We test early with real users, so the final design works on the first day. Websites we build are fast, accessible and easy for your team to update.
Every project starts with a workshop, so we understand your audience before we design. Clients stay with us for years because we treat their brand like our own. We measure success by how many clients come back and tell their friends.
Chapter 4: Five things we learned this year
We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way. Fixed prices and weekly demos keep you in control from start to finish. We combine strategy, design and technology to build brands that grow.
We test early with real users, so the final design works on the first day. Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right.
<nav id="spy-nav-1183" class="nav nav-tabs mb-0 small">
<a class="nav-link" href="#spy-1184">Chapter 1</a><a class="nav-link" href="#spy-1185">Chapter 2</a><a class="nav-link" href="#spy-1186">Chapter 3</a><a class="nav-link" href="#spy-1187">Chapter 4</a>
</nav>
<div class="position-relative border rounded p-3 border-top-0 rounded-top-0 lh-lg" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1183" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1184" class="pb-3">
<h3 class="h6">Chapter 1: Planning a month of social content in a day</h3>
<p class="small">Senior designers lead every project from the first sketch to the final file. From logo to launch campaign, everything is designed to work together. Start in minutes and get help from a real person whenever you need it.</p>
<p class="small">We listen first, then build a plan around what you actually need. Small teams, short feedback loops and no handoffs lost in translation. Fixed prices and weekly demos keep you in control from start to finish.</p>
</div>
<div id="spy-1185" class="pb-3">
<h3 class="h6">Chapter 2: Inside our design process</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. We measure success in sign-ups, sales and brand recall, not just awards. Thousands of clients already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way.</p>
<p class="small">We keep things simple, so you can focus on what matters to you. We have helped more than a hundred companies launch, rebrand and grow online. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1186" class="pb-3">
<h3 class="h6">Chapter 3: Looking back at a busy season</h3>
<p class="small">Our team has done this many times, so you never have to guess. Our motion team turns complex ideas into short films people actually watch. We test early with real users, so the final design works on the first day. Websites we build are fast, accessible and easy for your team to update.</p>
<p class="small">Every project starts with a workshop, so we understand your audience before we design. Clients stay with us for years because we treat their brand like our own. We measure success by how many clients come back and tell their friends.</p>
</div>
<div id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: Five things we learned this year</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way. Fixed prices and weekly demos keep you in control from start to finish. We combine strategy, design and technology to build brands that grow.</p>
<p class="small">We test early with real users, so the final design works on the first day. Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
Clients stay with us for years because we treat their brand like our own. Friendly people answer your questions quickly, by phone, chat or email. We have helped more than a hundred companies launch, rebrand and grow online.
Notifications
We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess. Every project starts with a workshop, so we understand your audience before we design.
Privacy
We measure success by how many clients come back and tell their friends. From logo to launch campaign, everything is designed to work together. Senior designers lead every project from the first sketch to the final file. Small teams, short feedback loops and no handoffs lost in translation.
<div class="row g-3">
<div class="col-sm-4">
<div id="spy-nav-1188" class="list-group list-group-flush border rounded">
<a class="list-group-item list-group-item-action" href="#spy-1189">Profile</a><a class="list-group-item list-group-item-action" href="#spy-1190">Notifications</a><a class="list-group-item list-group-item-action" href="#spy-1191">Privacy</a>
</div>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1188" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1189" class="pb-3">
<h3 class="h6">Profile</h3>
<div class="mb-2">
<label for="spy-in-1192" class="form-label small">Display name</label>
<input class="form-control form-control-sm" id="spy-in-1192" value="Mateo Carter">
</div>
<div class="mb-2">
<label for="spy-in-1193" class="form-label small">City</label>
<input class="form-control form-control-sm" id="spy-in-1193" value="Denver">
</div>
<p class="small">Clients stay with us for years because we treat their brand like our own. Friendly people answer your questions quickly, by phone, chat or email. We have helped more than a hundred companies launch, rebrand and grow online.</p>
</div>
<div id="spy-1190" class="pb-3">
<h3 class="h6">Notifications</h3>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1194" checked>
<label class="form-check-label small" for="spy-sw-1194">Product news</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1195">
<label class="form-check-label small" for="spy-sw-1195">Weekly digest</label>
</div>
<p class="small">We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess. Every project starts with a workshop, so we understand your audience before we design.</p>
</div>
<div id="spy-1191" class="pb-3">
<h3 class="h6">Privacy</h3>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="spy-sw-1196">
<label class="form-check-label small" for="spy-sw-1196">Hide my profile from search</label>
</div>
<p class="small">We measure success by how many clients come back and tell their friends. From logo to launch campaign, everything is designed to work together. Senior designers lead every project from the first sketch to the final file. Small teams, short feedback loops and no handoffs lost in translation.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Marketing
- Jonah HaddadCustomer Success
- Samir LarsenContent Writer
- Nadia BrennanHR Partner
Sales
- Sofia CarterProject Manager
- Liam MorganProject Manager
- Hana MensahContent Writer
Finance
- Arjun MoreauHR Partner
- Nora HarlowFinance Lead
- Owen DelgadoOperations Manager
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Marketing</a><a class="nav-link" href="#spy-1199">Sales</a><a class="nav-link" href="#spy-1200">Finance</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1197" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1198" class="pb-3">
<h3 class="h6">Marketing</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-circle" width="36" height="36" alt="Jonah Haddad"><div><div class="small fw-semibold">Jonah Haddad</div><div class="small text-body-secondary">Customer Success</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-9.svg" class="rounded-circle" width="36" height="36" alt="Samir Larsen"><div><div class="small fw-semibold">Samir Larsen</div><div class="small text-body-secondary">Content Writer</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Nadia Brennan"><div><div class="small fw-semibold">Nadia Brennan</div><div class="small text-body-secondary">HR Partner</div></div></li>
</ul>
</div>
<div id="spy-1199" class="pb-3">
<h3 class="h6">Sales</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-circle" width="36" height="36" alt="Sofia Carter"><div><div class="small fw-semibold">Sofia Carter</div><div class="small text-body-secondary">Project Manager</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-circle" width="36" height="36" alt="Liam Morgan"><div><div class="small fw-semibold">Liam Morgan</div><div class="small text-body-secondary">Project Manager</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-circle" width="36" height="36" alt="Hana Mensah"><div><div class="small fw-semibold">Hana Mensah</div><div class="small text-body-secondary">Content Writer</div></div></li>
</ul>
</div>
<div id="spy-1200" class="pb-3">
<h3 class="h6">Finance</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-circle" width="36" height="36" alt="Arjun Moreau"><div><div class="small fw-semibold">Arjun Moreau</div><div class="small text-body-secondary">HR Partner</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-circle" width="36" height="36" alt="Nora Harlow"><div><div class="small fw-semibold">Nora Harlow</div><div class="small text-body-secondary">Finance Lead</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-circle" width="36" height="36" alt="Owen Delgado"><div><div class="small fw-semibold">Owen Delgado</div><div class="small text-body-secondary">Operations Manager</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
- Packaging design$4,200
- Social kit$2,000
- Website package$9,100
Web
- Video edit$2,500
- Launch campaign$10,000
- Social kit$1,800
Motion
- UX audit$2,700
- Landing page$3,400
- Explainer animation$5,950
<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1202">Print</a><a class="nav-link" href="#spy-1203">Web</a><a class="nav-link" href="#spy-1204">Motion</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1201" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1202" class="pb-3">
<h3 class="h6">Print</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Packaging design</span><span class="fw-semibold">$4,200</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Social kit</span><span class="fw-semibold">$2,000</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Website package</span><span class="fw-semibold">$9,100</span></li>
</ul>
</div>
<div id="spy-1203" class="pb-3">
<h3 class="h6">Web</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Video edit</span><span class="fw-semibold">$2,500</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Launch campaign</span><span class="fw-semibold">$10,000</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Social kit</span><span class="fw-semibold">$1,800</span></li>
</ul>
</div>
<div id="spy-1204" class="pb-3">
<h3 class="h6">Motion</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>UX audit</span><span class="fw-semibold">$2,700</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Landing page</span><span class="fw-semibold">$3,400</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Explainer animation</span><span class="fw-semibold">$5,950</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
Our motion team turns complex ideas into short films people actually watch. Websites we build are fast, accessible and easy for your team to update. Thousands of clients already trust us, and we work hard to keep it that way. We measure success in sign-ups, sales and brand recall, not just awards.
This week
Thousands of clients already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.
Later
Websites we build are fast, accessible and easy for your team to update. Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it.
<div class="card">
<div class="card-header">
<nav id="spy-nav-1205" class="nav nav-pills card-header-pills">
<a class="nav-link" href="#spy-1206">Today</a><a class="nav-link" href="#spy-1207">This week</a><a class="nav-link" href="#spy-1208">Later</a>
</nav>
</div>
<div class="card-body p-0">
<div class="position-relative border rounded p-3 border-0 rounded-0" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1205" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1206" class="pb-3">
<h3 class="h6">Today</h3>
<p class="small">Our motion team turns complex ideas into short films people actually watch. Websites we build are fast, accessible and easy for your team to update. Thousands of clients already trust us, and we work hard to keep it that way. We measure success in sign-ups, sales and brand recall, not just awards.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</h3>
<p class="small">Thousands of clients already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</h3>
<p class="small">Websites we build are fast, accessible and easy for your team to update. Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-ui-theme="dark"</code>.
Launch
Senior designers lead every project from the first sketch to the final file. Every project starts with a workshop, so we understand your audience before we design. We combine strategy, design and technology to build brands that grow.
Orbit
Our motion team turns complex ideas into short films people actually watch. We measure success in sign-ups, sales and brand recall, not just awards. We measure success by how many clients come back and tell their friends.
Landing
Clients stay with us for years because we treat their brand like our own. We have helped more than a hundred companies launch, rebrand and grow online. Every detail is handled by people who care about getting it right. From logo to launch campaign, everything is designed to work together.
<div data-ui-theme="dark" class="bg-dark text-body rounded p-3">
<nav id="spy-nav-1209" class="nav nav-pills mb-2">
<a class="nav-link" href="#spy-1210">Launch</a><a class="nav-link" href="#spy-1211">Orbit</a><a class="nav-link" href="#spy-1212">Landing</a>
</nav>
<div class="position-relative border rounded p-3 border-secondary" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1209" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1210" class="pb-3">
<h3 class="h6">Launch</h3>
<p class="small">Senior designers lead every project from the first sketch to the final file. Every project starts with a workshop, so we understand your audience before we design. We combine strategy, design and technology to build brands that grow.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">Our motion team turns complex ideas into short films people actually watch. We measure success in sign-ups, sales and brand recall, not just awards. We measure success by how many clients come back and tell their friends.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</h3>
<p class="small">Clients stay with us for years because we treat their brand like our own. We have helped more than a hundred companies launch, rebrand and grow online. Every detail is handled by people who care about getting it right. From logo to launch campaign, everything is designed to work together.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Oct 1, 2026
- NewWe listen first, then build a plan around what you actually need.
- ImprovedWe test early with real users, so the final design works on the first day.
- FixedFixed prices and weekly demos keep you in control from start to finish.
v3.1 May 26, 2026
- NewSmall teams, short feedback loops and no handoffs lost in translation.
- ImprovedWe keep things simple, so you can focus on what matters to you.
- FixedWe measure success by how many clients come back and tell their friends.
v3.0 May 12, 2026
- NewClients stay with us for years because we treat their brand like our own.
- ImprovedOur motion team turns complex ideas into short films people actually watch.
- FixedStart in minutes and get help from a real person whenever you need it.
v2.9 May 30, 2026
- NewEvery detail is handled by people who care about getting it right.
- ImprovedFixed prices and weekly demos keep you in control from start to finish.
- FixedThousands of clients already trust us, and we work hard to keep it that way.
<div class="row g-3">
<div class="col-3">
<nav id="spy-nav-1213" class="nav nav-pills flex-column small">
<a class="nav-link" href="#spy-1214">v3.2</a><a class="nav-link" href="#spy-1215">v3.1</a><a class="nav-link" href="#spy-1216">v3.0</a><a class="nav-link" href="#spy-1217">v2.9</a>
</nav>
</div>
<div class="col-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1213" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1214" class="pb-3">
<h3 class="h6">v3.2 <small class="text-body-secondary fw-normal">Oct 1, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>We listen first, then build a plan around what you actually need.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We test early with real users, so the final design works on the first day.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Fixed prices and weekly demos keep you in control from start to finish.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">May 26, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Small teams, short feedback loops and no handoffs lost in translation.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We keep things simple, so you can focus on what matters to you.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We measure success by how many clients come back and tell their friends.</li>
</ul>
</div>
<div id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">May 12, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Clients stay with us for years because we treat their brand like our own.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our motion team turns complex ideas into short films people actually watch.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Start in minutes and get help from a real person whenever you need it.</li>
</ul>
</div>
<div id="spy-1217" class="pb-3">
<h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">May 30, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Every detail is handled by people who care about getting it right.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Fixed prices and weekly demos keep you in control from start to finish.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Thousands of clients already trust us, and we work hard to keep it that way.</li>
</ul>
</div>
</div>
</div>
</div>