I am pretty into the noise/grain 
Incidentally I spent far too much time a few days ago tweaking SVG noise for my own blog (which I am about to bring back). SVG filters are astonishingly poorly documented. I was surprised.
But like I said above, if you can manage it some sort of holographic effect would be enticingly on-brand for a framework named Hologram. So in your case specifically I would probably go for that!
I can totally relate! I spent a full day, if not more, tweaking that noise/grain animation. The frustrating part is that one small change to any of the parameters and it looks completely different - it was hours of painstaking trial and error. So it would be a bummer if I had to get rid of it.
I absolutely love the holographic effect idea, and it would be perfect for the brand! But I’m afraid that would turn into a project of its own (as much as I’d love to dive into it). So for now, I’ve added a glitch effect to the text as a compromise - you can see it deployed on the live site.
Right now I’m trying to find a way to keep what’s there while addressing the concern that the page doesn’t show enough of what Hologram can do. I’m thinking about adding some kind of visual indicator that signals to visitors there’s more content if they scroll down. What do you think about that approach?
When they scroll, the noise/grain animation would disappear and transition into a more traditional value proposition/features layout - you know, text or bullet points in one column and an editor with code demonstrating each feature in the other. A few sections like that, probably including the bouncing ball demo as well. This way I can keep the animated grain above the fold while showcasing Hologram’s capabilities below the fold.
Start by taking a survey of what others have done. Here is what I’m seeing from Phoenix, Tailwind, and SolidJS (just the first three that came to mind):
You have the first two.
A code example is very doable. Just an example Hologram component (in code) on the left and what it looks like on the right. It could just be a screenshot on the right, even. Interactive (i.e. a playground, editable) would be nice some day but it sounds like that’s currently not easy for technical reasons.
The ball demo running in real-time with the code on the side would work, and you have clearly already validated it (everyone seemed impressed). My only concern would be that at a glance it may look more like a game engine or something than an app framework, but I think it could be made to work.
For features, just list your features!
It’s probably too early for the social proof stuff, so just leave that out for now.
Don’t allow yourself to get into a sunk cost mindset and compromise the function of the page. Redesign it to include the relevant information first and then find a way to incorporate the effect afterwards.
Personally I have long despised the “scroll indicator” approach you describe, as virtually every example of it I’ve seen has been a case of poor design. Actual pages with further content are usually recognizable as such. The scroll indicator pages are always intentionally designed to look like a single page (for what purpose?) and then bandaided with a scroll indicator afterwards, which is quite absurd.
As far as I can tell this style comes from attempts to mimic Apple’s product landing pages, with designers seemingly forgetting that everyone already knows what an iPhone is.
Yeah, I could frame the ball demo as proof of Hologram’s performance. Though I need to come up with some good copy to make it clear that’s not all Hologram is about.
Thanks for the ideas!
What I am referring to is “instant recognizability”. There are individuals who will come to your page, look at it for 2 seconds, and then close it and move on with their day. If the only thing they see in those two seconds is a physics demo they might be left thinking “oh it’s some Elixir game engine thing” and won’t come back later or will live with that wrong impression.
Copy will not help with this because these people are not going to read the copy.
Thinking about it more, I would suggest a “regular app” demo at the top (look at other pages for inspo) and then the ball demo or others down the page to show off the performance aspect. With that said, it would be nice if the “main” demo somehow made it clear that the code runs on the client, and the ball is great for that.
© Copyright Elixir Forum | Terms | Privacy & Cookies
