10 seconds of a hero we're designing & building. everything is choreographed; the shell scaling i...

10 seconds of a hero we're designing & building. everything is choreographed; the shell scaling i...10 seconds of a hero we're designing & building. everything is choreographed; the shell scaling i...

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Back to feedPost

Ahmed Alsayad

pro

• 2d

10 seconds of a hero we're designing & building. everything is choreographed; the shell scaling in, the phone settling, and a custom webgl depth reveal. we built it custom for one reason; the same effect lives in the brand's motion videos (That we are also working on). goal is: brand should speak the same language everywhere and look good doing it :)

Web Design Web Development Next.js

Sohrab Khan

• 2h

very good work, nice and clean

Ahmed Alsayad

pro

• 1h

Thanks!

acream

pro

• 2d

The animation of the gradient screen is so smooth 😭

Ahmed Alsayad

pro

• 2d

Thanks a lot <3 Appreciate the feedback :)

Job David

• 1d

Excellent design

Ahmed Alsayad

pro

• 1d

Thanks man!

Abdullah Eroğlu

pro

• 1d

Great minimal and reliable felt design i like the little depth parallax on the hero phone image and revela from blur keepping it minimalistic. Also the hover logo reveal looks really cool and embraces the minimalist design perfectly. Good work!

Emmanuel Bliss

pro

• Jul 18

I found this skincare brand on Instagram and instantly loved its identity.

After visiting the website, I saw an opportunity to improve the hero experience. I reached out but didn't get a response, so I redesigned it as a personal challenge.

My focus was simple: preserve the brand's premium aesthetic while improving clarity, hierarchy, and conversion.

Here's the

A. Before

B. After

Which version would you rather land on?

Also, i published the case study check comment for link

Figma Jitter Web Design

11 voted

85%

2 voted

15%

13 votes

Closed

Job David

• Jul 18

This is really well done.

Nick Zoutendijk

pro

• Jul 18

GenLayer is a brand for thinking machines. So the identity had to think too.

Instead of a static pattern I built a fluid animation system: lines that continuously flow into one another, the way AI evolves through new thoughts and ideas. One system, endless moments, the same waves that breathe on the website also carry a conference wall or a product reveal.

That's my bar for an AI-driven brand style: not "does it look techy," but "does it behave like the product."

Curious how other designers handle this: when your identity is animated or generative, how do you keep it recognizable without freezing it into a template?

Brand Design Adobe After Effects brandidentity motiondesign

Maty Sandoval

max

• Jul 18

That line about one system with endless moments really lands, especially paired with the waves visual. Did you build the animation in After Effects directly or block it out somewhere else first?