A plumbing business
Copper pipes run down the page edges and water flows through them as you scroll, faster when you scroll faster. A click makes a single drop fall.
Open the live site of a plumbing business (opens in a new tab)
Interactive web design
Websites with one moving scene that belongs to the business: pipes with water running through them on a plumber's site, ink blooming around the pointer on a tattoo artist's, a loading dock with a scanner on an app for checking deliveries. The scene answers the mouse, touch and scrolling, so the page feels alive while the words stay easy to read.
Sites we have built that move
Each recording is the live site with a visitor moving the mouse, clicking an empty spot and scrolling. Open any of them and try it yourself.
A home-service nail salon
The mouse leaves a short glossy stroke of nail polish that fades with a fine glitter sparkle. A click leaves a dab of polish, and the swatch chips on the hero photo swing on hover.
Open the live site of a home-service nail salon (opens in a new tab)
A tattoo artist
Ink drops bloom and curl around the pointer like ink in water, and a fine needle draws a vine down the margin as you read. Designs lean towards the mouse.
A solar installer
The sun rises over the hero and crosses the sky as you scroll down the page, panels glint as it passes, and light runs along the cables to small houses whose windows light up. A click or tap on empty space sends a beam of light from the sun.
Open the live site of a solar installer (opens in a new tab)
An app for checking deliveries
Boxes ride a conveyor along the foot of the hero, and a scan line passes over each box the pointer touches, with a tick when it passes.
Open the live site of an app for checking deliveries (opens in a new tab)
An SEO consultant
A starry sky sits behind the page. Stars lean away from the mouse and join up like a constellation near it, planets drift past as you scroll, and a click sets off a burst of new stars.
Open the live site of an seo consultant (opens in a new tab)
This site
Ladybugs crawl the page, leave grass behind them and fly off when the mouse comes close. Butterflies and a dragonfly cross the screen, and the sky turns to sunset as you scroll.
How we build them
Every site works without JavaScript, shows a still version to anyone who has turned animation off on their device, has its page speed measured before and after the motion goes in, and keeps its text readable over the moving parts.
One scene for the business
Drawn from what the trade looks like, often with a few small touches around it, such as cards that lean towards the pointer.
Starts after the page is ready
The words and the main picture load first and never wait for the scene, and it stops while the tab is hidden.
Nothing on the page depends on it
The scene writes no words, and nothing is hidden unless its script has run, so a visitor without JavaScript, a screen reader or a search engine gets the whole page.
How a build runs, from brief to launch
Six stages on every site, whichever platform it is built on. The scope and the quote are agreed in writing after the first call, before any design starts.
-
01
The brief, on a call
What the site has to do, who it is for and what exists today. If there is a site already, we read its Search Console first, because the pages earning impressions decide what the new one must keep.
-
02
A page map before any design
Every page listed with the search it answers and the action it asks for. On a redesign, every old URL is written beside its new home. You sign the map off before design starts.
-
03
Design on real content
Pages designed with your actual words and pictures, at phone width first. You review in the browser, on a staging address search engines are told to ignore.
-
04
Build, with the SEO written in
Titles, descriptions, headings, schema and internal links are written as each page is built, so nothing is added at the end by somebody who never saw the page map.
-
05
Checks before launch
Speed measured on a phone, every page at 320px wide and at 200 percent text, keyboard and screen reader checks, forms sent and received, redirects tested against the new build.
-
06
Launch, handover and training
The switch, then Search Console read daily for two weeks. The domain, hosting and logins stay in your name, with a written note of how the site is built and a recorded session on editing it.
What every build includes
-
Speed
Measured in PageSpeed Insights on a phone before launch. Images sized for the slots they fill, fonts that do not block the page, no script a page does not use.
-
Accessibility
Colour contrast, keyboard use, visible focus, alt text written for each picture, 44px tap targets on phones, and every page readable at 200 percent text.
-
SEO foundations
One title, description and H1 per page, schema, a sitemap that matches the site, clean URLs, redirects from every old address, and Search Console set up in your name.
-
Hosting handover
The domain, the hosting and every login in your name. We set the site up on your host, recommend one, or host it for you; either way you can move it.
-
Training
A recorded call showing whoever edits the site how to change a page, add a post and swap a picture, and a short written guide to keep beside it.
-
Two weeks after launch
Search Console, forms and errors checked daily for the first fortnight, and anything the launch broke fixed straight away.
Questions about interactive websites
Will the motion slow the site down?
The scene waits until the page has loaded, so the words and the main picture arrive first. It pauses in a hidden tab, and page speed is measured with a mobile speed test before and after the motion goes in. If a part costs too much, it is made lighter or taken out.
What do people who switch animation off see?
A still page. Phones and computers have a setting to reduce motion, and when it is on, the scene is drawn once and holds still, including if the setting is switched on halfway through a visit. On this site the sky still changes colour as you scroll, with nothing moving across it.
Does it work on phones?
Yes. Touch gets a simpler version of the scene that reacts to taps and scrolling, since there is no mouse to follow. We check every page at phone size before it goes live.
Can you add motion to the site I already have?
Usually, yes. The scene is a script, a stylesheet and a canvas added to the pages, so it fits any platform that lets us add those, including WordPress, Shopify, Webflow and custom builds. It does not change your words, links or headings.
Can the words still be read over the moving parts?
Yes. The scenes live in the margins and the background, and anything drawn behind words is kept faint enough that the words stay clear. Where something small crosses the words, as the ladybugs on this site do, it passes in a few seconds.
Book a call with us
A 30-minute call in your working hours. Tell us what you sell and where, and we will tell you what we would do first and what it involves. Prefer email? Send your website through the form and the Passieon Team will reply within two working days.