Rebuilding creayou.com
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. 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 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.