Arlo

i wanted to explore whether five very different objects could feel related at a glance: a wrist piece, a ring, eyewear, a vest, and a clip.

that question became arlo.

the visual direction draws from rugged, utility-minded hardware. a chalk background, graphite ink, and brushed-silver tones give the website a restrained character, while a single signal blue marks what deserves attention. large typography and generous product imagery keep the objects at the center of the experience.

i organized the site around the objects, the thinking behind them, the technology they imagine, and a plain-language faq. each page adds context to the collection, from its sense, alert, respond idea to a matrix showing which fictional systems each object uses.

motion became part of how visitors move through the website. a zigzag wipe connects the pages, headings reveal as they enter view, product details scramble into place, and the faq opens with a small spring. hover effects spread from wherever the pointer lands, so interactive elements are easy to recognize.

as the project developed, i refined the zigzag transition so it moves on the gpu, measured every page on phone, tablet, and desktop, and fixed a layout bug that made one page scroll sideways. i also included reduced-motion support so the experience remains usable without its animations.

for search, i wrote structured data, a sitemap, and an llms.txt that all say plainly what the site is: a fictional showcase, not a store. the footer's email field completes the concept as a demonstration. it displays a notice without sending or storing anything.

arlo became an opportunity to practice building a complete visual experience while balancing expressive motion, clear navigation, and performance.