{"id":"2094524951025914278","url":"https://x.com/olavlj/status/2094524951025914278","text":"many have asked how we built our landing page. today we are spilling the tea!\n\nexcited to see what you come up with https://x.com/i/article/2094493136743473152","author":{"name":"olav","username":"olavlj","avatarUrl":"https://pbs.twimg.com/profile_images/1846254595150061568/D3MzHrsO_200x200.png"},"createdAt":"Mon Aug 31 20:37:17 +0000 2026","engagement":{"replies":11,"retweets":19,"likes":417,"views":43522},"article":{"title":"How We Built a Next-Level Landing Page (and how you can too)","previewText":"Building beautiful websites is easy now, but it wasn’t always like this. In my first company this was a perpetual frustration. We hired expensive agencies and designers who spent months building","coverImageUrl":"https://pbs.twimg.com/media/HRE4G3mXgAApC_D.jpg","content":"![](https://pbs.twimg.com/media/HRE2-kxWgAEgMnr.jpg)\n\nBuilding beautiful websites is easy now, but it wasn’t always like this. In my first company this was a perpetual frustration. We hired expensive agencies and designers who spent months building something that today I could get from Claude in the span of my coffee break.\n\nProblem solved right? Not really.\n\nAttention is zero-sum. This is my core design philosophy. In product design, if you make one button red it stands out, if you make them all red none of them do. This also applies to marketing. What was great 3 years ago is barely adequate today, the standard is simply higher now. If you want to stand out you need to up your game.\n\nA little introduction of myself: My name is Olav, I’m a design engineer with 12 years of building, designing and marketing products. I started my first company in 2020, Modulize, then went on to be the first designer and technical employee in Wordware, where we notoriously took down Product Hunt and became Product of the Year in 2024. We started Blume in 2025 originally as a landing page builder with automatic content updates, before we pivoted to focus on building the control plane for agentic coding.\n\nHigh-quality landing pages have always been a passion of mine. I think that is reflected in [blume.codes](https://blume.codes/).\n\nThe goal isn’t simply to convince, but to amaze. You want the audience to engage with your site thinking Wow, this is something else. To hopefully spark some ideas in you on how you can do this, I will share some of the elements that make [blume.codes](http://blume.codes/) unique, how we built them and how you can build similar effects. More importantly though, I will try to talk about our process for coming up with unique ideas that make you stand out in the crowd. While we don’t encourage 1:1 imitation, we would love to see more creative and beautiful websites with cool ideas. Hopefully the ideas you come up with are even better than ours.\n\nSo let’s go through it. If you haven’t already, now is a good time to simply scroll through [blume.codes](http://blume.codes/) and see for yourself. Take a minute to do so before you continue reading. See if you can spot the four elements that make the site feel uniquely alive.\n\nSo, the four specific ideas I want to highlight are\n\n1. The hero parallax-effect\n\n1. The fully interactive product “screenshots”\n\n1. The flowery “journey” vector line\n\n1. The flower theme picker / switcher\n\nI’ll explain what each element does, how we built it and why it belongs on the page.\n\n# Parallax Hero\n\nWhen you first visit [blume.codes](http://blume.codes/) you see an epic landscape filled with flowers. In the first iteration, this felt flat and boring. The obvious solution was depth. Parallax is nothing new, but parallax effects aren’t super easy to build, so I’ll mostly focus on the “how”.\n\n## How we built it\n\nWhat you need: A codex subscription\n\nWhy Codex? Because Codex can both code and generate images. If you prefer, you can use a different harness like Claude Code and give it like a [fal.ai](http://fal.ai/) API key, but I recommend Codex for this task.\n\nHere are the steps:\n\n1) Define your aesthetic\n\nPrompt your codex agent with the vibe. Our prompt was something like “epic landscape filled with flowers, with a Makoto Shinkai modern aesthetic”. I also attached our flower logo images so that there would be brand consistency. After some iteration, I landed on this as our reference image.\n\n![](https://pbs.twimg.com/media/HRE1I_sX0AAnv4D.jpg)\n\nThis is good because it has natural depth, fits with our brand, and it’s beautiful.\n\n2) Figure out the layers\n\nYou should have a minimum of 3 layers to achieve the effect. Because of the innate depth in our reference image, we ended up with 7 layers. Here is an example:\n\nbase layer: sky and far away mountains\nmid layer: grassy hills with flowers\nfront layer: in-focus flowers\n\n![](https://pbs.twimg.com/media/HRE1L8YXkAAGbUr.jpg)\n\n3) Let Codex rip\n\nGive your reference image and layers to Codex with this prompt:\n\nFrom here, iterate until it feels good to you.\n\n## Why it works\n\nThe parallax effect turns the flowery landscape from a background into a world that our visitors enter. It provides the immediate “wow”, makes the site memorable and thematically rhymes with our brand. It’s not an arbitrary effect, it feels consistent, and last but not least, it rewards the user for scrolling.\n\n# Interactive Product Demo\n\nYou have to show your product on your site, but if you are a start-up, your product is hardly static. Screenshots will go stale every week. Keeping it up to date becomes a game of catch-up.\n\nWhen we push design changes to the Blume app, the landing page automatically updates too. But even more interesting is that the Blume app on our site is actually a fully interactive representation of our product, shown with mock data. Users can get a good feel of how the product works before they download. How did we achieve this?\n\n## How we built it\n\nSimply put: We have a Turborepo setup where the electron app is a thin shell with only electron-specific code. The UI and business logic is fully encapsulated in reusable packages.\n\nOur landing page and electron app are both contained in this mono-repo, and consume the same UI package. That’s it.\n\nGetting there was a bit of a challenge though. We didn’t have the foresight to focus on the architecture from the get-go. This might seem unbelievable, but it’s true: Codex ran a week-long /goal task to refactor our repo for this purpose. This made sense for us to do because it also unlocked browser-based testing of our app, but in the end the landing page was an equally large unlock.\n\n## Why it works\n\nA visitor simply wants one question answered: “Is this product for me?”. They want to know if the friction of downloading the app is worth it. From our point of view, we only want users who actually want what we are offering. This way, we both win.\n\n# Sprouting Vine\n\nAs you scroll past the hero section, you will see a growing vine with sprouting flowers, leading you through the Blume user journey.\n\n## How we built it\n\n1. A vector line is drawn through a pre-defined path on scroll.\n\n1. Flower crowns are generated on the spot using a custom [Dicebear](https://www.dicebear.com/) style.\n\n1. The crowns are seeded using the current date, making them change every day.\n\nThis is the smallest and simplest feature that contributes to the overall feeling of the site.\n\n## Why it works\n\nThe vine rewards users for scrolling further. My mental model is the site should work like a song. Each part should flow into the next, every section should fulfil a purpose. Once the flow stops, they leave. Don’t give the audience the chance to get bored.\n\n# Flower Theme\n\nOne recurring theme in Blume is our 6 flowers. In the Blume app, you can use whichever theme you prefer. We wanted to have the same experience on our landing page. This is what we ended up with:\n\nAs you can see, there is full page consistency. If you have ever implemented a dark mode toggle into your app, you already know most of it. The way we took it one step further is by making sure the theme was more broadly used, even in images. We provided the source images for each flower, and generated new versions of all the page graphics for each theme. That’s it.\n\nThis is an aspect of the site we intentionally kept somewhat hidden. We don’t want to force it upon visitors, it’s separate from the flow, it’s more of an easter egg. It’s even possible to set the page level theme by clicking into settings in the app demo. This is what high quality architecture enables.\n\n## Your Turn!\n\nThanks for reading all the way to the end! I hope you got some new ideas for how to step up your site to the next level. The next step now is asking yourself:\n\n1. Will my audience say “wow” when they visit my site right now?\n\n1. What are existing elements that with small changes could give such an effect?\n\n1. What are thematic elements in our brand that we can use? For instance, if your logo is a UFO, could it be used throughout the page somehow? If you are geo-based somehow, could you style the site dynamically with elements from the user’s country?\n\n1. What are features or experiences the user will have with your product that you could expose on the site in a way where the user gets a real understanding of the value?\n\nKeep iterating, and good luck!"}}