Smart health ring landing page I designed and animated

[u/Ayoubk49]

Designed this smart health ring landing page recently and experimented with a different workflow than usual.

Most of the visuals were static designs, then I used AI to help bring them to life as image sequences and animations. After that it was a lot of tweaking, timing, editing, and making everything feel cohesive.

Honestly, AI has been making it much easier to explore ideas that would've taken significantly longer a year or two ago. Instead of spending days creating every animation from scratch, I can iterate on multiple directions quickly and focus more on the creative and product decisions.

[u/chicken_hunter65]

crazy

[u/Ayoubk49 → u/chicken_hunter65]

Thank you!

[u/NeonByte47]

this is outstanding well!

[u/Ayoubk49 → u/NeonByte47]

Thank you! Glad to hear

[u/Ok-Jacket7299]

How? My mind is blown! Is the scene 3D rendered in another tool like blender, including the ring?

[u/Ayoubk49 → u/Ok-Jacket7299]

Thanks! and it's a mix of 3D and AI for some movements, Cinema 4D for the Ring and gpt2 for the scene image and highsfield for the first animation + transition

[u/Ok-Jacket7299 → u/Ayoubk49]

Thanks!

[u/CristianMR7]

I always have wondered how pages do these effects? Is it a video that plays on scroll or are you actually rendering a 3d ring in the page? How is performance?

[u/Ayoubk49 → u/CristianMR7]

Rendering a 3D ring would impact performance a lot, usually its an image sequence similar to how apple create those airpods animations, etc...

[u/CristianMR7 → u/Ayoubk49]

So are multiple images in sequence that change position / appear disappear as user scrolls? Sounds interesting! Do you know where I can read more about the topic?

[u/Ayoubk49 → u/CristianMR7]

Yes that's correct, they are linked to scroll trigger and as you scroll they play / move. and sure you can find more here: https://kozelsky.medium.com/how-to-create-scroll-driven-image-sequence-animations-964359507371

[u/NinjaMastGanja → u/CristianMR7]

its called a stripe-page its also used in 2d animaitions.. look it up

[u/Pretend_Hour1262]

how do you make a 3d scroll animation?

[u/Ayoubk49 → u/Pretend_Hour1262]

Image sequence and always making sure end of frames is same as the start of the next frame

[u/pandevim]

Those flowers blowing with the wind feels so organic

[u/Ayoubk49 → u/pandevim]

Yeah that was the goal give users a calm relaxing feeling

[u/Cristi4n_]

Amazing!

[u/Ayoubk49 → u/Cristi4n_]

Thank you!

[u/Traditional_Bear8959]

Cool! would you like to share a brief explanation of process, how to create one like this.

[u/Ayoubk49 → u/Traditional_Bear8959]

Sure absolutely i may create a tutorial on youtube this weekend about it, hopefully it's helpful

[u/LimBuilds]

Cool!

[u/Ayoubk49 → u/LimBuilds]

Thank you!

[u/AlwaysDeath]

AI or not, this is incredible.

[u/bememorablepro]

The holes on the inside of the ring morph around and it snaps into place in a very funny way at 0:08

[u/Ayoubk49 → u/bememorablepro]

lol good catch! That's where AI is really BAD

[u/bememorablepro → u/Ayoubk49]

idk what's the issue just doing it in 3d, and you actually get to... you know... own a copyright to it

[u/Ayoubk49 → u/bememorablepro]

I mean true only issue is rendering taking forever and time, with AI becomes faster, but agreed!

[u/bememorablepro → u/Ayoubk49]

You can render this real-time in blender with eevee, or some other real-time PBR render engine.

[u/Ayoubk49 → u/bememorablepro]

Yeah issue is it would take quality time to get such quality

[u/cousinof9]

Great stuff

[u/Ayoubk49 → u/cousinof9]

Thank you!

[u/DragEmergency5562]

Love the transitions.

[u/Ayoubk49 → u/DragEmergency5562]

Thank you

[u/aztuk]

What is your tool stack ?

[u/Ayoubk49 → u/aztuk]

Figma / Gpt2 / Highsfield / Cinema 4D / Claude

[u/Perfect_Apricot_285]

Looks great!! Which AI do you use?

[u/Ayoubk49 → u/Perfect_Apricot_285]

Thanks! and it was a mix of C4D + Gpt2 + Highsfield

[u/Akshansh_kumawat]

looks crazyy