ADSFOC
What it is
This is the website of ADSFOC, a branding studio in the San Francisco Bay Area. A visitor finds the studio's work as case studies with galleries, its services, the team, and the contact details with a map.
The home page is interactive: the studio's ball follows the pointer, can be thrown so it bounces off the edges, leaves an oval trace behind it and spins when it sits idle.
How it's built
It is a React 16 single-page site with React Router, created with Create React App and styled in LESS. Gabriel Prieto built most of it; I was the second developer.
- My main part was the home animation: the ball drawn in SVG, its traces with the oval effect and their collisions with the edges, the idle rotation, and the slogan and logo placed inside the SVG so they scale with the screen.
- The ball's movement simulates gravity and air friction, so a thrown ball slows down and settles at the bottom.
- I also built the first version of the Services page, filled the Work and About pages with the studio's content, and did much of the mobile layout: font sizes, the footer hidden on small screens, landscape tablets, and resizing fixes for Firefox.
- There is no backend: it is a static build, served under kazin.dev/adsfoc, with client routes falling back to
index.html.
Why I made it
We built it for the studio, as its website.
Timeline
Built between December 2017 and February 2018; published again at kazin.dev/adsfoc in October 2026.
Technologies
- React 16
- LESS