Our site was a Webflow export with a heading, a floating video and a contact link. It said who we were in 2023. This is how we rebuilt it, and why it is now plain HTML.
Start from what already works
We did not start from a blank file. The Figma draft had a structure we still liked: logo top left, navigation in the middle, WhatsApp on the right, client login and a message button pinned to the bottom corners. The live site had the typography we liked more. Styrene in capitals, tight tracking, set very large.
So the brief to ourselves was short. Keep the layout from Figma, keep the type and the logo video from the live site, rewrite every word.
Why not Webflow this time
We build most client sites in Webflow and will keep doing it. It is the right tool when a marketing team needs to edit pages without a developer.
Our own site has different needs. The hero runs a custom WebGL shader. The client area will become a dashboard with logins and live data. Nobody but us edits the copy. For that, a static site in a Git repository is simpler: every change is a commit, every commit deploys in about ten seconds, and nothing sits between the code and the browser.
The liquid logo
The logo animation is a short video of our mark rendered as glass. It is the element that took the longest, and it is older than the site. We made it in 2022 with a 3D artist in Blender: a model of the mark, many rounds on the highlights and the refraction, many versions of the motion, and a loop that turns without a visible seam. It still holds up.
On the old site it simply played. Now it runs through a small WebGL program.
The pointer leaves a trail in a low resolution texture. Each frame the trail moves along its own velocity, spreads a little and fades. The video is then drawn through that trail: pixels shift with the flow, colours split slightly at the edges, and where the trail is strongest the mark breaks into droplets. When the pointer stops, the trail fades and the logo pulls itself back together.
The whole effect is about 150 lines with no libraries. If WebGL is unavailable or the visitor prefers reduced motion, the plain video plays instead.
Two themes from one set of tokens
The Figma file already had a dark and a light version, so the colours came straight from its variables: black #1F1F1F, grey #2B2B2B, milk #F5F5F5 and a single neutral grey for secondary text. The site follows the system setting by default and remembers a manual switch.
The logo video was made for a dark background. In the light theme it is inverted and blended so the glass stays visible without a box around it.
Motion with a long tail
Everything moves on the same easing: fast start, slow and soft landing. Headlines reveal line by line from behind a mask. Project images unmask and settle as they scroll into view. The statement under the hero brightens word by word as you read it.
Motion is only worth it if it stays smooth, so the libraries are self hosted, fonts are subset to Latin, and images are resized and served as AVIF or WebP.
What changed
The site finally feels like the studio behind it. The motion is smoother, the effects respond to the visitor, and once the system was in place every new section took hours instead of days. That is the job of a hero section: make a visitor curious enough to stay and look at the work. We will share what it does for enquiries once the numbers are in.
What comes next
Case studies with the full process behind each project, a client area with project status and files, and this journal. We will write about the work as it happens: what we tried, what failed and what shipped.
Originally published on creayou.com.
Top comments (0)